diff --git a/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap b/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap index 22ebac275..c20d6c4a0 100644 --- a/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap +++ b/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap @@ -71,17 +71,19 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -95,12 +97,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -108,38 +119,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -150,13 +162,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -167,9 +180,12 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", "background": "var(--panel-background)", "border": "none", "borderRadius": "4px", @@ -181,22 +197,25 @@ exports[`ConfirmModal should render without crashing 1`] = ` "margin": "auto", "padding": 0, "width": "500px", + "zIndex": 5000, }, "overlay": Object { "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -210,12 +229,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -223,38 +251,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -265,13 +294,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -282,11 +312,15 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", "backgroundColor": "var(--modal-overlay)", "margin": "auto", + "zIndex": 200, }, } } @@ -298,11 +332,11 @@ exports[`ConfirmModal should render without crashing 1`] = ` >
@@ -393,17 +427,19 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -417,12 +453,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -430,38 +475,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -472,13 +518,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -489,9 +536,12 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", "background": "var(--panel-background)", "border": "none", "borderRadius": "4px", @@ -503,22 +553,25 @@ exports[`ConfirmModal should render without crashing 1`] = ` "margin": "auto", "padding": 0, "width": "500px", + "zIndex": 5000, }, "overlay": Object { "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -532,12 +585,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -545,38 +607,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -587,13 +650,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -604,11 +668,15 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", "backgroundColor": "var(--modal-overlay)", "margin": "auto", + "zIndex": 200, }, } } @@ -623,17 +691,19 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -647,12 +717,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -660,38 +739,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -702,13 +782,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -719,9 +800,12 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", "backgroundColor": "var(--modal-overlay)", "bottom": 0, "left": 0, @@ -729,6 +813,7 @@ exports[`ConfirmModal should render without crashing 1`] = ` "position": "fixed", "right": 0, "top": 0, + "zIndex": 200, } } > @@ -743,17 +828,19 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -767,12 +854,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -780,38 +876,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -822,13 +919,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -839,9 +937,12 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", "WebkitOverflowScrolling": "touch", "background": "var(--panel-background)", "border": "none", @@ -861,6 +962,7 @@ exports[`ConfirmModal should render without crashing 1`] = ` "right": "40px", "top": "40px", "width": "500px", + "zIndex": 5000, } } tabIndex="-1" @@ -872,17 +974,19 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -896,12 +1000,21 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -909,38 +1022,39 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -951,13 +1065,14 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -968,9 +1083,12 @@ exports[`ConfirmModal should render without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", } } > @@ -990,49 +1108,49 @@ exports[`ConfirmModal should render without crashing 1`] = ` className="modalFooter" > diff --git a/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap b/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap index 7a5ec4a71..34673807a 100644 --- a/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap +++ b/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap @@ -984,17 +984,19 @@ exports[`Sidebar renders without crashing 1`] = ` "--amounts-panel-asset-amount-text": "#515151", "--amounts-panel-asset-name-text": "#515151", "--amounts-panel-asset-worth-text": "#515151", - "--amounts-panel-first-row-background": "#f2f2f2", + "--amounts-panel-first-row-background": "#F1F5FC", "--amounts-panel-second-row-background": "#fff", "--auth-inner-container-box-shadow": "-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)", - "--auth-main-container-background": "#EAF2F7", - "--auth-scan-qr-border": "#f2f2f2", + "--auth-main-container-background": "#fff", + "--auth-scan-qr-border": "#F1F5FC", "--base-link-color": "#3063c9", "--base-main-background": "#EEF4F9", "--base-scrollbar-thumb": "#5c677f", "--base-scrollbar-track": "#fff", - "--base-text": "#3D4D56", + "--base-text": "#282828", + "--button-active": "#fff", + "--button-active-hover": "#fff", "--button-disabled": "#d6d9e0", "--button-flag-icon-color": "#394152", "--button-flag-icon-opacity": 0.3, @@ -1008,12 +1010,21 @@ exports[`Sidebar renders without crashing 1`] = ` "--button-primary-disabled-text-color": "#acbbc4", "--button-primary-hover-background-image": "linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)", "--button-primary-text": "#394152", - "--button-priority-transfer-background": "#fff", + "--button-priority-active-hover": "#fff", + "--button-priority-button-container-background": "linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)", + "--button-priority-button-container-shadow": "-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff", + "--button-priority-conditional-box-shadow": "none", + "--button-priority-disabled-opacity": "1", + "--button-priority-standard-icon-color": "#394152", + "--button-priority-transfer-background": "linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)", + "--button-priority-transfer-button-border": "1px solid #a4b0c3", "--button-priority-transfer-color": "#394152", - "--button-priority-transfer-disabled": "#fff", + "--button-priority-transfer-disabled": "transparent", + "--button-priority-transfer-disabled-color": "#CCD4D9", "--button-secondary-background": "#fff", - "--button-secondary-hover": "#f2f2f2", + "--button-secondary-hover": "#F1F5FC", "--button-secondary-text": "#394152", + "--contacts-delete-contact-name": "#394152", "--contacts-group-header-background": "#f6f7f8", "--contacts-group-header-text": "#394152", "--contacts-odd-numbered-row": "rgba(230, 230, 230, 0.1)", @@ -1021,38 +1032,39 @@ exports[`Sidebar renders without crashing 1`] = ` "--dashboard-asset-panel-total-background": "#F1F5FC", "--dashboard-market-data-line": "#3fd0ae", "--dashboard-price-history-current-price": "#394152", - "--dashboard-token-balances-divider-line": "#f2f2f2", + "--dashboard-token-balances-divider-line": "#F1F5FC", "--dashboard-total-wallet-value-odd-row": "#f8f8f8", "--dashboard-total-wallet-value-total-text": "#394152", "--header-bar-default-icon-color": "#394152", - "--input-active": "linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)", - "--input-background": "#F9FCFD", + "--input-active": "linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)", + "--input-background": "#EAF2F7", "--input-error": "#ee6d66", "--input-error-text": "#fff", "--input-icon": "#9ca0a9", "--input-label": "#5c677f", "--input-label-opacity": 0.5, "--input-placeholder": "rgba(40, 40, 40, 0.5)", - "--input-select-hover": "#e6e6e6", + "--input-select-hover": "#D4DEE4", "--input-text": "#282828", "--modal-overlay": "rgba(26, 54, 80, 0.25)", - "--network-config-tooltip-background": "#f8f8f8", + "--network-config-tooltip-background": "#fff", "--network-config-tooltip-color": "#394152", "--network-config-tooltip-label": "#8D98AE", "--news-content-border-color": "#ececec", "--node-select-automatic-select-button-text": "#5c677f", - "--node-select-header-background": "#f2f2f2", - "--node-select-icon-color": "#3DF4A6", + "--node-select-header-background": "#F1F5FC", + "--node-select-icon-color": "#282828", "--node-select-node-count": "#5c677f", "--node-select-refresh-icon": "#394152", "--notifications-error-icon-color": "#fff", "--notifications-success-icon-color": "#fff", "--panel-background": "#fff", + "--panel-box-shadow": "-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)", "--panel-full-height-background": "#fff", "--panel-full-height-header-icon-color": "#394152", "--panel-full-height-instructions-border": "rgba(0, 0, 0, 0.15)", - "--panel-full-height-instructions-text": "#5c677f", - "--panel-full-height-nav-background": "#f2f2f2", + "--panel-full-height-instructions-text": "#8297A0", + "--panel-full-height-nav-background": "#D4DEE4", "--panel-header": "#D4DEE4", "--panel-header-border": "#8d98ae", "--panel-header-text": "#394152", @@ -1063,13 +1075,14 @@ exports[`Sidebar renders without crashing 1`] = ` "--qr-scan-animation-start": "rgba(57, 65, 82, 1)", "--qr-scan-paused": "rgba(102, 237, 135, 0.6)", "--secondary-button-icon-color": "#394152", + "--secondary-raised-base-text": "#7f8f98", "--send-success-row-info": "#394152", "--settings-donation-text": "#5c677f", - "--settings-item-border-color": "#f2f2f2", + "--settings-item-border-color": "#F1F5FC", "--settings-item-icon": "#cccccc", "--settings-item-label": "#343b4a", - "--settings-link-text": "#3DF4A6", - "--settings-select-value-text": "#3DF4A6", + "--settings-link-text": "#32E096", + "--settings-select-value-text": "#32E096", "--settings-spacer": "rgba(170, 178, 189, 0.3)", "--side-bar-disabled-item-background": "#fff", "--sidebar-active-background": "#F1F5FC", @@ -1080,9 +1093,12 @@ exports[`Sidebar renders without crashing 1`] = ` "--sidebar-shadow": "-16px -16px 17px 0 rgba(255,255,255,0.44), -3px 16px 20px 0 rgba(18,21,23,0.24)", "--tab-border": "#394152", "--tab-text": "#394152", + "--tx-icon-color": "#32E096", + "--tx-list-box-shadow": "-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)", "--tx-list-button-icon": "#394152", "--tx-list-copy-icon": "#9599a2", - "--tx-list-odd-row": "#f2f2f2", + "--tx-list-odd-row": "#F1F5FC", + "--view-layout-header-icon-color": "#282828", } } > diff --git a/app/assets/icons/wallet-green.svg b/app/assets/icons/wallet-green.svg new file mode 100644 index 000000000..e35cedaf1 --- /dev/null +++ b/app/assets/icons/wallet-green.svg @@ -0,0 +1,10 @@ + + + Group 2 + + + + + + + \ No newline at end of file diff --git a/app/assets/icons/wallet.svg b/app/assets/icons/wallet.svg index c0a1ad034..7096f8e71 100644 --- a/app/assets/icons/wallet.svg +++ b/app/assets/icons/wallet.svg @@ -1,13 +1,10 @@ - - - Icon/Wallet-Dark - Created with Sketch. - + + Group 2 - - - + + + \ No newline at end of file diff --git a/app/components/Blockchain/Transaction/Transaction.scss b/app/components/Blockchain/Transaction/Transaction.scss index f9baeb49c..4456801af 100644 --- a/app/components/Blockchain/Transaction/Transaction.scss +++ b/app/components/Blockchain/Transaction/Transaction.scss @@ -10,7 +10,6 @@ width: 200px; font-size: 14px; text-align: center; - font-family: var(--font-gotham-book); } .pendingTxDate { @@ -21,7 +20,6 @@ } .txLabelContainer { - font-family: var(--font-gotham-book); font-size: 14px; display: flex; text-align: center; @@ -127,7 +125,7 @@ .claimIconContainer { svg { path { - fill: #ffcf48; + fill: var(--tx-icon-color); } } } @@ -135,7 +133,7 @@ .sendIconContainer { svg { path { - fill: #ff967e; + fill: #d355e7; } } } @@ -143,7 +141,7 @@ .receiveIconContainer { svg { path { - fill: #82e092; + fill: var(--tx-icon-color); } } } diff --git a/app/components/Button/Button.scss b/app/components/Button/Button.scss index 26ecd1654..c295fc765 100644 --- a/app/components/Button/Button.scss +++ b/app/components/Button/Button.scss @@ -60,7 +60,7 @@ } &.secondaryRaised { - color: var(--base-text); + color: var(--secondary-raised-base-text); path { fill: var(--base-text); diff --git a/app/components/Contacts/ContactsPanel/ContactsPanel.jsx b/app/components/Contacts/ContactsPanel/ContactsPanel.jsx index 770c864e8..f6deb73fc 100644 --- a/app/components/Contacts/ContactsPanel/ContactsPanel.jsx +++ b/app/components/Contacts/ContactsPanel/ContactsPanel.jsx @@ -231,9 +231,14 @@ export default class ContactsPanel extends React.Component { showModal(MODAL_TYPES.CONFIRM, { title: 'Confirm Delete', - text: `${intl.formatMessage({ - id: 'confirmRemoveContact', - })} - ${name}`, + renderBody: () => ( +
+ {`${intl.formatMessage({ + id: 'confirmRemoveContact', + })}`} +

{name}

+
+ ), onClick: () => { this.props.deleteContact(name) showSuccessNotification({ diff --git a/app/components/Contacts/ContactsPanel/ContactsPanel.scss b/app/components/Contacts/ContactsPanel/ContactsPanel.scss index aa657a86e..635cfe650 100644 --- a/app/components/Contacts/ContactsPanel/ContactsPanel.scss +++ b/app/components/Contacts/ContactsPanel/ContactsPanel.scss @@ -113,3 +113,16 @@ .headerSelect { width: 150px; } + +.confirmDeleteModalPrompt { + text-align: center; + width: 100%; + + h2 { + margin-top: 10px; + + font-size: 18px; + color: var(--contacts-delete-contact-name); + text-align: center; + } +} diff --git a/app/components/Contacts/EditContactPanel/EditContactPanel.jsx b/app/components/Contacts/EditContactPanel/EditContactPanel.jsx index 37651a250..9b76174ae 100644 --- a/app/components/Contacts/EditContactPanel/EditContactPanel.jsx +++ b/app/components/Contacts/EditContactPanel/EditContactPanel.jsx @@ -83,9 +83,14 @@ export default class EditContactPanel extends React.Component { showModal(MODAL_TYPES.CONFIRM, { title: 'Confirm Delete', - text: `${intl.formatMessage({ - id: 'confirmRemoveContact', - })} - ${name}`, + renderBody: () => ( +
+ {`${intl.formatMessage({ + id: 'confirmRemoveContact', + })}`} +

{name}

+
+ ), onClick: () => { this.props.deleteContact(name) showSuccessNotification({ diff --git a/app/components/Contacts/EditContactPanel/EditContactPanel.scss b/app/components/Contacts/EditContactPanel/EditContactPanel.scss index 67bd7d0e9..e67b983e8 100644 --- a/app/components/Contacts/EditContactPanel/EditContactPanel.scss +++ b/app/components/Contacts/EditContactPanel/EditContactPanel.scss @@ -25,15 +25,27 @@ span { font-family: var(--font-gotham-medium); font-size: 14px; - color: #ee6d66; + color: #d355e7; display: flex; align-items: center; cursor: pointer; svg { path { - fill: #ee6d66; + fill: #d355e7; } } } } +.confirmDeleteModalPrompt { + text-align: center; + width: 100%; + + h2 { + margin-top: 10px; + + font-size: 18px; + color: var(--contacts-delete-contact-name); + text-align: center; + } +} diff --git a/app/components/Dashboard/AssetBalancesPanel/AssetBalancesPanel.scss b/app/components/Dashboard/AssetBalancesPanel/AssetBalancesPanel.scss index 3789bc5f4..cee74884e 100644 --- a/app/components/Dashboard/AssetBalancesPanel/AssetBalancesPanel.scss +++ b/app/components/Dashboard/AssetBalancesPanel/AssetBalancesPanel.scss @@ -39,7 +39,7 @@ .quantity { font-weight: 400; - margin: 16px 0; + margin: -8px 0 16px 0; font-family: var(--font-gotham-light); font-size: 40px; color: var(--base-text); @@ -89,11 +89,9 @@ } .label { - color: #969aa0; font-size: 24px; font-weight: 400; text-transform: uppercase; - opacity: 0.5; font-family: var(--font-gotham-light); font-size: 24px; color: var(--base-text); diff --git a/app/components/DialogueBox/DialogueBox.scss b/app/components/DialogueBox/DialogueBox.scss index d294789b1..4df92b665 100644 --- a/app/components/DialogueBox/DialogueBox.scss +++ b/app/components/DialogueBox/DialogueBox.scss @@ -20,7 +20,7 @@ min-width: 24px; path { - fill: #d355e7; + fill: #d355e7 !important; } } } diff --git a/app/components/Inputs/TextInput/TextInput.scss b/app/components/Inputs/TextInput/TextInput.scss index e0735aa6d..4ee8c98c9 100644 --- a/app/components/Inputs/TextInput/TextInput.scss +++ b/app/components/Inputs/TextInput/TextInput.scss @@ -11,6 +11,7 @@ label { font-weight: bold; + font-family: var(--font-gotham-bold); font-size: 12px; text-transform: uppercase; opacity: var(--input-label-opacity); diff --git a/app/components/LoadingPanel/LoadingPanel.jsx b/app/components/LoadingPanel/LoadingPanel.jsx index 9bc8c6e82..4634cb15d 100644 --- a/app/components/LoadingPanel/LoadingPanel.jsx +++ b/app/components/LoadingPanel/LoadingPanel.jsx @@ -21,7 +21,7 @@ export default class LoadingPanel extends React.Component { diff --git a/app/components/Modals/BaseModal/BaseModal.jsx b/app/components/Modals/BaseModal/BaseModal.jsx index 206a019a3..c9ba40ee8 100644 --- a/app/components/Modals/BaseModal/BaseModal.jsx +++ b/app/components/Modals/BaseModal/BaseModal.jsx @@ -58,12 +58,14 @@ const BaseModal = ({ display: 'flex', flexDirection: 'column', background: 'var(--panel-background)', + zIndex: 5000, ...style.content, }, overlay: { ...themes[theme], backgroundColor: 'var(--modal-overlay)', margin: 'auto', + zIndex: 200, ...style.overlay, }, }} diff --git a/app/components/Modals/ConfirmModal/ConfirmModal.jsx b/app/components/Modals/ConfirmModal/ConfirmModal.jsx index e3c3b2735..6a49e7c72 100644 --- a/app/components/Modals/ConfirmModal/ConfirmModal.jsx +++ b/app/components/Modals/ConfirmModal/ConfirmModal.jsx @@ -14,6 +14,7 @@ type Props = { onCancel: Function, hideModal: Function, width: string, + renderBody: Function, } const ConfirmModal = ({ @@ -22,6 +23,7 @@ const ConfirmModal = ({ onClick, onCancel, text, + renderBody, width, }: Props) => (
- {text} + {text && {text}} + {renderBody && renderBody()}
diff --git a/app/components/Modals/ConfirmModal/ConfirmModal.scss b/app/components/Modals/ConfirmModal/ConfirmModal.scss index cd0bdcc4d..92bed36ee 100644 --- a/app/components/Modals/ConfirmModal/ConfirmModal.scss +++ b/app/components/Modals/ConfirmModal/ConfirmModal.scss @@ -1,23 +1,16 @@ .modalFooter { - padding-top: 20px; text-align: right; + display: flex; + padding-top: 15px; } .actionButton { - background-color: red; - margin-bottom: 10px; - &:hover { - background-color: red; - } + margin-left: 12px; } .cancelButton { background: none; - border: 1px solid #999; - color: #000; - &:hover { - background: none; - } + margin-right: 12px; } .contentContainer { diff --git a/app/components/Modals/TokenModal/Row.jsx b/app/components/Modals/TokenModal/Row.jsx index 35006588c..6c7bc40d6 100644 --- a/app/components/Modals/TokenModal/Row.jsx +++ b/app/components/Modals/TokenModal/Row.jsx @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react' import classNames from 'classnames' -import { FormattedMessage } from 'react-intl' +import { injectIntl, IntlShape } from 'react-intl' import Delete from 'react-icons/lib/md/delete' import Tooltip from '../../Tooltip' @@ -13,6 +13,7 @@ type Props = { onChangeScriptHash: Function, onDelete: Function, isScriptHashInvalid: boolean, + intl: IntlShape, } class Row extends Component { @@ -22,6 +23,7 @@ class Row extends Component { onChangeScriptHash, onDelete, isScriptHashInvalid, + intl, } = this.props return (
@@ -38,7 +40,11 @@ class Row extends Component { token.isUserGenerated && onChangeScriptHash(e.target.value) } /> - }> +
@@ -46,4 +52,4 @@ class Row extends Component { } } -export default Row +export default injectIntl(Row) diff --git a/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx b/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx index 92afa3d3f..e80a5517c 100644 --- a/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx +++ b/app/components/Panel/FullHeightPanel/FullHeightPanel.jsx @@ -15,7 +15,6 @@ type Props = { renderHeaderIcon: () => React$Node, shouldRenderHeader: Boolean, headerText: string, - iconColor: string, className: string, containerClassName: string, headerContainerClassName: string, @@ -81,18 +80,12 @@ export default class ViewLayout extends Component { const { shouldRenderHeader, headerContainerClassName, - iconColor, headerText, } = this.props return ( shouldRenderHeader && (
-
- {this.renderHeaderIcon()} -
+
{this.renderHeaderIcon()}
{headerText}
) diff --git a/app/components/Panel/FullHeightPanel/FullHeightPanel.scss b/app/components/Panel/FullHeightPanel/FullHeightPanel.scss index 4492d9e5d..f2e4eb4e5 100644 --- a/app/components/Panel/FullHeightPanel/FullHeightPanel.scss +++ b/app/components/Panel/FullHeightPanel/FullHeightPanel.scss @@ -55,6 +55,7 @@ flex-direction: column; width: 100%; align-items: center; + // height: 100%; } .instructions { @@ -65,7 +66,6 @@ width: 500px; font-size: 14px; color: var(--panel-full-height-instructions-text); - font-family: var(--font-gotham-book); } .navigation { diff --git a/app/components/Panel/Header.scss b/app/components/Panel/Header.scss index f086b76a9..b057a37d7 100644 --- a/app/components/Panel/Header.scss +++ b/app/components/Panel/Header.scss @@ -6,8 +6,8 @@ align-items: stretch; justify-content: center; height: 50px; + min-height: 50px; padding: 0 24px; - font-family: var(--font-gotham-book); font-size: 14px; background: var(--panel-header); color: var(--panel-header-text); diff --git a/app/components/Panel/Panel.scss b/app/components/Panel/Panel.scss index 87d958cc4..37ea34869 100644 --- a/app/components/Panel/Panel.scss +++ b/app/components/Panel/Panel.scss @@ -2,15 +2,15 @@ display: flex; flex-direction: column; width: 100%; + box-shadow: var(--panel-box-shadow); .header { flex: 0 0 auto; + z-index: 100; } .content { flex: 1 1 auto; overflow-y: auto; - // display: flex; - // flex-direction: column; } } diff --git a/app/components/Send/PriorityFee/PriorityFee.scss b/app/components/Send/PriorityFee/PriorityFee.scss index 38b5a4036..d1269f67a 100644 --- a/app/components/Send/PriorityFee/PriorityFee.scss +++ b/app/components/Send/PriorityFee/PriorityFee.scss @@ -17,22 +17,29 @@ .priorityFeeButtonContainer { display: flex; - justify-content: center; + background-image: var(--button-priority-button-container-background); + box-shadow: var(--button-priority-button-container-shadow); + border-radius: 8px; .feeCost { font-size: 11px; - font-weight: 400; + text-align: left; + margin-left: 4px; } .speed { - font-weight: 400; + font-style: var(--font-gotham-book); + text-align: left; + font-size: 14px; + margin-left: 4px; } button:first-child { - border-radius: 4px 0 0 4px; + border-radius: 8px 0 0 8px; border-right: none !important; + border-left: none !important; display: flex; - flex: 2.25; + flex: 1; background: var(--button-priority-transfer-background); } @@ -40,39 +47,66 @@ border-radius: 0; border-right: none !important; display: flex; - flex: 2; + flex: 1; background: var(--button-priority-transfer-background); } button:nth-child(3) { - border-radius: 0 4px 4px 0; + border-radius: 0 8px 8px 0; display: flex; - flex: 1.5; + flex: 1; background: var(--button-priority-transfer-background); } .activeButton { color: var(--button-active-text) !important; + + svg { + max-width: 8px; + + g { + fill: #3bfdab !important; + } + } } button { + box-shadow: var(--button-priority-conditional-box-shadow) !important; + border-left: var(--button-priority-transfer-button-border); + + svg { + max-width: 8px; + + g { + fill: var(--button-priority-standard-icon-color); + } + } margin: 0; - height: auto; - border: solid thin #8d98ae !important; + height: 60px; background: var(--button-priority-transfer-background); color: var(--button-priority-transfer-color) !important; &:not([disabled]):hover { color: var(--button-active-text) !important; + background: var(--button-priority-active-hover) !important; + + svg { + max-width: 8px; + + g { + fill: #3bfdab !important; + } + } } &[disabled] { - opacity: 0.6; + opacity: var(--button-priority-disabled-opacity); background: var(--button-priority-transfer-disabled) !important; + color: var(--button-priority-transfer-disabled-color) !important; svg { g { - fill: #d6d9e0; + fill: var(--button-priority-transfer-disabled-color) !important; } } } diff --git a/app/components/Send/SendPanel/SendPanel.scss b/app/components/Send/SendPanel/SendPanel.scss index 2ee973757..d48305ac0 100644 --- a/app/components/Send/SendPanel/SendPanel.scss +++ b/app/components/Send/SendPanel/SendPanel.scss @@ -32,12 +32,15 @@ justify-content: center; display: flex; flex: 0.2; - font-weight: 400; - font-size: 14px; - color: #ffcf48; + font-size: 14px; + color: var(--button-priority-standard-icon-color); + font-family: var(--font-gotham-bold); svg { margin-right: 10px; + g { + fill: #3bfdab !important; + } } } diff --git a/app/containers/App/Sidebar/Logout/Logout.scss b/app/containers/App/Sidebar/Logout/Logout.scss index 3324c1325..2fd918a46 100644 --- a/app/containers/App/Sidebar/Logout/Logout.scss +++ b/app/containers/App/Sidebar/Logout/Logout.scss @@ -14,7 +14,6 @@ } .logoutText { - font-family: var(--font-gotham-book); font-size: 10px; margin-top: 5px; color: #9599a2; diff --git a/app/containers/App/Sidebar/Sidebar.scss b/app/containers/App/Sidebar/Sidebar.scss index 8f1ca1208..195e22ada 100644 --- a/app/containers/App/Sidebar/Sidebar.scss +++ b/app/containers/App/Sidebar/Sidebar.scss @@ -31,7 +31,7 @@ $size: 70px; display: flex; justify-content: center; align-items: center; - font-family: var(--font-gotham-book); + font-size: 10px; text-align: center; margin-top: -10px; @@ -92,7 +92,6 @@ $size: 70px; text-align: center; div { - font-family: var(--font-gotham-book); font-size: 10px; margin-top: 5px; } diff --git a/app/containers/Buttons/RefreshButton/RefreshButton.jsx b/app/containers/Buttons/RefreshButton/RefreshButton.jsx index 134cb2b15..197f5d244 100644 --- a/app/containers/Buttons/RefreshButton/RefreshButton.jsx +++ b/app/containers/Buttons/RefreshButton/RefreshButton.jsx @@ -17,20 +17,19 @@ class RefreshButton extends Component { const { loadWalletData, loading } = this.props return ( -
- - - +
+ + +
) } diff --git a/app/containers/Buttons/RefreshButton/RefreshButton.scss b/app/containers/Buttons/RefreshButton/RefreshButton.scss index 494a97b80..47e5ab117 100644 --- a/app/containers/Buttons/RefreshButton/RefreshButton.scss +++ b/app/containers/Buttons/RefreshButton/RefreshButton.scss @@ -1,7 +1,7 @@ @import '../../../styles/animations'; .refreshButtonSpan { - margin-right: 10px; + margin-left: 7px; } .refresh { diff --git a/app/containers/Dashboard/Dashboard.jsx b/app/containers/Dashboard/Dashboard.jsx index 8a7eaadfb..047cfc9d4 100644 --- a/app/containers/Dashboard/Dashboard.jsx +++ b/app/containers/Dashboard/Dashboard.jsx @@ -12,6 +12,7 @@ import HeaderBar from '../../components/HeaderBar' import Address from '../../components/Blockchain/Address' import PortfolioPanel from '../../components/Dashboard/PortfolioPanel' import Wallet from '../../assets/icons/wallet.svg' +import GreenWallet from '../../assets/icons/wallet-green.svg' import RefreshButton from '../Buttons/RefreshButton' import styles from './Dashboard.scss' @@ -21,6 +22,7 @@ type Props = { address: string, hasInternetConnectivity: boolean, internetConnectionPromptPresented: Boolean, + theme: string, } const REFRESH_INTERVAL_MS = 30000 @@ -70,7 +72,17 @@ export default class Dashboard extends Component { renderRightContent={() => (
- + {this.props.theme === 'Light' ? ( + + ) : ( + + )} diff --git a/app/containers/Dashboard/Dashboard.scss b/app/containers/Dashboard/Dashboard.scss index 74de99a9e..7abf707a2 100644 --- a/app/containers/Dashboard/Dashboard.scss +++ b/app/containers/Dashboard/Dashboard.scss @@ -75,7 +75,8 @@ } .portfolioPanel { - height: 450px; + height: 260px; + min-height: 260px; margin-bottom: 12px; } } @@ -109,3 +110,13 @@ } } } + +.manageWallets { + min-width: 22px; + min-height: 22px; + g { + path { + fill: none; + } + } +} diff --git a/app/containers/Dashboard/index.js b/app/containers/Dashboard/index.js index e8f915df9..8760b348d 100644 --- a/app/containers/Dashboard/index.js +++ b/app/containers/Dashboard/index.js @@ -10,6 +10,7 @@ import withInitialCall from '../../hocs/withInitialCall' import withAuthData from '../../hocs/withAuthData' import withCurrencyData from '../../hocs/withCurrencyData' import withNetworkData from '../../hocs/withNetworkData' +import withThemeData from '../../hocs/withThemeData' import withFilteredTokensData from '../../hocs/withFilteredTokensData' import { getNotifications } from '../../modules/notifications' import { showModal } from '../../modules/modal' @@ -52,4 +53,5 @@ export default compose( withReset(accountActions, ['networkId']), withActions(accountActions, mapAccountActionsToProps), withData(internetConnectionPromptPresented), + withThemeData(), )(Dashboard) diff --git a/app/containers/EditWallet/EditWallet.jsx b/app/containers/EditWallet/EditWallet.jsx index c2704c5e9..d8570b63b 100644 --- a/app/containers/EditWallet/EditWallet.jsx +++ b/app/containers/EditWallet/EditWallet.jsx @@ -118,7 +118,12 @@ class EditWallet extends Component { showModal(MODAL_TYPES.CONFIRM, { title: 'Confirm Delete', - text: `Please confirm removing saved wallet - ${label}`, + renderBody: () => ( +
+ Please confirm removing saved wallet +

{label}

+
+ ), onClick: async () => { const data = await getStorage('userWallet').catch(readError => showErrorNotification({ diff --git a/app/containers/EditWallet/EditWallet.scss b/app/containers/EditWallet/EditWallet.scss index da0497055..112022a27 100644 --- a/app/containers/EditWallet/EditWallet.scss +++ b/app/containers/EditWallet/EditWallet.scss @@ -6,14 +6,14 @@ span { font-family: var(--font-gotham-medium); font-size: 14px; - color: #ff967e; + color: #d355e7; display: flex; align-items: center; cursor: pointer; svg { path { - fill: #ff967e; + fill: #d355e7; } } } @@ -31,3 +31,16 @@ .buttonMargin { margin-bottom: 40px; } + +.confirmDeleteModalPrompt { + text-align: center; + width: 100%; + + h2 { + margin-top: 10px; + + font-size: 18px; + color: var(--contacts-delete-contact-name); + text-align: center; + } +} diff --git a/app/containers/Home/Home.jsx b/app/containers/Home/Home.jsx index 887fe1529..237faa2f7 100644 --- a/app/containers/Home/Home.jsx +++ b/app/containers/Home/Home.jsx @@ -92,14 +92,14 @@ export default class Home extends React.Component {
-
- diff --git a/app/containers/Home/Home.scss b/app/containers/Home/Home.scss index 43d485df9..d9898511d 100644 --- a/app/containers/Home/Home.scss +++ b/app/containers/Home/Home.scss @@ -206,6 +206,10 @@ $navigation-margin: 20px; margin-top: 15px; margin-bottom: 30px; flex: 1; + + button { + background: transparent !important; + } } .buttonContainer { diff --git a/app/containers/NetworkConfiguration/NetworkConfiguration.jsx b/app/containers/NetworkConfiguration/NetworkConfiguration.jsx index d9456dca4..89fa79641 100644 --- a/app/containers/NetworkConfiguration/NetworkConfiguration.jsx +++ b/app/containers/NetworkConfiguration/NetworkConfiguration.jsx @@ -50,6 +50,7 @@ export default class NetworkConfiguration extends React.Component< return ( } renderCloseButton={() => } diff --git a/app/containers/NetworkConfiguration/NetworkConfiguration.scss b/app/containers/NetworkConfiguration/NetworkConfiguration.scss index 9f93abc7c..84b8b03b8 100644 --- a/app/containers/NetworkConfiguration/NetworkConfiguration.scss +++ b/app/containers/NetworkConfiguration/NetworkConfiguration.scss @@ -1,6 +1,7 @@ .networkConfigPanel { display: flex; justify-content: center; + height: 100%; .networkConfigInstructions { border-bottom: none !important; @@ -12,5 +13,10 @@ display: flex; flex-direction: column; margin-bottom: auto; + height: 500px; } } + +.contentContainerStyle { + height: 100%; +} diff --git a/app/containers/TransactionHistory/TransactionHistory.jsx b/app/containers/TransactionHistory/TransactionHistory.jsx index 9096bd79c..946a35750 100644 --- a/app/containers/TransactionHistory/TransactionHistory.jsx +++ b/app/containers/TransactionHistory/TransactionHistory.jsx @@ -135,41 +135,40 @@ export default class TransactionHistory extends Component { }), ) hideNotification(infoNotification) - dialog.showSaveDialog( - { - defaultPath: `${app.getPath( - 'documents', - )}/neon-wallet-activity-${moment().unix()}.csv`, - filters: [ - { - name: 'CSV', - extensions: ['csv'], - }, - ], - }, - fileName => { - this.setState({ - isExporting: false, + const result = await dialog.showSaveDialog({ + defaultPath: `${app.getPath( + 'documents', + )}/neon-wallet-activity-${moment().unix()}.csv`, + filters: [ + { + name: 'CSV', + extensions: ['csv'], + }, + ], + }) + + const fileName = result.filePath + + this.setState({ + isExporting: false, + }) + if (fileName === undefined) { + return + } + // fileName is a string that contains the path and filename created in the save file dialog. + fs.writeFile(fileName, csv, errorWriting => { + if (errorWriting) { + showErrorNotification({ + message: `An error occurred creating the file: ${ + errorWriting.message + }`, }) - if (fileName === undefined) { - return - } - // fileName is a string that contains the path and filename created in the save file dialog. - fs.writeFile(fileName, csv, errorWriting => { - if (errorWriting) { - showErrorNotification({ - message: `An error occurred creating the file: ${ - errorWriting.message - }`, - }) - } else { - showSuccessNotification({ - message: 'The file has been succesfully saved', - }) - } + } else { + showSuccessNotification({ + message: 'The file has been succesfully saved', }) - }, - ) + } + }) } catch (err) { console.error(err) this.setState({ diff --git a/app/containers/TransactionHistory/TransactionHistory.scss b/app/containers/TransactionHistory/TransactionHistory.scss index f7c4356cb..5fe95e88e 100644 --- a/app/containers/TransactionHistory/TransactionHistory.scss +++ b/app/containers/TransactionHistory/TransactionHistory.scss @@ -6,6 +6,7 @@ .transactionHistoryPanel { flex: 1 1 auto; height: 100%; + box-shadow: var(--tx-list-box-shadow); } } diff --git a/app/containers/WalletManager/WalletManager.jsx b/app/containers/WalletManager/WalletManager.jsx index 7a4e71ee4..0af525e72 100644 --- a/app/containers/WalletManager/WalletManager.jsx +++ b/app/containers/WalletManager/WalletManager.jsx @@ -12,6 +12,7 @@ import FullHeightPanel from '../../components/Panel/FullHeightPanel' import Import from '../../assets/icons/import.svg' import Add from '../../assets/icons/add.svg' import WalletIcon from '../../assets/icons/wallet.svg' +import GreenWalletIcon from '../../assets/icons/wallet-green.svg' import styles from './WalletManager.scss' @@ -22,6 +23,7 @@ type Props = { showErrorNotification: Object => any, setAccounts: (Array) => any, showModal: (modalType: string, modalProps: Object) => any, + theme: string, } class WalletManager extends Component { @@ -38,7 +40,11 @@ class WalletManager extends Component {
- + {this.props.theme === 'Light' ? ( + + ) : ( + + )}

diff --git a/app/containers/WalletManager/WalletManager.scss b/app/containers/WalletManager/WalletManager.scss index 9bb99fd2a..4a645b5ed 100644 --- a/app/containers/WalletManager/WalletManager.scss +++ b/app/containers/WalletManager/WalletManager.scss @@ -51,8 +51,10 @@ margin: auto; overflow: visible; - path { - fill: #4cffb3; + g { + path { + fill: none; + } } } } diff --git a/app/containers/WalletManager/index.js b/app/containers/WalletManager/index.js index d5544171f..1f064885e 100644 --- a/app/containers/WalletManager/index.js +++ b/app/containers/WalletManager/index.js @@ -11,6 +11,7 @@ import { import Loading from '../App/Loading' import walletLabelActions from '../../actions/walletLabelActions' +import withThemeData from '../../hocs/withThemeData' import WalletManager from './WalletManager' const { LOADING } = progressValues @@ -31,4 +32,5 @@ export default compose( }, ), withData(walletLabelActions, mapAccountsDataToProps), + withThemeData(), )(WalletManager) diff --git a/app/styles/main.global.scss b/app/styles/main.global.scss index f3289b4b1..01da93317 100644 --- a/app/styles/main.global.scss +++ b/app/styles/main.global.scss @@ -227,7 +227,10 @@ input::placeholder { display: flex; margin: auto; font-size: 12px; - color: #ced0d4; + color: var(--base-text); + letter-spacing: 0.37px; + opacity: 0.5; + cursor: pointer; padding-bottom: 10px; width: 100%; @@ -236,6 +239,7 @@ input::placeholder { } li[aria-selected='true'] { + opacity: 1; font-weight: bold; color: var(--base-text); border-bottom: solid var(--base-text) 2px; diff --git a/app/themes/Dark.js b/app/themes/Dark.js index 3dad0cc02..9c540f2cc 100644 --- a/app/themes/Dark.js +++ b/app/themes/Dark.js @@ -1,13 +1,12 @@ const BASE = { - '--base-scrollbar-track': '#2E3542', + '--base-scrollbar-track': '#39404c', '--base-scrollbar-thumb': '#5c677f', - '--base-main-background': '#242933', + '--base-main-background': '#242B31', '--base-text': '#fff', '--base-link-color': '#6bdaf6', } const BUTTON = { - '--button-disabled': '#5C677F', '--button-primary-disabled-box-shadow': '-12px -12px 36px 0 rgba(70,77,83,0.50), 12px 12px 36px 0 rgba(18,21,23,0.99), inset -1px -1px 0 0 rgba(0,0,0,0.32), inset 1px 1px 0 0 rgba(214,210,210,0.14)', '--button-primary-box-shadow': @@ -20,24 +19,34 @@ const BUTTON = { 'linear-gradient(180deg, #42535D 0%, #273139 100%)', '--button-primary-hover-background-image': ' linear-gradient(180deg, #566A76 0%, #33414A 100%)', - '--button-active': '#4CFFB3', - '--button-active-text': '#242933', - '--button-secondary-background': '#3B3B4F', + '--button-active': 'linear-gradient(180deg, #273139 0%, #313D45 100%)', + '--button-active-text': '#4CFFB3', + '--button-secondary-background': 'transparent', '--button-primary-background': '#4CFFB3', '--button-primary-hover': '#4CFFB3', - '--button-secondary-hover': '#3B3B4F', + '--button-secondary-hover': 'transparent', '--button-primary-text': '#4CFFB3', '--button-secondary-text': '#394152', '--button-icon-color': '#4CFFB3', - '--button-active-hover': '#4CFFB3', + '--button-active-hover': 'linear-gradient(180deg, #273139 0%, #313D45 100%)', + '--button-priority-active-hover': + 'linear-gradient(180deg, #273139 0%, #313D45 100%)', '--secondary-button-icon-color': '#fff', - '--button-priority-transfer-background': '#2E3542', - '--button-priority-transfer-color': '#fff', - '--button-priority-transfer-disabled': '#2E3542', + '--button-priority-standard-icon-color': '#4CFFB3', + '--button-priority-transfer-background': + 'linear-gradient(180deg, #42535D 0%, #273139 100%)', + '--button-priority-transfer-color': '#9DB2BB', + '--button-priority-transfer-disabled-color': '#495460', + '--button-priority-disabled-opacity': '.6', + '--button-priority-transfer-disabled': + 'linear-gradient(180deg, #2E3B44 0%, #20292F 100%)', '--button-max-amount-background': '#8D98AE', '--button-max-amount-text': '#394152', '--button-flag-icon-color': '#fff', '--button-flag-icon-opacity': 0.6, + '--button-priority-conditional-box-shadow': + ' -12px -12px 36px 0 rgba(70, 77, 83, 0.46), 12px 12px 36px 0 rgba(18, 21, 23, 0.99), inset -1px -1px 0 0 rgba(0, 0, 0, 0.32), inset 1px 1px 0 0 rgba(214, 210, 210, 0.14)', + '--secondary-raised-base-text': '#fff', } const INPUT = { @@ -47,7 +56,7 @@ const INPUT = { '--input-text': '#fff', '--input-label-opacity': 0.5, '--input-label': '#fff', - '--input-select-hover': '#3B3B4F', + '--input-select-hover': '#39404c', '--input-active': '#4CFFB3', '--input-icon': '#9ca0a9', '--input-placeholder': 'rgba(255, 255, 255, 0.5)', @@ -64,13 +73,13 @@ const TAB = { const PANEL = { '--panel-icon': '#4CFFB3', - '--panel-header': '#1B2029', + '--panel-header': '#21242C', '--panel-header-text': '#fff', - '--panel-background': '#333D46', + '--panel-background': '#303740', '--panel-header-border': '#8d98ae', '--panel-label-text': '#8d98ae', '--panel-full-height-background': '#333D46', - '--panel-full-height-nav-background': '#2B2F37', + '--panel-full-height-nav-background': '#21242C', '--panel-full-height-instructions-text': '#fff', '--panel-full-height-instructions-border': '#8D98AE', '--panel-full-height-header-icon-color': '#fff', @@ -78,7 +87,7 @@ const PANEL = { } const MODAL = { - '--modal-overlay': 'rgba(248, 248, 248, 0.21)', + '--modal-overlay': 'rgba(0,0,0,0.60)', } const AUTH_STYLES = { @@ -107,9 +116,10 @@ const SIDEBAR = { } const TX_LIST = { - '--tx-list-odd-row': '#343B4A', + '--tx-list-odd-row': '#39404c', '--tx-list-button-icon': '#4CFFB3', '--tx-list-copy-icon': '#4CFFB3', + '--tx-icon-color': '#4CFFB3', } const SETTINGS = { @@ -142,6 +152,7 @@ const CONTACTS = { '--contacts-odd-numbered-row': '#343B4A', '--contacts-group-header-background': '#20272F', '--contacts-group-header-text': '#8297A0', + '--contacts-delete-contact-name': '#4CFFB3', } const SEND = { @@ -160,7 +171,7 @@ const NEWS = { export const DARK_NETWORK_CONFIG_TOOLTIP = { '--network-config-tooltip-label': '#8D98AE', - '--network-config-tooltip-background': '#1b2029', + '--network-config-tooltip-background': '#21242C', '--network-config-tooltip-color': '#fff', } diff --git a/app/themes/Light.js b/app/themes/Light.js index 59b6eb518..c0fdb1b70 100644 --- a/app/themes/Light.js +++ b/app/themes/Light.js @@ -2,12 +2,11 @@ const BASE = { '--base-scrollbar-track': '#fff', '--base-scrollbar-thumb': '#5c677f', '--base-main-background': '#EEF4F9', - '--base-text': '#3D4D56', + '--base-text': '#282828', '--base-link-color': '#3063c9', } const BUTTON = { - '--button-disabled': '#d6d9e0', '--button-primary-box-shadow': '-17px -17px 20px 0 rgba(255,255,255,0.54), 17px 17px 20px 0 #C6CCD1, inset -1px -1px 0 0 #A4B0C3, inset 1px 1px 0 0 #FFFFFF', '--button-primary-disabled-box-shadow': @@ -19,30 +18,44 @@ const BUTTON = { 'linear-gradient(180deg, #FFFFFF 2%, #E2EAEF 100%)', '--button-primary-disabled-text-color': '#acbbc4', '--button-secondary-background': '#fff', - '--button-secondary-hover': '#f2f2f2', + '--button-secondary-hover': '#F1F5FC', '--button-primary-text': '#394152', '--button-secondary-text': '#394152', '--button-icon-color': '#394152', '--secondary-button-icon-color': '#394152', - '--button-priority-transfer-background': '#fff', + '--button-active': '#fff', + '--button-priority-active-hover': '#fff', + '--button-active-hover': '#fff', + '--button-priority-transfer-background': + 'linear-gradient(180deg, #EAF2F7 2%, #E6F0F6 97%)', + '--button-priority-transfer-disabled': 'transparent', + '--button-priority-transfer-button-border': '1px solid #a4b0c3', + '--button-priority-transfer-disabled-color': '#CCD4D9', '--button-priority-transfer-color': '#394152', - '--button-priority-transfer-disabled': '#fff', + '--button-priority-disabled-opacity': '1', + '--button-priority-conditional-box-shadow': 'none', + '--button-priority-button-container-shadow': + '-4px -4px 9px 0 rgba(255, 255, 255, 0.54), 4px 4px 13px 0 #c6ccd1, inset -1px -1px 0 0 #a4b0c3, inset 1px 1px 0 0 #ffffff', + '--button-priority-standard-icon-color': '#394152', + '--button-priority-button-container-background': + 'linear-gradient(180deg, #eff5f8 2%, #e4edf2 97%)', '--button-max-amount-background': '#e6e6e6', '--button-max-amount-text': '#8f939b', '--button-flag-icon-color': '#394152', '--button-flag-icon-opacity': 0.3, + '--secondary-raised-base-text': '#7f8f98', } const INPUT = { - '--input-background': '#F9FCFD', + '--input-background': '#EAF2F7', '--input-error': '#ee6d66', '--input-error-text': '#fff', '--input-text': '#282828', '--input-label': '#5c677f', '--input-label-opacity': 0.5, - '--input-select-hover': '#e6e6e6', + '--input-select-hover': '#D4DEE4', '--input-active': - 'linear-gradient(#f2f2f2, #f2f2f2), radial-gradient(circle at top left, #66eb8e, #6bdaf6)', + 'linear-gradient(#F1F5FC, #F1F5FC), radial-gradient(circle at top left, #66eb8e, #66eb8e)', '--input-icon': '#9ca0a9', '--input-placeholder': 'rgba(40, 40, 40, 0.5)', } @@ -64,11 +77,14 @@ const PANEL = { '--panel-header-border': '#8d98ae', '--panel-label-text': '#8d98ae', '--panel-full-height-background': '#fff', - '--panel-full-height-nav-background': '#f2f2f2', - '--panel-full-height-instructions-text': '#5c677f', + '--panel-full-height-nav-background': '#D4DEE4', + '--panel-full-height-instructions-text': '#8297A0', '--panel-full-height-instructions-border': 'rgba(0, 0, 0, 0.15)', '--panel-full-height-header-icon-color': '#394152', '--panel-receive-explanation': 'rgba(242, 242, 242, .5)', + '--view-layout-header-icon-color': '#282828', + '--panel-box-shadow': + '-3px -3px 17px 0 rgba(255, 255, 255, 0.83), 3px 3px 20px 0 rgba(18, 21, 23, 0.09)', } const MODAL = { @@ -76,8 +92,8 @@ const MODAL = { } const AUTH_STYLES = { - '--auth-main-container-background': '#EAF2F7', - '--auth-scan-qr-border': '#f2f2f2', + '--auth-main-container-background': '#fff', + '--auth-scan-qr-border': '#F1F5FC', '--auth-inner-container-box-shadow': `-16px -16px 17px 0 rgba(255, 255, 255, 0.44), 16px 16px 20px 0 rgba(18, 21, 23, 0.24)`, } @@ -88,7 +104,7 @@ const DASHBOARD = { '--dashboard-total-wallet-value-odd-row': '#f8f8f8', '--dashboard-total-wallet-value-total-text': '#394152', '--dashboard-asset-panel-asset-name': '#5c677f', - '--dashboard-token-balances-divider-line': '#f2f2f2', + '--dashboard-token-balances-divider-line': '#F1F5FC', '--dashboard-price-history-current-price': '#394152', } @@ -104,31 +120,34 @@ const SIDEBAR = { } const TX_LIST = { - '--tx-list-odd-row': '#f2f2f2', + '--tx-list-odd-row': '#F1F5FC', '--tx-list-button-icon': '#394152', '--tx-list-copy-icon': '#9599a2', + '--tx-icon-color': '#32E096', + '--tx-list-box-shadow': + '-3px -3px 17px 0 rgba(255,255,255,0.44), 3px 4px 20px 0 rgba(18,21,23,0.24)', } const SETTINGS = { '--settings-item-label': '#343b4a', '--settings-item-icon': '#cccccc', - '--settings-item-border-color': '#f2f2f2', - '--settings-link-text': '#3DF4A6', - '--settings-select-value-text': '#3DF4A6', + '--settings-item-border-color': '#F1F5FC', + '--settings-link-text': '#32E096', + '--settings-select-value-text': '#32E096', '--settings-donation-text': '#5c677f', '--settings-spacer': 'rgba(170, 178, 189, 0.3)', } const NODE_SELECT = { - '--node-select-header-background': '#f2f2f2', - '--node-select-icon-color': '#3DF4A6', + '--node-select-header-background': '#F1F5FC', + '--node-select-icon-color': '#282828', '--node-select-automatic-select-button-text': '#5c677f', '--node-select-refresh-icon': '#394152', '--node-select-node-count': '#5c677f', } const AMOUNTS_PANEL = { - '--amounts-panel-first-row-background': '#f2f2f2', + '--amounts-panel-first-row-background': '#F1F5FC', '--amounts-panel-second-row-background': '#fff', '--amounts-panel-asset-name-text': '#515151', '--amounts-panel-asset-amount-text': '#515151', @@ -139,6 +158,7 @@ const CONTACTS = { '--contacts-odd-numbered-row': 'rgba(230, 230, 230, 0.1)', '--contacts-group-header-background': '#f6f7f8', '--contacts-group-header-text': '#394152', + '--contacts-delete-contact-name': '#394152', } const SEND = { @@ -157,7 +177,7 @@ const NEWS = { export const LIGHT_NETWORK_CONFIG_TOOLTIP = { '--network-config-tooltip-label': '#8D98AE', - '--network-config-tooltip-background': '#f8f8f8', + '--network-config-tooltip-background': '#fff', '--network-config-tooltip-color': '#394152', }