Prettier Header.css

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import Header from 'components/Header';
+import Header from 'components/Header/Header';
 import Pokedex from 'features/Pokedex';
 import Filters from 'features/Filters';
 import InfoDialog from 'features/InfoDialog';

src/components/Header.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import logo from '../assets/poke_logo.png';
-
-const Header = () => {
-  return (
-    <div>
-      <div className="poke__logos">
-        <img src={logo} alt="Poke Logo" />
-      </div>
-    </div>
-  );
-};
-
-export default Header;

src/components/Header/Header.css

@@ -0,0 +1,12 @@
+.poke__logos {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+}
+
+.poke__logo {
+  margin-top: 10px;
+  width: 15vw;
+  -webkit-filter: drop-shadow(5px 0px 0px rgba(0, 0, 0, 0.6));
+  filter: drop-shadow(5px 0px 0px rgba(0, 0, 0, 0.6));
+}

src/components/Header/Header.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import logo from 'assets/images/pokedex.png';
+import './Header.css';
+
+const Header = () => {
+  return (
+    <div>
+      <div className="app__header">
+        <div className="poke__logo noselect">
+          <img src={logo} alt="Poke Logo" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header';

src/components/InfoDialogComponent/InfoDialogComponent.css

@@ -3,7 +3,7 @@ html {
   --cardborder: #fff;
   --pokenumber: hsl(228, 28%, 20%);
   --info: #fff;
-  --bggradient: url('assets/bg.png');
+  --bggradient: url('assets/images/bg.png');
   --bgcolor: none;
 }
 
@@ -16,6 +16,16 @@ html[data-theme='dark'] {
   --bgcolor: #16171f;
 }
 
+@font-face {
+  font-family: 'Teko';
+  src: url('assets/fonts/Teko-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'VT323';
+  src: url('assets/fonts/VT323-Regular.ttf');
+}
+
 .info__container {
   width: 100%;
   display: flex;
@@ -137,7 +147,7 @@ html[data-theme='dark'] {
 }
 
 .dialog__bg {
-  background-image: url('assets/bg.png');
+  background-image: url('assets/images/bg.png');
   background-repeat: repeat;
 }
 

src/components/Loading/Loading.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Press Start 2P';
+  src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+}
+
+.app__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.app__container .loading__text {
+  font-family: 'Press Start 2P', cursive;
+  color: var(--colorPrimary);
+}
+
+.app__container .loading__text {
+  font-family: 'Press Start 2P', cursive;
+  color: var(--colorPrimary);
+}
+
+.loading__gif {
+  width: 15%;
+}
+
+@media screen and (max-width: 767px) {
+  .loading__gif {
+    width: 35%;
+  }
+  .poke__logo {
+    width: 35vw;
+  }
+  .filter__container {
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    align-items: center;
+    margin: 7vh 0 5vh 0;
+    gap: 2vh 2vw;
+    justify-content: center;
+  }
+  select,
+  .filter__items > input {
+    width: 40vw;
+  }
+}

src/components/Loading/Loading.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './Loading.css';
+
 const Loading = () => {
   return (
     <div className="loading">

src/components/Loading/index.ts

@@ -0,0 +1 @@
+export { default } from './Loading';

src/components/PokemonCard/PokemonCard.css

@@ -28,7 +28,7 @@ html {
 
 @font-face {
   font-family: 'Press Start 2P';
-  src: url('assets/PressStart2P-Regular.ttf') format('truetype');
+  src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');
 }
 
 .thumbnail__container {

src/features/InfoDialog/infoDialogSlice.ts

@@ -99,7 +99,7 @@ export const constructPokemonInfoFromResponses = (
     types: fetchedPokemon.types.map(type => type.type.name),
     height: fetchedPokemon.height,
     weight: fetchedPokemon.weight,
-    genderRatio: fetchedPokemonSpecies.gender_rate - 1,
+    genderRatio: fetchedPokemonSpecies.gender_rate,
     description: findFirstEnglishFlavorText(
       fetchedPokemonSpecies.flavor_text_entries,
     ),

src/features/Pokedex/Pokedex.tsx

@@ -4,7 +4,7 @@ import Loading from 'components/Loading';
 
 import { useAppSelector, useAppDispatch } from 'app/hooks';
 import { fetchPokemonsInTheRegion } from './pokedexSlice';
-import { fetchSelectedPokemonInfo } from '../InfoDialog/infoDialogSlice';
+import { fetchSelectedPokemonInfo } from 'features/InfoDialog/infoDialogSlice';
 
 export const filterPokemonCardsByType = (
   pokemonList: PokemonCardProps[],

src/index.css

@@ -1,6 +1,6 @@
 html {
   --toggle: hsl(230deg 17% 85%);
-  --bggradient: url('assets/bg.png');
+  --bggradient: url('assets/images/bg.png');
   --bgcolor: none;
   --colorPrimary: #000;
   --filterHeading: #000;
@@ -38,7 +38,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-image: url('assets/bg.png');
+  background-image: url('assets/images/bg.png');
   background-size: initial;
   background-repeat: repeat;
 }