feat: visual improvements

nicoleloupias · Jul 8, 2024 · 90a8e70 · 90a8e70
1 parent 8deb934
commit 90a8e70
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 22 deletions.
diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
@@ -34,7 +34,8 @@ exports[`<App/> > should render succesfully 1`] = `
             class="css-ybip2u"
           />
           <h2
-            class="chakra-heading css-113y03g"
+            class="chakra-heading css-1s7duys"
+            style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
           >
             Explore the galaxy
           </h2>
@@ -43,6 +44,7 @@ exports[`<App/> > should render succesfully 1`] = `
           />
           <p
             class="chakra-text css-1kyjpe6"
+            style="transform: translateY(-10px) translateZ(0);"
           >
             Scroll
             <svg
@@ -61,7 +63,7 @@ exports[`<App/> > should render succesfully 1`] = `
           class="css-b93e9j"
         >
           <section
-            class="css-1bb2txy"
+            class="css-h8f160"
           >
             <form
               class="css-1654nw7"
@@ -269,7 +271,8 @@ exports[`<App/> > should render succesfully 1`] = `
           class="css-ybip2u"
         />
         <h2
-          class="chakra-heading css-113y03g"
+          class="chakra-heading css-1s7duys"
+          style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
         >
           Explore the galaxy
         </h2>
@@ -278,6 +281,7 @@ exports[`<App/> > should render succesfully 1`] = `
         />
         <p
           class="chakra-text css-1kyjpe6"
+          style="transform: translateY(-10px) translateZ(0);"
         >
           Scroll
           <svg
@@ -296,7 +300,7 @@ exports[`<App/> > should render succesfully 1`] = `
         class="css-b93e9j"
       >
         <section
-          class="css-1bb2txy"
+          class="css-h8f160"
         >
           <form
             class="css-1654nw7"

diff --git a/src/assets/Darth-Vader-PNG-HD-Image.png b/src/assets/Darth-Vader-PNG-HD-Image.png
diff --git a/src/setup-test.ts b/src/setup-test.ts
@@ -4,8 +4,6 @@ import { afterEach, beforeAll, vi } from "vitest";
 import { server } from "./mocks/server";
 
 beforeAll(() => {
-  vi.stubEnv("API_URL", "https://swapi.dev/api");
-  vi.stubEnv("VITE_API_URL", "https://swapi.dev/api");
   server.listen();
 });
 

diff --git a/src/views/Home/Home.tsx b/src/views/Home/Home.tsx
@@ -30,7 +30,7 @@ export const Home = () => {
     <>
       <Hero />
       <Center flexDir="column">
-        <Box as="section" minW={{ lg: "1040px" }} mt={10}>
+        <Box as="section" minW={{ lg: "1040px" }} my={10}>
           <Flex as="form" gap={2} justifyItems="flex-start" flexDir={{ base: "column", lg: "row" }}>
             <SearchBar setPlanetsToShow={setPlanetsToShow} form={form} />
             <SortBy setPlanetsToShow={setPlanetsToShow} planetsToShow={planetsToShow} form={form} />

diff --git a/src/views/Home/__snapshots__/Home.test.tsx.snap b/src/views/Home/__snapshots__/Home.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`<Home/> > should render succesfully 1`] = `
           class="css-ybip2u"
         />
         <h2
-          class="chakra-heading css-113y03g"
+          class="chakra-heading css-1s7duys"
+          style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
         >
           Explore the galaxy
         </h2>
@@ -23,6 +24,7 @@ exports[`<Home/> > should render succesfully 1`] = `
         />
         <p
           class="chakra-text css-1kyjpe6"
+          style="transform: translateY(-10px) translateZ(0);"
         >
           Scroll
           <svg
@@ -41,7 +43,7 @@ exports[`<Home/> > should render succesfully 1`] = `
         class="css-b93e9j"
       >
         <section
-          class="css-1bb2txy"
+          class="css-h8f160"
         >
           <form
             class="css-1654nw7"
@@ -749,7 +751,8 @@ exports[`<Home/> > should render succesfully 1`] = `
         class="css-ybip2u"
       />
       <h2
-        class="chakra-heading css-113y03g"
+        class="chakra-heading css-1s7duys"
+        style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
       >
         Explore the galaxy
       </h2>
@@ -758,6 +761,7 @@ exports[`<Home/> > should render succesfully 1`] = `
       />
       <p
         class="chakra-text css-1kyjpe6"
+        style="transform: translateY(-10px) translateZ(0);"
       >
         Scroll
         <svg
@@ -776,7 +780,7 @@ exports[`<Home/> > should render succesfully 1`] = `
       class="css-b93e9j"
     >
       <section
-        class="css-1bb2txy"
+        class="css-h8f160"
       >
         <form
           class="css-1654nw7"

diff --git a/src/views/Home/components/Hero.tsx b/src/views/Home/components/Hero.tsx
@@ -1,7 +1,10 @@
 import { Box, Flex, Heading, Text } from "@chakra-ui/react";
 import darth from "../../../assets/darth.png";
 import { ArrowDownIcon } from "@chakra-ui/icons";
+import { motion } from "framer-motion";
 
+const AnimatedHeading = motion(Heading);
+const AnimatedText = motion(Text);
 export const Hero = () => {
   return (
     <Flex
@@ -28,25 +31,37 @@ export const Hero = () => {
       }}
     >
       <Box zIndex={1} ml={{ base: 4, lg: 12 }} alignSelf="stretch" w="1px" bgColor="white"></Box>
-      <Heading
+      <AnimatedHeading
+        initial={{ opacity: 0, y: 200, x: "-50%" }}
+        animate={{ opacity: 1, y: 0, x: "-50%" }}
+        transition={{ duration: 0.5 }}
         zIndex={1}
         fontWeight={900}
-        justifySelf="center"
         fontSize={{ base: "4rem", lg: "6rem" }}
         textTransform="uppercase"
         pos="absolute"
         left="50%"
         width="max-content"
-        transform="translateX(-50%)"
+        // transform="translateX(-50%)"
       >
         Explore the galaxy
-      </Heading>
+      </AnimatedHeading>
       <Box mr={{ base: 4, lg: 12 }} ml="auto" alignSelf="stretch" w="1px" bgColor="white"></Box>
 
-      <Text fontSize="xl" zIndex={1} pos="absolute" bottom={20} left={"50%"} transform={"translateX(-50%)"}>
+      <AnimatedText
+        animate={{ y: 0 }}
+        initial={{ y: -10 }}
+        transition={{ repeat: Infinity, repeatType: "mirror", duration: 0.7, bounce: 0.25 }}
+        fontSize="xl"
+        zIndex={1}
+        pos="absolute"
+        bottom={20}
+        left={"50%"}
+        transform={"translateX(-50%)"}
+      >
         Scroll
         <ArrowDownIcon ml={2} />
-      </Text>
+      </AnimatedText>
     </Flex>
   );
 };
diff --git a/src/views/Home/components/__snapshots__/Hero.test.tsx.snap b/src/views/Home/components/__snapshots__/Hero.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`<Hero/> > should render succesfully 1`] = `
           class="css-ybip2u"
         />
         <h2
-          class="chakra-heading css-113y03g"
+          class="chakra-heading css-1s7duys"
+          style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
         >
           Explore the galaxy
         </h2>
@@ -23,6 +24,7 @@ exports[`<Hero/> > should render succesfully 1`] = `
         />
         <p
           class="chakra-text css-1kyjpe6"
+          style="transform: translateY(-10px) translateZ(0);"
         >
           Scroll
           <svg
@@ -97,7 +99,8 @@ exports[`<Hero/> > should render succesfully 1`] = `
         class="css-ybip2u"
       />
       <h2
-        class="chakra-heading css-113y03g"
+        class="chakra-heading css-1s7duys"
+        style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
       >
         Explore the galaxy
       </h2>
@@ -106,6 +109,7 @@ exports[`<Hero/> > should render succesfully 1`] = `
       />
       <p
         class="chakra-text css-1kyjpe6"
+        style="transform: translateY(-10px) translateZ(0);"
       >
         Scroll
         <svg

diff --git a/src/views/Planet/PlanetDetails/PlanetDetails.tsx b/src/views/Planet/PlanetDetails/PlanetDetails.tsx
@@ -93,7 +93,7 @@ export const PlanetDetails = () => {
                 ))}
               </UnorderedList>
             ) : (
-              <Text>There are no residents in this planet.</Text>
+              <Text textTransform="initial">There are no residents in this planet.</Text>
             )}
           </Box>
 

diff --git a/src/views/Planet/PlanetDetails/__snapshots__/PlanetDetails.test.tsx.snap b/src/views/Planet/PlanetDetails/__snapshots__/PlanetDetails.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`<PlanetDetails /> > should render succesfully 1`] = `
                 Residents
               </h3>
               <p
-                class="chakra-text css-0"
+                class="chakra-text css-5zyh61"
               >
                 There are no residents in this planet.
               </p>
@@ -257,7 +257,7 @@ exports[`<PlanetDetails /> > should render succesfully 1`] = `
               Residents
             </h3>
             <p
-              class="chakra-text css-0"
+              class="chakra-text css-5zyh61"
             >
               There are no residents in this planet.
             </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -93,7 +93,7 @@ export const PlanetDetails = () => { @@
                     ))}
                   </UnorderedList>
                 ) : (
-                  <Text>There are no residents in this planet.</Text>
+                  <Text textTransform="initial">There are no residents in this planet.</Text>
                 )}
               </Box>
@@ Expand Down @@