🚧 transition to scss

thibaudbrault · Jun 26, 2023 · 7a0618a · 7a0618a
1 parent 68dcfa5
commit 7a0618a
Show file tree

Hide file tree

Showing 58 changed files with 1,141 additions and 835 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -6,4 +6,4 @@ indent_size = 2
 charset = utf-8
 end_of_line = lf
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = false
diff --git a/src/components/common/styles/Animations.tsx b/src/components/common/styles/Animations.tsx
@@ -13,52 +13,3 @@ export const Wiggle = keyframes`
     95% {transform: rotate(-5deg);}
     100% {transform: rotate(0deg);}
 `;
-
-export const fadeInUpVariant = {
-  hidden: {
-    y: 60,
-    opacity: 0,
-  },
-  show: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      type: `spring`,
-      mass: 1,
-      damping: 15,
-      stiffness: 200,
-    },
-  },
-  exit: {
-    y: 0,
-    opacity: 0,
-  },
-  hover: {
-    zIndex: 1,
-    scale: [1, 1.05, 1.02],
-    rotate: [0, 1, -1, 0],
-    transition: {
-      duration: 0.2,
-    },
-  },
-  tap: { scale: 0.99 },
-};
-
-export const placeholderVariant = {
-  initial: {
-    opacity: 1,
-    scale: 1,
-  },
-  animate: {
-    opacity: 1,
-    scale: 1,
-  },
-  exit: {
-    opacity: 0,
-    scale: 0,
-    transition: {
-      duration: 0.2,
-      ease: `easeInOut`,
-    },
-  },
-};
diff --git a/...omponents/layout/Footer/Styled.Footer.tsx → ...mponents/layout/Footer/Footer.module.scss b/...omponents/layout/Footer/Styled.Footer.tsx → ...mponents/layout/Footer/Footer.module.scss
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+@use '@/styles/abstracts' as *;
 
-export const FooterContainer = styled.footer`
+.footer {
   display: flex;
   align-items: center;
   background: hsla(29, 92%, 70%, 1);
@@ -19,36 +19,36 @@ export const FooterContainer = styled.footer`
     hsla(29, 92%, 70%, 1) 0%,
     hsla(0, 87%, 73%, 1) 100%
   );
-`;
+}
 
-export const FooterInner = styled.div`
+.inner {
   width: 90%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 30% 40% 30%;
   align-items: center;
-  color: #161616;
-`;
+  color: $dark;
+}
 
-export const LeftFooter = styled.div`
+.left {
   justify-self: left;
   font-size: 1.3rem;
-`;
+}
 
-export const CenterFooter = styled.div`
+.center {
   justify-self: center;
   font-size: 4rem;
   letter-spacing: 1px;
   font-family: 'Oswald';
-  color: ${({ theme }) => theme.secondary};
-  text-shadow: ${({ theme }) => theme.main} -1px -1px 0px,
-    ${({ theme }) => theme.main} 1px -1px 0px,
-    ${({ theme }) => theme.main} -1px 1px 0px,
-    ${({ theme }) => theme.main} 1px 1px 0px;
   text-align: center;
-`;
+  @include themed {
+    color: t('text');
+    text-shadow: t('bg') -1px -1px 0px, t('bg') 1px -1px 0px,
+      t('bg') -1px 1px 0px, t('bg') 1px 1px 0px;
+  }
+}
 
-export const RightFooter = styled.div`
+.right {
   justify-self: right;
   height: 4rem;
   width: 4rem;
@@ -64,4 +64,4 @@ export const RightFooter = styled.div`
       height: 100%;
     }
   }
-`;
+}
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
@@ -1,21 +1,15 @@
 import { FaGithub } from '@meronex/icons/fa';
-import {
-  CenterFooter,
-  FooterContainer,
-  FooterInner,
-  LeftFooter,
-  RightFooter,
-} from './Styled.Footer';
+import styles from './Footer.module.scss';
 
 export function Footer() {
   const year = new Date().getFullYear();
 
   return (
-    <FooterContainer id="footer">
-      <FooterInner>
-        <LeftFooter>© {year} PokéRef</LeftFooter>
-        <CenterFooter>PokéRef</CenterFooter>
-        <RightFooter>
+    <footer className={styles.footer} id="footer">
+      <div className={styles.inner}>
+        <div className={styles.left}>© {year} PokéRef</div>
+        <div className={styles.center}>PokéRef</div>
+        <div className={styles.right}>
           <a
             href="https://github.com/thibaudbrault/PokeRef"
             aria-label="Github"
@@ -24,8 +18,8 @@ export function Footer() {
           >
             <FaGithub />
           </a>
-        </RightFooter>
-      </FooterInner>
-    </FooterContainer>
+        </div>
+      </div>
+    </footer>
   );
 }
diff --git a/...omponents/layout/Header/Styled.Header.tsx → ...mponents/layout/Header/Header.module.scss b/...omponents/layout/Header/Styled.Header.tsx → ...mponents/layout/Header/Header.module.scss
@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-import { device } from '../../common/styles/Sizing';
+@use '@/styles/abstracts' as *;
 
-export const HeaderBtnConnect = styled.div`
+.connect {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
@@ -11,39 +10,45 @@ export const HeaderBtnConnect = styled.div`
     align-items: center;
     justify-content: center;
     padding: 0.7rem 1.5rem;
-    background: ${({ theme }) => theme.secondary};
     border: 1px solid transparent;
     border-radius: 5px;
-    color: ${({ theme }) => theme.main};
     font-size: 1.5rem;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s ease-in-out;
+    @include themed {
+      background-color: t('text');
+      color: t('bg');
+    }
 
-    @media ${device.md} {
+    @include md {
       font-size: 3rem;
     }
 
     &:first-of-type {
       background: transparent;
-      border-color: ${({ theme }) => theme.secondary};
-      color: ${({ theme }) => theme.secondary};
+      @include themed {
+        border-color: t('text');
+        color: t('text');
+      }
     }
 
     &:hover {
       background: transparent;
-      border-color: ${({ theme }) => theme.secondary};
-      color: ${({ theme }) => theme.secondary};
+      @include themed {
+        border-color: t('text');
+        color: t('text');
+      }
     }
   }
 
-  @media ${device.md} {
+  @include md {
     width: 80%;
     justify-content: space-evenly;
   }
-`;
+}
 
-export const HeaderBtnConnected = styled.div`
+.connected {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
@@ -54,72 +59,81 @@ export const HeaderBtnConnected = styled.div`
     align-items: center;
     justify-content: center;
     padding: 0.7rem 1.5rem;
-    background: ${({ theme }) => theme.secondary};
     border: 1px solid transparent;
     border-radius: 5px;
-    color: ${({ theme }) => theme.main};
     font-size: 1.5rem;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s ease-in-out;
+    @include themed {
+      background-color: t('text');
+      color: t('bg');
+    }
 
     &:hover {
       background: transparent;
-      border-color: ${({ theme }) => theme.secondary};
-      color: ${({ theme }) => theme.secondary};
+      @include themed {
+        border-color: t('text');
+        color: t('text');
+      }
     }
 
-    @media ${device.md} {
+    @include md {
       font-size: 3rem;
     }
   }
 
   & :first-child {
     background: transparent;
-    border-color: ${({ theme }) => theme.secondary};
-    color: ${({ theme }) => theme.secondary};
+    @include themed {
+      border-color: t('text');
+      color: t('text');
+    }
   }
 
-  @media ${device.md} {
+  @include md {
     width: 80%;
     justify-content: space-evenly;
   }
-`;
+}
 
-export const HeaderContainer = styled.header`
+.header {
   width: 90%;
   margin: 0 auto 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  @media ${device.sm} {
+  @include sm {
     width: 95%;
   }
 
-  & ${HeaderBtnConnect}, ${HeaderBtnConnected} {
-    @media ${device.md} {
+  & .connect,
+  .connected {
+    @include md {
       display: none;
     }
   }
-`;
+}
 
-export const HeaderBtnContainer = styled.div`
+.buttons {
   display: flex;
   align-items: center;
   gap: 3rem;
-`;
+}
 
-export const HeaderBtnTheme = styled.button`
+.theme {
   width: 48px;
   height: 48px;
   background: none;
   border: none;
-  color: ${({ theme }) => theme.secondary};
   font-size: 48px;
-`;
+  @include themed {
+    color: t('text');
+  }
+}
 
-export const BurgerOpen = styled.button`
+.open {
   display: none;
   align-items: center;
   justify-content: center;
@@ -130,30 +144,36 @@ export const BurgerOpen = styled.button`
   padding: 1rem;
   border: 1px solid transparent;
   border-radius: 50px;
-  background-color: ${({ theme }) => theme.secondary};
-  color: ${({ theme }) => theme.main};
   font-size: 48px;
   transition: 0.3s ease-in-out;
+  @include themed {
+    background-color: t('text');
+    color: t('bg');
+  }
 
   &:hover {
-    border: 1px solid ${({ theme }) => theme.secondary};
-    background-color: ${({ theme }) => theme.main};
-    color: ${({ theme }) => theme.secondary};
+    @include themed {
+      border: 1px solid t('text');
+      background-color: t('bg');
+      color: t('text');
+    }
   }
 
-  @media ${device.md} {
+  @include md {
     display: flex;
   }
-`;
+}
 
-export const BurgerClose = styled.button`
+.close {
   display: none;
   font-size: 48px;
   background: transparent;
   border: none;
-  color: ${({ theme }) => theme.secondary};
+  @include themed {
+    color: t('text');
+  }
 
-  @media ${device.md} {
+  @include md {
     display: flex;
   }
-`;
+}