Fully converted to MUI

AndrewDragonCh · Feb 18, 2024 · bc61112 · bc61112
1 parent fb23040
commit bc61112
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -17,16 +17,16 @@ export default function GlobalError({
     <html>
       <body>
         <main>
-          <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
-            <Box display="flex" flexDirection="row">
+          <Box className='main'>
+            <Box className='head'>
               <h1 className='title animate__animated animate__backInDown'>
                 Error
               </h1>
               <h1 className='title orange animate__animated animate__delay-1s animate__fadeInRight'>
                 {error.name}
               </h1>
             </Box>
-            <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
+            <Box className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
               <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
                 <Link href="/" >
                   {error.message}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -15,14 +15,21 @@ a {
   box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
+.main {
+  min-height: 90vh;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.head {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .title {
@@ -38,6 +45,11 @@ a {
   font-weight: 400;
 }
 
+.mainbody {
+  display: flex;
+  flex-direction: column;
+}
+
 .description {
   margin: 2rem 0;
   line-height: 1.5;
@@ -50,6 +62,14 @@ a {
   text-align: center;
 }
 
+.linksbox {
+  display: grid;
+  grid-template-columns: repeat(2, 320px);
+  grid-template-rows: 1fr;
+  justify-content: center;
+  align-items: center;
+}
+
 .links {
   margin: 0;
   line-height: 1.5;
@@ -58,10 +78,8 @@ a {
 }
 
 .links a {
-  margin: 0;
   padding: 1.5rem 5rem;
   display: inline-block;
-  text-align: center;
 }
 
 .orange {

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -5,16 +5,16 @@ import 'animate.css'
 export default function NotFound() {
   return (
     <main>
-      <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
-        <Box display="flex" flexDirection="row">
+      <Box className='main'>
+        <Box className='head'>
           <h1 className='title animate__animated animate__backInDown'>
             Error
           </h1>
           <h1 className='title orange animate__animated animate__delay-1s animate__fadeInRight'>
             404
           </h1>
         </Box>
-        <Box display="flex" flexDirection="column" className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
+        <Box className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
           <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
             <Link href="/" >
               Page Not Found

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,20 +5,20 @@ import 'animate.css'
 export default function Home() {
   return (
     <main>
-      <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
-        <Box display="flex" flexDirection="row">
+      <Box className='main'>
+        <Box className='head'>
           <h1 className='title animate__animated animate__backInDown'>
             Andrew
           </h1>
           <h1 className='title orange animate__animated animate__delay-1s animate__fadeInRight'>
             Dragon
           </h1>
         </Box>
-        <Box display="flex" flexDirection="column" className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
+        <Box className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
           <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
             YouTube Streamer and Content Creator
           </h2>
-          <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="1fr" justifyContent="center" alignItems="center">
+          <Box className='linksbox'>
             <p className='links animate__animated animate__zoomIn animate__delay-2s'>
               <Link href="/links">
                 My Socials