Merge pull request #13 from zeroreign/feature/responsive-styles-for-m…

…obile-first Redo the styles to be repsonisve by following mobile first principle
zeroreign · May 26, 2024 · 7d72f04 · 7d72f04
2 parents 295ddf6 + 1125a85
commit 7d72f04
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 95 deletions.
diff --git a/frontend/src/app/__snapshots__/page.spec.tsx.snap b/frontend/src/app/__snapshots__/page.spec.tsx.snap
@@ -2,24 +2,28 @@
 
 exports[`App renders homepage unchanged 1`] = `
 <div>
-  <div>
-    <h1>
-      Pokedex
-    </h1>
-    <p>
-      Welcome to the Pokedex App
-    </p>
+  <div
+    class="bg-white h-screen flex md:flex md:flex-auto md:items-center md:justify-center"
+  >
     <div
-      class="bg-white relative py-8 px-6 border-double border-black rounded-bl-[2rem] rounded-t-[0.25rem] rounded-br[0.25rem] aspect-[4/3] size-1/6"
-      id="framed-screen"
+      class="flex flex-auto flex-col items-center justify-center bg-red md:max-w-sm md:min-h-[700px] md:rounded-md static inner-shadow-border"
     >
       <div
-        class="bg-black flex grow items-center justify-center relative text-white text-wrap rounded-[0.25rem] h-full w-full"
-      />
+        class="bg-white relative shadow shadow-[#000000] pt-8 pl-9 pr-7 pb-11 m-2 border-double border-r-4	border-b-4 border-t-[1px] border-l border-[#000000] rounded-bl-[2.5rem] rounded-t-md rounded-br-md aspect-[4/3] w-10/12"
+        id="framed-screen"
+      >
+        <div
+          class="bg-black flex items-center justify-center relative text-white text-wrap rounded-[0.25rem] h-full w-full shadow-border"
+        />
+      </div>
+      <div
+        class="relative w-10/12 m-8"
+      >
+        <div
+          class="bg-brown text-white font-mono tracking-wider h-[84px] w-full p-1.5 rounded-[0.25rem] shadow-border"
+        />
+      </div>
     </div>
-    <div
-      class="bg-brown text-white font-mono tracking-wider w-1/6 h-[72.974px]"
-    />
   </div>
 </div>
 `;
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+  .shadow-border {
+    @apply shadow shadow-[#000000] border border-[#000000]
+  }
+  .inner-shadow-border {
+    @apply shadow-inner shadow-[#000000] border border-[#000000]
+  }
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <PokemonAPIProvider>
-        <body className="bg-red">{children}</body>
+        <body>{children}</body>
       </PokemonAPIProvider>
     </html>
   );

diff --git a/frontend/src/app/page.spec.tsx b/frontend/src/app/page.spec.tsx
@@ -5,15 +5,6 @@ import { PokemonTypes } from "@/components/PokemonAPIProvider/pokemon-api.types"
 import PokemonAPIProvider from "@/components/PokemonAPIProvider";
 
 describe("App", () => {
-  it("renders a heading", () => {
-    render(<Home />, { wrapper: PokemonAPIProvider });
-
-    const heading = screen.getByRole("heading", { level: 1 });
-
-    expect(heading).toBeInTheDocument();
-    expect(heading).toHaveTextContent("Pokedex");
-  });
-
   it("renders homepage unchanged", () => {
     const { container } = render(<Home />, { wrapper: PokemonAPIProvider });
     expect(container).toMatchSnapshot();

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,7 +1,10 @@
 "use client";
 import FramedScreen from "@/components/FramedScreen";
 import { FramedScreenProps } from "@/components/FramedScreen/types";
-import { IQuery, Pokemon } from "@/components/PokemonAPIProvider/pokemon-api.types";
+import {
+  IQuery,
+  Pokemon,
+} from "@/components/PokemonAPIProvider/pokemon-api.types";
 import PokemonDetails from "@/components/PokemonDetails";
 import { PokemonDetailsProps } from "@/components/PokemonDetails/types";
 import { gql, useQuery } from "@apollo/client";
@@ -29,7 +32,7 @@ export default function Home() {
 
   type GetPokemonResponse = {
     pokemon: Awaited<ReturnType<IQuery["pokemon"]>>;
-  }
+  };
 
   const { loading, error, data } = useQuery<GetPokemonResponse>(GET_POKEMONT, {
     variables: { name: queryInput },
@@ -59,11 +62,11 @@ export default function Home() {
   });
 
   return (
-    <div>
-      <h1>Pokedex</h1>
-      <p>Welcome to the Pokedex App</p>
-      <FramedScreen pokemon={pokemonImage?.pokemon} />
-      <PokemonDetails details={pokemonDetails?.details} />
+    <div className="bg-white h-screen flex md:flex md:flex-auto md:items-center md:justify-center">
+      <div className="flex flex-auto flex-col items-center justify-center bg-red md:max-w-sm md:min-h-[700px] md:rounded-md static inner-shadow-border">
+        <FramedScreen pokemon={pokemonImage?.pokemon} />
+        <PokemonDetails details={pokemonDetails?.details} />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/FramedScreen/index.tsx b/frontend/src/components/FramedScreen/index.tsx
@@ -23,15 +23,14 @@ const FramedScreen = ({
   return (
     <div
       id="framed-screen"
-      className={`bg-white relative py-8 px-6 border-double border-black rounded-bl-[2rem] rounded-t-[0.25rem] rounded-br[0.25rem] aspect-[4/3] size-1/6`}
+      className={`bg-white relative shadow shadow-[#000000] pt-8 pl-9 pr-7 pb-11 m-2 border-double border-r-4	border-b-4 border-t-[1px] border-l border-[#000000] rounded-bl-[2.5rem] rounded-t-md rounded-br-md aspect-[4/3] w-10/12`}
     >
-      <div className="bg-black flex grow items-center justify-center relative text-white text-wrap rounded-[0.25rem] h-full w-full">
+      <div className="bg-black flex items-center justify-center relative text-white text-wrap rounded-[0.25rem] h-full w-full shadow-border">
         {pokemon?.image && (
           <Image
             src={error.hasError ? "/unown-error.gif" : pokemon.image}
             alt={error.hasError ? error.errorLabel : pokemon.name}
-            width={200}
-            height={200}
+            fill={true}
             unoptimized={true}
             onError={handleError}
             className="object-contain"

diff --git a/frontend/src/components/PokemonDetails/__snapshots__/index.spec.tsx.snap b/frontend/src/components/PokemonDetails/__snapshots__/index.spec.tsx.snap
@@ -3,55 +3,63 @@
 exports[`Pokemon Details should be blank when there are no details 1`] = `
 <div>
   <div
-    class="bg-brown text-white font-mono tracking-wider w-1/6 h-[72.974px]"
-  />
+    class="relative w-10/12 m-8"
+  >
+    <div
+      class="bg-brown text-white font-mono tracking-wider h-[84px] w-full p-1.5 rounded-[0.25rem] shadow-border"
+    />
+  </div>
 </div>
 `;
 
 exports[`Pokemon Details should render unchanged 1`] = `
 <div>
   <div
-    class="bg-brown text-white font-mono tracking-wider w-1/6 h-[72.974px]"
+    class="relative w-10/12 m-8"
   >
     <div
-      class="flex justify-between"
-      id="identifiers"
+      class="bg-brown text-white font-mono tracking-wider h-[84px] w-full p-1.5 rounded-[0.25rem] shadow-border"
     >
-      <h2>
-        # 
-        94
-      </h2>
-      <h2>
-        Gengar
-      </h2>
-    </div>
-    <ul
-      class="flex justify-evenly"
-      id="types"
-    >
-      <li>
+      <div
+        class="flex justify-between"
+        id="identifiers"
+      >
+        <h2>
+          # 
+          94
+        </h2>
+        <h2>
+          Gengar
+        </h2>
+      </div>
+      <ul
+        class="flex justify-evenly"
+        id="types"
+      >
+        <li>
+          <p>
+            Poison
+          </p>
+        </li>
+        <li>
+          <p>
+            Ghost
+          </p>
+        </li>
+      </ul>
+      <div
+        class="flex justify-evenly space-x-8"
+        id="dimentions"
+      >
         <p>
-          Poison
+          Height: 
+          15
         </p>
-      </li>
-      <li>
         <p>
-          Ghost
+          Weight: 
+          405
         </p>
-      </li>
-    </ul>
-    <div
-      class="flex justify-evenly space-x-8"
-      id="dimentions"
-    >
-      <p>
-        Height: 
-        15
-      </p>
-      <p>
-        Weight: 
-        405
-      </p>
+      </div>
     </div>
   </div>
 </div>

diff --git a/frontend/src/components/PokemonDetails/index.tsx b/frontend/src/components/PokemonDetails/index.tsx
@@ -4,29 +4,35 @@ import { capitalize } from "lodash";
 
 const PokemonDetails = ({ details }: PokemonDetailsProps) => {
   return (
-    <div className={"bg-brown text-white font-mono tracking-wider w-1/6 h-[72.974px]"}>
-      {details && (
-        <>
-          <div id="identifiers" className="flex justify-between">
-            <h2># {details.id}</h2>
-            <h2>{capitalize(details.name)}</h2>
-          </div>
-          <ul id="types" className="flex justify-evenly">
-            {details.types?.map((type) => {
-              return (
-                <li key={type}>
-                  <p>{capitalize(type)}</p>
-                </li>
-              );
-            })}
-          </ul>
-          <div id="dimentions" className="flex justify-evenly space-x-8">
-            <p>Height: {details.height}</p>
-            <p>Weight: {details.weight}</p>
-          </div>
-        </>
-      )}
-    </div>
+    <div className={`relative w-10/12 m-8`}>
+      <div
+        className={
+          "bg-brown text-white font-mono tracking-wider h-[84px] w-full p-1.5 rounded-[0.25rem] shadow-border"
+        }
+      >
+          {details && (
+            <>
+              <div id="identifiers" className="flex justify-between">
+                <h2># {details.id}</h2>
+                <h2>{capitalize(details.name)}</h2>
+              </div>
+              <ul id="types" className="flex justify-evenly">
+                {details.types?.map((type) => {
+                  return (
+                    <li key={type}>
+                      <p>{capitalize(type)}</p>
+                    </li>
+                  );
+                })}
+              </ul>
+              <div id="dimentions" className="flex justify-evenly space-x-8">
+                <p>Height: {details.height}</p>
+                <p>Weight: {details.weight}</p>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
   );
 };