refact: use more variables

Timur233 · Oct 7, 2024 · 95a004d · 95a004d
1 parent d57f317
commit 95a004d
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 20 deletions.
diff --git a/packages/client/src/components/ui/BreadCrumbs/BreadCrumbs.scss b/packages/client/src/components/ui/BreadCrumbs/BreadCrumbs.scss
@@ -1,8 +1,10 @@
 @import '../../../scss/vars';
 
+$breadcrumbs-text-color: $c_white;
+
 .breadcrumbs {
   &__item {
-    color: $c_white;
+    color: $breadcrumbs-text-color;
 
     &:not(:last-child)::after {
       content: '>';

diff --git a/packages/client/src/components/ui/Button/CompactButton.scss b/packages/client/src/components/ui/Button/CompactButton.scss
@@ -1,6 +1,9 @@
 @import '../../../scss/vars';
 
-$c_compact-button-border: #999999;
+$c_compact-button-border-top: $c_white;
+$c_compact-button-border-bottom: #999999;
+$c_compact-button-background-color: #d2d2d2;
+$c_compact-button-text-color: #242424;
 
 .compact-button {
   border-width: 2px;
@@ -16,19 +19,19 @@ $c_compact-button-border: #999999;
   }
 
   &_white {
-    background-color: #d2d2d2;
-    border-top: 2px solid $c_white;
-    border-bottom: 2px solid $c_compact-button-border;
+    background-color: $c_compact-button-background-color;
+    border-top: 2px solid $c_compact-button-border-top;
+    border-bottom: 2px solid $c_compact-button-border-bottom;
     padding: 10px;
 
     &:hover {
-      border-top: 2x solid $c_compact-button-border;
-      border-bottom: 2px solid $c_white;
+      border-top: 2x solid $c_compact-button-border-bottom;
+      border-bottom: 2px solid $c_compact-button-border-top;
     }
 
     span {
       text-shadow: none;
-      color: #242424;
+      color: $c_compact-button-text-color;
       text-transform: none;
       letter-spacing: 1px;
     }

diff --git a/packages/client/src/components/ui/Card/Card.scss b/packages/client/src/components/ui/Card/Card.scss
@@ -2,8 +2,9 @@
 
 $decor-width: 90px;
 $decor-height: 7px;
-$c_card-background: #101010;
+$c_card-background: $c_almost-black;
 $c_card-border: #9baf5d;
+$c_card-padding: $c_gray;
 
 @mixin decor($top, $bottom) {
   content: '';
@@ -23,7 +24,7 @@ $c_card-border: #9baf5d;
 
 .card {
   border: 2px solid $c_card-border;
-  background-color: #5e5e5e;
+  background-color: $c_card-padding;
   border-radius: 16px;
   padding: 8px;
   position: relative;

diff --git a/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss
@@ -16,7 +16,7 @@ $border-gradient: linear-gradient(45deg, #414243, #7f7f7f) top left,
   linear-gradient(315deg, #414042, #414243) bottom left;
 $border-radius: 24px;
 $block-width: 350px;
-$outline-color: #101010;
+$outline-color: $c_almost-black;
 
 .custom-page-title {
   position: relative;

diff --git a/packages/client/src/components/ui/Input/Input.scss b/packages/client/src/components/ui/Input/Input.scss
@@ -14,4 +14,8 @@
     outline: none;
     border-color: $c_input-default-border-hover;
   }
+
+  &::placeholder {
+    color: $c_input-default-placeholder;
+  }
 }
diff --git a/packages/client/src/pages/CreateThread/CreateThread.scss b/packages/client/src/pages/CreateThread/CreateThread.scss
@@ -3,12 +3,12 @@
 @mixin input() {
   background-color: $c_black;
   border-radius: 12px;
-  border: 2px solid #707070;
+  border: 2px solid $c_input-default-border;
   color: $c_white;
   padding: 12px 16px;
 
   &::placeholder {
-    color: #797979;
+    color: $c_input-default-placeholder;
   }
 }
 

diff --git a/packages/client/src/pages/Forum/Forum.scss b/packages/client/src/pages/Forum/Forum.scss
@@ -3,8 +3,8 @@
 $decor-width: 90px;
 $decor-height: 7px;
 
-$padding-color: #5e5e5e;
-$row-background: #101010;
+$padding-color: $c_gray;
+$row-background: $c_almost-black;
 $title-color: #bebebe;
 
 @mixin decor($top, $bottom) {

diff --git a/packages/client/src/pages/Thread/Thread.scss b/packages/client/src/pages/Thread/Thread.scss
@@ -1,5 +1,7 @@
 @import './../../scss/vars.scss';
 
+$comment-separator: $c_gray;
+$thread-page-color: #c5c5c5;
 .thread-page {
   &::after {
     content: '';
@@ -21,7 +23,7 @@
   .thread-info {
     display: flex;
     gap: 16px;
-    color: #c5c5c5;
+    color: $thread-page-color;
     font-size: 14px;
 
     &__label {
@@ -52,7 +54,7 @@
       flex-direction: column;
       gap: 16px;
 
-      border-right: 1px solid #5e5e5e;
+      border-right: 1px solid $comment-separator;
     }
 
     .author {
@@ -70,7 +72,7 @@
 
       &__date {
         font-size: 12px;
-        color: #c5c5c5;
+        color: $thread-page-color;
       }
 
       &__controlls {
@@ -119,15 +121,15 @@
       &__textarea {
         background-color: $c_black;
         border-radius: 12px;
-        border: 2px solid #707070;
+        border: 2px solid $c_input-default-border;
         color: $c_white;
         padding: 12px 16px;
         min-height: 130px;
         max-width: 100%;
         min-width: 300px;
 
         &::placeholder {
-          color: #797979;
+          color: $c_input-default-placeholder;
         }
       }
 

diff --git a/packages/client/src/scss/vars.scss b/packages/client/src/scss/vars.scss
@@ -30,6 +30,7 @@ $c_button-bottom_blue: #0079a7;
 $c_input-default-border: #707070;
 $c_input-default-border-hover: #b1b1b1;
 $c_input-default-label: #a5a5a5;
+$c_input-default-placeholder: #797979;
 
 $c_avatar-border-color: #313131;
 $c_overlay-background: rgba(0, 0, 0, 0.5);
@@ -47,6 +48,8 @@ $c_button_red: $error-color;
 
 $c_white: #fff;
 $c_black: #000;
+$c_almost-black: #101010;
+$c_gray: #5e5e5e;
 
 // fonts/links
 $c_font-default: $c_white;