danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 12:55:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[Design] Update colors (follow-up) (#1436)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-09-13 20:02:36 +03:00
parent d677200ec0
commit 0c9fe4643a
13 changed files with 44 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/Audio.tsx
View File

@ -443,10 +443,10 @@ function renderWaveform(
return undefined;
}
const fillColor = theme === 'dark' ? '#494B75' : '#CBCBCB';
const fillOwnColor = theme === 'dark' ? '#C0BBED' : '#B0DEA6';
const progressFillColor = theme === 'dark' ? '#868DF5' : '#54a3e6';
const progressFillOwnColor = theme === 'dark' ? '#FFFFFF' : '#53ad53';
const fillColor = theme === 'dark' ? '#494A78' : '#ADD3F7';
const fillOwnColor = theme === 'dark' ? '#B7ABED' : '#AEDFA4';
const progressFillColor = theme === 'dark' ? '#8774E1' : '#3390EC';
const progressFillOwnColor = theme === 'dark' ? '#FFFFFF' : '#4FAE4E';
const durationFactor = Math.min(duration / AVG_VOICE_DURATION, 1);
const spikesCount = Math.round(MIN_SPIKES + (MAX_SPIKES - MIN_SPIKES) * durationFactor);
const decodedWaveform = decodeWaveform(new Uint8Array(waveform));

6
src/components/left/LeftColumn.scss
View File

@ -8,7 +8,7 @@
.left-header {
height: var(--header-height);
padding: 0.375rem 1.25rem .5rem 0.8125rem;
padding: 0.375rem 1rem .5rem 0.8125rem;
display: flex;
align-items: center;
flex-shrink: 0;
@ -24,10 +24,10 @@
.SearchInput {
margin-left: 0.875rem;
max-width: calc(100% - 3.625rem);
max-width: calc(100% - 3.25rem);
@media (max-width: 600px) {
max-width: calc(100% - 3.375rem);
max-width: calc(100% - 3rem);
}
}

4
src/components/left/main/Chat.scss
View File

@ -80,10 +80,6 @@
}
.info {
.title, .subtitle {
padding-right: .125rem;
}
.subtitle {
margin-top: -.125rem;
}

2
src/components/left/search/LeftSearch.scss
View File

@ -173,7 +173,7 @@
&:focus,
&:hover {
color: var(--color-links-hover);
text-decoration: underline;
}
}

2
src/components/mediaViewer/MediaViewerFooter.scss
View File

@ -94,7 +94,7 @@
&:hover,
&:focus {
color: var(--color-links-hover);
text-decoration: underline;
}
}
}

3
src/components/middle/composer/Composer.scss
View File

@ -36,7 +36,6 @@
> .Button {
flex-shrink: 0;
margin-left: .5rem;
color: var(--color-text-secondary);
@media (max-width: 600px) {
width: 2.875rem;
@ -349,7 +348,7 @@
text-decoration: none;
&:hover, &:active, &:visited {
color: var(--color-links-hover) !important;
text-decoration: underline !important;
}
}

6
src/components/middle/composer/Composer.tsx
View File

@ -875,6 +875,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
<ResponsiveHoverButton
className={buildClassName('bot-commands', isBotCommandMenuOpen && 'activated')}
round
faded
disabled={botCommands === undefined}
color="translucent"
onActivate={handleActivateBotCommandMenu}
@ -887,6 +888,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
<Button
className={symbolMenuButtonClassName}
round
faded
color="translucent"
onClick={isSymbolMenuOpen ? closeSymbolMenu : handleSymbolMenuOpen}
ariaLabel="Choose emoji, sticker or GIF"
@ -899,6 +901,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
<ResponsiveHoverButton
className={isSymbolMenuOpen ? 'activated' : ''}
round
faded
color="translucent"
onActivate={handleActivateSymbolMenu}
ariaLabel="Choose emoji, sticker or GIF"
@ -928,6 +931,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
{withScheduledButton && (
<Button
round
faded
className="scheduled-button"
color="translucent"
onClick={handleAllScheduledClick}
@ -940,6 +944,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
<ResponsiveHoverButton
className={isBotKeyboardOpen ? 'activated' : ''}
round
faded
color="translucent"
onActivate={openBotKeyboard}
ariaLabel="Open bot command keyboard"
@ -951,6 +956,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
<ResponsiveHoverButton
className={isAttachMenuOpen ? 'activated' : ''}
round
faded
color="translucent"
onActivate={openAttachMenu}
ariaLabel="Add an attachment"

2
src/components/middle/message/Message.scss
View File

@ -108,7 +108,6 @@
--color-code: var(--color-code-own);
--color-code-bg: var(--color-code-own-bg);
--color-links: var(--color-own-links);
--color-links-hover: var(--color-own-links);
--meta-safe-area-base: 3.5rem;
--deleting-translate-x: 50%;
--color-text-green: var(--color-accent-own);
@ -534,6 +533,7 @@
.message-content.has-appendix {
--border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}

9
src/components/middle/message/_message-content.scss
View File

@ -124,10 +124,10 @@
.theme-dark .Message.own & {
.text-entity-link {
text-decoration: underline;
text-decoration: underline !important;
&:hover {
text-decoration: none;
text-decoration: none !important;
}
}
}
@ -717,14 +717,13 @@
.text-entity-link {
color: var(--color-links) !important;
text-decoration: none;
text-decoration: none !important;
word-break: break-word;
cursor: pointer;
unicode-bidi: initial;
&:hover, &:active, &:visited {
color: var(--color-links-hover) !important;
text-decoration: underline;
text-decoration: underline !important;
}
}

2
src/components/ui/ListItem.scss
View File

@ -151,7 +151,7 @@
}
.ListItem-button {
padding: .5625rem .6975rem .5625rem .5625rem;
padding: .5625rem;
}
.Avatar {

9
src/components/ui/SearchInput.scss
View File

@ -1,12 +1,11 @@
.SearchInput {
position: relative;
width: 100%;
color: rgba(var(--color-text-secondary-rgb), 0.85);
background-color: var(--color-background-search);
color: rgba(var(--color-text-secondary-rgb), 0.5);
background-color: var(--color-chat-hover);
border: 2px solid var(--color-chat-hover);
border-radius: 1.375rem;
transition: border-color 0.15s ease;
--color-placeholders: rgba(var(--color-text-secondary-rgb), 0.85);
&.with-picker-item {
display: flex;
@ -46,7 +45,7 @@
border-radius: 1.375rem;
background-color: transparent !important;
box-shadow: none !important;
padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(2.625rem - var(--border-width));
padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(2.75rem - var(--border-width));
&::placeholder {
color: var(--color-placeholders);
@ -57,7 +56,7 @@
position: absolute;
top: .5rem;
left: .75rem;
font-size: 1.5rem;
font-size: 1.375rem;
}
.Loading {

20
src/styles/_variables.scss
View File

@ -13,15 +13,15 @@
@return rgb($bm-red, $bm-green, $bm-blue);
}
$color-primary: #268EE9;
$color-primary: #3390EC;
$color-links: #00468D;
$color-links: #3390EC;
$color-placeholders: #A2ACB4;
$color-text-green: #45AF54;
$color-text-green: #4FAE4E;
$color-green: #00C73E;
$color-light-green: #EDFFDF;
$color-light-green: #EEFFDE;
$color-error: #e53935;
@ -41,7 +41,7 @@ $color-borders: #DADCE0;
$color-dividers: #C8C6CC;
$color-item-active: #ededed;
$color-chat-hover: #f4f4f5;
$color-chat-active: #5B90E0;
$color-chat-active: #3390EC;
$color-selection: #3993fb;
// https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants
@ -60,7 +60,6 @@ $color-user-8: #faa774;
--color-background: #{$color-white};
--color-background-selected: #f4f4f5;
--color-background-secondary: #f4f4f5;
--color-background-search: #{$color-white};
--color-background-secondary-accent: #E4E4E5;
--color-background-own: #{$color-light-green};
--color-background-own-selected: #{darken($color-light-green, 10%)};
@ -103,9 +102,6 @@ $color-user-8: #faa774;
--color-yellow: #{$color-yellow};
--color-links: #{$color-links};
--color-links-hover: #{darken($color-links, 8%)};
--color-links-darker: #{darken($color-links, 15%)};
--color-links-darker-hover: #{darken($color-links, 23%)};
--color-own-links: #{$color-white};
@ -126,9 +122,9 @@ $color-user-8: #faa774;
--color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
--color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
--color-background-own-apple: #E7FDCC;
--color-reply-own-hover-apple: #d9f9c1;
--color-reply-own-active-apple: #d5edc2;
--color-background-own-apple: #DCF8C5;
--color-reply-own-hover-apple: #cbefb7;
--color-reply-own-active-apple: #bae6a8;
--color-white: #{$color-white};
--color-gray: #{$color-gray};

22
src/styles/themes.json
View File

@ -1,17 +1,16 @@
{
"--color-primary": ["#268EE9", "#8872DE"],
"--color-primary": ["#3390EC", "#8774E1"],
"--color-primary-opacity": ["#50A2E980", "#8378DB80"],
"--color-primary-shade": ["#4a95d6", "#7b71c6"],
"--color-background": ["#FFFFFF", "#212121"],
"--color-background-search": ["#FFFFFF", "#0F0F0F"],
"--color-background-secondary": ["#f4f4f5", "#0F0F0F"],
"--color-background-secondary-accent": ["#E4E4E5", "#100f10"],
"--color-background-own": ["#EDFFDF", "#8872DE"],
"--color-background-own-apple": ["#E7FDCC", "#8872DE"],
"--color-background-own": ["#EEFFDE", "#8774E1"],
"--color-background-own-apple": ["#DCF8C5", "#8774E1"],
"--color-background-selected": ["#F4F4F5", "#2C2C2C"],
"--color-background-own-selected": ["#d0ffac", "#6549d4"],
"--color-chat-hover": ["#F4F4F5", "#2C2C2C"],
"--color-chat-active": ["#4C90E6", "#8378DB"],
"--color-chat-active": ["#3390EC", "#8774E1"],
"--color-item-active": ["#ededed", "#292929"],
"--color-text": ["#000000", "#FFFFFF"],
"--color-text-secondary": ["#707579", "#AAAAAA"],
@ -19,24 +18,23 @@
"--color-borders": ["#DADCE0", "#303030"],
"--color-borders-input": ["#DADCE0", "#5B5B5A"],
"--color-dividers": ["#C8C6CC", "#404040"],
"--color-links": ["#00468D", "#977CFB"],
"--color-links-hover": ["#003264", "#7854fa"],
"--color-links": ["#3390EC", "#8774E1"],
"--color-gray": ["#C4C9CC", "#717579"],
"--color-pinned": ["#C4C9CC", "#707579"],
"--color-default-shadow": ["#72727240", "#1010109c"],
"--color-light-shadow": ["#7272722B", "#00000040"],
"--color-green": ["#00C73E", "#8872DE"],
"--color-green": ["#00C73E", "#8774E1"],
"--color-text-meta-colored": ["#4DCD5E", "#8378DB"],
"--color-reply-hover": ["#F4F4F4", "#272727"],
"--color-reply-active": ["#E8E9E9", "#2E2F2F"],
"--color-reply-own-hover": ["#D9F5CE", "#7d6bca"],
"--color-reply-own-hover-apple": ["#d9f9c1", "#7d6bca"],
"--color-reply-own-hover-apple": ["#cbefb7", "#7d6bca"],
"--color-reply-own-active": ["#C5ECBE", "#7264b6"],
"--color-reply-own-active-apple": ["#d5edc2", "#7264b6"],
"--color-reply-own-active-apple": ["#bae6a8", "#7264b6"],
"--color-accent-own": ["#45AF54", "#FFFFFF"],
"--color-message-meta-own": ["#4FAE4EFF", "#FFFFFF88"],
"--color-own-links": ["#19498A", "#FFFFFF"],
"--color-code": ["#4a729a", "#93c4ef"],
"--color-own-links": ["#3390EC", "#FFFFFF"],
"--color-code": ["#4a729a", "#8774E1"],
"--color-code-own": ["#3c7940", "#FFFFFF"],
"--color-code-bg": ["#70757914", "#ffffff26"],
"--color-code-own-bg": ["#70757914", "#ffffff26"]