frontend: begin port to css modules, sidebar refactor

1 files changed, 91 insertions, 0 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);
+        }
+}
+