Back to native select and option

frontend/src/components/BackupForm.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { getNamespaces, getPVCs, createBackup } from '../api/snapix';
-import { Button, Select, Option, Input } from '@mui/base'
+import { Button, Input } from '@mui/base';
 
 export default function BackupForm() {
   const [namespaces, setNamespaces] = useState([]);
@@ -28,47 +28,57 @@ export default function BackupForm() {
         pvc_name: selectedPvc,
         backup_name: backupName,
       }).then(() => {
-        alert("Backup started!");
+        alert('Backup started!');
         setBackupName('');
       });
     }
   };
 
   return (
-    <div className='form-group'>
+    <div className="form-group">
       <h2>📦 Backup PVC</h2>
 
-      <div className='form-content'>
+      <div className="form-content">
         <label>Namespace:</label>
-        <Select onChange={e => setSelectedNs(e.target.value)} value={selectedNs}>
-          <Option value="">-- Select Namespace --</Option>
-          {namespaces.map(ns => <Option key={ns}>{ns}</Option>)}
-        </Select>
+        <select value={selectedNs} onChange={(e) => setSelectedNs(e.target.value)}>
+          <option value="">-- Select Namespace --</option>
+          {namespaces.map(ns => (
+            <option key={ns} value={ns}>
+              {ns}
+            </option>
+          ))}
+        </select>
       </div>
 
-      <div className='form-content'>
+      <div className="form-content">
         <label>PVC:</label>
-        <Select
-          onChange={e => setSelectedPvc(e.target.value)}
+        <select
           value={selectedPvc}
+          onChange={(e) => setSelectedPvc(e.target.value)}
           disabled={!selectedNs}
         >
-          <Option value="">-- Select PVC --</Option>
-          {pvcs.map(pvc => <Option key={pvc}>{pvc}</Option>)}
-        </Select>
+          <option value="">-- Select PVC --</option>
+          {pvcs.map(pvc => (
+            <option key={pvc} value={pvc}>
+              {pvc}
+            </option>
+          ))}
+        </select>
       </div>
 
-      <div className='form-content'>
+      <div className="form-content">
         <label>Backup Name:</label>
         <Input
           type="text"
           value={backupName}
-          onChange={e => setBackupName(e.target.value)}
+          onChange={(e) => setBackupName(e.target.value)}
           placeholder="e.g. git-bkp"
         />
       </div>
-      <Button className='btn' onClick={handleSubmit}>Create Backup</Button>
+
+      <Button className="btn" onClick={handleSubmit}>
+        Create Backup
+      </Button>
     </div>
   );
 }
-

frontend/src/style/global.css

@@ -7,11 +7,11 @@ h2 {
   border-radius: 8px;
   padding: 13px;
   margin: 10px;
-    height: 400px;
+  height: auto;
   width: 500px;
   flex: 1;
   max-width: 500px;
-    min-width: 500px;
+  min-width: 300px;
 }
 
 .form-content {
@@ -20,7 +20,9 @@ h2 {
   padding: 10px;
 }
 
-input {
+/* Unified input/select styling */
+input,
+select {
   width: 100%;
   padding: 10px;
   background-color: #1a1a1a;
@@ -29,13 +31,46 @@ input {
   color: white;
   font-size: 1rem;
   box-sizing: border-box;
+  appearance: none;
 }
 
-input:hover {
+input:hover,
+select:hover {
   border-color: #1a73e8;
 }
 
+input:disabled,
+select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .btn {
   background-color: #4CAF50;
+  color: white;
   margin-top: 30px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.btn:hover {
+  background-color: #45a049;
+}
+
+/* Scrollbar inside <select> dropdown (some browsers only) */
+select {
+  scrollbar-color: #666 #1a1a1a;
+  scrollbar-width: thin;
+}
+
+select::-webkit-scrollbar {
+  width: 6px;
+}
+
+select::-webkit-scrollbar-thumb {
+  background-color: #666;
+  border-radius: 4px;
 }