feat: added proper theming to password popup
cleaned up redundant session label options
This commit is contained in:
parent
a26cbdf4c7
commit
060cbd3bbf
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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 />
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue