fix(app): redesign (#1114)

src/components/CreatedAt/CreatedAt.tsx

@@ -1,24 +1,25 @@
-import { getNowUtcTime, timeSince } from 'src/utils/utils';
+import { timeSince } from 'src/utils/utils';
+import { dateToUtcNumber, getNowUtcNumber } from 'src/utils/date';
 import styles from './CreatedAt.module.scss';
 
 export type Props = {
-  timeAt: string | number;
+  timeAt: string;
 };
 
 function CreatedAt({ timeAt }: Props) {
   let timeAgoInMS = 0;
 
-  const time = getNowUtcTime() - new Date(timeAt).getTime();
+  const time = getNowUtcNumber() - dateToUtcNumber(timeAt);
   if (time && time > 0) {
     timeAgoInMS = time;
   }
 
   const timeSinceValue = timeSince(timeAgoInMS);
 
   return (
-    <div className={styles.createdAt}>
+    <span className={styles.createdAt}>
       {timeSinceValue === 'now' ? timeSinceValue : `${timeSinceValue} ago`}
-    </div>
+    </span>
   );
 }
 

src/components/HydrogenBalance/HydrogenBalance.tsx

@@ -1,13 +1,19 @@
 import { useGetBalanceBostrom } from 'src/containers/sigma/hooks';
+import { Link } from 'react-router-dom';
+import { routes } from 'src/routes';
 import IconsNumber from '../IconsNumber/IconsNumber';
 
-function HydrogenBalance({ address }) {
+function HydrogenBalance({ address, className }) {
   const { totalAmountInLiquid } = useGetBalanceBostrom(address);
 
   return (
-    <div>
-      <IconsNumber value={totalAmountInLiquid.currentCap} type="hydrogen" />
-    </div>
+    <Link to={`${routes.neuron.getLink(address)}/sigma`} className={className}>
+      <IconsNumber
+        value={totalAmountInLiquid.currentCap}
+        type="hydrogen"
+        isVertical
+      />
+    </Link>
   );
 }
 

src/components/IconsNumber/IconsNumber.tsx

@@ -1,7 +1,6 @@
 import BigNumber from 'bignumber.js';
-import hydrogen from '../../image/hydrogen.svg';
-import { boot } from 'images/large-green.png';
 import React from 'react';
+import hydrogen from '../../image/hydrogen.svg';
 import Tooltip from '../tooltip/tooltip';
 
 enum TypesEnum {
@@ -63,7 +62,7 @@ const PREFIXES = [
   },
 ];
 
-export default function IconsNumber({ value, type }) {
+export default function IconsNumber({ value, type, isVertical }) {
   const { prefix = 1, power = 1 } =
     PREFIXES.find((powerItem) => value >= powerItem.power) || {};
 
@@ -86,10 +85,14 @@ export default function IconsNumber({ value, type }) {
       {number}{' '}
       <Tooltip
         contentStyle={{
-          display: 'inline-block',
+          display: 'flex',
+          flexDirection: isVertical ? 'column' : 'row',
         }}
         tooltip={
-          value?.toLocaleString()?.replaceAll(',', ' ') + ' ' + icons[type]
+          <span style={{ whiteSpace: 'nowrap' }}>
+            {value?.toLocaleString()?.replaceAll(',', ' ')}
+            {icons[type]}
+          </span>
         }
       >
         {i}

src/components/MusicalAddress/MusicalAddress.module.scss

@@ -3,7 +3,7 @@
   background: transparent;
   border: unset;
   // height: 20px;
-  font-size: 16px;
+  font-size: 14px;
   // padding: 100px;
   color: var(--primary-color);
 
@@ -28,9 +28,9 @@
 
 .containerSignatures {
   &ItemNote {
-    width: 7px;
+    width: 3px;
     border-radius: 2px;
-    max-height: 20px;
+    max-height: 15px;
 
     @media (max-width: 800px) {
       width: 5px;

src/components/Tabs/TabItem/TabItem.tsx

@@ -1,5 +1,6 @@
 import cx from 'classnames';
 import { Link } from 'react-router-dom';
+import { ReactNode } from 'react';
 import styles from './TabItem.module.scss';
 
 export const enum Position {
@@ -9,7 +10,7 @@ export const enum Position {
 
 export type Props = {
   type?: Position;
-  text: string | JSX.Element;
+  text: string | ReactNode;
   step?: number;
   isSelected: boolean;
   to?: string;
@@ -39,6 +40,13 @@ function TabItem({
     };
   }
 
+  if (disable && to) {
+    componentProps = {
+      ...componentProps,
+      onClick: (e) => e.preventDefault(),
+    };
+  }
+
   return (
     <Component
       to={to}

src/components/Tabs/Tabs.tsx

@@ -1,11 +1,12 @@
+import { ReactNode } from 'react';
 import TabItem, { Position } from './TabItem/TabItem';
 import style from './Tabs.module.scss';
 
 type optionsProps = {
   to?: string;
   onClick?: () => void;
   key: string;
-  text?: string;
+  text?: ReactNode;
 };
 
 type Props = {

src/components/account/account.module.scss

@@ -15,4 +15,9 @@
   color: var(--primary-color);
   padding: 0;
   white-space: nowrap;
+
+  width: 100%;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
 }

src/components/actionBar/index.tsx

@@ -7,12 +7,13 @@ import { Networks } from 'src/types/networks';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 import { selectCurrentAddress } from 'src/redux/features/pocket';
 import { useAppSelector } from 'src/redux/hooks';
-import ButtonIcon from '../buttons/ButtonIcon';
-import styles from './styles.module.scss';
-import Button from '../btnGrd';
 import { useSigningClient } from 'src/contexts/signerClient';
 import { trimString } from 'src/utils/utils';
 import { CHAIN_ID } from 'src/constants/config';
+import ButtonIcon from '../buttons/ButtonIcon';
+import styles from './styles.module.scss';
+import Button from '../btnGrd';
+import { createPortal } from 'react-dom';
 
 const back = require('../../image/arrow-left-img.svg');
 
@@ -121,7 +122,7 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
 
   const content = text || children;
 
-  return (
+  const contentPortal = (
     <ActionBarContainer>
       {/* <Telegram /> */}
 
@@ -150,6 +151,12 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
       {/* <GitHub /> */}
     </ActionBarContainer>
   );
+
+  // const portalEl = document.getElementById('portalActionBar');
+
+  // return portalEl ? createPortal(contentPortal, portalEl) : contentPortal;
+
+  return contentPortal;
 }
 
 export default ActionBar;

src/components/actionBar/styles.module.scss

@@ -4,14 +4,12 @@
   justify-content: center;
   width: 100%;
   position: fixed;
-  bottom: 0;
+  bottom: 20px;
   left: 0;
   padding: 10px 0;
-  background: linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.93) 76%,
-    rgba(0, 0, 0, 0) 100%
-  );
+  background: linear-gradient(0deg,
+      rgba(0, 0, 0, 0.93) 76%,
+      rgba(0, 0, 0, 0) 100%);
   z-index: 2;
 
   &Content {
@@ -49,4 +47,31 @@
 .chooseAccount {
   padding: 0 5px;
   color: var(--primary-color);
+}
+
+.ActionBarWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 62%;
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translate(-50%, 10px);
+  // padding: 10px 0;
+  background: #000;
+  z-index: 3;
+
+  &Content {
+    max-width: 1000px;
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: 0.7fr 1fr;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 10px 0px;
+
+  }
+
 }