Merge pull request #568 from DigitalExcellence/bug/566-Settings-modal…

…-not-styled-on-project-info Added styling to the PopOver and Cogwheel. Fixed typo in highlight
DigitalExcellence · Sep 14, 2021 · 56b438f · 56b438f
2 parents c34d428 + ddfa4a4
commit 56b438f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/.../modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html b/.../modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.html
@@ -2,7 +2,7 @@
   <em [outsideClick]="true" [popover]="cogPopOver" class="fas fa-cog cog" placement="bottom" triggers="click"> </em>
   <ng-template #cogPopOver class="cog-tooltip">
     <ng-container *ngIf="displayHighlightButton">
-      <a (click)="onClickEditHighlightButton()" class="cog-tooltip-item"><em class="fas fa-highlighter"></em>Hightlight settings</a>
+      <a (click)="onClickEditHighlightButton()" class="cog-tooltip-item"><em class="fas fa-highlighter"></em>Highlight settings</a>
     </ng-container>
     <ng-container *ngIf="displayEditButton">
       <a (click)="closeModalAndRedirect('project/edit/' + project?.id)" class="cog-tooltip-item"

diff --git a/.../modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.scss b/.../modules/project/details/bottom-drawer/settings-dropdown/settings-dropdown.component.scss
@@ -11,3 +11,31 @@
     padding: 0;
   }
 }
+
+.cog {
+  cursor: pointer;
+  color: #323232;
+
+  &:hover {
+    color: #F7755A;
+  }
+}
+
+.cog-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+  color: #323232;
+
+  em {
+    width: 20px;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: #E85B3F;
+    transition: ease 0.2s;
+  }
+}
+