added tooltips / changed style images

app/components/Sidebar.tsx

@@ -2,6 +2,12 @@
 import React, { useState, useRef, useEffect } from "react";
 import { ChevronDown, ChevronUp, Info } from "lucide-react";
 import Image from "next/image";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 
 interface SidebarProps {
   className?: string;
@@ -142,6 +148,20 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
     setSelectedColorScheme((prev) => (prev === schemeName ? null : schemeName));
   };
 
+  // Helper component for consistent tooltip usage
+  const InfoTooltip = ({ content }: { content: string }) => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Info size={11} className="ml-2 text-[#6F6F6F] cursor-default" />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{content}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+
   return (
     <div
       className={`sidebar ${className} w-full md:w-[395px] h-screen bg-[#2C2C2C] text-[#F3F3F3] flex flex-col font-jura`}
@@ -191,7 +211,7 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
           <div className="mb-6">
             <label className="text-xs uppercase text-[#6F6F6F] mb-2 flex items-center">
               Layout
-              <Info size={11} className="ml-2 text-[#6F6F6F]" />
+              <InfoTooltip content="Select a layout for your logo" />
             </label>
             <div className="grid grid-cols-3 gap-3" role="radiogroup">
               {layouts.map((layout) => (
@@ -236,7 +256,7 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
           <div className="mb-6">
             <label className="text-xs uppercase text-[#6F6F6F] mb-2 flex items-center">
               STYLE
-              <Info size={11} className="ml-2 text-[#6F6F6F]" />
+              <InfoTooltip content="Choose a style for your logo" />
             </label>
             <div className="grid grid-cols-3 gap-3" role="radiogroup">
               {logoStyles.map((style) => (
@@ -285,6 +305,7 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
                 className="text-sm font-bold uppercase text-[#6F6F6F] mb-1 block"
               >
                 Primary
+                {/* <InfoTooltip content="Select a primary color" /> */}
               </label>
               <div className="relative" ref={primaryDropdownRef}>
                 <div
@@ -347,11 +368,9 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
               </div>
             </div>
             <div className="flex-1">
-              <label
-                htmlFor="background-color"
-                className="text-sm font-bold uppercase text-[#6F6F6F] mb-1 block"
-              >
+              <label className="text-sm font-bold uppercase text-[#6F6F6F] mb-1 block  items-center">
                 Background
+                {/* <InfoTooltip content="Select a background color" /> */}
               </label>
               <div className="relative" ref={backgroundDropdownRef}>
                 <div
@@ -440,7 +459,7 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
                 <div className="mb-4">
                   <label className="text-xs font-bold uppercase text-[#6F6F6F] flex items-center mb-2">
                     Color Scheme
-                    <Info size={14} className="ml-2 text-[#6F6F6F]" />
+                    <InfoTooltip content="Choose a color scheme for your logo" />
                   </label>
                   <div
                     className="grid grid-cols-2 md:grid-cols-3 gap-[14px]"
@@ -503,7 +522,7 @@ const Sidebar: React.FC<SidebarProps> = ({ className }) => {
                     className="text-xs font-bold uppercase text-[#6F6F6F] flex items-center mb-2"
                   >
                     Additional Info
-                    <Info size={14} className="ml-2 text-[#6F6F6F]" />
+                    <InfoTooltip content="Provide any additional information about your logo" />
                   </label>
                   <textarea
                     id="additional-info"

app/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md font-jura font-light bg-gray-700 px-3 py-1.5 text-xs text-gray-200 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}