Skip to content

Commit 9d22b0b

Browse files
committed
refactor: rm upgradesGradient, add tw replacement
1 parent 065a055 commit 9d22b0b

File tree

4 files changed

+28
-24
lines changed

4 files changed

+28
-24
lines changed

src/pages/bug-bounty.tsx

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"
55
import {
66
Box,
77
Center,
8-
Heading,
98
ListItem,
109
UnorderedList,
1110
useColorModeValue,
@@ -105,24 +104,13 @@ const Subtitle = (props: ChildOnlyProp) => (
105104
/>
106105
)
107106

108-
const SloganGradient = (props: ChildOnlyProp) => (
109-
<Box
110-
maxW="720px"
111-
mt="4"
112-
bgClip="text"
113-
overflow="auto"
114-
sx={{ WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}
115-
bg="upgradesGradient"
107+
const SloganGradient = ({ children }: ChildOnlyProp) => (
108+
<div
109+
className="mt-4 max-w-[720px] overflow-auto bg-linear-bug-bounty-title bg-clip-text"
110+
style={{ WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}
116111
>
117-
<Heading
118-
as="h1"
119-
fontSize={{ base: "2.5rem", lg: "5xl" }}
120-
fontWeight="800"
121-
mb="1.45rem"
122-
>
123-
{props.children}
124-
</Heading>
125-
</Box>
112+
<h1 className="mb-6 text-4xl font-bold lg:text-5xl">{children}</h1>
113+
</div>
126114
)
127115

128116
const Rules = (props: ChildOnlyProp) => (

src/styles/semantic-tokens.css

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
--accent-c-hover: var(--teal-600);
3232

3333
/**
34-
/* Gradients (radial, conic)
35-
/* For linear-gradient, Tailwind classes preferred
34+
/* Gradients (radial, conic, or linear over 3 stops)
35+
/* For linear-gradient up to 3 stops, use Tailwind classes
3636
/* https://tailwindcss.com/docs/background-image#linear-gradients
3737
*/
3838
--radial-a-opacity-1: 0.08;
@@ -45,6 +45,16 @@
4545
transparent 100%
4646
);
4747

48+
--linear-bug-bounty-title: linear-gradient(
49+
to left,
50+
#f7cbc0 0%,
51+
#f4b1ab 29.8%,
52+
#8476d9 49.78%,
53+
#85acf9 54.14%,
54+
#1c1ce1 61.77%,
55+
#000000 69.77%
56+
);
57+
4858
/* Shadows */
4959
--shadow-color-a: hsla(var(--purple-800), 0.02);
5060
--shadow-color-b: hsla(var(--red-800), 0.04);
@@ -109,6 +119,15 @@
109119
--radial-a-opacity-1: 0.16;
110120
--radial-a-opacity-2: 0.48;
111121

122+
--linear-bug-bounty-title: linear-gradient(
123+
to left,
124+
hsl(12, 77%, 86%) 0%,
125+
#fbeae3 17.81%,
126+
#f4b1ab 29.8%,
127+
#8476d9 49.78%,
128+
#8db4ff 69.77%
129+
);
130+
112131
/* Shadows (dark mode adjustments) */
113132
--shadow-color: hsla(var(--white), 0.04);
114133
--shadow-svg-button-link-1: -2px 2px 12px 1px var(--shadow-color);

src/theme.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,6 @@ const baseColors = {
147147
// TODO replace random variables w/ baseColor variables
148148
const lightColors = {
149149
buttonColor: white,
150-
upgradesGradient:
151-
"linear-gradient(285.24deg, #F7CBC0 0%, #F4B1AB 29.8%, #8476D9 49.78%, #85ACF9 54.14%, #1C1CE1 61.77%, #000000 69.77%)",
152150
runNodeGradient:
153151
"linear-gradient(0deg, rgba(153, 157, 244, 0.1) 0%, rgba(153, 157, 244, 0) 100%), linear-gradient(270.72deg, #FDF0FF 0.62%, rgba(236, 195, 195, 0.557292) 32.61%, rgba(207, 189, 230, 0.296875) 49.67%, rgba(196, 196, 196, 0) 72.88%);",
154152
runNodeGradient2:
@@ -266,8 +264,6 @@ const lightColors = {
266264
// TODO replace random variables w/ baseColor variables
267265
const darkColors = {
268266
buttonColor: black300,
269-
upgradesGradient:
270-
"linear-gradient(285.24deg, #f7cbc0 0%, #fbeae3 17.81%, #f4b1ab 29.8%, #8476d9 49.78%, #8db4ff 69.77%);",
271267
runNodeGradient:
272268
"linear-gradient(0deg, rgba(153, 157, 244, 0.35) 0%, rgba(153, 157, 244, 0) 100%), linear-gradient(89.24deg, rgba(253, 240, 255, 0.7) -64.3%, rgba(212, 119, 119, 0.390104) -7.43%, rgba(188, 163, 220, 0.207813) 46.66%, rgba(196, 196, 196, 0) 99.16%);",
273269
runNodeGradient2:

tailwind.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ const config = {
183183
"feedback-gradient": "var(--feedback-gradient)",
184184
"banner-grid-gradient": "var(--banner-grid-gradient)",
185185
"radial-a": "var(--radial-a)",
186+
"linear-bug-bounty-title": "var(--linear-bug-bounty-title)",
186187
},
187188
boxShadow: {
188189
"table-box": "var(--table-box-shadow)",

0 commit comments

Comments
 (0)