Skip to content

Commit 90a8e70

Browse files
nicoleloupiasnicoleloupias
committed
feat: visual improvements
1 parent 8deb934 commit 90a8e70

File tree

9 files changed

+47
-22
lines changed

9 files changed

+47
-22
lines changed

‎src/__snapshots__/App.test.tsx.snap

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ exports[`<App/> > should render succesfully 1`] = `
3434
class="css-ybip2u"
3535
/>
3636
<h2
37-
class="chakra-heading css-113y03g"
37+
class="chakra-heading css-1s7duys"
38+
style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
3839
>
3940
Explore the galaxy
4041
</h2>
@@ -43,6 +44,7 @@ exports[`<App/> > should render succesfully 1`] = `
4344
/>
4445
<p
4546
class="chakra-text css-1kyjpe6"
47+
style="transform: translateY(-10px) translateZ(0);"
4648
>
4749
Scroll
4850
<svg
@@ -61,7 +63,7 @@ exports[`<App/> > should render succesfully 1`] = `
6163
class="css-b93e9j"
6264
>
6365
<section
64-
class="css-1bb2txy"
66+
class="css-h8f160"
6567
>
6668
<form
6769
class="css-1654nw7"
@@ -269,7 +271,8 @@ exports[`<App/> > should render succesfully 1`] = `
269271
class="css-ybip2u"
270272
/>
271273
<h2
272-
class="chakra-heading css-113y03g"
274+
class="chakra-heading css-1s7duys"
275+
style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
273276
>
274277
Explore the galaxy
275278
</h2>
@@ -278,6 +281,7 @@ exports[`<App/> > should render succesfully 1`] = `
278281
/>
279282
<p
280283
class="chakra-text css-1kyjpe6"
284+
style="transform: translateY(-10px) translateZ(0);"
281285
>
282286
Scroll
283287
<svg
@@ -296,7 +300,7 @@ exports[`<App/> > should render succesfully 1`] = `
296300
class="css-b93e9j"
297301
>
298302
<section
299-
class="css-1bb2txy"
303+
class="css-h8f160"
300304
>
301305
<form
302306
class="css-1654nw7"

‎src/assets/Darth-Vader-PNG-HD-Image.png

-345 KB
Binary file not shown.

‎src/setup-test.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { afterEach, beforeAll, vi } from "vitest";
44
import { server } from "./mocks/server";
55

66
beforeAll(() => {
7-
vi.stubEnv("API_URL", "https://swapi.dev/api");
8-
vi.stubEnv("VITE_API_URL", "https://swapi.dev/api");
97
server.listen();
108
});
119

‎src/views/Home/Home.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const Home = () => {
3030
<>
3131
<Hero />
3232
<Center flexDir="column">
33-
<Box as="section" minW={{ lg: "1040px" }} mt={10}>
33+
<Box as="section" minW={{ lg: "1040px" }} my={10}>
3434
<Flex as="form" gap={2} justifyItems="flex-start" flexDir={{ base: "column", lg: "row" }}>
3535
<SearchBar setPlanetsToShow={setPlanetsToShow} form={form} />
3636
<SortBy setPlanetsToShow={setPlanetsToShow} planetsToShow={planetsToShow} form={form} />

‎src/views/Home/__snapshots__/Home.test.tsx.snap

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ exports[`<Home/> > should render succesfully 1`] = `
1414
class="css-ybip2u"
1515
/>
1616
<h2
17-
class="chakra-heading css-113y03g"
17+
class="chakra-heading css-1s7duys"
18+
style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
1819
>
1920
Explore the galaxy
2021
</h2>
@@ -23,6 +24,7 @@ exports[`<Home/> > should render succesfully 1`] = `
2324
/>
2425
<p
2526
class="chakra-text css-1kyjpe6"
27+
style="transform: translateY(-10px) translateZ(0);"
2628
>
2729
Scroll
2830
<svg
@@ -41,7 +43,7 @@ exports[`<Home/> > should render succesfully 1`] = `
4143
class="css-b93e9j"
4244
>
4345
<section
44-
class="css-1bb2txy"
46+
class="css-h8f160"
4547
>
4648
<form
4749
class="css-1654nw7"
@@ -749,7 +751,8 @@ exports[`<Home/> > should render succesfully 1`] = `
749751
class="css-ybip2u"
750752
/>
751753
<h2
752-
class="chakra-heading css-113y03g"
754+
class="chakra-heading css-1s7duys"
755+
style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
753756
>
754757
Explore the galaxy
755758
</h2>
@@ -758,6 +761,7 @@ exports[`<Home/> > should render succesfully 1`] = `
758761
/>
759762
<p
760763
class="chakra-text css-1kyjpe6"
764+
style="transform: translateY(-10px) translateZ(0);"
761765
>
762766
Scroll
763767
<svg
@@ -776,7 +780,7 @@ exports[`<Home/> > should render succesfully 1`] = `
776780
class="css-b93e9j"
777781
>
778782
<section
779-
class="css-1bb2txy"
783+
class="css-h8f160"
780784
>
781785
<form
782786
class="css-1654nw7"

‎src/views/Home/components/Hero.tsx

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { Box, Flex, Heading, Text } from "@chakra-ui/react";
22
import darth from "../../../assets/darth.png";
33
import { ArrowDownIcon } from "@chakra-ui/icons";
4+
import { motion } from "framer-motion";
45

6+
const AnimatedHeading = motion(Heading);
7+
const AnimatedText = motion(Text);
58
export const Hero = () => {
69
return (
710
<Flex
@@ -28,25 +31,37 @@ export const Hero = () => {
2831
}}
2932
>
3033
<Box zIndex={1} ml={{ base: 4, lg: 12 }} alignSelf="stretch" w="1px" bgColor="white"></Box>
31-
<Heading
34+
<AnimatedHeading
35+
initial={{ opacity: 0, y: 200, x: "-50%" }}
36+
animate={{ opacity: 1, y: 0, x: "-50%" }}
37+
transition={{ duration: 0.5 }}
3238
zIndex={1}
3339
fontWeight={900}
34-
justifySelf="center"
3540
fontSize={{ base: "4rem", lg: "6rem" }}
3641
textTransform="uppercase"
3742
pos="absolute"
3843
left="50%"
3944
width="max-content"
40-
transform="translateX(-50%)"
45+
// transform="translateX(-50%)"
4146
>
4247
Explore the galaxy
43-
</Heading>
48+
</AnimatedHeading>
4449
<Box mr={{ base: 4, lg: 12 }} ml="auto" alignSelf="stretch" w="1px" bgColor="white"></Box>
4550

46-
<Text fontSize="xl" zIndex={1} pos="absolute" bottom={20} left={"50%"} transform={"translateX(-50%)"}>
51+
<AnimatedText
52+
animate={{ y: 0 }}
53+
initial={{ y: -10 }}
54+
transition={{ repeat: Infinity, repeatType: "mirror", duration: 0.7, bounce: 0.25 }}
55+
fontSize="xl"
56+
zIndex={1}
57+
pos="absolute"
58+
bottom={20}
59+
left={"50%"}
60+
transform={"translateX(-50%)"}
61+
>
4762
Scroll
4863
<ArrowDownIcon ml={2} />
49-
</Text>
64+
</AnimatedText>
5065
</Flex>
5166
);
5267
};

‎src/views/Home/components/__snapshots__/Hero.test.tsx.snap

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ exports[`<Hero/> > should render succesfully 1`] = `
1414
class="css-ybip2u"
1515
/>
1616
<h2
17-
class="chakra-heading css-113y03g"
17+
class="chakra-heading css-1s7duys"
18+
style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
1819
>
1920
Explore the galaxy
2021
</h2>
@@ -23,6 +24,7 @@ exports[`<Hero/> > should render succesfully 1`] = `
2324
/>
2425
<p
2526
class="chakra-text css-1kyjpe6"
27+
style="transform: translateY(-10px) translateZ(0);"
2628
>
2729
Scroll
2830
<svg
@@ -97,7 +99,8 @@ exports[`<Hero/> > should render succesfully 1`] = `
9799
class="css-ybip2u"
98100
/>
99101
<h2
100-
class="chakra-heading css-113y03g"
102+
class="chakra-heading css-1s7duys"
103+
style="opacity: 0; transform: translateX(-50%) translateY(200px) translateZ(0);"
101104
>
102105
Explore the galaxy
103106
</h2>
@@ -106,6 +109,7 @@ exports[`<Hero/> > should render succesfully 1`] = `
106109
/>
107110
<p
108111
class="chakra-text css-1kyjpe6"
112+
style="transform: translateY(-10px) translateZ(0);"
109113
>
110114
Scroll
111115
<svg

‎src/views/Planet/PlanetDetails/PlanetDetails.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const PlanetDetails = () => {
9393
))}
9494
</UnorderedList>
9595
) : (
96-
<Text>There are no residents in this planet.</Text>
96+
<Text textTransform="initial">There are no residents in this planet.</Text>
9797
)}
9898
</Box>
9999

‎src/views/Planet/PlanetDetails/__snapshots__/PlanetDetails.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ exports[`<PlanetDetails /> > should render succesfully 1`] = `
7272
Residents
7373
</h3>
7474
<p
75-
class="chakra-text css-0"
75+
class="chakra-text css-5zyh61"
7676
>
7777
There are no residents in this planet.
7878
</p>
@@ -257,7 +257,7 @@ exports[`<PlanetDetails /> > should render succesfully 1`] = `
257257
Residents
258258
</h3>
259259
<p
260-
class="chakra-text css-0"
260+
class="chakra-text css-5zyh61"
261261
>
262262
There are no residents in this planet.
263263
</p>

0 commit comments

Comments
 (0)