Skip to content

Commit

Permalink
Wrapped Cleanup (#431)
Browse files Browse the repository at this point in the history
* Cleaning up font sizes

* More clean up

* Add error handling
  • Loading branch information
Teddarific authored Oct 4, 2022
1 parent 8b3a30e commit 238b565
Show file tree
Hide file tree
Showing 15 changed files with 488 additions and 233 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export function DayInParticular({
}}
>
<Text
fontSize="3.5vw"
fontSize="3xl"
fontWeight="bold"
style={{
textAlign: 'center',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,14 @@ export function EveryoneScrolling({
animate={controls}
style={{ lineHeight: 1.2, display: 'flex', justifyContent: 'center' }}
>
<Box style={{ display: 'flex', flexDirection: 'column' }}>
<Text
fontSize="3.5vw"
fontWeight={600}
bgGradient="linear(to-t, purple.800, purple.600, blue.400)"
bgClip="text"
>
<Box
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Text fontSize="3.3vh" fontWeight={600} textAlign="center">
{' '}
While everyone else was scrolling TikTok, you were busy{' '}
</Text>
Expand Down Expand Up @@ -126,7 +127,7 @@ export function EveryoneScrolling({
]}
wrapper="div"
cursor
style={{ fontSize: '3.5vw', color: 'black', fontWeight: '600' }}
style={{ fontSize: '3.3vh', color: 'black', fontWeight: '600' }}
/>
</Box>
</motion.div>
Expand Down
11 changes: 8 additions & 3 deletions app/src/components/Dashboard/Wrapped/Sections/FriendList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export function FriendList({
animate={controls}
style={{ lineHeight: 1.2, marginTop: '8vh' }}
>
<Text fontSize="2vw" fontWeight="bold" color="black">
<Text fontSize="2xl" fontWeight="bold" color="blue.600">
Your Top Friends
</Text>
</motion.div>
Expand All @@ -129,7 +129,12 @@ export function FriendList({
delay: 0.2 + 0.1 * index,
}}
>
<Text fontSize="2vw" fontWeight="bold" style={{ width: '9vh' }}>
<Text
fontSize="4xl"
fontWeight="bold"
style={{ width: '9vh' }}
color="blue.600"
>
#{index + 1}
</Text>
</motion.div>
Expand All @@ -142,7 +147,7 @@ export function FriendList({
delay: 0.8 + 0.2 * index,
}}
>
<Text fontSize="2vw" fontWeight="semibold">
<Text fontSize="2xl" fontWeight="semibold">
{friend}
</Text>
</motion.div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function MostMessages({
animate={controls}
style={{ lineHeight: 1.2, display: 'flex', justifyContent: 'center' }}
>
<Text fontSize="2vw" fontWeight="bold" style={{ textAlign: 'center' }}>
<Text fontSize="3xl" fontWeight="bold" style={{ textAlign: 'center' }}>
These messages seem to be going to a select few friends...
</Text>
</motion.div>
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/Dashboard/Wrapped/Sections/Overview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -294,8 +294,8 @@ export function Overview() {
style={{ display: 'flex', justifyContent: 'center', margin: '24px 0' }}
>
<Text
fontWeight="bold"
fontSize="2.5vw"
fontWeight="extrabold"
fontSize="3xl"
bgGradient="linear(to-r, green.600, purple.600)"
bgClip="text"
mt="2"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export function SentEmojiList({
animate={controls}
style={{ lineHeight: 1.2, marginTop: '8vh' }}
>
<Text fontSize="2xl" fontWeight="bold" color="blue.500">
<Text fontSize="2xl" fontWeight="bold" color="blue.600">
Your Top Sent Emojis
</Text>
</motion.div>
Expand All @@ -133,6 +133,7 @@ export function SentEmojiList({
fontSize="4xl"
fontWeight="bold"
style={{ width: '12vh' }}
color="blue.600"
>
#{index + 1}
</Text>
Expand All @@ -146,7 +147,7 @@ export function SentEmojiList({
delay: 0.8 + 0.2 * index,
}}
>
<Text fontSize="3xl" fontWeight="semibold">
<Text fontSize="4xl" fontWeight="semibold">
{emoji.word}
</Text>
</motion.div>
Expand Down
11 changes: 8 additions & 3 deletions app/src/components/Dashboard/Wrapped/Sections/SentWordList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export function SentWordList({
animate={controls}
style={{ lineHeight: 1.2, marginTop: '8vh' }}
>
<Text fontSize="2xl" fontWeight="bold" color="blue.500">
<Text fontSize="2xl" fontWeight="bold" color="blue.600">
Your Top Sent Words
</Text>
</motion.div>
Expand All @@ -130,7 +130,12 @@ export function SentWordList({
delay: 0.2 + 0.1 * index,
}}
>
<Text fontSize="4xl" fontWeight="bold" style={{ width: '9vh' }}>
<Text
fontSize="4xl"
fontWeight="bold"
style={{ width: '9vh' }}
color="blue.600"
>
#{index + 1}
</Text>
</motion.div>
Expand All @@ -143,7 +148,7 @@ export function SentWordList({
delay: 0.8 + 0.2 * index,
}}
>
<Text fontSize="4xl" fontWeight="semibold">
<Text fontSize="2xl" fontWeight="semibold">
{word.word}
</Text>
</motion.div>
Expand Down
14 changes: 7 additions & 7 deletions app/src/components/Dashboard/Wrapped/Sections/TopFriend.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,11 @@ export function TopFriend({
delay: 4.4,
}}
>
<Text mb={10} fontSize="5vw">
<Text mb={10} fontSize="4xl">
🎉
</Text>
<Text
fontSize="2vw"
fontSize="2xl"
fontWeight="medium"
style={{ textAlign: 'center' }}
>
Expand All @@ -178,7 +178,7 @@ export function TopFriend({
}}
>
<Text
fontSize="2.5vw"
fontSize="3xl"
fontWeight="bold"
style={{ textAlign: 'center', marginTop: '1vh' }}
color="purple.600"
Expand All @@ -201,7 +201,7 @@ export function TopFriend({
delay: 0.3,
}}
>
<Text fontSize="2.0vw">
<Text fontSize="2xl">
<span style={{ fontWeight: 600, marginRight: '1vh' }}>
Total Messages:
</span>{' '}
Expand All @@ -219,7 +219,7 @@ export function TopFriend({
delay: 1.3,
}}
>
<Text fontSize="2.0vw">
<Text fontSize="2xl">
<span style={{ fontWeight: 600, marginRight: '1vh' }}>Sent:</span>{' '}
{sentTotal.toLocaleString()}
</Text>
Expand All @@ -235,7 +235,7 @@ export function TopFriend({
delay: 2.3,
}}
>
<Text fontSize="2.0vw">
<Text fontSize="2xl">
<span style={{ fontWeight: 600, marginRight: '1vh' }}>
Received:
</span>{' '}
Expand All @@ -253,7 +253,7 @@ export function TopFriend({
delay: 3.3,
}}
>
<Text fontSize="2.0vw">
<Text fontSize="2xl">
<span style={{ fontWeight: 600, marginRight: '1vh' }}>
Top Word:
</span>{' '}
Expand Down
12 changes: 6 additions & 6 deletions app/src/components/Dashboard/Wrapped/Sections/TopGroupChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export function TopGroupChat({
tweenDuration={1000}
recycle={false}
/>
<div style={{ height: '10vh' }} />
<div style={{ height: '5vh' }} />

<motion.div
initial={{
Expand All @@ -150,11 +150,11 @@ export function TopGroupChat({
delay: 3.4,
}}
>
<Text mb={10} fontSize="5vw">
<Text mb={10} fontSize="4xl">
🙌
</Text>
<Text
fontSize="2vw"
fontSize="2xl"
fontWeight="medium"
style={{ textAlign: 'center' }}
>
Expand All @@ -179,7 +179,7 @@ export function TopGroupChat({
}}
>
<Text
fontSize="2.5vw"
fontSize="3xl"
fontWeight="bold"
style={{ textAlign: 'center', marginTop: '1vh' }}
color="blue.500"
Expand Down Expand Up @@ -220,7 +220,7 @@ export function TopGroupChat({
delay: 2.3,
}}
>
<Text fontSize="1.8vw">
<Text fontSize="2xl">
<span style={{ fontWeight: 600, marginRight: '1vh' }}>
Most Active:
</span>{' '}
Expand All @@ -238,7 +238,7 @@ export function TopGroupChat({
delay: 1.3,
}}
>
<Text fontSize="1.8vw">
<Text fontSize="2xl">
<span style={{ fontWeight: 600, marginRight: '1vh' }}>
{mostActive.toLowerCase().trim() === 'you' ? 'You' : 'They'}{' '}
Sent:
Expand Down
82 changes: 82 additions & 0 deletions app/src/components/Dashboard/Wrapped/Sections/WrappedError.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { Box, Button, Spinner, Text } from '@chakra-ui/react';
import { AnimatePresence, motion, useAnimationControls } from 'framer-motion';
import { FiRefreshCcw } from 'react-icons/fi';

import LogoWithText from '../../../../../assets/LogoWithText.svg';

export function WrappedError({
error,
onRetry,
}: {
error: string;
onRetry: () => void;
}) {
const controls = useAnimationControls();

return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
style={{
height: '100%',
width: '100%',
}}
>
<Box
height="100%"
width="100%"
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
padding: '24px',
borderRadius: 16,
position: 'relative',
}}
shadow="dark-lg"
bgColor="purple.50"
>
<motion.div animate={controls} transition={{ duration: 1 }}>
<div style={{ padding: '36px', marginTop: '-1vh' }}>
<img
src={LogoWithText}
alt="Left on Read"
style={{ height: '100%' }}
/>
</div>
</motion.div>
<motion.div
animate={controls}
transition={{ duration: 1, delay: 0.2 }}
>
<Text fontSize="lg" fontWeight={600} color="red.400">
Oops! Something went wrong...
</Text>
</motion.div>
<div style={{ textAlign: 'center' }}>
If this issue persists, please contact support.
</div>
<motion.div
animate={controls}
transition={{ duration: 1, delay: 0.4 }}
style={{ marginTop: '3vh', fontSize: '14px' }}
>
Error Code: {error}
</motion.div>
<Box style={{ marginTop: '8vh' }}>
<Button
onClick={() => onRetry()}
colorScheme="purple"
leftIcon={<FiRefreshCcw />}
>
Retry
</Button>
</Box>
</Box>
</motion.div>
</AnimatePresence>
);
}
Loading

0 comments on commit 238b565

Please sign in to comment.