feat: MET-1989 add reponsive

cardano-foundation · Apr 16, 2024 · 4c7b245 · 4c7b245
1 parent 3484e5b
commit 4c7b245
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 96 deletions.
diff --git 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
@@ -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(<LatestStories />);
     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
@@ -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 = () => {
                   <FooterCard>
                     <Time>
                       <TimeIcon src={CalenderPaleIcon} alt="calender pale" />
-                      {formatDateTime(date)}
+                      <DatetimeTypeTooltip>{formatDateTimeLocal(date)}</DatetimeTypeTooltip>
                     </Time>
                   </FooterCard>
                 </Detail>

diff --git 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])}
                     </LinkComponent>
                   </StyledTableCell>
-                  <StyledTableCell>{formatDateTime(item.time)}</StyledTableCell>
+                  <StyledTableCell>
+                    <DatetimeTypeTooltip>{formatDateTimeLocal(item.time)}</DatetimeTypeTooltip>
+                  </StyledTableCell>
                 </TableRow>
               ))}
             </TableBody>

diff --git 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 (
     <div>
-      <Button
-        aria-describedby={id}
-        type="button"
-        onClick={handleClick}
-        sx={{ border: `2px solid ${theme.palette.primary[200]}`, width: 40, minWidth: 40, height: 40, borderRadius: 2 }}
-      >
-        <SettingTimezoneIcon fill={theme.palette.secondary.light} />
-      </Button>
+      <CustomTooltip title={t("common.timzoneNotice")}>
+        <Button
+          aria-describedby={id}
+          type="button"
+          onClick={handleClick}
+          sx={{
+            border: `2px solid ${theme.palette.primary[200]}`,
+            width: 40,
+            minWidth: 40,
+            height: 40,
+            borderRadius: 2
+          }}
+        >
+          <SettingTimezoneIcon fill={theme.palette.secondary.light} />
+        </Button>
+      </CustomTooltip>
       <Popover
         id={id}
         open={open}
@@ -70,7 +78,7 @@ const TimezoneCard = () => {
       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 = () => {
           <BlackWarningIcon />
         </Box>
       </Box>
-      {zoneNameShort !== "GMT" && (
+      <Box
+        component={zoneNameShort === "GMT" ? CustomTooltip : Box}
+        title={t("common.timzoneNoticeDisnable")}
+        placement="bottom"
+      >
         <Box
           py={1}
           display={"flex"}
           alignItems={"center"}
           justifyContent={"space-between"}
-          color={theme.palette.secondary.light}
+          color={zoneNameShort === "GMT" ? theme.palette.secondary[600] : theme.palette.secondary.light}
         >
           <Box>
             {zoneNameShort.indexOf("+") != -1 ? zoneName : zoneNameShort} (UTC {timezone})
           </Box>
-          <Box>
+          <Box display={"flex"} alignItems={"center"} gap={1}>
             {moment(Date().toString()).format("HH:mm")}
             <Radio
+              sx={{
+                color: `${zoneNameShort === "GMT" ? theme.palette.secondary[600] : "none"} !important`,
+                p: 0
+              }}
               value={window.navigator.language}
               checked={window.navigator.language === selectedTimeZone}
               onChange={handleChange}
+              disabled={zoneNameShort === "GMT"}
             />
           </Box>
         </Box>
-      )}
+      </Box>
 
       <Box
         display={"flex"}
@@ -138,9 +155,9 @@ const TimezoneCard = () => {
         color={theme.palette.secondary.light}
       >
         <Box>UTC</Box>
-        <Box>
+        <Box display={"flex"} alignItems={"center"} gap={1}>
           {moment(Date().toString()).utc().format("HH:mm")}
-          <Radio value={"UTC"} checked={"UTC" === selectedTimeZone} onChange={handleChange} />
+          <Radio sx={{ p: 0 }} value={"UTC"} checked={"UTC" === selectedTimeZone} onChange={handleChange} />
         </Box>
       </Box>
     </Box>

diff --git a/src/components/commons/Layout/Header/index.tsx b/src/components/commons/Layout/Header/index.tsx
@@ -104,7 +104,6 @@ const Header: React.FC<RouteComponentProps> = (props) => {
                 }}
               />
             </WrapButtonSelect>
-
             <WrapButtonSelect>
               <SettingTimezone />
             </WrapButtonSelect>

diff --git 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)"
   }
 }));