@sikka/hawa 0.1.55 → 0.1.57

package/src/elements/HawaTable.tsx

@@ -4,6 +4,9 @@ import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
 import { HawaTextField } from "./HawaTextField"
 import { HawaButton } from "./HawaButton"
+import { cn } from "../util"
+import { Button } from "./Button"
+import { DropdownMenu } from "./DropdownMenu"
 
 // TODO: translate header tools and make it more customizable
 // TODO: pass the onSearch handler to the parent
@@ -21,7 +24,7 @@ type ColTypes = {
 type TableTypes = {
   pagination?: boolean
   columns: ColTypes[]
-  actions?: ActionItems[][]
+  actions?: Item[]
   direction?: "rtl" | "ltr"
   rows?: RowTypes[][]
   handleActionClick?: any
@@ -51,6 +54,29 @@ type ActionItems = {
   element?: any
 }
 
+type Item = {
+  label: string
+  value: string
+  action?: () => void
+  highlighted?: boolean
+}
+
+const ChevronIcon = () => (
+  <svg
+    aria-label="Chevron Right Icon"
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0"
+    viewBox="0 0 16 16"
+    height="1em"
+    width="1em"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+    ></path>
+  </svg>
+)
 export const HawaTable: FC<TableTypes> = ({
   size = "normal",
   bodyColor = "white",
@@ -66,40 +92,9 @@ export const HawaTable: FC<TableTypes> = ({
   const [enteredPage, setEnteredPage] = useState(null)
   const [page, setPage] = useState(1)
   const [sortingCol, setSortingCol] = useState(null)
-
   const [sortedRows, setSortedRows] = useState(props.rows)
   const [sortColumn, setSortColumn] = useState(null)
   const [sortDirection, setSortDirection] = useState(null)
-
-  const handleSort = (colIndex, sortable) => {
-    if (sortable) {
-      setSortColumn(colIndex)
-      setSortDirection((prevDirection) =>
-        prevDirection === "asc" ? "desc" : "asc"
-      )
-    }
-    // const newDirection =
-    //   sortColumn === colIndex && sortDirection === "asc" ? "desc" : "asc"
-
-    // const sortedData = [...sortedRows].sort((a, b) => {
-    //   const aValue = a[colIndex].value
-    //   const bValue = b[colIndex].value
-
-    //   // You can enhance the sorting logic based on the data type
-    //   if (newDirection === "asc") {
-    //     return aValue.localeCompare(bValue)
-    //   } else {
-    //     return bValue.localeCompare(aValue)
-    //   }
-    // })
-
-    // setSortedRows(sortedData)
-    // setSortColumn(colIndex)
-    // setSortDirection(newDirection)
-  }
-
-  // const { slice, range } = useTable(props.rows, page, perPage)
-  // Use the custom hook to get paginated and sorted data
   const { slice, range } = useTable(
     props.rows,
     page,
@@ -108,13 +103,18 @@ export const HawaTable: FC<TableTypes> = ({
     sortDirection
   )
   let isRTL = direction === "rtl"
-
   let sizeStyles = {
     normal: "py-3 px-6",
     small: "px-3 py-1",
   }
-  // let sortedRows = props.rows
-
+  const handleSort = (colIndex, sortable) => {
+    if (sortable) {
+      setSortColumn(colIndex)
+      setSortDirection((prevDirection) =>
+        prevDirection === "asc" ? "desc" : "asc"
+      )
+    }
+  }
   const changePage = () => {
     if (slice?.length < 1 && page !== 1) {
       setPage(page - 1)
@@ -150,39 +150,34 @@ export const HawaTable: FC<TableTypes> = ({
               margin="none"
             />
             <div className="flex flex-row items-center justify-between gap-2">
-              <HawaButton
-                startIcon={
-                  <svg
-                    aria-label="Filter Icon"
-                    stroke="currentColor"
-                    fill="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 16 16"
-                    height="1em"
-                    width="1em"
-                  >
-                    <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
-                  </svg>
-                }
-                endIcon={
-                  <svg
-                    aria-label="Chevron Right Icon"
-                    stroke="currentColor"
-                    fill="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 16 16"
-                    height="1em"
-                    width="1em"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                    ></path>
-                  </svg>
-                }
-              >
+              <Button className="flex flex-row gap-2">
+                <svg
+                  aria-label="Filter Icon"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 16 16"
+                  height="1em"
+                  width="1em"
+                >
+                  <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
+                </svg>
                 {props.texts?.filter ?? "Filter"}
-              </HawaButton>
+                <svg
+                  aria-label="Chevron Right Icon"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 16 16"
+                  height="1em"
+                  width="1em"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+                  ></path>
+                </svg>
+              </Button>
             </div>
           </div>
         )}
@@ -323,33 +318,21 @@ export const HawaTable: FC<TableTypes> = ({
                         )
                       }
                     })}
-                    {props.actions ? (
-                      size !== "small" ? (
-                        <td
-                          align={isRTL ? "right" : "left"}
-                          className={clsx(
-                            isRTL && lastRow
-                              ? "rounded-bl rounded-br-none"
-                              : "",
-                            !isRTL && lastRow
-                              ? "rounded-bl-none rounded-br"
-                              : ""
-                            // "w-fit bg-red-400"
-                          )}
-                          colSpan={1}
-                        >
-                          <div className="flex items-center justify-center">
-                            <HawaMenu
-                              size="small"
-                              actionedItem={[rowIndex, singleRow]}
-                              menuItems={props.actions}
-                              position={
-                                direction === "rtl"
-                                  ? "right-bottom"
-                                  : "left-bottom"
-                              }
-                              direction={direction}
-                            >
+                    {props.actions && (
+                      <td
+                        align={isRTL ? "right" : "left"}
+                        className={cn(
+                          isRTL && lastRow && "rounded-bl rounded-br-none",
+                          !isRTL && lastRow && "rounded-bl-none rounded-br"
+                        )}
+                        colSpan={1}
+                      >
+                        <div className="flex items-center justify-center">
+                          <DropdownMenu
+                            direction={direction}
+                            side="right"
+                            items={props.actions}
+                            trigger={
                               <div className="flex w-fit  cursor-pointer items-center justify-center rounded  p-2 hover:bg-gray-200 dark:hover:bg-gray-600">
                                 <svg
                                   aria-label="Vertical Three Dots Menu Icon"
@@ -363,19 +346,11 @@ export const HawaTable: FC<TableTypes> = ({
                                   <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
                                 </svg>
                               </div>
-                            </HawaMenu>
-                          </div>
-                        </td>
-                      ) : (
-                        <div className="flex flex-row  items-center justify-center gap-2 p-1">
-                          {props.actions[0].map((act) => (
-                            <div className=" p-1 transition-all hover:bg-gray-100">
-                              {act.icon}
-                            </div>
-                          ))}
+                            }
+                          />
                         </div>
-                      )
-                    ) : null}
+                      </td>
+                    )}
                   </tr>
                 )
               })
@@ -405,27 +380,15 @@ export const HawaTable: FC<TableTypes> = ({
             <div className="flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded ">
               {/* Previous Page Button */}
               <div
-                className={clsx(
-                  "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+                className={cn(
+                  "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-background p-1 text-xs hover:bg-primary/10 dark:hover:bg-primary/10",
+                  direction === "rtl" && "rotate-0"
                 )}
                 onClick={() =>
                   page <= 1 ? setPage(range.length) : setPage(page - 1)
                 }
               >
-                <svg
-                  aria-label="Chevron Right Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                  ></path>
-                </svg>
+                <ChevronIcon />
               </div>
               {/* Numbered Pagination */}
               <div className="flex flex-row items-center  overflow-clip rounded  transition-all">
@@ -439,7 +402,7 @@ export const HawaTable: FC<TableTypes> = ({
                           className={clsx(
                             "w-10 p-1 text-xs hover:bg-gray-200",
                             page === el
-                              ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                              ? "bg-primary text-primary-foreground hover:bg-primary"
                               : "bg-gray-100"
                           )}
                           onClick={() => setPage(el)}
@@ -483,7 +446,7 @@ export const HawaTable: FC<TableTypes> = ({
                           className={clsx(
                             "w-10 p-1 text-xs hover:bg-gray-200",
                             page === el
-                              ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                              ? "bg-primary text-primary-foreground hover:bg-primary"
                               : "bg-gray-100"
                           )}
                           onClick={() => setPage(el)}
@@ -501,15 +464,27 @@ export const HawaTable: FC<TableTypes> = ({
                       <button
                         key={index}
                         className={clsx(
-                          "w-10 p-1 text-xs  hover:bg-gray-200 dark:hover:bg-gray-700",
+                          "w-10 p-1 text-xs",
                           page === el
-                            ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
-                            : "border bg-background",
+                            ? "bg-primary text-primary-foreground "
+                            : "border bg-background hover:bg-primary/10 dark:hover:bg-primary/10",
 
-                          index === 0 ? "rounded-l border-r-0" : "",
-                          index === range.length - 1
-                            ? "rounded-r border-l-0"
-                            : ""
+                          // Check if the direction is 'rtl'
+                          direction === "rtl"
+                            ? // If direction is 'rtl', then check for the index conditions
+                              // and apply respective classes along with the 'something' class
+                              index === 0
+                              ? "rounded-r border-l-0" // Apply if index is 0 and direction is 'rtl'
+                              : index === range.length - 1
+                              ? "rounded-l border-r-0" // Apply if index is the last element and direction is 'rtl'
+                              : "" // Apply if index is other than 0 or last element and direction is 'rtl'
+                            : // If direction is not 'rtl', then again check for the index conditions
+                            // and apply respective classes along with the 'something else' class
+                            index === 0
+                            ? "rounded-l border-r-0" // Apply if index is 0 and direction is not 'rtl'
+                            : index === range.length - 1
+                            ? "rounded-r border-l-0" // Apply if index is the last element and direction is not 'rtl'
+                            : "" // Apply if index is other than 0 or last element and direction is not 'rtl'
                         )}
                         onClick={() => setPage(el)}
                       >
@@ -523,24 +498,12 @@ export const HawaTable: FC<TableTypes> = ({
                 onClick={() =>
                   page >= range.length ? setPage(1) : setPage(page + 1)
                 }
-                className={clsx(
-                  "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+                className={cn(
+                  "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-background p-1 text-xs hover:bg-primary/10 dark:hover:bg-primary/10",
+                  direction === "rtl" && "rotate-180"
                 )}
               >
-                <svg
-                  aria-label="Chevron Right Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                  ></path>
-                </svg>
+                <ChevronIcon />
               </div>
             </div>
           ) : (
@@ -582,6 +545,194 @@ export const HawaTable: FC<TableTypes> = ({
           )}
         </div>
       )}
+
+      {/* <Pagination
+        handleNextPage={() =>
+          page >= range.length ? setPage(1) : setPage(page + 1)
+        }
+        handlePrevPage={() =>
+          page <= 1 ? setPage(range.length) : setPage(page - 1)
+        }
+      /> */}
     </div>
   )
 }
+
+// const Pagination = (props) => (
+//   <div className="flex flex-row items-center justify-between ">
+//     {/* Pagination Pages  */}
+//     {range.length > 1 ? (
+//       <div className="flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded ">
+//         {/* Previous Page Button */}
+//         <div
+//           className={clsx(
+//             "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+//           )}
+//           onClick={props.handlePrevPage}
+//         >
+//           <svg
+//             aria-label="Chevron Right Icon"
+//             stroke="currentColor"
+//             fill="currentColor"
+//             stroke-width="0"
+//             viewBox="0 0 16 16"
+//             height="1em"
+//             width="1em"
+//           >
+//             <path
+//               fill-rule="evenodd"
+//               d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+//             ></path>
+//           </svg>
+//         </div>
+//         {/* Numbered Pagination */}
+//         <div className="flex flex-row items-center  overflow-clip rounded  transition-all">
+//           {/* The first page */}
+//           {range.length > 6 &&
+//             range.map((el, index) => {
+//               if (index <= 0) {
+//                 return (
+//                   <button
+//                     key={index}
+//                     className={clsx(
+//                       "w-10 p-1 text-xs hover:bg-gray-200",
+//                       page === el
+//                         ? "bg-primary text-white hover:bg-primary"
+//                         : "bg-gray-100"
+//                     )}
+//                     onClick={() => setPage(el)}
+//                   >
+//                     {el}
+//                   </button>
+//                 )
+//               }
+//             })}
+//           {/* The Current Page / Input  */}
+//           {range?.length > 6 && (
+//             <input
+//               type={"text"}
+//               className=" w-10  bg-gray-100 p-1 text-center text-xs"
+//               defaultValue={
+//                 page !== 0 || page !== range.length - 1 ? page : "..."
+//               }
+//               value={
+//                 page == 1 || page == range.length
+//                   ? "..."
+//                   : enteredPage
+//                   ? enteredPage
+//                   : page
+//               }
+//               onChange={(e) => setEnteredPage(parseInt(e.target.value))}
+//               onKeyDown={(e) => {
+//                 if (e.key === "Enter") {
+//                   setPage(enteredPage)
+//                   setEnteredPage(null)
+//                 }
+//               }}
+//             />
+//           )}
+//           {/* The last page */}
+//           {range?.length > 6 &&
+//             range.map((el, index) => {
+//               if (index >= range.length - 1) {
+//                 return (
+//                   <button
+//                     key={index}
+//                     className={clsx(
+//                       "w-10 p-1 text-xs hover:bg-gray-200",
+//                       page === el
+//                         ? "bg-primary text-white hover:bg-primary"
+//                         : "bg-gray-100"
+//                     )}
+//                     onClick={() => setPage(el)}
+//                   >
+//                     {el}
+//                   </button>
+//                 )
+//               }
+//             })}
+
+//           {/* All Pages if less than 6 pages */}
+//           {range?.length <= 6 &&
+//             range.map((el, index) => {
+//               return (
+//                 <button
+//                   key={index}
+//                   className={clsx(
+//                     "w-10 p-1 text-xs  hover:bg-gray-200 dark:hover:bg-gray-700",
+//                     page === el
+//                       ? "bg-primary text-white hover:bg-primary"
+//                       : "border bg-background",
+
+//                     index === 0 ? "rounded-l border-r-0" : "",
+//                     index === range.length - 1 ? "rounded-r border-l-0" : ""
+//                   )}
+//                   onClick={() => setPage(el)}
+//                 >
+//                   {el}
+//                 </button>
+//               )
+//             })}
+//         </div>
+//         {/* Next Page Button */}
+//         <div
+//           onClick={props.handleNextPage}
+//           className={clsx(
+//             "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+//           )}
+//         >
+//           <svg
+//             aria-label="Chevron Right Icon"
+//             stroke="currentColor"
+//             fill="currentColor"
+//             stroke-width="0"
+//             viewBox="0 0 16 16"
+//             height="1em"
+//             width="1em"
+//           >
+//             <path
+//               fill-rule="evenodd"
+//               d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+//             ></path>
+//           </svg>
+//         </div>
+//       </div>
+//     ) : (
+//       <div></div>
+//     )}
+//     {/* Pagination Settings */}
+//     {props.rows ? (
+//       <div className="flex w-fit flex-row items-center gap-2  ">
+//         <div className="text-xs ">
+//           {props.rows.length} {props.texts?.items ?? "Items"}
+//         </div>
+
+//         <select
+//           value={perPage}
+//           className="h-6 cursor-pointer rounded border bg-background px-2 text-xs"
+//           onChange={(e) => {
+//             setPerPage(parseInt(e.target.value))
+//           }}
+//         >
+//           <option value={10} style={{ fontSize: 10 }}>
+//             10 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={20} style={{ fontSize: 10 }}>
+//             20 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={30} style={{ fontSize: 10 }}>
+//             30 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={50} style={{ fontSize: 10 }}>
+//             50 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={100} style={{ fontSize: 10 }}>
+//             100 / {props.texts?.page ?? "Page"}
+//           </option>
+//         </select>
+//       </div>
+//     ) : (
+//       <div></div>
+//     )}
+//   </div>
+// )

package/src/elements/InterfaceSettings.tsx

@@ -59,8 +59,6 @@ export const InterfaceSettings: FC<TypographyTypes> = ({
                 <path
                   d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z"
                   fill="currentColor"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
                 ></path>
               </svg>
             ),
@@ -75,9 +73,6 @@ export const InterfaceSettings: FC<TypographyTypes> = ({
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
                 className="h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
               >
                 <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>