Skip to content

Commit 714306b

Browse files
mchappelltomislavhoracek
mchappell
and
tomislavhoracek
authored
[DDW-680] Small UI/UX fixes (#2685)
* fix: padding for share wallet address dialog * fix: choose stake pool back to top button display * wallet delete name field matches wallet creaation name field * address tooltip says copied while checkmark icon visible * change stake pools copy 'staking pools you are delegating to' to 'stake pools to which you are delegating' * wallet name in topBar always uses single line with ellipsis * use 100% opacity for receiving address in send confirmation dialog * use correct hover opacity for 'Copy address' in wallet receive dialog * add hovered state to copy button when hovering over wallet public key * [DDW-680] alphabetise css properties * [DDW-680] alphabetise css properties * [DDW-680] fix loading spinner position when delgation center wallet is restoring * [DDW-680] Adjust distance between wallet name and balance in delegation center * [DDW-680] unify tooltip color for NodeSyncStatusIcon * [DDW-680] adjust delegation center styling so that countdown elements always fit on one line * [DDW-680] Align create wallet password tooltip * [DDW-680] disabled state opacity for send confirmation dialog * [DDW-680] use font-medium for not recommended staking pool setting * [DDW-680] Increase drop shadow in PoolPopOver * [DDW-680] remove last row gap in staking pool tiles * [DDW-680] Native token description word breaks + copy icon * [DDW-680] Only show CoinGecko conversion information if currencies have loaded * fix: padding for share wallet address dialog * fix: choose stake pool back to top button display * address tooltip says copied while checkmark icon visible * change stake pools copy 'staking pools you are delegating to' to 'stake pools to which you are delegating' * wallet name in topBar always uses single line with ellipsis * use 100% opacity for receiving address in send confirmation dialog * use correct hover opacity for 'Copy address' in wallet receive dialog * add hovered state to copy button when hovering over wallet public key * [DDW-680] alphabetise css properties * [DDW-680] alphabetise css properties * [DDW-680] fix loading spinner position when delgation center wallet is restoring * [DDW-680] Adjust distance between wallet name and balance in delegation center * [DDW-680] unify tooltip color for NodeSyncStatusIcon * [DDW-680] adjust delegation center styling so that countdown elements always fit on one line * [DDW-680] Align create wallet password tooltip * [DDW-680] disabled state opacity for send confirmation dialog * [DDW-680] use font-medium for not recommended staking pool setting * [DDW-680] Increase drop shadow in PoolPopOver * [DDW-680] remove last row gap in staking pool tiles * [DDW-680] Native token description word breaks + copy icon * [DDW-680] Only show CoinGecko conversion information if currencies have loaded * [DDW-680] Continue rebase * [DDW-680] Update translation messages * [DDW-680] Disable empty wallets filter button * [DDW-680] Re-center 'undelegate' text in delegation tile * [DDW-680] fix 'x' icon shifted to bottom * [DDW-680] Vertically center 'Redelegate' button text * [DDW-680] Set max-width of stake pools table saturation bar to 100px * [DDW-680] Fix colored stakepool line * [DDW-680] fix scrollbar in asset name * [DDW-680] set max-width of saturation bar in staking pools table to 40px * [DDW-680] Fix color of 'x' icon and scrollbar in update overlay and cardano node status * [DDW-680] Update location and description of hardware wallet connection failure * [DDW-680] Fix PoolPopOver click behavior * [DDW-680] fix poolpopover interaction * [DDW-680] set correct color for ITN rquiredWordsInfo * [DDW-680] Make all of public key input hoverable for copy action when visible * [DDW-680] Correct color for incentivized testnet rewards dialog close button * [DDW-680] Move dropdown icon in send tokens input down 1px * [DDW-680] Add overflow property to delegation center tiles to make stake pool tiles colored lines fit within element * [DDW-680] Add overflow property to delegation center tiles to make stake pool tiles colored lines fit within element * [DDW-680] Add overflow property to delegation center tiles to make stake pool tiles colored lines fit within element * [DDW-680] Increase line-height to 1.46 in BigButtonForDialogs_description * [DDW-680] Add 4px after 'steps' label in restore wallet dialog * [DDW-680] update react-polymorph to use releasee candidate * [DDW-680] Update font family used in staking pool tiles and headings * [DDW-680] Update font family used in staking pool tiles and headings * [DDW-680] Move 'back to top' button down to prevent overlap with steps indicator * [DDW-680] Fix: glow effect in choose stake pools delegation dialog * [DDW-680] Make wallet name variable width * [DDW-680] ITN Rewards 'redeem to' disable field opacity * [DDW-680] fix lockfile * [DDW-680] Correct punctuation and error handling in hardware wallet setup connection failure * [DDW-680] Remove assetContent value check to be addressed when standardising copy acions * [DDW-680] Revert naming of isHovered poolPopOver and adjust method for closing tooltip * [DDW-680] use percentage instead of vw for wallet name width * [DDW-680] Adjust hover check in poolPopOver * Fix scrollbar color for cardano and light blue theme in cardano node status * [DDW-680] Update 'redeem rewards to' opacity for chevron if disabled * [DDW-680] Use --font-regular in overlay checkboxes in ITN rewards dialog * [DDW-680] Update dialog component secondary action opacity 0.8 * [DDW-680] Update starting scroll position in restore dialog * [DDW-680] Vertically center 'moderated by' button in stake pools heading * [DDW-680] Vertically center 'moderated by' button in stake pools heading * [DDW-680] Update checkbox hover in dialog overlays, update secondary link in dialog actions * [DDW-680] Update Changelog * [DDW-680] Update ITN rewards checkbox color * [DDW-680] Adjust line-height for moderation information in stake pools list * [DDW-680] Fix alignment of calculating fees loading spinner * [DDW-680] Adjust truncation for wallet name * [DDW-680] Adjust wallet name width to prevent overlap with menu buttons * [DDW-680] Fix vertical alignment in stake pools tile for unknown stake pool * [DDW-680] Unify NodeSyncStatus tooltip * [DDW-680] Update checkbox text color in overlays, update secondary link color in overlays * [DDW-680] Update tooltip display of unnformatted values for native tokens * [DDW-680] Prevent overlap of text in dialog title * [DDW-680] Prevent overlap of text in dialog title * [DDW-680] Update voting info font-weight * [DDW-680] Adjust dialog close button style in import wallet * [DDW-680] Remove unused import * [DDW-680] Show wallet in list immediately after restore * [DDW-680] Move token dropdown indicator down 1px * [DDW-680] ITN Rewards dialog uses dark text * [DDW-680] Update hardware wallet connect failure message * [DDW-680] Update wallet import dialog close button * [DDW-680] Alphabetize css properties * [DDW-680] Update 'i' tooltip top positions * [DDW-680] Refactor poolPopover hover * [DDW-680] fix nodeSyncStatusIcon tooltip fix asset amount tooltip display fix stake pools glow * [DDW-680] Update react-polymorph package * [DDW-680] Update lockfile * [DDW-680] Adjusted color of overlays and close icons in dialogs Co-authored-by: Tomislav Horaček <[email protected]>
1 parent 991987b commit 714306b

File tree

77 files changed

+716
-338
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+716
-338
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- Fixed issues relating to minimum window size in Daedalus ([PR 2719](https://github.com/input-output-hk/daedalus/pull/2719))
1414
- Updated "Trezor T" image shown on the "Pair a hardware wallet device" dialog ([PR 2712](https://github.com/input-output-hk/daedalus/pull/2712))
1515
- Fixed transaction timestamps localization ([PR 2702](https://github.com/input-output-hk/daedalus/pull/2702))
16+
- Small UI/UX Fixes ([PR 2685](https://github.com/input-output-hk/daedalus/pull/2685))
1617

1718
### Chores
1819

‎source/renderer/app/components/appUpdate/AppUpdateOverlay.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import styles from './AppUpdateOverlay.scss';
1818
import DialogCloseButton from '../widgets/DialogCloseButton';
1919
import ProgressBarLarge from '../widgets/ProgressBarLarge';
2020
import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
21+
import closeCrossThin from '../../assets/images/close-cross-thin.inline.svg';
2122

2223
const messages = defineMessages({
2324
title: {
@@ -355,7 +356,11 @@ export default class AppUpdateOverlay extends Component<Props, State> {
355356
onClick={!isUpdateDownloaded ? onClose : () => {}}
356357
>
357358
{!isUpdateDownloaded && !isAutomaticUpdateFailed && (
358-
<DialogCloseButton onClose={onClose} className={styles.closeButton} />
359+
<DialogCloseButton
360+
onClose={onClose}
361+
icon={closeCrossThin}
362+
className={styles.closeButton}
363+
/>
359364
)}
360365
<h1 className={styles.title}>{intl.formatMessage(messages.title)}</h1>
361366
<span className={styles.subtitle}>

‎source/renderer/app/components/appUpdate/AppUpdateOverlay.scss‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -234,19 +234,38 @@
234234
}
235235

236236
.closeButton {
237-
border-radius: 50%;
238-
height: 44px;
239-
opacity: 0.5;
240-
right: 10px;
241-
top: 10px;
242-
width: 44px;
243-
z-index: 999;
244-
245-
&:hover {
246-
background-color: var(
247-
--theme-news-overlay-update-content-background-color
248-
);
249-
opacity: 0.8;
237+
cursor: pointer;
238+
display: flex;
239+
justify-content: flex-end;
240+
position: fixed;
241+
right: 15px;
242+
top: 15px;
243+
z-index: 1;
244+
245+
span {
246+
border-radius: 50%;
247+
height: 44px;
248+
width: 44px;
249+
250+
&:hover {
251+
background-color: var(
252+
--theme-network-window-icon-close-hover-background
253+
);
254+
}
255+
}
256+
257+
svg {
258+
height: 12px;
259+
margin-top: 16px;
260+
width: 12px;
261+
262+
polygon {
263+
stroke: var(--theme-network-window-white-color);
264+
}
265+
266+
path {
267+
stroke: var(--theme-network-window-white-color);
268+
}
250269
}
251270
}
252271
}

‎source/renderer/app/components/assets/AssetContent.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,21 +118,24 @@
118118
font-size: 12px;
119119
line-height: 16px;
120120
opacity: 0.4;
121+
overflow: hidden;
121122
}
122123

123124
.value {
124125
cursor: pointer;
125126
font-size: 12px;
126127
line-height: 16px;
127128
overflow: visible;
128-
word-break: break-all;
129+
word-break: break-word;
129130
}
130131

131132
.copyIcon {
132-
display: inline-block;
133+
&:before {
134+
content: '\00a0';
135+
}
136+
display: inline;
133137
height: 10px;
134138
line-height: 0;
135-
margin-left: 5px;
136139
opacity: 0;
137140
transition: opacity 0s;
138141

‎source/renderer/app/components/hardware-wallet/HardwareWalletStatus.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ const messages = defineMessages({
2222
},
2323
connecting_failed: {
2424
id: 'wallet.hardware.deviceStatus.connecting.failed',
25-
defaultMessage: '!!!Unable to detect your hardware wallet device. ',
25+
defaultMessage:
26+
'!!!Disconnect and reconnect your device to restart the process.',
2627
description: '"Connect failed" device state',
2728
},
2829
connecting_known: {
@@ -49,7 +50,7 @@ const messages = defineMessages({
4950
exportingPublicKeyError: {
5051
id: 'wallet.hardware.deviceStatus.exportingPublicKeyError',
5152
defaultMessage:
52-
'!!!Disconnect and reconnect your device to restart the process',
53+
'!!!Disconnect and reconnect your device to restart the process.',
5354
description:
5455
'"Disconnect and reconnect your device to start the process again" device state',
5556
},
@@ -311,8 +312,7 @@ export default class HardwareWalletStatus extends Component<Props, State> {
311312
<SVGInline svg={clearIcon} className={styles.clearIcon} />
312313
)}
313314
</div>
314-
{(hwDeviceStatus === HwDeviceStatuses.EXPORTING_PUBLIC_KEY_FAILED ||
315-
hwDeviceStatus === HwDeviceStatuses.CONNECTING_FAILED) && (
315+
{hwDeviceStatus === HwDeviceStatuses.EXPORTING_PUBLIC_KEY_FAILED && (
316316
<div className={styles.errorText}>
317317
{intl.formatMessage(messages.exportingPublicKeyError)}
318318
</div>

‎source/renderer/app/components/layout/TopBar.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,22 @@
3030
display: flex;
3131
flex-direction: column;
3232
font-family: var(--font-regular);
33+
max-width: 73%;
3334
text-align: center;
3435
user-select: text;
3536

3637
.walletName {
3738
-webkit-box-orient: vertical;
3839
color: var(--theme-topbar-wallet-name-color);
40+
display: inline;
3941
font-size: 21px;
40-
-webkit-line-clamp: 1;
4142
line-height: 25px;
4243
margin-bottom: 4px;
43-
max-width: 320px;
4444
overflow: hidden;
4545
position: relative;
4646
text-overflow: ellipsis;
47+
white-space: nowrap;
48+
width: 100%;
4749
word-break: keep-all;
4850
}
4951

@@ -82,6 +84,8 @@
8284
display: flex;
8385
flex-grow: 1;
8486
justify-content: center;
85-
margin-right: 24px;
87+
left: 70px;
88+
position: absolute;
89+
width: calc(100% - 140px);
8690
}
8791
}

‎source/renderer/app/components/settings/categories/StakePoolsSettings.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
}
7171

7272
b {
73-
font-family: var(--font-semibold);
73+
font-family: var(--font-medium);
7474
}
7575

7676
:global {

‎source/renderer/app/components/settings/categories/WalletsSettings.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,14 @@ export default class WalletSettings extends Component<Props> {
112112
)}
113113
hasSearch
114114
/>
115-
<div className={styles.disclaimer}>
116-
<FormattedHTMLMessage
117-
{...messages.currencyDisclaimer}
118-
values={{ currencyApiName: currencyConfig.name }}
119-
/>
120-
</div>
115+
{currencyList.length > 0 && currencySelected && (
116+
<div className={styles.disclaimer}>
117+
<FormattedHTMLMessage
118+
{...messages.currencyDisclaimer}
119+
values={{ currencyApiName: currencyConfig.name }}
120+
/>
121+
</div>
122+
)}
121123
</div>
122124
)}
123125
</div>

‎source/renderer/app/components/staking/delegation-center/DelegationCenterHeader.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@
1414
.mainContainer {
1515
display: flex;
1616
justify-content: center;
17-
18-
@media (max-width: 1024px) {
19-
flex-direction: column;
20-
}
2117
}
2218

2319
.heading {

‎source/renderer/app/components/staking/delegation-center/WalletRow.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@
2424
.left {
2525
display: flex;
2626
flex-direction: column;
27-
justify-content: space-evenly;
27+
justify-content: center;
2828

2929
.title {
3030
@extend %accentText;
31+
margin-bottom: 4px;
3132

3233
.hardwareWalletsIcon {
3334
svg {
@@ -66,7 +67,9 @@
6667
background-color: var(--theme-button-flat-background-color-disabled);
6768
border-radius: 4px;
6869
height: 71px;
70+
overflow: hidden;
6971
padding: 25px 9px;
72+
position: relative;
7073
text-align: center;
7174
width: 80px;
7275

@@ -133,7 +136,7 @@
133136
display: flex;
134137
flex-direction: column;
135138
justify-content: space-between;
136-
padding: 7px 0 0 0;
139+
padding: 6px 0 0 0;
137140
}
138141

139142
.stakePoolTicker {
@@ -163,7 +166,8 @@
163166
}
164167

165168
.stakePoolUnknown {
166-
transition: margin-top 200ms ease-in-out;
169+
transition: margin-top 200ms ease-in-out,
170+
padding-top 200ms ease-in-out;
167171
}
168172

169173
.noDataDash {
@@ -274,13 +278,14 @@
274278

275279
.stakePoolUnknown,
276280
.nonDelegatedText {
277-
transition: margin-top 200ms ease-in-out;
281+
transition: margin-top 200ms ease-in-out,
282+
padding-top 200ms ease-in-out;
278283
}
279284

280285
.action {
281-
bottom: -26px;
282-
margin-left: -12px;
283-
position: relative;
286+
bottom: 0;
287+
left: 0;
288+
position: absolute;
284289
}
285290
}
286291
}
@@ -331,7 +336,7 @@
331336

332337
&.isRestoring {
333338
display: flex;
334-
justify-content: center;
339+
justify-content: flex-end;
335340
}
336341
}
337342

@@ -340,12 +345,9 @@
340345
.stakePoolTile {
341346
&.futureStakePoolTileUndelegated,
342347
&.futureStakePoolTileUndefined {
343-
.stakePoolUnknown {
344-
margin-top: -6px;
345-
}
346-
348+
.stakePoolUnknown,
347349
.nonDelegatedText {
348-
margin-top: -5px;
350+
margin-top: -6px;
349351
}
350352
}
351353

0 commit comments

Comments
 (0)