Update ui/components.py

ui/components.py

@@ -117,6 +117,30 @@ def get_custom_css():
     border: 1px solid #d0d7e2;
     border-radius: 8px;
     margin-bottom: 0.5rem;
+
+
+    .button-radio input[type="radio"] {
+    display: none;
+}
+
+.button-radio label {
+    display: inline-block;
+    padding: 10px 20px;
+    margin: 6px 8px;
+    border-radius: 999px;
+    border: 2px solid #4098ff;
+    background-color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.button-radio input[type="radio"]:checked + label {
+    background-color: #4098ff;
+    color: white;
+    border-color: #1465c0;
+}
+
 }
 
     """
@@ -231,23 +255,12 @@ import gradio as gr
 
 def gradio_user_selector():
     """Gradio dropdown for user role selection"""
-    return gr.Dropdown(
-        choices=["Volunteer", "Event Organizer", "Hospital Staff"],
-        label="🙋 Select your role",
-        value="Volunteer",
-        interactive=True,
-        container=True
-    )
+    return gr.Radio(choices=["🙋 Volunteer", "📋 Event Organizer"], label="Select your role", value="🙋 Volunteer", interactive=True, elem_classes=["button-radio"])
+
 
 def gradio_sidebar_controls():
     """Gradio sidebar settings with language selector"""
-    language_dropdown = gr.Dropdown(
-        choices=["English", "Arabic"],
-        label="🌐 Language",
-        value="English",
-        interactive=True,
-        container=True
-    )
+    language_dropdown = gr.Radio(choices=["English", "Arabic"], label="🌐 Language", value="English", interactive=True, elem_classes=["button-radio"])
     return language_dropdown