oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: added proper theming to password popup 

cleaned up redundant session label options
This commit is contained in:
William Grant 2022-09-19 14:29:49 +10:00
parent a26cbdf4c7
commit 060cbd3bbf
6 changed files with 66 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
password.html
View File

@ -1,5 +1,14 @@
<!DOCTYPE html>
<html> <html>
<head> <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 <meta
http-equiv="Content-Security-Policy" http-equiv="Content-Security-Policy"
content="default-src 'none'; content="default-src 'none';
@ -14,6 +23,7 @@
script-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';
style-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" /> <link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>

18
stylesheets/_session.scss
View File

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

31
stylesheets/_session_password.scss
View File

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

48
ts/components/SessionPasswordPrompt.tsx
View File

@ -1,12 +1,16 @@
import React from 'react'; import React, { useEffect } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionIcon } from './icon'; import { SessionIcon } from './icon';
import { withTheme } from 'styled-components';
import autoBind from 'auto-bind'; import autoBind from 'auto-bind';
import { SessionButton, SessionButtonColor } from './basic/SessionButton'; import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
import { Constants } from '../session';
import { SessionSpinner } from './basic/SessionSpinner'; import { SessionSpinner } from './basic/SessionSpinner';
import {
SessionTheme,
switchHtmlToDarkTheme,
switchHtmlToLightTheme,
} from '../themes/SessionTheme';
import styled from 'styled-components';
interface State { interface State {
error: string; error: string;
@ -17,11 +21,16 @@ interface State {
export const MAX_LOGIN_TRIES = 3; export const MAX_LOGIN_TRIES = 3;
const StyledTextPleaseWait = styled.div`
margin: var(--margins-sm) 0;
font-weight: 700;
`;
const TextPleaseWait = (props: { isLoading: boolean }) => { const TextPleaseWait = (props: { isLoading: boolean }) => {
if (!props.isLoading) { if (!props.isLoading) {
return null; return null;
} }
return <div>{window.i18n('pleaseWaitOpenAndOptimizeDb')}</div>; return <StyledTextPleaseWait>{window.i18n('pleaseWaitOpenAndOptimizeDb')}</StyledTextPleaseWait>;
}; };
class SessionPasswordPromptInner extends React.PureComponent<{}, State> { class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
@ -78,18 +87,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
/> />
); );
const infoIcon = this.state.clearDataView ? ( 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 && ( const errorSection = !this.state.clearDataView && (
<div className="password-prompt-error-section"> <div className="password-prompt-error-section">
{this.state.error && ( {this.state.error && (
<> <>
{showResetElements ? ( {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')}> <div className={classNames(showResetElements && 'button-group')}>
<SessionButton <SessionButton
text={window.i18n('unlock')} text={window.i18n('unlock')}
buttonColor={SessionButtonColor.Primary} buttonType={SessionButtonType.Simple}
onClick={this.initLogin} onClick={this.initLogin}
/> />
{showResetElements && ( {showResetElements && (
@ -182,6 +191,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
<SessionButton <SessionButton
text="Reset Database" text="Reset Database"
buttonColor={SessionButtonColor.Danger} buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={this.initClearDataView} onClick={this.initClearDataView}
/> />
</> </>
@ -196,10 +206,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
<SessionButton <SessionButton
text={window.i18n('clearAllData')} text={window.i18n('clearAllData')}
buttonColor={SessionButtonColor.Danger} buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={window.clearLocalData} onClick={window.clearLocalData}
/> />
<SessionButton <SessionButton
text={window.i18n('cancel')} text={window.i18n('cancel')}
buttonType={SessionButtonType.Simple}
onClick={() => { onClick={() => {
this.setState({ clearDataView: false }); 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>
);
};

2
ts/components/dialog/SessionPasswordDialog.tsx
View File

@ -140,7 +140,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
<> <>
{message && ( {message && (
<> <>
<div className="session-label warning">{message}</div> <div className="session-label danger">{message}</div>
<SpacerLG /> <SpacerLG />
</> </>
)} )}

2
ts/components/settings/SessionSettings.tsx
View File

@ -127,7 +127,7 @@ const PasswordLock = ({
autoFocus={true} autoFocus={true}
/> />
{pwdLockError && <div className="session-label warning">{pwdLockError}</div>} {pwdLockError && <div className="session-label danger">{pwdLockError}</div>}
<SessionButton <SessionButton
buttonType={SessionButtonType.Simple} buttonType={SessionButtonType.Simple}