dvirlabs/snapix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save style

Browse Source
This commit is contained in:
dvirlabs 2025-06-10 13:17:49 +03:00
parent 2715353d14
commit c25d277abf
5 changed files with 70 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/App.css
View File

@ -15,51 +15,3 @@
text-align: center; text-align: center;
margin-bottom: 2rem; 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;
}

1
frontend/src/App.jsx
View File

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

20
frontend/src/components/BackupForm.jsx
View File

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

4
frontend/src/components/RestoreForm.jsx
View File

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

58
frontend/src/style/global.css Normal file
View File

@ -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;
} */