Brand tuning: switch from "blueprint B" to "cloud imagery" (#96)

* Switch app icon to bluesky image

* Update splash screen to clouds

* Update login screen to use branding

* Lighten the shadows in the brand imagery

ios/LaunchScreen.storyboard

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
-    <device id="retina4_7" orientation="portrait" appearance="light"/>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Y6W-OH-hqX">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
@@ -9,33 +9,33 @@
     </dependencies>
     <scenes>
         <!--View Controller-->
-        <scene sceneID="EHf-IW-A2E">
+        <scene sceneID="s0d-6b-0kx">
             <objects>
-                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
-                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                <viewController id="Y6W-OH-hqX" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="5EZ-qb-Rvc">
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" image="LaunchScreen" translatesAutoresizingMaskIntoConstraints="NO" id="3xW-LZ-8bI">
-                                <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" image="LaunchScreen" translatesAutoresizingMaskIntoConstraints="NO" id="Ppr-Vi-7AA">
+                                <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                             </imageView>
                         </subviews>
                         <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                         <constraints>
-                            <constraint firstAttribute="bottom" secondItem="3xW-LZ-8bI" secondAttribute="bottom" id="Qjl-JH-apV"/>
-                            <constraint firstItem="3xW-LZ-8bI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="c7a-bI-Hl7"/>
-                            <constraint firstAttribute="trailing" secondItem="3xW-LZ-8bI" secondAttribute="trailing" id="vM9-Qy-zds"/>
-                            <constraint firstItem="3xW-LZ-8bI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="yhO-am-Ve0"/>
+                            <constraint firstAttribute="trailing" secondItem="Ppr-Vi-7AA" secondAttribute="trailing" id="8NR-sO-ZhN"/>
+                            <constraint firstItem="Ppr-Vi-7AA" firstAttribute="top" secondItem="5EZ-qb-Rvc" secondAttribute="top" id="Od5-pK-zM2"/>
+                            <constraint firstItem="Ppr-Vi-7AA" firstAttribute="leading" secondItem="5EZ-qb-Rvc" secondAttribute="leading" id="Ww6-nx-IYo"/>
+                            <constraint firstAttribute="bottom" secondItem="Ppr-Vi-7AA" secondAttribute="bottom" id="vTP-N3-Ihm"/>
                         </constraints>
                     </view>
                 </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="Ief-a0-LHa" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+            <point key="canvasLocation" x="119.84732824427481" y="4.9295774647887329"/>
         </scene>
     </scenes>
     <resources>
-        <image name="LaunchScreen" width="500" height="750"/>
+        <image name="LaunchScreen" width="600" height="900"/>
         <systemColor name="systemBackgroundColor">
             <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
         </systemColor>

ios/app.xcodeproj/project.pbxproj

@@ -13,7 +13,7 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		5698CA584FD738B2091BD18F /* libPods-app-appTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C0C7BDE7769B84011D3747DC /* libPods-app-appTests.a */; };
 		67BF1AE6AABFC881715B2D6A /* libPods-app.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 8789F612EDA2C48C6064ADD6 /* libPods-app.a */; };
-		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		E46FE2C12981C0DB007C107C /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = E46FE2C02981C0DB007C107C /* LaunchScreen.storyboard */; };
 		E4BBD590292C1F5200296224 /* app.entitlements in Resources */ = {isa = PBXBuildFile; fileRef = E4437C9E28581FA7006DA9E7 /* app.entitlements */; };
 /* End PBXBuildFile section */
 
@@ -38,13 +38,13 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = app/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = app/main.m; sourceTree = "<group>"; };
 		53DBA218C184B95B107AC33E /* Pods-app.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app.release.xcconfig"; path = "Target Support Files/Pods-app/Pods-app.release.xcconfig"; sourceTree = "<group>"; };
-		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = app/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		8789F612EDA2C48C6064ADD6 /* libPods-app.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-app.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		8BB4EDB104E125B8A1913E74 /* Pods-app.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app.debug.xcconfig"; path = "Target Support Files/Pods-app/Pods-app.debug.xcconfig"; sourceTree = "<group>"; };
 		A8E093A0B5DA947150924A68 /* Pods-app-appTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app-appTests.release.xcconfig"; path = "Target Support Files/Pods-app-appTests/Pods-app-appTests.release.xcconfig"; sourceTree = "<group>"; };
 		C01FB6762BC17DADC0319338 /* Pods-app-appTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app-appTests.debug.xcconfig"; path = "Target Support Files/Pods-app-appTests/Pods-app-appTests.debug.xcconfig"; sourceTree = "<group>"; };
 		C0C7BDE7769B84011D3747DC /* libPods-app-appTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-app-appTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		E4437C9E28581FA7006DA9E7 /* app.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = app.entitlements; path = app/app.entitlements; sourceTree = "<group>"; };
+		E46FE2C02981C0DB007C107C /* LaunchScreen.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = LaunchScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
@@ -93,8 +93,8 @@
 				13B07FB01A68108700A75B9A /* AppDelegate.mm */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
-				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				E46FE2C02981C0DB007C107C /* LaunchScreen.storyboard */,
 			);
 			name = app;
 			sourceTree = "<group>";
@@ -245,8 +245,8 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				E46FE2C12981C0DB007C107C /* LaunchScreen.storyboard in Resources */,
 				E4BBD590292C1F5200296224 /* app.entitlements in Resources */,
-				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

ios/app/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -55,7 +55,7 @@
       "size" : "57x57"
     },
     {
-      "filename" : "120 1.png",
+      "filename" : "120.png",
       "idiom" : "iphone",
       "scale" : "2x",
       "size" : "60x60"
@@ -66,11 +66,277 @@
       "scale" : "3x",
       "size" : "60x60"
     },
+    {
+      "filename" : "20.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "40.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "29.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "58.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "40.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "80.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "50.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "50x50"
+    },
+    {
+      "filename" : "100.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "50x50"
+    },
+    {
+      "filename" : "72.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "72x72"
+    },
+    {
+      "filename" : "144.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "72x72"
+    },
+    {
+      "filename" : "76.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "76x76"
+    },
+    {
+      "filename" : "152.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "76x76"
+    },
+    {
+      "filename" : "167.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
+    },
     {
       "filename" : "1024.png",
       "idiom" : "ios-marketing",
       "scale" : "1x",
       "size" : "1024x1024"
+    },
+    {
+      "filename" : "16.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "16x16"
+    },
+    {
+      "filename" : "32.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "16x16"
+    },
+    {
+      "filename" : "32.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "32x32"
+    },
+    {
+      "filename" : "64.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "32x32"
+    },
+    {
+      "filename" : "128.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "128x128"
+    },
+    {
+      "filename" : "256.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "128x128"
+    },
+    {
+      "filename" : "256.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "256x256"
+    },
+    {
+      "filename" : "512.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "256x256"
+    },
+    {
+      "filename" : "512.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "512x512"
+    },
+    {
+      "filename" : "1024.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "512x512"
+    },
+    {
+      "filename" : "48.png",
+      "idiom" : "watch",
+      "role" : "notificationCenter",
+      "scale" : "2x",
+      "size" : "24x24",
+      "subtype" : "38mm"
+    },
+    {
+      "filename" : "55.png",
+      "idiom" : "watch",
+      "role" : "notificationCenter",
+      "scale" : "2x",
+      "size" : "27.5x27.5",
+      "subtype" : "42mm"
+    },
+    {
+      "filename" : "58.png",
+      "idiom" : "watch",
+      "role" : "companionSettings",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "87.png",
+      "idiom" : "watch",
+      "role" : "companionSettings",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "66.png",
+      "idiom" : "watch",
+      "role" : "notificationCenter",
+      "scale" : "2x",
+      "size" : "33x33",
+      "subtype" : "45mm"
+    },
+    {
+      "filename" : "80.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "40x40",
+      "subtype" : "38mm"
+    },
+    {
+      "filename" : "88.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "44x44",
+      "subtype" : "40mm"
+    },
+    {
+      "filename" : "92.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "46x46",
+      "subtype" : "41mm"
+    },
+    {
+      "filename" : "100.png",
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "50x50",
+      "subtype" : "44mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "51x51",
+      "subtype" : "45mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "54x54",
+      "subtype" : "49mm"
+    },
+    {
+      "filename" : "172.png",
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "86x86",
+      "subtype" : "38mm"
+    },
+    {
+      "filename" : "196.png",
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "98x98",
+      "subtype" : "42mm"
+    },
+    {
+      "filename" : "216.png",
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "108x108",
+      "subtype" : "44mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "117x117",
+      "subtype" : "45mm"
+    },
+    {
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "129x129",
+      "subtype" : "49mm"
+    },
+    {
+      "filename" : "1024.png",
+      "idiom" : "watch-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
     }
   ],
   "info" : {

ios/app/Images.xcassets/LaunchScreen.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "splash.jpg",
+      "filename" : "bsky-app-splash.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "splash@2x.jpg",
+      "filename" : "bsky-app-splash@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "splash@3x.jpg",
+      "filename" : "bsky-app-splash@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

src/view/com/login/Logo.tsx

@@ -1,42 +1,9 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import Svg, {Circle, Line, Text as SvgText} from 'react-native-svg'
 import {s, gradients} from '../../lib/styles'
 import {Text} from '../util/text/Text'
 
-export const Logo = ({color, size = 100}: {color: string; size?: number}) => {
-  return (
-    <View style={styles.logo}>
-      <Svg width={size} height={size} viewBox="0 0 100 100">
-        <Circle
-          cx="50"
-          cy="50"
-          r="46"
-          fill="none"
-          stroke={color}
-          strokeWidth={2}
-        />
-        <Line stroke={color} strokeWidth={1} x1="30" x2="30" y1="0" y2="100" />
-        <Line stroke={color} strokeWidth={1} x1="74" x2="74" y1="0" y2="100" />
-        <Line stroke={color} strokeWidth={1} x1="0" x2="100" y1="22" y2="22" />
-        <Line stroke={color} strokeWidth={1} x1="0" x2="100" y1="74" y2="74" />
-        <SvgText
-          fill="none"
-          stroke={color}
-          strokeWidth={2}
-          fontSize="60"
-          fontWeight="bold"
-          x="52"
-          y="70"
-          textAnchor="middle">
-          B
-        </SvgText>
-      </Svg>
-    </View>
-  )
-}
-
 export const LogoTextHero = () => {
   return (
     <LinearGradient
@@ -44,8 +11,7 @@ export const LogoTextHero = () => {
       start={{x: 0, y: 0}}
       end={{x: 1, y: 1}}
       style={[styles.textHero]}>
-      <Logo color="white" size={40} />
-      <Text type="title-lg" style={[s.white, s.pl10]}>
+      <Text type="title-lg" style={[s.white, s.bold]}>
         Bluesky
       </Text>
     </LinearGradient>

src/view/lib/assets.native.ts

@@ -2,3 +2,4 @@ import {ImageSourcePropType} from 'react-native'
 
 export const DEF_AVATAR: ImageSourcePropType = require('../../../public/img/default-avatar.jpg')
 export const TABS_EXPLAINER: ImageSourcePropType = require('../../../public/img/tabs-explainer.jpg')
+export const CLOUD_SPLASH: ImageSourcePropType = require('../../../public/img/cloud-splash.png')

src/view/lib/assets.ts

@@ -4,3 +4,4 @@ export const DEF_AVATAR: ImageSourcePropType = {uri: '/img/default-avatar.jpg'}
 export const TABS_EXPLAINER: ImageSourcePropType = {
   uri: '/img/tabs-explainer.jpg',
 }
+export const CLOUD_SPLASH: ImageSourcePropType = {uri: '/img/cloud-splash.png'}

src/view/screens/Login.tsx

@@ -1,21 +1,19 @@
 import React, {useState} from 'react'
 import {
+  Image,
   SafeAreaView,
   StyleSheet,
   TouchableOpacity,
   View,
-  useWindowDimensions,
 } from 'react-native'
-import Svg, {Line} from 'react-native-svg'
-import LinearGradient from 'react-native-linear-gradient'
 import {observer} from 'mobx-react-lite'
 import {Signin} from '../com/login/Signin'
-import {Logo} from '../com/login/Logo'
 import {CreateAccount} from '../com/login/CreateAccount'
 import {Text} from '../com/util/text/Text'
 import {ErrorBoundary} from '../com/util/ErrorBoundary'
-import {s, colors} from '../lib/styles'
+import {colors} from '../lib/styles'
 import {usePalette} from '../lib/hooks/usePalette'
+import {CLOUD_SPLASH} from '../lib/assets'
 
 enum ScreenState {
   S_SigninOrCreateAccount,
@@ -30,48 +28,27 @@ const SigninOrCreateAccount = ({
   onPressSignin: () => void
   onPressCreateAccount: () => void
 }) => {
-  const winDim = useWindowDimensions()
-  const halfWidth = winDim.width / 2
+  const pal = usePalette('default')
   return (
     <>
       <View style={styles.hero}>
-        <Logo color="white" />
+        <View style={styles.heroText}>
           <Text style={styles.title}>Bluesky</Text>
           <Text style={styles.subtitle}>[ private beta ]</Text>
         </View>
-      <View testID="signinOrCreateAccount" style={s.flex1}>
+      </View>
+      <View testID="signinOrCreateAccount" style={styles.btns}>
         <TouchableOpacity
           testID="createAccountButton"
-          style={styles.btn}
+          style={[pal.view, styles.btn]}
           onPress={onPressCreateAccount}>
-          <Text style={styles.btnLabel}>Create a new account</Text>
+          <Text style={[pal.link, styles.btnLabel]}>Create a new account</Text>
         </TouchableOpacity>
-        <View style={styles.or}>
-          <Svg height="1" width={winDim.width} style={styles.orLine}>
-            <Line
-              x1="30"
-              y1="0"
-              x2={halfWidth - 20}
-              y2="0"
-              stroke="white"
-              strokeWidth="1"
-            />
-            <Line
-              x1={halfWidth + 20}
-              y1="0"
-              x2={winDim.width - 30}
-              y2="0"
-              stroke="white"
-              strokeWidth="1"
-            />
-          </Svg>
-          <Text style={styles.orLabel}>or</Text>
-        </View>
         <TouchableOpacity
           testID="signInButton"
-          style={styles.btn}
+          style={[pal.view, styles.btn]}
           onPress={onPressSignin}>
-          <Text style={styles.btnLabel}>Sign in</Text>
+          <Text style={[pal.link, styles.btnLabel]}>Sign in</Text>
         </TouchableOpacity>
       </View>
     </>
@@ -86,11 +63,8 @@ export const Login = observer(() => {
 
   if (screenState === ScreenState.S_SigninOrCreateAccount) {
     return (
-      <LinearGradient
-        colors={['#007CFF', '#00BCFF']}
-        start={{x: 0, y: 0.8}}
-        end={{x: 0, y: 1}}
-        style={styles.container}>
+      <View style={styles.container}>
+        <Image source={CLOUD_SPLASH} style={styles.bgImg} />
         <SafeAreaView testID="noSessionView" style={styles.container}>
           <ErrorBoundary>
             <SigninOrCreateAccount
@@ -101,7 +75,7 @@ export const Login = observer(() => {
             />
           </ErrorBoundary>
         </SafeAreaView>
-      </LinearGradient>
+      </View>
     )
   }
 
@@ -140,21 +114,34 @@ const styles = StyleSheet.create({
     flex: 2,
     justifyContent: 'center',
   },
+  bgImg: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  heroText: {
+    backgroundColor: colors.white,
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  btns: {
+    paddingBottom: 40,
+  },
   title: {
     textAlign: 'center',
-    color: colors.white,
+    color: colors.blue3,
     fontSize: 68,
     fontWeight: 'bold',
   },
   subtitle: {
     textAlign: 'center',
-    color: colors.white,
+    color: colors.blue3,
     fontSize: 18,
   },
   btn: {
-    borderWidth: 1,
-    borderColor: colors.white,
-    borderRadius: 10,
+    borderRadius: 4,
     paddingVertical: 16,
     marginBottom: 20,
     marginHorizontal: 20,
@@ -162,20 +149,8 @@ const styles = StyleSheet.create({
   },
   btnLabel: {
     textAlign: 'center',
+    fontSize: 21,
+    // fontWeight: '500',
     color: colors.white,
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  or: {
-    marginBottom: 20,
-  },
-  orLine: {
-    position: 'absolute',
-    top: 10,
-  },
-  orLabel: {
-    textAlign: 'center',
-    color: colors.white,
-    fontSize: 16,
   },
 })