From 2e61cfbed6887403d4fd4217a3212e0daebaa17b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 16 Jan 2024 16:58:42 +0100
Subject: [PATCH] Add styling for different highlight colors

Also refactor the naming of the colors
---
 .../content-blocks/ContentComponent.vue       | 57 ++++++++++++-------
 .../highlights/HighlightPopover.vue           | 12 ++--
 client/src/styles/variables.css               |  9 ++-
 3 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 1c0e79d7..0a99db84 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -219,31 +219,48 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-@import 'styles/helpers';
+<style lang="postcss">
+.highlight {
+  background-color: Highlight;
+  color: HighlightText;
 
-.content-component {
-  position: relative;
-
-  // &--bookmarked {
-  // }
-
-  &--subtitle {
-    margin-top: 2 * $medium-spacing;
-    margin-bottom: $medium-spacing;
+  &--alpha {
+    background-color: var(--mark-alpha);
+    color: var(--color-charcoal-dark);
   }
 
-  &--section_title {
-    margin-top: $section-spacing;
-    margin-bottom: $large-spacing;
+  &--beta {
+    background-color: var(--mark-beta);
+    color: var(--color-charcoal-dark);
   }
 
-  &--text_block {
-    margin-bottom: $large-spacing;
-  }
-
-  &--document_block {
-    margin-bottom: $large-spacing;
+  &--gamma {
+    background-color: var(--mark-gamma);
+    color: var(--color-charcoal-dark);
+  }
+}
+</style>
+
+<style lang="postcss" scoped>
+.content-component {
+  position: relative;
+
+  &--subtitle {
+    margin-top: 2 * var(--medium-spacing);
+    margin-bottom: var(--medium-spacing);
+  }
+
+  &--section_title {
+    margin-top: var(--section-spacing);
+    margin-bottom: var(--large-spacing);
+  }
+
+  &--text_block {
+    margin-bottom: var(--large-spacing);
+  }
+
+  &--document_block {
+    margin-bottom: var(--large-spacing);
   }
 }
 </style>
diff --git a/client/src/components/highlights/HighlightPopover.vue b/client/src/components/highlights/HighlightPopover.vue
index 9075c24a..6f1803f0 100644
--- a/client/src/components/highlights/HighlightPopover.vue
+++ b/client/src/components/highlights/HighlightPopover.vue
@@ -3,15 +3,15 @@
     <section class="highlight-popover__section">
       <div
         class="highlight-popover__color highlight-popover__color--yellow"
-        @click="$emit('choose-color', 'yellow')"
+        @click="$emit('choose-color', 'alpha')"
       ></div>
       <div
         class="highlight-popover__color highlight-popover__color--pink"
-        @click="$emit('choose-color', 'pink')"
+        @click="$emit('choose-color', 'beta')"
       ></div>
       <div
         class="highlight-popover__color highlight-popover__color--blue"
-        @click="$emit('choose-color', 'blue')"
+        @click="$emit('choose-color', 'gamma')"
       ></div>
     </section>
     <section class="highlight-popover__section">
@@ -62,13 +62,13 @@ defineProps<Props>();
     border-radius: 50%;
 
     &--yellow {
-      background-color: var(--mark-yellow);
+      background-color: var(--mark-alpha);
     }
     &--pink {
-      background-color: var(--mark-pink);
+      background-color: var(--mark-beta);
     }
     &--blue {
-      background-color: var(--mark-blue);
+      background-color: var(--mark-gamma);
     }
   }
 
diff --git a/client/src/styles/variables.css b/client/src/styles/variables.css
index f1634907..fb7aac6a 100644
--- a/client/src/styles/variables.css
+++ b/client/src/styles/variables.css
@@ -1,12 +1,15 @@
 :root {
   --default-border-radius: 13px;
 
+  --section-spacing: 60px;
+  --large-spacing: 30px;
   --medium-spacing: 20px;
   --small-spacing: 10px;
 
-  --mark-yellow: #fbf44a;
-  --mark-pink: #FF8BDE;
-  --mark-blue: #6FDCFF;
+  --mark-alpha: #fbf44a;
+  --mark-beta: #FF8BDE;
+  --mark-gamma: #6FDCFF;
 
   --color-silver: #d0d0d0;
+  --color-charcoal-dark: #333333;
 }