task: add Athena Design System, reskin dashboard [WIP]

package.json

@@ -33,6 +33,7 @@
     "console-browserify": "^1.1.0",
     "constants-browserify": "^1.0.0",
     "currency.js": "^1.2.2",
+    "design-system": "github:symbol/design-system#v0.1.2",
     "dns.js": "^1.0.1",
     "domain-browser": "^1.1.1",
     "events": "^3.0.0",

src/components/backgrounds/GradientBackground.js

@@ -73,10 +73,21 @@ export default class GradientBackground extends Component<Props, State> {
                 break;
         }
 
-        const gradientColors =
-            theme === 'light'
-                ? [GlobalStyles.color.DARKWHITE, GlobalStyles.color.DARKWHITE]
-                : [GlobalStyles.color.PRIMARY, GlobalStyles.color.SECONDARY];
+        let gradientColors;
+
+        switch (theme) {
+            case 'light':
+                gradientColors = [GlobalStyles.color.DARKWHITE, GlobalStyles.color.DARKWHITE];
+                break;
+            case 'darkmode':
+                gradientColors = [GlobalStyles.color.darkmode.BACKGROUND_MAIN, GlobalStyles.color.darkmode.BACKGROUND_MAIN];
+                break;
+            default:
+                gradientColors = [GlobalStyles.color.PRIMARY, GlobalStyles.color.SECONDARY];
+                break;
+        }
+
+        console.log({ theme, gradientColors });
 
         const Content = () => {
             return (

src/components/backgrounds/ListContainer.js

@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
         marginTop: 0,
         marginBottom: 8,
         paddingBottom: 1,
-        backgroundColor: GlobalStyles.color.WHITE,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_CARD,
         flex: 1,
     },
     section: {

src/components/backgrounds/ListItem.js

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
         paddingTop: 18.1,
         paddingBottom: 16,
         borderBottomWidth: 2,
-        borderBottomColor: GlobalStyles.color.DARKWHITE,
+        borderBottomColor: GlobalStyles.color.darkmode.BACKGROUND_CARD,
     },
 });
 

src/components/controls/Address.js

@@ -54,8 +54,8 @@ class AddressComponent extends Component<Props, State> {
 
         if (typeof align === 'string') globalStyle.textAlign = align;
 
-        if (theme === 'light') globalStyle.color = GlobalStyles.color.onLight.TEXT;
-        else globalStyle.color = GlobalStyles.color.onDark.TEXT;
+        if (theme === 'light') globalStyle.color = GlobalStyles.color.lightmode.TEXT;
+        else globalStyle.color = GlobalStyles.color.darkmode.TEXT;
 
         return <Text style={[globalStyle, style]}>{addressChange}</Text>;
     }

src/components/controls/CopyView.js

@@ -43,7 +43,7 @@ class CopyView extends Component<Props, State> {
     }
 
     render = () => {
-        const { children, style = {}, placeholder, theme = 'light' } = this.props;
+        const { children, style = {}, placeholder, theme = 'light', type = 'regular' } = this.props;
         let placeholderStyle;
 
         if (theme === 'light') {
@@ -56,7 +56,7 @@ class CopyView extends Component<Props, State> {
             <>
                 {!!placeholder && <Text style={placeholderStyle}>{placeholder}</Text>}
                 <Row align="center" justify="space-between">
-                    <Text type="regular" theme={theme} style={[styles.text, style]}>
+                    <Text type={type} theme={theme} style={[styles.text, style]}>
                         {this.text()}
                     </Text>
                     <TouchableOpacity style={styles.button} onPress={() => this.copyToClipboard(children)}>

src/components/controls/Dropdown.js

@@ -20,9 +20,12 @@ const styles = StyleSheet.create({
     titleDark: {
         color: GlobalStyles.color.WHITE,
     },
-    placeholder: {
-        fontSize: 12,
-        opacity: 0.3,
+    titleDarkmode: {
+        color: GlobalStyles.color.darkmode.TEXT,
+    },
+    textDarkmode: {
+        color: GlobalStyles.color.darkmode.TEXT,
+        opacity: 0.7,
     },
     input: {
         paddingVertical: 14,
@@ -31,8 +34,10 @@ const styles = StyleSheet.create({
     },
     inputText: {
         fontSize: 12,
-        fontFamily: 'NotoSans-SemiBold',
-        fontWeight: '300',
+    },
+    placeholder: {
+        fontSize: 12,
+        opacity: 0.3,
     },
     inputLight: {
         //borderWidth: 1,
@@ -47,6 +52,13 @@ const styles = StyleSheet.create({
         color: GlobalStyles.color.PRIMARY,
         backgroundColor: GlobalStyles.color.WHITE,
     },
+    inputDarkmode: {
+        borderRadius: 6,
+        color: GlobalStyles.color.darkmode.TEXT,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_FORM,
+        borderWidth: 1,
+        borderColor: GlobalStyles.color.darkmode.ACCENT_FORM,
+    },
     icon: {
         position: 'absolute',
         bottom: 0,
@@ -89,13 +101,13 @@ const styles = StyleSheet.create({
         borderColor: GlobalStyles.color.GREY4,
     },
     modalTitleText: {
-        color: GlobalStyles.color.onLight.TEXT,
+        color: GlobalStyles.color.lightmode.TEXT,
         fontFamily: 'NotoSans-SemiBold',
         fontSize: 18,
     },
     listItem: {
         //borderBottomWidth: 1,
-        borderColor: GlobalStyles.color.onLight.TEXT,
+        borderColor: GlobalStyles.color.lightmode.TEXT,
         padding: 12,
     },
     listItemText: {
@@ -219,6 +231,7 @@ export default class Dropdown extends Component<Props, State> {
         const { isSelectorOpen } = this.state;
         let inputStyles = [];
         let titleStyle = {};
+        let textStyle = {};
         let rootStyle = [styles.root, style];
         const iconSize = 'small';
         const iconWrapperWidth = 30;
@@ -231,6 +244,10 @@ export default class Dropdown extends Component<Props, State> {
         if (theme === 'light') {
             inputStyles.push(styles.inputLight);
             titleStyle = styles.titleLight;
+        } else if (theme === 'darkmode') {
+            inputStyles.push(styles.inputDarkmode);
+            titleStyle = styles.titleDarkmode;
+            textStyle = styles.textDarkmode;
         } else {
             inputStyles.push(styles.inputDark);
             titleStyle = styles.titleDark;
@@ -248,11 +265,13 @@ export default class Dropdown extends Component<Props, State> {
                     <TouchableOpacity style={inputStyles} onPress={() => !isLoading && this.openSelector()}>
                         {selectedOption &&
                             (!customInputReneder ? (
-                                <Text style={styles.inputText}>{!isLoading && <Trunc length={36}>{selectedOption.label}</Trunc>}</Text>
+                                <Text style={[textStyle, styles.inputText]}>
+                                    {!isLoading && <Trunc length={36}>{selectedOption.label}</Trunc>}
+                                </Text>
                             ) : (
                                 customInputReneder(selectedOption)
                             ))}
-                        {!selectedOption && <Text style={styles.placeholder}>{placeholder}</Text>}
+                        {!selectedOption && <Text style={[textStyle, styles.placeholder]}>{placeholder}</Text>}
                         <View style={[styles.icon, this.getIconPosition(iconWrapperWidth, iconOffset)]}>
                             <Icon name="expand" size={iconSize} />
                         </View>

src/components/controls/Icon.js

@@ -109,12 +109,15 @@ export default class C extends Component<Props, State> {
             case 'settings_filled_light':
                 source = require('@src/assets/icons/settings_filled_light.png');
                 break;
-            case 'settings_dark':
-                source = require('@src/assets/icons/settings_dark.png');
+            case 'settings_darkmode':
+                source = require('design-system/assets/icons/Gear.png');
                 break;
             case 'wallet_filled_light':
                 source = require('@src/assets/icons/wallet_filled_light.png');
                 break;
+            case 'wallet_darkmode':
+                source = require('design-system/assets/icons/Wallet.png');
+                break;
             case 'paste':
                 source = require('@src/assets/icons/clipboard.png');
                 break;

src/components/controls/ReadMoreLink.js

@@ -25,13 +25,13 @@ export default class ReadMoreLink extends Component<Props, State> {
         if (title) {
             return (
                 <Section type="form-item">
-                    <Text theme="light" align="center" type="regular">
+                    <Text theme="darkmode" align="center" type="regular">
                         {title}
                     </Text>
                     <Row justify="space-between" align="end" fullWidth>
                         <Col style={{ flex: 1, marginTop: 10 }}>
                             <TouchableOpacity onPress={() => this.onPress(this.props.url)}>
-                                <Text theme="light" align="right" style={styles.link}>
+                                <Text theme="darkmode" align="right" style={styles.link}>
                                     {translate('news.readMore')}
                                 </Text>
                             </TouchableOpacity>
@@ -44,7 +44,7 @@ export default class ReadMoreLink extends Component<Props, State> {
                 <Row justify="space-between" align="end" fullWidth>
                     <Col style={{ flex: 1, marginTop: 10 }}>
                         <TouchableOpacity onPress={() => this.onPress(this.props.url)}>
-                            <Text theme="light" align="right" style={styles.link}>
+                            <Text theme="darkmode" align="right" style={styles.link}>
                                 {translate('news.readMore')}
                             </Text>
                         </TouchableOpacity>

src/components/controls/Text.js

@@ -51,8 +51,8 @@ export default class C extends Component<Props, State> {
         if (typeof align === 'string') globalStyle.textAlign = align;
 
         if (type !== 'warning' && type !== 'error') {
-            if (theme === 'light') globalStyle.color = GlobalStyles.color.onLight.TEXT;
-            else globalStyle.color = GlobalStyles.color.onDark.TEXT;
+            if (theme === 'light') globalStyle.color = GlobalStyles.color.lightmode.TEXT;
+            else globalStyle.color = GlobalStyles.color.darkmode.TEXT;
         }
 
         return <Text style={[globalStyle, style]}>{children}</Text>;

src/components/molecules/TitleBar.js

@@ -52,9 +52,9 @@ export default class PluginList extends Component<Props, State> {
 
         const iconCloseName = theme === 'light' ? 'close_light' : 'close_dark';
 
-        const iconSettingsName = theme === 'light' ? 'settings_filled_light' : 'settings_dark';
+        const iconSettingsName = theme === 'light' ? 'settings_filled_light' : 'settings_darkmode';
 
-        const iconMenuName = theme === 'light' ? 'wallet_filled_light' : 'options_dark';
+        const iconMenuName = theme === 'light' ? 'wallet_filled_light' : 'wallet_darkmode';
 
         const leftIconStyle = onBack ? styles.iconLeftOld : {};
 

src/components/old/StepViewTitleBar/index.js

@@ -18,13 +18,13 @@ export type titleTheme = {
 };
 
 const lightTheme: titleTheme = {
-    textColor: GlobalStyles.color.onLight.TITLE,
+    textColor: GlobalStyles.color.lightmode.TITLE,
     backIconRes: require('@src/assets/icons/ic-back-black.png'),
     closeIconRes: require('@src/assets/icons/close_light.png'),
 };
 
 const darkTheme: titleTheme = {
-    textColor: GlobalStyles.color.onDark.TITLE,
+    textColor: GlobalStyles.color.darkmode.TITLE,
     backIconRes: require('@src/assets/icons/ic-back-white.png'),
     closeIconRes: require('@src/assets/icons/close_dark.png'),
 };

src/components/organisms/AccountBalanceWidget.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { RefreshControl, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { CopyView, FadeView, Row, SymbolGradientContainer, Text } from '@src/components';
+import { CopyView, FadeView, Row, Text } from '@src/components';
 import GlobalStyles from '../../styles/GlobalStyles';
 import Video from 'react-native-video';
 import { Router } from '@src/Router';
@@ -19,6 +19,7 @@ const styles = StyleSheet.create({
         padding: 17,
         paddingTop: 8,
         minHeight: 142,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_HERO,
     },
     scrollView: {},
     scrollViewContent: {
@@ -27,26 +28,24 @@ const styles = StyleSheet.create({
     },
     address: {
         marginRight: -5,
-        opacity: 0.7,
         color: GlobalStyles.color.WHITE,
         fontSize: 1 * 12,
         lineHeight: 1.75 * 12,
         marginBottom: 17,
+        opacity: 1,
     },
     mosaic: {
         fontSize: 1 * 12,
         lineHeight: 1.75 * 12,
         marginBottom: 2,
     },
     balance: {
-        fontFamily: 'NotoSans-Light',
         fontSize: 2.5 * 12,
         lineHeight: 3.25 * 12,
         marginTop: 20,
         color: GlobalStyles.color.WHITE,
     },
     balanceLight: {
-        fontFamily: 'NotoSans-Light',
         fontSize: 2.5 * 12,
         lineHeight: 3.25 * 12,
         marginTop: 20,
@@ -99,7 +98,7 @@ class BalanceWidget extends Component<Props, State> {
         const Container = isLoading === true ? View : TouchableOpacity;
 
         return (
-            <SymbolGradientContainer style={[styles.root, isLoading && styles.noPadding]} noPadding noScroll>
+            <View style={[styles.root, isLoading && styles.noPadding]}>
                 <ScrollView
                     style={styles.scrollView}
                     contentContainerStyle={styles.scrollViewContent}
@@ -118,11 +117,11 @@ class BalanceWidget extends Component<Props, State> {
                                     {
                                         <BalanceContainer horizontal={true} style={{ marginLeft: 16 }}>
                                             <Row>
-                                                <Text style={styles.balance} theme="dark">
+                                                <Text style={styles.balance} theme="dark" type="bold">
                                                     {('' + balance).split('.')[0]}
                                                 </Text>
                                                 {('' + balance).split('.')[1] && (
-                                                    <Text style={styles.balanceLight} theme="dark">
+                                                    <Text style={styles.balanceLight} theme="dark" type="bold">
                                                         .{('' + balance).split('.')[1]}
                                                     </Text>
                                                 )}
@@ -148,7 +147,7 @@ class BalanceWidget extends Component<Props, State> {
                         </FadeView>
                     )}
                 </ScrollView>
-            </SymbolGradientContainer>
+            </View>
         );
     };
 }

src/components/organisms/BalanceWidget.js

@@ -19,20 +19,20 @@ const styles = StyleSheet.create({
     currencyText: {
         fontSize: 15,
         marginBottom: 8,
-        color: GlobalStyles.color.onDark.TEXT,
+        color: GlobalStyles.color.darkmode.TEXT,
     },
     balanceText: {
         fontFamily: 'NotoSans-SemiBold',
         fontSize: 36,
-        color: GlobalStyles.color.onDark.TEXT,
+        color: GlobalStyles.color.darkmode.TEXT,
     },
     bottomContainer: {
         marginTop: 3,
         opacity: 0.5,
     },
     fiatText: {
         fontSize: 15,
-        color: GlobalStyles.color.onDark.TEXT,
+        color: GlobalStyles.color.darkmode.TEXT,
     },
     priceChange: {
         fontSize: 15,

src/components/organisms/LinkExplorer.js

@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
         marginRight: 8,
     },
     text: {
-        color: GlobalStyles.color.PRIMARY,
+        color: GlobalStyles.color.BLUE,
     },
 });
 
@@ -64,7 +64,7 @@ class LinkExplorer extends Component<Props, State> {
         return (
             <TouchableOpacity onPress={() => this.onPress(route)}>
                 <Row style={styles.root} align="center">
-                    <Icon name="explorer_filled_primary" size="small" style={styles.icon} />
+                    <Icon name="explorer_filled_blue" size="small" style={styles.icon} />
                     <Text type="bold" theme="light" style={styles.text}>
                         {text}
                     </Text>

src/components/organisms/LinkFaucet.js

@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
         marginRight: 8,
     },
     text: {
-        color: GlobalStyles.color.PRIMARY,
+        color: GlobalStyles.color.BLUE,
     },
 });
 
@@ -40,7 +40,7 @@ export default class LinkFaucet extends Component<Props, State> {
         return (
             <TouchableOpacity onPress={() => this.onPress(route)}>
                 <Row style={styles.root} align="center">
-                    <Icon name="faucet_filled_primary" size="small" style={styles.icon} />
+                    <Icon name="faucet_filled_blue" size="small" style={styles.icon} />
                     <Text type="bold" theme="light" style={styles.text}>
                         {text}
                     </Text>