mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-01-11 11:34:26 +00:00
bf6a122e38
* Initial changes to define theme maps, color function, and convert all global styles. * More global styles. * All styles converted, colors uncertain. * Fix tabs, temporary theme toggle button. * Color refinements * Color network selector, introduce shade function * Make palette page * Add theme button and minor styling to nav * Blueify dark theme * A bunch of color adjustments to work better with dark theme * Fix tables * Fix wallet decrypt colors * More misc fixes * Fix up electron colors * Convert web theme to redux state / action * Theme toggle in app, prevent rerenders * Get rid of all variables, fix selects * Fix conf modal, modal close styles * Fix test * Adjust swap colors * Check in breaking out component, changing icons * Check in progress * Theme toggle in footer. New icons * Prevent rerender on theme change * Fix up outstanding merge conflicts * Fix generate colors to be dark mode friendly * Reduce swap color intensity * Make disabled buttons darker in dark mode * Reduce button size by 25%
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import TabSection from 'containers/TabSection/index';
|
|
import './index.scss';
|
|
|
|
const COLORS = [
|
|
['gray-base', 'gray-darker', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'],
|
|
[
|
|
'brand-primary-darker',
|
|
'brand-primary-dark',
|
|
'brand-primary',
|
|
'brand-primary-light',
|
|
'brand-primary-lighter'
|
|
],
|
|
['brand-info-darker', 'brand-info-dark', 'brand-info', 'brand-info-light', 'brand-info-lighter'],
|
|
[
|
|
'brand-success-darker',
|
|
'brand-success-dark',
|
|
'brand-success',
|
|
'brand-success-light',
|
|
'brand-success-lighter'
|
|
],
|
|
[
|
|
'brand-warning-darker',
|
|
'brand-warning-dark',
|
|
'brand-warning',
|
|
'brand-warning-light',
|
|
'brand-warning-lighter'
|
|
],
|
|
[
|
|
'brand-danger-darker',
|
|
'brand-danger-dark',
|
|
'brand-danger',
|
|
'brand-danger-light',
|
|
'brand-danger-lighter'
|
|
],
|
|
['text-color', 'text-inverted-color', 'link-color', 'link-hover-color'],
|
|
['control-bg', 'control-color', 'control-border']
|
|
];
|
|
|
|
const Palette: React.SFC = () => (
|
|
<TabSection>
|
|
<section className="Tab-content">
|
|
<div className="Tab-content-pane Palette">
|
|
{COLORS.map(colors => (
|
|
<div className="Palette-group" key={colors[0]}>
|
|
{colors.map(c => (
|
|
<div className="Palette-group-color" key={c}>
|
|
<div className={`Palette-group-color-blob color--${c}`} />
|
|
<div className="Palette-group-color-name">{c}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</TabSection>
|
|
);
|
|
|
|
export default Palette;
|