LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Dark #1269

Merged
btzr-io merged 4 commits from dark into master 2018-04-17 08:32:42 +02:00
Conversation 8 Commits 4 Files changed 17 +209 -133
17 changed files with 209 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -10,14 +10,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
* Build for both architectures (x86 and x64) for Windows ([#1262](https://github.com/lbryio/lbry-app/pull/1262))
* Add referral FAQ to Invites screen([#1314](https://github.com/lbryio/lbry-app/pull/1314))
* Show exact wallet balance on mouse hover over ([#1305](https://github.com/lbryio/lbry-app/pull/1305))
* New dark mode ([#1269](https://github.com/lbryio/lbry-app/pull/1269))
### Changed
* Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))
### Fixed
* Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))
### Fixed
* Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))
* Fix dark theme ([#1034](https://github.com/lbryio/lbry-app/issues/1034))
* Fix download percentage indicator overlay ([#1271](https://github.com/lbryio/lbry-app/issues/1271))
## [0.21.2] - 2018-03-22

1
src/renderer/component/common/icon.jsx
View file

@ -8,7 +8,6 @@ const RED_COLOR = '#e2495e';
type Props = {
icon: string,
size?: number,
};
class IconComponent extends React.PureComponent<Props> {

1
src/renderer/component/header/view.jsx
View file

@ -53,6 +53,7 @@ const Header = (props: Props) => {
<Button
uppercase
button="primary"
className="btn--header-publish"
onClick={() => navigate('/publish')}
icon={icons.UPLOAD}
label={isUpgradeAvailable ? '' : __('Publish')}

12
src/renderer/component/theme/view.jsx
View file

@ -3,15 +3,11 @@ import React from 'react';
const Theme = props => {
const { themePath } = props;
// Force light mode while until dark mode is ready
// This is so we don't have to change users settings for them
return null;
if (!themePath) {
return null;
}
// if (!themePath) {
// return null;
// }
//
// return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
};
export default Theme;

48
src/renderer/page/settings/view.jsx
View file

@ -274,31 +274,29 @@ class SettingsPage extends React.PureComponent<Props, State> {
</div>
</section>
{
// Hiding this for now until we update the dark mode styles
// <section className="card card--section">
// <div className="card__title">{__('Theme')}</div>
// <FormField
// name="theme_select"
// type="select"
// onChange={this.onThemeChange}
// value={currentTheme}
// disabled={automaticDarkModeEnabled}
// >
// {themes.map(theme => (
// <option key={theme} value={theme}>
// {theme}
// </option>
// ))}
// </FormField>
//
// <FormField
// type="checkbox"
// name="automatic_dark_mode"
// onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
// checked={automaticDarkModeEnabled}
// postfix={__('Automatic dark mode (9pm to 8am)')}
// />
// </section>
<section className="card card--section">
<div className="card__title">{__('Theme')}</div>
<FormField
name="theme_select"
type="select"
onChange={this.onThemeChange}
value={currentTheme}
disabled={automaticDarkModeEnabled}
>
{themes.map(theme => (
<option key={theme} value={theme}>
{theme}
</option>
))}
</FormField>
<FormField
type="checkbox"
name="automatic_dark_mode"
onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
checked={automaticDarkModeEnabled}
postfix={__('Automatic dark mode (9pm to 8am)')}
/>
</section>
}
<section className="card card--section">
<div className="card__title">{__('Application Cache')}</div>

6
src/renderer/scss/_gui.scss
View file

@ -95,7 +95,10 @@ input {
border: 1px dashed var(--input-copyable-border);
}
&:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown) {
&:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) {
&:hover {
border-color: var(--input-hover-border-color);
}
border-bottom: var(--input-border-size) solid var(--input-border-color);
}
@ -107,6 +110,7 @@ input {
}
input::placeholder {
color: var(--input-placeholder-color);
neb-b commented 2018-04-12 19:28:56 +02:00 (Migrated from github.com)
Review
Copy link

We shouldn't need an !important here. If there is something that is overriding this style, we should remove that, or make this a more specific rule with classnames

We shouldn't need an `!important` here. If there is something that is overriding this style, we should remove that, or make this a more specific rule with classnames
opacity: 0.5;
}

47
src/renderer/scss/_vars.scss
View file

@ -16,7 +16,7 @@ $large-breakpoint: 1760px;
--video-aspect-ratio: 56.25%; // 9 x 16
--snack-bar-width: 756px;
/* Colors */
/* Colors: Brand */
--color-white: #fff;
--color-black: #000;
--color-grey: #d6d6d6;
@ -34,28 +34,27 @@ $large-breakpoint: 1760px;
--color-green: #399483;
--color-green-light: #effbe4;
--color-green-blue: #2ec1a8;
/* Colors */
--color-divider: #e3e3e3;
--text-color: var(--color-black);
--text-color-inverse: var(--color-white);
--color-dark-overlay: rgba(32, 32, 32, 0.9);
--color-help: rgba(0, 0, 0, 0.54);
--color-error: #a94442;
--color-download: var(--color-white);
--color-download-overlay: var(--color-black);
--color-bg: #fafafa;
--color-bg-alt: var(--color-grey-light);
--color-placeholder: #ececec;
--color-nav-bg: var(--color-grey-light);
--color-placeholder: var(--color-grey);
--color-search-placeholder: var(--color-placeholder);
/* Shadows */
--box-shadow-layer: 0 4px 9px -2px var(--color-grey);
--box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
--box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1);
--box-shadow-wunderbar: 0px 10px 20px rgba(0, 0, 0, 0.03);
--box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
/* Text */
--text-help-color: #eee;
--text-color: var(--color-black);
--text-color-inverse: var(--color-white);
--text-help-color: var(--color-help);
--text-max-width: 660px;
--text-link-padding: 4px;
--text-selection-bg: rgba(saturate(lighten(#155b4a, 20%), 20%), 1); // temp color
@ -70,7 +69,7 @@ $large-breakpoint: 1760px;
--input-color: var(--text-color);
--input-border-size: 1px;
--input-border-color: var(--color-grey-dark);
--input-copyable-bg: var(--color-grey-light);
--input-copyable-bg: #f6f6f6;
--input-copyable-color: var(--color-grey-dark);
--input-copyable-border: var(--color-grey);
@ -80,8 +79,9 @@ $large-breakpoint: 1760px;
/* input:hover */
--input-hover-border-color: rgba(0, 0, 0, 0.87);
/* input:placeholder */
--input-placeholder-color: rgba(0, 0, 0, 0.42);
--input-placeholder-color: var(--color-help);
--input-placeholder-opacity: 1;
/* Select */
@ -99,6 +99,7 @@ $large-breakpoint: 1760px;
--btn-external-color: var(--color-light-blue);
--btn-bg-secondary: var(--color-teal);
--btn-bg-danger: var(--color-red);
--btn-home-bg-color: var(--color-white);
--btn-radius: 20px;
--btn-height: 36px;
@ -113,20 +114,30 @@ $large-breakpoint: 1760px;
--header-height: $spacing-width * 3;
--header-button-bg: transparent;
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
--header-primary-color: var(--color-primary);
/* Header -> search */
--search-color: #666;
--search-bg-color: #fff;
--search-active-bg-color: var(--color-grey-light);
--search-active-color: var(--header-active-color);
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
--search-item-border-color: transparent;
--search-item-active-color: var(--color-black);
--search-modal-input-height: 70px;
/* Nav */
--nav-color: var(--color-grey-dark);
--nav-bg-color: var(--color-grey-light);
/* Table */
--table-border: 1px solid #e2e2e2;
--table-item-even: white;
--table-item-odd: #f4f4f4;
--table-border: 1px solid var(--color-grey-light);
--table-item-odd: var(--color-grey-light);
--table-item-even: transparent;
/* Card */
--card-bg: var(--color-white);
--card-text-color: var(--color-grey-dark);
--card-radius: 2px;
--card-margin: $spacing-vertical * 2/3;
--card-wallet-color: var(--text-color-inverse);
@ -140,8 +151,10 @@ $large-breakpoint: 1760px;
/* Modal */
--modal-width: 440px;
--modal-bg: var(--color-bg);
--modal-overlay-bg: rgba(#f5f5f5, 0.75); // --color-canvas: #F5F5F5
--modal-fullscreen-bg: var(--color-bg);
--modal-overlay-bg: rgba(246, 246, 246, 0.75);
--modal-border: 1px solid rgb(204, 204, 204);
--modal-btn-bg-color: var(--btn-bg-alt);
// /* Tooltip */
--tooltip-width: 300px;

20
src/renderer/scss/component/_button.scss
View file

@ -135,6 +135,7 @@ button:disabled {
*/
.btn.btn--home-nav {
background-color: var(--btn-home-bg-color);
box-shadow: none;
.btn__content {
@ -145,6 +146,10 @@ button:disabled {
.btn.btn--arrow {
width: var(--btn-arrow-width);
&:hover:not(:disabled) {
color: var(--text-color);
}
&:disabled {
opacity: 0.3;
}
@ -158,9 +163,14 @@ button:disabled {
}
}
.btn.btn--header-publish {
background-color: var(--header-primary-color);
}
.btn.btn--header-balance {
font-family: 'metropolis-medium';
font-size: 13px;
color: var(--header-primary-color);
@media only screen and (min-width: $medium-breakpoint) {
font-size: 18px;
@ -171,15 +181,14 @@ button:disabled {
}
.btn__label--balance {
color: var(--color-grey-dark);
color: var(--text-help-color);
&:hover {
color: var(--text-color);
}
}
&:hover {
background-color: transparent;
.btn__label--balance {
color: var(--btn-primary-bg);
}
}
}
@ -188,6 +197,7 @@ button:disabled {
color: var(--color-white);
opacity: 0.8;
border-radius: var(--btn-radius);
width: var(--btn-height);
height: var(--btn-height);
padding: 10px;
}

15
src/renderer/scss/component/_card.scss
View file

@ -10,9 +10,10 @@
}
.card--section {
background-color: var(--color-white);
background-color: var(--card-bg);
padding: $spacing-vertical;
margin-top: $spacing-vertical * 2/3;
box-shadow: var(--box-shadow-layer);
}
.card--small {
@ -49,6 +50,7 @@
color: var(--card-wallet-color);
justify-content: space-between;
.card__title,
.card__subtitle {
color: var(--card-wallet-color);
}
@ -76,10 +78,13 @@
background-color: var(--color-error);
}
.card__title-identity {
color: var(--text-color);
}
.card__title-identity--file {
display: flex;
align-items: center;
.credit-amount,
.icon {
margin-top: $spacing-vertical * 1/3;
@ -95,6 +100,7 @@
.card__title {
font-size: 18px;
color: var(--text-color);
}
.card__title--file {
@ -116,9 +122,9 @@
}
.card__subtitle {
color: var(--color-help);
font-size: 14px;
font-family: 'metropolis-medium';
color: var(--card-text-color);
.icon {
margin-left: $spacing-vertical * 1/3;
@ -175,7 +181,7 @@
}
.card__subtext-title {
color: var(--color-black);
color: var(--text-color);
font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
&:not(:first-of-type) {
@ -184,7 +190,6 @@
}
.card__subtext {
color: var(--color-grey-dark);
font-size: calc(var(--font-size-subtext-multiple) * 1em);
padding-top: $spacing-vertical * 1/3;
word-break: break-word;

3
src/renderer/scss/component/_file-download.scss
View file

@ -5,8 +5,11 @@
.file-download {
position: relative;
background-color: var(--color-black);
border-radius: var(--btn-radius);
color: var(--color-download);
font-size: 12px;
opacity: 0.8;
font-family: 'metropolis-medium';
}

4
src/renderer/scss/component/_form-field.scss
View file

@ -67,11 +67,11 @@
}
.form-field__label {
color: var(--color-black);
color: var(--form-label-color);
}
.form-field__help {
color: var(--color-grey-dark);
color: var(--color-help);
padding-top: $spacing-vertical * 1/3;
}

10
src/renderer/scss/component/_modal.scss
View file

@ -22,7 +22,6 @@
flex-direction: column;
justify-content: center;
align-items: center;
border: var(--modal-border);
background: var(--modal-bg);
overflow: auto;
@ -31,6 +30,11 @@
box-shadow: var(--box-shadow-layer);
max-width: var(--modal-width);
word-break: break-word;
.btn.btn--alt {
// Set modal buttons bg color
background-color: var(--modal-btn-bg-color);
}
}
.modal--fullscreen {
@ -40,7 +44,7 @@
right: 0;
bottom: 0;
btzr-io commented 2018-04-12 20:53:43 +02:00 (Migrated from github.com)
Review
Copy link

@seanyesmunt Not sure if this is the right way to do this, but I don't have time to add a new class to all btn-alt used inside the modal component 😛

@seanyesmunt Not sure if this is the right way to do this, but I don't have time to add a new class to all `btn-alt` used inside the modal component :stuck_out_tongue:
neb-b commented 2018-04-17 00:18:06 +02:00 (Migrated from github.com)
Review
Copy link

I think this is ok for now.

I think this is ok for now.
neb-b commented 2018-04-17 00:18:31 +02:00 (Migrated from github.com)
Review
Copy link

Well, do modals in dark mode not use the regular alt button style?

Well, do modals in dark mode not use the regular alt button style?
btzr-io commented 2018-04-17 03:45:45 +02:00 (Migrated from github.com)
Review
Copy link

@seanyesmunt yes but it's the same color as the background of the modal 🙃,
see: https://design.lbry.io

@seanyesmunt yes but it's the same color as the background of the modal :upside_down_face:, see: https://design.lbry.io
padding: $spacing-vertical;
background: var(--modal-bg);
background: var(--modal-fullscreen-bg);
overflow-y: scroll;
.main {
@ -54,7 +58,7 @@
// Slide down isn't possible without doing a lot of re-work to the modal component
.ReactModal__Overlay {
.modal--fullscreen {
transition: height var(--animation-style) var(--animation-style);
transition: height var(--animation-duration) var(--animation-style);
height: 0;
}

12
src/renderer/scss/component/_nav.scss
View file

@ -1,13 +1,14 @@
.nav {
grid-area: nav;
background-color: var(--color-nav-bg);
background-color: var(--nav-bg-color);
padding: $spacing-width;
color: var(--nav-color);
hr {
width: 24px;
margin: 36px 0;
// width: 40px;
border: solid 1px var(--color-grey);
border: solid 1px var(--color-divider);
margin: $spacing-vertical $spacing-vertical * 2/3;
}
}
@ -28,7 +29,7 @@
.nav__link {
// padding-top: $spacing-vertical / 3;
color: var(--color-grey-dark);
color: inherit;
white-space: nowrap;
.btn__label {
@ -48,7 +49,7 @@
}
.btn:hover {
color: var(--color-black);
color: var(--text-color);
}
}
@ -70,10 +71,11 @@
}
.nav__link--active {
color: var(--color-black);
color: var(--text-color);
}
.nav__sub-links {
color: var(--nav-color);
padding-bottom: $spacing-vertical * 1/3;
}

1
src/renderer/scss/component/_scrollbar.scss
View file

@ -1,5 +1,6 @@
::-webkit-scrollbar {
width: 8px;
height: 8px;
overflow: auto;
}

20
src/renderer/scss/component/_search.scss
View file

@ -31,21 +31,24 @@
border-bottom: none;
&:focus {
background-color: var(--color-bg);
background-color: var(--search-active-bg-color);
border-radius: 0;
border-bottom: 1px solid var(--color-grey);
border-bottom: 1px solid var(--color-divider);
box-shadow: var(--box-shadow-button);
}
}
.wunderbar__menu {
max-width: 100px;
border-radius: 0 0 3px 3px !important;
padding: 0 !important;
background: transparent !important;
overflow-x: hidden;
}
.wunderbar__suggestion {
padding: 5px 10px;
background-color: var(--header-bg);
background-color: var(--search-bg-color);
cursor: pointer;
display: flex;
align-items: center;
@ -53,7 +56,7 @@
font-family: 'metropolis-medium';
&:not(:first-of-type) {
border-top: 1px solid var(--color-divider);
border-top: 1px solid var(--search-item-border-color);
}
}
@ -69,6 +72,7 @@
}
.wunderbar__active-suggestion {
color: var(--search-item-active-color);
background-color: var(--color-secondary);
}
@ -80,10 +84,9 @@
.search__input {
font-family: 'metropolis-bold';
background: var(--color-black);
font-size: var(--search-modal-input-height);
color: var(--color-black);
background: var(--modal-bg);
color: var(--search-color);
background: transparent;
width: 100%;
}
@ -93,5 +96,8 @@
.search-result__column {
flex: 0 0 270px;
.card__media {
background-color: var(--color-search-placeholder);
}
}
}

10
src/renderer/scss/component/_table.scss
View file

@ -15,12 +15,14 @@ table.table {
}
thead {
border-bottom: 1px solid var(--color-grey);
color: var(--text-color);
border-bottom: var(--table-border);
}
th,
td {
font-size: 13px;
padding: 8px 0;
}
th {
@ -29,7 +31,7 @@ table.table {
td {
font-family: 'metropolis-medium';
color: var(--color-grey-dark);
color: var(--color-help);
padding: $spacing-vertical * 1/6 0;
.btn:not(.btn--link) {
@ -48,6 +50,8 @@ table.table {
tbody {
tr {
border-bottom: var(--table-item-border);
padding: 8px 0;
&:nth-child(even):not(.odd) {
background-color: var(--table-item-odd);
}
@ -70,7 +74,7 @@ table.table--stretch {
table.table--help {
td:nth-of-type(1) {
color: var(--color-black);
color: var(--text-color);
font-family: 'metropolis-semibold';
min-width: 130px;
}

126
static/themes/dark.css
View file

@ -1,65 +1,91 @@
:root {
/* Colors */
--color-primary: #009688;
--color-canvas: #0f1517;
--color-bg: #1a2327;
--color-bg-alt: #314048;
--color-help: rgba(255,255,255, 0.5);
--color-error: #a94442;
--color-load-screen-text: #FFF;
--color-money: #1DE9B6;
--color-meta-light: #757575;
--color-dark-overlay: rgba(15, 21, 23, 0.85);
--color-download: rgba(255, 255, 255, 0.75);
/* Colors */
/* Text */
--text-color: #FFF;
--text-selection-bg: rgba(0,150,136, 0.95);
--color-divider: #53637C;;
--color-canvas: transparent;
--color-help: #8696AF;
--color-download: rgba(255, 255, 255, 0.75);
--color-download-overlay: var(--color-black);
--color-bg: #203049;
--color-bg-alt: #13233C;
--color-placeholder: var(--color-bg-alt);
/* Form */
--form-label-color: rgba(255, 255, 255, 0.70);
/* Text */
--text-color: #FFF;
--text-help-color: var(--color-help);
--text-selection-color: #fff;
/* Input */
--input-bg: transparent;
--input-border-color: rgba(255,255,255, 0.70);
--input-hover-border-color: rgba(255, 255, 255, 1);
/* Form */
--form-label-color: #FFF;
/* input:placeholder */
--input-placeholder-color: rgba(255,255,255, 0.5);
/* Input */
--input-bg: transparent;
--input-label-color: var(--color-help);
--input-color: var(--text-color);
--input-border-size: 1px;
--input-border-color: rgba(255,255,255, 0.5);
--input-hover-border-color: rgba(255, 255, 255, 1);
--input-copyable-bg: #203049;
--input-copyable-color: #8696AF;
--input-copyable-border: #53637C;
/* input:disabled */
--input-disabled-color: rgba(255, 255, 255, 0.50);
--input-disabled-border-color: rgba(255, 255, 255, 0.70);
/* input:disabled */
--input-disabled-border-color: rgba(255, 255, 255, 0.42);
--input-disabled-color: rgba(255, 255, 255, 0.54);
/* Search */
--search-bg: rgba(0,0,0, 0.45);
--search-color: #757575;
--search-active-bg: rgba(0,0,0, 0.75);
--search-border: 1px solid rgba(0,0,0, 0.25);
/* Button */
--btn-bg-primary: var(--color-primary);
--btn-color-primary: var(--color-white);
--btn-bg-primary-hover: var(--color-primary-light);
--btn-bg-alt: #13233C;
--btn-color-alt: var(--text-color);
--btn-home-bg-color: #44548F;
/* Tab */
--tab-color: rgba(255,255,255, 0.5) ;
--tab-active-color: rgba(255,255,255, 0.75);
/* Header */
--header-bg: var(--color-white);
--header-color: var(--color-text);
--header-active-color: rgba(0, 0, 0, 0.85);
--header-button-bg: transparent;
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
--header-primary-color: #8165B0;
/* Header */
--header-color: #CCC;
--header-active-color: #FFF;
--header-button-hover-bg: var(--color-bg-alt);
/* Header */
--header-color: #CCC;
--header-active-color: var(--color-white);
--header-button-hover-bg: var(--color-bg-alt);
/* Table */
--table-border: 0;
--table-item-even: var(--color-bg-alt);
--table-item-odd: transparent;
/* Header -> search */
--search-color: var(--color-white);
--search-bg-color: rgb(58, 74, 99);
--search-active-bg-color: #13233C;
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
--search-modal-input-height: 70px;
/* Modal */
--modal-overlay-bg: var(--color-dark-overlay);
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
/* Nav */
--nav-color: #44548F;
--nav-bg-color: #0D102F;
/* Scrollbar */
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
--scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
/* Table */
--table-border: 1px solid var(--color-bg-alt);
--table-item-odd: var(--color-bg-alt);
/* Divider */
--divider: 1px solid rgba(255, 225, 225, 0.12);
/* Card */
--card-bg: #13233C;
--card-radius: 3px;
--card-text-color: var(--color-help);
--card-wallet-color: var(--text-color-inverse);
--success-msg-color: var(--color-primary-light);
--success-msg-border:var(--color-primary);
--success-msg-bg: var(--color-bg);
/* Modal */
--modal-bg: var(--card-bg);
--modal-overlay-bg: rgba(32,48,73, 0.75);
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
--modal-btn-bg-color: #2D3D56;
/* Scrollbar */
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
--scrollbar-thumb-hover-bg: #8696AF;
}