From 4c7b245589004c04d05b5fcd10186323a364e2e8 Mon Sep 17 00:00:00 2001 From: "tai.truong" Date: Tue, 16 Apr 2024 17:05:40 +0700 Subject: [PATCH] feat: MET-1989 add reponsive --- src/commons/utils/helper.ts | 15 +- .../Home/LatestStories/LatestStories.test.tsx | 4 +- src/components/Home/LatestStories/index.tsx | 5 +- src/components/ProtocolHistoryModal/index.tsx | 7 +- .../Layout/Header/SettingTimezone/index.tsx | 49 +++-- .../commons/Layout/Header/index.tsx | 1 - .../Layout/Sidebar/SidebarMenu/styles.ts | 4 +- .../commons/Layout/Sidebar/index.tsx | 207 +++++++++++++----- .../commons/Layout/Sidebar/styles.ts | 3 +- src/locales/en/translation.json | 2 + 10 files changed, 201 insertions(+), 96 deletions(-) diff --git a/src/commons/utils/helper.ts b/src/commons/utils/helper.ts index 5ee5ae137f..9f6ee05094 100644 --- a/src/commons/utils/helper.ts +++ b/src/commons/utils/helper.ts @@ -194,11 +194,6 @@ export const handleSignIn = async (username: string, password: string, cbSuccess } }; -export const formatDateTime = (date: string) => { - if (!date) return ""; - return moment.utc(date).tz(moment.tz.guess()).format("MM/DD/YYYY HH:mm:ss"); -}; - export const formatDateTimeLocal = (date: string) => { if (!date) return ""; if (!localStorage.getItem("timezone")) { @@ -218,6 +213,7 @@ export const formatDateTimeLocal = (date: string) => { return dateFormat.format(moment(moment.utc(`${date}`)) as never as Date); }; + export const formatDateLocal = (date: string) => { if (!date) return ""; @@ -266,15 +262,6 @@ export const formatTypeDate = () => { .replace("51", "ss"); }; -export const formatDate = (date: string) => { - if (!date) return ""; - const dateFormat = new Intl.DateTimeFormat("en-US", { - timeZone: moment.tz.guess(), - timeZoneName: "short" - }); - return dateFormat.format(moment.utc(date) as never as Date); -}; - export const getEpochSlotNo = (data: IDataEpoch) => { if (data.status === "FINISHED") { return MAX_SLOT_EPOCH; diff --git a/src/components/Home/LatestStories/LatestStories.test.tsx b/src/components/Home/LatestStories/LatestStories.test.tsx index 1ba68a8447..8c32cd1342 100644 --- a/src/components/Home/LatestStories/LatestStories.test.tsx +++ b/src/components/Home/LatestStories/LatestStories.test.tsx @@ -3,7 +3,7 @@ import "@testing-library/jest-dom/extend-expect"; import { render } from "src/test-utils"; import useFetch from "src/commons/hooks/useFetch"; -import { formatDateTime } from "src/commons/utils/helper"; +import { formatDateTimeLocal } from "src/commons/utils/helper"; import LatestStories from "."; @@ -43,6 +43,6 @@ describe("LatestStories", () => { it("renders data in the list LatestStories", async () => { render(); expect(screen.getByText(mockItem.title)).toBeInTheDocument(); - expect(screen.getByText(formatDateTime(mockItem.news_item_content.date))).toBeInTheDocument(); + expect(screen.getByText(formatDateTimeLocal(mockItem.news_item_content.date))).toBeInTheDocument(); }); }); diff --git a/src/components/Home/LatestStories/index.tsx b/src/components/Home/LatestStories/index.tsx index 3a7b747f44..63796df7c2 100644 --- a/src/components/Home/LatestStories/index.tsx +++ b/src/components/Home/LatestStories/index.tsx @@ -7,11 +7,12 @@ import useFetch from "src/commons/hooks/useFetch"; import { CalenderPaleIcon, SliderRight } from "src/commons/resources"; import { API } from "src/commons/utils/api"; import { CARDANO_NEWS_URL } from "src/commons/utils/constants"; -import { formatDateTime, getHostname } from "src/commons/utils/helper"; +import { formatDateTimeLocal, getHostname } from "src/commons/utils/helper"; import CustomTooltip from "src/components/commons/CustomTooltip"; import ViewAllButtonExternal from "src/components/commons/ViewAllButtonExternal"; import breakpoints from "src/themes/breakpoints"; import { CommonSkeleton } from "src/components/commons/CustomSkeleton"; +import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip"; import { Author, @@ -132,7 +133,7 @@ const LatestStories = () => { diff --git a/src/components/ProtocolHistoryModal/index.tsx b/src/components/ProtocolHistoryModal/index.tsx index c02c2340e8..4f2a5b4e80 100644 --- a/src/components/ProtocolHistoryModal/index.tsx +++ b/src/components/ProtocolHistoryModal/index.tsx @@ -5,10 +5,11 @@ import { API } from "src/commons/utils/api"; import StyledModal from "src/components/commons/StyledModal"; import useFetch from "src/commons/hooks/useFetch"; import { TProtocolItem } from "src/types/protocol"; -import { formatDateTime, getShortHash } from "src/commons/utils/helper"; +import { formatDateTimeLocal, getShortHash } from "src/commons/utils/helper"; import { details } from "src/commons/routers"; import { LinkComponent, ModalTitle, StyledTableCell, StyledTableHeadCell } from "./styles"; +import DatetimeTypeTooltip from "../commons/DatetimeTypeTooltip"; interface IProps { open: boolean; handleCloseModal: () => void; @@ -47,7 +48,9 @@ export default function ProtocolHistoryModal({ open, protocolType, handleCloseMo {getShortHash(item.transactionHashs[0])} - {formatDateTime(item.time)} + + {formatDateTimeLocal(item.time)} + ))} diff --git a/src/components/commons/Layout/Header/SettingTimezone/index.tsx b/src/components/commons/Layout/Header/SettingTimezone/index.tsx index 6a9a84123d..08ce09dadd 100644 --- a/src/components/commons/Layout/Header/SettingTimezone/index.tsx +++ b/src/components/commons/Layout/Header/SettingTimezone/index.tsx @@ -23,14 +23,22 @@ export default function SettingTimezone() { return (
- + + + { p={2} px={4} borderRadius={2} - width={"min(300px, 80vw)"} + width={"min(320px, 80vw)"} position={"relative"} bgcolor={theme.palette.secondary[0]} sx={{ @@ -80,7 +88,7 @@ const TimezoneCard = () => { background: theme.palette.secondary[0], position: "absolute", top: "-6px", - left: "12px", + left: "30px", width: "14px", height: "16px", transform: "rotate(45deg)" @@ -109,27 +117,36 @@ const TimezoneCard = () => { - {zoneNameShort !== "GMT" && ( + {zoneNameShort.indexOf("+") != -1 ? zoneName : zoneNameShort} (UTC {timezone}) - + {moment(Date().toString()).format("HH:mm")} - )} + { color={theme.palette.secondary.light} > UTC - + {moment(Date().toString()).utc().format("HH:mm")} - + diff --git a/src/components/commons/Layout/Header/index.tsx b/src/components/commons/Layout/Header/index.tsx index d83667f965..8c94294a2d 100644 --- a/src/components/commons/Layout/Header/index.tsx +++ b/src/components/commons/Layout/Header/index.tsx @@ -104,7 +104,6 @@ const Header: React.FC = (props) => { }} /> - diff --git a/src/components/commons/Layout/Sidebar/SidebarMenu/styles.ts b/src/components/commons/Layout/Sidebar/SidebarMenu/styles.ts index ca5463c795..b6a3c3ab3a 100644 --- a/src/components/commons/Layout/Sidebar/SidebarMenu/styles.ts +++ b/src/components/commons/Layout/Sidebar/SidebarMenu/styles.ts @@ -4,7 +4,7 @@ import { SystemStyleObject } from "@mui/system"; import { drawerWidth, drawerWidthMobile, drawerWidthTablet } from "../../styles"; export const SidebarMenuContainer = styled(Box)(({ theme }) => ({ - height: "calc(100% - 60px)", + height: "calc(100% - 200px)", display: "flex", flexDirection: "column", justifyContent: "space-between", @@ -13,7 +13,7 @@ export const SidebarMenuContainer = styled(Box)(({ theme }) => ({ maxHeight: "calc(100% - 180px) !important" }, [theme.breakpoints.down("md")]: { - maxHeight: "calc(100% - 100px)" + maxHeight: "calc(100% - 160px)" } })); diff --git a/src/components/commons/Layout/Sidebar/index.tsx b/src/components/commons/Layout/Sidebar/index.tsx index 00a948ec6b..9266885f3c 100644 --- a/src/components/commons/Layout/Sidebar/index.tsx +++ b/src/components/commons/Layout/Sidebar/index.tsx @@ -1,9 +1,9 @@ -import { Box, Button, ButtonGroup, useTheme } from "@mui/material"; -import React from "react"; +import React, { useState } from "react"; import { useSelector } from "react-redux"; -import { useWindowSize } from "react-use"; +import { useLocalStorage, useWindowSize } from "react-use"; +import { Box, Button, ButtonGroup, useTheme } from "@mui/material"; +import moment from "moment"; -import { useScreen } from "src/commons/hooks/useScreen"; import { DarkModeMobile, LightModeMobile, @@ -23,7 +23,18 @@ const Sidebar: React.FC = () => { const { sidebar } = useSelector(({ user }: RootState) => user); const { theme } = useSelector(({ theme }: RootState) => theme); const { height } = useWindowSize(); - const { isTablet, isMobile } = useScreen(); + + const zoneName = moment.tz.guess(); + const zoneNameShort = moment.tz(zoneName).format("z"); + const [timezoneLS, setTimezoneLS] = useLocalStorage("timezone", window.navigator.language); + const [selectedTimeZone, setSelectedTimeZone] = useState(zoneNameShort !== "GMT" ? timezoneLS : "UTC"); + + const handleChange = (tz) => { + setSelectedTimeZone(tz); + setTimezoneLS(tz); + window.location.reload(); + }; + const muiTheme = useTheme(); const getLogo = () => { if (theme === "light") { @@ -51,59 +62,143 @@ const Sidebar: React.FC = () => { - {isTablet && ( - - + + + + { + if (selectedTimeZone !== window.navigator.language) { + handleChange(window.navigator.language); + } + }} + disabled={zoneNameShort === "GMT"} + color={ + window.navigator.language === selectedTimeZone + ? muiTheme.palette.primary.main + : muiTheme.palette.secondary.light + } + bgcolor={ + window.navigator.language === selectedTimeZone + ? muiTheme.isDark + ? muiTheme.palette.secondary[0] + : muiTheme.palette.primary[200] + : "transparent" + } + border={`2px solid ${ + window.navigator.language === selectedTimeZone + ? muiTheme.palette.primary.main + : muiTheme.palette.primary[200] + } `} + sx={{ + "&:hover": { + background: + window.navigator.language === selectedTimeZone ? muiTheme.palette.primary[200] : "transparent", + border: `${window.navigator.language === selectedTimeZone ? "2px" : "1px"} solid ${ + muiTheme.palette.primary.main + }` + }, + "&:disabled": { + color: muiTheme.palette.primary[200], + border: `${window.navigator.language === selectedTimeZone ? "2px" : "1px"} solid ${ + muiTheme.palette.primary[200] + }` + } + }} + borderRadius={"8px"} + fontSize={16} + > + {zoneNameShort.indexOf("+") != -1 ? zoneName : zoneNameShort} + + + { + if (selectedTimeZone !== "UTC") { + handleChange("UTC"); + } + }} + fontSize={16} + borderRadius={"8px"} + color={selectedTimeZone === "UTC" ? muiTheme.palette.primary.main : muiTheme.palette.secondary.light} + bgcolor={ + selectedTimeZone === "UTC" + ? muiTheme.isDark + ? muiTheme.palette.secondary[0] + : muiTheme.palette.primary[200] + : "transparent" + } + border={`2px solid ${ + selectedTimeZone === "UTC" ? muiTheme.palette.primary.main : muiTheme.palette.primary[200] + } `} + sx={{ + "&:hover": { + background: selectedTimeZone === "UTC" ? muiTheme.palette.primary[200] : "transparent", + border: `${selectedTimeZone === "UTC" ? "2px" : "1px"} solid ${muiTheme.palette.primary.main}` + } + }} + borderLeft={`2px solid ${ + selectedTimeZone === "UTC" ? muiTheme.palette.primary.main : muiTheme.palette.primary.main + } !important`} + > + UTC + + + + + + + { + setTheme("light"); + }} + color={muiTheme.isDark ? muiTheme.palette.secondary.light : muiTheme.palette.primary.main} + bgcolor={muiTheme.isDark ? "transparent" : muiTheme.palette.primary[200]} + border={`2px solid ${muiTheme.isDark ? muiTheme.palette.primary[100] : muiTheme.palette.primary.main} `} + borderRadius={"8px"} + fontSize={16} + sx={{ + "&:hover": { + background: muiTheme.isDark ? "transparent" : muiTheme.palette.primary[200], + border: `2px solid ${muiTheme.palette.primary.main}` + } + }} + > { - setTheme("light"); - }} - color={muiTheme.isDark ? muiTheme.palette.secondary.light : muiTheme.palette.primary.main} - bgcolor={muiTheme.isDark ? "transparent" : muiTheme.palette.primary[200]} - border={`2px solid ${muiTheme.isDark ? muiTheme.palette.primary[100] : muiTheme.palette.primary.main} `} - borderRadius={"8px"} - fontSize={16} - sx={{ - "&:hover": { - background: muiTheme.isDark ? "transparent" : muiTheme.palette.primary[200], - border: `2px solid ${muiTheme.palette.primary.main}` - } - }} - > - - Light - + component={LightModeMobile} + mr={"4px"} + fill={muiTheme.isDark ? muiTheme.palette.secondary.light : muiTheme.palette.primary.main} + /> + Light + + { + setTheme("dark"); + }} + fontSize={16} + color={muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.secondary.light} + bgcolor={muiTheme.isDark ? muiTheme.palette.secondary[0] : "transparent"} + border={`2px solid ${muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.primary[200]} `} + borderRadius={"8px"} + borderLeft={`2px solid ${ + muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.primary.main + } !important`} + > { - setTheme("dark"); - }} - fontSize={16} - color={muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.secondary.light} - bgcolor={muiTheme.isDark ? muiTheme.palette.secondary[0] : "transparent"} - border={`2px solid ${muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.primary[200]} `} - borderRadius={"8px"} - borderLeft={`2px solid ${ - muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.primary.main - } !important`} - > - - Dark - - - - )} + component={DarkModeMobile} + mr={"4px"} + fill={muiTheme.isDark ? muiTheme.palette.primary.main : muiTheme.palette.secondary.light} + /> + Dark + + + ); }; diff --git a/src/components/commons/Layout/Sidebar/styles.ts b/src/components/commons/Layout/Sidebar/styles.ts index 8bce8e9a2c..b457d76a4a 100644 --- a/src/components/commons/Layout/Sidebar/styles.ts +++ b/src/components/commons/Layout/Sidebar/styles.ts @@ -26,7 +26,8 @@ export const NavbarContainer = styled("nav")<{ vh: number }>(({ theme, vh }) => export const WrapButtonSelect = styled(Box)(({ theme }) => ({ display: "none", - [theme.breakpoints.down("md")]: { + marginTop: theme.spacing(1), + [theme.breakpoints.down("lg")]: { display: "flex" }, padding: "0px 20px", diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 313ea51b3b..0d052fa6ae 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -722,6 +722,8 @@ "common.walletBalance": "Wallet balance", "common.total": "Total", "common.timzoneFormat": "Timezone Format", + "common.timzoneNotice": "Update your timezone preferences", + "common.timzoneNoticeDisnable": "Timezone already corresponds to UTC", "common.timzoneFormat.des": "Choose between your local timezone and UTC. If you want to save these preferences you will need to be signed in.", "common.poolRegistration": "Pool Registration", "common.searchPoolDesc": "Search to explore the staking lifecycle events of a delegator or pool.",