From b5a83ad6cbf076092c82719e7528b56a9db3826b Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Mon, 22 Jul 2024 00:47:11 +0300 Subject: [PATCH 1/4] fix(app): robot, timeHistory --- .../TimeHistory/TimeHistory.module.scss | 14 +++++++------- .../ui/RouteItem/RouteItem.module.scss | 2 +- .../TimeHistoryItem/TimeHistoryItem.module.scss | 9 +++++++-- .../robot/Layout/LayoutRoot/Layout.module.scss | 17 ++++++++++------- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/features/TimeHistory/TimeHistory.module.scss b/src/features/TimeHistory/TimeHistory.module.scss index 8d251667f..9b6ebb021 100644 --- a/src/features/TimeHistory/TimeHistory.module.scss +++ b/src/features/TimeHistory/TimeHistory.module.scss @@ -10,16 +10,14 @@ 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; + width: 200px; + height: 170px; padding: 5px 5px 20px 0px; position: absolute; @@ -37,9 +35,11 @@ $size: 220px; } .rotate>div:nth-child(1) { - // --r: calc(2 * var(--i)); - padding-right: unset; color: var(--grayscale-disabled); + + &>span { + padding-right: unset; + } } .rotate>div:nth-child(2) { @@ -48,4 +48,4 @@ $size: 220px; .rotate>div:nth-child(3) { color: var(--grayscale-secondary); -} +} \ No newline at end of file diff --git a/src/features/TimeHistory/ui/RouteItem/RouteItem.module.scss b/src/features/TimeHistory/ui/RouteItem/RouteItem.module.scss index dd41bba9a..842580306 100644 --- a/src/features/TimeHistory/ui/RouteItem/RouteItem.module.scss +++ b/src/features/TimeHistory/ui/RouteItem/RouteItem.module.scss @@ -1,4 +1,4 @@ -$size-img: 20px; +$size-img: 15px; .wrapper { display: grid; diff --git a/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss b/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss index 81dfd6d1d..80651025e 100644 --- a/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss +++ b/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; font-size: 14px; - line-height: 25px; + line-height: 17px; max-width: 200px; + + & > span { + font-size: 8px; + line-height: 10px; + } } \ No newline at end of file diff --git a/src/pages/robot/Layout/LayoutRoot/Layout.module.scss b/src/pages/robot/Layout/LayoutRoot/Layout.module.scss index 1c6c8797e..189bb914d 100644 --- a/src/pages/robot/Layout/LayoutRoot/Layout.module.scss +++ b/src/pages/robot/Layout/LayoutRoot/Layout.module.scss @@ -2,6 +2,10 @@ $robotHeaderHeight: 130px; +@mixin max-height-screen() { + max-height: calc(100vh - $reservedTopHeight - $actionBarHeight - $robotHeaderHeight ); +} + .wrapper { display: flex; flex-direction: column; @@ -14,19 +18,18 @@ $robotHeaderHeight: 130px; justify-content: center; margin-right: -2px; height: 70vh; - max-height: calc( - 100vh - $reservedTopHeight - $actionBarHeight - $robotHeaderHeight - ); + @include max-height-screen(); //Display > :first-child { - > div { + >div { height: 100%; + @include max-height-screen(); } - > div > div { + >div>div { // don't understand this scroll - overflow-x: hidden; + overflow-x: auto; } } @@ -35,4 +38,4 @@ $robotHeaderHeight: 130px; position: relative; overflow-x: auto; } -} +} \ No newline at end of file From 6508d043a6932ee24a1603df3f8e799314281bbc Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Tue, 23 Jul 2024 01:17:24 +0300 Subject: [PATCH 2/4] fix(app): layout --- src/containers/governance/proposalsDetail.jsx | 2 +- src/containers/mint/Mint.module.scss | 2 +- .../mint/Statistics/Statistics.module.scss | 2 +- src/containers/txs/txsDetails.tsx | 6 ++--- .../wasm/contract/ContractTable.jsx | 1 + .../wasm/contract/DashboardPage.tsx | 2 +- .../TimeHistory/TimeHistory.module.scss | 24 +++++++++---------- .../TimeHistoryItem.module.scss | 4 ++-- .../Layout/LayoutRoot/Layout.module.scss | 2 +- 9 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/containers/governance/proposalsDetail.jsx b/src/containers/governance/proposalsDetail.jsx index 3f714e084..82b24a9b4 100644 --- a/src/containers/governance/proposalsDetail.jsx +++ b/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'; diff --git a/src/containers/mint/Mint.module.scss b/src/containers/mint/Mint.module.scss index 6cbf2f652..c5136a96f 100644 --- a/src/containers/mint/Mint.module.scss +++ b/src/containers/mint/Mint.module.scss @@ -21,4 +21,4 @@ grid-gap: 16px; padding-bottom: 150px; position: relative; -} \ No newline at end of file +} diff --git a/src/containers/mint/Statistics/Statistics.module.scss b/src/containers/mint/Statistics/Statistics.module.scss index b946f24aa..5120582d6 100644 --- a/src/containers/mint/Statistics/Statistics.module.scss +++ b/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; } \ No newline at end of file diff --git a/src/containers/txs/txsDetails.tsx b/src/containers/txs/txsDetails.tsx index f72be0c37..3c7a2cfc2 100644 --- a/src/containers/txs/txsDetails.tsx +++ b/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 ( <> - + {msgs && } diff --git a/src/containers/wasm/contract/ContractTable.jsx b/src/containers/wasm/contract/ContractTable.jsx index 6f92fd23f..e6dc6702c 100644 --- a/src/containers/wasm/contract/ContractTable.jsx +++ b/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" > diff --git a/src/containers/wasm/contract/DashboardPage.tsx b/src/containers/wasm/contract/DashboardPage.tsx index 4bb9c017f..56c10910b 100644 --- a/src/containers/wasm/contract/DashboardPage.tsx +++ b/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'; diff --git a/src/features/TimeHistory/TimeHistory.module.scss b/src/features/TimeHistory/TimeHistory.module.scss index 9b6ebb021..fb30f384c 100644 --- a/src/features/TimeHistory/TimeHistory.module.scss +++ b/src/features/TimeHistory/TimeHistory.module.scss @@ -7,7 +7,8 @@ } @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))); } .wrapper { @@ -18,7 +19,7 @@ gap: 15px; width: 200px; height: 170px; - padding: 5px 5px 20px 0px; + padding: 5px 0px 20px 0px; position: absolute; bottom: 20px; @@ -27,25 +28,24 @@ 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) { +.rotate > div:nth-child(1) { color: var(--grayscale-disabled); - &>span { - padding-right: unset; + & > 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); -} \ No newline at end of file +} diff --git a/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss b/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss index 80651025e..7625b3a81 100644 --- a/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss +++ b/src/features/TimeHistory/ui/TimeHistoryItem/TimeHistoryItem.module.scss @@ -5,13 +5,13 @@ justify-items: end; align-items: center; gap: 7px; - padding: 0 5px; + // padding: 0 5px; font-size: 14px; line-height: 17px; max-width: 200px; & > span { - font-size: 8px; + font-size: 10px; line-height: 10px; } } \ No newline at end of file diff --git a/src/pages/robot/Layout/LayoutRoot/Layout.module.scss b/src/pages/robot/Layout/LayoutRoot/Layout.module.scss index 189bb914d..7538f5952 100644 --- a/src/pages/robot/Layout/LayoutRoot/Layout.module.scss +++ b/src/pages/robot/Layout/LayoutRoot/Layout.module.scss @@ -29,7 +29,7 @@ $robotHeaderHeight: 130px; >div>div { // don't understand this scroll - overflow-x: auto; + overflow-x: hidden; } } From f853a437b658b95bac091cf1e4816d05a8998e52 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Wed, 24 Jul 2024 00:24:19 +0300 Subject: [PATCH 3/4] fix(app): robot, header --- .../HydrogenBalance/HydrogenBalance.tsx | 16 +++---- .../sideButtonLink/SideButtonLink.tsx | 4 +- .../Header/CurrentApp/CurrentApp.module.scss | 15 ++++--- .../SwitchAccount/SwitchAccount.module.scss | 14 +++---- .../adviser/AdviserContainer.module.scss | 4 +- src/features/sense/ui/Sense.module.scss | 18 +++++--- src/features/sense/ui/Sense.tsx | 7 ++-- src/layouts/Main.tsx | 42 ++----------------- .../ui/SideHydrogenBtn/SideHydrogenBtn.tsx | 16 +++++++ src/layouts/variables.module.scss | 7 +++- src/pages/robot/Layout/Layout.tsx | 5 ++- .../Layout/LayoutRoot/Layout.module.scss | 14 ++++--- src/pages/robot/Layout/LayoutRoot/Layout.tsx | 7 +++- 13 files changed, 85 insertions(+), 84 deletions(-) create mode 100644 src/layouts/ui/SideHydrogenBtn/SideHydrogenBtn.tsx diff --git a/src/components/HydrogenBalance/HydrogenBalance.tsx b/src/components/HydrogenBalance/HydrogenBalance.tsx index a86478276..9a3545d0c 100644 --- a/src/components/HydrogenBalance/HydrogenBalance.tsx +++ b/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 ( - + - + ); } diff --git a/src/components/sideButtonLink/SideButtonLink.tsx b/src/components/sideButtonLink/SideButtonLink.tsx index faac0eb89..4d0dac1c9 100644 --- a/src/components/sideButtonLink/SideButtonLink.tsx +++ b/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 ( {children} diff --git a/src/containers/application/Header/CurrentApp/CurrentApp.module.scss b/src/containers/application/Header/CurrentApp/CurrentApp.module.scss index 66c53a2e6..0d573f9c2 100644 --- a/src/containers/application/Header/CurrentApp/CurrentApp.module.scss +++ b/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); -} \ No newline at end of file +} diff --git a/src/containers/application/Header/SwitchAccount/SwitchAccount.module.scss b/src/containers/application/Header/SwitchAccount/SwitchAccount.module.scss index f58dfef84..a8e3ec29a 100644 --- a/src/containers/application/Header/SwitchAccount/SwitchAccount.module.scss +++ b/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; diff --git a/src/features/adviser/AdviserContainer.module.scss b/src/features/adviser/AdviserContainer.module.scss index afb0647fb..b4cbf4b2e 100644 --- a/src/features/adviser/AdviserContainer.module.scss +++ b/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; diff --git a/src/features/sense/ui/Sense.module.scss b/src/features/sense/ui/Sense.module.scss index b1789d835..15ee91d70 100644 --- a/src/features/sense/ui/Sense.module.scss +++ b/src/features/sense/ui/Sense.module.scss @@ -5,17 +5,23 @@ align-content: stretch; height: 100%; - margin-right: -2px; - max-height: calc(100vh - $reservedTopHeight - $actionBarHeight - $robotHeaderHeight); + max-height: calc( + 100vh - $reservedTopHeight - $actionBarHeight + ); + + &.NotOwner { + max-height: calc( + 100vh - $reservedTopHeight - $actionBarHeight - $robotHeaderHeightNotOwner + ); + } // Display - >div>div { + > div > div { height: 100%; - } > :first-child { - >div { + > div { // don't understand this scroll overflow-x: hidden; } @@ -26,4 +32,4 @@ position: relative; left: -2px; } -} \ No newline at end of file +} diff --git a/src/features/sense/ui/Sense.tsx b/src/features/sense/ui/Sense.tsx index 3eb1badb1..b2061e2c9 100644 --- a/src/features/sense/ui/Sense.tsx +++ b/src/features/sense/ui/Sense.tsx @@ -1,10 +1,9 @@ import { useEffect, useState } from 'react'; import SenseViewer from 'src/features/sense/ui/SenseViewer/SenseViewer'; import SenseList from 'src/features/sense/ui/SenseList/SenseList'; -import styles from './Sense.module.scss'; +import cx from 'classnames'; import { useAdviser } from 'src/features/adviser/context'; import { useAppDispatch, useAppSelector } from 'src/redux/hooks'; -import ActionBar from './ActionBar/ActionBar'; import { useBackend } from 'src/contexts/backend/backend'; import { getSenseChat, @@ -13,6 +12,8 @@ import { import { useNavigate, useParams } from 'react-router-dom'; import { convertTimestampToString } from 'src/utils/date'; import { useRobotContext } from 'src/pages/robot/robot.context'; +import ActionBar from './ActionBar/ActionBar'; +import styles from './Sense.module.scss'; export type AdviserProps = { adviser: { @@ -120,7 +121,7 @@ function Sense({ urlSenseId }: { urlSenseId?: string }) { return ( <> -
+
{isOwner && ( { diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 94ac48e40..e7541cbf1 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -1,13 +1,10 @@ -import { useEffect, useMemo, useRef, useState } from 'react'; - -import { localStorageKeys } from 'src/constants/localStorageKeys'; +import { useEffect, useRef, useState } from 'react'; import Header from 'src/containers/application/Header/Header'; import { useAppDispatch, useAppSelector } from 'src/redux/hooks'; import { routes } from 'src/routes'; import { useDevice } from 'src/contexts/device'; import { setFocus } from 'src/containers/application/Header/Commander/commander.redux'; import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer'; -import HydrogenBalance from 'src/components/HydrogenBalance/HydrogenBalance'; import TimeFooter from 'src/features/TimeFooter/TimeFooter'; import { Networks } from 'src/types/networks'; import { CHAIN_ID } from 'src/constants/config'; @@ -19,6 +16,7 @@ import graphDataPrepared from '../pages/oracle/landing/graphDataPrepared.json'; import stylesOracle from '../pages/oracle/landing/OracleLanding.module.scss'; import SenseButton from '../features/sense/ui/SenseButton/SenseButton'; import styles from './Main.module.scss'; +import SideHydrogenBtn from './ui/SideHydrogenBtn/SideHydrogenBtn'; function MainLayout({ children }: { children: JSX.Element }) { const { defaultAccount } = useAppSelector(({ pocket }) => pocket); @@ -32,18 +30,6 @@ function MainLayout({ children }: { children: JSX.Element }) { const isMobile = viewportWidth <= Number(stylesOracle.mobileBreakpoint.replace('px', '')); - // for new user show menu, else no + animation - const [openMenu, setOpenMenu] = useState( - !localStorage.getItem(localStorageKeys.MENU_SHOW) - ); - - function toggleMenu(isOpen: boolean) { - const newState = isOpen; - - setOpenMenu(newState); - localStorage.setItem(localStorageKeys.MENU_SHOW, newState.toString()); - } - useEffect(() => { dispatch(setFocus(true)); @@ -64,32 +50,12 @@ function MainLayout({ children }: { children: JSX.Element }) { ref.current.style.setProperty('--graph-size', `${graphSize}px`); }, [ref, graphSize]); - // for initial animation - useEffect(() => { - const isMenuOpenPreference = localStorage.getItem( - localStorageKeys.MENU_SHOW - ); - - const timeout = setTimeout(() => { - toggleMenu(isMenuOpenPreference === 'true'); - }, 500); - - return () => { - clearTimeout(timeout); - }; - }, []); - return (
-
() => toggleMenu(!openMenu), [openMenu]), - isOpen: openMenu, - }} - /> +
{CHAIN_ID === Networks.BOSTROM && !isMobile && } - {!isMobile && } + {!isMobile && } {children}