From 7a0618a313e9cadc0d8d4c83d02e12f20ca51c99 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Mon, 26 Jun 2023 17:15:42 +0200 Subject: [PATCH] :construction: transition to scss --- .editorconfig | 2 +- src/components/common/styles/Animations.tsx | 49 ---- .../{Styled.Footer.tsx => Footer.module.scss} | 34 +-- src/components/layout/Footer/Footer.tsx | 24 +- .../{Styled.Header.tsx => Header.module.scss} | 108 ++++--- src/components/layout/Header/Header.tsx | 41 ++- .../Nav/{Styled.Nav.tsx => Nav.module.scss} | 39 +-- src/components/layout/Nav/Nav.tsx | 38 ++- src/contexts/Theme/ThemeContext.tsx | 2 +- src/modules/404/NotFound.module.scss | 2 + src/modules/auth/Auth.module.scss | 20 +- src/modules/items/item/Item.module.scss | 2 + src/modules/locations/Locations.module.scss | 2 +- src/modules/pokedex/Pokedex.module.scss | 263 ++++++++++++++++++ src/modules/pokedex/Styled.Pokemon.tsx | 217 --------------- src/modules/pokedex/components/Filters.tsx | 25 +- src/modules/pokedex/components/List.tsx | 16 +- src/modules/pokedex/components/Search.tsx | 19 +- src/modules/pokedex/components/Sprites.tsx | 40 ++- src/modules/pokedex/hooks/useScrollDir.tsx | 14 +- ...ards.PokemonCard.tsx => Cards.module.scss} | 18 +- .../pokemon/components/cards/Cards.tsx | 12 +- ...okemonCard.tsx => Competitive.module.scss} | 28 +- .../components/competitive/Competitive.tsx | 24 +- ...ts.PokemonCard.tsx => Content.module.scss} | 16 +- .../pokemon/components/content/Content.tsx | 6 +- ....Data.PokemonCard.tsx => Data.module.scss} | 96 ++++--- .../pokedex/pokemon/components/data/Data.tsx | 30 +- .../pokemon/components/data/base/Base.tsx | 6 +- .../data/description/Description.tsx | 18 +- .../pokemon/components/data/sprite/Sprite.tsx | 11 +- ....PokemonCard.tsx => Evolution.module.scss} | 51 ++-- .../components/evolution/Evolution.tsx | 232 ++++++++------- ....Info.PokemonCard.tsx => Info.module.scss} | 17 +- .../pokedex/pokemon/components/info/Info.tsx | 13 +- .../components/locations/Locations.tsx | 2 +- .../components/moves/Moves.module.scss | 6 + .../pokemon/components/moves/Moves.tsx | 6 +- .../moves/Styled.Moves.PokemonCard.tsx | 10 - .../pokedex/pokemon/components/nav/Nav.tsx | 23 +- ...es.PokemonCard.tsx => Sprites.module.scss} | 9 +- .../pokemon/components/sprites/Sprites.tsx | 10 +- .../types/Styled.Types.PokemonCard.tsx | 4 +- src/modules/types/type/Type.module.scss | 2 +- src/modules/types/type/components/Pokemon.tsx | 5 +- src/pages/index.tsx | 4 +- src/pages/pokemon/[name].tsx | 6 +- src/styles/abstracts/_animations.scss | 37 +++ src/styles/abstracts/_index.scss | 5 +- src/styles/abstracts/_themes.scss | 27 +- src/styles/base/_reset.scss | 2 +- src/styles/common/_headings.scss | 4 +- src/styles/common/_index.scss | 2 + src/styles/common/_inputs.scss | 159 +++++++++++ src/styles/common/_navbars.scss | 26 +- src/styles/common/_search.scss | 72 +++++ src/styles/common/_tables.scss | 14 +- src/styles/styles.scss | 6 +- 58 files changed, 1141 insertions(+), 835 deletions(-) rename src/components/layout/Footer/{Styled.Footer.tsx => Footer.module.scss} (62%) rename src/components/layout/Header/{Styled.Header.tsx => Header.module.scss} (53%) rename src/components/layout/Nav/{Styled.Nav.tsx => Nav.module.scss} (81%) create mode 100644 src/modules/pokedex/Pokedex.module.scss rename src/modules/pokedex/pokemon/components/cards/{Styled.Cards.PokemonCard.tsx => Cards.module.scss} (72%) rename src/modules/pokedex/pokemon/components/competitive/{Styled.Competitive.PokemonCard.tsx => Competitive.module.scss} (71%) rename src/modules/pokedex/pokemon/components/content/{Styled.Contents.PokemonCard.tsx => Content.module.scss} (79%) rename src/modules/pokedex/pokemon/components/data/{Styled.Data.PokemonCard.tsx => Data.module.scss} (57%) rename src/modules/pokedex/pokemon/components/evolution/{Styled.Evolution.PokemonCard.tsx => Evolution.module.scss} (68%) rename src/modules/pokedex/pokemon/components/info/{Styled.Info.PokemonCard.tsx => Info.module.scss} (72%) create mode 100644 src/modules/pokedex/pokemon/components/moves/Moves.module.scss delete mode 100644 src/modules/pokedex/pokemon/components/moves/Styled.Moves.PokemonCard.tsx rename src/modules/pokedex/pokemon/components/sprites/{Styled.Sprites.PokemonCard.tsx => Sprites.module.scss} (67%) create mode 100644 src/styles/abstracts/_animations.scss create mode 100644 src/styles/common/_inputs.scss create mode 100644 src/styles/common/_search.scss diff --git a/.editorconfig b/.editorconfig index 8a2637a9..af381890 100644 --- 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 \ No newline at end of file +insert_final_newline = false \ No newline at end of file diff --git a/src/components/common/styles/Animations.tsx b/src/components/common/styles/Animations.tsx index 0e4bf14c..3015cb13 100644 --- 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/src/components/layout/Footer/Styled.Footer.tsx b/src/components/layout/Footer/Footer.module.scss similarity index 62% rename from src/components/layout/Footer/Styled.Footer.tsx rename to src/components/layout/Footer/Footer.module.scss index a9e03bda..c9668f78 100644 --- a/src/components/layout/Footer/Styled.Footer.tsx +++ b/src/components/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 index 78c2f8f0..a1697e43 100644 --- 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 ( - - - © {year} PokéRef - PokéRef - +
+
+
© {year} PokéRef
+
PokéRef
+
- - - +
+
+
); } diff --git a/src/components/layout/Header/Styled.Header.tsx b/src/components/layout/Header/Header.module.scss similarity index 53% rename from src/components/layout/Header/Styled.Header.tsx rename to src/components/layout/Header/Header.module.scss index efa940b4..de821652 100644 --- a/src/components/layout/Header/Styled.Header.tsx +++ b/src/components/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; } -`; +} diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx index 9ca80ff7..2e1e89dd 100644 --- a/src/components/layout/Header/Header.tsx +++ b/src/components/layout/Header/Header.tsx @@ -1,12 +1,3 @@ -import { - BurgerClose, - BurgerOpen, - HeaderBtnConnect, - HeaderBtnConnected, - HeaderBtnContainer, - HeaderBtnTheme, - HeaderContainer, -} from '@/components/layout/Header/Styled.Header'; import { ThemeContext } from '@/contexts'; import { auth } from '@/firebase-config'; import { FiMenu, FiX } from '@meronex/icons/fi'; @@ -20,6 +11,7 @@ import { useEffect, useState, } from 'react'; +import styles from './Header.module.scss'; type Props = { navOpen: boolean; @@ -51,12 +43,13 @@ export function Header({ navOpen, setNavOpen }: Props) { }, []); return ( - + ); } diff --git a/src/components/layout/Nav/Styled.Nav.tsx b/src/components/layout/Nav/Nav.module.scss similarity index 81% rename from src/components/layout/Nav/Styled.Nav.tsx rename to src/components/layout/Nav/Nav.module.scss index 4a1dd320..81e1f8a0 100644 --- a/src/components/layout/Nav/Styled.Nav.tsx +++ b/src/components/layout/Nav/Nav.module.scss @@ -1,17 +1,16 @@ -import styled from 'styled-components'; -import { device } from '../../common/styles/Sizing'; +@use '@/styles/abstracts' as *; -export const MainNav = styled.nav` +.nav { min-height: 4vh; max-width: 1700px; margin: 0 auto; - @media ${device.md} { + @include md { display: none; } -`; +} -export const MainNavList = styled.ul` +.list { display: flex; justify-content: space-around; flex-wrap: wrap; @@ -33,7 +32,6 @@ export const MainNavList = styled.ul` position: absolute; width: 100%; height: 1px; - background-color: ${({ theme }) => theme.secondary}; top: 100%; left: 0; pointer-events: none; @@ -43,12 +41,14 @@ export const MainNavList = styled.ul` transition-property: transform, opacity; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1); + @include themed { + background-color: t('text'); + } } &::after { position: absolute; width: 100%; height: 1px; - background: ${({ theme }) => theme.secondary}; top: 100%; left: 0; pointer-events: none; @@ -58,6 +58,9 @@ export const MainNavList = styled.ul` transition-property: transform, opacity; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1); + @include themed { + background-color: t('text'); + } } &:hover::before { opacity: 1; @@ -87,23 +90,25 @@ export const MainNavList = styled.ul` } } - @media ${device.lg} { + @include lg { margin-bottom: 2rem; } } -`; +} -export const ResponsiveNav = styled.nav` +.mobileNav { height: 100vh; width: 100%; position: fixed; top: 0; left: 0; - background: ${({ theme }) => theme.main}; z-index: 98; -`; + @include themed { + background: t('bg'); + } +} -export const ResponsiveNavContainer = styled.div` +.mobileInner { height: 100%; width: 100%; padding: 2rem; @@ -111,9 +116,9 @@ export const ResponsiveNavContainer = styled.div` align-items: center; justify-content: center; flex-direction: column; -`; +} -export const ResponsiveNavList = styled.ul` +.mobileList { display: flex; align-items: center; justify-content: center; @@ -127,4 +132,4 @@ export const ResponsiveNavList = styled.ul` cursor: pointer; } } -`; +} diff --git a/src/components/layout/Nav/Nav.tsx b/src/components/layout/Nav/Nav.tsx index 61bf98f6..0f8c7e42 100644 --- a/src/components/layout/Nav/Nav.tsx +++ b/src/components/layout/Nav/Nav.tsx @@ -1,17 +1,11 @@ import { Divider } from '@/components/common/ui/Divider'; +import header from '@/components/layout/Header/Header.module.scss'; import { auth } from '@/firebase-config'; import { useMediaQuery } from '@/hooks'; import { onAuthStateChanged, signOut, User } from 'firebase/auth'; import Link from 'next/link'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; -import { HeaderBtnConnect, HeaderBtnConnected } from '../Header/Styled.Header'; -import { - MainNav, - MainNavList, - ResponsiveNav, - ResponsiveNavContainer, - ResponsiveNavList, -} from './Styled.Nav'; +import styles from './Nav.module.scss'; type Props = { navOpen: boolean; @@ -52,9 +46,9 @@ export function Nav({ navOpen, setNavOpen }: Props) { ]; return navOpen && isBreakpoint ? ( - - - + ) : ( - - + ); } diff --git a/src/contexts/Theme/ThemeContext.tsx b/src/contexts/Theme/ThemeContext.tsx index faf7d7fd..578308f6 100644 --- a/src/contexts/Theme/ThemeContext.tsx +++ b/src/contexts/Theme/ThemeContext.tsx @@ -1,7 +1,7 @@ import React from 'react'; export const initialThemeState = { - theme: `light`, + theme: `dark`, setTheme: () => null, }; diff --git a/src/modules/404/NotFound.module.scss b/src/modules/404/NotFound.module.scss index ce8d01f7..2e942186 100644 --- a/src/modules/404/NotFound.module.scss +++ b/src/modules/404/NotFound.module.scss @@ -1,3 +1,5 @@ +@use '@/styles/common/sizing' as *; + .main { @extend .mainBig; display: flex; diff --git a/src/modules/auth/Auth.module.scss b/src/modules/auth/Auth.module.scss index 9c6c398a..c43e6934 100644 --- a/src/modules/auth/Auth.module.scss +++ b/src/modules/auth/Auth.module.scss @@ -9,7 +9,7 @@ width: 100vw; height: 100vh; margin: 0 auto; - @include themed() { + @include themed { background-color: t('text'); color: t('bg'); } @@ -32,13 +32,13 @@ font-size: 3rem; cursor: pointer; transition: 0.3s ease-in-out; - @include themed() { + @include themed { background-color: t('bg'); color: t('text'); } &:hover { - @include themed() { + @include themed { border: 1px solid t('bg'); background-color: t('text'); color: t('bg'); @@ -55,7 +55,7 @@ background-position: center; background-size: cover; background-repeat: no-repeat; - @include themed() { + @include themed { border-right: 1px solid t('bg'); } @@ -115,7 +115,7 @@ padding: 1rem; background: rgba(255, 255, 255, 0.3); border-radius: 5px; - @include themed() { + @include themed { border: 1px solid t('bg'); } &:focus { @@ -142,7 +142,7 @@ transition: 0.3s ease-in-out; &:hover { - @include themed() { + @include themed { border-bottom: 1px solid t('bg'); } } @@ -158,7 +158,7 @@ border-bottom: 1px solid transparent; transition: 0.3s ease-in-out; &:hover { - @include themed() { + @include themed { border-bottom: 1px solid t('bg'); } } @@ -173,14 +173,14 @@ text-align: center; border-radius: 5px; transition: 0.3s ease-in-out; - @include themed() { + @include themed { background: t('bg'); border: 1px solid t('bg'); color: t('text'); } &:hover { background: none; - @include themed() { + @include themed { color: t('bg'); } } @@ -231,7 +231,7 @@ border-radius: 5px; transform: translate(-50%, -50%); overflow-y: hidden !important; - @include themed() { + @include themed { color: t('bg'); border: 1px solid t('bg'); } diff --git a/src/modules/items/item/Item.module.scss b/src/modules/items/item/Item.module.scss index 3f0862c4..56f86c99 100644 --- a/src/modules/items/item/Item.module.scss +++ b/src/modules/items/item/Item.module.scss @@ -1,3 +1,5 @@ +@use '@/styles/common/sizing' as *; + .section { @extend .section; display: grid; diff --git a/src/modules/locations/Locations.module.scss b/src/modules/locations/Locations.module.scss index 87c85886..70e3a1c5 100644 --- a/src/modules/locations/Locations.module.scss +++ b/src/modules/locations/Locations.module.scss @@ -65,7 +65,7 @@ transition: 0.3s ease-in-out; border-bottom: 1px solid transparent; &:hover { - @include themed() { + @include themed { border-bottom: 1px solid t('text'); } } diff --git a/src/modules/pokedex/Pokedex.module.scss b/src/modules/pokedex/Pokedex.module.scss new file mode 100644 index 00000000..82e0632e --- /dev/null +++ b/src/modules/pokedex/Pokedex.module.scss @@ -0,0 +1,263 @@ +@use '@/styles/abstracts' as *; + +.search { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-areas: 'search form generation'; + gap: 2rem; + + @include md { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + 'search search' + 'form generation'; + row-gap: 2rem; + column-gap: 4rem; + } +} + +.dropdown { + width: 100%; + display: flex; + align-items: start; + justify-content: stretch; + flex-direction: column; + + & label { + font-size: 1.7rem; + margin-bottom: 0.5rem; + justify-self: flex-start; + } + + &:first-of-type { + grid-area: form; + } + + &:last-of-type { + grid-area: generation; + } +} + +.verticalText { + @supports (writing-mode: sideways-rl) { + display: block; + writing-mode: sideways-rl; + } + display: none; + font-size: 7rem; + position: fixed; + top: 50%; + right: 5%; + transform: translate(-50%, -50%); + @include themed { + color: t('text'); + } + + @include xl { + display: none; + } +} + +.list { + max-width: 1300px; + min-height: 80vh; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 2rem; +} + +.element { + width: 21rem; + height: 32rem; + padding: 2rem 3rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 1rem; + background: rgba(255, 255, 255, 0.4); + border: 1px solid transparent; + border-radius: 25px; + text-align: center; + transition: 0.3s ease-in-out; + + & h2 { + font-size: 3rem; + font-family: 'Oswald'; + text-transform: capitalize; + + & a { + cursor: pointer; + transition: 0.3s ease-in-out; + &:hover { + color: $red; + } + } + } + + &:nth-child(even) { + &:hover { + border-radius: 10px 50px; + + @include sm { + border-radius: 7px 35px; + } + } + } + + &:nth-child(odd) { + &:hover { + border-radius: 50px 10px; + + @include sm { + border-radius: 35px 7px; + } + } + } + + @include sm { + width: 20rem; + height: 29rem; + padding: 1.5rem 2.5rem; + } +} + +.number { + padding: 0.1rem 0.7rem; + font-size: 1.3rem; + color: #c4c4c4; + background-color: #161616; + border-radius: 50px; +} + +.sprite { + position: relative; + top: 0; + left: 0; + transition: 0.3s ease-in-out; +} + +.shiny { + position: absolute; + top: 0; + left: 0; + opacity: 0; + transition: 0.3s ease-in-out; +} + +.image { + position: relative; + margin: 0 auto; + + &:hover .shiny { + opacity: 1; + z-index: 3; + } + + & img { + @include sm { + width: 72px; + height: 72px; + } + } +} + +.types { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 1rem; + + & div { + width: 100%; + padding: 0.5rem; + border-radius: 5px; + text-transform: uppercase; + text-align: center; + font-size: 1.7rem; + border: 1px solid rgba(22, 22, 22, 0.2); + @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; + } + + & a { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + cursor: pointer; + + & img { + cursor: pointer; + } + + & span { + font-family: 'Oswald', sans-serif; + cursor: pointer; + } + } + } +} + +.scroll { + padding: 0.5rem; + display: flex; + position: fixed; + right: 5rem; + bottom: 5rem; + font-size: 5rem; + border-radius: 50%; + background-color: rgba(140, 140, 140, 0.2); + transition: 0.3s ease-in-out; + cursor: pointer; + + &:hover { + @include themed { + color: t('bg'); + background: t('text'); + } + } + + @include sm { + right: 3rem; + bottom: 3rem; + font-size: 3rem; + } +} + +.section { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + margin-bottom: 1.5rem; + + & h2 { + margin-bottom: 0; + } + + & button { + background: none; + border: none; + + & svg { + font-size: 4rem; + & path { + stroke-width: 1; + @include themed { + fill: t('bg'); + stroke: t('text'); + } + } + } + } +} diff --git a/src/modules/pokedex/Styled.Pokemon.tsx b/src/modules/pokedex/Styled.Pokemon.tsx index a5def9fd..e28151c3 100644 --- a/src/modules/pokedex/Styled.Pokemon.tsx +++ b/src/modules/pokedex/Styled.Pokemon.tsx @@ -1,172 +1,5 @@ -import { device } from '@/components/common/styles/Sizing'; -import { ImageWithFallback } from '@/utils'; import styled from 'styled-components'; -export const PokedexSearch = styled.section` - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-areas: 'search form generation'; - gap: 2rem; - - @media ${device.md} { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - grid-template-areas: - 'search search' - 'form generation'; - row-gap: 2rem; - column-gap: 4rem; - } -`; - -export const PokedexDropdown = styled.div` - width: 100%; - display: flex; - align-items: start; - justify-content: stretch; - flex-direction: column; - - & label { - font-size: 1.7rem; - margin-bottom: 0.5rem; - justify-self: flex-start; - } - - &:first-of-type { - grid-area: form; - } - - &:last-of-type { - grid-area: generation; - } -`; - -export const PokedexVerticalText = styled.p` - @supports (writing-mode: sideways-rl) { - display: block; - writing-mode: sideways-rl; - } - display: none; - font-size: 7rem; - color: ${({ theme }) => theme.secondary}; - position: fixed; - top: 50%; - right: 5%; - transform: translate(-50%, -50%); - - @media ${device.xl} { - display: none; - } -`; - -export const PokedexList = styled.ul` - max-width: 1300px; - min-height: 80vh; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-evenly; - flex-wrap: wrap; - gap: 2rem; -`; - -export const PokedexElement = styled.li` - width: 21rem; - height: 32rem; - padding: 2rem 3rem; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 1rem; - background: rgba(255, 255, 255, 0.4); - border: 1px solid transparent; - border-radius: 25px; - text-align: center; - transition: 0.3s ease-in-out; - - & h2 { - font-size: 3rem; - font-family: 'Oswald'; - text-transform: capitalize; - - & a { - cursor: pointer; - transition: 0.3s ease-in-out; - &:hover { - color: ${({ theme }) => theme.red}; - } - } - } - - & .number { - padding: 0.1rem 0.7rem; - font-size: 1.3rem; - color: #c4c4c4; - background-color: #161616; - border-radius: 50px; - } - - &:nth-child(even) { - &:hover { - border-radius: 10px 50px; - - @media ${device.sm} { - border-radius: 7px 35px; - } - } - } - - &:nth-child(odd) { - &:hover { - border-radius: 50px 10px; - - @media ${device.sm} { - border-radius: 35px 7px; - } - } - } - - @media ${device.sm} { - width: 20rem; - height: 29rem; - padding: 1.5rem 2.5rem; - } -`; - -export const SpriteNormal = styled(ImageWithFallback)` - position: relative; - top: 0; - left: 0; - transition: 0.3s ease-in-out; -`; - -export const SpriteShiny = styled(ImageWithFallback)` - position: absolute; - top: 0; - left: 0; - opacity: 0; - transition: 0.3s ease-in-out; -`; - -export const PokedexImage = styled.div` - position: relative; - margin: 0 auto; - - &:hover ${SpriteShiny} { - opacity: 1; - z-index: 3; - } - - & img { - @media ${device.sm} { - width: 72px; - height: 72px; - } - } -`; - export const PokedexTypes = styled.div` width: 100%; display: flex; @@ -207,53 +40,3 @@ export const PokedexTypes = styled.div` } } `; - -export const ToBottom = styled.a` - padding: 0.5rem; - display: flex; - position: fixed; - right: 5rem; - bottom: 5rem; - font-size: 5rem; - border-radius: 50%; - background-color: rgba(140, 140, 140, 0.2); - transition: 0.3s ease-in-out; - cursor: pointer; - - &:hover { - color: ${({ theme }) => theme.main}; - background: ${({ theme }) => theme.secondary}; - } - - @media ${device.sm} { - right: 3rem; - bottom: 3rem; - font-size: 3rem; - } -`; - -export const PokemonTitle = styled.section` - display: flex; - align-items: center; - justify-content: center; - gap: 2rem; - margin-bottom: 1.5rem; - - & h2 { - margin-bottom: 0; - } - - & button { - background: none; - border: none; - - & svg { - font-size: 4rem; - & path { - fill: ${({ theme }) => theme.main}; - stroke: ${({ theme }) => theme.secondary}; - stroke-width: 1; - } - } - } -`; diff --git a/src/modules/pokedex/components/Filters.tsx b/src/modules/pokedex/components/Filters.tsx index 66e1a1ab..0bd0065f 100644 --- a/src/modules/pokedex/components/Filters.tsx +++ b/src/modules/pokedex/components/Filters.tsx @@ -1,11 +1,10 @@ -import { Dropdown } from '@/components/common/styles/Inputs'; import { Divider } from '@/components/common/ui/Divider'; import { IPokemon } from '@/types'; import { formOptions, generationsOptions, IOptionsOffsetLimit } from '@/utils'; import { Dispatch, SetStateAction, useCallback, useEffect } from 'react'; -import { SingleValue } from 'react-select'; +import Select, { SingleValue } from 'react-select'; import makeAnimated from 'react-select/animated'; -import { PokedexDropdown, PokedexSearch } from '../Styled.Pokemon'; +import styles from '../Pokedex.module.scss'; import { Search } from './Search'; type Props = { @@ -82,16 +81,16 @@ export function Filters({ return ( <> - +
- +
- - +
- +
- - - +
+
); diff --git a/src/modules/pokedex/components/List.tsx b/src/modules/pokedex/components/List.tsx index f60ca2de..a952f980 100644 --- a/src/modules/pokedex/components/List.tsx +++ b/src/modules/pokedex/components/List.tsx @@ -1,7 +1,7 @@ import { IPokemon } from '@/types'; import { removeDash, removeLongName } from '@/utils'; import Link from 'next/link'; -import { PokedexElement, PokedexList, PokedexTypes } from '../Styled.Pokemon'; +import styles from '../Pokedex.module.scss'; import { Sprites } from './Sprites'; import { Types } from './Types'; @@ -11,12 +11,12 @@ type Props = { export function List({ filteredPokedex }: Props) { return ( - +
    {filteredPokedex?.map((p: IPokemon) => ( - +
  • {p.id < 1011 && ( -

    #{p.id.toString().padStart(3, `0`)}

    +

    #{p.id.toString().padStart(3, `0`)}

    )}

    - +
    - - +
    +
    • ))} - +
); } diff --git a/src/modules/pokedex/components/Search.tsx b/src/modules/pokedex/components/Search.tsx index 7bfd2286..72544243 100644 --- a/src/modules/pokedex/components/Search.tsx +++ b/src/modules/pokedex/components/Search.tsx @@ -14,6 +14,7 @@ import { AutocompleteInput, AutocompleteLink, } from '@/components/common/styles/Autocomplete'; +import Link from 'next/link'; export function Search() { const { data: pokedex }: UseQueryResult = useQuery({ @@ -38,7 +39,7 @@ export function Search() { }; return ( - +
searchPokedex(e.target.value)} /> {searchText && ( - +
    {searchRes && searchRes?.map((res) => ( @@ -62,27 +63,27 @@ export function Search() { height={48} fallbackSrc={`/images/other/unknown.png`} /> - {removeLongName(removeDash(res.item.name))} - - + + # {res.item.url .replace(`https://pokeapi.co/api/v2/pokemon/`, ``) .slice(0, -1) .padStart(3, `0`)} - + ))}
- +
)} - +
); } diff --git a/src/modules/pokedex/components/Sprites.tsx b/src/modules/pokedex/components/Sprites.tsx index 58c67ff0..46f79342 100644 --- a/src/modules/pokedex/components/Sprites.tsx +++ b/src/modules/pokedex/components/Sprites.tsx @@ -1,5 +1,6 @@ import { IPokemon } from '@/types'; -import { PokedexImage, SpriteNormal, SpriteShiny } from '../Styled.Pokemon'; +import { ImageWithFallback } from '@/utils'; +import styles from '../Pokedex.module.scss'; type Props = { p: IPokemon; @@ -7,10 +8,11 @@ type Props = { export function Sprites({ p }: Props) { return ( - +
{p.id < 152 && p.sprites.versions[`generation-i`][`red-blue`].front_transparent && ( - - - - - - - - - 649 && ( <> - - )} - +
); } diff --git a/src/modules/pokedex/hooks/useScrollDir.tsx b/src/modules/pokedex/hooks/useScrollDir.tsx index 18f1b46a..9c91454e 100644 --- a/src/modules/pokedex/hooks/useScrollDir.tsx +++ b/src/modules/pokedex/hooks/useScrollDir.tsx @@ -1,17 +1,17 @@ +import styles from '@/modules/pokedex/Pokedex.module.scss'; import { FaAngleDown, FaAngleUp } from '@meronex/icons/fa'; import { useEffect, useState } from 'react'; -import { ToBottom } from '../Styled.Pokemon'; export const useScrollDir = () => { const [scrollDir, setScrollDir] = useState(`down`); useEffect(() => { const threshold = 0; - let lastScrollY = window.pageYOffset; + let lastScrollY = window.scrollY; let ticking = false; const updateScrollDir = () => { - const scrollY = window.pageYOffset; + const scrollY = window.scrollY; if (Math.abs(scrollY - lastScrollY) < threshold) { ticking = false; @@ -36,15 +36,15 @@ export const useScrollDir = () => { const scrollBtn = () => { if (scrollDir === `down`) { return ( - + - + ); } else { return ( - + - + ); } }; diff --git a/src/modules/pokedex/pokemon/components/cards/Styled.Cards.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/cards/Cards.module.scss similarity index 72% rename from src/modules/pokedex/pokemon/components/cards/Styled.Cards.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/cards/Cards.module.scss index 67c009f3..79ce22f9 100644 --- a/src/modules/pokedex/pokemon/components/cards/Styled.Cards.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/cards/Cards.module.scss @@ -1,8 +1,6 @@ -import { device } from '@/components/common/styles/Sizing'; -import styled from 'styled-components'; -import Modal from 'react-modal'; +@use '@/styles/abstracts' as *; -export const PokemonCardList = styled.ul` +.list { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; @@ -28,19 +26,19 @@ export const PokemonCardList = styled.ul` } } - @media ${device.md} { + @include md { grid-template-columns: 1fr 1fr; } - @media ${device.sm} { + @include sm { & img { width: 150px; height: 210px; } } -`; +} -export const PokemonCardModal = styled(Modal)` +.modal { width: 60%; height: auto; display: flex; @@ -55,7 +53,7 @@ export const PokemonCardModal = styled(Modal)` transform: translate(-50%, -50%); overflow-y: hidden !important; - @media ${device.sm} { + @include sm { width: 80%; } -`; +} diff --git a/src/modules/pokedex/pokemon/components/cards/Cards.tsx b/src/modules/pokedex/pokemon/components/cards/Cards.tsx index 77076e2d..41fe9a13 100644 --- a/src/modules/pokedex/pokemon/components/cards/Cards.tsx +++ b/src/modules/pokedex/pokemon/components/cards/Cards.tsx @@ -1,7 +1,8 @@ import { ICard } from '@/types'; import Image from 'next/image'; import { useState } from 'react'; -import { PokemonCardList, PokemonCardModal } from './Styled.Cards.PokemonCard'; +import Modal from 'react-modal'; +import styles from './Cards.module.scss'; type Props = { cards: ICard[]; @@ -22,7 +23,7 @@ export function Cards({ cards }: Props) { return (

Cards

- +
    {cards.map((c) => (
); } diff --git a/src/modules/pokedex/pokemon/components/competitive/Styled.Competitive.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/competitive/Competitive.module.scss similarity index 71% rename from src/modules/pokedex/pokemon/components/competitive/Styled.Competitive.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/competitive/Competitive.module.scss index 65fb90fc..537dc181 100644 --- a/src/modules/pokedex/pokemon/components/competitive/Styled.Competitive.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/competitive/Competitive.module.scss @@ -1,7 +1,6 @@ -import { device } from '@/components/common/styles/Sizing'; -import styled from 'styled-components'; +@use '@/styles/abstracts' as *; -export const PokemonSetsContainer = styled.ul` +.list { display: flex; flex-direction: column; gap: 2rem; @@ -17,18 +16,20 @@ export const PokemonSetsContainer = styled.ul` margin-top: 1rem; } } -`; +} -export const PokemonSetSpecs = styled.div` +.specs { display: grid; align-items: stretch; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1rem; padding: 1.5rem; - background-color: ${({ theme }) => theme.secondary}; - color: ${({ theme }) => theme.main}; border-radius: 5px; + @include themed { + background-color: t('text'); + color: t('bg'); + } & ul { display: flex; @@ -54,13 +55,13 @@ export const PokemonSetSpecs = styled.div` } } - @media ${device.md} { + @include md { display: flex; flex-direction: column; } -`; +} -export const PokemonSetDesc = styled.div` +.desc { display: flex; flex-direction: column; gap: 1rem; @@ -74,13 +75,14 @@ export const PokemonSetDesc = styled.div` & hr { border-width: 0 0 1px 0; } -`; +} -export const PokemonSetComment = styled(PokemonSetDesc)` +.comment { + @extend .desc; & h1 { margin: 1rem 0 0; font-size: 2.5rem; font-weight: 600; text-transform: capitalize; } -`; +} diff --git a/src/modules/pokedex/pokemon/components/competitive/Competitive.tsx b/src/modules/pokedex/pokemon/components/competitive/Competitive.tsx index edd08855..9ef08195 100644 --- a/src/modules/pokedex/pokemon/components/competitive/Competitive.tsx +++ b/src/modules/pokedex/pokemon/components/competitive/Competitive.tsx @@ -7,12 +7,7 @@ import { capitalize, getFormat, removeLongName } from '@/utils'; import { useQueries } from '@tanstack/react-query'; import { useState } from 'react'; import toast from 'react-hot-toast'; -import { - PokemonSetComment, - PokemonSetDesc, - PokemonSetSpecs, - PokemonSetsContainer, -} from './Styled.Competitive.PokemonCard'; +import styles from './Competitive.module.scss'; type Props = { format: string; @@ -158,11 +153,12 @@ export function Competitive({ format, name }: Props) { ))} - +
    {overview && (

  • Analysis

    -
    • @@ -171,7 +167,7 @@ export function Competitive({ format, name }: Props) { (s: IFormatsAnalysesSetName, i) => (

  • {s.name}

    - +
    )} - +
    {s.description && ( - -
    • )} - +
); } diff --git a/src/modules/pokedex/pokemon/components/content/Styled.Contents.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/content/Content.module.scss similarity index 79% rename from src/modules/pokedex/pokemon/components/content/Styled.Contents.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/content/Content.module.scss index a2cafadf..74c84a39 100644 --- a/src/modules/pokedex/pokemon/components/content/Styled.Contents.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/content/Content.module.scss @@ -1,15 +1,17 @@ -import styled from 'styled-components'; +@use '@/styles/abstracts' as *; -export const PokemonContents = styled.section` +.section { position: sticky; padding: 1rem 1.5rem; margin-bottom: 5rem; top: 0; font-size: 2rem; - background: ${({ theme }) => theme.main}; - border: 1px solid ${({ theme }) => theme.secondary}; border-radius: 5px; z-index: 3; + @include themed { + background: t('bg'); + border: 1px solid t('text'); + } & div { display: flex; @@ -33,8 +35,10 @@ export const PokemonContents = styled.section` border-radius: 50%; font-size: 2.5rem; font-weight: 600; - color: ${({ theme }) => theme.secondary}; transition: 0.3s ease-in-out; + @include themed { + color: t('text'); + } &:hover { background: rgba(130, 130, 130, 0.2); @@ -57,4 +61,4 @@ export const PokemonContents = styled.section` } } } -`; +} diff --git a/src/modules/pokedex/pokemon/components/content/Content.tsx b/src/modules/pokedex/pokemon/components/content/Content.tsx index e658a532..42d1b1b8 100644 --- a/src/modules/pokedex/pokemon/components/content/Content.tsx +++ b/src/modules/pokedex/pokemon/components/content/Content.tsx @@ -1,12 +1,12 @@ import { MdAdd, MdRemove } from '@meronex/icons/ios'; import { useState } from 'react'; -import { PokemonContents } from './Styled.Contents.PokemonCard'; +import styles from './Content.module.scss'; export function Content() { const [contentsOpen, setContentsOpen] = useState(false); return ( - +

Table of contents

); } diff --git a/src/modules/pokedex/pokemon/components/data/Styled.Data.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/data/Data.module.scss similarity index 57% rename from src/modules/pokedex/pokemon/components/data/Styled.Data.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/data/Data.module.scss index 634ae176..ba4c384d 100644 --- a/src/modules/pokedex/pokemon/components/data/Styled.Data.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/data/Data.module.scss @@ -1,78 +1,83 @@ -import { Pulse } from '@/components/common/styles/Animations'; -import { Section, device } from '@/components/common/styles/Sizing'; -import { Table } from '@/components/common/styles/Table'; -import styled from 'styled-components'; +@use '@/styles/abstracts' as *; +@use '@/styles/common' as *; -export const PokemonDataSection = styled(Section)` +.section { + @extend .section; position: relative; display: grid; align-items: center; grid-template-columns: 55% 45%; gap: 3rem; - @media ${device.md} { + @include md { display: flex; align-items: center; justify-content: center; flex-direction: column-reverse; } -`; +} -export const PokemonCatchButton = styled.button` +.catch { position: absolute; top: 1rem; right: 1rem; padding: 0.7rem 1.5rem; - background: ${({ theme }) => theme.secondary}; - border: 1px solid ${({ theme }) => theme.secondary}; border-radius: 5px; font-size: 1.5rem; font-weight: 600; transition: 0.3s ease-in-out; + @include themed { + background: t('text'); + border: 1px solid t('text'); + } &:hover { background: transparent; - color: ${({ theme }) => theme.secondary}; + @include themed { + color: t('text'); + } } -`; +} -export const PokemonCaughtText = styled.p` +.caught { position: absolute; top: 1rem; right: 1rem; padding: 0.7rem 1.5rem; background: transparent; - color: ${({ theme }) => theme.secondary}; - border: 1px solid ${({ theme }) => theme.secondary}; border-radius: 5px; font-size: 1.5rem; font-weight: 600; opacity: 0.7; -`; + @include themed { + color: t('text'); + border: 1px solid t('text'); + } +} -export const PokemonDataContainer = styled.div` +.container { display: flex; flex-direction: column; gap: 2rem; -`; +} -export const PokemonDataSprite = styled.div` +.sprite { display: flex; align-items: center; justify-content: center; flex-direction: column; -`; +} -export const PokemonDataDesc = styled.li` +.desc { font-size: 2rem; & p { padding-top: 0.5rem; font-size: 1.3rem; } -`; +} -export const PokemonDataTypes = styled.li` +.types { position: relative; width: 100%; display: flex; @@ -100,22 +105,22 @@ export const PokemonDataTypes = styled.li` & span { font-family: 'Oswald'; font-size: 3rem; - color: #c4c4c4; - 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; cursor: pointer; + @include themed { + color: t('bg'); + text-shadow: t('text') -1px -1px 0px, t('text') 1px -1px 0px, + t('text') -1px 1px 0px, t('text') 1px 1px 0px; + } } } } - @media ${device.sm} { + @include sm { justify-content: center; } -`; +} -export const PokemonDataOldTypes = styled.li` +.oldTypes { font-size: 1.7rem; & span { @@ -125,9 +130,10 @@ export const PokemonDataOldTypes = styled.li` font-weight: 600; } } -`; +} -export const PokemonDataTable = styled(Table)` +.table { + @extend .table; width: 90%; & th { @@ -149,28 +155,30 @@ export const PokemonDataTable = styled(Table)` } } } -`; +} -const PokemonDataPill = styled.span` +.pill { margin: 1rem 0 0; padding: 1rem 1.5rem; border-radius: 50px; font-size: 2rem; transition: 0.3s ease-in-out; -`; +} -export const PokemonDataSpecial = styled(PokemonDataPill)` - border: 1px solid ${({ theme }) => theme.purple}; - background: ${({ theme }) => theme.purple}; +.special { + @extend .pill; + border: 1px solid $purple; + background: $purple; color: #c4c4c4; font-weight: 600; -`; +} -export const PokemonDataImg = styled.img` - animation: ${Pulse} 5s infinite; +.image { + @include pulse; + @include animate(pulse, 5s, inifnite); - @media ${device.sm} { + @include sm { width: 75%; margin-bottom: 1rem; } -`; +} diff --git a/src/modules/pokedex/pokemon/components/data/Data.tsx b/src/modules/pokedex/pokemon/components/data/Data.tsx index 9939e169..c5225102 100644 --- a/src/modules/pokedex/pokemon/components/data/Data.tsx +++ b/src/modules/pokedex/pokemon/components/data/Data.tsx @@ -2,24 +2,18 @@ import { auth, db } from '@/firebase-config'; import { IPokemon, IPokemonSpecies } from '@/types'; import { removeDash } from '@/utils'; import { + DocumentData, arrayUnion, doc, - DocumentData, getDoc, onSnapshot, updateDoc, } from 'firebase/firestore'; import { useEffect, useState } from 'react'; import toast from 'react-hot-toast'; -import { - PokemonCatchButton, - PokemonCaughtText, - PokemonDataContainer, - PokemonDataSection, - PokemonDataSprite, -} from './Styled.Data.PokemonCard'; -import { Description } from './description'; +import styles from './Data.module.scss'; import { Base } from './base'; +import { Description } from './description'; import { Sprite } from './sprite'; type Props = { @@ -71,23 +65,25 @@ export function Data({ pokemon, species, game }: Props) { }, []); return ( - +
{user && pokemon.id < 10000 && (user.caught.every( (n: Record) => n[0] !== pokemon.name, ) ? ( - Catch + ) : ( - Caught +

Caught

))} - +
- - +
+
- - +
+
); } diff --git a/src/modules/pokedex/pokemon/components/data/base/Base.tsx b/src/modules/pokedex/pokemon/components/data/base/Base.tsx index 8cea8ac9..0e6eac3b 100644 --- a/src/modules/pokedex/pokemon/components/data/base/Base.tsx +++ b/src/modules/pokedex/pokemon/components/data/base/Base.tsx @@ -1,7 +1,7 @@ import { TLink } from '@/components/common/styles/Table'; import { IGenus, IPokemon, IPokemonSpecies } from '@/types'; import { removeDash } from '@/utils'; -import { PokemonDataTable } from '../Styled.Data.PokemonCard'; +import styles from '../Data.module.scss'; type Props = { pokemon: IPokemon; @@ -19,7 +19,7 @@ export function Base({ pokemon, species }: Props) { species && species.genera.find((sg) => sg.language.name === `en`); return ( - + @@ -81,6 +81,6 @@ export function Base({ pokemon, species }: Props) { )} - +
pokédex number
); } diff --git a/src/modules/pokedex/pokemon/components/data/description/Description.tsx b/src/modules/pokedex/pokemon/components/data/description/Description.tsx index 1640b21f..0f18f543 100644 --- a/src/modules/pokedex/pokemon/components/data/description/Description.tsx +++ b/src/modules/pokedex/pokemon/components/data/description/Description.tsx @@ -3,11 +3,7 @@ import { IPokemon, IPokemonSpecies } from '@/types'; import { removeDash } from '@/utils'; import Image from 'next/image'; import Link from 'next/link'; -import { - PokemonDataDesc, - PokemonDataOldTypes, - PokemonDataTypes, -} from '../Styled.Data.PokemonCard'; +import styles from '../Data.module.scss'; type Props = { pokemon: IPokemon; @@ -27,7 +23,7 @@ export function Description({ pokemon, species, game }: Props) { <>
    {pokemon.id < 10000 && ( - +
  • {filterDesc && filterDesc?.flavor_text ? ( filterDesc?.flavor_text @@ -45,9 +41,9 @@ export function Description({ pokemon, species, game }: Props) { {game && removeDash(game)}

    - +
    • )} - +
  • {pokemon?.types?.map((pt) => ( ))} - - +
    • +
  • {pokemon.past_types.map((pp) => (

    Up to {removeDash(pp.generation.name)} (included) : @@ -77,7 +73,7 @@ export function Description({ pokemon, species, game }: Props) { ))}

    ))} - +
); diff --git a/src/modules/pokedex/pokemon/components/data/sprite/Sprite.tsx b/src/modules/pokedex/pokemon/components/data/sprite/Sprite.tsx index f4076eed..c77a1bff 100644 --- a/src/modules/pokedex/pokemon/components/data/sprite/Sprite.tsx +++ b/src/modules/pokedex/pokemon/components/data/sprite/Sprite.tsx @@ -1,5 +1,5 @@ import { IPokemon, IPokemonSpecies } from '@/types'; -import { PokemonDataImg, PokemonDataSpecial } from '../Styled.Data.PokemonCard'; +import styles from '../Data.module.scss'; type Props = { pokemon: IPokemon; @@ -9,7 +9,8 @@ type Props = { export function Sprite({ pokemon, species }: Props) { return ( <> - {species?.is_legendary && ( - Legendary + Legendary )} {species?.is_mythical && ( - Mythical + Mythical )} - {species.is_baby && Baby} + {species.is_baby && Baby} )} diff --git a/src/modules/pokedex/pokemon/components/evolution/Styled.Evolution.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/evolution/Evolution.module.scss similarity index 68% rename from src/modules/pokedex/pokemon/components/evolution/Styled.Evolution.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/evolution/Evolution.module.scss index 0c848426..59d5e85d 100644 --- a/src/modules/pokedex/pokemon/components/evolution/Styled.Evolution.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/evolution/Evolution.module.scss @@ -1,13 +1,14 @@ -import { Section, device } from '@/components/common/styles/Sizing'; -import styled from 'styled-components'; +@use '@/styles/abstracts' as *; +@use '@/styles/common' as *; -export const PokemonEvolutionSection = styled(Section)` - @media ${device.sm} { +.section { + @extend .section; + @include sm { padding-bottom: 0; } -`; +} -export const PokemonEvolutionContainer = styled.div` +.container { width: 100%; display: flex; justify-content: space-between; @@ -17,15 +18,15 @@ export const PokemonEvolutionContainer = styled.div` width: 100%; } - @media ${device.sm} { + @include sm { display: flex; align-items: center; justify-content: space-around; flex-direction: column; } -`; +} -export const PokemonEvolutionBase = styled.div` +.base { text-align: center; width: 20%; @@ -44,38 +45,38 @@ export const PokemonEvolutionBase = styled.div` transition: 0.3s ease-in-out; &:hover { - color: ${({ theme }) => theme.red}; + color: $red; } } } -`; +} -export const PokemonEvolution = styled.div` +.evolution { width: 80%; display: flex; justify-content: space-between; - @media ${device.sm} { + @include sm { justify-content: space-around; flex-direction: column; } -`; +} -export const PokemonEvolutionStages = styled.div` +.stage { width: 100%; display: flex; flex-direction: column; justify-content: center; -`; +} -export const PokemonEvolutionFinal = styled.div` +.final { width: 100%; display: flex; flex-direction: column; justify-content: center; -`; +} -export const PokemonEvolutionElement = styled.div` +.element { display: flex; justify-content: space-between; margin: 3rem 0; @@ -97,29 +98,29 @@ export const PokemonEvolutionElement = styled.div` transition: 0.3s ease-in-out; &:hover { - color: ${({ theme }) => theme.red}; + color: $red; } } & svg { font-size: 2.7rem; - @media ${device.sm} { + @include sm { transform: rotate(90deg); } } } - @media ${device.sm} { + @include sm { flex-direction: column; & div { width: auto; } } -`; +} -export const PokemonEvolutionText = styled.p` +.text { font-size: 1.7rem; text-align: center; @@ -127,4 +128,4 @@ export const PokemonEvolutionText = styled.p` font-weight: 600; text-transform: capitalize; } -`; +} diff --git a/src/modules/pokedex/pokemon/components/evolution/Evolution.tsx b/src/modules/pokedex/pokemon/components/evolution/Evolution.tsx index 492ac8f2..8d4c60e0 100644 --- a/src/modules/pokedex/pokemon/components/evolution/Evolution.tsx +++ b/src/modules/pokedex/pokemon/components/evolution/Evolution.tsx @@ -6,16 +6,7 @@ import { UseQueryResult, useQuery } from '@tanstack/react-query'; import Image from 'next/image'; import Link from 'next/link'; import toast from 'react-hot-toast'; -import { - PokemonEvolution, - PokemonEvolutionBase, - PokemonEvolutionContainer, - PokemonEvolutionElement, - PokemonEvolutionFinal, - PokemonEvolutionSection, - PokemonEvolutionStages, - PokemonEvolutionText, -} from './Styled.Evolution.PokemonCard'; +import styles from './Evolution.module.scss'; type Props = { evolution: IEvolutionChain; @@ -47,10 +38,10 @@ export function Evolution({ evolution, name }: Props) { } return ( - +

Evolution chain

- - +
+
<> {evo?.map( @@ -75,39 +66,42 @@ export function Evolution({ evolution, name }: Props) {
- +
{evolution?.chain?.evolves_to?.length !== 0 && ( - - +
+
{evolution?.chain?.evolves_to?.map((ee) => ( - +
{ee?.evolution_details?.map((eed) => ( <> {eed.gender && (eed.gender === 1 ? ( - +

Female - +

) : ( - +

Male - +

))} {eed.trigger.name === `trade` && !eed.held_item && ( - Trade +

Trade

)} {eed.held_item && eed.trigger.name === `trade` && ( - +

Trade holding {` `} {removeDash(eed.held_item.name)} - +

)} {eed.held_item && eed.trigger.name === `level-up` && ( - +

Level up holding{` `} {` `} @@ -115,25 +109,25 @@ export function Evolution({ evolution, name }: Props) { {` `} during the {eed.time_of_day} - +

)} {eed.item && ( - +

Use{` `} {removeDash(eed.item.name)} - +

)} {eed.known_move && ( - +

Learn{` `} {` `} {removeDash(eed.known_move.name)} - +

)} {eed.known_move_type && eed.min_affection && ( - +

Level up with{` `} {eed.min_affection}+ affection {` `} @@ -144,10 +138,10 @@ export function Evolution({ evolution, name }: Props) { {` `} type move - +

)} {eed.known_move_type && eed.min_happiness && ( - +

Level up with{` `} {eed.min_happiness}+ happiness {` `} @@ -158,59 +152,59 @@ export function Evolution({ evolution, name }: Props) { {` `} type move - +

)} {eed.location && ( - +

Level up at{` `} {` `} {removeDash(eed.location.name)} - +

)} {eed.min_beauty && ( - +

Level up with{` `} {eed.min_beauty}+ beauty - +

)} {eed.min_happiness && eed.time_of_day !== `` && ( - +

Level up with{` `} {eed.min_happiness}+ happiness during the {eed.time_of_day} - +

)} {eed.min_happiness && eed.time_of_day === `` && ( - +

Level up with{` `} {eed.min_happiness}+ happiness - +

)} {eed.min_level && eed.time_of_day === `` && !eed.party_type && !eed.relative_physical_stats && eed.turn_upside_down === false && ( - +

Level {eed.min_level} - +

)} {eed.min_level && eed.time_of_day !== `` && ( - +

Level {eed.min_level} during the{` `} {eed.time_of_day} - +

)} {eed.needs_overworld_rain === true && ( - +

Level {eed.min_level} while{` `} raining - +

)} {eed.party_species && ( - +

Level up with a{` `} {` `} @@ -218,17 +212,17 @@ export function Evolution({ evolution, name }: Props) { {` `} in the party - +

)} {eed.party_type && ( - +

Level {eed.min_level} with a{` `} {eed.party_type.name} type pokémon in the party - +

)} {eed.relative_physical_stats && ( - +

Level {eed.min_level} with {eed.relative_physical_stats === 1 @@ -237,35 +231,35 @@ export function Evolution({ evolution, name }: Props) { ? ` Attack = Defense` : ` Defense > Attack`} - +

)} {eed.trade_species && ( - +

Trade with {eed.trade_species.name} - +

)} {eed.turn_upside_down === true && ( - +

Level {eed.min_level} while{` `} holding the console upside-down - +

)} {eed.trigger.name === `shed` && ( - +

Level 20 with an{` `} empty slot in the party and an{` `} extra PokéBall - +

)} {eed.trigger.name === `take-damage` && ( - +

Travel{` `} under the stone bridge in Dusty Bowl {` `} after taking at least 49 HP in damage {` `} without fainting - +

)} ))} @@ -293,48 +287,46 @@ export function Evolution({ evolution, name }: Props) { {removeDash(ee.species.name)}
- +
))} - +
{evolution?.chain?.evolves_to?.map( (ee) => ee?.evolves_to?.length !== 0 && ( - +
{ee?.evolves_to?.map((eee) => ( - - +
+
{eee?.evolution_details?.map((eeed) => ( <> {eeed.gender && (eeed.gender === 1 ? ( - +

Female - +

) : ( - +

Male - +

))} {eeed.trigger.name === `trade` && !eeed.held_item && ( - - Trade - +

Trade

)} {eeed.held_item && eeed.trigger.name === `trade` && ( - +

Trade holding {` `} {removeDash(eeed.held_item.name)} - +

)} {eeed.held_item && eeed.trigger.name === `level-up` && ( - +

Level up holding{` `} {` `} @@ -343,28 +335,28 @@ export function Evolution({ evolution, name }: Props) { {` `} during the{` `} {eeed.time_of_day} - +

)} {eeed.item && ( - +

Use{` `} {` `} {removeDash(eeed.item.name)} - +

)} {eeed.known_move && ( - +

Learn{` `} {` `} {removeDash(eeed.known_move.name)} - +

)} {eeed.known_move_type && eeed.min_affection && ( - +

Level up with{` `} {` `} @@ -381,10 +373,10 @@ export function Evolution({ evolution, name }: Props) { {` `} type move - +

)} {eeed.known_move_type && eeed.min_happiness && ( - +

Level up with{` `} {` `} @@ -401,25 +393,25 @@ export function Evolution({ evolution, name }: Props) { {` `} type move - +

)} {eeed.location && ( - +

Level up at{` `} {` `} {removeDash(eeed.location.name)} - +

)} {eeed.min_beauty && ( - +

Level up with{` `} {eeed.min_beauty}+ beauty - +

)} {eeed.min_happiness && eeed.time_of_day !== `` && ( - +

Level up with{` `} {` `} @@ -428,41 +420,41 @@ export function Evolution({ evolution, name }: Props) { {` `} during the{` `} {eeed.time_of_day} - +

)} {eeed.min_happiness && eeed.time_of_day === `` && ( - +

Level up with{` `} {` `} {eeed.min_happiness}+ happiness - +

)} {eeed.min_level && eeed.time_of_day === `` && !eeed.party_type && !eeed.relative_physical_stats && eeed.turn_upside_down === false && ( - +

Level {eeed.min_level} - +

)} {eeed.min_level && eeed.time_of_day !== `` && ( - +

Level {eeed.min_level} during the {eeed.time_of_day} - +

)} {eeed.needs_overworld_rain === true && ( - +

Level {eeed.min_level} while {` `} raining - +

)} {eeed.party_species && ( - +

Level up with a{` `} {` `} @@ -473,18 +465,18 @@ export function Evolution({ evolution, name }: Props) { {` `} in the party - +

)} {eeed.party_type && ( - +

Level {eeed.min_level} with a {` `} {eeed.party_type.name} type pokémon in the party - +

)} {eeed.relative_physical_stats && ( - +

Level {eeed.min_level} with {eeed.relative_physical_stats === 1 @@ -493,31 +485,31 @@ export function Evolution({ evolution, name }: Props) { ? ` Attack = Defense` : ` Defense > Attack`} - +

)} {eeed.trade_species && ( - +

Trade with{` `} {eeed.trade_species.name} - +

)} {eeed.turn_upside_down === true && ( - +

Level {eeed.min_level} while {` `} holding the console upside-down - +

)} {eeed.trigger.name === `shed` && ( - +

Level 20 with an{` `} empty slot in the party and an {` `} extra PokéBall - +

)} {eeed.trigger.name === `take-damage` && ( - +

Travel{` `} under the stone bridge in Dusty Bowl @@ -526,7 +518,7 @@ export function Evolution({ evolution, name }: Props) { after taking at least{` `} 49 HP in damage without fainting - +

)} ))} @@ -554,15 +546,15 @@ export function Evolution({ evolution, name }: Props) { {removeDash(eee.species.name)}
- - +
+
))} - +
), )} - +
)} - - +
+
); } diff --git a/src/modules/pokedex/pokemon/components/info/Styled.Info.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/info/Info.module.scss similarity index 72% rename from src/modules/pokedex/pokemon/components/info/Styled.Info.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/info/Info.module.scss index d91026d5..5b735f1b 100644 --- a/src/modules/pokedex/pokemon/components/info/Styled.Info.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/info/Info.module.scss @@ -1,13 +1,13 @@ -import styled from 'styled-components'; -import { device, Section } from '@/components/common/styles/Sizing'; -import { Table } from '@/components/common/styles/Table'; +@use '@/styles/abstracts' as *; +@use '@/styles/common' as *; -export const PokemonInfoSection = styled(Section)` +.section { + @extend .section; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; - @media ${device.lg} { + @include lg { display: flex; align-items: center; justify-content: center; @@ -26,9 +26,10 @@ export const PokemonInfoSection = styled(Section)` } } } -`; +} -export const PokemonInfoTable = styled(Table)` +.table { + @extend .table; width: 90%; & th { @@ -57,4 +58,4 @@ export const PokemonInfoTable = styled(Table)` & tr:has(td:empty) { display: none; } -`; +} diff --git a/src/modules/pokedex/pokemon/components/info/Info.tsx b/src/modules/pokedex/pokemon/components/info/Info.tsx index 15659de6..44457c6c 100644 --- a/src/modules/pokedex/pokemon/components/info/Info.tsx +++ b/src/modules/pokedex/pokemon/components/info/Info.tsx @@ -3,10 +3,7 @@ import { IEvolutionChain, IPokemon, IPokemonSpecies } from '@/types'; import { capitalize } from '@/utils'; import { InfoTable } from '../../utils'; -import { - PokemonInfoSection, - PokemonInfoTable, -} from './Styled.Info.PokemonCard'; +import styles from './Info.module.scss'; type Props = { pokemon: IPokemon; @@ -19,11 +16,11 @@ export function Info({ pokemon, species, evolution }: Props) { const male = 100 - (species?.gender_rate / 8) * 100; return ( - +
{InfoTable.map((data) => (

{capitalize(data.category)}

- + {Array(Object.keys(data).length - 1) .fill(true) @@ -42,9 +39,9 @@ export function Info({ pokemon, species, evolution }: Props) { ))} - +
))} - +
); } diff --git a/src/modules/pokedex/pokemon/components/locations/Locations.tsx b/src/modules/pokedex/pokemon/components/locations/Locations.tsx index 74328bb1..9650c961 100644 --- a/src/modules/pokedex/pokemon/components/locations/Locations.tsx +++ b/src/modules/pokedex/pokemon/components/locations/Locations.tsx @@ -1,6 +1,6 @@ import { TableContainer, TBold } from '@/components/common/styles/Table'; -import styles from '@/components/pages/Locations/Locations.module.scss'; import { useTableParams } from '@/hooks'; +import styles from '@/modules/locations/Locations.module.scss'; import { IEncounter, ILocationAreaEncounter } from '@/types'; import { removeDash } from '@/utils'; import { ColumnDef } from '@tanstack/react-table'; diff --git a/src/modules/pokedex/pokemon/components/moves/Moves.module.scss b/src/modules/pokedex/pokemon/components/moves/Moves.module.scss new file mode 100644 index 00000000..cdfa7271 --- /dev/null +++ b/src/modules/pokedex/pokemon/components/moves/Moves.module.scss @@ -0,0 +1,6 @@ +@use '@/styles/abstracts' as *; +@use '@/styles/common' as *; + +.section { + overflow-x: hidden; +} diff --git a/src/modules/pokedex/pokemon/components/moves/Moves.tsx b/src/modules/pokedex/pokemon/components/moves/Moves.tsx index 64ef3c58..3df64f0b 100644 --- a/src/modules/pokedex/pokemon/components/moves/Moves.tsx +++ b/src/modules/pokedex/pokemon/components/moves/Moves.tsx @@ -15,7 +15,7 @@ import Link from 'next/link'; import { useEffect, useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { IMoveWithDetails, useFetchMachines, useFetchMoves } from '../../hooks'; -import { PokemonMovesSection } from './Styled.Moves.PokemonCard'; +import styles from './Moves.module.scss'; type Props = { pokemon: IPokemon; @@ -197,7 +197,7 @@ export function Moves({ pokemon, version, name }: Props) { } return ( - +

Moves

@@ -211,6 +211,6 @@ export function Moves({ pokemon, version, name }: Props) { - +
); } diff --git a/src/modules/pokedex/pokemon/components/moves/Styled.Moves.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/moves/Styled.Moves.PokemonCard.tsx deleted file mode 100644 index 37b87662..00000000 --- a/src/modules/pokedex/pokemon/components/moves/Styled.Moves.PokemonCard.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Section } from '@/components/common/styles/Sizing'; -import styled from 'styled-components'; - -export const PokemonMovesSection = styled(Section)` - overflow-x: hidden; -`; - -export const PokemonMovesMachine = styled.td` - text-transform: uppercase; -`; diff --git a/src/modules/pokedex/pokemon/components/nav/Nav.tsx b/src/modules/pokedex/pokemon/components/nav/Nav.tsx index e4b90153..a46a1e36 100644 --- a/src/modules/pokedex/pokemon/components/nav/Nav.tsx +++ b/src/modules/pokedex/pokemon/components/nav/Nav.tsx @@ -1,4 +1,3 @@ -import { GenNav } from '@/components/common/styles/Navbars'; import { Dispatch, SetStateAction } from 'react'; type Props = { @@ -10,11 +9,11 @@ type Props = { export function Nav({ pokemonId, setGame, setVersion, setFormat }: Props) { return ( - + ); } diff --git a/src/modules/pokedex/pokemon/components/sprites/Styled.Sprites.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/sprites/Sprites.module.scss similarity index 67% rename from src/modules/pokedex/pokemon/components/sprites/Styled.Sprites.PokemonCard.tsx rename to src/modules/pokedex/pokemon/components/sprites/Sprites.module.scss index be472d06..7fe9d9bf 100644 --- a/src/modules/pokedex/pokemon/components/sprites/Styled.Sprites.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/sprites/Sprites.module.scss @@ -1,7 +1,6 @@ -import styled from 'styled-components'; -import { device } from '@/components/common/styles/Sizing'; +@use '@/styles/abstracts' as *; -export const PokemonSpritesDiv = styled.div` +.sprites { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 3rem; @@ -20,7 +19,7 @@ export const PokemonSpritesDiv = styled.div` } } - @media ${device.xs} { + @include xs { grid-template-columns: repeat(2, 1fr); } -`; +} diff --git a/src/modules/pokedex/pokemon/components/sprites/Sprites.tsx b/src/modules/pokedex/pokemon/components/sprites/Sprites.tsx index 09919fc7..4596d47f 100644 --- a/src/modules/pokedex/pokemon/components/sprites/Sprites.tsx +++ b/src/modules/pokedex/pokemon/components/sprites/Sprites.tsx @@ -1,6 +1,6 @@ import { IPokemon } from '@/types'; import Image from 'next/image'; -import { PokemonSpritesDiv } from './Styled.Sprites.PokemonCard'; +import styles from './Sprites.module.scss'; type Props = { pokemon: IPokemon; @@ -11,7 +11,7 @@ export function Sprites({ pokemon }: Props) { <>

Sprites

- +
Back Shiny Female

)} - +
{pokemon.id < 650 && (

Animated sprites

- +
Back Shiny Female

)} - +
)} diff --git a/src/modules/pokedex/pokemon/components/types/Styled.Types.PokemonCard.tsx b/src/modules/pokedex/pokemon/components/types/Styled.Types.PokemonCard.tsx index a0abdbba..235872a1 100644 --- a/src/modules/pokedex/pokemon/components/types/Styled.Types.PokemonCard.tsx +++ b/src/modules/pokedex/pokemon/components/types/Styled.Types.PokemonCard.tsx @@ -1,6 +1,6 @@ -import { TypeDamageTable } from '@/components/pages/Types/TypeCard/Styled.TypeCard'; import styled from 'styled-components'; -import { PokedexTypes } from '../../Styled.Pokemon'; +import { TypeDamageTable } from '@/modules/types/type/Styled.TypeCard'; +import { PokedexTypes } from '@/modules/pokedex/Styled.Pokemon'; export const PokemonTypesList = styled(PokedexTypes)` width: fit-content; diff --git a/src/modules/types/type/Type.module.scss b/src/modules/types/type/Type.module.scss index d1654acd..f7a83021 100644 --- a/src/modules/types/type/Type.module.scss +++ b/src/modules/types/type/Type.module.scss @@ -104,7 +104,7 @@ cursor: pointer; &:hover { - @include themed() { + @include themed { border-bottom: 1px solid t('text'); } } diff --git a/src/modules/types/type/components/Pokemon.tsx b/src/modules/types/type/components/Pokemon.tsx index 11dd8e82..c3cd4441 100644 --- a/src/modules/types/type/components/Pokemon.tsx +++ b/src/modules/types/type/components/Pokemon.tsx @@ -15,6 +15,7 @@ import { ColumnDef } from '@tanstack/react-table'; import Image from 'next/image'; import Link from 'next/link'; import { useCallback, useEffect, useMemo, useState } from 'react'; +import Select from 'react-select'; type Props = { typeName?: string; @@ -172,7 +173,7 @@ export function Pokemon({ typeName, pokemon }: Props) { {typeName} type )} - t.isFixed)} isMulti @@ -181,7 +182,7 @@ export function Pokemon({ typeName, pokemon }: Props) { styles={dropdownStyles} name="type" id="type" - className="selectOptions" + className="dropdown selectOptions" classNamePrefix="select" options={typeArray} placeholder="Select" diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 35265639..b52cdf01 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,7 +2,7 @@ import { Pagination } from '@/components/common/styles/Pagination'; import { Divider } from '@/components/common/ui/Divider'; import Loader from '@/components/common/ui/Loader/Loader'; import { Filters, Heading, List, useScrollDir } from '@/modules/pokedex'; -import { PokedexVerticalText } from '@/modules/pokedex/Styled.Pokemon'; +import styles from '@/modules/pokedex/Pokedex.module.scss'; import { IPokemon } from '@/types'; import { IOptionsOffsetLimit, getPokedex } from '@/utils'; import { UseQueryResult, useQuery } from '@tanstack/react-query'; @@ -74,7 +74,7 @@ function Pokedex() { generation={generation} setGeneration={setGeneration} /> - ポケモン +

ポケモン

{scrollBtn()} diff --git a/src/pages/pokemon/[name].tsx b/src/pages/pokemon/[name].tsx index ead2b18e..b894b0aa 100644 --- a/src/pages/pokemon/[name].tsx +++ b/src/pages/pokemon/[name].tsx @@ -1,7 +1,7 @@ import BackBtn from '@/components/common/ui/BackBtn'; import { Divider } from '@/components/common/ui/Divider'; import Loader from '@/components/common/ui/Loader/Loader'; -import { PokemonTitle } from '@/modules/pokedex/Styled.Pokemon'; +import styles from '@/modules/pokedex/Pokedex.module.scss'; import { Cards, Competitive, @@ -89,7 +89,7 @@ function PokemonCard({ name }: Props) { <>
- +
{pokemon.data?.name?.includes(`mega`) ? (

{removeDash(pokemon.data?.name).split(` `).reverse().join(` `)} @@ -108,7 +108,7 @@ function PokemonCard({ name }: Props) { /> )} - +

{species.data && (

{removeDash(species.data?.generation?.name)} diff --git a/src/styles/abstracts/_animations.scss b/src/styles/abstracts/_animations.scss new file mode 100644 index 00000000..056a55bd --- /dev/null +++ b/src/styles/abstracts/_animations.scss @@ -0,0 +1,37 @@ +@mixin animate($animation, $duration, $times) { + animation: $animation $duration $times; +} + +@mixin pulse { + @keyframes pulse { + 0% { + transform: scale(1.01); + } + 50% { + transform: scale(0.99); + } + 100% { + transform: scale(1.01); + } + } +} + +@mixin wiggle { + @keyframes wiggle { + 0% { + transform: rotate(0deg); + } + 80% { + transform: rotate(0deg); + } + 85% { + transform: rotate(5deg); + } + 95% { + transform: rotate(-5deg); + } + 100% { + transform: rotate(0deg); + } + } +} diff --git a/src/styles/abstracts/_index.scss b/src/styles/abstracts/_index.scss index c0dc187b..def20cd6 100644 --- a/src/styles/abstracts/_index.scss +++ b/src/styles/abstracts/_index.scss @@ -1,2 +1,3 @@ -@forward './themes'; -@forward './breakpoints'; +@forward 'themes'; +@forward 'breakpoints'; +@forward 'animations'; diff --git a/src/styles/abstracts/_themes.scss b/src/styles/abstracts/_themes.scss index 51d28480..10f5ccb5 100644 --- a/src/styles/abstracts/_themes.scss +++ b/src/styles/abstracts/_themes.scss @@ -1,7 +1,7 @@ -$dark: #161616; -$light: #c4c4c4; $red: #cc0000; $purple: #5e318f; +$dark: #161616; +$light: #c4c4c4; $themes: ( dark: ( @@ -14,12 +14,31 @@ $themes: ( ), ); -@mixin themed() { +@mixin themed { + @each $theme, $map in $themes { + :global(.theme--#{$theme}) & { + $theme-map: () !global; + @each $key, $submap in $map { + $value: map-get($map, $key); + $theme-map: map-merge( + $theme-map, + ( + $key: $value, + ) + ) !global; + } + @content; + $theme-map: null !global; + } + } +} + +@mixin gthemed { @each $theme, $map in $themes { .theme--#{$theme} & { $theme-map: () !global; @each $key, $submap in $map { - $value: map-get(map-get($themes, $theme), '#{$key}'); + $value: map-get($map, $key); $theme-map: map-merge( $theme-map, ( diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss index a3545f81..1f66ca73 100644 --- a/src/styles/base/_reset.scss +++ b/src/styles/base/_reset.scss @@ -223,7 +223,7 @@ nav { z-index: 1000; opacity: 0; transition: opacity 0.5s ease-in-out; - @include themed() { + @include themed { background-color: t('text') !important; } diff --git a/src/styles/common/_headings.scss b/src/styles/common/_headings.scss index 852ecd7e..9446dfc6 100644 --- a/src/styles/common/_headings.scss +++ b/src/styles/common/_headings.scss @@ -5,7 +5,7 @@ font-size: 10rem; letter-spacing: 3px; cursor: pointer; - @include themed() { + @include gthemed { color: t('bg'); text-shadow: t('text') -1px -1px 0px, t('text') 1px -1px 0px, t('text') -1px 1px 0px, t('text') 1px 1px 0px; @@ -41,7 +41,7 @@ color: #c4c4c4; text-transform: capitalize; text-align: center; - @include themed() { + @include gthemed { color: t('bg'); text-shadow: t('text') -1px -1px 0px, t('text') 1px -1px 0px, t('text') -1px 1px 0px, t('text') 1px 1px 0px; diff --git a/src/styles/common/_index.scss b/src/styles/common/_index.scss index 236b87f5..d0685308 100644 --- a/src/styles/common/_index.scss +++ b/src/styles/common/_index.scss @@ -2,3 +2,5 @@ @forward './tables'; @forward './navbars'; @forward './sizing'; +@forward './inputs'; +@forward './search'; diff --git a/src/styles/common/_inputs.scss b/src/styles/common/_inputs.scss new file mode 100644 index 00000000..3b19a11f --- /dev/null +++ b/src/styles/common/_inputs.scss @@ -0,0 +1,159 @@ +@use '../abstracts' as *; + +.searchSection { + display: flex; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + margin-bottom: 5rem; +} + +.input { + display: flex; + align-items: start; + justify-content: center; + flex-direction: column; + + & label { + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + + & input { + width: 15vw; + min-width: 15rem; + padding: 0.5rem 1rem; + background: transparent; + border-radius: 5px; + transition: 0.3s ease-in-out; + @include gthemed { + color: t('text'); + border: 1px solid t('text'); + } + + &:focus { + outline: none; + border: 1px solid $red; + } + &::placeholder { + opacity: 0.8; + @include gthemed { + color: t('text'); + } + } + } +} + +.dropdown { + width: 100%; + & .select__control { + min-width: 15rem; + padding: 0 0.5rem; + background: transparent; + border-radius: 5px; + text-transform: capitalize; + font-size: 1.5rem; + transition: 0.3s ease-in-out; + @include gthemed { + color: t('text'); + border: 1px solid t('text'); + } + + &--is-focused { + outline: none; + border: 1px solid $red; + box-shadow: none; + + &:hover { + border-color: $red; + } + } + + & .select__input-container { + @include gthemed { + color: t('text') !important; + } + + &::first-letter { + text-transform: uppercase; + } + } + + & .select__placeholder { + font-size: 1.5rem; + @include gthemed { + color: t('text'); + } + } + + & .select__indicator-separator { + @include gthemed { + background-color: t('text'); + } + } + + & .select__dropdown-indicator { + @include gthemed { + color: t('text'); + } + } + } + + & .select__menu { + text-transform: capitalize; + font-size: 1.5rem; + @include gthemed { + color: t('text'); + background: t('bg'); + } + + & .select__option { + cursor: pointer; + background-color: transparent; + &--is-focused { + background-color: transparent; + color: $red; + } + } + } + + & .select__multi-value { + @include gthemed { + background-color: t('text'); + color: t('bg'); + } + + &__remove { + cursor: pointer; + transition: 0.3s ease-in-out; + + &:hover { + background-color: transparent; + color: $red; + } + } + + & .select__input { + color: white !important; + } + } + + & .select__single-value { + padding: 3px; + border-radius: 2px; + @include gthemed { + background-color: t('text'); + color: t('bg'); + } + } + + & .select__clear-indicator { + cursor: pointer; + transition: 0.3s ease-in-out; + + &:hover { + background-color: transparent; + color: $red; + } + } +} diff --git a/src/styles/common/_navbars.scss b/src/styles/common/_navbars.scss index ac89fd5e..c470791e 100644 --- a/src/styles/common/_navbars.scss +++ b/src/styles/common/_navbars.scss @@ -15,11 +15,11 @@ display: inline-block; position: relative; - & button { + .gen { background: none; border: none; font-size: 2rem; - @include themed() { + @include gthemed { color: t('text'); } @@ -32,10 +32,10 @@ display: none; position: absolute; white-space: nowrap; - background: #c4c4c4; + background-color: $light; border-radius: 5px; - -webkit-box-shadow: 2px 2px 15px 2px #161616; - box-shadow: 2px 2px 15px 2px #161616; + -webkit-box-shadow: 2px 2px 15px 2px $dark; + box-shadow: 2px 2px 15px 2px $dark; & button { display: block; @@ -44,9 +44,9 @@ border: none; margin: 1rem; text-align: left; - color: #161616; text-transform: capitalize; cursor: pointer; + color: $dark; &:hover { color: $red; } @@ -89,7 +89,7 @@ font-size: 1.7rem; font-weight: 600; transition: 0.3s ease-in-out; - @include themed() { + @include gthemed { color: t('text'); } @@ -122,7 +122,7 @@ transition: 0.3s ease-in-out; border-radius: 5px; transform: scale(1.2, 1.2); - @include themed() { + @include gthemed { background-color: t('text'); border: 1px solid t('text'); } @@ -141,7 +141,7 @@ cursor: pointer; transition: 0.3s ease-in-out; &:hover { - @include themed() { + @include gthemed { color: t('bg'); } } @@ -155,7 +155,7 @@ border: 1px solid transparent; border-radius: 5px; transition: 0.3s ease-in-out; - @include themed() { + @include gthemed { background: t('text'); color: t('bg'); } @@ -189,7 +189,7 @@ transition: 0.3s ease-in-out; border-radius: 5px; transform: scale(1.2, 1.2); - @include themed() { + @include gthemed { border: 1px solid t('text'); background-color: t('bg'); } @@ -208,11 +208,11 @@ z-index: 3; cursor: pointer; transition: 0.3s ease-in-out; - @include themed() { + @include gthemed { color: t('bg'); } &:hover { - @include themed() { + @include gthemed { color: t('text'); } } diff --git a/src/styles/common/_search.scss b/src/styles/common/_search.scss new file mode 100644 index 00000000..5165d227 --- /dev/null +++ b/src/styles/common/_search.scss @@ -0,0 +1,72 @@ +@use './inputs' as *; +@use './tables' as *; +@use '../abstracts' as *; + +.search { + @extend .input; + min-width: 25rem; + + & label { + font-size: 1.7rem; + } + + & input { + width: 100%; + height: 100%; + padding: 0 1rem; + text-transform: capitalize; + + &::placeholder { + font-size: 1.5rem; + font-family: 'Quicksand', serif; + @include gthemed { + color: t('text'); + } + } + } + + @include md { + grid-area: search; + } + + @include xs { + min-width: 0; + } +} + +.searchContainer { + width: 100%; + position: relative; + z-index: 2; + + & ul { + width: 100%; + position: absolute; + top: 0.5rem; + left: 0; + border-radius: 5px; + @include gthemed { + background: t('text'); + color: t('bg'); + } + + & li { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 10%; + } + } +} + +.searchLink { + @extend .tLink; + font-size: 1.7rem; + &:hover { + text-decoration: underline; + } +} + +.searchId { + font-size: 1.7rem; +} diff --git a/src/styles/common/_tables.scss b/src/styles/common/_tables.scss index daa9e345..93367e11 100644 --- a/src/styles/common/_tables.scss +++ b/src/styles/common/_tables.scss @@ -10,14 +10,14 @@ &::-webkit-scrollbar-track { border-radius: 5px; - @include themed() { + @include gthemed { background-color: t('bg'); } } &::-webkit-scrollbar-thumb { border-radius: 5px; - @include themed() { + @include gthemed { background-color: t('text'); } } @@ -109,7 +109,7 @@ font-weight: 600; text-transform: capitalize; background: rgba(130, 130, 130, 0.2); - @include themed() { + @include gthemed { color: t('text'); } } @@ -125,6 +125,10 @@ text-transform: capitalize; } +.tUppercase { + text-transform: uppercase; +} + .tBold { text-transform: capitalize; font-size: 1.7rem; @@ -138,7 +142,7 @@ transition: 0.3s ease-in-out; &:hover { - @include themed() { + @include gthemed { border-bottom: 1px solid t('text'); } } @@ -183,7 +187,7 @@ & span { font-family: 'Oswald', sans-serif; font-size: 1.7rem; - @include themed() { + @include gthemed { 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; diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 52c79a8f..27eec31c 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,3 +1,3 @@ -@import './abstracts'; -@import './base'; -@import './common/'; +@forward 'abstracts'; +@forward 'base'; +@forward 'common';