charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix css

Browse Source
This commit is contained in:
AntoninoP 2024-06-26 23:46:02 +02:00
parent 3e427ce704
commit c47a29d32f
7 changed files with 116 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/header/header.jsx
View File

@ -1,39 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const Header = ({ height, bgColor, children, className }) => {
const headerStyle = {
height: height,
backgroundColor: bgColor,
width: 'calc(100% - var(--sidebar-width-left) - var(--sidebar-width-right))',
position: 'fixed',
top: 0,
left: 'var(--sidebar-width-left)',
zIndex: 1000,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 1rem',
};
return (
<div className={className} style={headerStyle}>
{children}
</div>
);
};
Header.propTypes = {
height: PropTypes.string,
bgColor: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
};
Header.defaultProps = {
height: 'var(--header-height)',
bgColor: '#f8f9fa',
className: '',
};
export default Header;

0
src/components/header/header.scss
View File

32
src/components/navbar/Navbar.jsx
View File

@ -3,21 +3,21 @@ import { auth } from '../../pages/LoginPage/firebase';
import styles from './Navbar.module.scss'; import styles from './Navbar.module.scss';
const Navbar = ({ user }) => { const Navbar = ({ user }) => {
const handleLogout = () => { const handleLogout = () => {
auth.signOut(); auth.signOut();
}; };
return ( return (
<div className={styles.navbar}> <div className={styles.navbar}>
<div className={styles.userInfo}> <div className={styles.userInfo}>
<img src={user.photoURL} alt="Profile" className={styles.profilePic} /> <img src={user.photoURL} alt="Profile" className={styles.profilePic} />
<div className={styles.userDetails}> <div className={styles.userDetails}>
<span className={styles.userName}>{user.displayName}</span> <span className={styles.userName}>{user.displayName}</span>
<button onClick={handleLogout} className={styles.logoutButton}>Déconnexion</button> <button onClick={handleLogout} className={styles.logoutButton}>Déconnexion</button>
</div>
</div> </div>
</div> </div>
); </div>
}; );
};
export default Navbar;
export default Navbar;

100
src/components/navbar/Navbar.module.scss
View File

@ -1,51 +1,51 @@
.navbar { .navbar {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
padding: 10px 20px; padding: 10px 20px;
background-color: #333; background-color: var(--navbar-background-color);
color: #fff; color: var(--navbar-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
} height: var(--navbar-height);
}
.userInfo {
display: flex; .userInfo {
align-items: center; display: flex;
} align-items: center;
}
.profilePic {
width: 3rem; .profilePic {
height: 3rem; width: var(--profile-pic-size);
border-radius: 50%; height: var(--profile-pic-size);
margin-right: 1rem; border-radius: 50%;
} margin-right: 1rem;
}
.userDetails {
display: flex; .userDetails {
flex-direction: column; display: flex;
align-items: flex-start; flex-direction: column;
margin-right: 4rem; align-items: flex-start;
} margin-right: 4rem;
}
.userName {
font-weight: bold; .userName {
} font-weight: bold;
}
.logoutButton {
margin-top: 5px; .logoutButton {
padding: 5px 10px; margin-top: 5px;
background-color: #ff4b4b; padding: 5px 10px;
color: #fff; background-color: var(--logout-button-bg);
border: none; color: var(--navbar-color);
border-radius: 5px; border: none;
cursor: pointer; border-radius: 5px;
} cursor: pointer;
}
.logoutButton:hover {
background-color: #ff1a1a; .logoutButton:hover {
} background-color: var(--logout-button-bg-hover);
}

10
src/components/serverCard/serverCard.module.scss
View File

@ -1,14 +1,14 @@
.serverCard { .serverCard {
width: 90%; width: var(--card-width);
padding: 2.5rem; padding: var(--card-padding);
border: 0.1rem solid #343947; border: 0.1rem solid var(--card-border-color);
border-radius: 0.5rem; border-radius: 0.5rem;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: #1E2227; background-color: var(--card-bg-color);
color: white; color: var(--text-color);
} }
.status { .status {

15
src/main.css
View File

@ -2,3 +2,18 @@ html{
font-size: 12px; font-size: 12px;
} }
:root {
--navbar-height: 5rem;
--navbar-background-color: #333;
--navbar-color: #fff;
--profile-pic-size: 3rem;
--logout-button-bg: #ff4b4b;
--logout-button-bg-hover: #ff1a1a;
--card-width: 90%;
--card-padding: 2.5rem;
--card-border-color: #343947;
--card-bg-color: #1E2227;
--main-bg-color: #23272E;
--text-color: white;
}

54
src/pages/DashboardPage/DashboardPage.module.scss
View File

@ -1,24 +1,30 @@
body, html { html, body {
background-color: #23272E; margin: 0;
margin: 0; padding: 0;
padding: 0; width: 100%;
height: 100%; height: 100%;
} overflow-x: hidden;
font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
.container { background-color: var(--main-bg-color);
min-height: 100vh; color: var(--text-color);
display: flex; }
justify-content: center;
align-items: center;
} .dashboardContainer {
padding-top: var(--navbar-height);
.cardsContainer { background-color: var(--main-bg-color);
width: 100%; display: flex;
margin-top: 5rem; flex-direction: column;
display: flex; align-items: center;
flex-direction: column; color: var(--text-color);
gap: 1rem; }
align-items: center;
justify-content: center; .cardsContainer {
} width: 100%;
margin-top: 5rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}