From 14ab2747a86e5ce2c7d9fa21e4b94518d85dfa28 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 10 Dec 2021 10:47:30 -0300 Subject: [PATCH] [DDW-863] Change styles --- .../app/components/layout/TopBar.scss | 6 ++-- .../syncing-connecting/SyncingConnecting.scss | 2 +- .../components/widgets/NodeSyncStatusIcon.js | 4 +-- .../widgets/NodeSyncStatusIcon.scss | 3 +- .../DiscreetToggleTopBar.scss | 2 +- storybook/stories/_support/StoryLayout.js | 11 ++----- .../environment/TopBarEnvironment.stories.js | 29 +++++-------------- .../stories/staking/CountdownParty.stories.js | 1 - 8 files changed, 16 insertions(+), 42 deletions(-) diff --git a/source/renderer/app/components/layout/TopBar.scss b/source/renderer/app/components/layout/TopBar.scss index ca47705eac..7d15d0dc0b 100644 --- a/source/renderer/app/components/layout/TopBar.scss +++ b/source/renderer/app/components/layout/TopBar.scss @@ -4,7 +4,6 @@ display: flex; height: 84px; padding: 0 26px; - position: relative; z-index: 100; &.withoutWallet { @@ -37,12 +36,10 @@ .walletName { -webkit-box-orient: vertical; color: var(--theme-topbar-wallet-name-color); - display: inline; font-size: 21px; line-height: 25px; margin-bottom: 4px; overflow: hidden; - position: relative; text-overflow: ellipsis; white-space: nowrap; width: 100%; @@ -67,6 +64,7 @@ flex-shrink: 0; height: 50px; justify-content: center; + margin-right: 26px; width: 50px; .sidebarIcon { @@ -86,12 +84,12 @@ justify-content: center; margin: auto; min-width: 0; - padding-left: 26px; } .rectangle { border-right: 1px solid var(--theme-node-sync-icon-color); height: 12px; + margin-right: 28px; opacity: 0.3; } } diff --git a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss index c580c7a691..3615f77948 100644 --- a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss +++ b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss @@ -16,7 +16,7 @@ .newsFeedContainer { display: flex; justify-content: flex-end; - padding-right: 29px; + padding-right: 26px; padding-top: 20px; position: absolute; width: 100%; diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.js b/source/renderer/app/components/widgets/NodeSyncStatusIcon.js index 7d858b74db..3fd256c578 100644 --- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.js +++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.js @@ -21,7 +21,6 @@ const messages = defineMessages({ type Props = { isSynced: boolean, syncPercentage: number, - hasTadaIcon?: boolean, }; export default class NodeSyncStatusIcon extends Component { @@ -30,13 +29,12 @@ export default class NodeSyncStatusIcon extends Component { }; render() { - const { isSynced, syncPercentage, hasTadaIcon } = this.props; + const { isSynced, syncPercentage } = this.props; const { intl } = this.context; const statusIcon = isSynced ? syncedIcon : spinnerIcon; const componentClasses = classNames([ styles.component, isSynced ? styles.synced : styles.syncing, - hasTadaIcon ? styles.hasTadaIcon : null, ]); const percentage = syncPercentage.toFixed(syncPercentage === 100 ? 0 : 2); diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss b/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss index 3ad6ddfc64..aa731bd275 100644 --- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss +++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss @@ -1,5 +1,6 @@ .component { - margin: 0 40px; + margin-left: 26px; + margin-right: 39px; overflow: visible; &:hover { diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss index 3d0ad4df04..20e6a9c0dd 100644 --- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss +++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss @@ -1,5 +1,5 @@ .root { - margin: 0 28px; + margin-right: 18px; .discreetToggle { border-radius: 50%; diff --git a/storybook/stories/_support/StoryLayout.js b/storybook/stories/_support/StoryLayout.js index 5bd9e1b66e..d41a108644 100644 --- a/storybook/stories/_support/StoryLayout.js +++ b/storybook/stories/_support/StoryLayout.js @@ -7,7 +7,6 @@ import { observer, inject } from 'mobx-react'; import { get } from 'lodash'; import { action } from '@storybook/addon-actions'; import { select, boolean } from '@storybook/addon-knobs'; -import classNames from 'classnames'; import { isShelleyTestnetTheme } from './utils'; // Assets and helpers @@ -228,15 +227,9 @@ export default class StoryLayout extends Component { syncPercentage={100} isProduction isMainnet - {...(boolean('hasTadaIcon', true) ? { hasTadaIcon: true } : {})} /> - - + + {boolean('hasTadaIcon') && ( )} diff --git a/storybook/stories/nodes/environment/TopBarEnvironment.stories.js b/storybook/stories/nodes/environment/TopBarEnvironment.stories.js index 45ed4af2d3..aafb20717a 100644 --- a/storybook/stories/nodes/environment/TopBarEnvironment.stories.js +++ b/storybook/stories/nodes/environment/TopBarEnvironment.stories.js @@ -3,7 +3,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean } from '@storybook/addon-knobs'; -import classNames from 'classnames'; import StoryDecorator from '../../_support/StoryDecorator'; import StoryProvider from '../../_support/StoryProvider'; import SidebarLayout from '../../../../source/renderer/app/components/layout/SidebarLayout'; @@ -33,12 +32,9 @@ const topBarTestEnv = (currentTheme) => ( syncPercentage={100} isProduction={false} isMainnet={false} - hasTadaIcon /> - - + + ( syncPercentage={100} isProduction={false} isMainnet={false} - hasTadaIcon - /> - - + + ( isShelleyActivated={isShelleyTestnetTheme(currentTheme)} isAlonzoActivated={boolean('isAlonzoActivated', false)} > - - - + + + {isAlonzoActivated && (