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';
const Navbar = ({ user }) => {
const handleLogout = () => {
auth.signOut();
};
return (
<div className={styles.navbar}>
<div className={styles.userInfo}>
<img src={user.photoURL} alt="Profile" className={styles.profilePic} />
<div className={styles.userDetails}>
<span className={styles.userName}>{user.displayName}</span>
<button onClick={handleLogout} className={styles.logoutButton}>Déconnexion</button>
</div>
const handleLogout = () => {
auth.signOut();
};
return (
<div className={styles.navbar}>
<div className={styles.userInfo}>
<img src={user.photoURL} alt="Profile" className={styles.profilePic} />
<div className={styles.userDetails}>
<span className={styles.userName}>{user.displayName}</span>
<button onClick={handleLogout} className={styles.logoutButton}>Déconnexion</button>
</div>
</div>
);
};
export default Navbar;
</div>
);
};
export default Navbar;

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

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

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

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

15
src/main.css
View File

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