12d7f24d0f
Introduce new UI and behavior for playing audio attachments in conversations. Previously, playback stopped unexpectedly during window resizes and scrolling through the messages due to the row height recomputation in `react-virtualized`. With this commit we introduce `<GlobalAudioContext/>` instance that wraps whole conversation and provides an `<audio/>` element that doesn't get re-rendered (or destroyed) whenever `react-virtualized` recomputes messages. The audio players (with a freshly designed UI) now share this global `<audio/>` instance and manage access to it using `audioPlayer.owner` state from the redux. New UI computes on the fly, caches, and displays waveforms for each audio attachment. Storybook had to be slightly modified to accomodate testing of Android bubbles by introducing the new knob for `authorColor`.
201 lines
6.7 KiB
SCSS
201 lines
6.7 KiB
SCSS
// Copyright 2015-2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
$inter: Inter, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
|
|
'Source Han Sans CN', 'Hiragino Sans GB', 'Hiragino Kaku Gothic',
|
|
'Microsoft Yahei UI', Helvetica, Arial, sans-serif;
|
|
|
|
// -- V3 Colors
|
|
|
|
$color-accent-blue: #2c6bed;
|
|
$color-accent-green: #4caf50;
|
|
$color-accent-red: #f44336;
|
|
$color-accent-yellow: #ffd624;
|
|
|
|
$color-white: #ffffff;
|
|
$color-gray-02: #f6f6f6;
|
|
$color-gray-05: #e9e9e9;
|
|
$color-gray-15: #dedede;
|
|
$color-gray-20: #c6c6c6;
|
|
$color-gray-25: #b9b9b9;
|
|
$color-gray-45: #848484;
|
|
$color-gray-60: #5e5e5e;
|
|
$color-gray-65: #4a4a4a;
|
|
$color-gray-75: #3b3b3b;
|
|
$color-gray-80: #2e2e2e;
|
|
$color-gray-90: #1b1b1b;
|
|
$color-gray-95: #121212;
|
|
$color-black: #000000;
|
|
|
|
$color-white-alpha-20: rgba($color-white, 0.2);
|
|
$color-white-alpha-40: rgba($color-white, 0.4);
|
|
$color-white-alpha-60: rgba($color-white, 0.6);
|
|
$color-white-alpha-70: rgba($color-white, 0.7);
|
|
$color-white-alpha-80: rgba($color-white, 0.8);
|
|
$color-white-alpha-90: rgba($color-white, 0.9);
|
|
|
|
$color-black-alpha-05: rgba($color-black, 0.05);
|
|
$color-black-alpha-20: rgba($color-black, 0.2);
|
|
$color-black-alpha-40: rgba($color-black, 0.4);
|
|
$color-black-alpha-50: rgba($color-black, 0.5);
|
|
$color-black-alpha-60: rgba($color-black, 0.6);
|
|
$color-black-alpha-80: rgba($color-black, 0.8);
|
|
|
|
$ultramarine-brand-light: #3a76f0;
|
|
$ultramarine-brand-dark: #1851b4;
|
|
$ultramarine-ui-light: #2c6bed;
|
|
$ultramarine-ui-dark: #6191f3;
|
|
|
|
$color-crimson: #cc163d;
|
|
$color-vermilion: #c73800;
|
|
$color-burlap: #746c53;
|
|
$color-forest: #3b7845;
|
|
$color-wintergreen: #1c8260;
|
|
$color-teal: #067589;
|
|
$color-blue: #336ba3;
|
|
$color-indigo: #5951c8;
|
|
$color-violet: #862caf;
|
|
$color-plum: #a23474;
|
|
$color-taupe: #895d66;
|
|
$color-steel: #6b6b78;
|
|
|
|
// Tints and shades
|
|
|
|
// Used for iOS theme and the safety number change warning banner
|
|
$color-ios-blue-tint: #b0c8f9;
|
|
|
|
// Used for scroll down button hover state when it has new messages
|
|
$color-ios-ref-warning-light: #d2def8;
|
|
$color-ios-ref-warning-dark: #7b97cd;
|
|
|
|
$color-crimson-tint: #eda6ae;
|
|
$color-vermilion-tint: #eba78e;
|
|
$color-burlap-tint: #c4b997;
|
|
$color-forest-tint: #8fcc9a;
|
|
$color-wintergreen-tint: #9bcfbd;
|
|
$color-teal-tint: #a5cad5;
|
|
$color-blue-tint: #adc8e1;
|
|
$color-indigo-tint: #c2c1e7;
|
|
$color-violet-tint: #cdaddc;
|
|
$color-plum-tint: #dcb2ca;
|
|
$color-taupe-tint: #cfb5bb;
|
|
$color-steel-tint: #bebec6;
|
|
|
|
$color-crimson-shade: #8a0f29;
|
|
$color-vermilion-shade: #872600;
|
|
$color-burlap-shade: #58513c;
|
|
$color-forest-shade: #2b5934;
|
|
$color-wintergreen-shade: #36544a;
|
|
$color-teal-shade: #055968;
|
|
$color-blue-shade: #285480;
|
|
$color-indigo-shade: #4840a0;
|
|
$color-violet-shade: #6b248a;
|
|
$color-plum-shade: #881b5b;
|
|
$color-taupe-shade: #6a4e54;
|
|
$color-steel-shade: #5a5a63;
|
|
|
|
// Semantic conversation colors
|
|
|
|
$color-conversation-red: $color-crimson;
|
|
$color-conversation-deep_orange: $color-vermilion;
|
|
$color-conversation-brown: $color-burlap;
|
|
$color-conversation-pink: $color-plum;
|
|
$color-conversation-purple: $color-violet;
|
|
$color-conversation-indigo: $color-indigo;
|
|
$color-conversation-blue: $color-blue;
|
|
$color-conversation-teal: $color-teal;
|
|
$color-conversation-green: $color-forest;
|
|
$color-conversation-light_green: $color-wintergreen;
|
|
$color-conversation-blue_grey: $color-taupe;
|
|
$color-conversation-grey: $color-steel;
|
|
$color-conversation-ultramarine: $ultramarine-ui-light;
|
|
|
|
$color-conversation-red-tint: $color-crimson-tint;
|
|
$color-conversation-deep_orange-tint: $color-vermilion-tint;
|
|
$color-conversation-brown-tint: $color-burlap-tint;
|
|
$color-conversation-pink-tint: $color-plum-tint;
|
|
$color-conversation-purple-tint: $color-violet-tint;
|
|
$color-conversation-indigo-tint: $color-indigo-tint;
|
|
$color-conversation-blue-tint: $color-blue-tint;
|
|
$color-conversation-teal-tint: $color-teal-tint;
|
|
$color-conversation-green-tint: $color-forest-tint;
|
|
$color-conversation-light_green-tint: $color-wintergreen-tint;
|
|
$color-conversation-blue_grey-tint: $color-taupe-tint;
|
|
$color-conversation-grey-tint: $color-steel-tint;
|
|
$color-conversation-ultramarine-tint: $color-ios-blue-tint;
|
|
|
|
$color-conversation-red-shade: $color-crimson-shade;
|
|
$color-conversation-deep_orange-shade: $color-vermilion-shade;
|
|
$color-conversation-brown-shade: $color-burlap-shade;
|
|
$color-conversation-pink-shade: $color-plum-shade;
|
|
$color-conversation-purple-shade: $color-violet-shade;
|
|
$color-conversation-indigo-shade: $color-indigo-shade;
|
|
$color-conversation-blue-shade: $color-blue-shade;
|
|
$color-conversation-teal-shade: $color-teal-shade;
|
|
$color-conversation-green-shade: $color-forest-shade;
|
|
$color-conversation-light_green-shade: $color-wintergreen-shade;
|
|
$color-conversation-blue_grey-shade: $color-taupe-shade;
|
|
$color-conversation-grey-shade: $color-steel-shade;
|
|
$color-conversation-ultramarine-shade: $ultramarine-brand-dark;
|
|
|
|
// Maps for easy manipulation
|
|
|
|
$conversation-colors: (
|
|
'red': $color-conversation-red,
|
|
'deep_orange': $color-conversation-deep_orange,
|
|
'brown': $color-conversation-brown,
|
|
'pink': $color-conversation-pink,
|
|
'purple': $color-conversation-purple,
|
|
'indigo': $color-conversation-indigo,
|
|
'blue': $color-conversation-blue,
|
|
'teal': $color-conversation-teal,
|
|
'green': $color-conversation-green,
|
|
'light_green': $color-conversation-light_green,
|
|
'blue_grey': $color-conversation-blue_grey,
|
|
'ultramarine': $color-conversation-ultramarine,
|
|
);
|
|
$conversation-colors-tint: (
|
|
'red': $color-conversation-red-tint,
|
|
'deep_orange': $color-conversation-deep_orange-tint,
|
|
'brown': $color-conversation-brown-tint,
|
|
'pink': $color-conversation-pink-tint,
|
|
'purple': $color-conversation-purple-tint,
|
|
'indigo': $color-conversation-indigo-tint,
|
|
'blue': $color-conversation-blue-tint,
|
|
'teal': $color-conversation-teal-tint,
|
|
'green': $color-conversation-green-tint,
|
|
'light_green': $color-conversation-light_green-tint,
|
|
'blue_grey': $color-conversation-blue_grey-tint,
|
|
'ultramarine': $color-conversation-ultramarine-tint,
|
|
);
|
|
$conversation-colors-shade: (
|
|
'red': $color-conversation-red-shade,
|
|
'deep_orange': $color-conversation-deep_orange-shade,
|
|
'brown': $color-conversation-brown-shade,
|
|
'pink': $color-conversation-pink-shade,
|
|
'purple': $color-conversation-purple-shade,
|
|
'indigo': $color-conversation-indigo-shade,
|
|
'blue': $color-conversation-blue-shade,
|
|
'teal': $color-conversation-teal-shade,
|
|
'green': $color-conversation-green-shade,
|
|
'light_green': $color-conversation-light_green-shade,
|
|
'blue_grey': $color-conversation-blue_grey-shade,
|
|
'ultramarine': $color-conversation-ultramarine-shade,
|
|
);
|
|
|
|
// -- Non-V3 colors
|
|
|
|
// Used in spinners
|
|
$color-white-alpha-40: rgba($color-white, 0.4);
|
|
|
|
// Used in tap-to-view error states
|
|
$color-deep-red: #ff261f;
|
|
|
|
// -- A few layout variables used cross-file
|
|
|
|
$left-pane-width: 320px;
|
|
$header-height: 52px;
|
|
|
|
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
|
|
|
$calling-background-color: $color-gray-95;
|