update logos

android/app/src/main/res/drawable/splash_screen.xml

@@ -6,7 +6,7 @@
     <item>
         <bitmap
             android:gravity="center"
-            android:src="@drawable/splash_icon"
+            android:src="@drawable/ssp-logo-text-white"
         />
     </item>
 

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#ffffff</color>
+    <color name="ic_launcher_background">#131314</color>
 </resources>

ios/SSPKey/Images.xcassets/SplashIcon.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "Webp.net-resizeimage (2).png",
+      "filename" : "ItunesArtwork@1x.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "Webp.net-resizeimage (1).png",
+      "filename" : "ItunesArtwork@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "Webp.net-resizeimage.png",
+      "filename" : "ItunesArtwork@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

src/components/Brand/Brand.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View, Image, DimensionValue, Text } from 'react-native';
-import { useTranslation } from 'react-i18next';
+import { View, Image, DimensionValue } from 'react-native';
 import { useTheme } from '../../hooks';
 
 type Props = {
@@ -10,8 +9,7 @@ type Props = {
 };
 
 const Brand = ({ mode }: Props) => {
-  const { Layout, Images, Fonts, Gutters } = useTheme();
-  const { t } = useTranslation(['common']);
+  const { darkMode, Layout, Images, Gutters } = useTheme();
 
   return (
     <View
@@ -21,12 +19,9 @@ const Brand = ({ mode }: Props) => {
       <Image
         testID={'brand-img'}
         style={{ width: 140 }}
-        source={Images.logo}
+        source={darkMode ? Images.ssp.logoTextWhite : Images.ssp.logoTextBlack}
         resizeMode={mode}
       />
-      <Text style={[Fonts.textLarge, Fonts.textBold]}>
-        {t('common:appName.full')}
-      </Text>
     </View>
   );
 };

src/components/Navbar/Navbar.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../../hooks';
 import HelpSection from '../../components/HelpSection/HelpSection';
 
 function PoweredByFlux(props: { openSettingsTrigger: () => void }) {
-  const { Gutters, Layout, Images, Colors } = useTheme();
+  const { darkMode, Gutters, Layout, Images, Colors } = useTheme();
   const [helpSectionModalOpen, setHelpSectionModalOpen] = useState(false);
   const openHelp = () => {
     setHelpSectionModalOpen(true);
@@ -31,7 +31,7 @@ function PoweredByFlux(props: { openSettingsTrigger: () => void }) {
       >
         <Image
           style={{ width: 35, height: 35 }}
-          source={Images.ssp.logo}
+          source={darkMode ? Images.ssp.logoWhite : Images.ssp.logoBlack}
           resizeMode={'contain'}
         />
         <View style={[Layout.row, Gutters.tinyTMargin]}>

src/screens/Create/Create.tsx

@@ -247,7 +247,7 @@ function Create({ navigation }: Props) {
       >
         <Image
           style={{ width: 80, height: 160 }}
-          source={Images.ssp.logo}
+          source={darkMode ? Images.ssp.logoWhite : Images.ssp.logoBlack}
           resizeMode={'contain'}
         />
         <Text style={[Fonts.titleSmall, Gutters.tinyBMargin]}>

src/screens/Restore/Restore.tsx

@@ -265,7 +265,7 @@ function Restore({ navigation }: Props) {
       >
         <Image
           style={{ width: 80, height: 160 }}
-          source={Images.ssp.logo}
+          source={darkMode ? Images.ssp.logoWhite : Images.ssp.logoBlack}
           resizeMode={'contain'}
         />
         <Text style={[Fonts.titleSmall, Gutters.tinyBMargin]}>

src/screens/Welcome/Welcome.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 function Welcome({ navigation }: Props) {
   const { t } = useTranslation(['welcome']);
-  const { Common, Fonts, Gutters, Layout, Images } = useTheme();
+  const { darkMode, Common, Fonts, Gutters, Layout, Images } = useTheme();
 
   return (
     <ScrollView
@@ -34,7 +34,7 @@ function Welcome({ navigation }: Props) {
       >
         <Image
           style={{ width: 120, height: 200 }}
-          source={Images.ssp.logo}
+          source={darkMode ? Images.ssp.logoWhite : Images.ssp.logoBlack}
           resizeMode={'contain'}
         />
         <Text style={[Fonts.titleRegular, Gutters.tinyBMargin]}>

src/theme/Images.ts

@@ -3,8 +3,10 @@ import { ThemeVariables } from '../../@types/theme';
 export default function ({}: ThemeVariables) {
   return {
     ssp: {
-      logo: require('../assets/ssp-logo.png'),
+      logoBlack: require('../assets/ssp-logo-black.png'),
+      logoWhite: require('../assets/ssp-logo-white.png'),
+      logoTextBlack: require('../assets/ssp-logo-text-black.png'),
+      logoTextWhite: require('../assets/ssp-logo-text-white.png'),
     },
-    logo: require('../assets/ssp-logo.png'),
   };
 }

src/theme/themes/default_dark/Images.ts

@@ -4,6 +4,6 @@
 
 export default function () {
   return {
-    logo: require('../../assets/images/splash_icon.png'),
+    logo: require('../../assets/images/ssp-logo-black.png'),
   };
 }