fix(theming): announcement illustrations (#3473)

Emurgo · Aug 1, 2024 · 992ddfd · 992ddfd
1 parent c769f2f
commit 992ddfd
Show file tree

Hide file tree

Showing 4 changed files with 444 additions and 18 deletions.
diff --git a/...wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx b/...wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx
@@ -10,11 +10,13 @@ import {useQuery, UseQueryOptions} from 'react-query'
 import {Button, Text} from '../../../components'
 import {Space} from '../../../components/Space/Space'
 import {useWalletNavigation} from '../../../kernel/navigation'
-import {ThemeIlustration} from '../illustrations/ThemeIlustration'
+import {DarkThemeIlustration} from '../illustrations/DarkThemeIlustration'
+import {LightThemeIlustration} from '../illustrations/LightThemeIlustration'
 
 export const DarkThemeAnnouncement = () => {
   const {styles} = useStyles()
   const strings = useStrings()
+  const {isDark} = useTheme()
   const {setScreenShown, isLoading: isSetScreenShownLoading} = useSetScreenShown()
 
   const scrollViewRef = React.useRef<ScrollView | null>(null)
@@ -40,7 +42,7 @@ export const DarkThemeAnnouncement = () => {
         <View style={styles.content}>
           <Space height="_2xl" />
 
-          <ThemeIlustration />
+          {isDark ? <DarkThemeIlustration /> : <LightThemeIlustration />}
 
           <Space height="_2xl" />
 

diff --git a/apps/wallet-mobile/src/features/Initialization/illustrations/DarkThemeIlustration.tsx b/apps/wallet-mobile/src/features/Initialization/illustrations/DarkThemeIlustration.tsx
@@ -0,0 +1,212 @@
+import * as React from 'react'
+import Svg, {Defs, LinearGradient, Path, Stop, SvgProps} from 'react-native-svg'
+
+export const DarkThemeIlustration = (props: SvgProps) => {
+  return (
+    <Svg width={343} height={343} viewBox="0 0 343 343" fill="none" {...props}>
+      <Path d="M327 216.04L156.117 313.6 16 233.034l170.214-98.101L327 216.04z" fill="#262A38" />
+
+      <Path d="M327 195.667l-170.883 98.101L16 213.202l170.214-98.101L327 195.667z" fill="#1F232E" />
+
+      <Path d="M49.063 109.841l-4.903 2.315 60.907 35.032 4.922-2.306-60.926-35.041z" fill="#66F2D6" />
+
+      <Path d="M105.087 176.394v-29.247l-60.936-35.209v29.247l60.936 35.209z" fill="#16E3BA" />
+
+      <Path
+        d="M71.144 135.244c-1.333-.771-3 .192-3 1.731v.526a2 2 0 001 1.732l26.466 15.292c1.334.771 3.001-.192 3.001-1.731v-.526a2 2 0 00-1-1.732l-26.467-15.292zM68.144 147.069a2 2 0 001 1.732l26.466 15.292c1.334.771 3.001-.191 3.001-1.731v-.526c0-.714-.38-1.374-1-1.732l-26.467-15.292c-1.333-.771-3 .192-3 1.732v.525zM55.87 123.924c-4.822-2.755-8.731-.55-8.731 4.925 0 5.476 3.909 12.145 8.73 14.9 4.822 2.754 8.73.549 8.73-4.926 0-5.475-3.908-12.144-8.73-14.899z"
+        fill="#fff"
+      />
+
+      <Path d="M105.029 147.142v29.255l4.909-3.277v-28.284l-4.909 2.306z" fill="#66F2D6" />
+
+      <Path d="M220 170l28 17.02L277 171l-28-17-29 16z" fill="#0EE7EA" />
+
+      <Path d="M220 170v34l28 16v-33.083L220 170z" fill="url(#paint0_linear_21813_105339)" />
+
+      <Path d="M248 187v33l29-16v-33l-29 16z" fill="url(#paint1_linear_21813_105339)" />
+
+      <Path d="M137 244.151l19.515 11.863 20.212-11.166L157.212 233 137 244.151z" fill="#0EE7EA" />
+
+      <Path d="M137 244.151v23.697L156.515 279v-23.058L137 244.151z" fill="url(#paint2_linear_21813_105339)" />
+
+      <Path d="M156.515 256v23l20.212-11.152v-23L156.515 256z" fill="url(#paint3_linear_21813_105339)" />
+
+      <Path d="M42 189.193l23.088 14.034L89 190.017 65.912 176 42 189.193z" fill="#0EE7EA" />
+
+      <Path d="M42 189.193v28.035l23.088 13.193v-27.279L42 189.193z" fill="url(#paint4_linear_21813_105339)" />
+
+      <Path d="M65.088 203.21v27.211L89 217.228v-27.211L65.088 203.21z" fill="url(#paint5_linear_21813_105339)" />
+
+      <Path
+        d="M129.765 35.494a9.563 9.563 0 00-14.31 8.953l9.83 141.05a14 14 0 005.888 10.46l66.908 47.274a10.357 10.357 0 0016.331-8.467l-.141-142.54a14 14 0 00-7.015-12.119l-77.491-44.61z"
+        fill="#3154CB"
+      />
+
+      <Path
+        d="M121.204 40.474c-2.669-1.536-6 .393-5.995 3.473l.223 149.876a4 4 0 002.015 3.467l80.673 46.098c2.667 1.524 5.986-.403 5.984-3.475l-.074-149.446c0-1.43-.765-2.75-2.004-3.464l-80.822-46.529z"
+        fill="#7892E8"
+      />
+
+      <Path
+        d="M122.008 48.743c-1.335-.774-3.005.19-3.003 1.733l.206 139.48a2 2 0 001.003 1.731l75.787 43.588c1.334.767 2.998-.196 2.997-1.735l-.068-139.074c0-.713-.38-1.372-.997-1.73l-75.925-43.993z"
+        fill="#0B0B0F"
+      />
+
+      <Path
+        d="M149.006 76.318a2 2 0 001.007 1.734l16.345 9.34c1.333.762 2.992-.2 2.992-1.736v-.784a2 2 0 00-1.002-1.734l-16.346-9.41c-1.334-.768-2.999.197-2.997 1.736l.001.854z"
+        fill="#4B6DDE"
+      />
+
+      <Path
+        d="M192.81 222.572l-68.916-39.379-.058-38.743-.073-66.95 69.003 38 .021 58.137.001 4.158.02 42.445.002 2.332z"
+        fill="#1F232E"
+      />
+
+      <Path
+        d="M162.185 117.533c-.586.088-1.172.154-1.759.22-.586.066-1.172.133-1.758.221-.168 0-.252 0-.419-.265a260.489 260.489 0 00-4.356-5.727l-4.522-6.079a64.91 64.91 0 01-.788-1.04 33.661 33.661 0 00-1.39-1.779L142 100c.251.352.503.705.754.969.41.539.82 1.086 1.232 1.637.935 1.249 1.884 2.515 2.872 3.738.67.881 1.34 1.784 2.01 2.687.67.903 1.34 1.806 2.01 2.687l3.769 5.022c.587.793 1.194 1.586 1.801 2.379.607.793 1.215 1.586 1.801 2.379.167.176.251.264.335.176 1.005-.088 1.926-.176 2.931-.352 1.215-.133 2.408-.287 3.602-.441 1.193-.154 2.387-.308 3.601-.44.936-.094 1.872-.213 2.795-.33.812-.103 1.614-.205 2.398-.287.335 0 .754-.088 1.089-.176l-5.193-3.172c-1.745.306-3.49.527-5.263.751-.78.099-1.566.198-2.359.306zM167.546 138.767l-2.597.352c-3.224-4.273-6.428-8.524-9.632-12.775-3.204-4.252-6.407-8.503-9.632-12.776v-3.788l.002.002c7.286 9.691 14.572 19.382 21.859 28.985zM155.621 132.262c-3.307-4.402-6.604-8.79-9.936-13.143v3.788c1.887 2.492 3.775 5.001 5.67 7.519 2.393 3.181 4.798 6.377 7.229 9.574l2.596-.352a3244.17 3244.17 0 01-5.559-7.386zM171.398 125.198c-1.591.221-3.182.419-4.774.617-1.591.198-3.182.396-4.774.617.084.088.084.176.084.176.419.529.817 1.079 1.214 1.63.398.551.796 1.101 1.215 1.63l.084.088c1.172-.132 2.324-.286 3.476-.441 1.151-.154 2.303-.308 3.475-.44v-3.877zM171.398 134.626a45.13 45.13 0 01-1.591.22c-.523.066-1.047.132-1.591.22.418.572.836 1.122 1.255 1.673.419.55.839 1.102 1.257 1.675l.67-.088v-3.7z"
+        fill="#7892E8"
+      />
+
+      <Path d="M192.81 222.571l-68.916-39.379V159.5L147.5 145l15.5 35.5 15-6 14.788 23.5.022 24.571z" fill="#3E4457" />
+
+      <Path d="M176.412 44.156l-4.903 2.315 60.907 35.032 4.922-2.306-60.926-35.041z" fill="#66F2D6" />
+
+      <Path d="M232.437 110.709V81.462L171.5 46.253V75.5l60.937 35.209z" fill="#16E3BA" />
+
+      <Path
+        d="M198.494 69.558c-1.334-.77-3.001.192-3.001 1.732v.526a2 2 0 001 1.732L222.96 88.84c1.333.77 3.001-.192 3.001-1.732v-.526a2 2 0 00-1-1.731l-26.467-15.293zM195.493 81.384a2 2 0 001 1.732l26.467 15.292c1.333.77 3.001-.192 3.001-1.732v-.525a2 2 0 00-1-1.732l-26.467-15.293c-1.333-.77-3.001.192-3.001 1.732v.526zM183.218 58.239c-4.821-2.755-8.73-.55-8.73 4.925 0 5.476 3.909 12.145 8.73 14.9 4.822 2.754 8.731.55 8.731-4.926 0-5.475-3.909-12.144-8.731-14.9z"
+        fill="#fff"
+      />
+
+      <Path d="M232.378 81.456v29.256l4.909-3.278V79.15l-4.909 2.306z" fill="#66F2D6" />
+
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_21813_105339"
+          x1={237.07}
+          y1={170}
+          x2={208.036}
+          y2={192.842}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint1_linear_21813_105339"
+          x1={248}
+          y1={220}
+          x2={277}
+          y2={220}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint2_linear_21813_105339"
+          x1={148.897}
+          y1={244.151}
+          x2={128.662}
+          y2={260.071}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint3_linear_21813_105339"
+          x1={156.515}
+          y1={279}
+          x2={176.727}
+          y2={279}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint4_linear_21813_105339"
+          x1={56.0751}
+          y1={189.193}
+          x2={32.135}
+          y2={208.027}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+
+        <LinearGradient
+          id="paint5_linear_21813_105339"
+          x1={65.0877}
+          y1={230.421}
+          x2={89}
+          y2={230.421}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#17D1AA" />
+
+          <Stop offset={0.15} stopColor="#1ACBAF" />
+
+          <Stop offset={0.37} stopColor="#21B8BC" />
+
+          <Stop offset={0.62} stopColor="#2E9BD3" />
+
+          <Stop offset={0.89} stopColor="#3F71F1" />
+
+          <Stop offset={1} stopColor="#475FFF" />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}