Skip to content

Commit

Permalink
Merge pull request #2318 from Emurgo/add-theming-revamp
Browse files Browse the repository at this point in the history 
Add theming revamp
  • Loading branch information
@vsubhuman
vsubhuman committed Oct 11, 2021
2 parents 9827008 + 74aebd4 commit 8c90eba
Show file tree
Hide file tree
Showing 8 changed files with 719 additions and 49 deletions.
120 changes: 86 additions & 34 deletions .../yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js
View file
@@ -1,6 +1,6 @@
// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import type { Node, ComponentType } from 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react';
import { Button } from 'react-polymorph/lib/components/Button';
Expand All @@ -12,6 +12,8 @@ import type { Theme } from '../../../../themes';
import ThemeThumbnail from '../display/ThemeThumbnail';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
import globalMessages from '../../../../i18n/global-messages';
import { withLayout } from '../../../../themes/context/layout';
import type { LayoutComponentMap } from '../../../../themes/context/layout';

const messages = defineMessages({
themeLabel: {
Expand Down Expand Up @@ -50,17 +52,21 @@ const messages = defineMessages({

type Props = {|
+currentTheme: Theme,
+selectTheme: {| theme: string |} => PossiblyAsync<void>,
+selectTheme: ({| theme: string |}) => PossiblyAsync<void>,
+exportTheme: void => PossiblyAsync<void>,
+getThemeVars: {| theme: string |} => { [key: string]: string, ... },
+getThemeVars: ({| theme: string |}) => { [key: string]: string, ... },
+hasCustomTheme: void => boolean,
+onExternalLinkClick: MouseEvent => void,
|};
type InjectedProps = {|
+changeLayout: void => void,
+renderLayoutComponent: LayoutComponentMap => Node,
|};
type AllProps = {| ...Props, ...InjectedProps |};

@observer
export default class ThemeSettingsBlock extends Component<Props> {

static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
class ThemeSettingsBlock extends Component<AllProps> {
static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
intl: intlShape.isRequired,
};

Expand All @@ -72,6 +78,7 @@ export default class ThemeSettingsBlock extends Component<Props> {
exportTheme,
hasCustomTheme,
onExternalLinkClick,
changeLayout,
} = this.props;
const { intl } = this.context;

Expand All @@ -85,10 +92,7 @@ export default class ThemeSettingsBlock extends Component<Props> {
styles.themeImageWrapper,
]);

const exportButtonClasses = classnames([
'primary',
styles.button,
]);
const exportButtonClasses = classnames(['primary', styles.button]);

const blogLink = (
<a
Expand All @@ -100,16 +104,21 @@ export default class ThemeSettingsBlock extends Component<Props> {
</a>
);

return (
<div className={styles.component}>

<h2 className={styles.title}>
{intl.formatMessage(messages.themeLabel)}
</h2>

<p><FormattedHTMLMessage {...messages.themeNote} /></p>
<p><FormattedMessage {...messages.blog} values={{ blogLink }} /></p>
const commonHeader = (
<>
<h2 className={styles.title}>{intl.formatMessage(messages.themeLabel)}</h2>
<p>
<FormattedHTMLMessage {...messages.themeNote} />
</p>
<p>
<FormattedMessage {...messages.blog} values={{ blogLink }} />
</p>
</>
);

const themeBlockClassicComponent = (
<div className={styles.component}>
{commonHeader}
<div className={styles.main}>
<div className={styles.themesWrapper}>
{/* Modern Theme */}
Expand All @@ -118,13 +127,15 @@ export default class ThemeSettingsBlock extends Component<Props> {
className={themeYoroiModernClasses}
onClick={selectTheme.bind(this, { theme: THEMES.YOROI_MODERN })}
>
{(currentTheme === THEMES.YOROI_MODERN
&& hasCustomTheme() &&
<div className={styles.themeWarning}>
{intl.formatMessage(messages.themeWarning)}
</div>)
}
<ThemeThumbnail themeVars={getThemeVars({ theme: THEMES.YOROI_MODERN })} themeKey="modern" />
{currentTheme === THEMES.YOROI_MODERN && hasCustomTheme() && (
<div className={styles.themeWarning}>
{intl.formatMessage(messages.themeWarning)}
</div>
)}
<ThemeThumbnail
themeVars={getThemeVars({ theme: THEMES.YOROI_MODERN })}
themeKey="modern"
/>
<h3 className={styles.subTitle}>{intl.formatMessage(messages.themeYoroiModern)}</h3>
</button>
{/* Classic Theme */}
Expand All @@ -133,13 +144,15 @@ export default class ThemeSettingsBlock extends Component<Props> {
className={themeYoroiClassicClasses}
onClick={selectTheme.bind(this, { theme: THEMES.YOROI_CLASSIC })}
>
{(currentTheme === THEMES.YOROI_CLASSIC
&& hasCustomTheme() &&
<div className={styles.themeWarning}>
{intl.formatMessage(messages.themeWarning)}
</div>)
}
<ThemeThumbnail themeVars={getThemeVars({ theme: THEMES.YOROI_CLASSIC })} themeKey="classic" />
{currentTheme === THEMES.YOROI_CLASSIC && hasCustomTheme() && (
<div className={styles.themeWarning}>
{intl.formatMessage(messages.themeWarning)}
</div>
)}
<ThemeThumbnail
themeVars={getThemeVars({ theme: THEMES.YOROI_CLASSIC })}
themeKey="classic"
/>
<h3 className={styles.subTitle}>{intl.formatMessage(messages.themeYoroiClassic)}</h3>
</button>
</div>
Expand All @@ -150,9 +163,48 @@ export default class ThemeSettingsBlock extends Component<Props> {
onClick={exportTheme.bind(this)}
/>
</div>
<div className={styles.revampWrapper}>
<Button
className={styles.revamp}
label="Try new Yoroi Revamp"
skin={ButtonSkin}
onClick={() => {
changeLayout();
selectTheme({ theme: THEMES.YOROI_REVAMP });
}}
/>
</div>
</div>
);

const themeBlockRevampComponent = (
<div className={styles.component}>
{commonHeader}
<div className={styles.main}>
<Button
className={exportButtonClasses}
label={intl.formatMessage(messages.themeExportButton)}
skin={ButtonSkin}
onClick={exportTheme.bind(this)}
/>
</div>
<div className={styles.revampWrapper}>
<Button
className={styles.classic}
label="Back to Yoroi Classic"
skin={ButtonSkin}
onClick={() => {
changeLayout();
selectTheme({ theme: THEMES.YOROI_MODERN });
}}
/>
</div>
</div>
);
return this.props.renderLayoutComponent({
CLASSIC: themeBlockClassicComponent,
REVAMP: themeBlockRevampComponent,
});
}

}
export default (withLayout(ThemeSettingsBlock): ComponentType<Props>);
34 changes: 33 additions & 1 deletion ...oroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.scss
View file
Expand Up @@ -92,4 +92,36 @@
}
}
}
}
}

.revampWrapper {
margin: 20px 0;
display: flex;
justify-content: center;
}
.classic,
.revamp {
background: white !important;
color: #6b7384 !important;
border: 1px solid #6b7384 !important;
&:hover {
color: #383838;
background: white !important;
}
}
.revamp {
position: relative;
&::after {
content: 'new';
text-transform: uppercase;
top: 50%;
right: 30px;
transform: translateY(-50%);
position: absolute;
font-size: 14px;
color: var(--theme-button-primary-text-color);
background-color: var(--theme-button-primary-background-color);
padding: 4px 10px;
border-radius: 777px;
}
}
1 change: 1 addition & 0 deletions packages/yoroi-extension/app/components/topbar/SideBarCategoryRevamp.scss
View file
Expand Up @@ -9,6 +9,7 @@
font-family: var(--font-regular);
line-height: var(--theme-sidebar-text-line-height);
color: var(--theme-sidebar-text-color);
transition: 0.3s opacity;

& + & {
margin-top: 18px;
Expand Down
2 changes: 1 addition & 1 deletion packages/yoroi-extension/app/components/topbar/SidebarRevamp.scss
View file
Expand Up @@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(30.09deg, #244abf 0%, #4760ff 100%);
background: var(--theme-sidebar-background-color);
}

.header {
Expand Down
10 changes: 0 additions & 10 deletions packages/yoroi-extension/app/themes/context/layout.js
View file
@@ -1,27 +1,17 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import { THEMES, THEMES_REVAMP } from '..';

type Layouts = 'CLASSIC' | 'REVAMP';
export type LayoutComponentMap = {|
[key: Layouts]: Node,
|};
type LayoutInitialState = {|
selected: Layouts,
[key: Layouts]: {|
themes: Object,
|},
|};

const initialState: LayoutInitialState = {
selected: 'CLASSIC',
CLASSIC: {
themes: THEMES,
},
REVAMP: {
themes: THEMES_REVAMP,
},
};

const LayoutContext = React.createContext();
Expand Down
3 changes: 0 additions & 3 deletions packages/yoroi-extension/app/themes/index.js
View file
Expand Up @@ -3,13 +3,10 @@
export const THEMES = Object.freeze({
YOROI_CLASSIC: 'YoroiClassic',
YOROI_MODERN: 'YoroiModern',
});
export const THEMES_REVAMP = Object.freeze({
YOROI_REVAMP: 'YoroiRevamp',
});

export type Theme = $Values<typeof THEMES>;
export type ThemeRevamp = $Values<typeof THEMES_REVAMP>;


// Refer: https://github.com/Emurgo/yoroi-frontend/pull/497
Expand Down
14 changes: 14 additions & 0 deletions packages/yoroi-extension/app/themes/overrides/index.js
View file
Expand Up @@ -71,6 +71,20 @@ export const themeOverrides = (theme: Theme): Object => {
[SELECT]: SelectOverrides,
[SWITCH]: SwitchOverrides,
});
case THEMES.YOROI_REVAMP:
return ({
[AUTOCOMPLETE]: AutocompleteOverrides,
[BUBBLE]: BubbleOverrides,
[BUTTON]: ButtonOverrides,
[CHECKBOX]: CheckboxOverrides,
[FORM_FIELD]: FormFieldOverrides,
[INPUT]: InputOverrides,
[TEXT_AREA]: TextAreaOverrides,
[MODAL]: ModalOverrides,
[OPTIONS]: OptionsOverrides,
[SELECT]: SelectOverrides,
[SWITCH]: SwitchOverrides,
});
default:
throw new Error(`Unsupported Theme: ${theme}`);
}
Expand Down

0 comments on commit 8c90eba

Please sign in to comment.