From 291982c2aaa44a89ecd6ef99f4821cdcddcbb7c6 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 25 Aug 2020 15:57:37 +1000 Subject: [PATCH] cleanup css and themify missing stuff --- background.html | 20 ++--- background_test.html | 21 ++--- images/session/full-logo.svg | 64 -------------- images/session/session-text.svg | 45 ++++++++++ index.html | 5 +- password.html | 11 +-- stylesheets/_conversation.scss | 45 +--------- stylesheets/_emoji.scss | 1 + stylesheets/_global.scss | 8 +- stylesheets/_index.scss | 20 ----- stylesheets/_modules.scss | 2 +- stylesheets/_session-slider.scss | 4 +- stylesheets/_session.scss | 29 ++++-- stylesheets/_session_group_panel.scss | 2 +- stylesheets/_session_left_pane.scss | 36 ++++++-- stylesheets/_settings.scss | 123 -------------------------- stylesheets/_theme_dark.scss | 25 ------ stylesheets/_variables.scss | 4 - stylesheets/themes.scss | 6 +- test/index.html | 16 ++-- ts/components/MainViewController.tsx | 9 +- 21 files changed, 145 insertions(+), 351 deletions(-) delete mode 100644 images/session/full-logo.svg create mode 100644 images/session/session-text.svg delete mode 100644 stylesheets/_settings.scss diff --git a/background.html b/background.html index db453bb99..75e898224 100644 --- a/background.html +++ b/background.html @@ -28,16 +28,12 @@ --> - - - @@ -49,8 +44,9 @@
-
- +
@@ -516,8 +512,9 @@
-
- +
diff --git a/images/session/full-logo.svg b/images/session/full-logo.svg deleted file mode 100644 index 01fb1cd36..000000000 --- a/images/session/full-logo.svg +++ /dev/null @@ -1,64 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/images/session/session-text.svg b/images/session/session-text.svg new file mode 100644 index 000000000..0d47d11c0 --- /dev/null +++ b/images/session/session-text.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 2d781b911..305e4e8c1 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,9 @@
-
- +
diff --git a/password.html b/password.html index 05478651e..a399efe5b 100644 --- a/password.html +++ b/password.html @@ -16,7 +16,7 @@ - + @@ -25,10 +25,11 @@
-
- -
+ - +
+ diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index f22f092e7..ad1e0cbab 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -265,7 +265,7 @@ box-shadow: none; user-select: none; cursor: pointer; - transition: 0.25s; + transition: $session-transition-duration; &:hover { background-color: #00d672; @@ -627,49 +627,6 @@ } } -.conversation-loading-screen { - z-index: 99; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - display: flex; - align-items: center; - background-color: $color-white; - - .content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - .container { - position: absolute; - left: 50%; - width: 120px; - transform: translate(-50%, 0); - } - - .dot { - width: 14px; - height: 14px; - border: 3px solid $blue; - border-radius: 50%; - float: left; - margin: 0 6px; - transform: scale(0); - - animation: loading 1500ms ease infinite 0ms; - &:nth-child(2) { - animation: loading 1500ms ease infinite 333ms; - } - &:nth-child(3) { - animation: loading 1500ms ease infinite 666ms; - } - } -} .module-last-seen-indicator { padding-top: 25px; diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss index 65877d987..7b8fcb439 100644 --- a/stylesheets/_emoji.scss +++ b/stylesheets/_emoji.scss @@ -90,6 +90,7 @@ button.emoji { &:before { content: ''; + margin-top: 5px; display: inline-block; width: $button-height; height: $button-height; diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index cc760b179..a3d57229c 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -595,7 +595,7 @@ $loading-height: 16px; width: 100%; height: 100%; background-color: $blue_l; - transition: width 0.25s; + transition: width $session-transition-duration; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } } @@ -808,9 +808,9 @@ $loading-height: 16px; padding: 0 1em; background: $color-dark-85; pointer-events: none; - -webkit-transition: 0.25s all ease; - -o-transition: 0.25s all ease; - transition: 0.25s all ease; + -webkit-transition: $session-transition-duration all ease; + -o-transition: $session-transition-duration all ease; + transition: $session-transition-duration all ease; } } diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index eaee3cdf2..f738f5e5a 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -393,26 +393,6 @@ input.search { } } -.conversation.placeholder { - text-align: center; - user-select: none; - - .container { - position: absolute; - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - } - .content { - display: inline-block; - } - - h3 { - font-size: large; - } -} .contact.placeholder { position: absolute; top: 50px; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 11508487e..085d32668 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -478,7 +478,7 @@ span { opacity: 0.5; - transition: 0.25s; + transition: $session-transition-duration; &:not(.module-message__metadata__badge--separator):hover { opacity: 1; diff --git a/stylesheets/_session-slider.scss b/stylesheets/_session-slider.scss index 74241c942..95a38c086 100644 --- a/stylesheets/_session-slider.scss +++ b/stylesheets/_session-slider.scss @@ -106,7 +106,9 @@ margin-left: -4px; width: 3px; height: 6px; - background-color: $session-shade-6; + @include themify($themes) { + background: themed('clickableHovered'); + } cursor: pointer; border-radius: 2px; vertical-align: middle; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 745e4d10a..a0a5bf08f 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -495,7 +495,9 @@ label { .session-toast { position: relative; padding: $session-margin-md $session-margin-md; - background-color: rgba($session-shade-6, 0.8); + @include themify($themes) { + background: rgba(themed('cellBackground'), 0.8); + } margin-bottom: $session-margin-md; display: flex; flex-direction: row; @@ -530,23 +532,31 @@ label { line-height: $session-font-sm; margin-bottom: $session-margin-sm; padding-top: 0px; - color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + } padding-top: 0px; } .description { font-size: $session-font-xs; - @include session-color-subtle($session-color-white); + @include themify($themes) { + @include session-color-subtle(themed('textColor')); + } } .toast-close { - @include session-color-subtle($session-color-white); + @include themify($themes) { + @include session-color-subtle(themed('textColor')); + } position: absolute; top: $session-margin-md; right: $session-margin-md; &:hover { - color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + } } } @@ -577,7 +587,7 @@ label { @include themify($themes) { background-color: themed('modalBackground'); color: themed('textColor'); - border: 1px solid themed('modalBorder'); + border: 1px solid themed('borderActionPanel'); } overflow: hidden; display: flex; @@ -746,7 +756,7 @@ label { box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); - transition: transform 0.25s ease, background-color 0.25s ease; + transition: transform $session-transition-duration ease, background-color $session-transition-duration ease; } &.active { @@ -770,6 +780,7 @@ label { .react-contextmenu-item { display: flex; align-items: center; + transition: $session-transition-duration; height: 25px; padding: $session-margin-md $session-margin-sm; @@ -826,7 +837,7 @@ label { } &__list-container { - z-index: 200; + z-index: 99; display: block; position: absolute; top: 50px; @@ -1146,11 +1157,11 @@ label { font-size: $session-font-md; padding: $session-margin-lg; margin-bottom: 20px; - border-bottom: 1px solid $session-shade-5; @include themify($themes) { background: themed('cellBackground'); color: themed('textColor'); + border-bottom: themed('borderActionPanel'); } &.inline { display: flex; diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index 41fe3fb4a..e829cbc51 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -82,7 +82,7 @@ .session-button.square-outline.danger { margin-top: auto; width: 100%; - height: 3.5rem; + height: 51px; flex-shrink: 0; align-items: center; @include themify($themes) { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 535f2731f..079b64e77 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -349,13 +349,40 @@ $session-compose-margin: 20px; } } +.conversation.placeholder .container { + display: flex; + height: 100%; +} + .session-full-logo { - width: 250px; - height: 250px; + display: flex; + flex-direction: column; + align-items: center; + margin: auto; + + .session-brand-logo { + height: 215px; + filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg) brightness(106%) contrast(103%); + } + + .session-text-logo { + margin-top: 10px; + width: 250px; + @include themify($themes) { + filter: themed('filterSessionText'); + } + transition: 0s; + } } .app-loading-screen { - @include session-dark-background; + background: #000; + + .session-text-logo { + filter:none !important; // force no filter on the text of the app loading + // as the theme is not set right on the start. + // this is to avoid a text color switch on app loading. + } } @mixin bottom-buttons() { @@ -368,8 +395,7 @@ $session-compose-margin: 20px; .session-button.square-outline.square.white, .session-button.square-outline.square.danger { flex-grow: 1; - height: 50px; - // line-height: 50px; + height: 51px; @at-root .light-theme #{&} { border: 1px solid $session-shade-15; diff --git a/stylesheets/_settings.scss b/stylesheets/_settings.scss deleted file mode 100644 index c229724a2..000000000 --- a/stylesheets/_settings.scss +++ /dev/null @@ -1,123 +0,0 @@ -.settings { - user-select: none; - - &.modal { - padding: 0; - background-color: transparent; - - .content { - margin: 0; - margin-left: auto; - margin-right: auto; - - width: 100%; - max-width: 450px; - border-radius: 0; - box-shadow: 0px 0px 0px 0px; - } - } - hr { - margin: 10px 0; - } - .device-name-settings { - text-align: center; - margin-bottom: 1em; - } - .syncSettings { - button { - float: right; - line-height: 36px; - padding: 0 20px; - margin: 0 0 20px 20px; - } - .synced_at { - font-size: $font-size-small; - color: $grey; - } - .sync_failed { - display: none; - font-size: $font-size-small; - color: red; - } - } - - .blocked-user-settings { - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - } - - .blocked-user-settings { - select { - flex: 1; - cursor: pointer; - font-size: 14px; - } - button { - line-height: 28px; - padding: 0 20px; - margin: auto; - margin-left: 20px; - } - } - - .blocked-user-settings ul { - list-style-type: none; - padding: 0; - margin: 0; - } - - .wordwrap { - white-space: pre-wrap; /* CSS3 */ - white-space: -moz-pre-wrap; /* Firefox */ - white-space: -pre-wrap; /* Opera <7 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* IE */ - } - - .restart-needed { - margin-top: 1em; - } - - .clear-data-settings { - button { - float: right; - line-height: 36px; - padding: 0 20px; - margin: 0 0 20px 20px; - } - .destructive { - background-color: red; - color: white; - } - } - - .message-ttl-setting { - .inputs { - display: flex; - padding-top: 18px; - } - - #warning { - padding-top: 12px; - font-weight: 300; - color: red; - } - - input { - flex: 1; - } - label { - padding-left: 12px; - } - } - - .send-link-previews-setting { - margin-top: 0.75em; - } - .description { - margin-top: 0.3em; - margin-left: 1.5em; - } -} diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 5d3e3f012..b234bf71b 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -111,9 +111,6 @@ body.dark-theme { } } - .conversation-loading-screen { - background-color: $color-gray-95; - } .module-last-seen-indicator__bar { background-color: #353535; @@ -1378,26 +1375,4 @@ body.dark-theme { color: $grey; } } - - // _settings - - hr { - border-color: $color-dark-60; - } - - .syncSettings { - .synced_at { - color: $grey; - } - .sync_failed { - color: red; - } - } - - .clear-data-settings { - .destructive { - background-color: red; - color: white; - } - } } diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index a3643e9ae..b97a6035f 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -25,10 +25,6 @@ $roboto: Roboto, '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; -$roboto-light: Roboto-Light, 'Helvetica Neue', 'Source Sans Pro Light', - 'Source Han Sans SC Light', 'Source Han Sans CN Light', - 'Hiragino Sans GB Light', 'Hiragino Kaku Gothic Light', - 'Microsoft Yahei UI Light', Helvetica, Arial, sans-serif; // Loki colors $color-loki-light-gray: #e9e9e9; diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 76c5a82ab..359300ac3 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -6,10 +6,8 @@ $themes: ( unimportantButtonBackground: #0000, border: #979797, cellBackground: #fcfcfc, - separator: #36383c, buttonBackground: #fcfcfc, modalBackground: #fcfcfc, - modalBorder: #212121, fakeChatBubbleBackground: #f5f5f5, // input inputBackground: #8e8e931f, @@ -47,6 +45,7 @@ $themes: ( pillDividerTextColor: #555, // context menu contextMenuBackground: #f5f5f5, + filterSessionText: brightness(0) saturate(100%), ), dark: ( accent: #00f782, @@ -55,10 +54,8 @@ $themes: ( unimportantButtonBackground: #323232, border: #979797, cellBackground: #1b1b1b, - separator: #36383c, buttonBackground: #1b1b1b, modalBackground: #101011, - modalBorder: #212121, fakeChatBubbleBackground: #212121, // input inputBackground: #8e8e931f, @@ -96,6 +93,7 @@ $themes: ( pillDividerTextColor: #a0a0a0, // context menu contextMenuBackground: #212121, + filterSessionText: none, ), ); diff --git a/test/index.html b/test/index.html index 7e9022a49..fdebdba6d 100644 --- a/test/index.html +++ b/test/index.html @@ -18,14 +18,9 @@
- - @@ -38,8 +33,9 @@
-
- +
diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx index 6b644637e..fa32dc9a4 100644 --- a/ts/components/MainViewController.tsx +++ b/ts/components/MainViewController.tsx @@ -24,12 +24,9 @@ export class MessageView extends React.Component {
-
- full-brand-logo +
+ full-brand-logo + full-brand-logo