From 4e5ff8b2c4f71255537d9c897053c8fa0dfb78df Mon Sep 17 00:00:00 2001 From: Tim Date: Sun, 11 Jun 2023 20:56:48 +0200 Subject: [PATCH] refactor: style navbars --- images/stremio_symbol.png | Bin 7313 -> 16502 bytes src/App/styles.less | 7 +- .../HorizontalNavBar/HorizontalNavBar.js | 48 +++++------ .../HorizontalNavBar/SearchBar/SearchBar.js | 4 +- .../HorizontalNavBar/SearchBar/styles.less | 26 ++---- .../NavBar/HorizontalNavBar/styles.less | 78 ++++++++---------- .../NavTabButton/NavTabButton.js | 2 +- .../VerticalNavBar/NavTabButton/styles.less | 52 ++++++++---- src/common/NavBar/VerticalNavBar/styles.less | 12 ++- 9 files changed, 118 insertions(+), 111 deletions(-) diff --git a/images/stremio_symbol.png b/images/stremio_symbol.png index 11093da311ac236ba86fcbfdf4fcea6fec3c91cd..28d3ccb4e1c64006152b4945c5826172084fb75a 100644 GIT binary patch literal 16502 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 W_|kVc8oV)@gat;D62LO*o? diff --git a/src/App/styles.less b/src/App/styles.less index 2e9a96014..2c883bae4 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -17,14 +17,17 @@ --landscape-shape-ratio: 0.5625; --poster-shape-ratio: 1.464; --scroll-bar-size: 6px; - --horizontal-nav-bar-size: 4rem; - --vertical-nav-bar-size: 5.2rem; + --horizontal-nav-bar-size: 5.5rem; + --vertical-nav-bar-size: 6rem; --focus-outline-size: 2px; --color-facebook: #4267b2; --color-twitter: #1DA1F2; --color-placeholder: #60606080; --color-placeholder-text: @color-surface-50; --color-placeholder-background: @color-surface-dark5-20; + --primary-foreground-color: rgba(255, 255, 255, 1); + --primary-overlay-color: rgba(255, 255, 255, 0.1); + --primary-accent-color: rgb(123, 91, 245); } * { diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js index ff1c0cc8a..2deb5f76b 100644 --- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js +++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js @@ -45,36 +45,36 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto : null } -
{ searchBar ? : null } -
- { - addonsButton ? - - : - null - } - { - fullscreenButton ? - - : - null - } - { - navMenu ? - - : - null - } +
+ { + addonsButton ? + + : + null + } + { + fullscreenButton ? + + : + null + } + { + navMenu ? + + : + null + } +
); }); diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js index 261a24b93..ee437c00d 100644 --- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js +++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js @@ -60,7 +60,7 @@ const SearchBar = ({ className, query, active }) => {
} ); @@ -80,7 +80,7 @@ const SearchBarFallback = ({ className }) => {
{ t('SEARCH_OR_PASTE_LINK') }
); diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less index 9930bbb02..0951701bf 100644 --- a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less @@ -3,16 +3,12 @@ @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; .search-bar-container { - --search-bar-size: calc(var(--horizontal-nav-bar-size) - 1.2rem); + --search-bar-size: 3.25rem; display: flex; flex-direction: row; height: var(--search-bar-size); border-radius: var(--search-bar-size); - background-color: @color-background-light2; - - &:hover { - background-color: @color-background-light3; - } + background-color: var(--primary-overlay-color); .search-input { flex: 1; @@ -20,15 +16,16 @@ display: flex; flex-direction: row; align-items: center; - padding: 0 0.5rem 0 1.5rem; + padding: 0 0.5rem 0 2rem; font-weight: 500; - color: @color-secondaryvariant1-light1; + color: var(--primary-foreground-color); cursor: text; &::placeholder, .placeholder-label { max-height: 1.2em; opacity: 1; - color: @color-secondaryvariant1-light1-90; + color: var(--primary-foreground-color); + opacity: 0.6; } } @@ -38,20 +35,15 @@ flex-direction: row; justify-content: center; align-items: center; - width: var(--search-bar-size); height: var(--search-bar-size); - - &:hover { - .icon { - color: @color-secondaryvariant2-light1-90; - } - } + padding: 0 1.5rem; .icon { flex: none; width: 1.7rem; height: 1.7rem; - color: @color-secondaryvariant1-90; + color: var(--primary-foreground-color); + opacity: 0.6; } } } \ No newline at end of file diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 5119cc13c..10a14ee5c 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -7,9 +7,10 @@ display: flex; flex-direction: row; align-items: center; + justify-content: space-between; height: var(--horizontal-nav-bar-size); padding-right: 1rem; - background-color: @color-background; + background-color: transparent; overflow: visible; .logo-container { @@ -30,8 +31,8 @@ } } - .spacing { - flex: 1 0 0; + .back-button-container { + margin-left: 1rem; } .title { @@ -44,19 +45,18 @@ white-space: nowrap; text-overflow: ellipsis; color: @color-secondaryvariant2-light1-90; - - &+.spacing { - display: none; - } } .search-bar { - flex: 2 0 9.5rem; - max-width: 30rem; + height: 3.25rem; + width: 30rem; + } - &+.spacing { - max-width: 11rem; - } + .buttons-container { + display: flex; + flex-direction: row; + gap: 0.5rem; + overflow: visible; } .button-container { @@ -64,31 +64,27 @@ display: flex; align-items: center; justify-content: center; - width: var(--horizontal-nav-bar-size); - height: var(--horizontal-nav-bar-size); - - &.back-button-container { - width: var(--vertical-nav-bar-size); - height: var(--horizontal-nav-bar-size); - } - - &:hover { - background-color: @color-background-light2; - } - - &:global(.active) { - background-color: @color-background-light3; - - .icon { - color: @color-surface-light5-90; - } - } + width: 3.5rem; + height: 3.5rem; + border-radius: 0.75rem; + opacity: 0.4; .icon { flex: none; - width: 1.7rem; - height: 1.7rem; - color: @color-secondaryvariant2-light1-90; + width: 2rem; + height: 2rem; + color: var(--primary-foreground-color); + opacity: 0.6; + } + + &:hover, &:global(.active) { + background-color: var(--primary-overlay-color); + opacity: 1; + + .icon { + color: var(--primary-foreground-color); + opacity: 0.8; + } } } } @@ -102,16 +98,12 @@ width: var(--horizontal-nav-bar-size); } - .search-bar { - margin: 0 0.5rem; - } + .button-container { + margin: 0 1rem; - .spacing { - display: none; - } - - .button-container:not(.back-button-container):not(.menu-button-container) { - display: none; + &:not(.back-button-container):not(.menu-button-container) { + display: none; + } } } } \ No newline at end of file diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js index c31c3171f..6971398b6 100644 --- a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js +++ b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js @@ -27,7 +27,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick }) /> : typeof icon === 'string' && icon.length > 0 ? - + : null } diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less index 73ec34953..f8184f650 100644 --- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less +++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less @@ -1,50 +1,66 @@ // Copyright (C) 2017-2022 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; +@import (reference) '~stremio/common/screen-sizes.less'; .nav-tab-button-container { display: flex; flex-direction: column; align-items: center; justify-content: center; - background-color: @color-background-dark1; + background-color: transparent; + border-radius: 0.75rem; &:hover { - background-color: @color-background-light2; + background-color: var(--primary-overlay-color); + + .label { + opacity: 0.6; + } } &:global(.selected) { - background-color: @color-secondaryvariant1-dark5; - - &:hover { - background-color: @color-secondaryvariant1-dark4; - } - .icon { - color: @color-surface-light5-90; - } - - .label { - color: @color-surface-light5-90; + opacity: 1; + color: var(--primary-accent-color); } } .icon, .logo { flex: none; - width: 1.7rem; - height: 1.7rem; + width: 2.2rem; + height: 2.2rem; margin-bottom: 0.5rem; - color: @color-secondary-light5-90; + } + + .icon { + color: var(--primary-foreground-color); + opacity: 0.2; } .label { flex: none; max-height: 2.4em; padding: 0 0.2rem; - font-size: 0.9rem; + font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01rem; text-align: center; - color: @color-secondaryvariant1-90; + color: var(--primary-foreground-color); + opacity: 0; + } +} + +@media only screen and (max-width: @minimum) { + .nav-tab-button-container { + .label { + opacity: 0.2; + } + + &:global(.selected) { + .label { + opacity: 0.6; + } + } } } \ No newline at end of file diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less index a601d2071..9d7225640 100644 --- a/src/common/NavBar/VerticalNavBar/styles.less +++ b/src/common/NavBar/VerticalNavBar/styles.less @@ -4,8 +4,12 @@ @import (reference) '~stremio/common/screen-sizes.less'; .vertical-nav-bar-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; width: var(--vertical-nav-bar-size); - background-color: @color-background-dark1; + background-color: transparent; overflow-y: auto; scrollbar-width: none; @@ -14,8 +18,8 @@ } .nav-tab-button { - width: var(--vertical-nav-bar-size); - height: var(--vertical-nav-bar-size); + width: calc(var(--vertical-nav-bar-size) - 1.5rem); + height: calc(var(--vertical-nav-bar-size) - 1.5rem); &:first-child { margin-top: 1rem; @@ -29,11 +33,11 @@ @media only screen and (max-width: @minimum) { .vertical-nav-bar-container { - display: flex; flex-direction: row; justify-content: space-between; height: var(--vertical-nav-bar-size); width: 100%; + padding: 0 1rem; overflow-y: hidden; overflow-x: auto;