frontend: begin port to css modules, sidebar refactor

7 files changed, 274 insertions, 24 deletions

diff --git a/frontend/src/css/Button.module.css b/frontend/src/css/Button.module.css
new file mode 100644
index 0000000..d1c3ad7
--- /dev/null
+++ b/frontend/src/css/Button.module.css
@@ -0,0 +1,91 @@
+.default, .defaultWide, .sidebar, .logout {
+        border: none;
+        border-radius: 24px;
+        padding: 5px 10px;
+        background-color: #2b2e46;
+        font-family: BarlowSemiCondensed-Regular;
+        color: #CDCFDF;
+        font-size: 18px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+}
+
+.sidebar.selected {
+        background-color: #202232;
+}
+
+.sidebar.selected:hover {
+        background-color: #202232;
+}
+
+.default:hover, .defaultWide:hover, .sidebar:hover {
+        background-color: rgb(38, 42, 62);
+}
+
+.defaultWide {
+        width: 100%;
+}
+
+.default.error, .defaultWide.error {
+        background-color: rgb(147, 45, 45);
+}
+
+.default.error:hover, .defaultWide.error {
+        background-color: rgb(105, 36, 36);
+}
+
+.sidebar {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        font-family: BarlowSemiCondensed-Regular;
+        padding: 8px 12px;
+        height: 42px;
+        padding-right: 4px;
+        text-wrap: nowrap;
+        transition: all 0.2s ease;
+}
+
+.sidebar.min {
+        padding: 8px 9px;
+}
+
+.sidebar.min>span {
+        opacity: 0;
+        animation: sidebar_text_out 0.2s ease;
+        transform: translateX(-200px);
+}
+
+.sidebar img {
+        height: 24px;
+}
+
+.sidebar.profile>img {
+        border-radius: 24px;
+}
+
+.sidebar>span {
+        padding: 0px 8px;
+        transition: all 0.2s ease;
+}
+
+.logout {
+        background-color: #00000000;
+        display: flex;
+        align-items: center;
+}
+
+@keyframes sidebar_text_out {
+        0% {
+                opacity: 1;
+                transform: translateX(0px);
+        }
+        50% {
+                opacity: 0;
+                transform: translateX(0px);
+        }
+        60%, 100% {
+                transform: translateX(-200px);
+        }
+}
+
diff --git a/frontend/src/css/Buttons.css b/frontend/src/css/Buttons.css
new file mode 100644
index 0000000..de8f31d
--- /dev/null
+++ b/frontend/src/css/Buttons.css
@@ -0,0 +1,3 @@
+.default {
+        
+}
diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css
index fc557d2..51bf0ae 100644
--- a/frontend/src/css/Dialog.css
+++ b/frontend/src/css/Dialog.css
@@ -61,11 +61,6 @@
     white-space: pre-wrap;
 }
 
-.dialog-btns-container button {
-    border-radius: 24px;
-    padding: 5px 10px;
-}
-
 .dialog-btns-container button:nth-child(2):hover {
     background-color: rgb(105, 36, 36);
 }
diff --git a/frontend/src/css/Games.css b/frontend/src/css/Games.css
index ec57a71..9270a98 100644
--- a/frontend/src/css/Games.css
+++ b/frontend/src/css/Games.css
@@ -11,9 +11,7 @@
 }
 
 .games-page-item-content {
-    position: absolute;
-    left: 50px;
-    width: calc(100% - 100px);
+        position: relative;
 }
 
 .games-page-item-content a {
@@ -96,4 +94,4 @@ span>b {
 .games-page-item-body-item-num {
     font-size: 50px;
     font-family: BarlowCondensed-Bold;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/css/Input.module.css b/frontend/src/css/Input.module.css
new file mode 100644
index 0000000..c216f73
--- /dev/null
+++ b/frontend/src/css/Input.module.css
@@ -0,0 +1,15 @@
+.sidebar {
+    background-color: #161723;
+        color: var(--text-color);
+        border: none;
+        border-radius: 300px;
+        font-family: BarlowSemiCondensed-Regular;
+        padding: 8px;
+        width: calc(100% - 16px);
+        outline: none;
+        font-size: 18px;
+}
+
+.sidebar::placehoder {
+        color: #2b2e46;
+}
diff --git a/frontend/src/css/Sidebar.module.css b/frontend/src/css/Sidebar.module.css
new file mode 100644
index 0000000..9436a93
--- /dev/null
+++ b/frontend/src/css/Sidebar.module.css
@@ -0,0 +1,163 @@
+.sidebar {
+        display: flex;
+        width: 350px;
+        min-width: 350px;
+        height: 100vh;
+        color: var(--text-color);
+        font-family: BarlowSemiCondensed-Regular;
+        font-size: 18px;
+        background-color: var(--primary-dark);
+        flex-direction: column;
+}
+
+.logo, .logo>a {
+        height: fit-content;
+        display: flex;
+        width: calc(100% - 4px);
+        text-decoration: none;
+        padding-left: 4px;
+        background-color: var(--primary)
+}
+
+.logo>a>img {
+        padding: 12px 8px;
+        height: 80px;
+}
+
+.logo>a>div {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+}
+
+.logo>a>div>span {
+        font-size: 36px;
+    font-family: BarlowCondensed-Regular;
+        padding-left: 8px;
+}
+
+.logoTitle {
+        display: flex;
+        height: 60px;
+        font-size: 56px;
+}
+
+/* btns */
+.btns {
+        display: flex;
+        flex-direction: column;
+        padding: 0px 8px;
+        height: 100%;
+        width: calc(100% - 16px);
+        justify-content: space-between;
+        background-color: var(--primary);
+        transition: all 0.3s ease;
+}
+
+.topBtns>span {
+        height: 28px;
+        display: flex;
+}
+
+.btns.min {
+        width: 42px;
+}
+
+.topBtns, .bottomBtns {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+}
+
+.topBtns {
+        padding-top: 8px;
+}
+
+.bottomBtns {
+        padding-bottom: 8px;
+}
+
+.topBtns a, .bottomBtns a {
+        width: 100%;
+}
+
+.btnsContainer {
+        display: flex;
+}
+
+/* Clusterfuck */
+.searchContainer {
+        width: 0%;
+        transition: all 0.3s ease, overflow-y 0.0s ease 0.1s;
+        opacity: 0;
+        overflow-y: hidden;
+}
+
+.searchContainer.min {
+        width: 100%;
+        transition: all 0.3s ease, opacity 0.1s ease 0.1s;
+        opacity: 1;
+        overflow-y: auto;
+}
+
+.inpContainer {
+        padding: 8px;
+}
+
+.searchResults {
+        overflow-y: auto;
+        height: calc(100% - 54px);
+}
+
+.result {
+    margin: 10px 6px 0 6px;
+    height: 80px; 
+        width: 100%;
+        max-width: 285px;
+        animation: result_in 0.2s ease;
+        animation-fill-mode: backwards;
+        overflow: hidden;
+
+    border-radius: 20px;
+    text-align: center;
+    
+    display: grid;
+
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+    grid-template-rows: 20% 20% 60%;
+    width: calc(100% - 15px);
+}
+.result>span{
+    color: #888;
+    font-size: 16px;
+    font-family: BarlowSemiCondensed-Regular;
+}
+.result>span:nth-child(3), .result.player span{
+    font-size: 30px;
+    color: #CDCFDF;
+}
+
+.result.player img {
+        height: 80px;
+}
+
+.result.player span {
+        display: flex;
+        text-align: left;
+        margin-left: 90px;
+        width: fit-content;
+}
+
+@keyframes result_in {
+        0% {
+                opacity: 0;
+                transform: translateY(20px);
+        }
+        100% {
+                opacity: 1;
+                transform: translateY(0px);
+        }
+}
+
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index f129bb8..7cc2cf5 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -96,25 +96,10 @@ div#upload-run{
     }
 }
 
-button, input {
-    background-color: #2b2e46;
-    border: none;
-    font-family: BarlowSemiCondensed-Regular;
-    color: #CDCFDF;
-    font-size: 18px;
-    cursor: pointer;
-    padding: 5px 0px;
-    transition: all 0.2s ease;
-}
-
 .upload-run-buttons-container button {
     border-radius: 32px;
 }
 
-button:hover {
-    background-color: #222538;
-}
-
 .upload-run-map-container {
     display: flex;
 }