Redesign

web/components/ProfileCard.tsx

@@ -92,7 +92,7 @@ export function ProfileCard(props: ProfileCardProps) {
               <Tag
                 key={index}
                 text={tag}
-                variant="outline"
+                variant="primary"
                 // className="justify-self-stretch"
                 // style={{ maxWidth: "calc(50% - 0.125rem)" }}
               />

web/components/atomic/Button.tsx

@@ -27,7 +27,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean;
   rounded?: boolean;
   floating?: boolean;
-  variant?: "cta" | "primary" | "outline" | "secondary";
+  variant?: "cta" | "primary" | "outline" | "secondary" | "lime";
   size?: "small" | "medium" | "auto";
 };
 
@@ -69,11 +69,18 @@ export const Button = ({
     ["text-gray-400"]: disabled,
   });
 
+  const limeStyles = classNames({
+    ["border border-lime-400"]: true,
+    ["bg-lime-500 hover:bg-lime-400 text-green-900"]: !disabled,
+    ["border-gray-500 text-gray-500 bg-lime-200"]: disabled,
+  });
+
   const styles = classNames({
     [ctaStyles]: variant === "cta",
     [primaryStyles]: variant === "primary",
     [outlineStyles]: variant === "outline",
     [secondaryStyles]: variant === "secondary",
+    [limeStyles]: variant === "lime",
     ["transition flex items-center whitespace-nowrap"]: true,
     ["px-8 py-2"]: size === "medium",
     ["px-6 py-1.5 text-sm"]: size === "small",

web/components/buttons/IconButton.tsx

@@ -4,11 +4,11 @@ import classNames from "classnames";
 
 import { BxCheck } from "../../generated/icons/regular";
 
-type EditButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   icon?: React.ReactNode;
 };
 
-export function IconButton(props: EditButtonProps) {
+export function IconButton(props: IconButtonProps) {
   const { className, icon } = props;
 
   const styles = classNames({

web/components/common/Tag.tsx

@@ -9,7 +9,7 @@ export interface TagProps {
   text: string;
   onDeleteClick?: () => void;
   renderRightIcon?: () => React.ReactNode;
-  variant?: "primary" | "outline" | "olive";
+  variant?: "primary" | "outline" | "olive" | "light";
   className?: string;
   style?: React.CSSProperties;
 }
@@ -27,15 +27,17 @@ export function Tag(props: TagProps) {
     "rounded-full flex items-center px-3 py-1 overflow-hidden": true,
     "bg-lime-200": variant === "primary",
     "bg-olive-200": variant === "olive",
+    "bg-lime-100": variant === "light",
     "bg-white border border-lime-700": variant === "outline",
     [`${className}`]: true,
   });
 
   const tagStyles = classNames({
-    "whitespace-nowrap text-xs truncate": true,
+    "whitespace-nowrap text-sm truncate": true,
     "text-olive-700": variant === "primary",
     "text-olive-800": variant === "olive",
     "text-lime-700": variant === "outline",
+    "text-gray-600": variant === "light",
   });
 
   const [isOverflowed, setIsOverflow] = useState(false);
@@ -58,7 +60,7 @@ export function Tag(props: TagProps) {
       <div className={tagContainerStyles} style={style}>
         <div
           className={tagStyles}
-          style={{ fontWeight: 500 }}
+          // style={{ fontWeight: 500 }}
           ref={textElementRef}
         >
           {text}

web/components/navbar/Dropdown.tsx

@@ -44,7 +44,7 @@ export function Dropdown() {
     <Menu as="div" className="relative inline-block text-left">
       {({ open }) => {
         const caretStyles = classNames({
-          "h-7 w-7 transition": true,
+          "h-4 w-4 transition text-gray-700": true,
           "rotate-180": open,
         });
 
@@ -191,16 +191,16 @@ export function Dropdown() {
               </Menu.Items>
             </Transition>
 
-            <div>
+            <div className="flex items-end">
               <Menu.Button className="focus:outline-none">
-                <div className="flex items-center gap-2">
-                  <Text className="mr-1">
+                <div className="flex items-start gap-0.5">
+                  {/* <Text className="mr-1" variant="body2">
                     {userData?.first_name} {userData?.last_name}
-                  </Text>
+                  </Text> */}
                   <ProfileImage
                     src={img}
                     alt="Profile image"
-                    className="h-10 w-10"
+                    className="h-8 w-8"
                   />
                   <BxCaretDown className={caretStyles} />
                 </div>