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

Merge pull request #1269 from lbryio/dark

Browse source 
Dark
This commit is contained in:
Sean Yesmunt 2018-04-17 02:32:41 -04:00 committed by GitHub
commit baff4e3c61
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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')}

10
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
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);
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;
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;
}

100
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 */
--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);
/* Text */
--text-color: #FFF;
--text-selection-bg: rgba(0,150,136, 0.95);
--text-help-color: var(--color-help);
--text-selection-color: #fff;
/* Form */
--form-label-color: rgba(255, 255, 255, 0.70);
--form-label-color: #FFF;
/* Input */
--input-bg: transparent;
--input-border-color: rgba(255,255,255, 0.70);
--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:placeholder */
--input-placeholder-color: rgba(255,255,255, 0.5);
--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-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-active-color: var(--color-white);
--header-button-hover-bg: var(--color-bg-alt);
/* 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;
/* Nav */
--nav-color: #44548F;
--nav-bg-color: #0D102F;
/* Table */
--table-border: 0;
--table-item-even: var(--color-bg-alt);
--table-item-odd: transparent;
--table-border: 1px solid var(--color-bg-alt);
--table-item-odd: var(--color-bg-alt);
/* 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-overlay-bg: var(--color-dark-overlay);
--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: rgba(255, 255, 255, 0.35);
/* Divider */
--divider: 1px solid rgba(255, 225, 225, 0.12);
--scrollbar-thumb-hover-bg: #8696AF;
}