save style

frontend/src/App.css

@@ -15,51 +15,3 @@
   text-align: center;
   margin-bottom: 2rem;
 }
-
-.form-sections {
-  width: 100%;
-  max-width: 480px;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  margin: 0 auto;
-}
-
-.form-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.form-group {
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-}
-
-.form-group label {
-  margin-bottom: 4px;
-  font-weight: 500;
-  color: #333;
-}
-
-input, select {
-  padding: 8px;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.btn {
-  padding: 10px;
-  font-weight: bold;
-  background: #1976d2;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.btn:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}

frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import './App.css';
+import './style/global.css';
 import BackupForm from './components/BackupForm';
 import RestoreForm from './components/RestoreForm';
 

frontend/src/components/BackupForm.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { getNamespaces, getPVCs, createBackup } from '../service';
 import '../style/BackupForm.css';
-import { Button } from '@mui/base/Button';
+import { Button, Input, Select, Option } from '@mui/base';
 
 function BackupForm() {
   const [namespaces, setNamespaces] = useState([]);
@@ -37,27 +37,27 @@ function BackupForm() {
       <h3>📦 Create Backup</h3>
       <div className="form-group">
         <label>Namespace</label>
-        <select value={namespace} onChange={(e) => setNamespace(e.target.value)}>
-          <option value="">-- Select Namespace --</option>
+        <Select value={namespace} onChange={(e) => setNamespace(e.target.value)}>
+          <Option value="">-- Select Namespace --</Option>
           {namespaces.map((ns) => (
-            <option key={ns} value={ns}>{ns}</option>
+            <Option key={ns} value={ns}>{ns}</Option>
           ))}
-        </select>
+        </Select>
       </div>
 
       <div className="form-group">
         <label>PVC</label>
-        <select value={pvc} onChange={(e) => setPvc(e.target.value)} disabled={!namespace}>
-          <option value="">-- Select PVC --</option>
+        <Select value={pvc} onChange={(e) => setPvc(e.target.value)} disabled={!namespace}>
+          <Option value="">-- Select PVC --</Option>
           {pvcs.map((p) => (
-            <option key={p} value={p}>{p}</option>
+            <Option key={p} value={p}>{p}</Option>
           ))}
-        </select>
+        </Select>
       </div>
 
       <div className="form-group">
         <label>Backup Name</label>
-        <input
+        <Input
           type="text"
           value={backupName}
           onChange={(e) => setBackupName(e.target.value)}

frontend/src/components/RestoreForm.jsx

@@ -1,9 +1,7 @@
 import { useState } from 'react';
 import { restoreBackup } from '../service';
 import '../style/RestoreForm.css';
-import { Button } from '@mui/base/Button';
-import { Input } from '@mui/base/Input';
-
+import { Button, Input } from '@mui/base';
 
 function RestoreForm() {
   const [namespace, setNamespace] = useState('');

frontend/src/style/global.css

@@ -0,0 +1,58 @@
+/* Global button style */
+.btn {
+  padding: 10px;
+  font-weight: bold;
+  background: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+/* Inputs */
+input, select {
+  padding: 8px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+/* Shared spacing for forms */
+.form-group {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-sections {
+  width: 100%;
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 0 auto;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+/* .input {
+  padding: 8px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: transparent;
+} */