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

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>

src/containers/wasm/contract/ContractTable.jsx

@@ -62,6 +62,7 @@ function ContractTable({ contracts, count, setOffset }) {
           style={{
             borderSpacing: '5px 16px',
             borderCollapse: 'separate',
+            width: '100%',
           }}
           className="table"
         >

src/containers/wasm/contract/DashboardPage.tsx

@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
 import { useQueryClient } from 'src/contexts/queryClient';
 import { BASE_DENOM } from 'src/constants/config';
 import { useWasmDashboardPageQuery } from 'src/generated/graphql';
+import { CardStatisics, Dots, MainContainer } from 'src/components';
 import { formatNumber } from '../../../utils/utils';
-import { CardStatisics, Dots, MainContainer } from '../../../components';
 import { ContainerCardStatisics, ContainerCol } from '../ui/ui';
 import ContractTable from './ContractTable';
 

src/features/TimeFooter/TimeFooter.tsx

@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
 import dateFormat from 'dateformat';
 import { getNowUtcTime } from 'src/utils/utils';
-import { useDevice } from 'src/contexts/device';
 import { useAppSelector } from 'src/redux/hooks';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 import { routes } from 'src/routes';
 import { Time } from 'src/components';
 import { Link } from 'react-router-dom';
+import useMediaQuery from 'src/hooks/useMediaQuery';
 import styles from './TimeFooter.module.scss';
 
 function TimeFooter() {
   const { defaultAccount } = useAppSelector((state) => state.pocket);
-  const { isMobile: mobile } = useDevice();
+  const mediaQuery = useMediaQuery('(min-width: 1230px)');
   const useGetAddress = defaultAccount?.account?.cyber?.bech32 || null;
   const { passport } = usePassportByAddress(useGetAddress);
   const useGetName = passport?.extension.nickname;
@@ -43,7 +43,7 @@ function TimeFooter() {
 
   return (
     <Link to={linkTime} className={styles.wrapper}>
-      {!mobile && <Time msTime={timeSeconds} />}
+      {mediaQuery && <Time msTime={timeSeconds} />}
       <span className={styles.utcTime}>
         {dateFormat(new Date(timeSeconds), 'HH:MM')}
       </span>

src/features/TimeHistory/TimeHistory.module.scss

@@ -7,45 +7,45 @@
 }
 
 @mixin rotate() {
-  transform: rotate(var(--r)) translateX(var(--diameter)) rotate(calc(-1 * var(--r)));
+  transform: rotate(var(--r)) translateX(var(--diameter))
+    rotate(calc(-1 * var(--r)));
 }
 
-$size: 220px;
-
 .wrapper {
   text-align: end;
   display: grid;
   justify-content: flex-end;
   align-items: flex-end;
   gap: 15px;
-  width: $size;
-  height: $size;
-  padding: 5px 5px 20px 0px;
+  width: 200px;
+  height: 170px;
+  padding: 5px 0px 20px 0px;
 
   position: absolute;
-  bottom: 20px;
+  bottom: 40px;
   // overflow: hidden scroll;
   right: 0vw;
 
   background-color: rgba(0, 0, 0, 0.5490196078);
   backdrop-filter: blur(7px);
-
 }
 
-.rotate>div {
-  padding-right: 5px;
-}
+// .rotate>div {
+//   padding-right: 5px;
+// }
 
-.rotate>div:nth-child(1) {
-  // --r: calc(2 * var(--i));
-  padding-right: unset;
+.rotate > div:nth-child(1) {
   color: var(--grayscale-disabled);
+
+  & > span {
+    margin-right: -5px;
+  }
 }
 
-.rotate>div:nth-child(2) {
+.rotate > div:nth-child(2) {
   color: var(--grayscale-dark);
 }
 
-.rotate>div:nth-child(3) {
+.rotate > div:nth-child(3) {
   color: var(--grayscale-secondary);
 }

src/features/TimeHistory/ui/RouteItem/RouteItem.module.scss

@@ -1,4 +1,4 @@
-$size-img: 20px;
+$size-img: 15px;
 
 .wrapper {
   display: grid;

src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss

@@ -1,12 +1,17 @@
 .wrapper {
   display: grid;
   // grid-template-columns: 110px 1fr;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 2fr 1fr;
   justify-items: end;
   align-items: center;
   gap: 7px;
-  padding: 0 5px;
+  // padding: 0 5px;
   font-size: 14px;
-  line-height: 25px;
+  line-height: 17px;
   max-width: 200px;
+
+  & > span {
+    font-size: 10px;
+    line-height: 10px;
+  }
 }

src/features/adviser/AdviserContainer.module.scss

@@ -1,13 +1,13 @@
 .wrapper {
   position: sticky;
-  top: 75px;
+  top: 80px;
   width: 60%;
 
   z-index: 3;
   min-height: 60px; // 2 lines of text
 
   margin-top: -45px;
-  margin-bottom: 15px;
+  margin-bottom: 25px;
   margin-left: auto;
   margin-right: auto;