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

refactor: finished converting sass colors in _session_slider.scss

Browse Source 
consolidated transparent and gray colors, success color should be dropped to text color in future
pull/2521/head
William Grant 3 years ago
parent 9268fd7186
commit db951a4128
13 changed files with 44 additions and 49 deletions
Show Stats Download Patch File Download Diff File

2
stylesheets/_global.scss
Unescape Escape View File

@ -68,7 +68,7 @@ button {
} }
button.grey { button.grey {
border-radius: $border-radius; border-radius: $border-radius;
border: solid 1px #ccc; border: solid 1px var(--color-light-gray-color);
cursor: pointer; cursor: pointer;
margin: 1em auto; margin: 1em auto;
padding: 1em; padding: 1em;

5
stylesheets/_modules.scss
Unescape Escape View File

@ -819,8 +819,9 @@
height: 48px; height: 48px;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0), var(--color-transparent-color),
rgba(0, 0, 0, 0) 9%, /* TODO does this work */
var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.6)
); );
position: absolute; position: absolute;

12
stylesheets/_session.scss
Unescape Escape View File

@ -91,7 +91,7 @@ textarea {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: var(--default-duration); transition: var(--default-duration);
background-color: rgba(0, 0, 0, 0); background-color: var(--color-transparent-color);
&.disabled { &.disabled {
cursor: default; cursor: default;
@ -138,7 +138,8 @@ textarea {
background-color: $session-color-secondary; background-color: $session-color-secondary;
} }
&.success { &.success {
background-color: $session-color-success; /* TODO is this correct? */
background-color: var(--color-text);
} }
&.danger { &.danger {
background-color: var(--color-destructive); background-color: var(--color-destructive);
@ -238,8 +239,8 @@ textarea {
background-color: $session-color-secondary; background-color: $session-color-secondary;
} }
&.success { &.success {
background-color: $session-color-success; /* TODO is this correct? */
} background-color: var(--color-text); }
&.danger { &.danger {
background-color: var(--color-destructive); background-color: var(--color-destructive);
} }
@ -396,7 +397,8 @@ label {
border-left: 4px solid $color; border-left: 4px solid $color;
} }
&--success { &--success {
@include set-toast-theme($session-color-success); /* TODO is this correct? */
@include set-toast-theme(var(--color-session-green-color));
} }
&--info { &--info {
@include set-toast-theme($session-color-info); @include set-toast-theme($session-color-info);

1
stylesheets/_session_constants.scss
Unescape Escape View File

@ -113,7 +113,6 @@ $session-shade-18: #141414;
// Semantic Colors // Semantic Colors
$session-color-info: $session-shade-11; $session-color-info: $session-shade-11;
$session-color-success: #35d388;
$session-color-error: #edd422; $session-color-error: #edd422;
$session-color-warning: var(--color-light-gray-color); $session-color-warning: var(--color-light-gray-color);
$session-color-warning-alt: #ff9d00; $session-color-warning-alt: #ff9d00;

4
stylesheets/_session_conversation.scss
Unescape Escape View File

@ -226,7 +226,7 @@
margin-left: 2px; margin-left: 2px;
line-height: $session-font-h2; line-height: $session-font-h2;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: rgba(0, 0, 0, 0); color: var(--color-transparent-color);
} }
} }
} }
@ -436,7 +436,7 @@
/* AUDIO PLAYER */ /* AUDIO PLAYER */
/* ************ */ /* ************ */
$rhap_theme-color: #212121 !default; $rhap_theme-color: #212121 !default;
$rhap_background-color: rgba(0, 0, 0, 0) !default; $rhap_background-color: var(--color-transparent-color) !default;
$rhap_font-family: inherit !default; $rhap_font-family: inherit !default;
.rhap_container, .rhap_container,

2
stylesheets/_session_password.scss
Unescape Escape View File

@ -85,7 +85,7 @@
#password-prompt-input { #password-prompt-input {
width: 100%; width: 100%;
color: #fff; color: var(--color-white-color);
background-color: #2e2e2e; background-color: #2e2e2e;
margin-top: 2 * $session-margin-lg; margin-top: 2 * $session-margin-lg;
padding: var(--margins-xs) var(--margins-lg); padding: var(--margins-xs) var(--margins-lg);

36
stylesheets/_session_slider.scss
Unescape Escape View File

@ -25,11 +25,11 @@
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: var(--color-transparent-color);
} }
.rc-slider * { .rc-slider * {
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: var(--color-transparent-color);
} }
.rc-slider-rail { .rc-slider-rail {
position: absolute; position: absolute;
@ -51,18 +51,18 @@
margin-left: -2.3px; margin-left: -2.3px;
cursor: grab; cursor: grab;
border-radius: 4px; border-radius: 4px;
/* border: solid 2px rgba(0, 247, 130, 0.8); */ /* TODO What should this be? */
background-color: rgba(0, 247, 130, 1); background-color: var(--color-session-green-color);
-ms-touch-action: pan-x; -ms-touch-action: pan-x;
touch-action: pan-x; touch-action: pan-x;
} }
.rc-slider-handle:focus { .rc-slider-handle:focus {
border-color: var(--color-session-green-color); border-color: var(--color-session-green-color);
box-shadow: 0 0 0 5px rgba(white, 0.2); box-shadow: 0 0 0 5px rgba(var(--color-white-color), 0.2);
outline: none; outline: none;
} }
.rc-slider-handle-click-focused:focus { .rc-slider-handle-click-focused:focus {
border-color: rgba(white, 0.2); border-color: rgba(var(--color-white-color), 0.2);
box-shadow: unset; box-shadow: unset;
} }
.rc-slider-handle:hover { .rc-slider-handle:hover {
@ -70,7 +70,7 @@
} }
.rc-slider-handle:active { .rc-slider-handle:active {
border-color: var(--color-session-green-color); border-color: var(--color-session-green-color);
box-shadow: 0 0 5px rgba(white, 0.2); box-shadow: 0 0 5px rgba(var(--color-white-color), 0.2);
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
cursor: grabbing; cursor: grabbing;
} }
@ -87,10 +87,10 @@
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: #999; color: var(--color-light-gray-color);
} }
.rc-slider-mark-text-active { .rc-slider-mark-text-active {
color: #666; color: var(--color-gray-color);
} }
.rc-slider-step { .rc-slider-step {
position: absolute; position: absolute;
@ -118,7 +118,7 @@
margin-right: -2px; margin-right: -2px;
} }
.rc-slider-dot-active { .rc-slider-dot-active {
border-color: #96dbfa; border-color: var(--color-light-blue-color);
} }
.rc-slider-dot-reverse { .rc-slider-dot-reverse {
margin-left: 0; margin-left: 0;
@ -129,9 +129,9 @@
} }
.rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot { .rc-slider-disabled .rc-slider-dot {
border-color: #ccc; border-color: var(--color-light-gray-color);
box-shadow: none; box-shadow: none;
background-color: #fff; background-color: var(--color-white-color);
cursor: not-allowed; cursor: not-allowed;
} }
.rc-slider-disabled .rc-slider-mark-text, .rc-slider-disabled .rc-slider-mark-text,
@ -229,11 +229,11 @@
top: -9999px; top: -9999px;
visibility: visible; visibility: visible;
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: var(--color-transparent-color);
} }
.rc-slider-tooltip * { .rc-slider-tooltip * {
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: var(--color-transparent-color);
} }
.rc-slider-tooltip-hidden { .rc-slider-tooltip-hidden {
display: none; display: none;
@ -247,12 +247,12 @@
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #fff; color: var(--color-white-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: #6c6c6c; background-color: var(--color-gray-color);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9; box-shadow: 0 0 4px var(--color-lighter-gray-color);
} }
.rc-slider-tooltip-arrow { .rc-slider-tooltip-arrow {
position: absolute; position: absolute;
@ -266,5 +266,5 @@
left: 50%; left: 50%;
margin-left: -4px; margin-left: -4px;
border-width: 4px 4px 0; border-width: 4px 4px 0;
border-top-color: #6c6c6c; border-top-color: var(--color-gray-color);
} }

7
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -38,7 +38,7 @@
} }
button.grey { button.grey {
border: solid 1px #ccc; border: solid 1px var(--color-light-gray-color);
color: var(--color-gray-color); color: var(--color-gray-color);
background: var(--color-lightest-gray-color); background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5); box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5);
@ -129,8 +129,9 @@
.module-message__img-overlay { .module-message__img-overlay {
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0), var(--color-transparent-color),
rgba(0, 0, 0, 0) 9%, /* TODO does this work? */
var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.02) 17%, rgba(0, 0, 0, 0.02) 17%,
rgba(0, 0, 0, 0.05) 24%, rgba(0, 0, 0, 0.05) 24%,
rgba(0, 0, 0, 0.08) 31%, rgba(0, 0, 0, 0.08) 31%,

2
stylesheets/_variables.scss
Unescape Escape View File

@ -25,8 +25,6 @@ $color-dark-72: #31343c;
$color-dark-90: #121417; $color-dark-90: #121417;
$color-black-008: rgba(var(--color-black-color), 0.08); $color-black-008: rgba(var(--color-black-color), 0.08);
$color-black-005: rgba(var(--color-black-color), 0.05); $color-black-005: rgba(var(--color-black-color), 0.05);
$color-black-008-no-tranparency: #ededed;
$color-black-016-no-tranparency: #d9d9d9;
$color-black-012: rgba(var(--color-black-color), 0.12); $color-black-012: rgba(var(--color-black-color), 0.12);
$color-black-04: rgba(var(--color-black-color), 0.4); $color-black-04: rgba(var(--color-black-color), 0.4);

2
ts/components/basic/SessionToggle.tsx
Unescape Escape View File

@ -27,7 +27,7 @@ const StyledSessionToggle = styled.div<{ active: boolean }>`
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, 0); background-color: var(--color-transparent-color);
transition: var(--default-duration); transition: var(--default-duration);
background-color: ${props => background-color: ${props =>

2
ts/components/conversation/composition/CompositionBox.tsx
Unescape Escape View File

@ -254,7 +254,7 @@ const StyledSendMessageInput = styled.div`
margin-left: 2px; margin-left: 2px;
line-height: var(--font-size-h2); line-height: var(--font-size-h2);
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: rgba(0, 0, 0, 0); color: var(--color-transparent-color);
} }
`; `;

2
ts/components/lightbox/Lightbox.tsx
Unescape Escape View File

@ -17,7 +17,7 @@ import { isUndefined } from 'lodash';
const Colors = { const Colors = {
TEXT_SECONDARY: '#bbb', TEXT_SECONDARY: '#bbb',
ICON_SECONDARY: '#ccc', ICON_SECONDARY: 'var(--color-light-gray-color)',
}; };
const colorSVG = (url: string, color: string) => { const colorSVG = (url: string, color: string) => {

16
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -33,6 +33,9 @@ const darkGrayColor = '#414347';
const darkerGrayColor = '#2f2f2f'; const darkerGrayColor = '#2f2f2f';
const darkestGrayColor = '#17191d'; const darkestGrayColor = '#17191d';
// Transparent
const transparentColor = 'transparent';
// DARK COLORS // DARK COLORS
const darkColorAccent = accentDarkTheme; const darkColorAccent = accentDarkTheme;
const darkColorAccentButton = accentDarkTheme; const darkColorAccentButton = accentDarkTheme;
@ -387,6 +390,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-darker-gray-color: ${darkerGrayColor}; --color-darker-gray-color: ${darkerGrayColor};
--color-darkest-gray-color: ${darkestGrayColor}; --color-darkest-gray-color: ${darkestGrayColor};
--color-light-blue-color: ${lightBlueColor}; --color-light-blue-color: ${lightBlueColor};
--color-transparent-color: ${transparentColor};
--color-warning: ${warning}; --color-warning: ${warning};
--color-destructive: ${destructive}; --color-destructive: ${destructive};
@ -464,17 +468,7 @@ export const OceanBlueLight: SettingsThemeSwitcherColor = {
received: '#B3EDF2', received: '#B3EDF2',
}; };
export type PrimaryColorIds = export type PrimaryColorIds = 'green' | 'blue' | 'yellow' | 'pink' | 'purple' | 'orange' | 'red';
| 'green'
| 'blue'
| 'yellow'
| 'pink'
| 'purple'
| 'orange'
| 'red'
| 'blue'
| 'blue'
| 'blue';
type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string }; type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string };

Write Preview
Loading…
Cancel
Save