Skip to content

Commit

Permalink
feature: beta release feedback (#2008)
Browse files Browse the repository at this point in the history 
* Implements numeruous design enhancements, fixes activity export

* Updates snapshots

* Fix icon color in wallet manager

* Massive amounts of design polish on both themes and many components

* Lint and fix snapshots

* Clean up dead code

* Clean up dead code

* Clean up dead code

* lint
  • Loading branch information
@comountainclimber
comountainclimber committed Nov 6, 2020
1 parent a020be8 commit d947edc
Show file tree
Hide file tree
Showing 45 changed files with 658 additions and 355 deletions.
442 changes: 280 additions & 162 deletions __tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap
View file

Large diffs are not rendered by default.

56 changes: 36 additions & 20 deletions __tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -1008,51 +1010,61 @@ 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)",
"--dashboard-asset-panel-asset-name": "#5c677f",
"--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",
Expand All @@ -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",
Expand All @@ -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",
}
}
>
Expand Down
10 changes: 10 additions & 0 deletions app/assets/icons/wallet-green.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 5 additions & 8 deletions app/assets/icons/wallet.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 3 additions & 5 deletions app/components/Blockchain/Transaction/Transaction.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
width: 200px;
font-size: 14px;
text-align: center;
font-family: var(--font-gotham-book);
}

.pendingTxDate {
Expand All @@ -21,7 +20,6 @@
}

.txLabelContainer {
font-family: var(--font-gotham-book);
font-size: 14px;
display: flex;
text-align: center;
Expand Down Expand Up @@ -127,23 +125,23 @@
.claimIconContainer {
svg {
path {
fill: #ffcf48;
fill: var(--tx-icon-color);
}
}
}

.sendIconContainer {
svg {
path {
fill: #ff967e;
fill: #d355e7;
}
}
}

.receiveIconContainer {
svg {
path {
fill: #82e092;
fill: var(--tx-icon-color);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/Button/Button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
}

&.secondaryRaised {
color: var(--base-text);
color: var(--secondary-raised-base-text);

path {
fill: var(--base-text);
Expand Down
11 changes: 8 additions & 3 deletions app/components/Contacts/ContactsPanel/ContactsPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,9 +231,14 @@ export default class ContactsPanel extends React.Component<Props, State> {

showModal(MODAL_TYPES.CONFIRM, {
title: 'Confirm Delete',
text: `${intl.formatMessage({
id: 'confirmRemoveContact',
})} - ${name}`,
renderBody: () => (
<div className={styles.confirmDeleteModalPrompt}>
{`${intl.formatMessage({
id: 'confirmRemoveContact',
})}`}
<h2>{name}</h2>
</div>
),
onClick: () => {
this.props.deleteContact(name)
showSuccessNotification({
Expand Down
13 changes: 13 additions & 0 deletions app/components/Contacts/ContactsPanel/ContactsPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
11 changes: 8 additions & 3 deletions app/components/Contacts/EditContactPanel/EditContactPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,14 @@ export default class EditContactPanel extends React.Component<Props> {

showModal(MODAL_TYPES.CONFIRM, {
title: 'Confirm Delete',
text: `${intl.formatMessage({
id: 'confirmRemoveContact',
})} - ${name}`,
renderBody: () => (
<div className={styles.confirmDeleteModalPrompt}>
{`${intl.formatMessage({
id: 'confirmRemoveContact',
})}`}
<h2>{name}</h2>
</div>
),
onClick: () => {
this.props.deleteContact(name)
showSuccessNotification({
Expand Down
16 changes: 14 additions & 2 deletions app/components/Contacts/EditContactPanel/EditContactPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
4 changes: 1 addition & 3 deletions app/components/Dashboard/AssetBalancesPanel/AssetBalancesPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion app/components/DialogueBox/DialogueBox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
min-width: 24px;

path {
fill: #d355e7;
fill: #d355e7 !important;
}
}
}
1 change: 1 addition & 0 deletions app/components/Inputs/TextInput/TextInput.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion app/components/LoadingPanel/LoadingPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class LoadingPanel extends React.Component<Props> {
<Panel
className={classNames(styles.loadingPanel, this.props.className)}
contentClassName={styles.content}
renderHeader={this.renderHeader}
renderHeader={this.props.title ? this.renderHeader : null}
>
<Loader />
</Panel>
Expand Down
2 changes: 2 additions & 0 deletions app/components/Modals/BaseModal/BaseModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}}
Expand Down
Loading

0 comments on commit d947edc

Please sign in to comment.