Skip to content

Commit 0a33865

Browse files
brionmariobrionmario
committed
Update Google button glyph to the new gradient mark
1 parent 80a8198 commit 0a33865

2 files changed

Lines changed: 475 additions & 44 deletions

File tree

‎packages/react/src/components/adapters/GoogleButton.tsx‎

Lines changed: 241 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,246 @@ export interface GoogleButtonProps extends WithPreferences {
1313
isLoading?: boolean;
1414
}
1515

16+
/** Google's gradient "G" mark, matching the icon shipped in `@thunderid/console`'s `GoogleIcon`. */
17+
const GoogleGlyph: FC = () => (
18+
<svg width="18" height="18" viewBox="0 0 268.1522 273.8827" xmlns="http://www.w3.org/2000/svg">
19+
<defs>
20+
<linearGradient id="google-btn-a">
21+
<stop offset="0" stopColor="#0fbc5c" />
22+
<stop offset="1" stopColor="#0cba65" />
23+
</linearGradient>
24+
<linearGradient id="google-btn-g">
25+
<stop offset=".2312727" stopColor="#0fbc5f" />
26+
<stop offset=".3115468" stopColor="#0fbc5f" />
27+
<stop offset=".3660131" stopColor="#0fbc5e" />
28+
<stop offset=".4575163" stopColor="#0fbc5d" />
29+
<stop offset=".540305" stopColor="#12bc58" />
30+
<stop offset=".6993464" stopColor="#28bf3c" />
31+
<stop offset=".7712418" stopColor="#38c02b" />
32+
<stop offset=".8605665" stopColor="#52c218" />
33+
<stop offset=".9150327" stopColor="#67c30f" />
34+
<stop offset="1" stopColor="#86c504" />
35+
</linearGradient>
36+
<linearGradient id="google-btn-h">
37+
<stop offset=".1416122" stopColor="#1abd4d" />
38+
<stop offset=".2475151" stopColor="#6ec30d" />
39+
<stop offset=".3115468" stopColor="#8ac502" />
40+
<stop offset=".3660131" stopColor="#a2c600" />
41+
<stop offset=".4456735" stopColor="#c8c903" />
42+
<stop offset=".540305" stopColor="#ebcb03" />
43+
<stop offset=".6156363" stopColor="#f7cd07" />
44+
<stop offset=".6993454" stopColor="#fdcd04" />
45+
<stop offset=".7712418" stopColor="#fdce05" />
46+
<stop offset=".8605661" stopColor="#ffce0a" />
47+
</linearGradient>
48+
<linearGradient id="google-btn-f">
49+
<stop offset=".3159041" stopColor="#ff4c3c" />
50+
<stop offset=".6038179" stopColor="#ff692c" />
51+
<stop offset=".7268366" stopColor="#ff7825" />
52+
<stop offset=".884534" stopColor="#ff8d1b" />
53+
<stop offset="1" stopColor="#ff9f13" />
54+
</linearGradient>
55+
<linearGradient id="google-btn-b">
56+
<stop offset=".2312727" stopColor="#ff4541" />
57+
<stop offset=".3115468" stopColor="#ff4540" />
58+
<stop offset=".4575163" stopColor="#ff4640" />
59+
<stop offset=".540305" stopColor="#ff473f" />
60+
<stop offset=".6993464" stopColor="#ff5138" />
61+
<stop offset=".7712418" stopColor="#ff5b33" />
62+
<stop offset=".8605665" stopColor="#ff6c29" />
63+
<stop offset="1" stopColor="#ff8c18" />
64+
</linearGradient>
65+
<linearGradient id="google-btn-d">
66+
<stop offset=".4084578" stopColor="#fb4e5a" />
67+
<stop offset="1" stopColor="#ff4540" />
68+
</linearGradient>
69+
<linearGradient id="google-btn-c">
70+
<stop offset=".1315461" stopColor="#0cba65" />
71+
<stop offset=".2097843" stopColor="#0bb86d" />
72+
<stop offset=".2972969" stopColor="#09b479" />
73+
<stop offset=".3962575" stopColor="#08ad93" />
74+
<stop offset=".4771242" stopColor="#0aa6a9" />
75+
<stop offset=".5684245" stopColor="#0d9cc6" />
76+
<stop offset=".667385" stopColor="#1893dd" />
77+
<stop offset=".7687273" stopColor="#258bf1" />
78+
<stop offset=".8585063" stopColor="#3086ff" />
79+
</linearGradient>
80+
<linearGradient id="google-btn-e">
81+
<stop offset=".3660131" stopColor="#ff4e3a" />
82+
<stop offset=".4575163" stopColor="#ff8a1b" />
83+
<stop offset=".540305" stopColor="#ffa312" />
84+
<stop offset=".6156363" stopColor="#ffb60c" />
85+
<stop offset=".7712418" stopColor="#ffcd0a" />
86+
<stop offset=".8605665" stopColor="#fecf0a" />
87+
<stop offset=".9150327" stopColor="#fecf08" />
88+
<stop offset="1" stopColor="#fdcd01" />
89+
</linearGradient>
90+
<linearGradient
91+
href="#google-btn-a"
92+
id="google-btn-s"
93+
x1="219.6997"
94+
y1="329.5351"
95+
x2="254.4673"
96+
y2="329.5351"
97+
gradientUnits="userSpaceOnUse"
98+
/>
99+
<radialGradient
100+
href="#google-btn-b"
101+
id="google-btn-m"
102+
gradientUnits="userSpaceOnUse"
103+
gradientTransform="matrix(-1.936885,1.043001,1.455731,2.555422,290.5254,-400.6338)"
104+
cx="109.6267"
105+
cy="135.8619"
106+
fx="109.6267"
107+
fy="135.8619"
108+
r="71.46001"
109+
/>
110+
<radialGradient
111+
href="#google-btn-c"
112+
id="google-btn-n"
113+
gradientUnits="userSpaceOnUse"
114+
gradientTransform="matrix(-3.512595,-4.45809,-1.692547,1.260616,870.8006,191.554)"
115+
cx="45.25866"
116+
cy="279.2738"
117+
fx="45.25866"
118+
fy="279.2738"
119+
r="71.46001"
120+
/>
121+
<radialGradient
122+
href="#google-btn-d"
123+
id="google-btn-l"
124+
cx="304.0166"
125+
cy="118.0089"
126+
fx="304.0166"
127+
fy="118.0089"
128+
r="47.85445"
129+
gradientTransform="matrix(2.064353,-4.926832e-6,-2.901531e-6,2.592041,-297.6788,-151.7469)"
130+
gradientUnits="userSpaceOnUse"
131+
/>
132+
<radialGradient
133+
href="#google-btn-e"
134+
id="google-btn-o"
135+
gradientUnits="userSpaceOnUse"
136+
gradientTransform="matrix(-0.2485783,2.083138,2.962486,0.3341668,-255.1463,-331.1636)"
137+
cx="181.001"
138+
cy="177.2013"
139+
fx="181.001"
140+
fy="177.2013"
141+
r="71.46001"
142+
/>
143+
<radialGradient
144+
href="#google-btn-f"
145+
id="google-btn-p"
146+
cx="207.6733"
147+
cy="108.0972"
148+
fx="207.6733"
149+
fy="108.0972"
150+
r="41.1025"
151+
gradientTransform="matrix(-1.249206,1.343263,-3.896837,-3.425693,880.5011,194.9051)"
152+
gradientUnits="userSpaceOnUse"
153+
/>
154+
<radialGradient
155+
href="#google-btn-g"
156+
id="google-btn-r"
157+
gradientUnits="userSpaceOnUse"
158+
gradientTransform="matrix(-1.936885,-1.043001,1.455731,-2.555422,290.5254,838.6834)"
159+
cx="109.6267"
160+
cy="135.8619"
161+
fx="109.6267"
162+
fy="135.8619"
163+
r="71.46001"
164+
/>
165+
<radialGradient
166+
href="#google-btn-h"
167+
id="google-btn-j"
168+
gradientUnits="userSpaceOnUse"
169+
gradientTransform="matrix(-0.081402,-1.93722,2.926737,-0.1162508,-215.1345,632.8606)"
170+
cx="154.8697"
171+
cy="145.9691"
172+
fx="154.8697"
173+
fy="145.9691"
174+
r="71.46001"
175+
/>
176+
<filter
177+
id="google-btn-q"
178+
x="-.04842873"
179+
y="-.0582241"
180+
width="1.096857"
181+
height="1.116448"
182+
colorInterpolationFilters="sRGB"
183+
>
184+
<feGaussianBlur stdDeviation="1.700914" />
185+
</filter>
186+
<filter
187+
id="google-btn-k"
188+
x="-.01670084"
189+
y="-.01009856"
190+
width="1.033402"
191+
height="1.020197"
192+
colorInterpolationFilters="sRGB"
193+
>
194+
<feGaussianBlur stdDeviation=".2419367" />
195+
</filter>
196+
<clipPath clipPathUnits="userSpaceOnUse" id="google-btn-i">
197+
<path
198+
d="M371.3784 193.2406H237.0825v53.4375h77.167c-1.2405 7.5627-4.0259 15.0024-8.1049 21.7862-4.6734 7.7723-10.4511 13.6895-16.373 18.1957-17.7389 13.4983-38.42 16.2584-52.7828 16.2584-36.2824 0-67.2833-23.2865-79.2844-54.9287-.4843-1.1482-.8059-2.3344-1.1975-3.5068-2.652-8.0533-4.101-16.5825-4.101-25.4474 0-9.226 1.5691-18.0575 4.4301-26.3985 11.2851-32.8967 42.9849-57.4674 80.1789-57.4674 7.4811 0 14.6854.8843 21.5173 2.6481 15.6135 4.0309 26.6578 11.9698 33.4252 18.2494l40.834-39.7111c-24.839-22.616-57.2194-36.3201-95.8444-36.3201-30.8782-.00066-59.3863 9.55308-82.7477 25.6992-18.9454 13.0941-34.4833 30.6254-44.9695 50.9861-9.75366 18.8785-15.09441 39.7994-15.09441 62.2934 0 22.495 5.34891 43.6334 15.10261 62.3374v.126c10.3023 19.8567 25.3678 36.9537 43.6783 49.9878 15.9962 11.3866 44.6789 26.5516 84.0307 26.5516 22.6301 0 42.6867-4.0517 60.3748-11.6447 12.76-5.4775 24.0655-12.6217 34.3012-21.8036 13.5247-12.1323 24.1168-27.1388 31.3465-44.4041 7.2297-17.2654 11.097-36.7895 11.097-57.957 0-9.858-.9971-19.8694-2.6881-28.9684Z"
199+
fill="#000"
200+
/>
201+
</clipPath>
202+
</defs>
203+
<g transform="matrix(0.957922,0,0,0.985255,-90.17436,-78.85577)">
204+
<g clipPath="url(#google-btn-i)">
205+
<path
206+
d="M92.07563 219.9585c.14844 22.14 6.5014 44.983 16.11767 63.4234v.1269c6.9482 13.3919 16.4444 23.9704 27.2604 34.4518l65.326-23.67c-12.3593-6.2344-14.2452-10.0546-23.1048-17.0253-9.0537-9.0658-15.8015-19.4735-20.0038-31.677h-.1693l.1693-.1269c-2.7646-8.0587-3.0373-16.6129-3.1393-25.5029Z"
207+
fill="url(#google-btn-j)"
208+
filter="url(#google-btn-k)"
209+
/>
210+
<path
211+
d="M237.0835 79.02491c-6.4568 22.52569-3.988 44.42139 0 57.16129 7.4561.0055 14.6388.8881 21.4494 2.6464 15.6135 4.0309 26.6566 11.97 33.424 18.2496l41.8794-40.7256c-24.8094-22.58904-54.6663-37.2961-96.7528-37.33169Z"
212+
fill="url(#google-btn-l)"
213+
filter="url(#google-btn-k)"
214+
/>
215+
<path
216+
d="M236.9434 78.84678c-31.6709-.00068-60.9107 9.79833-84.8718 26.35902-8.8968 6.149-17.0612 13.2521-24.3311 21.1509-1.9045 17.7429 14.2569 39.5507 46.2615 39.3702 15.5284-17.9373 38.4946-29.5427 64.0561-29.5427.0233 0 .046.0019.0693.002l-1.0439-57.33536c-.0472-.00003-.0929-.00406-.1401-.00406Z"
217+
fill="url(#google-btn-m)"
218+
filter="url(#google-btn-k)"
219+
/>
220+
<path
221+
d="m341.4751 226.3788-28.2685 19.2848c-1.2405 7.5627-4.0278 15.0023-8.1068 21.7861-4.6734 7.7723-10.4506 13.6898-16.3725 18.196-17.7022 13.4704-38.3286 16.2439-52.6877 16.2553-14.8415 25.1018-17.4435 37.6749 1.0439 57.9342 22.8762-.0167 43.157-4.1174 61.0458-11.7965 12.9312-5.551 24.3879-12.7913 34.7609-22.0964 13.7061-12.295 24.4421-27.5034 31.7688-45.0003 7.3267-17.497 11.2446-37.2822 11.2446-58.7336Z"
222+
fill="url(#google-btn-n)"
223+
filter="url(#google-btn-k)"
224+
/>
225+
<path
226+
d="M234.9956 191.2104v57.4981h136.0062c1.1962-7.8745 5.1523-18.0644 5.1523-26.5001 0-9.858-.9963-21.899-2.6873-30.998Z"
227+
fill="#3086ff"
228+
filter="url(#google-btn-k)"
229+
/>
230+
<path
231+
d="M128.3894 124.3268c-8.393 9.1191-15.5632 19.326-21.2483 30.3646-9.75351 18.8785-15.09402 41.8295-15.09402 64.3235 0 .317.02642.6271.02855.9436 4.31953 8.2244 59.66647 6.6495 62.45617 0-.0035-.3103-.0387-.6128-.0387-.9238 0-9.226 1.5696-16.0262 4.4306-24.3672 3.5294-10.2885 9.0557-19.7628 16.1223-27.9257 1.6019-2.0309 5.8748-6.3969 7.1214-9.0157.4749-.9975-.8621-1.5574-.9369-1.9085-.0836-.3927-1.8762-.0769-2.2778-.3694-1.2751-.9288-3.8001-1.4138-5.3334-1.8449-3.2772-.9215-8.7085-2.9536-11.7252-5.0601-9.5357-6.6586-24.417-14.6122-33.5047-24.2164Z"
232+
fill="url(#google-btn-o)"
233+
filter="url(#google-btn-k)"
234+
/>
235+
<path
236+
d="M162.0989 155.8569c22.1123 13.3013 28.4714-6.7139 43.173-12.9771L179.698 90.21568c-9.4075 3.92642-18.2957 8.80465-26.5426 14.50442-12.316 8.5122-23.192 18.8995-32.1763 30.7204Z"
237+
fill="url(#google-btn-p)"
238+
filter="url(#google-btn-q)"
239+
/>
240+
<path
241+
d="M171.0987 290.222c-29.6829 10.6413-34.3299 11.023-37.0622 29.2903 5.2213 5.0597 10.8312 9.74 16.7926 13.9835 15.9962 11.3867 46.766 26.5517 86.1178 26.5517.0462 0 .0904-.004.1366-.004v-59.1574c-.0298.0001-.064.002-.0938.002-14.7359 0-26.5113-3.8435-38.5848-10.5273-2.9768-1.6479-8.3775 2.7772-11.1229.799-3.7865-2.7284-12.8991 2.3508-16.1833-.9378Z"
242+
fill="url(#google-btn-r)"
243+
filter="url(#google-btn-k)"
244+
/>
245+
<path
246+
d="M219.6997 299.0227v59.9959c5.506.6402 11.2361 1.0289 17.2472 1.0289 6.0259 0 11.8556-.3073 17.5204-.8723v-59.7481c-6.3482 1.0777-12.3272 1.461-17.4776 1.461-5.9318 0-11.7005-.6858-17.29-1.8654Z"
247+
opacity=".5"
248+
fill="url(#google-btn-s)"
249+
filter="url(#google-btn-k)"
250+
/>
251+
</g>
252+
</g>
253+
</svg>
254+
);
255+
16256
/**
17257
* Google Sign-In Button Component.
18258
* Handles authentication with Google identity provider.
@@ -33,32 +273,7 @@ const GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>> =
33273
color="secondary"
34274
variant="solid"
35275
disabled={isLoading}
36-
startIcon={
37-
<svg width="18" height="18" viewBox="0 0 67.91 67.901" xmlns="http://www.w3.org/2000/svg">
38-
<g transform="translate(-0.001 -0.001)">
39-
<path
40-
d="M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z"
41-
transform="translate(0 -119.93)"
42-
fill="#fbbb00"
43-
/>
44-
<path
45-
d="M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z"
46-
transform="translate(-226.93 -180.567)"
47-
fill="#518ef8"
48-
/>
49-
<path
50-
d="M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z"
51-
transform="translate(-26.463 -268.374)"
52-
fill="#28b446"
53-
/>
54-
<path
55-
d="M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z"
56-
transform="translate(-24.828)"
57-
fill="#f14336"
58-
/>
59-
</g>
60-
</svg>
61-
}
276+
startIcon={<GoogleGlyph />}
62277
>
63278
{children ?? t('elements.buttons.google.text')}
64279
</Button>

0 commit comments

Comments
 (0)