Feat: Revamp team settings

src/components/fundamentals/icons/chevron-down.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ChevronDownIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronDownIcon

src/components/fundamentals/icons/edit-icon.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "./icon-type"
+
+const EditIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  attributes,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M9 3H4.55556C4.143 3 3.74733 3.16389 3.45561 3.45561C3.16389 3.74733 3 4.143 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V11"
+        stroke={color}
+        stroke-width="1.4667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14.4356 3.43999C14.7173 3.15827 15.0994 3 15.4978 3C15.8962 3 16.2783 3.15827 16.56 3.43999C16.8417 3.72171 17 4.1038 17 4.50221C17 4.90062 16.8417 5.28272 16.56 5.56443L9.8326 12.2919L7 13L7.70815 10.1674L14.4356 3.43999Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default EditIcon

src/components/fundamentals/icons/refresh-icon.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "./icon-type"
+
+const RefreshIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  attributes,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M16.5004 2.77765V7.11104H12.167"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 9.99997C3.50114 8.74568 3.86516 7.51851 4.54814 6.46647C5.23113 5.41444 6.2039 4.58248 7.34914 4.07094C8.49438 3.5594 9.76316 3.39013 11.0024 3.58355C12.2417 3.77697 13.3986 4.32482 14.3335 5.16101L16.5002 7.11104"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 17.2223V12.8889H7.83339"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.5002 10C16.499 11.2543 16.135 12.4815 15.452 13.5335C14.7691 14.5855 13.7963 15.4175 12.651 15.929C11.5058 16.4406 10.237 16.6098 8.99773 16.4164C7.75845 16.223 6.60159 15.6751 5.6667 14.839L3.5 12.8889"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default RefreshIcon

src/components/fundamentals/status-dot/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import clsx from "clsx"
+
+type StatusDotProps = {
+  title: string
+  variant: "primary" | "danger" | "warning" | "success"
+} & React.HTMLAttributes<HTMLDivElement>
+
+const StatusDot: React.FC<StatusDotProps> = ({
+  title,
+  variant = "success",
+  className,
+  ...props
+}) => {
+  const dotClass = clsx({
+    "bg-teal-50": variant === "success",
+    "bg-rose-50": variant === "danger",
+    "bg-yellow-50": variant === "warning",
+    "bg-violet-60": variant === "primary",
+  })
+  return (
+    <div className={clsx("flex items-center", className)} {...props}>
+      <div
+        className={clsx("w-1.5 h-1.5 mr-2 self-center rounded-full", dotClass)}
+      ></div>
+      {title}
+    </div>
+  )
+}
+
+export default StatusDot

src/components/molecules/actionables.tsx

@@ -20,16 +20,20 @@ type ActionablesProps = {
  * If only a single actionable is provided, it will render a button instead.
  */
 const Actionables: React.FC<ActionablesProps> = ({ actions }) => {
-  if (!actions) {
+  if (!actions?.length) {
     return null
   }
 
   return actions.length > 1 ? (
     <div>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <Button variant="ghost" size="medium">
-            <MoreHorizontalIcon />
+          <Button
+            className="w-8 h-8 p-1.5 focus:border-none focus:shadow-none"
+            variant="ghost"
+            size="small"
+          >
+            <MoreHorizontalIcon size={20} />
           </Button>
         </DropdownMenu.Trigger>
 
@@ -39,7 +43,7 @@ const Actionables: React.FC<ActionablesProps> = ({ actions }) => {
         >
           {actions.map((action, i) => {
             return (
-              <DropdownMenu.Item key={i}>
+              <DropdownMenu.Item className="mb-1 last:mb-0" key={i}>
                 {
                   <Button
                     variant="ghost"

src/components/molecules/sidebar-team-member/index.tsx

@@ -21,7 +21,7 @@ const getInitial = (
 }
 
 const SidebarTeamMember: React.FC<SidebarTeamMemberProps> = ({
-  color = "bg-violet-40",
+  color = "bg-violet-60",
   user,
 }: SidebarTeamMemberProps) => {
   const fullName =

src/components/molecules/table/filtering-option.tsx

@@ -0,0 +1,92 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import clsx from "clsx"
+import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
+import CheckIcon from "../../fundamentals/icons/check-icon"
+import React, { useState } from "react"
+
+export type FilteringOptionProps = {
+  title: string
+  options: {
+    title: string
+    count?: number
+    onClick: () => void
+  }[]
+} & React.HTMLAttributes<HTMLDivElement>
+
+const FilteringOptions: React.FC<FilteringOptionProps> = ({
+  title,
+  options,
+  className,
+  ...props
+}) => {
+  const [selected, setSelected] = useState(options?.[0]?.title || "All")
+  const [open, setOpen] = useState(false)
+  return (
+    <div
+      className={clsx(
+        "inter-small-regular flex text-grey-50 mr-6 last:mr-0",
+        className
+      )}
+      {...props}
+    >
+      <span className="">{title}:</span>
+      <DropdownMenu.Root onOpenChange={setOpen}>
+        <DropdownMenu.Trigger
+          asChild
+          className={clsx(
+            "inter-small-regular text-grey-50 flex items-center pl-1.5 pr-0.5 rounded active:bg-grey-5 hover:bg-grey-5",
+            { "bg-grey-5": open }
+          )}
+        >
+          <div className="flex align-center">
+            {selected}
+            <div className="text-grey-40 h-min">
+              <ChevronDownIcon size={16} />
+            </div>
+          </div>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          sideOffset={8}
+          className="bg-grey-0 p-2 border border-grey-20 rounded-rounded shadow-dropdown"
+        >
+          {options.map((opt, idx) => (
+            <DropdownMenu.DropdownMenuItem
+              onSelect={() => {
+                opt.onClick()
+                setSelected(opt.title)
+              }}
+              disabled={opt.count < 1}
+              className={clsx(
+                "py-1.5 my-1 w-48 px-3 flex items-center rounded text-grey-90  hover:border-0 hover:outline-none inter-small-semibold",
+                { "cursor-pointer hover:bg-grey-10": opt.count > 0 }
+              )}
+            >
+              {selected === opt.title && (
+                <span className="w-4">
+                  <CheckIcon size={16} />
+                </span>
+              )}
+              <div
+                className={clsx("ml-3 w-full flex justify-between", {
+                  "ml-7": selected !== opt.title,
+                  "text-grey-30": opt.count < 1,
+                })}
+              >
+                {opt.title}
+                <span
+                  className={clsx("inter-small-regular text-grey-40 ml-3", {
+                    "text-grey-30": opt.count < 1,
+                  })}
+                >
+                  {opt.count}
+                </span>
+              </div>
+            </DropdownMenu.DropdownMenuItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  )
+}
+
+export default FilteringOptions