From 8c84a813dc841a5c6b33345ee136b64e3663d6ab Mon Sep 17 00:00:00 2001 From: Andre Neves Date: Sun, 24 Feb 2019 16:56:58 -0500 Subject: [PATCH] refactor: styles refactoring readability --- app/theme/colors/dark.js | 126 ++++++++++++++++++++++---------------- app/theme/colors/light.js | 109 +++++++++++++++++++-------------- 2 files changed, 137 insertions(+), 98 deletions(-) diff --git a/app/theme/colors/dark.js b/app/theme/colors/dark.js index fb79ad7..af36117 100644 --- a/app/theme/colors/dark.js +++ b/app/theme/colors/dark.js @@ -1,94 +1,116 @@ // @flow +// Colors named with: chir.ag/projects/name-that-color/ +// Lights const white = '#FFFFFF'; -const text = white; -const brand = '#F4B728'; -const brand2 = '#FFE240'; +const gray = '#DDDDDD'; +const silver = '#BBBBBB'; +const silverChalice = '#AAAAAA'; +const boulder = '#777777'; +const doveGray = '#727272'; +const scorpion = '#5D5D5D'; +const manatee = '#8E8E96'; +const friarGray = '#828282'; + +// Darks const black = '#000000'; +const shark = '#212124'; +const tundora = '#4E4B4B'; +const shipGray = '#3E3C42'; +const codGray = '#1D1D1D'; +const mineShaft = '#3A3A3A'; +const woodsmoke = '#222222'; +const heavyMetal = '#0A0A0A'; + +// Colors +const saffron = '#F4B728'; +const brightSun = '#FFE240'; +const offBrand = 'rgba(238,201,76,0.65)'; const error = '#FF6C6C'; const success = '#6AEAC0'; -const darkBrand = '#212124'; -const brandThree = '#5d5d65'; + +// Misc +const transparent = 'transparent'; export const DARK_COLORS = { // General - text, - success, error, - background: '#212124', + success, + text: white, + background: shark, divider: black, - inactiveItem: brandThree, - activeItem: brand, + inactiveItem: scorpion, + activeItem: saffron, // Header - headerTitle: text, + headerTitle: white, // Select - selectButtonShadow: 'rgba(238,201,76,0.65)', + selectButtonShadow: offBrand, // Send View (Additional Options Section) sendAdditionalOptionsBg: black, sendAdditionalOptionsBorder: black, - sendAdditionalInputBg: darkBrand, + sendAdditionalInputBg: shark, sendAdditionalInputText: white, // Dropdown - dropdownBg: '#5d5d5d', - dropdownHoveredBg: '#212124', - dropdownBorder: '#4e4b4b', - dropdownIconBorder: '#828282', - dropdownOpenedIconBorder: '#ddd', + dropdownBg: scorpion, + dropdownHoveredBg: shark, + dropdownBorder: tundora, + dropdownIconBorder: friarGray, + dropdownOpenedIconBorder: gray, // Card cardBackgroundColor: black, sendCardBg: black, - sendCardBorder: 'transparent', + sendCardBorder: transparent, // Buttons - buttonPrimaryBg: brand, - buttonPrimaryDisabledBg: brand, + buttonPrimaryBg: saffron, + buttonPrimaryDisabledBg: saffron, buttonPrimaryText: black, - buttonSecondaryBg: '#ddd', - buttonSecondaryDisabledBg: brand, + buttonSecondaryBg: gray, + buttonSecondaryDisabledBg: saffron, buttonSecondaryText: black, - buttonSecondaryBorder: '#ddd', - buttonSecondaryHoveredBg: '#bbb', - buttonBorderColor: '#3e3c42', + buttonSecondaryBorder: gray, + buttonSecondaryHoveredBg: silver, + buttonBorderColor: shipGray, // Transactions transactionSent: error, transactionReceived: success, - transactionsDate: '#777777', - transactionsItemHovered: '#222222', + transactionsDate: boulder, + transactionsItemHovered: woodsmoke, transactionItemBg: black, - transactionItemHoverBg: '#0A0A0A', - transactionItemBorder: 'transparent', - transactionItemAddress: '#A7A7A7', + transactionItemHoverBg: heavyMetal, + transactionItemBorder: transparent, + transactionItemAddress: silverChalice, transactionItemAddressHover: white, transactionDetailsShadow: `0px 0px 20px 0px ${black}`, - transactionDetailsBg: darkBrand, - transactionDetailsRowHover: '#1D1D1D', - transactionDetailsDivider: '#3A3A3A', - transactionDetailsLabel: '#777777', - transactionLabelText: '#777777', + transactionDetailsBg: shark, + transactionDetailsRowHover: codGray, + transactionDetailsDivider: mineShaft, + transactionDetailsLabel: boulder, + transactionLabelText: boulder, transactionLabelTextHovered: white, // Status Pill - statusPillLabel: '#727272', + statusPillLabel: doveGray, statusPillBg: black, statusPillBorder: black, // Sidebar sidebarBg: black, sidebarBorderRight: black, - sidebarLogoGradientBegin: brand, - sidebarLogoGradientEnd: brand2, - sidebarHoveredItemLabel: '#8e8e96', - sidebarActiveItemBorder: 'red', - sidebarItem: brandThree, - sidebarItemActive: brand, - sidebarItemHovered: '#FFF', - sidebarItemHoveredBg: darkBrand, + sidebarLogoGradientBegin: saffron, + sidebarLogoGradientEnd: brightSun, + sidebarHoveredItemLabel: manatee, + sidebarActiveItemBorder: error, + sidebarItem: scorpion, + sidebarItemActive: saffron, + sidebarItemHovered: white, + sidebarItemHoveredBg: shark, // QRCode qrCodeWrapperBg: black, @@ -96,8 +118,8 @@ export const DARK_COLORS = { // Forms inputBg: black, - inputBorder: 'transparent', - inputBorderActive: '#222', + inputBorder: transparent, + inputBorderActive: woodsmoke, // Wallet Summary walletSummaryBg: black, @@ -106,22 +128,22 @@ export const DARK_COLORS = { // Wallet Address walletAddressBg: black, walletAddressBorder: black, - walletAddressInput: '#828282', + walletAddressInput: friarGray, walletAddressInputHovered: white, walletAddressTooltip: black, walletAddressTooltipBg: white, // Console consoleBg: black, - consoleBorder: 'transparent', + consoleBorder: transparent, // Settings settingsCardBg: black, - settingsLearnMore: '#AAAAAA', - settingsLearnMoreHovered: '#fff', + settingsLearnMore: silverChalice, + settingsLearnMoreHovered: white, // Loading loadingScreenBg: black, loadingScreenText: white, - loadingScreenProgress: brand, + loadingScreenProgress: saffron, }; diff --git a/app/theme/colors/light.js b/app/theme/colors/light.js index 8b630bc..980eb5b 100644 --- a/app/theme/colors/light.js +++ b/app/theme/colors/light.js @@ -1,17 +1,34 @@ // @flow +// Colors named with: chir.ag/projects/name-that-color/ +// Lights const white = '#FFFFFF'; const whiteHover = '#F9FBFE'; const offWhite = '#F9F9F9'; +const alto = '#DDDDDD'; +const silver = '#C1C1C1'; +const silverChalice = '#AAAAAA'; +const boulder = '#A0A0A0'; +const doveGray = '#666666'; +const starDust = '#777777'; + +// Darks const black = '#000000'; const text = '#142533'; -const secondaryText = '#777777'; -const brand = '#5684EB'; +const mineShaft = '#222222'; +const shipGray = '#3E3C42'; +const scorpion = '#989898'; +const dustyGray = '#999999'; +const bitter = '#828282'; +const manatee = '#8E8E96'; + +// Colors const error = '#FF6C6C'; const success = '#66BE54'; -const logo = '#F4B728'; -const logo2 = '#FFE240'; -const border = '#DDDDDD'; +const cornflowerBlue = '#5684EB'; +const saffron = '#F4B728'; +const brightSun = '#FFE240'; +const offBrand = 'rgba(238,201,76,0.65)'; export const LIGHT_COLORS = { // General @@ -19,113 +36,113 @@ export const LIGHT_COLORS = { success, error, background: offWhite, - divider: '#AAAAAA', + divider: silverChalice, inactiveItem: success, - activeItem: brand, + activeItem: cornflowerBlue, // Header headerTitle: text, // Select - selectButtonShadow: 'rgba(238,201,76,0.65)', + selectButtonShadow: offBrand, // Send View (Additional Options Section) sendAdditionalOptionsBg: white, - sendAdditionalOptionsBorder: border, + sendAdditionalOptionsBorder: alto, sendAdditionalInputBg: offWhite, sendAdditionalInputText: white, // Dropdown dropdownBg: offWhite, dropdownHoveredBg: white, - dropdownBorder: border, - dropdownIconBorder: '#c1c1c1', - dropdownOpenedIconBorder: '#828282', + dropdownBorder: alto, + dropdownIconBorder: silver, + dropdownOpenedIconBorder: bitter, // Card cardBackgroundColor: black, sendCardBg: white, - sendCardBorder: border, + sendCardBorder: alto, // Buttons - buttonPrimaryBg: brand, - buttonPrimaryDisabledBg: brand, + buttonPrimaryBg: cornflowerBlue, + buttonPrimaryDisabledBg: cornflowerBlue, buttonPrimaryText: white, - buttonSecondaryBg: '#989898', - buttonSecondaryDisabledBg: brand, - buttonSecondaryBorder: '#989898', + buttonSecondaryBg: scorpion, + buttonSecondaryDisabledBg: cornflowerBlue, + buttonSecondaryBorder: scorpion, buttonSecondaryText: white, - buttonSecondaryHoveredBg: '#aaa', - buttonBorderColor: '#3E3C42', + buttonSecondaryHoveredBg: silverChalice, + buttonBorderColor: shipGray, // Transactions transactionSent: error, transactionReceived: success, - transactionsDate: secondaryText, - transactionsItemHovered: '#222222', + transactionsDate: starDust, + transactionsItemHovered: mineShaft, transactionItemBg: white, transactionItemHoverBg: whiteHover, - transactionItemBorder: border, - transactionItemAddress: '#666666', + transactionItemBorder: alto, + transactionItemAddress: doveGray, transactionItemAddressHover: black, transactionDetailsShadow: `0px 0px 1px 0px ${black}`, transactionDetailsBg: white, transactionDetailsRowHover: whiteHover, - transactionDetailsDivider: border, - transactionDetailsLabel: '#999999', - transactionLabelText: '#666666', + transactionDetailsDivider: alto, + transactionDetailsLabel: dustyGray, + transactionLabelText: doveGray, transactionLabelTextHovered: black, // Status Pill statusPillLabel: text, - statusPillBg: '#F9FBFE', - statusPillBorder: border, + statusPillBg: whiteHover, + statusPillBorder: alto, // Sidebar sidebarBg: white, - sidebarBorderRight: border, - sidebarLogoGradientBegin: logo, - sidebarLogoGradientEnd: logo2, - sidebarHoveredItemLabel: '#8E8E96', - sidebarItem: '#aaa', + sidebarBorderRight: alto, + sidebarLogoGradientBegin: saffron, + sidebarLogoGradientEnd: brightSun, + sidebarHoveredItemLabel: manatee, + sidebarItem: silverChalice, sidebarItemActive: text, sidebarItemHovered: text, sidebarItemHoveredBg: offWhite, - sidebarActiveItemLabel: '#8E8E96', - sidebarActiveItemBorder: 'red', + sidebarActiveItemLabel: manatee, + sidebarActiveItemBorder: error, // QR Code qrCodeWrapperBg: white, - qrCodeWrapperBorder: border, + qrCodeWrapperBorder: alto, // Forms inputBg: white, - inputBorder: border, - inputBorderActive: '#828282', + inputBorder: alto, + inputBorderActive: bitter, // Wallet Summary walletSummaryBg: white, - walletSummaryBorder: border, + walletSummaryBorder: alto, // Wallet Address walletAddressBg: white, - walletAddressBorder: border, - walletAddressInput: '#666', + walletAddressBorder: alto, + walletAddressInput: doveGray, walletAddressInputHovered: black, walletAddressTooltip: white, walletAddressTooltipBg: black, // Console consoleBg: white, - consoleBorder: border, + consoleBorder: alto, // Settings settingsCardBg: white, - settingsLearnMore: '#a0a0a0', - settingsLearnMoreHovered: '#000', + settingsLearnMore: boulder, + settingsLearnMoreHovered: black, // Loading loadingScreenBg: black, loadingScreenText: white, - loadingScreenProgress: logo, + loadingScreenProgress: saffron, };