feat: added proper theming to password popup

cleaned up redundant session label options
winter0019 · Sep 19, 2022 · 060cbd3 · 060cbd3
1 parent a26cbdf
commit 060cbd3
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 45 deletions.
diff --git a/password.html b/password.html
@@ -1,5 +1,14 @@
+<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8" />
+    <meta
+      content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+      name="viewport"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       http-equiv="Content-Security-Policy"
       content="default-src 'none';
@@ -14,6 +23,7 @@
             script-src 'self' 'unsafe-inline';
             style-src 'self' 'unsafe-inline';"
     />
+    <link href="images/sesion/session_icon_128.png" rel="shortcut icon" />
     <link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
   </head>
   <body>

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
@@ -73,27 +73,17 @@ textarea {
 }
 
 .session-label {
-  color: var(--color-white-color);
+  font-weight: 700;
+  color: var(--white-color);
   padding: var(--margins-sm);
   width: 100%;
   border-radius: 2px;
   text-align: center;
   &.primary {
-    background-color: var(--color-dark-gray-color);
-  }
-  &.secondary {
-    background-color: var(--color-darkest-gray-color);
-  }
-  &.success {
-    /* TODO is this correct? */
-    background-color: var(--color-text);
+    background-color: var(--primary-color);
   }
   &.danger {
-    background-color: var(--color-destructive);
-  }
-  /* TODO Is this correct? */
-  &.warning {
-    background-color: var(--color-warning);
+    background-color: var(--danger-color);
   }
 }
 

diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss
@@ -22,42 +22,37 @@
       justify-content: center;
       align-items: center;
 
-      background-color: var(--color-black-color);
-
       width: 100%;
       height: 100%;
 
-      padding: 3 * $session-margin-lg;
+      padding: calc(3 * var(--margins-lg));
     }
 
     &-error-section {
       width: 100%;
-      color: white;
-      margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px;
+      color: var(--text-primary-color);
+      margin: -var(--margins-sm) 0px calc(2 * var(--margins-lg)) 0px;
 
       .session-label {
-        &.primary {
-          background-color: rgba(var(--color-dark-gray-color-rgb), 0.3);
-        }
         padding: var(--margins-xs) var(--margins-sm);
         text-align: center;
       }
     }
 
     &-container {
       font-family: $session-font-default;
-      color: white;
+      color: var(--text-primary-color);
       display: inline-flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
 
       width: 600px;
       min-width: 420px;
-      padding: 3 * $session-margin-lg 2 * $session-margin-lg;
+      padding: calc(3 * var(--margins-lg)) calc(2 * var(--margins-lg));
       box-sizing: border-box;
-      background-color: var(--color-darkest-gray-color);
-      border: 1px solid var(--color-darker-gray-color);
+      background-color: var(--background-secondary-color);
+      border: 1px solid var(--border-color);
       border-radius: 2px;
 
       .warning-info-area,
@@ -67,7 +62,7 @@
         align-items: center;
 
         h1 {
-          color: white;
+          color: var(--text-primary-color);
         }
         svg {
           margin-inline-end: var(--margins-lg);
@@ -85,13 +80,13 @@
 
       #password-prompt-input {
         width: 100%;
-        color: var(--color-white-color);
-        background-color: var(--color-darker-gray-color);
-        margin-top: 2 * $session-margin-lg;
+        background-color: var(--text-box-background-color);
+        color: var(--text-box-text-user-color);
+        margin-top: calc(2 * var(--margins-lg));
         padding: var(--margins-xs) var(--margins-lg);
         outline: none;
-        border: none;
-        border-radius: 2px;
+        border: 1px solid var(--border-color);
+        border-radius: 7px;
         text-align: center;
         font-size: 24px;
         letter-spacing: 5px;

diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 
 import { SessionIcon } from './icon';
-import { withTheme } from 'styled-components';
 import autoBind from 'auto-bind';
-import { SessionButton, SessionButtonColor } from './basic/SessionButton';
-import { Constants } from '../session';
+import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SessionSpinner } from './basic/SessionSpinner';
+import {
+  SessionTheme,
+  switchHtmlToDarkTheme,
+  switchHtmlToLightTheme,
+} from '../themes/SessionTheme';
+import styled from 'styled-components';
 
 interface State {
   error: string;
@@ -17,11 +21,16 @@ interface State {
 
 export const MAX_LOGIN_TRIES = 3;
 
+const StyledTextPleaseWait = styled.div`
+  margin: var(--margins-sm) 0;
+  font-weight: 700;
+`;
+
 const TextPleaseWait = (props: { isLoading: boolean }) => {
   if (!props.isLoading) {
     return null;
   }
-  return <div>{window.i18n('pleaseWaitOpenAndOptimizeDb')}</div>;
+  return <StyledTextPleaseWait>{window.i18n('pleaseWaitOpenAndOptimizeDb')}</StyledTextPleaseWait>;
 };
 
 class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
@@ -78,18 +87,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
       />
     );
     const infoIcon = this.state.clearDataView ? (
-      <SessionIcon iconType="warning" iconSize={35} iconColor="#ce0000" />
+      <SessionIcon iconType="warning" iconSize={35} iconColor="var(--danger-color)" />
     ) : (
-      <SessionIcon iconType="lock" iconSize={35} iconColor={Constants.UI.COLORS.GREEN} />
+      <SessionIcon iconType="lock" iconSize={35} iconColor={'var(--primary-color)'} />
     );
     const errorSection = !this.state.clearDataView && (
       <div className="password-prompt-error-section">
         {this.state.error && (
           <>
             {showResetElements ? (
-              <div className="session-label warning">{window.i18n('maxPasswordAttempts')}</div>
+              <div className="session-label danger">{window.i18n('maxPasswordAttempts')}</div>
             ) : (
-              <div className="session-label primary">{this.state.error}</div>
+              <div className="session-label danger">{this.state.error}</div>
             )}
           </>
         )}
@@ -174,14 +183,15 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
       <div className={classNames(showResetElements && 'button-group')}>
         <SessionButton
           text={window.i18n('unlock')}
-          buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.Simple}
           onClick={this.initLogin}
         />
         {showResetElements && (
           <>
             <SessionButton
               text="Reset Database"
               buttonColor={SessionButtonColor.Danger}
+              buttonType={SessionButtonType.Simple}
               onClick={this.initClearDataView}
             />
           </>
@@ -196,10 +206,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
         <SessionButton
           text={window.i18n('clearAllData')}
           buttonColor={SessionButtonColor.Danger}
+          buttonType={SessionButtonType.Simple}
           onClick={window.clearLocalData}
         />
         <SessionButton
           text={window.i18n('cancel')}
+          buttonType={SessionButtonType.Simple}
           onClick={() => {
             this.setState({ clearDataView: false });
           }}
@@ -209,4 +221,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
   }
 }
 
-export const SessionPasswordPrompt = withTheme(SessionPasswordPromptInner);
+export const SessionPasswordPrompt = () => {
+  useEffect(() => {
+    if ((window as any).theme === 'dark') {
+      switchHtmlToDarkTheme();
+    } else {
+      switchHtmlToLightTheme();
+    }
+  }, []);
+
+  return (
+    <SessionTheme>
+      <SessionPasswordPromptInner />
+    </SessionTheme>
+  );
+};
diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx
@@ -140,7 +140,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
       <>
         {message && (
           <>
-            <div className="session-label warning">{message}</div>
+            <div className="session-label danger">{message}</div>
             <SpacerLG />
           </>
         )}

diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx
@@ -127,7 +127,7 @@ const PasswordLock = ({
           autoFocus={true}
         />
 
-        {pwdLockError && <div className="session-label warning">{pwdLockError}</div>}
+        {pwdLockError && <div className="session-label danger">{pwdLockError}</div>}
 
         <SessionButton
           buttonType={SessionButtonType.Simple}