Skip to content

Commit 2fe85d4

Browse files
Lab3ssalxbsn
Lab3ss
and
alxbsn
authored
feat: onboarding progress bar and svg follow theme (#518)
Co-authored-by: Alexis Besson <alexis@shareid.ai>
1 parent e138b6b commit 2fe85d4

3 files changed

Lines changed: 76 additions & 57 deletions

File tree

‎apps/easypid/src/features/onboarding/screens/assets/ProtectData.tsx‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { Defs, LinearGradient, Path, Stop, Svg } from 'react-native-svg'
2+
import { useTheme } from 'tamagui'
23

34
export function ProtectData() {
5+
const theme = useTheme()
6+
const p100 = theme['primary-100'].val as string
7+
const p200 = theme['primary-200'].val as string
8+
const p300 = theme['primary-300'].val as string
9+
const p400 = theme['primary-400'].val as string
10+
const p500 = theme['primary-500'].val as string
411
return (
512
<Svg width="100%" height="100%" style={{ aspectRatio: 1 }} viewBox="0 0 280 288" fill="none">
613
<Path
@@ -53,27 +60,27 @@ export function ProtectData() {
5360
/>
5461
<Path
5562
d="M71.1324 196.995C70.5571 192.312 66.312 188.987 61.6295 189.563C56.9586 190.138 53.6221 194.383 54.1973 199.066C54.6 202.322 56.7974 204.887 59.6621 205.98L60.8126 215.414C61.0772 217.577 63.0446 219.119 65.2075 218.854C67.3704 218.589 68.912 216.622 68.6474 214.459L67.4969 205.025C70.0165 203.276 71.535 200.262 71.1324 197.006V196.995Z"
56-
fill="#DADEFF"
63+
fill={p200}
5764
/>
5865
<Path
5966
d="M71.0173 197.006C70.281 190.736 62.5383 187.791 58.0285 192.117C54.0708 195.58 55.4743 202.436 60.3753 204.07C61.1116 204.335 61.5949 204.99 61.6754 205.727C62.1241 208.902 62.4462 212.146 62.7108 215.345C62.7339 215.69 62.8834 216.012 63.0789 216.311C64.379 218.267 67.5313 217.163 67.5774 214.816C67.6004 214.401 67.5199 213.412 67.5084 212.929C67.3703 210.294 67.3012 207.66 67.1056 205.036C67.1056 204.91 67.1632 204.783 67.2667 204.714C69.8668 203.161 71.3739 200.032 71.0058 197.018L71.0173 197.006ZM71.2475 196.983C71.7767 199.917 69.8554 203.909 67.6349 205.002L68.6128 212.791C68.7739 214.091 69.096 215.506 68.4402 216.737C67.2552 219.383 63.3551 219.866 61.5604 217.588C60.617 216.553 60.571 215.092 60.4099 213.792L59.4435 206.003L59.5816 206.187C56.6824 205.106 54.4504 202.413 54.0362 199.342C52.7591 187.756 69.3722 185.455 71.2359 196.983H71.2475Z"
6067
fill="#202EA7"
6168
/>
6269
<Path
6370
d="M119.782 107.318L110.261 106.597C109.443 106.536 108.731 107.145 108.669 107.96C108.608 108.774 109.22 109.484 110.037 109.546L119.559 110.267C120.376 110.329 121.089 109.719 121.151 108.905C121.212 108.09 120.6 107.38 119.782 107.318Z"
64-
fill="#DADEFF"
71+
fill={p200}
6572
/>
6673
<Path
6774
d="M136.254 108.582L126.732 107.861C125.915 107.799 125.202 108.409 125.14 109.223C125.079 110.037 125.691 110.747 126.509 110.809L136.03 111.53C136.848 111.592 137.56 110.982 137.622 110.168C137.684 109.354 137.071 108.644 136.254 108.582Z"
68-
fill="#DADEFF"
75+
fill={p200}
6976
/>
7077
<Path
7178
d="M152.897 109.834L143.375 109.113C142.558 109.051 141.845 109.661 141.784 110.475C141.722 111.29 142.335 112 143.152 112.062L152.674 112.783C153.491 112.844 154.204 112.235 154.265 111.42C154.327 110.606 153.714 109.896 152.897 109.834Z"
72-
fill="#DADEFF"
79+
fill={p200}
7380
/>
7481
<Path
7582
d="M168.923 111.052L159.402 110.331C158.584 110.269 157.872 110.879 157.81 111.693C157.749 112.508 158.361 113.218 159.179 113.28L168.7 114.001C169.518 114.062 170.23 113.453 170.292 112.638C170.353 111.824 169.741 111.114 168.923 111.052Z"
76-
fill="#DADEFF"
83+
fill={p200}
7784
/>
7885
<Path
7986
d="M270.729 135.203L168.647 127.471L163.401 121.282L157.131 126.597L149.388 126.01C144.004 125.608 139.298 129.634 138.896 135.03L136.054 172.57C135.651 177.954 139.678 182.66 145.074 183.063L266.415 192.255C271.799 192.658 276.505 188.631 276.907 183.235L279.749 145.695C280.152 140.311 276.125 135.605 270.729 135.203Z"
@@ -101,7 +108,7 @@ export function ProtectData() {
101108
/>
102109
<Path
103110
d="M240.621 79.4965C254.13 79.4965 265.08 68.5458 265.08 55.0373C265.08 41.5289 254.13 30.5781 240.621 30.5781C227.113 30.5781 216.162 41.5289 216.162 55.0373C216.162 68.5458 227.113 79.4965 240.621 79.4965Z"
104-
fill="#DADEFF"
111+
fill={p200}
105112
/>
106113
<Path
107114
d="M238.067 74.5377C251.576 74.5377 262.526 63.5869 262.526 50.0785C262.526 36.57 251.576 25.6192 238.067 25.6192C224.559 25.6192 213.608 36.57 213.608 50.0785C213.608 63.5869 224.559 74.5377 238.067 74.5377Z"
@@ -113,35 +120,35 @@ export function ProtectData() {
113120
/>
114121
<Path
115122
d="M226.39 44.004C226.39 44.004 226.309 44.004 226.275 44.004C225.711 43.935 225.297 43.4288 225.366 42.8535L225.826 38.9074C226.056 36.917 227.862 35.4905 229.841 35.7205L233.787 36.1807C234.351 36.2498 234.765 36.756 234.696 37.3312C234.627 37.895 234.109 38.3091 233.546 38.2401L229.6 37.7799C228.748 37.6764 227.977 38.2976 227.874 39.149L227.414 43.0951C227.356 43.6243 226.907 44.0155 226.39 44.0155V44.004Z"
116-
fill="#ACB4FB"
123+
fill={p300}
117124
/>
118125
<Path
119126
d="M250.573 46.8112C250.573 46.8112 250.492 46.8112 250.458 46.8112C249.894 46.7422 249.48 46.236 249.549 45.6608L250.009 41.7146C250.055 41.3004 249.94 40.8978 249.687 40.5756C249.434 40.2535 249.066 40.0464 248.651 40.0004L244.705 39.5402C244.141 39.4712 243.727 38.965 243.796 38.3897C243.865 37.826 244.383 37.4118 244.947 37.4808L248.893 37.941C249.859 38.0561 250.711 38.5278 251.32 39.2871C251.919 40.0464 252.195 40.9898 252.08 41.9562L251.62 45.9024C251.562 46.4316 251.113 46.8227 250.596 46.8227L250.573 46.8112Z"
120-
fill="#ACB4FB"
127+
fill={p300}
121128
/>
122129
<Path
123130
d="M246.247 64.172C246.109 64.172 245.959 64.172 245.821 64.149L241.875 63.6888C241.311 63.6197 240.897 63.1135 240.966 62.5383C241.035 61.9746 241.553 61.5604 242.117 61.6294L246.063 62.0896C246.477 62.1356 246.88 62.0206 247.213 61.7675C247.535 61.5144 247.743 61.1347 247.789 60.732L248.249 56.7859C248.318 56.2222 248.835 55.808 249.399 55.877C249.963 55.946 250.377 56.4522 250.308 57.0275L249.848 60.9736C249.733 61.94 249.261 62.7914 248.502 63.4011C247.858 63.9189 247.075 64.1835 246.258 64.1835L246.247 64.172Z"
124-
fill="#ACB4FB"
131+
fill={p300}
125132
/>
126133
<Path
127134
d="M230.854 62.4002C230.854 62.4002 230.773 62.4002 230.739 62.4002L226.792 61.94C224.802 61.7099 223.375 59.9036 223.606 57.9248L224.066 53.9786C224.135 53.4149 224.652 53.0007 225.216 53.0698C225.78 53.1388 226.194 53.645 226.125 54.2202L225.665 58.1664C225.561 59.0177 226.183 59.7886 227.034 59.8921L230.98 60.3523C231.544 60.4213 231.958 60.9275 231.889 61.5028C231.832 62.032 231.383 62.4232 230.865 62.4232L230.854 62.4002Z"
128-
fill="#ACB4FB"
135+
fill={p300}
129136
/>
130137
<Path
131138
d="M237.71 58.2815C235.133 58.2815 233.166 56.8089 232.246 55.6584C231.889 55.2097 231.969 54.5539 232.418 54.2088C232.867 53.8521 233.511 53.9327 233.868 54.3699C234.167 54.738 236.836 57.8213 240.955 55.1292C241.438 54.8186 242.071 54.9451 242.393 55.4283C242.715 55.9115 242.577 56.5443 242.094 56.8664C240.518 57.8903 239.045 58.2815 237.722 58.2815H237.71Z"
132-
fill="#ACB4FB"
139+
fill={p300}
133140
/>
134141
<Path
135142
d="M236.663 53.5185C236.445 53.5185 236.226 53.4955 235.996 53.4495C235.432 53.3229 235.087 52.7707 235.202 52.2184C235.329 51.6547 235.881 51.3096 236.433 51.4246C236.744 51.4936 236.894 51.4246 237.032 51.3096C237.918 50.5387 238.125 47.5245 237.975 45.6377C237.929 45.0625 238.355 44.5678 238.93 44.5217C239.505 44.4757 240 44.9014 240.046 45.4766C240.115 46.4085 240.379 51.1485 238.401 52.8627C237.906 53.2884 237.319 53.507 236.675 53.507L236.663 53.5185Z"
136-
fill="#ACB4FB"
143+
fill={p300}
137144
/>
138145
<Path
139146
d="M232.441 48.7899C232.441 48.7899 232.361 48.7899 232.315 48.7899C231.751 48.7209 231.337 48.2147 231.406 47.6395L231.693 45.1659C231.762 44.6022 232.269 44.188 232.844 44.257C233.408 44.3261 233.822 44.8323 233.753 45.4075L233.465 47.8811C233.408 48.4103 232.959 48.8014 232.441 48.8014V48.7899Z"
140-
fill="#ACB4FB"
147+
fill={p300}
141148
/>
142149
<Path
143150
d="M243.589 50.09C243.589 50.09 243.509 50.09 243.474 50.09C242.91 50.021 242.496 49.5147 242.565 48.9395L242.853 46.466C242.922 45.9022 243.44 45.4881 244.003 45.5571C244.567 45.6261 244.981 46.1323 244.912 46.7076L244.625 49.1811C244.567 49.7103 244.118 50.1015 243.601 50.1015L243.589 50.09Z"
144-
fill="#ACB4FB"
151+
fill={p300}
145152
/>
146153
<Defs>
147154
<LinearGradient
@@ -152,8 +159,8 @@ export function ProtectData() {
152159
y2="287.23"
153160
gradientUnits="userSpaceOnUse"
154161
>
155-
<Stop stopColor="#EEF0FE" />
156-
<Stop offset="1" stopColor="#DADEFF" />
162+
<Stop stopColor={p100} />
163+
<Stop offset="1" stopColor={p200} />
157164
</LinearGradient>
158165
<LinearGradient
159166
id="paint1_linear_2304_17437"
@@ -163,8 +170,8 @@ export function ProtectData() {
163170
y2="123.701"
164171
gradientUnits="userSpaceOnUse"
165172
>
166-
<Stop stopColor="#EEF0FE" />
167-
<Stop offset="1" stopColor="#DADEFF" />
173+
<Stop stopColor={p100} />
174+
<Stop offset="1" stopColor={p200} />
168175
</LinearGradient>
169176
<LinearGradient
170177
id="paint2_linear_2304_17437"
@@ -174,8 +181,8 @@ export function ProtectData() {
174181
y2="235.796"
175182
gradientUnits="userSpaceOnUse"
176183
>
177-
<Stop stopColor="#7A88FF" />
178-
<Stop offset="1" stopColor="#5A33F6" />
184+
<Stop stopColor={p400} />
185+
<Stop offset="1" stopColor={p500} />
179186
</LinearGradient>
180187
<LinearGradient
181188
id="paint3_linear_2304_17437"
@@ -185,8 +192,8 @@ export function ProtectData() {
185192
y2="192.486"
186193
gradientUnits="userSpaceOnUse"
187194
>
188-
<Stop stopColor="#7A88FF" />
189-
<Stop offset="1" stopColor="#5A33F6" />
195+
<Stop stopColor={p400} />
196+
<Stop offset="1" stopColor={p500} />
190197
</LinearGradient>
191198
<LinearGradient
192199
id="paint4_linear_3268_4328"
@@ -196,8 +203,8 @@ export function ProtectData() {
196203
y2="192.486"
197204
gradientUnits="userSpaceOnUse"
198205
>
199-
<Stop stopColor="#7A88FF" />
200-
<Stop offset="1" stopColor="#5A33F6" />
206+
<Stop stopColor={p400} />
207+
<Stop offset="1" stopColor={p500} />
201208
</LinearGradient>
202209
<LinearGradient
203210
id="paint5_linear_3268_4328"
@@ -207,8 +214,8 @@ export function ProtectData() {
207214
y2="192.486"
208215
gradientUnits="userSpaceOnUse"
209216
>
210-
<Stop stopColor="#7A88FF" />
211-
<Stop offset="1" stopColor="#5A33F6" />
217+
<Stop stopColor={p400} />
218+
<Stop offset="1" stopColor={p500} />
212219
</LinearGradient>
213220
<LinearGradient
214221
id="paint6_linear_3268_4328"
@@ -218,8 +225,8 @@ export function ProtectData() {
218225
y2="192.486"
219226
gradientUnits="userSpaceOnUse"
220227
>
221-
<Stop stopColor="#7A88FF" />
222-
<Stop offset="1" stopColor="#5A33F6" />
228+
<Stop stopColor={p400} />
229+
<Stop offset="1" stopColor={p500} />
223230
</LinearGradient>
224231
</Defs>
225232
</Svg>

0 commit comments

Comments
 (0)