From 09f253c01ac6cd0371c7d8c24b764ed5e8f9feba Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 7 Sep 2024 11:03:21 +0200
Subject: [PATCH] Style: Update blue variables with pure blue

---
 .../home/browse/hero-banner/hero-banner.component.scss    | 4 +++-
 .../components/buttons/btn-large/btn-large.component.scss | 8 ++++----
 .../components/buttons/btn-small/btn-small.component.scss | 6 +++---
 frontend/src/assets/style/colors.scss                     | 1 +
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
index ff85832..dc21dde 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
@@ -94,12 +94,14 @@ section {
     justify-content: center;
     width: 48px;
     height: 48px;
-    background-color: blue;
+    background-color: $pure-blue;
+    border: 1px solid $pure-blue;
     border-radius: 50%;
     cursor: pointer;
     transition: 300ms ease-in-out;
     &:hover {
       background-color: $white;
+      border: 1px solid $red;
       img {
         filter: brightness(0) saturate(100%) invert(18%) sepia(98%)
           saturate(7267%) hue-rotate(342deg) brightness(94%) contrast(119%);
diff --git a/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
index 5ff3403..f1fc339 100644
--- a/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
+++ b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
@@ -7,8 +7,8 @@
   width: fit-content;
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   border-radius: 24px;
-  background-color: blue;
-  border: 1px solid blue;
+  background-color: $pure-blue;
+  border: 1px solid $pure-blue;
   transition: 300ms ease-in-out;
   cursor: pointer;
   p {
@@ -19,10 +19,10 @@
   }
   &:not(:disabled):hover {
     background-color: white;
-    border: 1px solid blue;
+    border: 1px solid $pure-blue;
     p {
       transition: 300ms ease-in-out;
-      color: blue;
+      color: $pure-blue;
     }
     .icon {
       transition: 300ms ease-in-out;
diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
index 3c3accf..89c146d 100644
--- a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
+++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
@@ -8,13 +8,13 @@
   height: var(--btnRadius);
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   border-radius: 50%;
-  background-color: blue;
-  border: 1px solid blue;
+  background-color: $pure-blue;
+  border: 1px solid $pure-blue;
   transition: 300ms ease-in-out;
   cursor: pointer;
   &:not(:disabled):hover {
     background-color: white;
-    border: 1px solid blue;
+    border: 1px solid $pure-blue;
     .icon {
       transition: 300ms ease-in-out;
       filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
diff --git a/frontend/src/assets/style/colors.scss b/frontend/src/assets/style/colors.scss
index 104b9be..22662fd 100644
--- a/frontend/src/assets/style/colors.scss
+++ b/frontend/src/assets/style/colors.scss
@@ -3,5 +3,6 @@ $white: #fff;
 $black: #000;
 $gray: #ababab;
 $blue: #2e3edf;
+$pure-blue: #0000ff;
 $light-blue: #969eef;
 $red: #ff002e;