diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss deleted file mode 100644 index 9cf738cb7..000000000 --- a/stylesheets/_session_password.scss +++ /dev/null @@ -1,104 +0,0 @@ -.password { - height: 100vh; - color: var(--white-color); //TODO theming update - - .clear-data-wrapper { - display: flex; - height: 100%; - width: 100%; - background-color: var(--black-color); - - .clear-data-container { - margin: auto; - } - - .warning-info-area { - display: flex; - flex-direction: column; - align-items: center; - } - - .button-group { - display: flex; - justify-content: space-around; - } - } - - .password-prompt { - &-wrapper { - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - height: 100%; - - padding: calc(3 * var(--margins-lg)); - } - - &-error-section { - width: 100%; - color: var(--text-primary-color); - margin: var(--margins-sm); - - .session-label { - padding: var(--margins-xs) var(--margins-sm); - text-align: center; - } - } - - &-container { - font-family: $session-font-default; - color: var(--text-primary-color); - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 600px; - min-width: 420px; - padding: calc(3 * var(--margins-lg)) calc(2 * var(--margins-lg)); - box-sizing: border-box; - background-color: var(--background-secondary-color); - border: 1px solid var(--border-color); - border-radius: 2px; - - .warning-info-area, - .password-info-area { - display: inline-flex; - justify-content: center; - align-items: center; - - h1 { - color: var(--text-primary-color); - } - svg { - margin-inline-end: var(--margins-lg); - } - } - - p, - input { - margin: var(--margins-lg) 0px; - } - - .button-group { - display: inline-flex; - } - - #password-prompt-input { - width: 65%; - 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: 1px solid var(--border-color); - border-radius: 7px; - text-align: center; - font-size: 18px; - font-family: $session-font-default; - } - } - } -} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index b1f694233..e660524f3 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -34,7 +34,6 @@ // Separate screens @import 'session_signin'; -@import 'session_password'; @import 'session_theme'; @import 'session_left_pane'; diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index cffa02d2f..c0c48d08f 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/ts/components/SessionPasswordPrompt.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react'; import classNames from 'classnames'; -import { SessionIcon } from './icon'; import autoBind from 'auto-bind'; import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton'; import { SessionSpinner } from './basic/SessionSpinner'; @@ -11,6 +10,7 @@ import styled from 'styled-components'; import { ToastUtils } from '../session/utils'; import { isString } from 'lodash'; import { SessionToastContainer } from './SessionToastContainer'; +import { SessionWrapperModal } from './SessionWrapperModal'; interface State { errorCount: number; @@ -29,7 +29,7 @@ const TextPleaseWait = (props: { isLoading: boolean }) => { }; const StyledContent = styled.div` - background-color: var(--background-primary-color); + background-color: var(--background-secondary-color); height: 100%; width: 100%; `; @@ -57,56 +57,36 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { public render() { const isLoading = this.state.loading; - - const wrapperClass = this.state.clearDataView - ? 'clear-data-wrapper' - : 'password-prompt-wrapper'; - const containerClass = this.state.clearDataView - ? 'clear-data-container' - : 'password-prompt-container'; - const infoAreaClass = this.state.clearDataView ? 'warning-info-area' : 'password-info-area'; - const infoTitle = this.state.clearDataView - ? window.i18n('clearDevice') - : window.i18n('passwordViewTitle'); - const buttonGroup = this.state.clearDataView - ? this.renderClearDataViewButtons() - : this.renderPasswordViewButtons(); + const spinner = isLoading ? : null; const featureElement = this.state.clearDataView ? ( -

{window.i18n('deleteAccountFromLogin')}

+

{window.i18n('deleteAccountFromLogin')}

) : ( - { - this.inputRef = input; - }} - /> - ); - const infoIcon = this.state.clearDataView ?? ( - +
+ { + this.inputRef = input; + }} + /> +
); - const spinner = isLoading ? : null; - return ( -
-
-
-
- {infoIcon} - -

{infoTitle}

-
- {spinner || featureElement} - - - {buttonGroup} -
-
-
+ + {spinner || featureElement} + + {this.state.clearDataView + ? this.renderClearDataViewButtons() + : this.renderPasswordViewButtons()} + ); } @@ -168,7 +148,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { const showResetElements = this.state.errorCount >= MAX_LOGIN_TRIES; return ( -
+
{showResetElements && ( <> { /> )} - {/* TODO Theming - Fix */} { private renderClearDataViewButtons(): JSX.Element { return ( -
+
{ await showMainWindow(passPhrase, passwordAttempt); sendResponse(undefined); } catch (e) { - const localisedError = locale.messages.invalidPassword; - sendResponse(localisedError || 'Invalid password'); + const localisedError = locale.messages.removePasswordInvalid; + sendResponse(localisedError); } }); diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index babdca503..946909d0b 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -489,7 +489,6 @@ export const SessionGlobalStyles = createGlobalStyle` --border-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; /* Text Box */ - /* Also used for inputs specifically password box input */ --text-box-background-color: var(--background-primary-color); --text-box-text-control-color: var(--text-secondary-color); --text-box-text-user-color: var(--text-primary-color);