DA Overview - re-use badges from Labels, update Consumers & More tool…

…tips
growthepie · Jan 23, 2025 · 95a2c66 · 95a2c66
1 parent a07aa02
commit 95a2c66
Show file tree

Hide file tree

Showing 7 changed files with 336 additions and 135 deletions.
diff --git a/app/(labels)/labels/Search.tsx b/app/(labels)/labels/Search.tsx
@@ -897,20 +897,24 @@ const SearchIcon = () => (
 );
 
 type BadgeProps = {
-  onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
   label: string | React.ReactNode;
   leftIcon?: string;
   leftIconColor?: string;
-  rightIcon: string;
+  rightIcon?: string;
   rightIconColor?: string;
-  rightIconSize?: "sm" | "base";
+  rightIconSize?: "sm" | "md" | "base";
   size?: "sm" | "base";
   className?: string;
   showLabel?: boolean;
   altColoring?: boolean;
 };
 export const Badge = ({
   onClick,
+  onMouseEnter,
+  onMouseLeave,
   label,
   leftIcon,
   leftIconColor = "#CDD8D3",
@@ -922,41 +926,60 @@ export const Badge = ({
   showLabel = true,
   altColoring = false,
 }: BadgeProps) => {
-  if (size === "sm")
+  if (size === "sm"){
+    let rIconSize = "w-[14px] h-[14px]";
+    let rIconContainerSize = "w-[14px] h-[14px]";
+    if(rightIconSize === "sm")
+      rIconSize = "w-[10px] h-[10px]";
+      rIconContainerSize = "w-[10px] h-[10px]";
+    if(rightIconSize === "md")
+      rIconSize = "size-[15px] h-[15px]";
+      rIconContainerSize = "w-[14px] h-[12px] -mt-[1px]";
+
     return (
       <div
-        className={`flex items-center ${altColoring ? "bg-[#1F2726]" : "bg-[#344240]"} text-[10px] rounded-full pl-[5px] pr-[2px] py-[3px] gap-x-[4px] cursor-pointer max-w-full ${className}`}
+        className={`flex items-center ${altColoring ? "bg-[#1F2726]" : "bg-[#344240]"} text-[10px] rounded-full pl-[3px] pr-[2px] py-[3px] gap-x-[4px] cursor-pointer max-w-full ${className}`}
         onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
       >
         {leftIcon ? (
           <div className="flex items-center justify-center w-[12px] h-[12px]">
-            {leftIcon}
+            <Icon
+              icon={leftIcon}
+              className="w-[12px] h-[12px]"
+              style={{ color: leftIconColor }}
+            />
           </div>
         ) : (
           <div className="w-[0px] h-[12px]" />
         )}
         <div className="text-[#CDD8D3] leading-[120%] text-[10px] truncate">
           {label}
         </div>
-        <div
-          className={`flex items-center justify-center ${rightIconSize == "sm" ? "pr-[3px]" : "w-[14px] h-[14px]"
+        {rightIcon ? (
+          <div
+          className={`relative flex items-center justify-center ${rightIconSize == "sm" ? "pr-[3px]" : rIconContainerSize
             }`}
-        >
+          >
           <Icon
             icon={rightIcon}
-            className={
-              rightIconSize == "sm" ? "w-[10px] h-[10px]" : "w-[14px] h-[14px]"
-            }
+            className={`absolute ${rIconSize}`}
             style={{ color: rightIconColor }}
           />
-        </div>
+        </div>) : (
+          <div className="w-[0px] h-[12px]" />
+        )}
       </div>
     );
+  }
 
   return (
     <div
       className={`flex items-center ${altColoring ? "bg-[#1F2726]" : "bg-[#344240]"} text-[10px] rounded-full pl-[2px] pr-[5px] gap-x-[5px] cursor-pointer ${className}`}
       onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       {leftIcon ? (
         <div className="flex items-center justify-center w-[25px] h-[25px]">
@@ -976,13 +999,17 @@ export const Badge = ({
           {label}
         </div>
       )}
-      <div className="flex items-center justify-center w-[15px] h-[15px]">
-        <Icon
-          icon={rightIcon}
-          className="w-[15px] h-[15px]"
-          style={{ color: rightIconColor }}
-        />
-      </div>
+      {rightIcon ? (
+        <div className="flex items-center justify-center w-[15px] h-[15px]">
+          <Icon
+            icon={rightIcon}
+            className="w-[15px] h-[15px]"
+            style={{ color: rightIconColor }}
+          />
+        </div>
+        ) : (
+          <div className="w-[3px] h-[25px]" />
+      )}
     </div>
   );
 };

diff --git a/components/VerticalScrollContainer.tsx b/components/VerticalScrollContainer.tsx
@@ -17,6 +17,8 @@ type VerticalScrollContainerProps = {
   scrollbarPosition?: ScrollbarPosition; // New Prop
   scrollbarAbsolute?: boolean;
   scrollbarWidth?: string | number;
+  scrollThumbColor?: string;
+  scrollTrackColor?: string;
   header?: React.ReactNode;
 };
 
@@ -32,6 +34,8 @@ export default forwardRef(function VerticalScrollContainer(
     scrollbarPosition = 'right', // Default to 'right'
     scrollbarAbsolute = false,
     scrollbarWidth = "8px",
+    scrollThumbColor = "rgb(136 160 157 / 0.3)", //"bg-forest-400/30",
+    scrollTrackColor = "rgb(0 0 0 / 0.3)", //"bg-black/30",
     header,
   }: VerticalScrollContainerProps,
   ref: React.Ref<HTMLDivElement>
@@ -325,6 +329,16 @@ export default forwardRef(function VerticalScrollContainer(
     }
   }, [showTopGradient, showBottomGradient]);
 
+  useEffect(() => {
+    // on content change, check if scrollbar is needed and hide gradient if not
+    if (contentScrollAreaRef.current) {
+      if (contentHeight < contentScrollAreaHeight) {
+        setMaskGradient('');
+      }
+    }
+
+  }, [children, contentHeight, contentScrollAreaHeight, contentScrollAreaRef]);
+
   // Determine padding based on scrollbar position
   const computedPaddingRight =
     scrollbarPosition === 'right' ? paddingRight : undefined;
@@ -374,7 +388,10 @@ export default forwardRef(function VerticalScrollContainer(
             style={{ height: height }}
           >
             <div
-              className="h-full p-0.5 bg-black/30 rounded-full relative"
+              className="h-full p-0.5 rounded-full relative"
+              style={{
+                background: scrollTrackColor,
+              }}
               onMouseDown={handleTrackMouseDown}
               onTouchStart={handleTrackMouseDown} // Added touch event
               // Removed onClick to integrate behavior into onMouseDown/onTouchStart
@@ -386,9 +403,10 @@ export default forwardRef(function VerticalScrollContainer(
             >
               <div className="h-full w-2 relative" ref={scrollerRef} style={{ width: scrollbarWidth }}>
                 <div
-                  className="h-5 w-2 bg-forest-400/30 rounded-full"
+                  className="h-5 w-2 rounded-full"
                   style={{
                     position: 'absolute',
+                    background: scrollThumbColor,
                     top: scrollerY,
                     left: '0px',
                     cursor: 'grab',
@@ -445,7 +463,10 @@ export default forwardRef(function VerticalScrollContainer(
             style={{ height: height }}
           >
             <div
-              className="h-full p-0.5 bg-black/30 rounded-full relative"
+              className="h-full p-0.5 rounded-full relative"
+              style={{ 
+                background: scrollTrackColor
+               }}
               onMouseDown={handleTrackMouseDown}
               onTouchStart={handleTrackMouseDown} // Added touch event
               // Removed onClick to integrate behavior into onMouseDown/onTouchStart
@@ -457,9 +478,10 @@ export default forwardRef(function VerticalScrollContainer(
             >
               <div className="h-full w-2 relative" ref={scrollerRef} style={{ width: scrollbarWidth }}>
                 <div
-                  className="h-5 w-2 bg-forest-400/30 rounded-full"
+                  className="h-5 w-2 rounded-full"
                   style={{
                     position: 'absolute',
+                    background: scrollThumbColor,
                     top: scrollerY,
                     left: '0px',
                     cursor: 'grab',