Add switch for light QR codes on dark theme

RoboSats · May 5, 2023 · 298ce13 · 298ce13
1 parent 811cb41
commit 298ce13
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 9 deletions.
diff --git a/frontend/src/basic/SettingsPage/index.tsx b/frontend/src/basic/SettingsPage/index.tsx
@@ -12,7 +12,7 @@ const SettingsPage = (): JSX.Element => {
       elevation={12}
       sx={{
         padding: '0.6em',
-        width: '18em',
+        width: '21em',
         maxHeight: `${maxHeight}em`,
         overflow: 'auto',
         overflowX: 'clip',

diff --git a/frontend/src/components/Dialogs/EnableTelegram.tsx b/frontend/src/components/Dialogs/EnableTelegram.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import QRCode from 'react-qr-code';
@@ -13,6 +13,7 @@ import {
   Grid,
 } from '@mui/material';
 import { NewTabIcon } from '../Icons';
+import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 
 interface Props {
   open: boolean;
@@ -22,6 +23,7 @@ interface Props {
 }
 
 const EnableTelegramDialog = ({ open, onClose, tgBotName, tgToken }: Props): JSX.Element => {
+  const { settings } = useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const theme = useTheme();
 
@@ -49,7 +51,7 @@ const EnableTelegramDialog = ({ open, onClose, tgBotName, tgToken }: Props): JSX
               sx={{
                 width: 290,
                 display: 'flex',
-                backgroundColor: theme.palette.background.paper,
+                backgroundColor: settings.lightQRs ? '#fff' : theme.palette.background.paper,
                 alignItems: 'center',
                 justifyContent: 'center',
                 padding: '0.5em',
@@ -63,7 +65,7 @@ const EnableTelegramDialog = ({ open, onClose, tgBotName, tgToken }: Props): JSX
             >
               <QRCode
                 bgColor={'rgba(255, 255, 255, 0)'}
-                fgColor={theme.palette.text.primary}
+                fgColor={settings.lightQRs ? '#000000' : theme.palette.text.primary}
                 value={'tg://resolve?domain=' + tgBotName + '&start=' + tgToken}
                 size={275}
                 onClick={handleOpenTG}

diff --git a/frontend/src/components/SettingsForm/index.tsx b/frontend/src/components/SettingsForm/index.tsx
@@ -25,6 +25,7 @@ import {
   Link,
   AccountBalance,
   AttachMoney,
+  QrCode,
 } from '@mui/icons-material';
 import { systemClient } from '../../services/System';
 import SwapCalls from '@mui/icons-material/SwapCalls';
@@ -112,6 +113,61 @@ const SettingsForm = ({ dense = false, showNetwork = false }: SettingsFormProps)
                 />
               }
             />
+            {settings.mode === 'dark' ? (
+              <>
+                <ListItemIcon>
+                  <QrCode />
+                </ListItemIcon>
+                <FormControlLabel
+                  sx={{ position: 'relative', right: '1.5em', width: '3em' }}
+                  labelPlacement='end'
+                  label={settings.lightQRs ? t('Light') : t('Dark')}
+                  control={
+                    <Switch
+                      checked={!settings.lightQRs}
+                      checkedIcon={
+                        <Paper
+                          elevation={3}
+                          sx={{
+                            width: '1.2em',
+                            height: '1.2em',
+                            borderRadius: '0.4em',
+                            backgroundColor: 'white',
+                            position: 'relative',
+                            top: `${7 - 0.5 * theme.typography.fontSize}px`,
+                          }}
+                        >
+                          <DarkMode sx={{ width: '0.8em', height: '0.8em', color: '#666' }} />
+                        </Paper>
+                      }
+                      icon={
+                        <Paper
+                          elevation={3}
+                          sx={{
+                            width: '1.2em',
+                            height: '1.2em',
+                            borderRadius: '0.4em',
+                            backgroundColor: 'white',
+                            padding: '0.07em',
+                            position: 'relative',
+                            top: `${7 - 0.5 * theme.typography.fontSize}px`,
+                          }}
+                        >
+                          <LightMode sx={{ width: '0.67em', height: '0.67em', color: '#666' }} />
+                        </Paper>
+                      }
+                      onChange={(e) => {
+                        const lightQRs = !e.target.checked;
+                        setSettings({ ...settings, lightQRs });
+                        systemClient.setItem('settings_lightQRs', lightQRs);
+                      }}
+                    />
+                  }
+                />
+              </>
+            ) : (
+              <></>
+            )}
           </ListItem>
 
           <ListItem>

diff --git a/frontend/src/components/TradeBox/Prompts/LockInvoice.tsx b/frontend/src/components/TradeBox/Prompts/LockInvoice.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Box, Grid, Typography, TextField, Tooltip, useTheme } from '@mui/material';
 import { ContentCopy } from '@mui/icons-material';
@@ -7,13 +7,15 @@ import { Order } from '../../../models';
 import { systemClient } from '../../../services/System';
 import currencies from '../../../../static/assets/currencies.json';
 import WalletsButton from '../WalletsButton';
+import { AppContext, UseAppStoreType } from '../../../contexts/AppContext';
 
 interface LockInvoicePromptProps {
   order: Order;
   concept: 'bond' | 'escrow';
 }
 
 export const LockInvoicePrompt = ({ order, concept }: LockInvoicePromptProps): JSX.Element => {
+  const { settings } = useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const theme = useTheme();
   const currencyCode: string = currencies[`${order.currency}`];
@@ -81,7 +83,7 @@ export const LockInvoicePrompt = ({ order, concept }: LockInvoicePromptProps): J
           <Box
             sx={{
               display: 'flex',
-              backgroundColor: theme.palette.background.paper,
+              backgroundColor: settings.lightQRs ? '#fff' : theme.palette.background.paper,
               alignItems: 'center',
               justifyContent: 'center',
               padding: '0.5em',
@@ -95,7 +97,7 @@ export const LockInvoicePrompt = ({ order, concept }: LockInvoicePromptProps): J
           >
             <QRCode
               bgColor={'rgba(255, 255, 255, 0)'}
-              fgColor={theme.palette.text.primary}
+              fgColor={settings.lightQRs ? '#000000' : theme.palette.text.primary}
               value={invoice ?? 'Undefined: BOLT11 invoice not received'}
               size={theme.typography.fontSize * 21.8}
               onClick={handleClickQR}

diff --git a/frontend/src/contexts/AppContext.ts b/frontend/src/contexts/AppContext.ts
@@ -113,7 +113,7 @@ export const useAppStore = () => {
 
   useEffect(() => {
     setTheme(makeTheme(settings));
-  }, [settings.fontSize, settings.mode]);
+  }, [settings.fontSize, settings.mode, settings.lightQRs]);
 
   useEffect(() => {
     i18n.changeLanguage(settings.language);

diff --git a/frontend/src/models/Settings.model.ts b/frontend/src/models/Settings.model.ts
@@ -30,6 +30,8 @@ class BaseSettings {
         ? 'dark'
         : 'light';
 
+    this.lightQRs = systemClient.getItem('settings_lightQRs') === 'true';
+
     const languageCookie = systemClient.getItem('settings_language');
     this.language =
       languageCookie !== ''
@@ -45,6 +47,7 @@ class BaseSettings {
   public frontend: 'basic' | 'pro' = 'basic';
   public mode: 'light' | 'dark' = 'light';
   public fontSize: number = 14;
+  public lightQRs: boolean = false;
   public language?: Language;
   public freezeViewports: boolean = false;
   public network: 'mainnet' | 'testnet' = 'mainnet';

diff --git a/mobile/App.tsx b/mobile/App.tsx
@@ -44,11 +44,11 @@ const App = () => {
     };
 
     EncryptedStorage.removeItem('sessionid');
-    // EncryptedStorage.removeItem('csrftoken');
     loadCookie('robot_token');
     loadCookie('settings_fontsize_basic');
     loadCookie('settings_language');
     loadCookie('settings_mode');
+    loadCookie('settings_lightQRs');
     loadCookie('settings_network');
     loadCookie('garage').then(() => injectMessageResolve(responseId));
   };