Reorganising file structure and cleaning up folders and files

src/components/PageContainer.tsx

@@ -4,14 +4,21 @@ import styled, { css } from 'styled-components'
 export const Container: React.FC = styled.div`
   display: flex;
   flex-direction: column;
+  min-height: calc(100vh - ${p => p.theme.footH});
 
   & > div:first-child {
     padding-top: calc(${p => p.theme.navH + 'rem'} + 5vw);
   }
+  & > div:last-child {
+    padding-bottom: 5rem;
+  }
+`
 
-  /* & > div:last-child { */
-  /*   padding-bottom: 4rem; */
-  /* } */
+export const Title: React.FC = styled.p`
+  text-align: center;
+  align-self: center;
+  font-size: 3rem;
+  font-weight: 900;
 `
 
 export const TopRow: React.FC = styled.div.attrs(() => ({
@@ -33,6 +40,8 @@ export const TopRow: React.FC = styled.div.attrs(() => ({
 
 export const Row = styled.div`
   display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 2rem ${p => p.theme.sidePad};
 `
 

src/components/RowGradient.tsx

@@ -9,7 +9,7 @@ export const RowGradient = styled(Grid)`
   max-width: 90rem;
   background: linear-gradient(
     45deg,
-    ${p => p.theme.blue} 10%,
+    ${p => p.theme.lavender} 10%,
     ${p => p.theme.violet} 90%
   );
   clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);

src/components/common/Button.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components"
+
+export const BtnRed = styled.button`
+  border: none;
+  cursor: pointer;
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: ${p => p.theme.bg};
+  background-color: ${p => p.theme.red};
+  border-radius: ${p => p.theme.buttonR};
+  align-self: center;
+  padding: 0.5rem 1.5rem;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: ${p => p.theme.pink};
+  }
+`
+
+export const Btn = styled.button`
+  border: none;
+  cursor: pointer;
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: ${p => p.theme.bg};
+  background-color: ${p => p.theme.violet};
+  border-radius: ${p => p.theme.buttonR};
+  align-self: center;
+  padding: 0.5rem 1.5rem;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: ${p => p.theme.pink};
+  }
+`

src/components/Footer.tsx → src/components/footer/Footer.tsx

@@ -4,24 +4,13 @@ import styled from 'styled-components'
 
 const FooterContainer = styled.footer`
   display: flex;
-  height: ${p => p.theme.footH + 'rem'};
+  height: ${p => p.theme.footH};
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
   background-color: ${p => p.theme.black};
-
 `
 
-// const TextContainer = styled.div`
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   flex-direction: row;
-//   flex-grow: 1;
-//   padding: 1.5rem 0;
-//   background-color: ${p => p.theme.lavender};
-// `
-
 const ButtonContainer = styled.div`
   display: flex;
   align-items: center;
@@ -104,7 +93,7 @@ const Footer: React.FC = () => {
 
       <CopyrightContainer>
         <p>
-          © 2022 Copyright: <b>Jorge B.</b>
+          2022 Design by: <b>Jorge B.</b>
         </p>
       </CopyrightContainer>
     </FooterContainer>

src/components/loading/Loading.tsx

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components'
+import appTheme from '../../styles/theme'
+
+const LoadingContainer = styled.div`
+  display: flex;
+  justify-self: center;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  margin: 4rem 0;
+`
+
+function createAnimation() {
+  let styles = ''
+  for (let i = 1; i <= 5; i++) {
+    const e = 4 // the constant to update the difference between start and end
+    styles += `
+    & span:nth-child(${i}) {
+      animation: pulse${i} 4s ease-in-out infinite;
+    }
+    @keyframes pulse${i} {
+      ${i * e}% {
+        font-size: var(--size);
+      color:${appTheme.fg};
+      }
+      ${i * e + 2 * e}% {
+        font-size: calc(var(--size) * 1.3);
+      color:${appTheme.pink};
+      }
+      ${i * e + 4 * e}% {
+        font-size: var(--size);
+      color:${appTheme.pink};
+      }
+    }
+    `
+  }
+  return css`
+    ${styles}
+  `
+}
+
+const JPText = styled.p.attrs(() => ({
+  lang: 'ja',
+}))`
+  --size: 3rem;
+  font-size: var(--size);
+  font-weight: 600;
+  color: ${p => p.theme.fg};
+  white-space: nowrap;
+  transition: all ease-in-out 0.25s;
+  line-height: 1.8rem; /* keep in mind this is vertical text, so this is the width */
+
+  ${createAnimation()}
+`
+
+const Loading = () => {
+  return (
+    <LoadingContainer>
+      <JPText>
+        <span>ロ</span>
+        <span>ー</span>
+        <span>デ</span>
+        <span>ィ</span>
+        <span>ン</span>
+        <span>グ</span>
+        {/* <span>あ</span> */}
+        {/* <span>り</span> */}
+        {/* <span>が</span> */}
+        {/* <span>と</span> */}
+        {/* <span>う</span> */}
+      </JPText>
+    </LoadingContainer>
+  )
+}
+
+export default Loading

src/components/NavBar.tsx → src/components/navbar/NavBar.tsx

@@ -9,7 +9,7 @@ import {
   MenuLinkName,
   NavContainer,
   Overlay,
-} from './navbar/styled'
+} from './styled'
 
 const NavBar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false)

src/components/navbar/styled.ts

@@ -22,7 +22,7 @@ export const NavContainer = styled.nav<NavContainerProps>`
   align-items: stretch;
   transition: all ease-in-out 0.25s;
 
-  @media (max-width: ${p => p.theme.mediaSm}) {
+  @media (max-width: ${p => p.theme.mediaMd}) {
     flex-direction: column;
     background-color: ${p =>
       p.scrollpos !== 0 || p.isopen ? p.theme.bg : null};
@@ -37,7 +37,7 @@ export const LogoContainer = styled.div`
   align-self: flex-start;
   white-space: nowrap;
 
-  @media (max-width: ${p => p.theme.mediaSm}) {
+  @media (max-width: ${p => p.theme.mediaMd}) {
     position: absolute;
     top: 0rem;
     left: 0rem;
@@ -66,7 +66,7 @@ export const HamburguerContainer = styled.div<MenuProps>`
   color: ${p => p.theme.fg};
   justify-content: center;
 
-  @media (max-width: ${p => p.theme.mediaSm}) {
+  @media (max-width: ${p => p.theme.mediaMd}) {
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -120,13 +120,13 @@ export const Menu = styled.ul<MenuProps>`
   justify-content: flex-end;
   transition: all ease-in-out 0.25s;
 
-  @media (max-width: ${p => p.theme.mediaSm}) {
+  @media (max-width: ${p => p.theme.mediaMd}) {
     display: flex;
     background-color: ${p => p.theme.bg};
     flex-direction: column;
     margin-top: var(--navH);
     width: 100%;
-    height: ${p => (p.isopen ? '20rem' : '0')};
+    height: ${p => (p.isopen ? '25rem' : '0')};
     /* box-shadow: rgb(10 10 10 / 15%) 0px 0.5rem 1rem 0px; */
   }
 `
@@ -157,7 +157,7 @@ export const MenuLink = styled(NavLink)<MenuProps>`
     }
   }
 
-  @media (max-width: ${p => p.theme.mediaSm}) {
+  @media (max-width: ${p => p.theme.mediaMd}) {
     display: flex;
     justify-content: center;
     visibility: ${p => (p.isopen ? 'visible' : 'hidden')};
@@ -193,7 +193,7 @@ export const MenuLinkName = styled.span`
 export const Overlay = styled.div<MenuProps>`
   visibility: hidden;
 
-  @media (max-width: ${p => p.theme.mediaSm}) {
+  @media (max-width: ${p => p.theme.mediaMd}) {
     display: block;
     visibility: ${p => (p.isopen ? 'visible' : 'hidden')};
     position: fixed;

src/pages/Home.tsx

@@ -1,15 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Cell, Container, Grid, TopRow } from '../components/PageContainer'
+import {
+  Container,
+  Grid,
+  Title,
+  TopRow,
+} from '../components/PageContainer'
 import { JLPTn5, RowGradient } from '../components/RowGradient'
 
-const Title: React.FC = styled.p`
-  text-align: center;
-  align-self: center;
-  font-size: 3rem;
-  font-weight: 900;
-`
-
 const LastRow = styled(Grid)`
   --specPad: 6rem;
   padding-top: calc(var(--specPad) * 2);
@@ -27,18 +25,8 @@ export const Home: React.FC = () => {
   return (
     <Container>
       <TopRow>
-        <Cell>
-          <Title>Practice Kanji for JLPT N5</Title>
-        </Cell>
-        {/* <VertJPText size={4} bottom={10} left={85}> */}
-        {/*   <span>あ</span> */}
-        {/*   <span>り</span> */}
-        {/*   <span>が</span> */}
-        {/*   <span>と</span> */}
-        {/*   <span>う</span> */}
-        {/* </VertJPText> */}
+        <Title>Practice Kanji for JLPT</Title>
       </TopRow>
-      <Grid></Grid>
       <RowGradient>
         <JLPTn5 to={'/kana'}>
           <h1>KANA</h1>

src/pages/Kanji.tsx

@@ -1,12 +1,9 @@
-import React, { useContext } from 'react'
-import styled from 'styled-components'
-import { Container, TopRow,  Row } from '../components/PageContainer'
-import KanjiPicker  from '../components/KanjiPicker'
-import { KanjiContext } from '../context/KanjiContext'
-
+import React from 'react'
+import { Container, TopRow, Title } from '../components/PageContainer'
+import KanjiPicker from '../components/kanjipicker/KanjiPicker'
+// import { KanjiContext } from '../context/KanjiContext'
 
 export const Kanji: React.FC = () => {
-
   return (
     <Container>
       <TopRow>
@@ -16,9 +13,3 @@ export const Kanji: React.FC = () => {
     </Container>
   )
 }
-
-const Title: React.FC = styled.p`
-  align-self: center;
-  font-size: 3rem;
-  font-weight: 900;
-`

src/styles/theme.tsx

@@ -15,10 +15,11 @@ export interface ThemeType {
 
   navH: number
   navHS: number
-  footH: number
+  footH: string
   borderR: string
   buttonR: string
   sidePad: string
+  compPad: string
 
   mediaSm: string
   mediaMd: string
@@ -30,33 +31,30 @@ const appTheme: ThemeType = {
   // vvvvvvvvvvvvvvvv
   fg: '#30332E',
   bg: '#ffffff',
-  // red: '#B3421D',
   red: '#A31621',
-  // red: '#85212B',
   orange: '#C3533D',
-  grey: '#373460',
+  grey: '#cfcfcf',
   black: '#30332E',
   lavender: '#EAE6FF',
   violet: '#8479d1',
   purple: '#3e3491',
-  // blue: '#5ac3e3',
   blue: '#009FFF',
   yellow: '#f5c745',
-  // pink: '#ef87cb',
   pink: '#ec2F4B',
   // ]]]
   // ---- SIZING ----
   // vvvvvvvvvvvvvvvv
   navH: 4,
   navHS: 3,
-  footH: 10,
+  footH: '10rem',
   // [[[ OTHER VALUES ----
   borderR: '0.5rem',
   buttonR: '0.3rem',
   // OTHER VALUES ---- ]]]
   // ---- PADDING ----
   // vvvvvvvvvvvvvvvv
   sidePad: '10vw',
+  compPad: '3rem',
   // ---- MEDIA ----
   // vvvvvvvvvvvvvvvv
   mediaSm: '850px',