preparing for color themes

net/web/package-lock.json

@@ -6103,9 +6103,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001507",
+      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==",
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
       "funding": [
         {
           "type": "opencollective",
@@ -25227,9 +25227,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001507",
+      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A=="
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",

net/web/src/App.js

@@ -10,7 +10,7 @@ import { CardContextProvider } from 'context/CardContext';
 import { ChannelContextProvider } from 'context/ChannelContext';
 import { StoreContextProvider } from 'context/StoreContext';
 import { UploadContextProvider } from 'context/UploadContext';
-import { ViewportContextProvider } from 'context/ViewportContext';
+import { SettingsContextProvider } from 'context/SettingsContext';
 import { ConversationContextProvider } from 'context/ConversationContext';
 import { RingContextProvider } from 'context/RingContext';
 
@@ -32,7 +32,7 @@ function App() {
             <StoreContextProvider>
               <AccountContextProvider>
                 <RingContextProvider>
-                  <ViewportContextProvider>
+                  <SettingsContextProvider>
                     <AppContextProvider>
                       <AppWrapper>
                         <ConfigProvider theme={{ token: {
@@ -58,7 +58,7 @@ function App() {
                         </ConfigProvider>
                       </AppWrapper>
                     </AppContextProvider>
-                  </ViewportContextProvider>
+                  </SettingsContextProvider>
                 </RingContextProvider>
               </AccountContextProvider>
             </StoreContextProvider>

net/web/src/access/useAccess.hook.js

@@ -1,7 +1,7 @@
 import { useContext, useState, useEffect } from 'react';
 import { useNavigate, useLocation } from "react-router-dom";
 import { AppContext } from 'context/AppContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 
 export function useAccess() {
 
@@ -12,7 +12,7 @@ export function useAccess() {
   const navigate = useNavigate();
   const location = useLocation();
   const app = useContext(AppContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -43,9 +43,9 @@ export function useAccess() {
 
 
   useEffect(() => {
-    const { display } = viewport.state;
+    const { display } = settings.state;
     updateState({ display });
-  }, [viewport.state]);
+  }, [settings.state]);
 
   const actions = {};
 

net/web/src/context/SettingsContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useSettingsContext } from './useSettingsContext.hook';
+
+export const SettingsContext = createContext({});
+
+export function SettingsContextProvider({ children }) {
+  const { state, actions } = useSettingsContext();
+  return (
+    <SettingsContext.Provider value={{ state, actions }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+

net/web/src/context/ViewportContext.js

@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-import { useViewportContext } from './useViewportContext.hook';
-
-export const ViewportContext = createContext({});
-
-export function ViewportContextProvider({ children }) {
-  const { state, actions } = useViewportContext();
-  return (
-    <ViewportContext.Provider value={{ state, actions }}>
-      {children}
-    </ViewportContext.Provider>
-  );
-}
-

net/web/src/context/useSettingsContext.hook.js

@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react';
+
+const LightTheme = {
+  background: '#8fbea7',
+  primary: '#448866',
+  formBackground: '#f2f2f2',
+  darkBackground: '#222222',
+  formFocus: '#f8f8f8',
+  formHover: '#efefef',
+  grey: '#888888',
+  white: '#ffffff',
+  black: '#000000',
+  divider: '#dddddd',
+  mask: '#dddddd',
+  encircle: '#cccccc',
+  alert: '#ff8888',
+  warn: '#dd4444',
+  enabled: '#444444',
+  disabled: '#aaaaaa',
+  text: '#444444',
+  link: '#0077CC',
+  itemDivider: '#eeeeee',
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
+  error: '#ff4444',
+  profileForm: '#e8e8e8',
+  profileDivider: '#aaaaaa',
+  statsForm: '#ededed',
+  statsDivider: '#afafaf',
+  channel: '#f2f2f2',
+  card: '#eeeeee',
+  selectHover: '#fafafa',
+};
+
+const DarkTheme = {
+  background: '#8fbea7',
+  primary: '#448866',
+  formBackground: '#f2f2f2',
+  darkBackground: '#222222',
+  formFocus: '#f8f8f8',
+  formHover: '#efefef',
+  grey: '#888888',
+  white: '#ffffff',
+  black: '#000000',
+  divider: '#dddddd',
+  mask: '#dddddd',
+  encircle: '#cccccc',
+  alert: '#ff8888',
+  warn: '#dd4444',
+  enabled: '#444444',
+  disabled: '#aaaaaa',
+  text: '#444444',
+  link: '#0077CC',
+  itemDivider: '#eeeeee',
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
+  error: '#ff4444',
+  profileForm: '#e8e8e8',
+  profileDivider: '#aaaaaa',
+  statsForm: '#ededed',
+  statsDivider: '#afafaf',
+  channel: '#f2f2f2',
+  card: '#eeeeee',
+  selectHover: '#fafafa',
+};
+
+
+export function useSettingsContext() {
+
+  const [state, setState] = useState({ 
+    display: null,
+    width: null,
+    height: null,
+    darkTheme: DarkTheme,
+    lightTheme: LightTheme,
+  });
+
+  const SMALL_MEDIUM = 650;
+  const MEDIUM_LARGE = 1000;
+  const LARGE_XLARGE = 1600;
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  };
+
+  const handleResize = () => {
+    if (window.innerWidth < SMALL_MEDIUM) {
+      updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight });
+    }
+    else if (window.innerWidth < MEDIUM_LARGE) {
+      updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight });
+    }
+    else if (window.innerWidth < LARGE_XLARGE) {
+      updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight });
+    }
+    else {
+      updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight });
+    }
+  };
+
+  useEffect(() => {
+    for (let i = 0; i < 10; i++) {
+      setTimeout(handleResize, 100 * i); //cludge for my mobile browser
+    }
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+
+    const scheme = localStorage.getItem('color_scheme');
+    if (scheme === 'dark') {
+      updateState({ darkTheme: DarkTheme, lightTheme: DarkTheme });
+    }
+    else if (scheme === 'light') {
+      updateState({ darkTheme: LightTheme, lightTheme: LightTheme });
+    }
+    else {
+      updateState({ darkTheme: DarkTheme, lightTheme: LightTheme });
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  const actions = {
+    setDarkTheme() {
+      localStorage.setItem('color_scheme', 'dark');
+      updateState({ darkTheme: DarkTheme, lightTheme: DarkTheme });
+    },
+    setLightTheme() {
+      localStorage.setItem('color_scheme', 'light');
+      updateState({ darkTheme: LightTheme, lightTheme: LightTheme });
+    },
+    steDefaultTheme() {
+      localStorage.clearItem('color_scheme');
+      updateState({ darkTheme: DarkTheme, lightTheme: LightTheme });
+    }
+  }
+
+  return { state, actions }
+}
+
+

net/web/src/context/useViewportContext.hook.js

@@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useViewportContext() {
-
-  const [state, setState] = useState({ 
-    display: null,
-    width: null,
-    height: null,
-  });
-
-  const SMALL_MEDIUM = 650;
-  const MEDIUM_LARGE = 1000;
-  const LARGE_XLARGE = 1600;
-
-  const updateState = (value) => {
-    setState((s) => ({ ...s, ...value }));
-  };
-
-  const handleResize = () => {
-    if (window.innerWidth < SMALL_MEDIUM) {
-      updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight });
-    }
-    else if (window.innerWidth < MEDIUM_LARGE) {
-      updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight });
-    }
-    else if (window.innerWidth < LARGE_XLARGE) {
-      updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight });
-    }
-    else {
-      updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight });
-    }
-  };
-
-  useEffect(() => {
-    for (let i = 0; i < 10; i++) {
-      setTimeout(handleResize, 100 * i); //cludge for my mobile browser
-    }
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('orientationchange', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('orientationchange', handleResize);
-    }
-    // eslint-disable-next-line
-  }, []);
-
-  return { state, actions: {} }
-}
-
-

net/web/src/dashboard/accountItem/useAccountItem.hook.js

@@ -2,7 +2,7 @@ import { useContext, useState, useEffect } from 'react';
 import { getAccountImageUrl } from 'api/getAccountImageUrl';
 import { setAccountStatus } from 'api/setAccountStatus';
 import { addAccountAccess } from 'api/addAccountAccess';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { AppContext } from 'context/AppContext';
 
 export function useAccountItem(item, remove) {
@@ -15,7 +15,7 @@ export function useAccountItem(item, remove) {
   });
  
   const app = useContext(AppContext);
-  const viewport = useContext(ViewportContext); 
+  const settings = useContext(SettingsContext); 
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -37,8 +37,8 @@ export function useAccountItem(item, remove) {
   }, [app.state.adminToken, item]); 
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport]);
+  }, [settings]);
 
   const actions = {
     setAccessLink: async () => {

net/web/src/session/Session.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useContext } from 'react';
 import { Modal, Drawer, Spin } from 'antd';
 import { CallingWrapper, RingingWrapper, SessionWrapper } from './Session.styled';
 import { useSession } from './useSession.hook';
@@ -16,10 +16,13 @@ import { BottomNav } from './bottomNav/BottomNav';
 import { Logo } from 'logo/Logo';
 import { EyeInvisibleOutlined, PhoneOutlined } from '@ant-design/icons';
 import { IoVideocamOffOutline, IoVideocamOutline, IoMicOffOutline, IoMicOutline, IoCallOutline } from "react-icons/io5";
+import { ThemeProvider } from "styled-components";
+import { SettingsContext } from 'context/SettingsContext';
 
 export function Session() {
 
   const { state, actions } = useSession();
+  const settings = useContext(SettingsContext);
   const [ringing, setRinging] = useState([]);
   const [callWidth, setCallWidth] = useState(256);
   const [callHeight, setCallHeight] = useState(256);
@@ -156,6 +159,7 @@ export function Session() {
   }
 
   return (
+    <ThemeProvider theme={{ light: settings.state.lightTheme, dark: settings.state.darkTheme }}>
       <SessionWrapper>
         { (state.display === 'xlarge') && (
           <div class="desktop-layout noselect">
@@ -381,6 +385,7 @@ export function Session() {
           </CallingWrapper>
         </Modal>
       </SessionWrapper>
+    </ThemeProvider>
   );
 }
 

net/web/src/session/account/profile/useProfile.hook.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import { ProfileContext } from 'context/ProfileContext';
 import { AppContext } from 'context/AppContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import avatar from 'images/avatar.png';
 
 export function useProfile() {
@@ -25,7 +25,7 @@ export function useProfile() {
 
   const IMAGE_DIM = 256;
   const app = useContext(AppContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
   const profile = useContext(ProfileContext);
 
   const updateState = (value) => {
@@ -41,8 +41,8 @@ export function useProfile() {
   }, [profile.state]);
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport.state]);
+  }, [settings.state]);
 
   const actions = {
     logout: app.actions.logout,

net/web/src/session/cards/useCards.hook.js

@@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { StoreContext } from 'context/StoreContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { AccountContext } from 'context/AccountContext';
@@ -26,16 +26,16 @@ export function useCards() {
   const card = useContext(CardContext);
   const channel = useContext(ChannelContext);
   const store = useContext(StoreContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
   useEffect(() => {
-    const { display } = viewport.state;
+    const { display } = settings.state;
     updateState({ display });
-  }, [viewport.state]);
+  }, [settings.state]);
 
   useEffect(() => {
     const { seal, sealKey, status } = account.state;
@@ -118,13 +118,13 @@ export function useCards() {
   }, [card.state, state.sorted, filter]);
 
   useEffect(() => {
-    if (viewport.state.display === 'small') {
+    if (settings.state.display === 'small') {
       updateState({ tooltip: false });
     }
     else {
       updateState({ tooltip: true });
     }
-  }, [viewport.state]);
+  }, [settings.state]);
 
   const actions = {
     onFilter: (value) => {

net/web/src/session/channels/useChannels.hook.js

@@ -3,7 +3,7 @@ import { StoreContext } from 'context/StoreContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { CardContext } from 'context/CardContext';
 import { AccountContext } from 'context/AccountContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { getCardByGuid } from 'context/cardUtil';
 import { isUnsealed, getChannelSeals, getContentKey, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
@@ -24,7 +24,7 @@ export function useChannels() {
   const channel = useContext(ChannelContext);
   const account = useContext(AccountContext);
   const store = useContext(StoreContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
 
   const channels = useRef(new Map());
 
@@ -264,8 +264,8 @@ export function useChannels() {
   }, [account.state, store.state, card.state, channel.state, filter]);
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport]);
+  }, [settings]);
 
   const actions = {
     onFilter: (value) => {

net/web/src/session/contact/useContact.hook.js

@@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { getListingMessage } from 'api/getListingMessage';
 import { getCardByGuid } from 'context/cardUtil';
 
@@ -20,7 +20,7 @@ export function useContact(guid, listing, close) {
   });
 
   const card = useContext(CardContext);
-  const viewport = useContext(ViewportContext);  
+  const settings = useContext(SettingsContext);  
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -62,8 +62,8 @@ export function useContact(guid, listing, close) {
   }, [card.state, guid, listing]); 
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport.state]);
+  }, [settings.state]);
 
   const applyAction = async (action) => {
     if (!state.busy) {

net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js

@@ -1,5 +1,5 @@
 import { useState, useContext, useEffect, useRef } from 'react';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { CardContext } from 'context/CardContext';
 import { ProfileContext } from 'context/ProfileContext';
@@ -17,7 +17,7 @@ export function useChannelHeader(contentKey) {
     display: null,
   });
 
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
   const card = useContext(CardContext);
   const conversation = useContext(ConversationContext);
   const profile = useContext(ProfileContext);
@@ -32,8 +32,8 @@ export function useChannelHeader(contentKey) {
   }
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport.state]);
+  }, [settings.state]);
 
   useEffect(() => {
 

net/web/src/session/conversation/useConversation.hook.js

@@ -1,5 +1,5 @@
 import { useContext, useRef, useState, useEffect } from 'react';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { AccountContext } from 'context/AccountContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { UploadContext } from 'context/UploadContext';
@@ -27,7 +27,7 @@ export function useConversation(cardId, channelId) {
   const profile = useContext(ProfileContext);
   const card = useContext(CardContext);
   const account = useContext(AccountContext);
-  const viewport = useContext(ViewportContext);  
+  const settings = useContext(SettingsContext);  
   const conversation = useContext(ConversationContext);
   const upload = useContext(UploadContext);
   const store = useContext(StoreContext);
@@ -41,8 +41,8 @@ export function useConversation(cardId, channelId) {
   }
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport]);
+  }, [settings]);
 
   useEffect(() => {
     const { dataType, data } = conversation.state.channel?.data?.channelDetail || {};

net/web/src/session/details/useDetails.hook.js

@@ -3,7 +3,7 @@ import { CardContext } from 'context/CardContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { AccountContext } from 'context/AccountContext';
 import { ProfileContext } from 'context/ProfileContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { getCardByGuid } from 'context/cardUtil';
 import { decryptChannelSubject, updateChannelSubject, getContentKey, getChannelSeals, isUnsealed } from 'context/sealUtil';
 
@@ -34,7 +34,7 @@ export function useDetails() {
   const conversation = useContext(ConversationContext);
   const card = useContext(CardContext);
   const account = useContext(AccountContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
   const profile = useContext(ProfileContext);
 
   const cardId = useRef();
@@ -72,8 +72,8 @@ export function useDetails() {
   }, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]);
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport]);
+  }, [settings]);
 
   useEffect(() => {
 

net/web/src/session/identity/Identity.styled.js

@@ -10,7 +10,12 @@ export const IdentityWrapper = styled.div`
   padding-left: 16px;
   padding-right: 16px;
   border-bottom: 1px solid ${Colors.divider};
-  background-color: ${Colors.formBackground};
+  @media (prefers-color-scheme: light) {
+    background-color: ${props => props.theme.light.formBackground};
+  }
+  @media (prefers-color-scheme: dark) {
+    background-color: ${props => props.theme.dark.formBackground};
+  }
   flex-shrink: 0;
 
   &:hover {

net/web/src/session/listing/useListing.hook.js

@@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { ProfileContext } from 'context/ProfileContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { getListing } from 'api/getListing';
 import { getListingImageUrl } from 'api/getListingImageUrl';
 
@@ -17,7 +17,7 @@ export function useListing() {
   });
 
   const profile = useContext(ProfileContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -78,8 +78,8 @@ export function useListing() {
   }, [profile.state]);
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport.state]);
+  }, [settings.state]);
 
   return { state, actions };
 }

net/web/src/session/useSession.hook.js

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { AppContext } from 'context/AppContext';
 import { CardContext } from 'context/CardContext';
 import { StoreContext } from 'context/StoreContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { RingContext } from 'context/RingContext';
 
@@ -38,7 +38,7 @@ export function useSession() {
   const card = useContext(CardContext);
   const store = useContext(StoreContext);
   const ring = useContext(RingContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
   const profile = useContext(ProfileContext);
 
   const navigate = useNavigate();
@@ -96,8 +96,8 @@ export function useSession() {
   }, [app.state]);
 
   useEffect(() => {
-    updateState({ display: viewport.state.display });
+    updateState({ display: settings.state.display });
-  }, [viewport]);
+  }, [settings]);
 
   useEffect(() => {
     let updated;

net/web/yarn.lock

@@ -3502,9 +3502,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001507"
+  version "1.0.30001587"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz"
-  integrity sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==
+  integrity sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -5232,9 +5232,9 @@ fs.realpath@^1.0.0:
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@^2.3.2, fsevents@~2.3.2:
-  version "2.3.2"
+  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
   version "1.1.1"