diff --git a/password.html b/password.html
index 3ef0b278b..593a4c1d3 100644
--- 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
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 <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>
+ );
+};
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<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
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 && <div className="session-label warning">{pwdLockError}</div>}
+ {pwdLockError && <div className="session-label danger">{pwdLockError}</div>}
<SessionButton
buttonType={SessionButtonType.Simple}