From 64e59921a9ff6343b2d23bad8dda89f674262560 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 5 Oct 2022 23:36:55 +1100
Subject: [PATCH] feat: themed password window

---
 password_preload.js                     |  3 ++-
 ts/components/SessionPasswordPrompt.tsx | 24 ++++++++++++++----------
 ts/mains/password_start.tsx             |  8 +-------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/password_preload.js b/password_preload.js
index 76d3c6ff9..7134be51a 100644
--- a/password_preload.js
+++ b/password_preload.js
@@ -11,7 +11,8 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 window.React = require('react');
 window.ReactDOM = require('react-dom');
 
-window.theme = config.theme;
+// If the app is locked we can't access the database to check the theme.
+window.theme = 'classic-dark';
 window.i18n = i18n.setupi18n(locale, localeMessages);
 
 window.getEnvironment = () => config.environment;
diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx
index 1f05bcc97..74f18dd7b 100644
--- a/ts/components/SessionPasswordPrompt.tsx
+++ b/ts/components/SessionPasswordPrompt.tsx
@@ -5,11 +5,9 @@ import { SessionIcon } from './icon';
 import autoBind from 'auto-bind';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SessionSpinner } from './basic/SessionSpinner';
-import {
-  SessionTheme,
-  switchHtmlToDarkTheme,
-  switchHtmlToLightTheme,
-} from '../themes/SessionTheme';
+import { SessionTheme } from '../themes/SessionTheme';
+import { switchThemeTo } from '../session/utils/Theme';
+import styled from 'styled-components';
 
 interface State {
   error: string;
@@ -27,6 +25,12 @@ const TextPleaseWait = (props: { isLoading: boolean }) => {
   return <div>{window.i18n('pleaseWaitOpenAndOptimizeDb')}</div>;
 };
 
+const StyledContent = styled.div`
+  background-color: var(--background-primary-color);
+  height: 100%;
+  width: 100%;
+`;
+
 class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
   private inputRef?: any;
 
@@ -216,16 +220,16 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
 
 export const SessionPasswordPrompt = () => {
   useEffect(() => {
-    if ((window as any).theme === 'dark') {
-      switchHtmlToDarkTheme();
-    } else {
-      switchHtmlToLightTheme();
+    if ((window as any).theme) {
+      void switchThemeTo((window as any).theme, null, false);
     }
   }, []);
 
   return (
     <SessionTheme>
-      <SessionPasswordPromptInner />
+      <StyledContent>
+        <SessionPasswordPromptInner />
+      </StyledContent>
     </SessionTheme>
   );
 };
diff --git a/ts/mains/password_start.tsx b/ts/mains/password_start.tsx
index ba2e70c35..fc12c504b 100644
--- a/ts/mains/password_start.tsx
+++ b/ts/mains/password_start.tsx
@@ -3,11 +3,5 @@
 
 import React from 'react';
 import { SessionPasswordPrompt } from '../components/SessionPasswordPrompt';
-import { SessionTheme } from '../themes/SessionTheme';
 
-window.ReactDOM.render(
-  <SessionTheme>
-    <SessionPasswordPrompt />
-  </SessionTheme>,
-  document.getElementById('root')
-);
+window.ReactDOM.render(<SessionPasswordPrompt />, document.getElementById('root'));