From 302a5fa532ba10ef55bbfa4cf707bd105af772fa Mon Sep 17 00:00:00 2001
From: d3george <dingsheng1214@gmail.com>
Date: Wed, 11 Oct 2023 10:30:12 +0800
Subject: [PATCH] refactor: login and errorpage layout

---
 src/pages/sys/error/Page403.tsx | 14 +++++++++++---
 src/pages/sys/error/Page404.tsx | 14 +++++++++++---
 src/pages/sys/error/Page500.tsx | 14 +++++++++++---
 src/pages/sys/login/Login.tsx   |  2 +-
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/pages/sys/error/Page403.tsx b/src/pages/sys/error/Page403.tsx
index c96a5a67..086af834 100644
--- a/src/pages/sys/error/Page403.tsx
+++ b/src/pages/sys/error/Page403.tsx
@@ -24,9 +24,11 @@ export default function Page403() {
       </Helmet>
 
       <div className="m-auto max-w-[400px]">
-        <MotionContainer className="flex flex-col items-center justify-center">
+        <MotionContainer className="flex flex-col items-center justify-center px-2">
           <m.div variants={varBounce().in}>
-            <Typography.Title level={2}>No permission</Typography.Title>
+            <Typography.Title level={3} className="text-center">
+              No permission
+            </Typography.Title>
           </m.div>
 
           <m.div variants={varBounce().in}>
@@ -37,7 +39,13 @@ export default function Page403() {
           </m.div>
 
           <m.div variants={varBounce().in}>
-            <svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400}>
+            <svg
+              viewBox="0 0 480 360"
+              xmlns="http://www.w3.org/2000/svg"
+              width={400}
+              height={400}
+              className="w-full"
+            >
               <defs>
                 <linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
                   <stop offset="0%" stopColor={colorPrimary} />
diff --git a/src/pages/sys/error/Page404.tsx b/src/pages/sys/error/Page404.tsx
index 2b8818e8..44ada9fb 100644
--- a/src/pages/sys/error/Page404.tsx
+++ b/src/pages/sys/error/Page404.tsx
@@ -24,9 +24,11 @@ export default function Page404() {
       </Helmet>
 
       <div className="m-auto max-w-[400px]">
-        <MotionContainer className="flex flex-col items-center justify-center">
+        <MotionContainer className="flex flex-col items-center justify-center px-2">
           <m.div variants={varBounce().in}>
-            <Typography.Title level={2}>Sorry, Page Not Found!</Typography.Title>
+            <Typography.Title level={3} className="text-center">
+              Sorry, Page Not Found!
+            </Typography.Title>
           </m.div>
 
           <m.div variants={varBounce().in}>
@@ -37,7 +39,13 @@ export default function Page404() {
           </m.div>
 
           <m.div variants={varBounce().in}>
-            <svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400}>
+            <svg
+              viewBox="0 0 480 360"
+              xmlns="http://www.w3.org/2000/svg"
+              width={400}
+              height={400}
+              className="w-full"
+            >
               <defs>
                 <linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
                   <stop offset="0%" stopColor={colorPrimary} />
diff --git a/src/pages/sys/error/Page500.tsx b/src/pages/sys/error/Page500.tsx
index 707faaa3..d1ddf921 100644
--- a/src/pages/sys/error/Page500.tsx
+++ b/src/pages/sys/error/Page500.tsx
@@ -17,9 +17,11 @@ export default function Page() {
       </Helmet>
 
       <div className="m-auto max-w-[400px]">
-        <MotionContainer className="flex flex-col items-center justify-center">
+        <MotionContainer className="flex flex-col items-center justify-center px-2">
           <m.div variants={varBounce().in}>
-            <Typography.Title level={2}>500 Internal Server Error</Typography.Title>
+            <Typography.Title level={3} className="text-center">
+              500 Internal Server Error
+            </Typography.Title>
           </m.div>
 
           <m.div variants={varBounce().in}>
@@ -29,7 +31,13 @@ export default function Page() {
           </m.div>
 
           <m.div variants={varBounce().in}>
-            <svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400}>
+            <svg
+              viewBox="0 0 480 360"
+              xmlns="http://www.w3.org/2000/svg"
+              width={400}
+              height={400}
+              className="w-full"
+            >
               <defs>
                 <linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
                   <stop offset="0%" stopColor={colorPrimary} />
diff --git a/src/pages/sys/login/Login.tsx b/src/pages/sys/login/Login.tsx
index 41dc144f..f9d57c95 100644
--- a/src/pages/sys/login/Login.tsx
+++ b/src/pages/sys/login/Login.tsx
@@ -45,7 +45,7 @@ function Login() {
         </Typography.Text>
       </div>
 
-      <div className="mx-auto flex !h-screen w-full max-w-[480px] flex-col px-[16px] py-[120px] lg:px-[64px] lg:py-[240px]">
+      <div className="m-auto flex !h-screen w-full max-w-[480px] flex-col justify-center px-[16px] lg:px-[64px]">
         <LoginStateProvider>
           <LoginForm />
           <MobileForm />