diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 5909c54c5..ab5c0a065 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -582,6 +582,7 @@ label { height: 100vh; display: flex; flex-direction: column; + background-color: var(--background-secondary-color); &__password-lock { display: flex; @@ -598,21 +599,22 @@ label { max-width: 90%; width: 600px; - background: var(--color-cell-background); - color: var(--color-text); + background: var(--background-primary-color); + color: var(--text-primary-color); - border: 1px solid var(--color-darker-gray-color); + border: 1px solid var(--border-color); border-radius: 5px; } } } +// TODO Theming #qr svg, .qr-image svg { width: $session-modal-size-sm; height: $session-modal-size-sm; padding: var(--margins-xs); - background-color: var(--color-white-color); + background-color: var(--white-color); border-radius: 3px; } diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index fadee22b5..ac5c63d53 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -84,18 +84,22 @@ const SessionInfo = () => { const StyledPasswordInput = styled.input` width: 100%; - background: var(--color-input-background); - color: var(--color-text); + background: var(--text-box-background-color); + color: var(--text-box-text-user-color); padding: var(--margins-xs) var(--margins-md); margin-bottom: 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; font-family: var(--font-default); + + ::placeholder { + color: var(--text-box-text-control-color); + } `; const StyledH3 = styled.h3` diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx index 42f8f8c01..bfcbef88a 100644 --- a/ts/components/settings/SessionSettingsHeader.tsx +++ b/ts/components/settings/SessionSettingsHeader.tsx @@ -11,7 +11,7 @@ const StyledSettingsHeader = styled.div` justify-content: center; align-items: center; height: var(--main-view-header-height); - background: var(--color-cell-background); + border-bottom: 1px solid var(--border-color); `; const StyledHeaderTittle = styled.div` diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index c188abdbe..d7adb2afb 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -485,6 +485,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming Clarify what those transparent colors mean */ /* Text Box */ + /* Also used for inputs specifically password box input */ --text-box-background-color: var(--background-primary-color); --text-box-text-control-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; --text-box-text-user-color: var(--text-primary-color);