From 2f93a76e4d89fa272eb5cb188c5c7240ed4143d9 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Sat, 21 Dec 2019 10:38:40 +0500
Subject: [PATCH] fix theming

---
 apps/mobile/App.js                            | 18 +++++++++++++++++-
 apps/mobile/src/common/common.js              | 13 +++++++++----
 apps/mobile/src/components/Menu/index.js      |  4 ++--
 apps/mobile/src/components/NotesList/index.js |  4 ++--
 apps/mobile/src/provider/index.js             |  8 +++-----
 apps/mobile/src/provider/useAppContext.js     |  3 ++-
 apps/mobile/src/views/Settings/index.js       |  1 +
 7 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/apps/mobile/App.js b/apps/mobile/App.js
index 34d7bc2dc..9a34f1f51 100644
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -19,6 +19,11 @@ import StorageInterface from './src/utils/storage';
 import {AppProvider} from './src/provider';
 import {DeviceDetectionService} from './src/utils/deviceDetection';
 import {useAppContext} from './src/provider/useAppContext';
+import {
+  COLOR_SCHEME,
+  onThemeUpdate,
+  clearThemeUpdateListener,
+} from './src/common/common';
 
 export const DDS = new DeviceDetectionService();
 
@@ -26,7 +31,7 @@ export const db = new Storage(StorageInterface);
 
 const App = () => {
   // Global State
-  const {colors} = useAppContext();
+  const [colors, setColors] = useState(COLOR_SCHEME);
 
   // Local State
   const [sidebar, setSidebar] = useState(w * 0.3);
@@ -79,6 +84,17 @@ const App = () => {
     }
   }, []);
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      setColors({...COLOR_SCHEME});
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        setColors({...COLOR_SCHEME});
+      });
+    };
+  }, []);
+
   // Render
 
   if (!isIntialized) {
diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js
index 78c9e4769..26b33b78d 100755
--- a/apps/mobile/src/common/common.js
+++ b/apps/mobile/src/common/common.js
@@ -4,15 +4,17 @@ import {useAppContext} from '../provider/useAppContext';
 //COLOR SCHEME
 export const ACCENT = {
   color: '#0560FF',
+  shade: '#0560FF12',
 };
-export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT.color) {
+export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
   COLOR_SCHEME.bg = colors.bg;
-  COLOR_SCHEME.fg = accent;
+  COLOR_SCHEME.fg = accent.color;
   COLOR_SCHEME.navbg = colors.navbg;
   COLOR_SCHEME.nav = colors.nav;
   COLOR_SCHEME.pri = colors.pri;
   COLOR_SCHEME.sec = colors.sec;
-  COLOR_SCHEME.accent = accent;
+  COLOR_SCHEME.accent = accent.color;
+  COLOR_SCHEME.shade = accent.shade;
   COLOR_SCHEME.normal = colors.normal;
   COLOR_SCHEME.night = colors.night;
   COLOR_SCHEME.icon = colors.icon;
@@ -49,7 +51,7 @@ export async function getColorScheme(colors) {
 
 export function setAccentColor(color) {
   ACCENT.color = color;
-
+  ACCENT.shade = color + '12';
   return ACCENT;
 }
 
@@ -69,6 +71,7 @@ export const COLOR_SCHEME = {
   pri: 'black',
   sec: 'white',
   accent: ACCENT.color,
+  shade: ACCENT.shade,
   normal: 'black',
   icon: 'gray',
   errorBg: '#FFD2D2',
@@ -88,6 +91,7 @@ export const COLOR_SCHEME_LIGHT = {
   pri: 'black',
   sec: 'white',
   accent: ACCENT.color,
+  shade: ACCENT.shade,
   normal: 'black',
   icon: 'gray',
   errorBg: '#FFD2D2',
@@ -106,6 +110,7 @@ export const COLOR_SCHEME_DARK = {
   pri: 'white',
   sec: 'black',
   accent: ACCENT.color,
+  shade: ACCENT.shade,
   normal: 'black',
   icon: 'gray',
   errorBg: '#FFD2D2',
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index b51a2662b..3ceeda341 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -45,7 +45,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
       style={{
         height: '100%',
         opacity: hide ? 0 : 1,
-        backgroundColor: colors.night ? colors.navbg : colors.navbg,
+        backgroundColor: colors.shade,
       }}>
       <View
         style={{
@@ -157,7 +157,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                       width: 30,
                     }}
                     name={item.icon}
-                    color={colors.icon}
+                    color={colors.pri}
                     size={SIZE.md}
                   />
                   <Text
diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js
index bf2badb44..77b312da2 100644
--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -72,7 +72,7 @@ export const NotesList = ({
             <>
               <NoteItem
                 customStyle={{
-                  backgroundColor: colors.navbg,
+                  backgroundColor: colors.shade,
                   width: '100%',
                   paddingHorizontal: '5%',
                   paddingTop: 20,
@@ -87,7 +87,7 @@ export const NotesList = ({
               />
               <NoteItem
                 customStyle={{
-                  backgroundColor: colors.navbg,
+                  backgroundColor: colors.shade,
                   width: '100%',
                   paddingHorizontal: '5%',
                   paddingTop: 20,
diff --git a/apps/mobile/src/provider/index.js b/apps/mobile/src/provider/index.js
index c1f8c0cfc..e33a320e9 100644
--- a/apps/mobile/src/provider/index.js
+++ b/apps/mobile/src/provider/index.js
@@ -1,9 +1,6 @@
 import React, {createContext, useEffect} from 'react';
 import {useImmer} from 'use-immer';
 import {DDS} from '../../App';
-const ACCENT = {
-  color: '#0560FF',
-};
 
 const defaultState = {
   isMenuOpen: {
@@ -12,12 +9,13 @@ const defaultState = {
   colors: {
     night: false,
     bg: 'white',
-    fg: ACCENT.color,
+    fg: '#0560FF',
     navbg: '#f6fbfc',
     nav: '#f0f0f0',
     pri: 'black',
     sec: 'white',
-    accent: ACCENT.color,
+    accent: '#0560FF',
+    shade: '#0560FF12',
     normal: 'black',
     icon: 'gray',
     errorBg: '#FFD2D2',
diff --git a/apps/mobile/src/provider/useAppContext.js b/apps/mobile/src/provider/useAppContext.js
index efbd55878..b633b9455 100644
--- a/apps/mobile/src/provider/useAppContext.js
+++ b/apps/mobile/src/provider/useAppContext.js
@@ -22,7 +22,7 @@ const useAppContext = () => {
     });
   }
 
-  function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT.color) {
+  function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
     StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
 
@@ -33,6 +33,7 @@ const useAppContext = () => {
 
   function changeAccentColor(accentColor) {
     ACCENT.color = accentColor;
+    ACCENT.shade = accentColor + '12';
     changeColorScheme();
   }
 
diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js
index b1fe5aa34..13c3ae290 100644
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -159,6 +159,7 @@ export const Settings = ({navigation}) => {
               <TouchableOpacity
                 onPress={() => {
                   changeAccentColor(item);
+
                   AsyncStorage.setItem('accentColor', item);
                 }}
                 style={{