Skip to content

Commit 54b7265

Browse files
DeeJayEllynikolaglumac
DeeJayElly
and
nikolaglumac
authored
[DDW-161] Fix theming issues on the wallet import overlays (#1983)
* [DDW-161] - Fix theming issues on the wallet import overlays - Adding fixes for button hover, focus state. Adding tooltip on input fields. Fixing focus, blur on input fields. * [DDW-161] - Fix theming issues on the wallet import overlays - Adding fixes for button hover, focus state. Adding tooltip on input fields. Fixing focus, blur on input fields. * [DDW-161] - Fix theming issues on the wallet import overlays - Fixing left button - arrow button visibility * [DDW-161] - Fix theming issues on the wallet import overlays - Fixing formatting issues * [DDW-161] - Fix theming issues on the wallet import overlays - Adding close button color variable for all themes * [DDW-161] - Fix theming issues on the wallet import overlays - Adding new color variables for all themes * [DDW-161] - Fix theming issues on the wallet import overlays - Adding new color variables for all themes * [DDW-161] - Fix theming issues on the wallet import overlays - Adding new color variables for all themes * [DDW-161] - Fix theming issues on the wallet import overlays - changelog * [DDW-161] - Fix theming issues on the wallet import overlays - changelog * [DDW-161] - Fix theming issues on the wallet import overlays - fixing colors for lightblue, yellow and white themes * [DDW-161] - Fix theming issues on the wallet import overlays - fixing colors for lightblue, yellow and white themes * [DDW-161] - Fix theming issues on the wallet import overlays - fixing colors for lightblue, yellow and white themes * [DDW-161] - Fix theming issues on the wallet import overlays - fixing colors for lightblue, yellow and white themes * [DDW-161] - Fix theming issues on the wallet import overlays - fixing colors for lightblue, yellow and white themes * [DDW-161] - Fix theming issues on the wallet import overlays - fixing esc blur event * [DDW-161] - Fix theming issues on the wallet import overlays - fixing esc blur event * [DDW-161] - Fix theming issues on the wallet import overlays - fixing esc blur event * [DDW-161] - Fix theming issues on the wallet import overlays - fixing coloring * [DDW-161] - Fix theming issues on the wallet import overlays - fixing coloring * [DDW-161] - Fix theming issues on the wallet import overlays - fixing coloring * [DDW-161] - Fix theming issues on the wallet import overlays - fixing coloring - formating * [DDW-161] - Fix theming issues on the wallet import overlays - fixing coloring - fixing InlineEditingSmallInput rendering * [DDW-161] Improve wallet import dialog reseting * [DDW-161] - Fix theming issues on the wallet import overlays - fixing checkbox * [DDW-161] - Fix theming issues on the wallet import overlays - fixing tooltip * [DDW-161] - Fix theming issues on the wallet import overlays - fixing checkbox * [DDW-161] - Fix theming issues on the wallet import overlays - fixing fonts * [DDW-161] - Fix theming issues on the wallet import overlays - fixing formating * [DDW-161] - Fix theming issues on the wallet import overlays - fixing border color * [DDW-161] Fixes * [DDW-161] Fix wallet row status icons * [DDW-161] - Fix theming issues on the wallet import overlays - error colors * [DDW-161] - Fix theming issues on the wallet import overlays - error colors * [DDW-161] Fix wallet status icons * [DDW-161] Fix counter positioning * [DDW-161] - Fix theming issues on the wallet import overlays - error colors * [DDW-161] - Fix theming issues on the wallet import overlays - error colors * [DDW-161] - Fix theming issues on the wallet import overlays - error colors * [DDW-161] - Fix theming issues on the wallet import overlays - itn theme button background fix * [DDW-161] - Fix theming issues on the wallet import overlays - input field blur on focus * [DDW-161] - Fix theming issues on the wallet import overlays - input field blur on focus * [DDW-161] - Fix theming issues on the wallet import overlays - yellow theme fixes * [DDW-161] Fix checkbox tooltip * [DDW-161] - Fix theming issues on the wallet import overlays - yellow theme fixes * [DDW-161] - Fix theming issues on the wallet import overlays - yellow theme fixes * [DDW-161] - Fix theming issues on the wallet import overlays - radio group/button coloring * [DDW-161] - Fix theming issues on the wallet import overlays - radio group/button coloring * [DDW-161] Fix receive screen * [DDW-161] - Fix theming issues on the wallet import overlays - radio group/button coloring * [DDW-161] - Fix theming issues on the wallet import overlays - radio group/button coloring * [DDW-161] - Fix theming issues on the wallet import overlays - error focus * [DDW-161] - Fix theming issues on the wallet import overlays - error focus * [DDW-161] - Fix theming issues on the wallet import overlays - border colors on inputs fix * [DDW-161] - Fix theming issues on the wallet import overlays - border colors for checkboxes * [DDW-161] - Fix theming issues on the wallet import overlays - alphabetical ordering * [DDW-161] Final CSS fixes * [DDW-161] Updates CHANGELOG Co-authored-by: Nikola Glumac <niglumac@gmail.com>
1 parent 30afa67 commit 54b7265

24 files changed

+613
-392
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ Changelog
33

44
## 1.0.0
55

6+
### Fixes
7+
8+
- Fixed UI issues on wallet import overlays ([PR 1983](https://github.com/input-output-hk/daedalus/pull/1983))
9+
610
### Chores
711

812
- Rename "Daedalus" to "Daedalus Mainnet" and update state directory path ([PR 1986](https://github.com/input-output-hk/daedalus/pull/1986))

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ export default class DisplaySettings extends Component<Props> {
8080
render() {
8181
const { theme, selectTheme } = this.props;
8282
const { intl } = this.context;
83-
const { isIncentivizedTestnet, isFlight } = global;
83+
const { isIncentivizedTestnet, isFlight, environment } = global;
84+
const { isDev } = environment;
8485

8586
const themeIncentivizedTestnetClasses = classnames([
8687
theme === THEMES.INCENTIVIZED_TESTNET ? styles.active : styles.inactive,
@@ -205,7 +206,7 @@ export default class DisplaySettings extends Component<Props> {
205206
</div>
206207

207208
<div className={styles.themesRowWrapper}>
208-
{isIncentivizedTestnet && (
209+
{(isDev || isIncentivizedTestnet) && (
209210
<button
210211
className={themeIncentivizedTestnetClasses}
211212
onClick={selectTheme.bind(this, {
@@ -223,7 +224,7 @@ export default class DisplaySettings extends Component<Props> {
223224
</button>
224225
)}
225226

226-
{isFlight && (
227+
{(isDev || isFlight) && (
227228
<button
228229
className={themeFlightCandidateClasses}
229230
onClick={selectTheme.bind(this, {

‎source/renderer/app/components/wallet/receive/WalletReceiveRandom.js‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -241,26 +241,33 @@ export default class WalletReceiveRandom extends Component<Props, State> {
241241
<BorderedBox fullHeight>
242242
<div className={styles.container}>
243243
<div className={styles.qrCodeAndInstructions}>
244-
<div className={styles.qrCode}>
245-
<QRCode
246-
value={walletAddress}
247-
bgColor={qrCodeBackgroundColor}
248-
fgColor={qrCodeForegroundColor}
249-
size={152}
250-
/>
251-
</div>
244+
{walletAddress && (
245+
<div className={styles.qrCode}>
246+
<QRCode
247+
value={walletAddress}
248+
bgColor={qrCodeBackgroundColor}
249+
fgColor={qrCodeForegroundColor}
250+
size={152}
251+
/>
252+
</div>
253+
)}
252254

253255
<div className={styles.instructions}>
254-
<div className={walletAddressClasses}>
255-
{walletAddress}
256-
<CopyToClipboard
257-
text={walletAddress}
258-
// eslint-disable-next-line react/jsx-no-bind
259-
onCopy={onCopyAddress.bind(this, walletAddress)}
260-
>
261-
<SVGInline svg={iconCopy} className={styles.copyIconBig} />
262-
</CopyToClipboard>
263-
</div>
256+
{walletAddress && (
257+
<div className={walletAddressClasses}>
258+
{walletAddress}
259+
<CopyToClipboard
260+
text={walletAddress}
261+
// eslint-disable-next-line react/jsx-no-bind
262+
onCopy={onCopyAddress.bind(this, walletAddress)}
263+
>
264+
<SVGInline
265+
svg={iconCopy}
266+
className={styles.copyIconBig}
267+
/>
268+
</CopyToClipboard>
269+
</div>
270+
)}
264271

265272
<div className={styles.hashLabel}>
266273
{intl.formatMessage(messages.walletAddressLabel)}
@@ -280,23 +287,29 @@ export default class WalletReceiveRandom extends Component<Props, State> {
280287
</div>
281288
</div>
282289

283-
<div className={styles.generatedAddresses}>
284-
<h2>
285-
{intl.formatMessage(messages.generatedAddressesSectionTitle)}
286-
<div className={styles.hideUsed}>
287-
<TinySwitch
288-
label={intl.formatMessage(messages.showUsedLabel)}
289-
onChange={this.toggleUsedAddresses}
290-
checked={showUsed}
290+
{walletAddresses.length ? (
291+
<>
292+
<div className={styles.generatedAddresses}>
293+
<h2>
294+
{intl.formatMessage(
295+
messages.generatedAddressesSectionTitle
296+
)}
297+
<div className={styles.hideUsed}>
298+
<TinySwitch
299+
label={intl.formatMessage(messages.showUsedLabel)}
300+
onChange={this.toggleUsedAddresses}
301+
checked={showUsed}
302+
/>
303+
</div>
304+
</h2>
305+
306+
<VirtualAddressesList
307+
rows={this.getFilteredAddresses(walletAddresses)}
308+
renderRow={this.renderRow}
291309
/>
292310
</div>
293-
</h2>
294-
295-
<VirtualAddressesList
296-
rows={this.getFilteredAddresses(walletAddresses)}
297-
renderRow={this.renderRow}
298-
/>
299-
</div>
311+
</>
312+
) : null}
300313
</div>
301314
</BorderedBox>
302315
</div>

‎source/renderer/app/components/wallet/receive/WalletReceiveRandom.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@
3939
.qrCode {
4040
align-items: flex-start;
4141
display: flex;
42+
height: 160px;
4243
margin-right: 20px;
44+
min-width: 160px;
45+
width: 160px;
4346

4447
canvas {
4548
border: 4px solid var(--theme-receive-qr-code-background-color);

‎source/renderer/app/components/wallet/wallet-import/WalletImportFileDialog.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Input } from 'react-polymorph/lib/components/Input';
1111
import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
1212
import SVGInline from 'react-svg-inline';
1313
import classNames from 'classnames';
14+
import { get } from 'lodash';
1415
import styles from './WalletImportFileDialog.scss';
1516
import RadioSet from '../../widgets/RadioSet';
1617
import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -131,6 +132,14 @@ export default class WalletImportFileDialog extends Component<Props, State> {
131132
}
132133
};
133134

135+
get input() {
136+
const fallbackInput = {
137+
blur: () => {},
138+
focus: () => {},
139+
};
140+
return get(this, 'importPathInput.inputElement.current', fallbackInput);
141+
}
142+
134143
isImportFromStateDir = (importFrom: ImportFromOption) =>
135144
importFrom === ImportFromOptions.STATE_DIR;
136145

@@ -150,6 +159,7 @@ export default class WalletImportFileDialog extends Component<Props, State> {
150159
exportSourcePath,
151160
defaultExportSourcePath,
152161
} = this.props;
162+
153163
const title = intl.formatMessage(messages.title);
154164
const description = <FormattedHTMLMessage {...messages.description} />;
155165
const stateFolderLabel = intl.formatMessage(messages.stateFolderLabel);
@@ -166,10 +176,7 @@ export default class WalletImportFileDialog extends Component<Props, State> {
166176
const onLinkClick = () =>
167177
onOpenExternalLink(intl.formatMessage(messages.linkUrl));
168178

169-
const resetErrorCheck =
170-
this.importPathInput &&
171-
this.importPathInput.inputElement.current.value !== exportSourcePath;
172-
const error = !resetErrorCheck && exportErrors !== '';
179+
const error = exportErrors !== '';
173180

174181
const inputClasses = classNames([
175182
styles.stateFolderInput,
@@ -199,7 +206,6 @@ export default class WalletImportFileDialog extends Component<Props, State> {
199206
icon={closeCrossThin}
200207
onClose={onClose}
201208
/>
202-
<div className={styles.backgroundContainer} />
203209
<div className={styles.content}>
204210
<div className={styles.title}>{title}</div>
205211
<div className={styles.description}>{description}</div>
@@ -249,6 +255,7 @@ export default class WalletImportFileDialog extends Component<Props, State> {
249255
? defaultExportSourcePath
250256
: 'secret.key'
251257
}
258+
readOnly
252259
/>
253260
<Button
254261
className={styles.selectStateDirectoryButton}

0 commit comments

Comments
 (0)