Skip to content

Commit 88c9ac9

Browse files
pettinarippettinarip
authored
Merge pull request #13955 from ethereum/quiz-sim-color-patch
refactor: components using old theming
2 parents ccec23f + 7bd899e commit 88c9ac9

File tree

9 files changed

+122
-191
lines changed

9 files changed

+122
-191
lines changed

‎public/images/qr-code-ethereum-org-dark.png

-15 KB
Binary file not shown.

‎public/images/qr-code-ethereum-org-light.png

-17.9 KB
Binary file not shown.

‎public/images/qr-code-ethereum-org.png

9.09 KB
Loading

‎src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
Box,
55
chakra,
66
ChakraProps,
7-
Circle,
87
HStack,
98
Stack,
109
Text,
@@ -22,6 +21,8 @@ import type {
2221
TranslationKey,
2322
} from "@/lib/types"
2423

24+
import { cn } from "@/lib/utils/cn"
25+
2526
import type { AnswerStatus } from "./useQuizWidget"
2627

2728
type QuizRadioGroupProps = {
@@ -157,11 +158,6 @@ const CustomRadio = ({
157158
const getAnswerColor = (): ChakraProps["bg"] =>
158159
isSelectedCorrect ? "success.base" : "error.base"
159160

160-
const controlFocusProps: ChakraProps = {
161-
bg: isAnswerVisible ? "white" : "primary.pressed",
162-
color: isAnswerVisible ? getAnswerColor() : undefined,
163-
}
164-
165161
const radioInputProps = getInputProps({ id: INPUT_ID })
166162

167163
return (
@@ -188,22 +184,24 @@ const CustomRadio = ({
188184
outline: isAnswerVisible ? "none" : `1px solid ${primaryBaseColor}`,
189185
}}
190186
_checked={{
191-
bg: !isAnswerVisible ? "primary.base" : getAnswerColor(),
187+
bg: !isAnswerVisible ? "primary.action" : getAnswerColor(),
192188
color: "white",
193189
}}
194190
data-group
191+
className="group"
195192
>
196-
<Circle
197-
size="6"
198-
bg="disabled"
199-
color="white"
200-
_groupHover={controlFocusProps}
201-
_groupChecked={controlFocusProps}
193+
<div
194+
className={cn(
195+
"grid aspect-square size-6 place-items-center rounded-full bg-disabled text-white group-hover:bg-primary-action",
196+
"group-data-[checked]:bg-white group-data-[checked]:text-primary-action",
197+
isAnswerVisible &&
198+
(isSelectedCorrect ? "!text-success" : "!text-error")
199+
)}
202200
>
203-
<Text fontWeight="700" fontSize="lg" lineHeight="none">
201+
<p className="text-lg font-bold leading-none">
204202
{String.fromCharCode(97 + index).toUpperCase()}
205-
</Text>
206-
</Circle>
203+
</p>
204+
</div>
207205
<span>{label}</span>
208206
</HStack>
209207
</chakra.label>

‎src/components/Simulator/icons/eth-token-icon-grayscale.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/Simulator/icons/qr-code-icon.svg

Lines changed: 22 additions & 0 deletions
Loading

‎src/components/Simulator/screens/SendReceive/ReceiveEther.tsx

Lines changed: 48 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,60 @@
1-
import React from "react"
21
import { motion } from "framer-motion"
3-
import { Button } from "@chakra-ui/react"
4-
import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react"
52

6-
import { Image } from "@/components/Image"
3+
import EthGlyph from "@/components/icons/eth-glyph-solid.svg"
4+
import { TwImage } from "@/components/Image"
5+
import { Button } from "@/components/ui/buttons/Button"
6+
import { Flex } from "@/components/ui/flex"
77

88
import { FAKE_DEMO_ADDRESS } from "../../constants"
99
import { NotificationPopover } from "../../NotificationPopover"
1010

11-
import QRDark from "@/public/images/qr-code-ethereum-org-dark.png"
12-
import QRLight from "@/public/images/qr-code-ethereum-org-light.png"
11+
import QrImage from "@/public/images/qr-code-ethereum-org.png"
1312

14-
const MotionBox = motion(Box)
15-
16-
export const ReceiveEther = () => {
17-
const qrImage = useColorModeValue(QRLight, QRDark)
18-
19-
const SPACING = { base: 3, md: 5 }
20-
const QR_SIZE = { base: "80px", md: "120px" }
21-
return (
22-
<MotionBox
23-
initial={{ opacity: 0 }}
24-
animate={{ opacity: 1 }}
25-
exit={{ opacity: 0 }}
26-
transition={{ duration: 0.25 }}
27-
py={{ base: 6, md: 8 }}
28-
px={{ base: 4, md: 6 }}
29-
h="full"
30-
bg="background.highlight"
31-
fontSize={{ base: "sm", md: "md" }}
13+
export const ReceiveEther = () => (
14+
<motion.div
15+
initial={{ opacity: 0 }}
16+
animate={{ opacity: 1 }}
17+
exit={{ opacity: 0 }}
18+
transition={{ duration: 0.25 }}
19+
className="h-full bg-background-highlight px-4 py-6 text-sm md:px-6 md:py-8 md:text-md"
20+
>
21+
<p className="mb-3 text-xl font-bold md:mb-6 md:text-2xl">Receive assets</p>
22+
<p className="mb-3 md:mb-5">
23+
Show this QR code containing your account address to the sender
24+
</p>
25+
{/* QR Code */}
26+
<NotificationPopover
27+
title="Example walkthrough"
28+
content="Share QR containing your address (public identifier) from your own wallet when finished here"
29+
placement="top"
3230
>
33-
<Text
34-
fontSize={{ base: "xl", md: "2xl" }}
35-
fontWeight="bold"
36-
mb={{ base: 3, md: 6 }}
37-
>
38-
Receive assets
39-
</Text>
40-
<Text mb={SPACING}>
41-
Show this QR code containing your account address to the sender
42-
</Text>
43-
{/* QR Code */}
31+
<div className="relative mx-auto mb-3 w-fit bg-background p-3 md:mb-5">
32+
<TwImage
33+
alt=""
34+
src={QrImage}
35+
className="size-[6rem] rounded p-1 md:size-[7.5rem] dark:invert"
36+
/>
37+
<div className="absolute left-1/2 top-1/2 size-10 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-primary-action" />
38+
<EthGlyph className="absolute left-1/2 top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 transform text-white" />
39+
</div>
40+
</NotificationPopover>
41+
<Flex className="relative mb-3 w-full items-center justify-between gap-2 rounded border px-3 py-2 md:mb-5">
42+
<div>
43+
<p className="m-0 text-xs text-body-medium">Your Ethereum address</p>
44+
<p className="m-0 text-sm">{FAKE_DEMO_ADDRESS}</p>
45+
</div>
4446
<NotificationPopover
4547
title="Example walkthrough"
46-
content="Share QR containing your address (public identifier) from your own wallet when finished here"
47-
placement="top"
48+
content="Share your address (public identifier) from your own wallet when finished here"
49+
placement="top-start"
4850
>
49-
<Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
50-
<Image
51-
alt=""
52-
src={qrImage}
53-
maxW={QR_SIZE}
54-
maxH={QR_SIZE}
55-
p={3}
56-
borderRadius="base"
57-
/>
58-
</Box>
51+
<Button className="h-fit rounded-lg bg-body-light px-2 py-1.5 text-xs font-bold text-body">
52+
Copy
53+
</Button>
5954
</NotificationPopover>
60-
<Flex
61-
borderRadius="base"
62-
border="1px"
63-
borderColor="body.light"
64-
px={3}
65-
py={2}
66-
gap={2}
67-
position="relative"
68-
w="100%"
69-
justify="space-between"
70-
alignItems="center"
71-
mb={SPACING}
72-
>
73-
<Box>
74-
<Text color="body.medium" m={0} fontSize="xs">
75-
Your Ethereum address
76-
</Text>
77-
<Text m={0} fontSize="sm">
78-
{FAKE_DEMO_ADDRESS}
79-
</Text>
80-
</Box>
81-
<NotificationPopover
82-
title="Example walkthrough"
83-
content="Share your address (public identifier) from your own wallet when finished here"
84-
placement="top-start"
85-
>
86-
<Button
87-
fontSize="xs"
88-
fontWeight="bold"
89-
color="body.base"
90-
bg="body.light"
91-
borderRadius="10px"
92-
h="fit-content"
93-
py={1.5}
94-
px={2}
95-
>
96-
Copy
97-
</Button>
98-
</NotificationPopover>
99-
</Flex>
100-
<Text m={0} fontSize="xs" lineHeight={1.7}>
101-
Use this address for receiving tokens and NFTs on the Ethereum network.
102-
</Text>
103-
</MotionBox>
104-
)
105-
}
55+
</Flex>
56+
<p className="m-0 text-xs">
57+
Use this address for receiving tokens and NFTs on the Ethereum network.
58+
</p>
59+
</motion.div>
60+
)

‎src/components/Simulator/screens/SendReceive/ReceivedEther.tsx

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { useEffect, useMemo, useState } from "react"
1+
import { useEffect, useMemo, useState } from "react"
22
import { AnimatePresence, motion } from "framer-motion"
33
import { MdClose, MdInfo } from "react-icons/md"
4-
import { Flex, Icon, Text } from "@chakra-ui/react"
54

65
import type { SimulatorNavProps } from "@/lib/types"
76

@@ -85,32 +84,20 @@ export const ReceivedEther = ({
8584
/>
8685
<AnimatePresence>
8786
{showToast && !hidden && (
88-
<Flex
87+
<motion.div
8988
key="toast"
90-
position="absolute"
91-
inset={4}
92-
top="auto"
93-
bottom={32}
94-
borderRadius="base"
95-
h="fit-content"
96-
bg="primary300"
97-
gap={3}
98-
fontSize="md"
99-
align="center"
100-
p={4}
101-
color="background.base"
102-
as={motion.div}
89+
className="absolute inset-4 bottom-32 top-auto flex h-fit items-center gap-3 rounded bg-primary-high-contrast p-4 text-md text-background"
10390
initial={{ opacity: 0 }}
10491
animate={{ opacity: 1 }}
10592
exit={{ opacity: 0 }}
10693
>
107-
<Icon as={MdInfo} fontSize="xl" />
108-
<Text m={0} fontWeight="bold" fontSize="xs">
94+
<MdInfo className="text-xl" />
95+
<p className="m-0 text-xs font-bold">
10996
You received {displayEth} ETH ({displayUsd})
11097
{sender ? ` from ${sender}` : ""}!
111-
</Text>
112-
<Icon as={MdClose} fontSize="xl" onClick={() => setHidden(true)} />
113-
</Flex>
98+
</p>
99+
<MdClose className="text-xl" onClick={() => setHidden(true)} />
100+
</motion.div>
114101
)}
115102
</AnimatePresence>
116103
</motion.div>

0 commit comments

Comments
 (0)