From 3a66ca87c89e9ad1a49c3b6a5c3d7ff69116423a Mon Sep 17 00:00:00 2001 From: maro Date: Thu, 13 Jan 2022 17:01:54 +0900 Subject: [PATCH 1/2] update: LatestBlock, Select, Header, Sidebar, and more --- src/components/LatestBlock.tsx | 6 +++--- src/components/Select.tsx | 2 +- src/index.scss | 16 ++++++++++++++ src/layouts/Header.module.scss | 18 +++++----------- src/layouts/Header.tsx | 37 +++++++++++++++++++++++++++++++-- src/layouts/Sidebar.tsx | 6 +++--- src/pages/Dashboard/Pair.tsx | 3 +-- src/pages/Dashboard/Summary.tsx | 10 +++++++-- src/pages/Dashboard/index.tsx | 2 +- src/routes.tsx | 4 ++-- 10 files changed, 75 insertions(+), 29 deletions(-) diff --git a/src/components/LatestBlock.tsx b/src/components/LatestBlock.tsx index f8e03c3f..2fc1cc3b 100644 --- a/src/components/LatestBlock.tsx +++ b/src/components/LatestBlock.tsx @@ -85,15 +85,15 @@ const LatestBlock: React.FC = ({ status={ !isLoading && latestBlockHeight && - currentHeight < latestBlockHeight - 5 + currentHeight < latestBlockHeight - 10 ? "error" : "success" } /> ) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 3235f76d..17e4184c 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -50,7 +50,7 @@ const SelectElement = styled.select` border: solid 1px #0222ba; border-radius: 8px; - font-family: OpenSans; + font-family: "Open Sans", arial, sans-serif; font-size: 12px; font-weight: bold; font-stretch: normal; diff --git a/src/index.scss b/src/index.scss index 4fccc2bd..963c683a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -18,6 +18,22 @@ body, padding-bottom: $footer-height; background-attachment: fixed; + *::-webkit-scrollbar { + width: 6px; + height: 6px; + } + *::-webkit-scrollbar-track { + background-color: transparent; + } + *::-webkit-scrollbar-thumb { + border-radius: 3px; + background-color: lightgray; + } + *::-webkit-scrollbar-button { + width: 0; + height: 0; + } + @include mobile { padding-bottom: $footer-height-mobile; diff --git a/src/layouts/Header.module.scss b/src/layouts/Header.module.scss index a424b6df..80be24f9 100644 --- a/src/layouts/Header.module.scss +++ b/src/layouts/Header.module.scss @@ -27,9 +27,6 @@ @include mobile { bottom: 0; } - .scrolled & { - bottom: 0; - } } & .container { @@ -38,13 +35,9 @@ top: 0; } - &.scrolled { - padding: 14px 0; - } - & .wrapper, & section { - @include flex; + @include flex(flex-start); } } @@ -57,18 +50,17 @@ z-index: 4850; & .support { - transition: opacity 0.2s ease-in-out; + transition: right 0.2s ease-in-out, opacity 0.2s ease-in-out; position: fixed; right: 30px; bottom: 30px; width: auto; height: auto; - } - &.scrolled { - padding: 14px 0; - & .support { + .scrolled & { opacity: 0; + right: -48px; + pointer-events: none; } } diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 8c1d2a04..dbea02fe 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useEffect, useState } from "react" import { ReactComponent as Logo } from "../images/TerraswapLogo.svg" import Container from "../components/Container" import Connect from "./Connect" @@ -22,12 +22,45 @@ const SidebarWrapper = styled.div` ` const Header = () => { + const [isScrolled, setIsScrolled] = useState(false) + useEffect(() => { + let timerId: any + const showConnectButtonAfter1Sec = () => { + if (timerId) { + clearTimeout(timerId) + } + + timerId = setTimeout(() => { + setIsScrolled(false) + }, 875) + } + const handleWheel = () => { + setIsScrolled(true) + showConnectButtonAfter1Sec() + } + + window.addEventListener("wheel", handleWheel) + window.addEventListener("touchmove", handleWheel) + return () => { + window.removeEventListener("wheel", handleWheel) + window.removeEventListener("touchmove", handleWheel) + } + }, []) + + useEffect(() => { + if (isScrolled) { + document.body.classList.add("scrolled", styles.scrolled) + return + } + document.body.classList.remove("scrolled", styles.scrolled) + }, [isScrolled]) + return ( <>
- +
diff --git a/src/layouts/Sidebar.tsx b/src/layouts/Sidebar.tsx index f8bd6e53..84913c52 100644 --- a/src/layouts/Sidebar.tsx +++ b/src/layouts/Sidebar.tsx @@ -219,11 +219,11 @@ const Sidebar = () => {
{ return location.pathname?.includes("/pairs") || - location.pathname?.includes("/dashboard") + location.pathname === "/" ? true : false }} @@ -231,7 +231,7 @@ const Sidebar = () => { > Dashboard - close()}> + close()}> Swap
diff --git a/src/pages/Dashboard/Pair.tsx b/src/pages/Dashboard/Pair.tsx index 6225aa1f..3858b26b 100644 --- a/src/pages/Dashboard/Pair.tsx +++ b/src/pages/Dashboard/Pair.tsx @@ -69,7 +69,7 @@ const PairPage = () => { gap: 10, }} > - +
@@ -419,7 +419,6 @@ const PairPage = () => {
- +  {formatMoney( Number( lookup( diff --git a/src/pages/Dashboard/Summary.tsx b/src/pages/Dashboard/Summary.tsx index 8f328f59..5990bc9e 100644 --- a/src/pages/Dashboard/Summary.tsx +++ b/src/pages/Dashboard/Summary.tsx @@ -22,6 +22,11 @@ const Wrapper = styled.div` height: 48px; padding: 0; } + + &, + & * { + box-sizing: border-box; + } ` const SummaryList = styled.div` @@ -34,6 +39,7 @@ const SummaryList = styled.div` align-items: center; transition: top 0.2s ease-in-out; + font-size: 0; @media screen and (max-width: ${({ theme }) => theme.breakpoint}) { display: block; @@ -50,7 +56,7 @@ const SummaryItem = styled.div.attrs({})` @media screen and (max-width: ${({ theme }) => theme.breakpoint}) { display: block; - padding: 13px 30px; + padding: 13px 13px; } & label { @@ -93,7 +99,7 @@ const Summary: React.FC = ({ data }) => { current += 1 return current >= count ? 0 : current }) - }, 3000) + }, 2000) return () => { if (intervalId) { diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index d687d9fe..998416a5 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -535,7 +535,7 @@ const Dashboard = () => { }, { accessor: "apr", - Header: "Commission APY (7D avg)", + Header: "APR (7D avg)", Cell: ({ cell: { value } }: any) => ( {(Number(value) * 100).toFixed(2)}% ), diff --git a/src/routes.tsx b/src/routes.tsx index 78f26afa..eed5ea44 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -7,8 +7,8 @@ import PairPage from "./pages/Dashboard/Pair" export default () => ( - - + + From 57a97140a678193b59c7801ce412b42e68b4484f Mon Sep 17 00:00:00 2001 From: maro Date: Sun, 16 Jan 2022 19:48:53 +0900 Subject: [PATCH 2/2] update: Dashboard, Table, Tooltip --- src/components/Table.tsx | 1 + src/components/Tooltip.tsx | 10 +++++++++- src/pages/Dashboard/index.tsx | 10 +++++++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/Table.tsx b/src/components/Table.tsx index cbf200cb..900f7734 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -85,6 +85,7 @@ const Cell = styled.td` const HeaderCell = styled(Cell)` font-weight: 700; + cursor: pointer; ` type SortIconProps = { diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index b2fc1b9f..12e1c888 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -23,14 +23,22 @@ const TooltipTippyProps: TippyProps = { interface Props extends Omit { onClick?: () => void + style?: React.CSSProperties } -const Tooltip: FC = ({ className, onClick, children, ...props }) => { +const Tooltip: FC = ({ + className, + onClick, + children, + style, + ...props +}) => { const button = ( diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index 998416a5..336e75c3 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -17,6 +17,7 @@ import Select from "components/Select" import Summary from "./Summary" import LatestBlock from "components/LatestBlock" +import Tooltip from "components/Tooltip" const Wrapper = styled.div` width: 100%; @@ -535,7 +536,14 @@ const Dashboard = () => { }, { accessor: "apr", - Header: "APR (7D avg)", + Header: ( + + APR (7D avg) + + ), Cell: ({ cell: { value } }: any) => ( {(Number(value) * 100).toFixed(2)}% ),