diff --git a/src/pages/ServerConsole/ServerConsole.jsx b/src/pages/ServerConsole/ServerConsole.jsx index f4f8efa..abc89e3 100644 --- a/src/pages/ServerConsole/ServerConsole.jsx +++ b/src/pages/ServerConsole/ServerConsole.jsx @@ -37,8 +37,6 @@ const ServerConsole = ({ user }) => { logString = logString.replace(/'{2,}/g, ''); logString = logString.trim(); setLogs(logString); - } else { - setError(`Erreur lors de la récupération des logs: ${response.message}`); } } catch (err) { setError(`Erreur: ${err.message}`); diff --git a/src/pages/ServerProperties/ServerProperties.jsx b/src/pages/ServerProperties/ServerProperties.jsx index 674360e..19a7a75 100644 --- a/src/pages/ServerProperties/ServerProperties.jsx +++ b/src/pages/ServerProperties/ServerProperties.jsx @@ -84,59 +84,72 @@ const ServerProprieties = ({ user }) => {

Propriétés du serveur {server.name}

-
- - + +
+
+ + +
+
+ + +
-
- - + +
+
+ + +
+
+ + +
-
- - + +
+
+ + +
+
+ + +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + +
+
+ + +
+
+ + +
+
@@ -144,13 +157,11 @@ const ServerProprieties = ({ user }) => { }; ServerProprieties.propTypes = { - user: PropTypes.oneOfType([ - PropTypes.shape({ - uid: PropTypes.string.isRequired, - displayName: PropTypes.string, - email: PropTypes.string, - }), - ]), + user: PropTypes.shape({ + uid: PropTypes.string.isRequired, + displayName: PropTypes.string, + email: PropTypes.string, + }), }; export default ServerProprieties; diff --git a/src/pages/ServerProperties/ServerProperties.module.scss b/src/pages/ServerProperties/ServerProperties.module.scss index ccf14c8..a4bb1f8 100644 --- a/src/pages/ServerProperties/ServerProperties.module.scss +++ b/src/pages/ServerProperties/ServerProperties.module.scss @@ -1,63 +1,71 @@ .serverDetailsContainer { - padding-top: var(--navbar-height); - background-color: var(--main-bg-color); - display: flex; - flex-direction: column; - align-items: center; - color: var(--text-color); - width: 100%; - box-sizing: border-box; + padding-top: var(--navbar-height); + background-color: var(--main-bg-color); + display: flex; + flex-direction: column; + align-items: center; + color: var(--text-color); + width: 100%; + box-sizing: border-box; +} + +.details { + padding: 2rem; + background-color: #100D25; + 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; +} + +.formRow { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.formGroup { + display: flex; + flex-direction: column; + flex: 1; + margin-right: 0.625rem; + margin-bottom: 1.5rem; + + &:last-child { + margin-right: 0; } - - .details { - padding: 3rem; - padding-top: 0; - background-color: var(--card-bg-color); - width: 100%; - max-width: 60rem; - border-radius: 1.5rem; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - box-sizing: border-box; - } - - .formGroup { - margin-bottom: 2.5rem; - display: flex; - flex-direction: column; - } - - .formGroup label { + + label { font-weight: 600; - margin-bottom: 1rem; - font-size: 1.4rem; - color: var(--label-color); + margin-bottom: 0.5rem; + font-size: 1rem; + color: #EAEAEA; } - - .formGroup input, - .formGroup select { - width: 100%; - padding: 1.2rem; - height: auto; - background-color: var(--input-bg-color); - border: 1px solid var(--input-border-color); - border-radius: 0.75rem; - color: var(--text-color); - font-size: 1.2rem; - line-height: 1.5rem; + + input, + select { + width: 15rem; + max-width: 20rem; + padding: 0.7rem; + background-color: #2C2C44; + border: 0.1rem solid #44476A; + border-radius: 0.5rem; + color: #EAEAEA; + font-size: 1rem; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease; } - - .formGroup input:focus, - .formGroup select:focus { - border-color: var(--focus-border-color); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + + input:focus, + select:focus { + border-color: #5B5EE6; + box-shadow: 0 0 0.5rem rgba(91, 94, 230, 0.5); outline: none; } - - /* Chrome- styles */ + @supports (-webkit-appearance: none) { - .formGroup select { + select { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -65,69 +73,66 @@ background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1rem; - padding-right: 3rem; + padding-right: 3rem; } } - +} + +.saveButton { + width: 10rem; + padding: .5rem .5rem; + color: #FFF; + border: none; + border-radius: 0.5rem; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; + font-size: 1.1rem; + background-color: #1D1836; + + + + &:active { + transform: translateY(0); + } +} + +.error { + color: #FF5C5C; + font-size: 1.2rem; +} + +.details h1 { + font-size: 1.75rem; + margin-bottom: 2rem; + color: #FFF; + text-align: center; +} + +@media (max-width: 48rem) { + .details { + width: 90%; + padding: 1.5rem; + } + + .formGroup { + margin-right: 0; + } + + .formGroup input, + .formGroup select { + width: 100%; + font-size: 1rem; + padding: 0.75rem; + } + .saveButton, .quitButton { - padding: 1.2rem 2.5rem; - color: var(--button-text-color); - border: none; - border-radius: 0.75rem; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.3s ease; - font-size: 1.2rem; - margin-top: 1rem; + padding: 0.75rem; + font-size: 1rem; } - - .saveButton { - background-color: #05a771; - } - - .saveButton:hover { - background-color: #05a77183; - } - - .quitButton { - background-color: gray; - margin-left: 1rem; - } - - - .error { - color: var(--error-color); - font-size: 1.2rem; - } - + .details h1 { - font-size: 2.5rem; - margin-bottom: 3rem; - color: var(--header-color); + font-size: 1.5rem; + margin-bottom: 1.25rem; } - - @media (max-width: 768px) { - .details { - width: 90%; - padding: 2rem; - } - - .formGroup input, - .formGroup select { - height: auto; - font-size: 1.1rem; - padding: 1rem; - } - - .saveButton, - .quitButton { - padding: 1rem 2rem; - font-size: 1.1rem; - } - - .details h1 { - font-size: 2rem; - margin-bottom: 2rem; - } - } - \ No newline at end of file +}