fix(app): robot Layout, timeHistory (#1203)

Author: dimakorzhovnik

src/components/HydrogenBalance/HydrogenBalance.tsx

@@ -1,22 +1,22 @@
 import { useGetBalanceBostrom } from 'src/containers/sigma/hooks';
-import SideButtonLink from '../sideButtonLink/SideButtonLink';
-import { routes } from 'src/routes';
 import IconsNumber from '../IconsNumber/IconsNumber';
 
-function HydrogenBalance({ address, isVertical }) {
+type Props = {
+  address?: string;
+  isVertical?: boolean;
+};
+
+function HydrogenBalance({ address, isVertical }: Props) {
   const { totalAmountInLiquid } = useGetBalanceBostrom(address);
 
   return (
-    <SideButtonLink
-      to={`${routes.neuron.getLink(address)}/sigma`}
-      buttonType="hydrogen"
-    >
+    <span>
       <IconsNumber
         value={totalAmountInLiquid.currentCap}
         type="hydrogen"
         isVertical={isVertical}
       />
-    </SideButtonLink>
+    </span>
   );
 }
 

src/components/actionBar/styles.module.scss

@@ -4,7 +4,7 @@
   justify-content: center;
   width: 100%;
   position: fixed;
-  bottom: 20px;
+  bottom: 0px;
   left: 0;
   padding: 10px 0;
   background: linear-gradient(0deg,

src/components/ledger/stageActionBar.jsx

@@ -60,22 +60,18 @@ export function TransactionSubmitted() {
 export function Confirmed({ txHash, txHeight, cosmos, onClickBtnClose }) {
   return (
     <ActionBar button={{ text: ' Fuck Google', onClick: onClickBtnClose }}>
-      <Pane display="inline">Transaction</Pane>{' '}
-      {cosmos ? (
-        <LinkWindow to={`https://www.mintscan.io/txs/${txHash}`}>
-          {trimString(txHash, 6, 6)}
-        </LinkWindow>
-      ) : (
-        <Link to={`/network/bostrom/tx/${txHash}`}>
-          {trimString(txHash, 6, 6)}
-        </Link>
-      )}{' '}
-      {txHeight && (
-        <Pane display="inline">
-          was included in the block <br /> at height{' '}
-          {formatNumber(parseFloat(txHeight))}
-        </Pane>
-      )}
+      <span>
+        Transaction
+        {cosmos ? (
+          <LinkWindow to={`https://www.mintscan.io/txs/${txHash}`}>
+            {trimString(txHash, 6, 6)}
+          </LinkWindow>
+        ) : (
+          <Link to={`/network/bostrom/tx/${txHash}`}>
+            {trimString(txHash, 6, 6)}
+          </Link>
+        )}
+      </span>
     </ActionBar>
   );
 }

src/components/sideButtonLink/SideButtonLink.tsx

@@ -2,13 +2,13 @@ import { Link } from 'react-router-dom';
 import cx from 'classnames';
 import styles from './SideButtonLink.module.scss';
 
-type ContainerLinkProps  = {
+type ContainerLinkProps = {
   to: string;
   buttonType: 'sense' | 'hydrogen';
   children: React.ReactNode;
 };
 
-function SideButtonLink({ to, buttonType, children }: ContainerLinkProps ) {
+function SideButtonLink({ to, buttonType, children }: ContainerLinkProps) {
   return (
     <Link to={to} className={cx(styles.main, styles[buttonType])}>
       {children}

src/containers/application/Header/CurrentApp/CurrentApp.module.scss

@@ -3,7 +3,7 @@
   grid-template-columns: 100px 1fr;
   gap: 25px;
   align-items: center;
-  height: 100px;
+  height: 90px;
   border: none;
   background: transparent;
   color: rgb(31, 203, 255);
@@ -13,8 +13,8 @@
   &:hover {
     .networkBtn {
       &::before {
-        width: 105px;
-        height: 105px;
+        width: 95px;
+        height: 95px;
       }
     }
 
@@ -40,8 +40,8 @@
 
   &::before {
     content: '';
-    width: 100px;
-    height: 100px;
+    width: 90px;
+    height: 90px;
     background: #000000;
     box-shadow: 0px 0px 20px rgba(31, 203, 255, 0.4);
     position: absolute;
@@ -165,12 +165,11 @@
   gap: 25px;
   grid-template-columns: 100px 1fr;
   align-items: center;
-  height: 100px;
+  height: 90px;
 
   @media (width < 768px) {
     grid-template-columns: 100px;
   }
-
 }
 
 .buttonWrapper {
@@ -186,4 +185,4 @@
   background: #0000008c;
   width: 170px;
   backdrop-filter: blur(7px);
-}
+}

src/containers/application/Header/SwitchAccount/SwitchAccount.module.scss

@@ -1,7 +1,7 @@
 @mixin before-Avatar {
   content: '';
-  width: 100px;
-  height: 100px;
+  width: 90px;
+  height: 90px;
   background: #000000;
   position: absolute;
   border-radius: 50%;
@@ -33,7 +33,7 @@
   grid-template-columns: 1fr 105px;
   gap: 25px;
   align-items: center;
-  height: 105px;
+  height: 95px;
 
   @media (max-width: 540px) {
     grid-template-columns: 1fr 60px;
@@ -60,8 +60,8 @@
 
     .containerAvatarConnectTrue {
       &::before {
-        width: 105px;
-        height: 105px;
+        width: 95px;
+        height: 95px;
       }
     }
   }
@@ -103,8 +103,8 @@
 }
 
 .containerAvatarConnect {
-  width: 100px;
-  height: 100px;
+  width: 90px;
+  height: 90px;
   // padding: 5px;
   transition: all 0.2s;
   position: relative;

src/containers/governance/proposalsDetail.jsx

@@ -14,6 +14,7 @@ import {
   ContainerGradientText,
   IconStatus,
   Item,
+  MainContainer,
 } from '../../components';
 
 import {
@@ -28,7 +29,6 @@ import ActionBarDetail from './actionBarDatail';
 import { formatNumber } from '../../utils/utils';
 
 import ProposalsDetailProgressBar from './proposalsDetailProgressBar';
-import { MainContainer } from '../portal/components';
 import ProposalsRoutes from './proposalsRoutes';
 
 import styles from './proposalsDetail.module.scss';

src/containers/mint/Mint.module.scss

@@ -21,4 +21,4 @@
   grid-gap: 16px;
   padding-bottom: 150px;
   position: relative;
-}
+}

src/containers/mint/Statistics/Statistics.module.scss

@@ -3,7 +3,7 @@
   margin-top: 10px;
   margin-bottom: 50px;
   display: grid;
-  grid-template-columns: repeat(3, 300px);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));;
   grid-gap: 20px;
   justify-content: center;
 }

src/containers/txs/txsDetails.tsx

@@ -1,14 +1,14 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useDevice } from 'src/contexts/device';
+import { MainContainer } from 'src/components';
+import { useAdviser } from 'src/features/adviser/context';
 import InformationTxs from './informationTxs';
 import Msgs from './msgs';
 import ActionBarContainer from '../Search/ActionBarContainer';
-import { MainContainer } from '../portal/components';
 import { getTxs } from './api/data';
 import { ValueInformation } from './type';
 import { mapResponseDataGetTxs } from './api/mapping';
-import { useAdviser } from 'src/features/adviser/context';
 
 function TxsDetails() {
   const { isMobile: mobile } = useDevice();
@@ -35,7 +35,7 @@ function TxsDetails() {
 
   return (
     <>
-      <MainContainer width="82%">
+      <MainContainer>
         <InformationTxs data={information} />
         {msgs && <Msgs data={msgs} />}
       </MainContainer>