Skip to content

Commit 2075a76

Browse files
adamgothadamgoth
authored
Merge pull request #922 from makerdao/app-rebrand
App rebrand
2 parents d70b7fd + 20f0f59 commit 2075a76

File tree

6 files changed

+322
-89
lines changed

6 files changed

+322
-89
lines changed

‎lib/theme/icons.js

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,241 @@ SPDX-License-Identifier: AGPL-3.0-or-later
99
import { icons as daiUiIcons } from '@makerdao/dai-ui-icons';
1010
import { icons as brandIcons } from '@makerdao/dai-ui-icons-branding';
1111

12+
const skyIcon = ({ darkMode = false } = {}) => (
13+
<g>
14+
<path
15+
d="M141.954 55.9997H134.736L141.547 41.1316L129.439 16.1183H137.065L145.214 34.0766L152.84 16.1183H160L141.954 55.9997Z"
16+
fill={darkMode ? 'white' : 'black'}
17+
/>
18+
<path
19+
d="M126.986 16.1183L115.344 28.1294L127.219 44.5134H118.953L110.629 32.9105L107.136 36.5838V44.5134H100.442V2.29981H107.136V27.6046L118.022 16.1183H126.986Z"
20+
fill={darkMode ? 'white' : 'black'}
21+
/>
22+
<path
23+
d="M93.3076 12.8532L87.0209 14.8356C86.6134 12.2701 84.4597 8.48025 78.9297 8.48025C74.7385 8.48025 71.828 11.2789 71.828 14.4275C71.828 17.0512 73.4579 19.0336 76.6595 19.7333L82.5969 20.9577C89.8732 22.4154 93.7733 27.0216 93.7733 32.8522C93.7733 39.2658 88.5926 45.388 79.1625 45.388C68.6847 45.388 63.8532 38.6245 63.2129 32.6772L69.7324 30.8115C70.1399 35.1261 73.2251 39.0909 79.1625 39.0909C84.1104 39.0909 86.6716 36.5838 86.6716 33.3769C86.6716 30.6948 84.6925 28.5375 81.1417 27.7795L75.3206 26.5551C69.0339 25.2724 64.8428 21.1327 64.8428 14.9522C64.8428 8.01379 71.1877 2.2998 78.8715 2.2998C88.5926 2.2998 92.3763 8.24702 93.3076 12.8532Z"
24+
fill={darkMode ? 'white' : 'black'}
25+
/>
26+
<path
27+
d="M4.57617 9.88992C5.31386 8.87308 6.13018 7.91586 7.01762 7.0271L7.31536 7.19146L23.8012 23.7905L23.9576 23.9924L4.57617 9.88992Z"
28+
fill="url(#paint0_radial_2498_3824)"
29+
/>
30+
<path
31+
d="M7.01562 7.02677C10.593 3.44406 15.2111 1.08753 20.208 0.294922L20.3737 0.751146L23.9557 23.674V23.992L7.01562 7.02677Z"
32+
fill="url(#paint1_radial_2498_3824)"
33+
/>
34+
<path
35+
d="M34.8358 2.61646C35.9533 3.18686 37.0243 3.84426 38.039 4.58261L37.9961 4.9563L24.0438 23.9231L23.957 23.9926L34.8358 2.61646Z"
36+
fill="url(#paint2_radial_2498_3824)"
37+
/>
38+
<path
39+
d="M47.9138 23.9924C47.9138 26.5101 47.5182 29.012 46.7413 31.4064L46.1747 31.4978L24.1332 24.0823L23.957 23.9924H47.9138Z"
40+
fill="url(#paint3_radial_2498_3824)"
41+
/>
42+
<path
43+
d="M46.7415 31.406C45.9647 33.8005 44.8164 36.0575 43.3388 38.0944L42.7928 38.0017L24.0703 24.1102L23.957 23.9924L46.7415 31.406Z"
44+
fill="url(#paint4_radial_2498_3824)"
45+
/>
46+
<path
47+
d="M31.3589 46.8104C27.7633 47.9804 23.9422 48.2816 20.2081 47.6893L20.0586 47.2294L23.8477 24.4004L23.9558 23.9922L31.3589 46.8104Z"
48+
fill="url(#paint5_radial_2498_3824)"
49+
/>
50+
<path
51+
d="M20.2098 47.6893C18.9702 47.4927 17.748 47.1988 16.5544 46.8104L16.4883 46.2555L23.8209 24.2425L23.9574 23.9922L20.2098 47.6893Z"
52+
fill="url(#paint6_radial_2498_3824)"
53+
/>
54+
<path
55+
d="M16.5534 46.8107C14.1625 46.0326 11.9088 44.8826 9.875 43.4028L9.875 42.9685L23.7118 24.237L23.9565 23.9924L16.5534 46.8107Z"
56+
fill="url(#paint7_radial_2498_3824)"
57+
/>
58+
<path
59+
d="M2.61114 34.885C0.894765 31.5114 5.7086e-07 27.7789 0 23.9926L0.306449 23.8794H23.1818L23.9568 23.9926L2.61114 34.885Z"
60+
fill="url(#paint8_radial_2498_3824)"
61+
/>
62+
<path
63+
d="M20.2077 0.295371C23.9424 -0.297255 27.7641 0.0038807 31.3602 1.17415L23.9568 23.9922L20.2077 0.295371Z"
64+
fill="url(#paint9_radial_2498_3824)"
65+
/>
66+
<path
67+
d="M38.0384 4.582C42.1311 7.55998 45.1774 11.759 46.7409 16.5774L23.9568 23.9922L38.0384 4.582Z"
68+
fill="url(#paint10_radial_2498_3824)"
69+
/>
70+
<path
71+
d="M9.87535 43.4026C7.84155 41.9227 6.05299 40.1315 4.57534 38.0947L23.9568 23.9922L9.87535 43.4026Z"
72+
fill="url(#paint11_radial_2498_3824)"
73+
/>
74+
<path
75+
d="M0 23.9922C2.19774e-07 21.4746 0.395686 18.9726 1.17253 16.5782L23.9568 23.9922L0 23.9922Z"
76+
fill="url(#paint12_radial_2498_3824)"
77+
/>
78+
<path
79+
d="M43.339 38.0937C41.8615 40.1306 40.073 41.9219 38.0393 43.4019L23.9568 23.9922L43.339 38.0937Z"
80+
fill="url(#paint13_radial_2498_3824)"
81+
/>
82+
<defs>
83+
<radialGradient
84+
id="paint0_radial_2498_3824"
85+
cx="0"
86+
cy="0"
87+
r="1"
88+
gradientUnits="userSpaceOnUse"
89+
gradientTransform="translate(23.9576 23.9924) rotate(-139.149) scale(24.1173 24.1225)"
90+
>
91+
<stop stopColor="#A273FF" />
92+
<stop offset="1" stopColor="#4331E9" />
93+
<stop offset="1" stopColor="#4331E9" />
94+
</radialGradient>
95+
<radialGradient
96+
id="paint1_radial_2498_3824"
97+
cx="0"
98+
cy="0"
99+
r="1"
100+
gradientUnits="userSpaceOnUse"
101+
gradientTransform="translate(23.9557 23.992) rotate(-98.9814) scale(24.5675 24.5328)"
102+
>
103+
<stop stopColor="#F7A7F9" />
104+
<stop offset="1" stopColor="#00DDFB" />
105+
</radialGradient>
106+
<radialGradient
107+
id="paint2_radial_2498_3824"
108+
cx="0"
109+
cy="0"
110+
r="1"
111+
gradientUnits="userSpaceOnUse"
112+
gradientTransform="translate(23.957 23.9926) rotate(-180) scale(24.5487 24.5852)"
113+
>
114+
<stop stopColor="#FFF3D0" />
115+
<stop offset="1" stopColor="#FFC044" />
116+
</radialGradient>
117+
<radialGradient
118+
id="paint3_radial_2498_3824"
119+
cx="0"
120+
cy="0"
121+
r="1"
122+
gradientUnits="userSpaceOnUse"
123+
gradientTransform="translate(23.957 23.9924) rotate(-90) scale(24.5434 24.5072)"
124+
>
125+
<stop stopColor="#A273FF" />
126+
<stop offset="0.5" stopColor="#9FAEFF" />
127+
<stop offset="1" stopColor="#AAF2E1" />
128+
</radialGradient>
129+
<radialGradient
130+
id="paint4_radial_2498_3824"
131+
cx="0"
132+
cy="0"
133+
r="1"
134+
gradientUnits="userSpaceOnUse"
135+
gradientTransform="translate(23.957 23.9924) rotate(36.0309) scale(24.4496 24.4609)"
136+
>
137+
<stop stopColor="#0075FF" />
138+
<stop offset="1" stopColor="#00DDFB" />
139+
</radialGradient>
140+
<radialGradient
141+
id="paint5_radial_2498_3824"
142+
cx="0"
143+
cy="0"
144+
r="1"
145+
gradientUnits="userSpaceOnUse"
146+
gradientTransform="translate(23.9558 23.9922) rotate(90) scale(24.5636 24.527)"
147+
>
148+
<stop stopColor="#FFCD6B" />
149+
<stop offset="1" stopColor="#EB5EDF" />
150+
</radialGradient>
151+
<radialGradient
152+
id="paint6_radial_2498_3824"
153+
cx="0"
154+
cy="0"
155+
r="1"
156+
gradientUnits="userSpaceOnUse"
157+
gradientTransform="translate(23.9574 23.9922) rotate(90) scale(24.6144 24.5778)"
158+
>
159+
<stop stopColor="#D5FAFF" />
160+
<stop offset="1" stopColor="#00DDFB" />
161+
</radialGradient>
162+
<radialGradient
163+
id="paint7_radial_2498_3824"
164+
cx="0"
165+
cy="0"
166+
r="1"
167+
gradientUnits="userSpaceOnUse"
168+
gradientTransform="translate(23.9565 23.9924) rotate(114.14) scale(26.2917 26.2657)"
169+
>
170+
<stop stopColor="#FFD2B9" />
171+
<stop offset="0.289583" stopColor="#C99BED" />
172+
<stop offset="1" stopColor="#0075FF" />
173+
</radialGradient>
174+
<radialGradient
175+
id="paint8_radial_2498_3824"
176+
cx="0"
177+
cy="0"
178+
r="1"
179+
gradientUnits="userSpaceOnUse"
180+
gradientTransform="translate(23.9568 23.9926) rotate(-180) scale(31.9108 31.9583)"
181+
>
182+
<stop stopColor="#6D28FF" />
183+
<stop offset="1" stopColor="#F7A7F9" />
184+
</radialGradient>
185+
<radialGradient
186+
id="paint9_radial_2498_3824"
187+
cx="0"
188+
cy="0"
189+
r="1"
190+
gradientUnits="userSpaceOnUse"
191+
gradientTransform="translate(23.9568 23.9922) rotate(-90) scale(24.5437 24.5072)"
192+
>
193+
<stop stopColor="#A273FF" />
194+
<stop offset="0.5" stopColor="#9FAEFF" />
195+
<stop offset="1" stopColor="#AAF2E1" />
196+
</radialGradient>
197+
<radialGradient
198+
id="paint10_radial_2498_3824"
199+
cx="0"
200+
cy="0"
201+
r="1"
202+
gradientUnits="userSpaceOnUse"
203+
gradientTransform="translate(23.9568 23.9922) rotate(90) scale(24.5636 24.527)"
204+
>
205+
<stop stopColor="#FFCD6B" />
206+
<stop offset="1" stopColor="#EB5EDF" />
207+
</radialGradient>
208+
<radialGradient
209+
id="paint11_radial_2498_3824"
210+
cx="0"
211+
cy="0"
212+
r="1"
213+
gradientUnits="userSpaceOnUse"
214+
gradientTransform="translate(23.9568 23.9923) rotate(-139.149) scale(24.1173 24.1225)"
215+
>
216+
<stop stopColor="#A273FF" />
217+
<stop offset="1" stopColor="#4331E9" />
218+
<stop offset="1" stopColor="#4331E9" />
219+
</radialGradient>
220+
<radialGradient
221+
id="paint12_radial_2498_3824"
222+
cx="0"
223+
cy="0"
224+
r="1"
225+
gradientUnits="userSpaceOnUse"
226+
gradientTransform="translate(23.9568 23.9923) rotate(-180) scale(24.5487 24.5852)"
227+
>
228+
<stop stopColor="#FFF3D0" />
229+
<stop offset="1" stopColor="#FFC044" />
230+
</radialGradient>
231+
<radialGradient
232+
id="paint13_radial_2498_3824"
233+
cx="0"
234+
cy="0"
235+
r="1"
236+
gradientUnits="userSpaceOnUse"
237+
gradientTransform="translate(23.9568 23.9923) rotate(-139.149) scale(24.1173 24.1225)"
238+
>
239+
<stop stopColor="#A273FF" />
240+
<stop offset="1" stopColor="#4331E9" />
241+
<stop offset="1" stopColor="#4331E9" />
242+
</radialGradient>
243+
</defs>
244+
</g>
245+
);
246+
12247
export const icons = {
13248
chevron_right: daiUiIcons.chevron_right,
14249
chevron_left: daiUiIcons.chevron_left,
@@ -36,6 +271,14 @@ export const icons = {
36271
),
37272
viewBox: '0 0 20 20'
38273
},
274+
sky: {
275+
path: skyIcon(),
276+
viewBox: '0 0 160 56'
277+
},
278+
sky_white: {
279+
path: skyIcon({ darkMode: true }),
280+
viewBox: '0 0 160 56'
281+
},
39282
maker: {
40283
path: (
41284
<g>

‎modules/app/components/layout/Header.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ const Header = (): JSX.Element => {
134134
const { network } = useWeb3();
135135
const { data: gas } = useGasPrice({ network });
136136
const [mode, setMode] = useColorMode();
137+
const [renderedMode, setRenderedMode] = useState('light');
137138

138139
const onToggleTheme = () => {
139140
const next = mode === 'dark' ? 'light' : 'dark';
@@ -142,6 +143,10 @@ const Header = (): JSX.Element => {
142143
setMode(next);
143144
};
144145

146+
useEffect(() => {
147+
setRenderedMode(mode);
148+
}, [mode]);
149+
145150
return (
146151
<Box
147152
as="header"
@@ -162,8 +167,12 @@ const Header = (): JSX.Element => {
162167
>
163168
<Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
164169
<InternalLink href={'/'} title="View homepage">
165-
<IconButton aria-label="Maker home" sx={{ width: '40px', height: 4, p: 0 }}>
166-
<Icon name="maker" size="40px" color="text" sx={{ cursor: 'pointer' }} />
170+
<IconButton aria-label="Sky home" sx={{ width: '70px', height: 4, p: 0 }}>
171+
<Icon
172+
name={renderedMode === 'dark' ? 'sky_white' : 'sky'}
173+
size="auto"
174+
sx={{ width: '70px', cursor: 'pointer' }}
175+
/>
167176
</IconButton>
168177
</InternalLink>
169178
<Flex sx={{ ml: [0, 4, 4, 5] }}>
@@ -309,8 +318,12 @@ const MobileMenu = ({ hide, router, gas, onToggleTheme, mode, network }) => {
309318
}}
310319
>
311320
<InternalLink href={'/'} title="View homepage">
312-
<IconButton aria-label="Maker home" sx={{ width: '40px', height: 4, p: 0 }}>
313-
<Icon name="maker" size="40px" color="text" sx={{ cursor: 'pointer' }} />
321+
<IconButton aria-label="Sky home" sx={{ width: '70px', height: 4, p: 0 }}>
322+
<Icon
323+
name={mode === 'dark' ? 'sky_white' : 'sky'}
324+
size="auto"
325+
sx={{ width: '70px', cursor: 'pointer' }}
326+
/>
314327
</IconButton>
315328
</InternalLink>
316329
<Flex sx={{ alignItems: 'center', gap: 2 }}>

‎modules/app/components/layout/header/Banner.tsx

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
88

99
import { Text, Alert } from 'theme-ui';
1010
import { keyframes } from '@emotion/react';
11+
import { ExternalLink } from '../../ExternalLink';
12+
import React from 'react';
13+
import { Icon } from '@makerdao/dai-ui-icons';
1114

1215
const scroll = keyframes({
1316
from: { transform: 'translate(60vw, 0)' },
@@ -16,11 +19,26 @@ const scroll = keyframes({
1619

1720
const Banner = ({
1821
content,
19-
variant = 'banner'
22+
variant = 'banner',
23+
href
2024
}: {
2125
content: string | React.ReactElement;
2226
variant?: string;
27+
href?: string;
2328
}): React.ReactElement => {
29+
const arrow = href ? <Icon name="chevron_right" size={2} ml={2} /> : null;
30+
const textComponent = (
31+
<Text
32+
as="p"
33+
sx={{
34+
animation: `${scroll} 30s linear infinite`,
35+
color: 'white'
36+
}}
37+
>
38+
{content} {arrow}
39+
</Text>
40+
);
41+
2442
return (
2543
<Alert
2644
variant={variant}
@@ -34,14 +52,13 @@ const Banner = ({
3452
}}
3553
>
3654
{typeof content === 'string' ? (
37-
<Text
38-
as="p"
39-
sx={{
40-
animation: `${scroll} 30s linear infinite`
41-
}}
42-
>
43-
{content}
44-
</Text>
55+
href ? (
56+
<ExternalLink href={href} title="" styles={{ color: 'white' }}>
57+
{textComponent}
58+
</ExternalLink>
59+
) : (
60+
<div>{textComponent}</div>
61+
)
4562
) : (
4663
content
4764
)}

0 commit comments

Comments
 (0)