From b09a02eab2c770006739c2102c9cfc635c398933 Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Wed, 14 Feb 2024 04:54:42 +0100
Subject: [PATCH] style : global improvements

---
 .../index/selectGame/selectGameAccount.tsx    |  2 +-
 .../index/selectGame/selectGameOrigin.tsx     |  2 +-
 src/types/{index.tsx => enums.ts}             |  0
 styles/global.css                             | 19 +++++++++++-----
 styles/index.css                              | 22 ++++++++++++++-----
 5 files changed, 32 insertions(+), 13 deletions(-)
 rename src/types/{index.tsx => enums.ts} (100%)

diff --git a/src/sections/index/selectGame/selectGameAccount.tsx b/src/sections/index/selectGame/selectGameAccount.tsx
index 9be1874..169e3b7 100644
--- a/src/sections/index/selectGame/selectGameAccount.tsx
+++ b/src/sections/index/selectGame/selectGameAccount.tsx
@@ -1,4 +1,4 @@
-import { GameOrigin } from "@/types";
+import { GameOrigin } from "@/types/enums";
 
 interface Props {
   gameOrigin: GameOrigin;
diff --git a/src/sections/index/selectGame/selectGameOrigin.tsx b/src/sections/index/selectGame/selectGameOrigin.tsx
index 110418b..332f994 100644
--- a/src/sections/index/selectGame/selectGameOrigin.tsx
+++ b/src/sections/index/selectGame/selectGameOrigin.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import InputGame from "./inputGame";
 import SelectGameAccount from "./selectGameAccount";
-import { GameOrigin } from "@/types";
+import { GameOrigin } from "@/types/enums";
 
 export default function SelectGameOrigin() {
   const [gameOrigin, setGameOrigin] = useState(GameOrigin.Pgn);
diff --git a/src/types/index.tsx b/src/types/enums.ts
similarity index 100%
rename from src/types/index.tsx
rename to src/types/enums.ts
diff --git a/styles/global.css b/styles/global.css
index 9cd7a9a..4996df1 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,11 +1,13 @@
 :root {
-  --border-color: rgb(83, 83, 83);
+  --border-color: rgb(63, 63, 63);
 
-  --primary-color: rgb(20, 20, 20);
-  --secondary-color: rgb(26, 26, 26);
+  --primary-color: rgb(24, 24, 24);
+  --secondary-color: rgb(47, 47, 47);
 
-  --success-color: rgb(101, 255, 84);
-  --success-color-accent: rgb(91, 229, 75);
+  --success-color: rgb(69, 238, 50);
+  --success-color-accent: rgb(47, 207, 29);
+
+  --rounded-radius: 10px;
 }
 
 body {
@@ -35,7 +37,12 @@ body {
 
 .success-btn {
   background-color: var(--success-color);
-  box-shadow: 0px 4px var(--success-color-accent);
+  box-shadow: 0px 8px var(--success-color-accent);
+  transition: background-color 0.3s ease;
+}
+
+.success-btn:hover {
+  background-color: var(--success-color-accent);
 }
 
 .success-btn:active {
diff --git a/styles/index.css b/styles/index.css
index 1963de1..119bc8e 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,5 +1,6 @@
 .white {
   color: white;
+  margin: 10px 0 0 0;
 }
 
 @media (min-width: 1000px) and (min-height: 860px) {
@@ -134,6 +135,7 @@
 .profile {
   color: white;
   font-size: 20px;
+  margin: 5px 0;
 }
 
 #board-outer-container {
@@ -147,6 +149,7 @@
 #evaluation-bar {
   background-color: white;
   border: 2px solid var(--border-color);
+  border-radius: var(--rounded-radius);
 }
 
 #board {
@@ -156,6 +159,7 @@
 
   border: 2px solid var(--border-color);
   border-radius: 10px;
+  border-radius: var(--rounded-radius);
 }
 
 /* 
@@ -285,6 +289,7 @@
   background-color: var(--secondary-color);
 
   border: 2px solid var(--border-color);
+  border-radius: var(--rounded-radius);
 }
 
 @media (min-width: 1264px) {
@@ -348,7 +353,7 @@
   GAME LOAD TYPE DROPDOWN
 */
 #load-type-dropdown-container {
-  margin-bottom: 5px;
+  margin-bottom: 20px;
 }
 
 #load-type-dropdown {
@@ -366,8 +371,10 @@
   height: 130px;
   resize: none;
 
-  border-radius: 10px;
+  border-radius: var(--rounded-radius);
   background-color: var(--border-color);
+  outline: none;
+  padding: 10px;
 }
 
 /*
@@ -453,6 +460,7 @@
 #status-message {
   text-align: center;
   color: rgb(255, 53, 53);
+  margin: 10px 0;
 }
 
 /*
@@ -481,18 +489,22 @@
 
 #review-panel-toolbar-buttons {
   margin: 10px;
-  gap: 10px;
+  gap: 15px;
   flex-wrap: wrap;
   transition: gap 0.5s ease;
 }
 
 #review-panel-toolbar-buttons img {
   cursor: pointer;
-  transition: transform 0.5s ease;
+  width: 30px;
 }
 
 #review-panel-toolbar-buttons img:hover {
-  transform: translateY(-3px);
+  opacity: 0.7;
+}
+
+#review-panel-toolbar-buttons img:active {
+  opacity: 0.5;
 }
 
 #announcement {