From 40c7fc8f801b6d57e207a602725a42f896881464 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Thu, 12 Dec 2024 00:45:34 +0100
Subject: [PATCH] FIX: Makes styling in Format Dialog consistent with Figmas

---
 webapp/src/components/formatPicker.tsx | 138 +++++++++++++++++++++++--
 1 file changed, 128 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/formatPicker.tsx b/webapp/src/components/formatPicker.tsx
index 3dfdce0..5ee43a6 100644
--- a/webapp/src/components/formatPicker.tsx
+++ b/webapp/src/components/formatPicker.tsx
@@ -8,6 +8,9 @@ import {
 } from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Check } from "lucide-react";
+import styled from "@emotion/styled";
+import { theme } from "../theme";
 
 type FormatPickerProps = {
   className?: string;
@@ -22,17 +25,53 @@ const FormatPicker = (properties: FormatPickerProps) => {
   const { t } = useTranslation();
   const [formatCode, setFormatCode] = useState(properties.numFmt);
 
+  const handleClose = () => {
+    properties.onClose();
+  };
+
   const onSubmit = (format_code: string): void => {
     properties.onChange(format_code);
     properties.onClose();
   };
   return (
-    <Dialog open={properties.open} onClose={properties.onClose}>
-      <DialogTitle>{t("num_fmt.title")}</DialogTitle>
-      <DialogContent dividers>
-        <TextField
+    <Dialog
+      open={properties.open}
+      onClose={properties.onClose}
+      PaperProps={{
+        style: { minWidth: "280px" },
+      }}
+    >
+      <StyledDialogTitle>
+        {t("num_fmt.title")}
+        <Cross onClick={handleClose} onKeyDown={() => {}}>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Close</title>
+            <path
+              d="M12 4.5L4 12.5"
+              stroke="#333333"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M4 4.5L12 12.5"
+              stroke="#333333"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Cross>
+      </StyledDialogTitle>
+
+      <StyledDialogContent>
+        <StyledTextField
+          autoFocus
           defaultValue={properties.numFmt}
-          label={t("num_fmt.label")}
           name="format_code"
           onChange={(event) => setFormatCode(event.target.value)}
           onKeyDown={(event) => {
@@ -40,15 +79,94 @@ const FormatPicker = (properties: FormatPickerProps) => {
           }}
           spellCheck="false"
           onClick={(event) => event.stopPropagation()}
+          onFocus={(event) => event.target.select()}
         />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => onSubmit(formatCode)}>
+      </StyledDialogContent>
+      <DialogFooter>
+        <StyledButton onClick={() => onSubmit(formatCode)}>
+          <Check
+            style={{ width: "16px", height: "16px", marginRight: "8px" }}
+          />
           {t("num_fmt.save")}
-        </Button>
-      </DialogActions>
+        </StyledButton>
+      </DialogFooter>
     </Dialog>
   );
 };
 
+const StyledDialogTitle = styled("div")`
+  display: flex;
+  align-items: center;
+  height: 44px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Inter;
+  padding: 0px 12px;
+  justify-content: space-between;
+  border-bottom: 1px solid ${theme.palette.grey["300"]};
+`;
+
+const Cross = styled("div")`
+  &:hover {
+    background-color: ${theme.palette.grey["100"]};
+  }
+  display: flex;
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledDialogContent = styled("div")`
+  font-size: 12px;
+  margin: 12px;
+`;
+
+const StyledTextField = styled(TextField)`
+  width: 100%;
+  min-width: 320px;
+  border-radius: 4px;
+  overflow: hidden;
+  & .MuiInputBase-input {
+    font-size: 14px;
+    padding: 10px;
+    border: 1px solid ${theme.palette.grey["300"]};
+    border-radius: 4px;
+    color: ${theme.palette.common["black"]};
+    background-color: ${theme.palette.common["white"]};
+  }
+  &:hover .MuiInputBase-input {
+    border: 1px solid ${theme.palette.grey["500"]};
+  }
+`;
+
+const DialogFooter = styled("div")`
+  color: #757575;
+  display: flex;
+  align-items: center;
+  border-top: 1px solid ${theme.palette.grey["300"]};
+  font-family: Inter;
+  justify-content: flex-end;
+  padding: 12px;
+`;
+
+const StyledButton = styled("div")`
+  cursor: pointer;
+  color: #ffffff;
+  background: #f2994a;
+  padding: 0px 10px;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  font-family: "Inter";
+  font-size: 14px;
+  &:hover {
+    background: #d68742;
+  }
+`;
+
 export default FormatPicker;