diff --git a/src/platforms/electron/createWindow.js b/src/platforms/electron/createWindow.js index 584e6d536e4..072a62629b4 100644 --- a/src/platforms/electron/createWindow.js +++ b/src/platforms/electron/createWindow.js @@ -19,6 +19,7 @@ export default appState => { backgroundColor: '#2f9176', minWidth: 950, minHeight: 600, + titleBarStyle: 'hidden', autoHideMenuBar: true, show: false, // Create the window using the state information. diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx index b38463d9a6f..2ef005e9c7b 100644 --- a/src/ui/component/header/view.jsx +++ b/src/ui/component/header/view.jsx @@ -35,14 +35,15 @@ const Header = (props: Props) => { return (
+
- {/*
diff --git a/src/ui/page/discover/view.jsx b/src/ui/page/discover/view.jsx index b5e2b3e2cc7..c52e425688c 100644 --- a/src/ui/page/discover/view.jsx +++ b/src/ui/page/discover/view.jsx @@ -24,7 +24,7 @@ function DiscoverPage(props) { if (personalSort === 'me') { options.any_tags = myTags.map(tag => tag.name); } - if (typeSort === 'best') { + if (typeSort === 'trending') { options.order_by = ['trending_global', 'trending_mixed']; } else if (typeSort === 'new') { options.order_by = ['release_time']; diff --git a/src/ui/scss/component/_file-list.scss b/src/ui/scss/component/_file-list.scss index ebe15940499..e57b42c8083 100644 --- a/src/ui/scss/component/_file-list.scss +++ b/src/ui/scss/component/_file-list.scss @@ -85,7 +85,6 @@ } .file-list__item-title { - font-size: 1.2em; font-weight: 600; } diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss index 5fadc4eb4c4..72154b57c63 100644 --- a/src/ui/scss/component/_header.scss +++ b/src/ui/scss/component/_header.scss @@ -1,8 +1,9 @@ .header { position: fixed; + top: 0; width: 100%; background-color: $lbry-white; - height: var(--header-height); + height: calc(var(--header-height) + 2rem); z-index: 1; border-bottom: 1px solid $lbry-gray-1; } @@ -34,7 +35,7 @@ .header__navigation-arrows { display: flex; - margin-left: -1rem; + margin: 0 var(--spacing-vertical-small); .button__content { justify-content: center; @@ -79,9 +80,8 @@ } .header__navigation-item--back, -.header__navigation-item--forward, -.header__navigation-item--menu { - width: var(--header-height); +.header__navigation-item--forward { + width: 3rem; } .header__navigation-item--lbry { @@ -107,15 +107,6 @@ margin-right: var(--spacing-vertical-large); } -.header__navigation-item--right-action:not(:last-child), -.header__navigation-item--lbry { - // border-right: 1px solid $lbry-gray-1; - - html[data-mode='dark'] & { - // border-right: 1px solid $lbry-gray-5; - } -} - .header__navigation-item--upgrade { background-color: $lbry-teal-5; color: $lbry-white; @@ -128,22 +119,10 @@ } } -.header__navigation-item--menu { - // Add this back once we have an actual menu for mobile - // @media (min-width: 601px) { - display: none; - // } -} - -// Hide links that will live in the menu bar @media (max-width: 600px) { .header__navigation-item--back, .header__navigation-item--forward, .header__navigation-item--right-action { display: none; } - - .header__navigation-item--lbry { - padding: var(--spacing-vertical-medium); - } } diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss index 959db80d7ff..b31b3869f1d 100644 --- a/src/ui/scss/component/_main.scss +++ b/src/ui/scss/component/_main.scss @@ -1,3 +1,10 @@ +.title-bar { + -webkit-app-region: drag; + width: 100%; + height: 2rem; + -webkit-app-region: drag; +} + .main-wrapper { position: absolute; min-height: 100vh; diff --git a/src/ui/scss/component/_tags.scss b/src/ui/scss/component/_tags.scss index 4c656a2dd65..9b06d4dc6f5 100644 --- a/src/ui/scss/component/_tags.scss +++ b/src/ui/scss/component/_tags.scss @@ -27,7 +27,8 @@ $main: $lbry-teal-5; .tag { user-select: none; - display: inline-block; + display: flex; + align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index dab114cdbe7..e386b790e69 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -4,9 +4,11 @@ cursor: text; display: flex; + align-items: center; flex: 1; position: relative; z-index: 1; + margin-right: var(--spacing-main-padding); html[data-mode='dark'] & { border-color: $lbry-gray-5; @@ -38,14 +40,26 @@ .wunderbar__input { width: 100%; - height: 100%; + height: var(--button-height); + border-radius: var(--button-radius); + background-color: $lbry-gray-1; align-items: center; border: none; display: flex; justify-content: center; - padding-left: var(--spacing-vertical-xlarge); - transition: background-color 0.2s; + padding-left: 2.5rem; + transition: all 0.2s; + color: $lbry-black; + + &:focus { + border-radius: var(--input-border-radius); + } + + &::placeholder { + color: $lbry-black; + opacity: 0.7; + } html[data-mode='dark'] & { color: $lbry-white; diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss index 474075a363f..b51ac121a0d 100644 --- a/src/ui/scss/init/_vars.scss +++ b/src/ui/scss/init/_vars.scss @@ -48,7 +48,7 @@ $large-breakpoint: 1921px; --button-height: 2.6rem; // Header - --header-height: 3.5rem; + --header-height: 4.5rem; // Header -> search --search-modal-input-height: 70px;