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 {
border-radius: $border-radius;
border: solid 1px #ccc;
border: solid 1px var(--color-light-gray-color);
cursor: pointer;
margin: 1em auto;
padding: 1em;

5
stylesheets/_modules.scss
Unescape Escape View File

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

12
stylesheets/_session.scss
Unescape Escape View File

@ -91,7 +91,7 @@ textarea {
white-space: nowrap;
cursor: pointer;
transition: var(--default-duration);
background-color: rgba(0, 0, 0, 0);
background-color: var(--color-transparent-color);
&.disabled {
cursor: default;
@ -138,7 +138,8 @@ textarea {
background-color: $session-color-secondary;
}
&.success {
background-color: $session-color-success;
/* TODO is this correct? */
background-color: var(--color-text);
}
&.danger {
background-color: var(--color-destructive);
@ -238,8 +239,8 @@ textarea {
background-color: $session-color-secondary;
}
&.success {
background-color: $session-color-success;
}
/* TODO is this correct? */
background-color: var(--color-text); }
&.danger {
background-color: var(--color-destructive);
}
@ -396,7 +397,8 @@ label {
border-left: 4px solid $color;
}
&--success {
@include set-toast-theme($session-color-success);
/* TODO is this correct? */
@include set-toast-theme(var(--color-session-green-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
$session-color-info: $session-shade-11;
$session-color-success: #35d388;
$session-color-error: #edd422;
$session-color-warning: var(--color-light-gray-color);
$session-color-warning-alt: #ff9d00;

4
stylesheets/_session_conversation.scss
Unescape Escape View File

@ -226,7 +226,7 @@
margin-left: 2px;
line-height: $session-font-h2;
letter-spacing: 0.5px;
color: rgba(0, 0, 0, 0);
color: var(--color-transparent-color);
}
}
}
@ -436,7 +436,7 @@
/* AUDIO PLAYER */
/* ************ */
$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_container,

2
stylesheets/_session_password.scss
Unescape Escape View File

@ -85,7 +85,7 @@
#password-prompt-input {
width: 100%;
color: #fff;
color: var(--color-white-color);
background-color: #2e2e2e;
margin-top: 2 * $session-margin-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;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: var(--color-transparent-color);
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: var(--color-transparent-color);
}
.rc-slider-rail {
position: absolute;
@ -51,18 +51,18 @@
margin-left: -2.3px;
cursor: grab;
border-radius: 4px;
/* border: solid 2px rgba(0, 247, 130, 0.8); */
background-color: rgba(0, 247, 130, 1);
/* TODO What should this be? */
background-color: var(--color-session-green-color);
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.rc-slider-handle:focus {
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;
}
.rc-slider-handle-click-focused:focus {
border-color: rgba(white, 0.2);
border-color: rgba(var(--color-white-color), 0.2);
box-shadow: unset;
}
.rc-slider-handle:hover {
@ -70,7 +70,7 @@
}
.rc-slider-handle:active {
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: grabbing;
}
@ -87,10 +87,10 @@
vertical-align: middle;
text-align: center;
cursor: pointer;
color: #999;
color: var(--color-light-gray-color);
}
.rc-slider-mark-text-active {
color: #666;
color: var(--color-gray-color);
}
.rc-slider-step {
position: absolute;
@ -118,7 +118,7 @@
margin-right: -2px;
}
.rc-slider-dot-active {
border-color: #96dbfa;
border-color: var(--color-light-blue-color);
}
.rc-slider-dot-reverse {
margin-left: 0;
@ -129,9 +129,9 @@
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
border-color: var(--color-light-gray-color);
box-shadow: none;
background-color: #fff;
background-color: var(--color-white-color);
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
@ -229,11 +229,11 @@
top: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: var(--color-transparent-color);
}
.rc-slider-tooltip * {
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 {
display: none;
@ -247,12 +247,12 @@
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
color: var(--color-white-color);
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
background-color: var(--color-gray-color);
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
box-shadow: 0 0 4px var(--color-lighter-gray-color);
}
.rc-slider-tooltip-arrow {
position: absolute;
@ -266,5 +266,5 @@
left: 50%;
margin-left: -4px;
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 {
border: solid 1px #ccc;
border: solid 1px var(--color-light-gray-color);
color: var(--color-gray-color);
background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5);
@ -129,8 +129,9 @@
.module-message__img-overlay {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0) 9%,
var(--color-transparent-color),
/* TODO does this work? */
var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.02) 17%,
rgba(0, 0, 0, 0.05) 24%,
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-black-008: rgba(var(--color-black-color), 0.08);
$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-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;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
background-color: var(--color-transparent-color);
transition: var(--default-duration);
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;
line-height: var(--font-size-h2);
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 = {
TEXT_SECONDARY: '#bbb',
ICON_SECONDARY: '#ccc',
ICON_SECONDARY: 'var(--color-light-gray-color)',
};
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 darkestGrayColor = '#17191d';
// Transparent
const transparentColor = 'transparent';
// DARK COLORS
const darkColorAccent = accentDarkTheme;
const darkColorAccentButton = accentDarkTheme;
@ -387,6 +390,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-darker-gray-color: ${darkerGrayColor};
--color-darkest-gray-color: ${darkestGrayColor};
--color-light-blue-color: ${lightBlueColor};
--color-transparent-color: ${transparentColor};
--color-warning: ${warning};
--color-destructive: ${destructive};
@ -464,17 +468,7 @@ export const OceanBlueLight: SettingsThemeSwitcherColor = {
received: '#B3EDF2',
};
export type PrimaryColorIds =
| 'green'
| 'blue'
| 'yellow'
| 'pink'
| 'purple'
| 'orange'
| 'red'
| 'blue'
| 'blue'
| 'blue';
export type PrimaryColorIds = 'green' | 'blue' | 'yellow' | 'pink' | 'purple' | 'orange' | 'red';
type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string };

Write Preview
Loading…
Cancel
Save