[DDW-863] Change styles

Author: Lucas Araujo

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;
   }
 }

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%;

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<Props> {
@@ -30,13 +29,12 @@ export default class NodeSyncStatusIcon extends Component<Props> {
   };
 
   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);
 

source/renderer/app/components/widgets/NodeSyncStatusIcon.scss

@@ -1,5 +1,6 @@
 .component {
-  margin: 0 40px;
+  margin-left: 26px;
+  margin-right: 39px;
   overflow: visible;
 
   &:hover {

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%;

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<Props> {
         syncPercentage={100}
         isProduction
         isMainnet
-        {...(boolean('hasTadaIcon', true) ? { hasTadaIcon: true } : {})}
       />
-      <span
-        className={classNames(
-          topBarStyles.rectangle,
-          boolean('hasTadaIcon') && topBarStyles.hasTadaIcon
-        )}
-      />
-      <DiscreetToggleTopBar hasTadaIcon={boolean('hasTadaIcon')} />
+      <span className={topBarStyles.rectangle} />
+      <DiscreetToggleTopBar />
       {boolean('hasTadaIcon') && (
         <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
       )}

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
     />
-    <span
-      className={classNames(topBarStyles.rectangle, topBarStyles.hasTadaIcon)}
-    />
-    <DiscreetToggleTopBar hasTadaIcon />
+    <span className={topBarStyles.rectangle} />
+    <DiscreetToggleTopBar />
     <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
     <NewsFeedIcon
       onNewsFeedIconClick={action('onNewsFeedIconClick')}
@@ -63,12 +59,9 @@ const topBarStagingEnv = (currentTheme) => (
       syncPercentage={100}
       isProduction={false}
       isMainnet={false}
-      hasTadaIcon
-    />
-    <span
-      className={classNames(topBarStyles.rectangle, topBarStyles.hasTadaIcon)}
     />
-    <DiscreetToggleTopBar hasTadaIcon />
+    <span className={topBarStyles.rectangle} />
+    <DiscreetToggleTopBar />
     <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
     <NewsFeedIcon
       onNewsFeedIconClick={action('onNewsFeedIconClick')}
@@ -87,17 +80,9 @@ const topBarProductionEnv = (currentTheme) => (
     isShelleyActivated={isShelleyTestnetTheme(currentTheme)}
     isAlonzoActivated={boolean('isAlonzoActivated', false)}
   >
-    <NodeSyncStatusIcon
-      isSynced
-      syncPercentage={100}
-      isProduction
-      isMainnet
-      hasTadaIcon
-    />
-    <span
-      className={classNames(topBarStyles.rectangle, topBarStyles.hasTadaIcon)}
-    />
-    <DiscreetToggleTopBar hasTadaIcon />
+    <NodeSyncStatusIcon isSynced syncPercentage={100} isProduction isMainnet />
+    <span className={topBarStyles.rectangle} />
+    <DiscreetToggleTopBar />
     <TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
     <NewsFeedIcon
       onNewsFeedIconClick={action('onNewsFeedIconClick')}

storybook/stories/staking/CountdownParty.stories.js

@@ -42,7 +42,6 @@ storiesOf('Decentralization | Countdown', module)
             syncPercentage={100}
             isProduction
             isMainnet
-            hasTadaIcon={isAlonzoActivated}
           />
           {isAlonzoActivated && (
             <TadaButton