style three-dot-menu with different color and aligned with objective …

…state
puzzle · Oct 16, 2023 · 5b5ed79 · 5b5ed79
1 parent 3662997
commit 5b5ed79
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/frontend/src/app/objective/objective.component.html b/frontend/src/app/objective/objective.component.html
@@ -14,7 +14,7 @@
         matTooltip="The objectives state is {{ objective.value.state.split('-')[0] | uppercase }}"
         matTooltipPosition="above"
         data-testid="objective-state"
-        class="icon col-1 mt-2"
+        class="icon col-1 mt-1"
         [src]="'assets/icons/' + objective.value.state"
       />
       <header class="title col-10 ps-2">{{ objective.value.title }}</header>

diff --git a/frontend/src/app/objective/objective.component.scss b/frontend/src/app/objective/objective.component.scss
@@ -1,3 +1,5 @@
+@import "_variables";
+
 .objective {
   max-width: 750px;
   &:hover {
@@ -15,3 +17,13 @@
   border-radius: 1rem;
   background-color: lightgray;
 }
+
+.three-dot-menu {
+  color: $pz-dark-blue;
+  display: flex;
+  justify-content: center;
+  align-items: start;
+  padding-top: 0.2rem;
+  width: 35px;
+  height: 32px;
+}