Add theme toggle need to fix the body color
This commit is contained in:
parent
970933b4a1
commit
2d59b89ded
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
</head>
|
||||
|
||||
@ -1,36 +1,64 @@
|
||||
/* Load a modern Google Font (optional, see Step 2) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@400;600&family=Roboto:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Nunito:wght@400;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Fira+Sans:wght@400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
|
||||
|
||||
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
/* Top-level layout container */
|
||||
/* Container centers content */
|
||||
.snapix-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* horizontal center */
|
||||
justify-content: center; /* vertical center */
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Title styling */
|
||||
/* Dashboard title */
|
||||
.snapix-title {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-family: 'Copperplate Gothic', 'Copperplate', 'Georgia', serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
color: #0d6efd;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Dashboard: backup + restore side by side */
|
||||
/* Dashboard layout */
|
||||
.snapix-dashboard {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-family: 'Copperplate Gothic', 'Copperplate', 'Georgia', serif;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background-color: #5e6063;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -1,12 +1,18 @@
|
||||
import { useState } from 'react';
|
||||
import BackupForm from './components/BackupForm';
|
||||
import RestoreForm from './components/RestoreForm';
|
||||
import './App.css';
|
||||
|
||||
import './AppLightMode.css';
|
||||
|
||||
function App() {
|
||||
const [darkMode, setDarkMode] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="snapix-container">
|
||||
<div className={`snapix-container ${darkMode ? 'dark' : 'light'}`}>
|
||||
<h1 className="snapix-title">🚀 Snapix Dashboard</h1>
|
||||
<button className="theme-toggle" onClick={() => setDarkMode(!darkMode)}>
|
||||
Switch to {darkMode ? 'Light' : 'Dark'} Mode
|
||||
</button>
|
||||
<div className="snapix-dashboard">
|
||||
<BackupForm />
|
||||
<RestoreForm />
|
||||
|
||||
34
frontend/src/AppLightMode.css
Normal file
34
frontend/src/AppLightMode.css
Normal file
@ -0,0 +1,34 @@
|
||||
/* src/light.css */
|
||||
|
||||
/* body {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
} */
|
||||
|
||||
.snapix-container.light {
|
||||
background-color: #e6e6e6;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.snapix-container.light .form-group {
|
||||
background-color: #fdfdfd;
|
||||
border-color: #bbb;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.snapix-container.light input,
|
||||
.snapix-container.light select {
|
||||
background-color: #ffffff;
|
||||
color: #111;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.snapix-container.light .btn {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.snapix-container.light .theme-toggle {
|
||||
background-color: #222;
|
||||
color: white;
|
||||
}
|
||||
@ -36,7 +36,7 @@ export default function BackupForm() {
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<h2>📦 Backup PVC</h2>
|
||||
<h2 className='form-title'>📦 Backup PVC</h2>
|
||||
|
||||
<div className="form-content">
|
||||
<label>Namespace:</label>
|
||||
|
||||
@ -40,7 +40,7 @@ export default function RestoreForm() {
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<h2>🔁 Restore PVC</h2>
|
||||
<h2 className='form-title'>🔁 Restore PVC</h2>
|
||||
|
||||
<div className="form-content">
|
||||
<label>Target Namespace:</label>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user