style: refactor glass style

clicepfl · Feb 27, 2024 · fc8753b · fc8753b
1 parent 07ce563
commit fc8753b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/app/src/styles/Card.module.scss b/app/src/styles/Card.module.scss
@@ -1,10 +1,14 @@
+@import "glass";
+
 .card {
+  @extend .glass;
+
   width: 30ch;
   height: 10ch;
   border-radius: 5rem;
   padding: 1rem;
 
-  color: black;
+  color: var(--text-color);
 
   display: flex;
   align-items: center;
@@ -36,13 +40,8 @@
     }
   }
 
-  background-color: rgba($color: black, $alpha: 0.08);
-  &.background {
-    background-color: var(--background-color);
-  }
-
   .picture {
-    border: 3px gray solid;
+    border: 3px white solid;
     border-radius: 50%;
 
     min-width: 6rem;

diff --git a/app/src/styles/NavigationBar.module.scss b/app/src/styles/NavigationBar.module.scss
@@ -1,16 +1,15 @@
+@import "glass";
+
 .navigationBar {
+  @extend .glass;
+
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 3em;
   position: fixed;
   z-index: 100;
 
-  background-color: rgba(100, 100, 255, 0.75);
-  backdrop-filter: blur(10px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.125);
-  box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
-
   color: var(--text-color);
   font-weight: lighter;
   font-size: 15pt;
@@ -67,15 +66,12 @@
       display: inline-block;
 
       .content {
+        @extend .glass;
+
         display: none;
         position: absolute;
         flex-direction: column;
 
-        background-color: var(--glass-color);
-        backdrop-filter: blur(10px) saturate(180%);
-        border: 1px solid rgba(255, 255, 255, 0.125);
-        box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
-
         padding-right: 2em;
         z-index: 1;
         border-radius: 5px;

diff --git a/app/src/styles/glass.scss b/app/src/styles/glass.scss
@@ -0,0 +1,6 @@
+.glass {
+  background-color: var(--glass-color);
+  backdrop-filter: blur(10px) saturate(180%);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
+}
diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
@@ -1,3 +1,5 @@
+@import "glass";
+
 body {
   background-color: #1c70ddff;
   margin: 0;
@@ -6,6 +8,7 @@ body {
   --text-color: #fafafa;
   --dark-text-color: darkblue;
   --glass-color: rgba(100, 100, 255, 0.75);
+  --text-link-color: rgb(58, 127, 255);
 
   font-family: "Poppins";
 }
@@ -76,16 +79,13 @@ a {
 }
 
 .news {
+  @extend .glass;
+
   width: 100%;
   overflow: scroll;
 
   padding: 2em;
 
-  background-color: var(--glass-color);
-  backdrop-filter: blur(10px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.125);
-  box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
-
   .news-list {
     margin: 2%;
     gap: 2em;
@@ -128,7 +128,7 @@ a {
   }
 
   a {
-    color: rgb(58, 127, 255);
+    color: var(--text-link-color);
   }
 
   p {