Merge pull request #2454 from LedgerHQ/fix/LIVE-2089-welcome-screen-p…

…olish LIVE-2089 - Fix - Polish welcome screen (and add react-native-video types)
LedgerHQ · May 2, 2022 · 5df2d13 · 5df2d13
2 parents b0839d5 + 21a5a3e
commit 5df2d13
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 113 deletions.
diff --git a/package.json b/package.json
@@ -208,6 +208,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.30",
     "@types/react-native": "^0.65.21",
+    "@types/react-native-video": "^5.0.13",
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^4.1.0",

diff --git a/src/components/theme/ForceTheme.tsx b/src/components/theme/ForceTheme.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import StyleProvider from "../../StyleProvider";
+
+export default function ForceTheme({
+  children,
+  selectedPalette,
+}: {
+  children?: React.ReactNode;
+  selectedPalette: "light" | "dark";
+}): React.ReactElement {
+  return (
+    <StyleProvider selectedPalette={selectedPalette}>{children}</StyleProvider>
+  );
+}
diff --git a/src/components/InvertTheme.tsx → src/components/theme/InvertTheme.tsx b/src/components/InvertTheme.tsx → src/components/theme/InvertTheme.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { ThemeProvider, useTheme } from "styled-components/native";
 import { defaultTheme, palettes } from "@ledgerhq/native-ui/styles";
+import StyleProvider from "../../StyleProvider";
 
 export default function InvertTheme({
   children,
@@ -9,14 +10,8 @@ export default function InvertTheme({
 }): React.ReactElement {
   const { theme } = useTheme();
   const revertTheme = theme === "light" ? "dark" : "light";
-  const newTheme = useMemo(
-    () => ({
-      ...defaultTheme,
-      colors: { ...defaultTheme.colors, palette: palettes[revertTheme] },
-      theme: revertTheme,
-    }),
-    [revertTheme],
-  );
 
-  return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
+  return (
+    <StyleProvider selectedPalette={revertTheme}>{children}</StyleProvider>
+  );
 }
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -828,8 +828,8 @@
   },
   "onboarding": {
     "stepWelcome": {
-      "title": "Welcome to Ledger",
-      "subtitle": "Safely manage your cryptos from your smartphone.",
+      "title": "The most secure cryptocurrency & NFT wallet",
+      "subtitle": "Securely manage, buy and grow your crypto and NFTs on Ledger Live.",
       "start": "Get started",
       "noDevice": "No device?",
       "buy": "Buy a {{fullDeviceName}}",

diff --git a/src/screens/Onboarding/steps/welcome.tsx b/src/screens/Onboarding/steps/welcome.tsx
@@ -8,13 +8,15 @@ import Video from "react-native-video";
 import { Linking } from "react-native";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
 import { useDispatch } from "react-redux";
-import Button from "../../../components/Button";
 import { ScreenName } from "../../../const";
 import StyledStatusBar from "../../../components/StyledStatusBar";
 import { urls } from "../../../config/urls";
 import { useTermsAccept } from "../../../logic/terms";
 import { setAnalytics } from "../../../actions/settings";
 import useIsAppInBackground from "../../../components/useIsAppInBackground";
+import InvertTheme from "../../../components/theme/InvertTheme";
+import ForceTheme from "../../../components/theme/ForceTheme";
+import Button from "../../../components/wrappedUi/Button";
 
 const source = require("../../../../assets/videos/onboarding.mp4");
 
@@ -74,116 +76,111 @@ function OnboardingStepWelcome({ navigation }: any) {
   const videoMounted = !useIsAppInBackground();
 
   return (
-    <Flex flex={1} position="relative" bg="constant.purple">
-      <StyledStatusBar barStyle="light-content" />
-      {videoMounted && (
-        <Video
-          disableFocus
-          source={source}
-          style={absoluteStyle}
-          muted
-          repeat
-          resizeMode={"cover"}
-        />
-      )}
-      <Svg
-        style={absoluteStyle}
-        width="100%"
-        height="120%"
-        preserveAspectRatio="xMinYMin slice"
-      >
-        <Defs>
-          <LinearGradient
-            id="myGradient"
-            x1="0%"
-            y1="0%"
-            x2="0%"
-            y2="100%"
-            gradientUnits="userSpaceOnUse"
-          >
-            <Stop offset="30%" stopOpacity={0} stopColor="black" />
-            <Stop offset="100%" stopOpacity={0.8} stopColor="black" />
-          </LinearGradient>
-        </Defs>
-        <Rect x="0" y="0" width="100%" height="100%" fill="url(#myGradient)" />
-      </Svg>
-      <Flex
-        justifyContent="center"
-        alignItems="center"
-        flex={1}
-        overflow="hidden"
-      >
-        <SafeFlex position="absolute" top={0} right={0}>
-          <Button
-            type="primary"
-            size="small"
-            mr={4}
-            Icon={ChevronBottomMedium}
-            iconPosition="right"
-            title={locale.toLocaleUpperCase()}
-            outline={false}
-            onPress={onLanguageSelect}
+    <ForceTheme selectedPalette={"dark"}>
+      <Flex flex={1} position="relative" bg="constant.purple">
+        <StyledStatusBar barStyle="light-content" />
+        {videoMounted && (
+          <Video
+            disableFocus
+            source={source}
+            style={absoluteStyle}
+            muted
+            repeat
+            resizeMode={"cover"}
           />
-        </SafeFlex>
-      </Flex>
-      <Flex px={6} py={10}>
-        <Text
-          variant="h1"
-          color="constant.white"
-          pb={2}
-          style={{ textTransform: "uppercase" }}
+        )}
+        <Svg
+          style={absoluteStyle}
+          width="100%"
+          height="100%"
+          preserveAspectRatio="xMinYMin slice"
         >
-          {t("onboarding.stepWelcome.title")}
-        </Text>
-        <Text variant="body" color="constant.white" pb={10}>
-          {t("onboarding.stepWelcome.subtitle")}
-        </Text>
-        <Button
-          type="default"
-          containerStyle={{ backgroundColor: "white" }}
-          outline={false}
-          size="large"
-          event="Onboarding - Start"
-          onPress={next}
-          mb={8}
+          <Defs>
+            <LinearGradient
+              id="myGradient"
+              x1="0%"
+              y1="0%"
+              x2="0%"
+              y2="100%"
+              gradientUnits="userSpaceOnUse"
+            >
+              <Stop offset="30%" stopOpacity={0} stopColor="black" />
+              <Stop offset="100%" stopOpacity={0.8} stopColor="black" />
+            </LinearGradient>
+          </Defs>
+          <Rect
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+            fill="url(#myGradient)"
+          />
+        </Svg>
+        <Flex
+          justifyContent="center"
+          alignItems="center"
+          flex={1}
+          overflow="hidden"
         >
+          <SafeFlex position="absolute" top={0} right={0}>
+            <InvertTheme>
+              <Button
+                type={"main"}
+                size="small"
+                mr={4}
+                Icon={ChevronBottomMedium}
+                iconPosition="right"
+                onPress={onLanguageSelect}
+              >
+                {locale.toLocaleUpperCase()}
+              </Button>
+            </InvertTheme>
+          </SafeFlex>
+        </Flex>
+        <Flex px={6} py={10}>
           <Text
-            variant="large"
-            color="constant.black"
-            flex={1}
-            textAlign="center"
-            fontWeight="semiBold"
+            variant="h1"
+            color="neutral.c100"
+            pb={3}
+            style={{ textTransform: "uppercase" }}
           >
-            {t("onboarding.stepWelcome.start")}
+            {t("onboarding.stepWelcome.title")}
           </Text>
-        </Button>
+          <Text variant="large" fontWeight="medium" color="neutral.c80" pb={9}>
+            {t("onboarding.stepWelcome.subtitle")}
+          </Text>
+          <Button
+            type="main"
+            size="large"
+            event="Onboarding - Start"
+            onPress={next}
+            mb={7}
+          >
+            {t("onboarding.stepWelcome.start")}
+          </Button>
 
-        <Text
-          variant="body"
-          textAlign="center"
-          lineHeight="22px"
-          color="constant.white"
-        >
-          {t("onboarding.stepWelcome.terms")}
-        </Text>
-        <Flex
-          flexDirection="row"
-          alignItems="baseline"
-          justifyContent="center"
-          pb={6}
-        >
-          <TextLink type="color" onPress={onTermsLink}>
-            {t("onboarding.stepWelcome.termsLink")}
-          </TextLink>
-          <Text mx={2} variant="body" color="constant.white">
-            {t("onboarding.stepWelcome.and")}
+          <Text variant="small" textAlign="center" color="neutral.c100">
+            {t("onboarding.stepWelcome.terms")}
           </Text>
-          <TextLink type="color" onPress={onPrivacyLink}>
-            {t("onboarding.stepWelcome.privacyLink")}
-          </TextLink>
+          <Flex
+            flexDirection="row"
+            alignItems="baseline"
+            justifyContent="center"
+            pb={6}
+          >
+            <TextLink type="color" size={"small"} onPress={onTermsLink}>
+              {t("onboarding.stepWelcome.termsLink")}
+            </TextLink>
+            <Text mx={2} variant="small" color="neutral.c100">
+              {t("onboarding.stepWelcome.and")}
+            </Text>
+            <TextLink type="color" size={"small"} onPress={onPrivacyLink}>
+              {t("onboarding.stepWelcome.privacyLink")}
+            </TextLink>
+          </Flex>
         </Flex>
       </Flex>
-    </Flex>
+    </ForceTheme>
   );
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -4215,7 +4215,29 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-native@^0.65", "@types/react-native@^0.65.21", "@types/react-native@^0.65.9":
+"@types/react-native-video@^5.0.13":
+  version "5.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-native-video/-/react-native-video-5.0.13.tgz#4a6df3156c5d9ad4e3a37edb320199eaeb22ea20"
+  integrity sha512-pXdF+uM5Kqmsx90eQzOArkz06QOzKQi8uekdcqD+KeNXuQfwJ6hiuGTiC46VcgxGdQVCKAa1AYMg6oUMPaygew==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
+"@types/react-native@*":
+  version "0.67.6"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.6.tgz#9a7de5feba6065aec9f44f9a1e8f6e55ee5d015c"
+  integrity sha512-NM6atxrefIXMLE/PyQ1bIQjQ/lWLdls3uVxItzKvNUUVZlGqgn/uGN4MarM9quSf90uSqJYPIAeAgTtBTUjhgg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-native@^0.65", "@types/react-native@^0.65.9":
+  version "0.65.17"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.65.17.tgz#6bdb4cb7e60bbc7eda880120e2a78a080373dd97"
+  integrity sha512-a1yykkqrnrTQJAteu0lt8gqv0PubdNzQvHH1kUOOl3y6JsK5AuqyvBaDmuw6xAYOL3vSXa43Wt+n47VTZRJd7w==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-native@^0.65.21":
   version "0.65.21"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.65.21.tgz#f731b172765f17e4866473de41e1d3a4890ae536"
   integrity sha512-6TmhHLEBH7xMOBG+MIExOILOEI+nq/VHmlAJZ7SynJ+/ezG318EFrrxDPge46WPqWT25ZbnhSR6uxzBn7TDRbQ==