From eae7bac3a09c340a5a51938eadee58b946ab32ab Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Fri, 26 Sep 2025 21:14:43 +0530
Subject: [PATCH] feat: Enhance scrollbar styling with golden theme for
 industry dropdowns

- Update scrollbar color to match golden theme (#F6C268)

- Apply consistent styling across all scrollbars

- Add specific targeting for industry dropdown

- Improve cross-browser compatibility

- Enhance visual consistency with luxury brand aesthetic
---
 src/components/WaitlistForm.tsx | 11 ++++--
 src/index.css                   | 69 +++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 3 deletions(-)

diff --git a/src/components/WaitlistForm.tsx b/src/components/WaitlistForm.tsx
index 9024bf3..e474b18 100644
--- a/src/components/WaitlistForm.tsx
+++ b/src/components/WaitlistForm.tsx
@@ -242,13 +242,13 @@ const WaitlistForm: React.FC<WaitlistFormProps> = ({ isVisible, onClose }) => {
         className="relative max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto overflow-x-hidden" 
         style={{
           scrollbarWidth: 'thin',
-          scrollbarColor: '#C59D59 transparent',
+          scrollbarColor: '#F6C268 transparent',
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.scrollbarColor = '#C59D59 rgba(197, 157, 89, 0.1)';
+          e.currentTarget.style.scrollbarColor = '#F6C268 rgba(246, 194, 104, 0.1)';
         }}
         onMouseLeave={(e) => {
-          e.currentTarget.style.scrollbarColor = '#C59D59 transparent';
+          e.currentTarget.style.scrollbarColor = '#F6C268 transparent';
         }}
       >
         {/* Form Container */}
@@ -530,9 +530,14 @@ const WaitlistForm: React.FC<WaitlistFormProps> = ({ isVisible, onClose }) => {
                     Industry <span className="text-red-400">*</span>
                   </label>
                   <select
+                    name="industry"
                     value={formData.industry}
                     onChange={(e) => handleInputChange('industry', e.target.value)}
                     className={`w-full bg-deep-forest/50 border ${errors.industry ? 'border-red-400' : 'border-luxury-gold/20'} rounded-lg px-4 py-3 text-cream focus:outline-none focus:ring-2 focus:ring-luxury-gold/50 focus:border-luxury-gold/50 transition-all duration-300 font-elegant-sans`}
+                    style={{
+                      scrollbarWidth: 'thin',
+                      scrollbarColor: '#F6C268 transparent',
+                    }}
                   >
                     <option value="">Select your industry</option>
                     {industries.map(industry => (
diff --git a/src/index.css b/src/index.css
index daa7be5..ffbba45 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,4 +23,73 @@ html {
     transform: translateX(400%);
     opacity: 0;
   }
+}
+
+/* Custom golden scrollbar styles for select elements and dropdowns */
+select {
+  scrollbar-width: thin;
+  scrollbar-color: #F6C268 transparent;
+}
+
+select:hover {
+  scrollbar-color: #F6C268 rgba(246, 194, 104, 0.1);
+}
+
+/* Webkit scrollbar styles for select elements */
+select::-webkit-scrollbar {
+  width: 8px;
+}
+
+select::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+select::-webkit-scrollbar-thumb {
+  background: #F6C268;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+select::-webkit-scrollbar-thumb:hover {
+  background: #F6C268;
+}
+
+/* Specific styling for industry dropdown */
+select[name="industry"],
+select[value*="industry"] {
+  scrollbar-width: thin;
+  scrollbar-color: #F6C268 transparent !important;
+}
+
+select[name="industry"]::-webkit-scrollbar-thumb,
+select[value*="industry"]::-webkit-scrollbar-thumb {
+  background: #F6C268;
+  border-radius: 2px;
+}
+
+/* General scrollbar styles for consistency */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #F6C268 transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #F6C268;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #F6C268;
 }
\ No newline at end of file