Skip to content

Commit

Permalink
Merge pull request #1269 from lbryio/dark
Browse files Browse the repository at this point in the history 
Dark
  • Loading branch information
Sean Yesmunt committed Apr 17, 2018
2 parents dad29b7 + 7495e8a commit baff4e3
Show file tree
Hide file tree
Showing 17 changed files with 209 additions and 133 deletions.
6 changes: 5 additions & 1 deletion CHANGELOG.md
View file
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion src/renderer/component/common/icon.jsx
View file
Expand Up @@ -8,7 +8,6 @@ const RED_COLOR = '#e2495e';

type Props = {
icon: string,
size?: number,
};

class IconComponent extends React.PureComponent<Props> {
Expand Down
1 change: 1 addition & 0 deletions src/renderer/component/header/view.jsx
View file
Expand Up @@ -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')}
Expand Down
12 changes: 4 additions & 8 deletions src/renderer/component/theme/view.jsx
View file
Expand Up @@ -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 changes: 23 additions & 25 deletions src/renderer/page/settings/view.jsx
View file
Expand Up @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion src/renderer/scss/_gui.scss
View file
Expand Up @@ -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);
}

Expand All @@ -107,6 +110,7 @@ input {
}

input::placeholder {
color: var(--input-placeholder-color);
opacity: 0.5;
}

Expand Down
47 changes: 30 additions & 17 deletions src/renderer/scss/_vars.scss
View file
Expand Up @@ -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;
Expand All @@ -34,28 +34,27 @@ $large-breakpoint: 1760px;
--color-green: #399483;
--color-green-light: #effbe4;
--color-green-blue: #2ec1a8;
--color-divider: #e3e3e3;

--text-color: var(--color-black);
--text-color-inverse: var(--color-white);

--color-dark-overlay: rgba(32, 32, 32, 0.9);
/* Colors */
--color-divider: #e3e3e3;
--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
Expand All @@ -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);

Expand All @@ -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 */
Expand All @@ -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;

Expand All @@ -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);
Expand All @@ -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;
Expand Down
20 changes: 15 additions & 5 deletions src/renderer/scss/component/_button.scss
View file
Expand Up @@ -135,6 +135,7 @@ button:disabled {
*/

.btn.btn--home-nav {
background-color: var(--btn-home-bg-color);
box-shadow: none;

.btn__content {
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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);
}
}
}

Expand All @@ -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 changes: 10 additions & 5 deletions src/renderer/scss/component/_card.scss
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -49,6 +50,7 @@
color: var(--card-wallet-color);
justify-content: space-between;

.card__title,
.card__subtitle {
color: var(--card-wallet-color);
}
Expand Down Expand Up @@ -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;
Expand All @@ -95,6 +100,7 @@

.card__title {
font-size: 18px;
color: var(--text-color);
}

.card__title--file {
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/scss/component/_file-download.scss
View file
Expand Up @@ -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';
}

Expand Down

0 comments on commit baff4e3

Please sign in to comment.