modify category & property dropdown

TeamTaoist · Apr 6, 2024 · 1b84792 · 1b84792
1 parent 429c92b
commit 1b84792
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 76 deletions.
diff --git a/src/assets/dropdown-check.svg b/src/assets/dropdown-check.svg
diff --git a/src/components/ReactSelect.tsx b/src/components/ReactSelect.tsx
@@ -3,6 +3,7 @@ import Select from "react-select";
 import makeAnimated from "react-select/animated";
 import arrowBottom from "../assets/workspace/arrow-bottom.svg";
 import removeIcon from "../assets/x-circle.svg";
+import checkIcon from "../assets/dropdown-check.svg";
 
 const animatedComponents = makeAnimated();
 
@@ -113,18 +114,41 @@ const RemoveIcon = ({ innerProps }: any) => {
   );
 };
 // option icon
-// const OptionWithIcon = ({ ...props }: any) => (
-//   <div {...props} style={{ display: "flex", alignItems: "center" }}>
-//     {props.isSelected && (
-//       <img
-//         src={removeIcon}
-//         alt="Option Icon"
-//         style={{ width: 20, height: 20, marginRight: 10 }}
-//       />
-//     )}
-//     <div>{props.label}</div>
-//   </div>
-// );
+const OptionWithIcon = ({ label, isSelected, innerProps }: any) => (
+  <div
+    {...innerProps}
+    style={{
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: isSelected ? "#E2E8F0" : "inherit",
+      color: isSelected ? "#0F172A" : "inherit",
+      fontSize: "14px",
+      fontFamily: "Inter",
+      margin: "4px",
+      maxWidth: "calc(100% - 16px)",
+      borderRadius: "6px",
+      padding: "6px",
+      ":hover": {
+        backgroundColor: "#CDD6E0",
+      },
+    }}
+  >
+    {isSelected && (
+      <img
+        src={checkIcon}
+        alt="Option Icon"
+        style={{ width: 16, height: 16, marginRight: 6 }}
+      />
+    )}
+    <div
+      style={{
+        marginLeft: isSelected ? 0 : "22px",
+      }}
+    >
+      {label}
+    </div>
+  </div>
+);
 
 export default function ReactSelect({
   value,
@@ -144,7 +168,7 @@ export default function ReactSelect({
         DropdownIndicator: ArrowIcon,
         IndicatorSeparator: () => null,
         MultiValueRemove: RemoveIcon,
-        // Option: OptionWithIcon,
+        Option: OptionWithIcon,
         // SingleValue: OptionWithIcon,
       }}
       isMulti={isMulti}

diff --git a/src/components/categoryDropdown.tsx b/src/components/categoryDropdown.tsx
@@ -9,7 +9,7 @@ const CategoryDropdown = ({ value, data, onClick }: any) => {
       <Select
         fullWidth
         size="small"
-        value={value}
+        value={value?.category_name}
         IconComponent={() => (
           <InputAdornment position="start">
             <img
@@ -24,23 +24,6 @@ const CategoryDropdown = ({ value, data, onClick }: any) => {
             {selectedValue}
           </div>
         )}
-        MenuProps={{
-          sx: {
-            "& .MuiMenuItem-root": {
-              marginInline: "10px",
-              borderRadius: "6px",
-              fontSize: "14px",
-              fontWeight: "500",
-              margin: "5px 8px",
-              "&:hover": {
-                bgcolor: "var(--clr-gray-100)",
-              },
-              "&.Mui-selected": {
-                bgcolor: "var(--clr-gray-100)",
-              },
-            },
-          },
-        }}
         sx={{
           overflow: "hidden",
           minWidth: "100%",
@@ -74,11 +57,17 @@ const CategoryDropdown = ({ value, data, onClick }: any) => {
             sx={{
               paddingInline: "5px",
               fontSize: "14px",
+              marginInline: "10px",
+              borderRadius: "6px",
+              margin: "5px 8px",
               "&:hover": {
                 backgroundColor: "var(--clr-gray-100)",
               },
               "&.Mui-selected": {
-                backgroundColor: "var(--clr-gray-200)",
+                backgroundColor:
+                  value?.category_id === item.ID
+                    ? "var(--clr-gray-200)"
+                    : "transparent",
               },
             }}
           >
@@ -91,7 +80,7 @@ const CategoryDropdown = ({ value, data, onClick }: any) => {
                   alignItems: "center",
                 }}
               >
-                {value === item.name && (
+                {value?.category_id === item.ID && (
                   <CheckIcon style={{ color: "#334155", width: "16px" }} />
                 )}
               </div>

diff --git a/src/components/paymentRequestGroupDetails/GroupPaymentCategoryProperties.tsx b/src/components/paymentRequestGroupDetails/GroupPaymentCategoryProperties.tsx
@@ -105,26 +105,9 @@ const GroupPaymentCategoryProperties = ({
                         fontSize: "14px",
                       }}
                     >
-                      {selectedValue}
+                      {selectedValue ? selectedValue : <p>Select category</p>}
                     </div>
                   )}
-                  MenuProps={{
-                    sx: {
-                      "& .MuiMenuItem-root": {
-                        marginInline: "10px",
-                        borderRadius: "6px",
-                        fontSize: "14px",
-                        fontWeight: "500",
-                        margin: "5px 8px",
-                        "&:hover": {
-                          bgcolor: "var(--clr-gray-100)",
-                        },
-                        "&.Mui-selected": {
-                          bgcolor: "var(--clr-gray-100)",
-                        },
-                      },
-                    },
-                  }}
                   sx={{
                     minWidth: "100%",
                     height: "40px",
@@ -150,9 +133,9 @@ const GroupPaymentCategoryProperties = ({
                     readOnly: isEditable,
                   }}
                 >
-                  <MenuItem disabled value="">
-                    {sharePaymentRequestForm[index].category_name}
-                  </MenuItem>
+                  {/* <MenuItem disabled value="">
+                    Select category
+                  </MenuItem> */}
                   {shareData?.category_and_properties?.map((category) => (
                     <MenuItem
                       key={category.ID}
@@ -165,12 +148,20 @@ const GroupPaymentCategoryProperties = ({
                         );
                       }}
                       sx={{
+                        paddingInline: "5px",
                         fontSize: "14px",
+                        marginInline: "10px",
+                        borderRadius: "6px",
+                        margin: "5px 8px",
                         "&:hover": {
                           backgroundColor: "var(--clr-gray-100)",
                         },
                         "&.Mui-selected": {
-                          backgroundColor: "var(--clr-gray-200)",
+                          backgroundColor:
+                            sharePaymentRequestForm[index].category_id ===
+                            category.ID
+                              ? "var(--clr-gray-200)"
+                              : "transparent",
                         },
                       }}
                     >

diff --git a/src/components/workspace/paymentRequest/PaymentRequestGroupDetails.tsx b/src/components/workspace/paymentRequest/PaymentRequestGroupDetails.tsx
@@ -493,23 +493,6 @@ const PaymentRequestGroupDetails = ({
                                   {selectedValue}
                                 </div>
                               )}
-                              MenuProps={{
-                                sx: {
-                                  "& .MuiMenuItem-root": {
-                                    marginInline: "10px",
-                                    borderRadius: "6px",
-                                    fontSize: "14px",
-                                    fontWeight: "500",
-                                    margin: "5px 8px",
-                                    "&:hover": {
-                                      bgcolor: "var(--clr-gray-100)",
-                                    },
-                                    "&.Mui-selected": {
-                                      bgcolor: "var(--clr-gray-100)",
-                                    },
-                                  },
-                                },
-                              }}
                               sx={{
                                 minWidth: "100%",
                                 height: "42px",
@@ -551,12 +534,20 @@ const PaymentRequestGroupDetails = ({
                                     );
                                   }}
                                   sx={{
+                                    paddingInline: "5px",
                                     fontSize: "14px",
+                                    marginInline: "10px",
+                                    borderRadius: "6px",
+                                    margin: "5px 8px",
                                     "&:hover": {
                                       backgroundColor: "var(--clr-gray-100)",
                                     },
                                     "&.Mui-selected": {
-                                      backgroundColor: "var(--clr-gray-200)",
+                                      backgroundColor:
+                                        sharePaymentRequestForm[index]
+                                          .category_id === category.ID
+                                          ? "var(--clr-gray-200)"
+                                          : "transparent",
                                     },
                                   }}
                                 >

diff --git a/src/components/workspace/paymentRequest/PaymentRequestTableList.tsx b/src/components/workspace/paymentRequest/PaymentRequestTableList.tsx
@@ -256,7 +256,9 @@ const PaymentRequestTableList = ({
                       {payments.amount} {payments.currency_name}
                     </Cell>
                     <Cell width="180px">
-                      <CategoryCell>{payments.category_name}</CategoryCell>
+                      <CategoryCell>
+                        <p>{payments.category_name}</p>
+                      </CategoryCell>
                     </Cell>
                     <Cell width="176px">{getPaymentUpdateTime(payments)}</Cell>
                     <Cell width="96px"></Cell>

diff --git a/src/pages/workspace/bookkeeping/BookkeepingTransferDetails.tsx b/src/pages/workspace/bookkeeping/BookkeepingTransferDetails.tsx
@@ -419,7 +419,7 @@ const BookkeepingTransferDetails = ({
                       >
                         <CategoryDropdown
                           data={workspaceCategoryProperties}
-                          value={details?.[0].category_name}
+                          value={details?.[0]}
                           onClick={handleCategory}
                         />
                       </FormControl>

diff --git a/src/pages/workspace/paymentRequest/PaymentRequestDetails.tsx b/src/pages/workspace/paymentRequest/PaymentRequestDetails.tsx
@@ -417,7 +417,7 @@ const PaymentRequestDetails = ({
                       >
                         <CategoryDropdown
                           data={workspaceCategoryProperties}
-                          value={details?.category_name}
+                          value={details}
                           onClick={handleCategory}
                         />
                       </FormControl>

diff --git a/src/pages/workspaceDashboard/newPaymentRequest/newPaymentRequest.style.tsx b/src/pages/workspaceDashboard/newPaymentRequest/newPaymentRequest.style.tsx
@@ -226,6 +226,7 @@ export const RequestSubmit = styled.button`
   }
 `;
 export const PaymentRequestInput = styled.input`
+  font-family: "Inter";
   border: 1px solid var(--clr-gray-200);
   outline: none;
   padding: 10px 16px;
@@ -240,6 +241,7 @@ export const PaymentRequestInput = styled.input`
   }
 `;
 export const PaymentRequestDateInput = styled.input<any>`
+  font-family: "Inter";
   border: 1px solid var(--clr-gray-200);
   outline: none;
   padding: 10px 16px;