feat: settings screen fresh look

.github/workflows/e2e.yml

@@ -12,7 +12,6 @@ jobs:
   e2e-android:
     name: Android
     runs-on: self-hosted
-    timeout-minutes: 45
 
     steps:
       - uses: actions/checkout@v2
@@ -108,7 +107,6 @@ jobs:
   e2e-ios:
     name: iOS
     runs-on: self-hosted
-    timeout-minutes: 45
 
     steps:
       - uses: actions/checkout@v2

.storybook/storybook.requires.js

@@ -99,6 +99,7 @@ const getStories = () => {
     "./app/screens/settings-screen/display-currency-screen.stories.tsx": require("../app/screens/settings-screen/display-currency-screen.stories.tsx"),
     "./app/screens/settings-screen/language-screen.stories.tsx": require("../app/screens/settings-screen/language-screen.stories.tsx"),
     "./app/screens/settings-screen/settings-screen.stories.tsx": require("../app/screens/settings-screen/settings-screen.stories.tsx"),
+    "./app/screens/settings-screen/settings.stories.tsx": require("../app/screens/settings-screen/settings.stories.tsx"),
     "./app/screens/settings-screen/theme-screen.stories.tsx": require("../app/screens/settings-screen/theme-screen.stories.tsx"),
     "./app/screens/transaction-detail-screen/transaction-detail-screen.stories.tsx": require("../app/screens/transaction-detail-screen/transaction-detail-screen.stories.tsx"),
   }

__tests__/hooks/use-show-warning-secure-account.spec.tsx

@@ -9,7 +9,7 @@ import {
   WarningSecureAccountDocument,
 } from "@app/graphql/generated"
 import { IsAuthedContextProvider } from "@app/graphql/is-authed-context"
-import { useShowWarningSecureAccount } from "@app/screens/settings-screen/show-warning-secure-account"
+import { useShowWarningSecureAccount } from "@app/screens/settings-screen/account/show-warning-secure-account-hook"
 import { renderHook } from "@testing-library/react-hooks"
 
 // FIXME: the mockPrice doesn't work as expect.

android/fastlane/Fastfile

@@ -109,7 +109,7 @@ platform :android do
       file_path: ENV["GRADLE_APK_OUTPUT_PATH"]
     )
 
-    max_retries = 3
+    max_retries = 10
     retries = 0
 
     begin

android/fastlane/README.md

@@ -15,53 +15,53 @@ For _fastlane_ installation instructions, see [Installing _fastlane_](https://do
 
 ## Android
 
-### android test
+### android build
 
 ```sh
-[bundle exec] fastlane android test
+[bundle exec] fastlane android build
 ```
 
-Runs all the tests
+Build Releasable APK
 
-### android build
+### android play_store_upload
 
 ```sh
-[bundle exec] fastlane android build
+[bundle exec] fastlane android play_store_upload
 ```
 
-Build a new version of the app
+Deploy a new version to the Google Play
 
-### android beta
+### android huawei_store_upload
 
 ```sh
-[bundle exec] fastlane android beta
+[bundle exec] fastlane android huawei_store_upload
 ```
 
-Deploy a new version to both Play Store and Huawei Store
+Deploy the new version to Huawei App Gallery
 
-### android play_store_release
+### android promote_to_beta
 
 ```sh
-[bundle exec] fastlane android play_store_release
+[bundle exec] fastlane android promote_to_beta
 ```
 
-Deploy a new version to the Google Play
+Promote Internal Testing build to Beta
 
-### android huawei_release
+### android promote_to_public
 
 ```sh
-[bundle exec] fastlane android huawei_release
+[bundle exec] fastlane android promote_to_public
 ```
 
-Deploy a new version to Huawei App Gallery
+Promote Internal Testing build to Public
 
-### android browserstack
+### android public_phased_percent
 
 ```sh
-[bundle exec] fastlane android browserstack
+[bundle exec] fastlane android public_phased_percent
 ```
 
-End to end testing on browserstack
+Phased Public Rollout
 
 ### android build_e2e
 
@@ -71,6 +71,14 @@ End to end testing on browserstack
 
 Build for end to end testing
 
+### android browserstack
+
+```sh
+[bundle exec] fastlane android browserstack
+```
+
+End to end testing on browserstack
+
 ----
 
 This README.md is auto-generated and will be re-generated every time [_fastlane_](https://fastlane.tools) is run.

app/components/atomic/galoy-icon-button/galoy-icon-button.tsx

@@ -15,6 +15,8 @@ export type GaloyIconButtonProps = {
   size: "small" | "medium" | "large"
   text?: string
   iconOnly?: boolean
+  color?: string
+  backgroundColor?: string
 }
 
 const sizeMapping = {
@@ -29,6 +31,8 @@ export const GaloyIconButton = ({
   text,
   iconOnly,
   disabled,
+  color,
+  backgroundColor,
   ...remainingProps
 }: GaloyIconButtonProps & PressableProps) => {
   const {
@@ -55,36 +59,36 @@ export const GaloyIconButton = ({
       case iconOnly && disabled:
         return {
           opacity: 0.7,
-          color: colors.primary,
+          color: color || colors.primary,
           backgroundColor: colors.transparent,
         }
       case iconOnly && pressed:
         return {
           opacity: 0.7,
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       case iconOnly && !pressed:
         return {
-          color: colors.primary,
+          color: color || colors.primary,
           backgroundColor: colors.transparent,
         }
       case !iconOnly && disabled:
         return {
           opacity: 0.7,
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       case !iconOnly && pressed:
         return {
           opacity: 0.7,
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       case !iconOnly && !pressed:
         return {
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       default:
         return {}

app/components/atomic/galoy-icon/galoy-icon.tsx

@@ -51,6 +51,7 @@ import Warning from "@app/assets/icons-redesign/warning.svg"
 import Note from "@app/assets/icons/note.svg"
 import People from "@app/assets/icons/people.svg"
 import Rank from "@app/assets/icons/rank.svg"
+import Refresh from "@app/assets/icons/refresh.svg"
 import { makeStyles, useTheme } from "@rneui/themed"
 
 export const icons = {
@@ -104,6 +105,7 @@ export const icons = {
   "payment-pending": PaymentPending,
   "payment-error": PaymentError,
   "bell": Bell,
+  "refresh": Refresh,
 } as const
 
 export type IconNamesType = keyof typeof icons

app/components/contact-modal/contact-modal.tsx

@@ -123,8 +123,8 @@ const ContactModal: React.FC<Props> = ({
   return (
     <ReactNativeModal
       isVisible={isVisible}
-      backdropOpacity={0.3}
-      backdropColor={colors.grey3}
+      backdropOpacity={0.8}
+      backdropColor={colors.white}
       onBackdropPress={toggleModal}
       style={styles.modal}
     >
@@ -163,7 +163,7 @@ const useStyles = makeStyles(({ colors }) => ({
     marginHorizontal: 0,
   },
   listItemContainer: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.grey5,
   },
   listItemTitle: {
     color: colors.black,

app/components/custom-modal/custom-modal.tsx

@@ -71,10 +71,11 @@ const CustomModal: React.FC<CustomModalProps> = ({
   return (
     <Modal
       isVisible={isVisible}
-      backdropOpacity={0.7}
-      backdropColor={colors.grey3}
+      backdropOpacity={0.8}
+      backdropColor={colors.white}
       backdropTransitionOutTiming={0}
       avoidKeyboard={true}
+      onBackdropPress={toggleModal}
     >
       <View style={styles.container}>
         {showCloseIconButton && (
@@ -135,7 +136,7 @@ type UseStylesProps = {
 
 const useStyles = makeStyles(({ colors }, props: UseStylesProps) => ({
   container: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.grey5,
     maxHeight: "95%",
     minHeight: props.minHeight || "auto",
     borderRadius: 16,

app/components/set-default-account-modal/set-default-account-modal.tsx

@@ -19,7 +19,7 @@ import { StackNavigationProp } from "@react-navigation/stack"
 import { makeStyles, Text, useTheme } from "@rneui/themed"
 
 import { GaloyCurrencyBubble } from "../atomic/galoy-currency-bubble"
-import { GaloyIcon } from "../atomic/galoy-icon"
+import { GaloyIconButton } from "../atomic/galoy-icon-button"
 
 gql`
   query setDefaultAccountModal {
@@ -148,15 +148,21 @@ export const SetDefaultAccountModalUI: React.FC<SetDefaultAccountModalUIProps> =
   return (
     <Modal
       isVisible={isVisible}
-      backdropOpacity={0.7}
-      backdropColor={colors.grey3}
+      backdropOpacity={0.8}
+      backdropColor={colors.white}
       backdropTransitionOutTiming={0}
       avoidKeyboard={true}
+      onBackdropPress={toggleModal}
+      onBackButtonPress={toggleModal}
     >
       <View style={styles.container}>
-        <TouchableOpacity style={styles.closeIcon} onPress={toggleModal}>
-          <GaloyIcon name="close" size={30} color={colors.grey0} />
-        </TouchableOpacity>
+        <GaloyIconButton
+          style={styles.closeIcon}
+          name="close"
+          size="medium"
+          color={colors.grey0}
+          onPress={toggleModal}
+        />
         <ScrollView
           style={styles.modalCard}
           persistentScrollbar={true}
@@ -226,7 +232,7 @@ const useStyles = makeStyles(({ colors }) => ({
     flexDirection: "column",
   },
   container: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.grey5,
     maxHeight: "80%",
     minHeight: "auto",
     borderRadius: 16,

app/components/set-lightning-address-modal/set-lightning-address-modal.tsx

@@ -175,11 +175,11 @@ export const SetLightningAddressModalUI = ({
 
   return (
     <CustomModal
-      title={LL.SetAddressModal.title({ bankName })}
-      minHeight={"50%"}
+      title={LL.SetAddressModal.setLightningAddress()}
+      minHeight={380}
       toggleModal={toggleModal}
       isVisible={isVisible}
-      primaryButtonTitle={LL.SetAddressModal.title({ bankName })}
+      primaryButtonTitle={LL.SetAddressModal.setLightningAddress()}
       primaryButtonLoading={loading}
       primaryButtonOnPress={setLightningAddress}
       primaryButtonDisabled={!lnAddress}
@@ -274,7 +274,7 @@ const useStyles = makeStyles(({ colors }) => ({
     paddingHorizontal: 12,
     borderRadius: 8,
     minHeight: 60,
-    backgroundColor: colors.grey5,
+    backgroundColor: colors.grey4,
     alignItems: "center",
     justifyContent: "space-between",
   },

app/components/version/version.tsx

@@ -13,7 +13,6 @@ import { testProps } from "../../utils/testProps"
 const useStyles = makeStyles(({ colors }) => ({
   version: {
     color: colors.grey0,
-    fontSize: 18,
     marginTop: 18,
     textAlign: "center",
   },