Added title leaderboard grid card and improved ui

components/drops/view/utils/DropVoteProgressing.tsx

@@ -27,51 +27,52 @@ export default function DropVoteProgressing({
 
   const isPositiveProgressing = current < projected;
 
-  // Define styles based on subtle mode
-  let color;
+  let color: string;
+  let arrowColor: string;
   if (subtle) {
-    color = isPositiveProgressing
-      ? "tw-text-iron-300 tw-bg-iron-700 tw-transition-colors tw-duration-200"
-      : "tw-text-iron-400 tw-bg-iron-700 tw-transition-colors tw-duration-200";
+    color = isPositiveProgressing ? "tw-text-iron-400 tw-font-mono" : "tw-text-iron-600 tw-font-mono";
+    arrowColor = "tw-text-iron-600";
   } else {
     color = isPositiveProgressing
-      ? "tw-text-emerald-400 tw-bg-emerald-900/40"
-      : "tw-text-rose-400 tw-bg-rose-900/40";
+      ? "tw-text-emerald-400 tw-bg-emerald-900/40 tw-px-1.5 tw-py-0.5 tw-rounded-md"
+      : "tw-text-rose-400 tw-bg-rose-900/40 tw-px-1.5 tw-py-0.5 tw-rounded-md";
+    arrowColor = isPositiveProgressing ? "tw-text-emerald-400" : "tw-text-rose-400";
   }
 
   return (
     <>
       <span
-        className={`${color} tw-text-sm tw-font-medium tw-ml-0.5 tw-px-1.5 tw-py-0.5 tw-rounded-md tw-flex tw-items-center tw-gap-x-1`}
+        className={`tw-flex tw-items-center tw-gap-2 ${subtle ? '' : 'tw-ml-0.5'}`}
         style={{
           animationDuration: "2s",
         }}
         data-tooltip-id={`drop-vote-progress-${current}-${projected}`}
       >
         <FontAwesomeIcon
           icon={faArrowRight}
-          className="tw-flex-shrink-0 tw-size-3"
+          className={`tw-flex-shrink-0 tw-size-2.5 ${arrowColor}`}
         />
-        <span>{formatNumberWithCommas(projected)}</span>
+        <span className={`tw-text-xs tw-font-medium ${color}`}>{formatNumberWithCommas(projected)}</span>
       </span>
       <Tooltip
         id={`drop-vote-progress-${current}-${projected}`}
         place="top"
-        positionStrategy="absolute"
+        offset={8}
         opacity={1}
         style={{
-          backgroundColor: "#1F2937",
-          color: "white",
           padding: "4px 8px",
-          zIndex: 50,
-          boxShadow:
-            "0 4px 16px 0 rgba(0,0,0,0.30), 0 2px 8px 0 rgba(55,55,62,0.25)",
+          background: "#37373E",
+          color: "white",
+          fontSize: "13px",
+          fontWeight: 500,
+          borderRadius: "6px",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+          zIndex: 99999,
+          pointerEvents: "none",
         }}
       >
-        <span className="tw-text-xs">
-          Projected vote count at decision time:{" "}
-          {formatNumberWithCommas(projected)}
-        </span>
+        Projected vote count at decision time:{" "}
+        {formatNumberWithCommas(projected)}
       </Tooltip>
     </>
   );

components/voting/VotingModalButton.tsx

@@ -24,17 +24,17 @@ const VotingModalButton: React.FC<VotingModalButtonProps> = ({
     onClick();
   };
 
-  const baseClasses = "tw-flex tw-items-center tw-justify-center tw-gap-x-1.5 tw-px-3 tw-py-1.5 tw-rounded-md tw-border tw-border-solid tw-shadow-sm tw-text-xs tw-whitespace-nowrap tw-transition-all tw-duration-150 tw-ease-in-out active:tw-transform active:tw-translate-y-0.5 active:tw-shadow-sm";
-  
+  const baseClasses = "tw-flex tw-items-center tw-justify-center tw-gap-x-1 tw-px-3 tw-py-1.5 tw-rounded-lg tw-border tw-border-solid tw-text-xs tw-whitespace-nowrap tw-transition-all tw-duration-300 tw-ease-out";
+
   const variantClasses = variant === "subtle"
-    ? "tw-bg-iron-900 tw-border-iron-700 tw-text-iron-200 tw-font-medium hover:tw-text-white hover:tw-bg-primary-600 hover:tw-border-primary-600 hover:tw-shadow-md group"
-    : "tw-bg-primary-500 tw-border-primary-500 tw-text-white tw-font-semibold hover:tw-bg-primary-600 hover:tw-shadow-md";
-    
+    ? "tw-bg-white tw-border-white tw-text-black tw-font-semibold desktop-hover:hover:tw-bg-iron-300 tw-shadow-[0_0_15px_rgba(255,255,255,0.1)]"
+    : "tw-bg-primary-500 tw-border-primary-500 tw-text-white tw-font-medium desktop-hover:hover:tw-bg-primary-600";
+
   const buttonClasses = `${baseClasses} ${variantClasses}`;
 
   return (
     <button type="button" onClick={handleClick} className={buttonClasses}>
-      <span>Vote for this!</span>
+      <span>Vote</span>
     </button>
   );
 };