[DDW-863] Remove absolute position styles

Author: Lucas Araujo

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

@@ -30,7 +30,7 @@
       display: flex;
       flex-direction: column;
       font-family: var(--font-regular);
-      max-width: 60%;
+      overflow: hidden;
       text-align: center;
       user-select: text;
 
@@ -64,6 +64,7 @@
     align-items: center;
     cursor: pointer;
     display: flex;
+    flex-shrink: 0;
     height: 50px;
     justify-content: center;
     width: 50px;
@@ -82,23 +83,15 @@
   .topBarTitle {
     align-items: center;
     display: flex;
-    flex-grow: 1;
     justify-content: center;
-    left: 70px;
-    position: absolute;
-    width: calc(100% - 230px);
+    margin: auto;
+    min-width: 0;
+    padding-left: 26px;
   }
 
   .rectangle {
-    &.hasTadaIcon {
-      right: 220px;
-    }
-
-    background-color: var(--theme-node-sync-icon-color);
+    border-right: 1px solid var(--theme-node-sync-icon-color);
     height: 12px;
     opacity: 0.3;
-    position: absolute;
-    right: 162px;
-    width: 1px;
   }
 }

source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js

@@ -188,12 +188,14 @@ export default class SyncingConnecting extends Component<Props, State> {
             />
           )}
           {showNewsFeedIcon && (
-            <NewsFeedIcon
-              onNewsFeedIconClick={onToggleNewsFeedIconClick}
-              newsFeedIconClass={newsFeedIconStyles}
-              hasNotification={hasNotification}
-              hasUpdate={hasUpdate}
-            />
+            <div className={styles.newsFeedContainer}>
+              <NewsFeedIcon
+                onNewsFeedIconClick={onToggleNewsFeedIconClick}
+                newsFeedIconClass={newsFeedIconStyles}
+                hasNotification={hasNotification}
+                hasUpdate={hasUpdate}
+              />
+            </div>
           )}
           <LogosDisplay isConnected={isConnected} />
         </div>

source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.scss

@@ -13,6 +13,15 @@
     z-index: 2000;
   }
 
+  .newsFeedContainer {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 29px;
+    padding-top: 20px;
+    position: absolute;
+    width: 100%;
+  }
+
   :global {
     .connectingScreen {
       span svg path {

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

@@ -1,7 +1,5 @@
 .component {
-  position: absolute;
-  right: 29px;
-  top: 20px;
+  position: relative;
 
   &.notificationDot {
     @extend .dot;

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

@@ -1,11 +1,6 @@
 .component {
+  margin: 0 40px;
   overflow: visible;
-  position: absolute;
-  right: 202px;
-
-  &.hasTadaIcon {
-    right: 260px;
-  }
 
   &:hover {
     .info {

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

@@ -1,8 +1,8 @@
 .component {
   cursor: pointer;
   font-size: 19px;
-  position: absolute;
-  right: 94px;
+  margin-left: 8px;
+  margin-right: 20px;
   transform-origin: bottom left;
   &.animate {
     animation: animation 0.7s cubic-bezier(0.7, 0, 0.24, 1.01) infinite;

source/renderer/app/containers/TopBarContainer.js

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import classnames from 'classnames';
 import TopBar from '../components/layout/TopBar';
 import NodeSyncStatusIcon from '../components/widgets/NodeSyncStatusIcon';
 import { DiscreetToggleTopBar } from '../features/discreet-mode';
@@ -94,18 +93,9 @@ const TopBarContainer = (
       isShelleyActivated={isShelleyActivated}
     >
       {testnetLabel}
-      <NodeSyncStatusIcon
-        isSynced={isSynced}
-        syncPercentage={syncPercentage}
-        hasTadaIcon={shouldShowTadaIcon}
-      />
-      <span
-        className={classnames(
-          topBarStyles.rectangle,
-          shouldShowTadaIcon && topBarStyles.hasTadaIcon
-        )}
-      />
-      <DiscreetToggleTopBar hasTadaIcon={shouldShowTadaIcon} />
+      <NodeSyncStatusIcon isSynced={isSynced} syncPercentage={syncPercentage} />
+      <span className={topBarStyles.rectangle} />
+      <DiscreetToggleTopBar />
       {shouldShowTadaIcon && (
         <TadaButton
           onClick={onClickTadaButton}

source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.js

@@ -1,6 +1,5 @@
 // @flow
 import React, { useState } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { injectIntl, FormattedHTMLMessage } from 'react-intl';
@@ -12,10 +11,9 @@ import type { Intl } from '../../../../types/i18nTypes';
 
 type Props = {
   intl: Intl,
-  hasTadaIcon?: boolean,
 };
 
-const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
+const DiscreetToggleTopBar = ({ intl }: Props) => {
   const {
     isDiscreetMode,
     isSettingsTooltipEnabled,
@@ -27,7 +25,7 @@ const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
 
   return (
     <div
-      className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}
+      className={styles.root}
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >

source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss

@@ -1,10 +1,5 @@
 .root {
-  position: absolute;
-  right: 91px;
-
-  &.hasTadaIcon {
-    right: 149px;
-  }
+  margin: 0 28px;
 
   .discreetToggle {
     border-radius: 50%;