feat: added proper theming to password popup

cleaned up redundant session label options
2022-09-19 14:29:49 +10:00 · 2022-09-19 14:29:49 +10:00 · 060cbd3bbf
parent a26cbdf4c7
commit 060cbd3bbf
6 changed files with 66 additions and 45 deletions
--- 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>
--- 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);
  }
 }

--- a/stylesheets/_session_password.scss
+++ b/stylesheets/_session_password.scss
@ -22,23 +22,18 @@
      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;
      }
@ -46,7 +41,7 @@

    &-container {
      font-family: $session-font-default;
-      color: white;
+      color: var(--text-primary-color);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
@ -54,10 +49,10 @@

      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;
--- 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,7 +183,7 @@ 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 && (
@ -182,6 +191,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
            <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>
+  );
+};
--- 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 />
          </>
        )}
--- 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}