diff --git a/password.html b/password.html index 3ef0b278b..593a4c1d3 100644 --- a/password.html +++ b/password.html @@ -1,5 +1,14 @@ + + + + + + + diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ab5c0a065..3e1ca5e9b 100644 --- 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 index c3016662e..a8d1153a7 100644 --- 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; diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index 40055805b..0c189af71 100644 --- 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
{window.i18n('pleaseWaitOpenAndOptimizeDb')}
; + return {window.i18n('pleaseWaitOpenAndOptimizeDb')}; }; class SessionPasswordPromptInner extends React.PureComponent<{}, State> { @@ -78,18 +87,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { /> ); const infoIcon = this.state.clearDataView ? ( - + ) : ( - + ); const errorSection = !this.state.clearDataView && (
{this.state.error && ( <> {showResetElements ? ( -
{window.i18n('maxPasswordAttempts')}
+
{window.i18n('maxPasswordAttempts')}
) : ( -
{this.state.error}
+
{this.state.error}
)} )} @@ -174,7 +183,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
{showResetElements && ( @@ -182,6 +191,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { @@ -196,10 +206,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { { 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 ( + + + + ); +}; diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx index 09a8daa39..4bbb8cb03 100644 --- a/ts/components/dialog/SessionPasswordDialog.tsx +++ b/ts/components/dialog/SessionPasswordDialog.tsx @@ -140,7 +140,7 @@ export class SessionPasswordDialog extends React.Component { <> {message && ( <> -
{message}
+
{message}
)} diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index ac5c63d53..78f7b12a3 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -127,7 +127,7 @@ const PasswordLock = ({ autoFocus={true} /> - {pwdLockError &&
{pwdLockError}
} + {pwdLockError &&
{pwdLockError}
}