This commit is contained in:
AntoninoP 2024-09-20 12:07:11 +02:00
parent 694bb4ff50
commit 3c428b89b6
7 changed files with 29 additions and 40 deletions

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>Servii - Hebergement facile</title>
<!-- charger les polices -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

View File

@ -11,8 +11,8 @@ html {
--profile-pic-size: 3.5rem;
--main-background-color: #FFFF;
--card-bg-color: #1D1836;
--main-bg-color: #050816;
--card-bg-color: white;
--main-bg-color: white;
--text-color-black: black;
--input-bg-color: #44475a;
--input-border-color: #6272a4;

View File

@ -61,7 +61,8 @@
padding: 2rem;
border-radius: 0.4rem;
background-color: #fff;
margin-top: 2rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(-3rem);
transition: opacity 0.4s ease, transform 0.4s ease;

View File

@ -9,15 +9,14 @@ import FeatureSoon from './FeatureSoon';
import styles from './ServerDetails.module.scss';
import PropTypes from "prop-types";
import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
import { TbArrowBackUp } from 'react-icons/tb';
import { FiChevronsLeft, FiChevronsRight } from "react-icons/fi";
import NotFoundPage from '../NotFoundPage/NotFoundPage';
import { useLocation } from 'react-router-dom';
import { useLocation,useNavigate} from 'react-router-dom';
const ServerDetails = ({ user }) => {
const { serverName } = useParams();
const location = useLocation();
const navigate = useNavigate();
const initialStatus = location.state?.status ?? JSON.parse(localStorage.getItem('status')) ?? false;
const [status, setStatus] = useState(initialStatus);
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
@ -38,7 +37,7 @@ const ServerDetails = ({ user }) => {
return (
<>
<Navbar user={user} />
<Navbar user={user} hasShadow={true} showBackButton={true} onBackClick={() => navigate('/Dashboard')} />
<div className={`${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
<div className={`${styles.sidebar} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
<div className={styles.menu}>
@ -87,12 +86,7 @@ const ServerDetails = ({ user }) => {
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaLock /> {!isSidebarCollapsed && 'Accès'}
</NavLink>
<NavLink
to={`/dashboard`}
className={`${styles.menuItem} ${styles.extraMargin}`}>
<TbArrowBackUp /> {!isSidebarCollapsed && 'Dashboard'}
</NavLink>
</div>
</div>
<div className={styles.serverDetailsContainer}>

View File

@ -6,15 +6,15 @@
.sidebar {
width: 20rem;
background-color: #100D25;
background-color: white;
padding-left: 0rem;
padding-right: 1rem;
box-sizing: border-box;
position: fixed;
height: calc(100vh - var(--navbar-height));
top: var(--navbar-height);
color: white;
transition: width 0.3s;
box-shadow: 0.125rem 0 0.3125rem rgba(0, 0, 0, 0.1);
}
.sidebar.collapsed {
@ -30,28 +30,24 @@
.menuItem {
display: flex;
color:black;
align-items: center;
padding: 0.7rem 1rem;
margin: .8rem 0rem;
margin: .5rem 0rem;
padding-right: 0rem;
font-size: 1.25rem;
font-size: 1.15rem;
cursor: pointer;
color: #D1D5DB;
text-decoration: none;
width: 100%;
&.active {
background-color: #1D1836;
color: white;
background-color: white;
}
}
.menuItem:hover {
color: white;
}
.menuItem svg {
margin-right: 1rem;
font-size: 1.8rem;
font-size: 1.25rem;
}
.toggleButton {
@ -59,8 +55,7 @@
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
background-color: #100D25;
background-color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;

View File

@ -6,7 +6,7 @@
display: flex;
flex-direction: row;
gap: 1.5rem;
background-color: #1D1836;
background-color: white;
color: black;
margin-bottom: 1rem;
padding: 2.5rem;
@ -23,8 +23,8 @@
border: 1px solid #ccc;
padding: 1rem;
border-radius: 4px;
background-color: #100D25;
color: white;
background-color: white;
color: black;
border: .1rem solid #343947;
}
@ -34,7 +34,7 @@
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
color: black;
}
.filterContainer input[type="checkbox"] {
@ -49,6 +49,6 @@
display: block;
text-align: center;
font-size: 1.5rem;
color: white;
color: black;
font-weight: bold;
}

View File

@ -1,6 +1,6 @@
.serverDetailsContainer {
padding-top: var(--navbar-height);
background-color: var(--main-bg-color);
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
@ -11,9 +11,8 @@
.details {
padding: 2rem;
background-color: #100D25;
background-color: white;
width: 50rem;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
border: 0.1rem solid #343947;
box-sizing: border-box;
@ -40,7 +39,7 @@
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
color: #EAEAEA;
color: black;
}
input,
@ -48,10 +47,10 @@
width: 15rem;
max-width: 20rem;
padding: 0.7rem;
background-color: #2C2C44;
background-color: white;
border: 0.1rem solid #44476A;
border-radius: 0.5rem;
color: #EAEAEA;
color: black;
font-size: 1rem;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
@ -87,7 +86,7 @@
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 1.1rem;
background-color: #1D1836;
background-color: black;
@ -104,7 +103,7 @@
.details h1 {
font-size: 1.75rem;
margin-bottom: 2rem;
color: #FFF;
color: black;
text-align: center;
}