Upload folder using huggingface_hub

home.py

@@ -482,17 +482,17 @@ def build_home_page(
             )
 
         with gr.Sidebar(open=False) as sheami_sidebar:  # Sidebar
-            render_logo()
+            # render_logo()
             load_patients_btn = gr.Button(
                 "📂 Load Patients", variant="huggingface", visible=False
             )
 
-            with gr.Row():
+            with gr.Row(equal_height=True):
                 gr.Markdown("### 👥 Patients")
                 add_patient_btn = gr.Button(
-                    "➕ Add", variant="huggingface", size="sm", scale=0
+                    "➕ Add", variant="huggingface", scale=0
                 )
-            patient_list = gr.Radio(choices=[], interactive=True, show_label=False)
+            patient_list = gr.Radio(choices=[], interactive=True, show_label=False,elem_classes="pro-radio")
 
         with gr.Row():
             with gr.Column(scale=3):  # Main area

ui.py

@@ -361,6 +361,96 @@ def handle_file_input_change(files):
 
 def get_css():
     return """
+            /* Container spacing */
+            .pro-radio .wrap {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            /* Hide the default radio dot */
+            .pro-radio input[type="radio"] {
+                display: none !important;
+            }
+
+            /* Base card look */
+            .pro-radio label {
+                display: block;
+                background: #fafafa;
+                color: #222;
+                font-family: "Inter", sans-serif;
+                font-size: 15px;
+                font-weight: 500;
+                padding: 12px 16px;
+                border-radius: 8px;
+                border: 1px solid #ddd;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+
+            /* Hover state */
+            .pro-radio label:hover {
+                background: #f0f0f0;
+                border-color: #bbb;
+            }
+
+            /* Selected card */
+            .pro-radio input[type="radio"]:checked + span {
+                background: #e6f0ff;              /* light blue background */
+                border: 1px solid #0066cc;        /* blue border */
+                border-radius: 8px;
+                font-weight: 600;
+                color: #0066cc;
+                display: block;
+                padding: 12px 16px;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+
+            /* Kill any weird inner focus box */
+            .pro-radio span {
+                outline: none !important;
+                box-shadow: none !important;
+                border: none !important;
+            }
+
+            /* Remove Gradio's green selected background on the LABEL itself */
+            .pro-radio label:has(input[type="radio"]:checked),
+            .pro-radio label[aria-checked="true"],
+            .pro-radio label[data-selected="true"],
+            .pro-radio .selected,
+            .pro-radio [data-selected="true"] {
+            background: #fafafa !important;   /* or transparent */
+            box-shadow: none !important;
+            border-color: #ddd !important;
+            }
+
+            /* Keep your selected look on the SPAN only (no inner blue box) */
+            .pro-radio input[type="radio"]:checked + span {
+            background: #e6f0ff;
+            border: 1px solid #0066cc;
+            border-radius: 8px;
+            display: block;
+            padding: 12px 16px;
+            color: #0066cc;
+            font-weight: 600;
+            outline: none !important;
+            box-shadow: none !important;
+            }
+
+            /* Hide native dot + any focus rings */
+            .pro-radio input[type="radio"] { display: none !important; }
+            .pro-radio label,
+            .pro-radio label:focus,
+            .pro-radio label:focus-within,
+            .pro-radio input[type="radio"]:focus + span {
+            outline: none !important;
+            box-shadow: none !important;
+            }
+
+
             .highlighted-text {
                 color: #FFD700;              /* bright gold to stand out */
                 font-weight: bold;           /* makes it pop */