Apply theme Wasabi

jerameel · Feb 4, 2023 · 1ce17c0 · 1ce17c0
1 parent c0e0e6f
commit 1ce17c0
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 30 deletions.
diff --git a/src/components/module/Info/view.tsx b/src/components/module/Info/view.tsx
@@ -11,7 +11,10 @@ const Info = (props: InfoProps) => {
   const { styles, colors } = useStyles(theme);
   return (
     <View style={[styles.container, containerStyle]}>
-      <Text variant="body" style={{ color: COLORS.LIGHT.AREA_HIGHLIGHT }}>
+      <Text
+        theme={theme}
+        variant="body"
+        style={{ color: COLORS.LIGHT.AREA_HIGHLIGHT }}>
         {label || ''}
       </Text>
     </View>

diff --git a/src/constants/translations/en-US.ts b/src/constants/translations/en-US.ts
@@ -63,6 +63,7 @@ const en_US = {
   THEME: 'Theme',
   THEME_LIGHT: 'Light',
   THEME_DARK: 'Dark',
+  THEME_WASABI: 'Wasabi',
 
   // Insights
   INSIGHTS: 'Insights',

diff --git a/src/screens/CreateTransaction/view.tsx b/src/screens/CreateTransaction/view.tsx
@@ -72,7 +72,7 @@ const CreateTransactionView = (props: CreateTransactionProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/screens/CreateWallet/view.tsx b/src/screens/CreateWallet/view.tsx
@@ -19,7 +19,7 @@ const CreateWalletView = (props: CreateWalletProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/screens/EditTransaction/view.tsx b/src/screens/EditTransaction/view.tsx
@@ -69,7 +69,7 @@ const EditTransactionView = (props: EditTransactionProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/screens/EditWallet/view.tsx b/src/screens/EditWallet/view.tsx
@@ -21,7 +21,7 @@ const EditWalletView = (props: EditWalletProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/screens/Filters/view.tsx b/src/screens/Filters/view.tsx
@@ -55,10 +55,12 @@ const FiltersView = (props: FiltersProps) => {
     'DEBIT' | 'CREDIT' | null
   >(filters.transactionType);
 
-  const [TEXT_SHOW_ALL] = useTranslationKey(['SHOW_ALL']);
-  const [TEXT_ALL] = useTranslationKey(['ALL']);
-  const [TEXT_DEBIT] = useTranslationKey(['DEBIT']);
-  const [TEXT_CREDIT] = useTranslationKey(['CREDIT']);
+  const [TEXT_SHOW_ALL, TEXT_ALL, TEXT_DEBIT, TEXT_CREDIT] = useTranslationKey([
+    'SHOW_ALL',
+    'ALL',
+    'DEBIT',
+    'CREDIT',
+  ]);
 
   const applyFilters = (selectedFilters: Filters) => {
     dispatch(applyFiltersAction(selectedFilters));
@@ -68,7 +70,7 @@ const FiltersView = (props: FiltersProps) => {
     <SafeAreaView style={STYLES.CONTAINER}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={STYLES.HEADER}>
         <Text

diff --git a/src/screens/Home/view.tsx b/src/screens/Home/view.tsx
@@ -53,14 +53,6 @@ const HomeView = (props: HomeProps) => {
   const { filteredTransactions, dailyFilteredTransactions } =
     useFilteredTransactions();
 
-  const [TEXT_ALL] = useTranslationKey(['ALL']);
-  const [TEXT_DEBIT] = useTranslationKey(['DEBIT']);
-  const [TEXT_CREDIT] = useTranslationKey(['CREDIT']);
-
-  const [filter, setFilter] = useState({
-    mode: 'ALL',
-  });
-
   const recentTransactions = dailyFilteredTransactions.slice(0, 3);
 
   const balanceBreakdown = filteredTransactions.reduce(
@@ -126,7 +118,7 @@ const HomeView = (props: HomeProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <View style={styles.headerActionContainer}>

diff --git a/src/screens/Insights/view.tsx b/src/screens/Insights/view.tsx
@@ -121,7 +121,7 @@ const InsightsView = (props: InsightsProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/screens/Settings/view.tsx b/src/screens/Settings/view.tsx
@@ -8,6 +8,7 @@ import { Back } from 'components/base/SVG';
 import Picker from 'components/base/Picker';
 import { TRANSLATIONS } from 'constants/translations';
 import Text from 'components/base/Text';
+import useTranslationKey from 'utils/hooks/useTranslationKey';
 
 const LANGUAGE_OPTIONS = Object.keys(TRANSLATIONS).map((value) => {
   const typedValue = value as keyof typeof TRANSLATIONS;
@@ -29,6 +30,9 @@ const SettingsView = (props: SettingsProps) => {
   } = props;
   const { styles, theme, colors } = useStyles();
 
+  const [TEXT_THEME_LIGHT, TEXT_THEME_DARK, TEXT_THEME_WASABI] =
+    useTranslationKey(['THEME_LIGHT', 'THEME_DARK', 'THEME_WASABI']);
+
   const numbroLanguages = numbro.languages();
   const currencyLanguageOptions = Object.keys(numbroLanguages).reduce(
     (accum: { label: string; value: string }[], key: string) => {
@@ -48,7 +52,7 @@ const SettingsView = (props: SettingsProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity
@@ -95,17 +99,17 @@ const SettingsView = (props: SettingsProps) => {
             }}
             options={[
               {
-                label:
-                  TRANSLATIONS[selectedLanguage as keyof typeof TRANSLATIONS]
-                    .THEME_LIGHT,
+                label: TEXT_THEME_LIGHT,
                 value: 'Light',
               },
               {
-                label:
-                  TRANSLATIONS[selectedLanguage as keyof typeof TRANSLATIONS]
-                    .THEME_DARK,
+                label: TEXT_THEME_DARK,
                 value: 'Dark',
               },
+              {
+                label: TEXT_THEME_WASABI,
+                value: 'Wasabi',
+              },
             ]}
             theme={theme}
           />

diff --git a/src/screens/TransactionDetails/view.tsx b/src/screens/TransactionDetails/view.tsx
@@ -52,7 +52,7 @@ const TransactionDetailsView = (props: TransactionDetailsProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/screens/Transactions/view.tsx b/src/screens/Transactions/view.tsx
@@ -65,7 +65,7 @@ const TransactionsView = (props: TransactionsProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity
@@ -107,6 +107,7 @@ const TransactionsView = (props: TransactionsProps) => {
         </View>
         {exportStatus === 'SUCCESS' ? (
           <Info
+            theme={theme}
             label={`Transactions has been successfully exported to ${exportedFileName}`}
           />
         ) : (

diff --git a/src/screens/WalletDetails/view.tsx b/src/screens/WalletDetails/view.tsx
@@ -103,7 +103,7 @@ const WalletDetailsView = (props: WalletDetailsProps) => {
     <SafeAreaView style={styles.container}>
       <StatusBar
         backgroundColor={colors.BACKGROUND}
-        barStyle={theme.base === 'Dark' ? 'light-content' : 'dark-content'}
+        barStyle={colors.STATUS_BAR}
       />
       <View style={styles.header}>
         <TouchableOpacity

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -1,3 +1,5 @@
+import { StatusBarStyle } from 'react-native';
+
 const LIGHT = {
   PRIMARY: '#e15f41',
   POSITIVE: '#218c74',
@@ -12,6 +14,7 @@ const LIGHT = {
   BACKGROUND: '#f5f5f5',
   AREA_HIGHLIGHT: '#fafafa',
   ERROR: '#c44569',
+  STATUS_BAR: 'dark-content' as StatusBarStyle,
 };
 
 export const DARK = {
@@ -28,11 +31,31 @@ export const DARK = {
   BACKGROUND: '#1f1f1f',
   AREA_HIGHLIGHT: '#141414',
   ERROR: '#c44569',
+  STATUS_BAR: 'light-content' as StatusBarStyle,
+};
+
+export const WASABI = {
+  PRIMARY: '#4E6C50',
+  POSITIVE: '#4E6C50',
+  NEGATIVE: '#AA8B56',
+  TITLE: '#1b251c',
+  PRIMARY_TEXT: '#434343',
+  SECONDARY_TEXT: '#595959',
+  DISABLE: '#bfbfbf',
+  BORDER: '#d9d9d9',
+  DIVIDER: '#f0f0f0',
+  PLACE_HOLDER: '#8c8c8c',
+  BACKGROUND: '#e9efea',
+  AREA_HIGHLIGHT: '#eef3ee',
+  ERROR: '#c44569',
+  STATUS_BAR: 'dark-content' as StatusBarStyle,
 };
 
 export default {
   LIGHT,
   DARK,
   Light: LIGHT,
   Dark: DARK,
+  WASABI,
+  Wasabi: WASABI,
 };