refactor: login and errorpage layout

d3george · Oct 11, 2023 · 302a5fa · 302a5fa
1 parent d8d7f1f
commit 302a5fa
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 />