-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
@@ -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
+}