#2490: support dark theme for logo and description

NationalSecurityAgency · Jun 21, 2024 · fcd2ee2 · fcd2ee2
1 parent 2f8be2e
commit fcd2ee2
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 33 deletions.
diff --git a/dashboard-prime/src/common-components/utilities/markdown/MarkdownEditor.vue b/dashboard-prime/src/common-components/utilities/markdown/MarkdownEditor.vue
@@ -26,6 +26,7 @@ import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnou
 import { useByteFormat } from '@/common-components/filter/UseByteFormat.js'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import FileUploadService from '@/common-components/utilities/FileUploadService.js'
+import { useThemesHelper } from '@/components/header/UseThemesHelper.js'
 
 const appConfig = useAppConfig()
 
@@ -84,6 +85,7 @@ const props = defineProps({
     default: false
   },
 })
+const themeHelper = useThemesHelper()
 
 //  build editor options
 const toolbarItems = [
@@ -274,9 +276,11 @@ watch(value, (newValue) =>{
            :class="`${labelClass}`"
            :for="name" @click="focusOnMarkdownEditor">{{ label }}</label>
     <BlockUI :blocked="disabled">
+
       <toast-ui-editor :id="name"
                        :style="resizable ? {resize: 'vertical', overflow: 'auto'} : {}"
                        class="markdown"
+                       :class="{'editor-theme-dark' : themeHelper.isDarkTheme }"
                        data-cy="markdownEditorInput"
                        ref="toastuiEditor"
                        initialEditType="wysiwyg"
@@ -289,7 +293,7 @@ watch(value, (newValue) =>{
                        @keydown="onKeydown"
                        @focus="handleFocus"
                        @load="onLoad" />
-      <div class="editor-help-footer border-1 surface-border border-round-bottom px-2 py-2">
+      <div class="border-1 surface-border surface-100 border-round-bottom px-2 py-2">
       <div class="flex text-xs">
         <div class="">
           Insert images and attach files by pasting, dragging & dropping, or selecting from toolbar.
@@ -332,18 +336,36 @@ watch(value, (newValue) =>{
 </template>
 
 <style scoped>
-.editor-help-footer {
-  border-top: 0.9px dashed rgba(0, 0, 0, 0.2) !important;
-  background-color: #f7f9fc !important;
-  color: #687278 !important;
-}
 
 .editor-help-footer-help-icon {
   font-size: 1rem;
 }
+
 </style>
 
 <style>
+
+.editor-theme-dark .toastui-editor-ww-container {
+  background-color: #1f2937 !important;
+}
+.editor-theme-dark .toastui-editor-defaultUI-toolbar {
+  background-color: #374151 !important;
+}
+.editor-theme-dark .toastui-editor-contents p {
+  color: rgba(255, 255, 255, 0.87) !important;
+}
+.editor-theme-dark .toastui-editor-toolbar-group button {
+  background-color: #c2ccda !important;
+  color: #454545 !important;
+}
+
+.editor-theme-dark .toastui-editor-toolbar-icons {
+  color: #c2ccda !important;
+}
+.editor-theme-dark .toastui-editor-defaultUI {
+  border: 1px solid #424b57
+}
+
 .markdown .toastui-editor-defaultUI {
   border-bottom: none !important;
   border-bottom-left-radius: 0 !important;

diff --git a/dashboard-prime/src/components/brand/SkillTreeHeaderSvgIcon.vue b/dashboard-prime/src/components/brand/SkillTreeHeaderSvgIcon.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from 'vue'
+import { useThemesHelper } from '@/components/header/UseThemesHelper.js'
+
+const themeHelper = useThemesHelper()
+const st4ColorClass = computed(() => themeHelper.isDarkTheme ? 'st4-dark': 'st4')
+</script>
+
+<template>
+  <div>
+
+       <svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            viewBox="0 0 190 45"
+            style="enable-background:new 0 0 716 384;" xml:space="preserve" height="3rem">
+      <g>
+	<g>
+		<g>
+			<path class="st0" d="M1.84,9.36l9.42-6.85l9.42,6.85c0.21,0.15,0.44,0.22,0.68,0.22c0.36,0,0.71-0.17,0.94-0.48
+				c0.38-0.52,0.26-1.24-0.26-1.62L11.95,0.14c-0.41-0.3-0.96-0.3-1.36,0L0.48,7.48c-0.52,0.38-0.63,1.1-0.26,1.62
+				C0.6,9.62,1.32,9.74,1.84,9.36z"/>
+      <path class="st1" d="M22.05,14.01L11.95,6.66c-0.41-0.3-0.96-0.3-1.36,0L0.48,14.01c-0.52,0.38-0.63,1.1-0.26,1.62
+				c0.38,0.52,1.1,0.63,1.62,0.26l9.42-6.85l9.42,6.85c0.21,0.15,0.44,0.22,0.68,0.22c0.36,0,0.71-0.17,0.94-0.48
+				C22.69,15.11,22.57,14.38,22.05,14.01z"/>
+      <path class="st2" d="M22.05,20.53l-10.11-7.34c-0.41-0.3-0.96-0.3-1.36,0L0.48,20.53c-0.52,0.38-0.63,1.1-0.26,1.62
+				c0.38,0.52,1.1,0.63,1.62,0.26l9.42-6.85l9.42,6.85c0.21,0.15,0.44,0.22,0.68,0.22c0.36,0,0.71-0.17,0.94-0.48
+				C22.69,21.63,22.57,20.91,22.05,20.53z"/>
+      <path class="st3" d="M22.05,27.05l-10.11-7.34c-0.41-0.3-0.96-0.3-1.36,0L0.48,27.05c-0.52,0.38-0.63,1.1-0.26,1.62
+				c0.38,0.52,1.1,0.63,1.62,0.26l9.42-6.85l9.42,6.85c0.21,0.15,0.44,0.22,0.68,0.22c0.36,0,0.71-0.17,0.94-0.48
+				C22.69,28.15,22.57,27.43,22.05,27.05z"/>
+      <g>
+				<path :class="st4ColorClass" d="M12.39,43.79c0,0.64-0.48,1.13-1.14,1.13c-0.66,0-1.17-0.49-1.17-1.13V29.46l-8.25,5.99
+					c-0.52,0.38-1.24,0.26-1.62-0.26c-0.38-0.52-0.26-1.24,0.26-1.62l10.11-7.34c0.41-0.3,0.96-0.3,1.36,0l10.11,7.34
+					c0.52,0.38,0.63,1.1,0.26,1.62c-0.23,0.31-0.58,0.48-0.94,0.48c-0.24,0-0.47-0.07-0.68-0.22l-8.26-6L12.39,43.79z"/>
+			</g>
+		</g>
+	</g>
+        <g>
+		<path :class="st4ColorClass" d="M40.56,35.07c-0.28-0.2-0.56-0.6-0.56-1.13c0-0.72,0.6-1.33,1.37-1.33c0.28,0,0.56,0.08,0.76,0.24
+			c2.13,1.45,4.34,2.21,6.59,2.21c2.49,0,4.3-1.29,4.3-3.3v-0.08c0-2.09-2.45-2.89-5.18-3.66c-3.26-0.92-6.87-2.05-6.87-5.87v-0.08
+			c0-3.58,2.97-5.95,7.07-5.95c2.21,0,4.62,0.68,6.63,1.77c0.4,0.24,0.76,0.68,0.76,1.29c0,0.72-0.6,1.33-1.37,1.33
+			c-0.28,0-0.52-0.08-0.68-0.16c-1.77-1-3.66-1.61-5.43-1.61c-2.45,0-4.02,1.29-4.02,3.01v0.08c0,1.97,2.57,2.73,5.34,3.58
+			c3.22,0.96,6.67,2.21,6.67,5.95v0.08c0,3.94-3.25,6.23-7.39,6.23C45.83,37.68,42.81,36.67,40.56,35.07z"/>
+          <path :class="st4ColorClass" d="M61.7,9.31c0-0.84,0.68-1.57,1.53-1.57c0.89,0,1.57,0.72,1.57,1.57v19.05L76.05,16.9
+			c0.36-0.4,0.72-0.6,1.21-0.6c0.84,0,1.41,0.68,1.41,1.45c0,0.48-0.2,0.8-0.6,1.21l-6.79,6.67l7.43,9.36
+			c0.28,0.36,0.4,0.64,0.4,1.04c0,0.84-0.64,1.45-1.49,1.45c-0.56,0-0.92-0.2-1.33-0.72l-7.19-9.08l-4.3,4.26v3.98
+			c0,0.88-0.64,1.57-1.53,1.57c-0.89,0-1.57-0.68-1.57-1.57V9.31z"/>
+          <path :class="st4ColorClass" d="M84.53,9.99c0-1,0.8-1.65,1.81-1.65c1.04,0,1.85,0.64,1.85,1.65v0.52c0,0.96-0.8,1.65-1.85,1.65
+			c-1,0-1.81-0.68-1.81-1.65V9.99z M84.81,17.87c0-0.84,0.68-1.57,1.53-1.57c0.89,0,1.57,0.68,1.57,1.57v18.04
+			c0,0.88-0.64,1.57-1.53,1.57c-0.89,0-1.57-0.68-1.57-1.57V17.87z"/>
+          <path :class="st4ColorClass" d="M95.39,9.31c0-0.84,0.68-1.57,1.53-1.57c0.89,0,1.57,0.72,1.57,1.57v26.6c0,0.88-0.64,1.57-1.53,1.57
+			c-0.89,0-1.57-0.68-1.57-1.57V9.31z"/>
+          <path :class="st4ColorClass" d="M105.96,9.31c0-0.84,0.68-1.57,1.53-1.57c0.89,0,1.57,0.72,1.57,1.57v26.6c0,0.88-0.64,1.57-1.53,1.57
+			c-0.89,0-1.57-0.68-1.57-1.57V9.31z"/>
+          <path :class="st4ColorClass" d="M117.33,31.77V19.23h-1.69c-0.72,0-1.37-0.64-1.37-1.37c0-0.76,0.64-1.37,1.37-1.37h1.69v-4.9
+			c0-0.84,0.64-1.57,1.53-1.57c0.84,0,1.57,0.72,1.57,1.57v4.9h5.39c0.76,0,1.41,0.64,1.41,1.37c0,0.76-0.64,1.37-1.41,1.37h-5.39
+			v12.14c0,2.53,1.41,3.46,3.5,3.46c1.08,0,1.65-0.28,1.89-0.28c0.72,0,1.33,0.6,1.33,1.33c0,0.56-0.36,1.01-0.89,1.21
+			c-0.88,0.36-1.85,0.56-3.05,0.56C119.86,37.64,117.33,35.99,117.33,31.77z"/>
+          <path :class="st4ColorClass" d="M132.48,17.87c0-0.84,0.68-1.57,1.53-1.57c0.89,0,1.57,0.68,1.57,1.57v3.9c1.53-3.46,4.54-5.55,7.15-5.55
+			c0.92,0,1.53,0.68,1.53,1.57c0,0.84-0.56,1.45-1.37,1.57c-4.02,0.48-7.31,3.5-7.31,9.48v7.07c0,0.84-0.64,1.57-1.53,1.57
+			c-0.89,0-1.57-0.68-1.57-1.57V17.87z"/>
+          <path :class="st4ColorClass" d="M156.96,37.76c-5.71,0-10.37-4.38-10.37-10.81v-0.08c0-5.99,4.22-10.81,9.97-10.81
+			c6.15,0,9.65,5.02,9.65,10.53c0,0.84-0.68,1.45-1.45,1.45h-15.03c0.44,4.5,3.62,7.03,7.31,7.03c2.57,0,4.46-1,5.99-2.41
+			c0.24-0.2,0.52-0.36,0.89-0.36c0.76,0,1.37,0.6,1.37,1.33c0,0.36-0.16,0.72-0.48,1C162.83,36.51,160.5,37.76,156.96,37.76z
+			 M163.11,25.74c-0.32-3.78-2.49-7.07-6.63-7.07c-3.62,0-6.35,3.01-6.75,7.07H163.11z"/>
+          <path :class="st4ColorClass" d="M180.76,37.76c-5.71,0-10.37-4.38-10.37-10.81v-0.08c0-5.99,4.22-10.81,9.97-10.81
+			c6.15,0,9.65,5.02,9.65,10.53c0,0.84-0.68,1.45-1.45,1.45h-15.03c0.44,4.5,3.62,7.03,7.31,7.03c2.57,0,4.46-1,5.99-2.41
+			c0.24-0.2,0.52-0.36,0.89-0.36c0.76,0,1.37,0.6,1.37,1.33c0,0.36-0.16,0.72-0.48,1C186.62,36.51,184.29,37.76,180.76,37.76z
+			 M186.9,25.74c-0.32-3.78-2.49-7.07-6.63-7.07c-3.62,0-6.35,3.01-6.75,7.07H186.9z"/>
+	</g>
+</g>
+</svg>
+
+  </div>
+</template>
+
+<style scoped>
+.st0{fill:#E76F50;}
+.st1{fill:#F3A161;}
+.st2{fill:#E8C269;}
+.st3{fill:#2B9C8E;}
+.st4{fill:#254653;}
+.st4-dark{fill: #f9fafb;}
+</style>
diff --git a/dashboard-prime/src/components/header/DashboardHeader.vue b/dashboard-prime/src/components/header/DashboardHeader.vue
@@ -21,9 +21,14 @@ import { usePagePath } from '@/components/utils/UsePageLocation.js'
 import InceptionButton from '@/components/inception /InceptionButton.vue'
 import SkipToContent from '@/components/header/SkipToContent.vue'
 import { useAppInfoState } from '@/stores/UseAppInfoState.js'
+import { useThemesHelper } from '@/components/header/UseThemesHelper.js'
+import SkillTreeHeaderSvgIcon from '@/components/brand/SkillTreeHeaderSvgIcon.vue'
 
 const pathPath = usePagePath()
 const appInfoState = useAppInfoState()
+const themeHelper = useThemesHelper()
+
+
 </script>
 
 <template>
@@ -43,13 +48,16 @@ const appInfoState = useAppInfoState()
         <div class="flex-1 justify-content-center">
           <div class="flex">
             <router-link data-cy="skillTreeLogo" class="" to="/">
-              <img
-                class="mb-3"
-                ref="skillTreeLogo"
-                src="@/assets/img/skilltree_logo_v1.png"
-                alt="skilltree logo" />
+              <SkillTreeHeaderSvgIcon />
             </router-link>
-            <div v-if="pathPath.isAdminPage.value" ref="adminStamp" class="skills-stamp">ADMIN</div>
+            <div v-if="pathPath.isAdminPage.value"
+                 ref="adminStamp"
+                 class="skills-stamp"
+                 :class="{
+                   'skills-stamp-color-light-theme': !themeHelper.isDarkTheme,
+                   'skills-stamp-color-dark-theme': themeHelper.isDarkTheme,
+                 }"
+            >ADMIN</div>
           </div>
         </div>
         <div class="flex-none">
@@ -72,10 +80,6 @@ const appInfoState = useAppInfoState()
 .skills-stamp {
   margin-left: 0.5rem;
 
-  box-shadow:
-    0 0 0 3px #8b6d6d,
-    0 0 0 2px #8b6d6d inset;
-  color: #722b2b;
   border: 2px solid transparent;
   border-radius: 4px;
   display: inline-block;
@@ -91,6 +95,20 @@ const appInfoState = useAppInfoState()
   transform: rotate(-15deg);
 }
 
+.skills-stamp-color-light-theme {
+  box-shadow:
+    0 0 0 3px #8b6d6d,
+    0 0 0 2px #8b6d6d inset;
+  color: #722b2b;
+}
+
+.skills-stamp-color-dark-theme {
+  box-shadow:
+    0 0 0 3px #E76F50,
+    0 0 0 2px #F3A161 inset;
+  color: #d9f8f4;
+}
+
 @media (max-width: 675px) {
   .skills-stamp {
     max-width: 9rem;

diff --git a/dashboard-prime/src/components/header/UseThemesHelper.js b/dashboard-prime/src/components/header/UseThemesHelper.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia'
 import SettingsService from "@/components/settings/SettingsService.js";
 
@@ -38,7 +38,7 @@ export const useThemesHelper = defineStore('useThemesHelper', () => {
   }
 
   const loadTheme = () => {
-    SettingsService.getUserSettings().then((response) => {
+    return SettingsService.getUserSettings().then((response) => {
       const themeSetting = response.find( (it)=> it.setting === 'enable_dark_mode')
       const darkModeEnabled = themeSetting?.value.toLowerCase() === 'true';
       if(darkModeEnabled) {
@@ -56,6 +56,7 @@ export const useThemesHelper = defineStore('useThemesHelper', () => {
     file.href = `/themes/${currentTheme.value.value}/theme.css`
     document.head.appendChild(file)
   }
+const isDarkTheme =  computed(() => currentTheme.value.name === 'Dark')
 
   return {
     currentTheme,
@@ -64,6 +65,7 @@ export const useThemesHelper = defineStore('useThemesHelper', () => {
     setLightMode,
     themeOptions,
     configureDefaultThemeFileInHeadTag,
-    loadTheme
+    loadTheme,
+    isDarkTheme
   }
 });
diff --git a/dashboard-prime/src/components/utils/Navigation.vue b/dashboard-prime/src/components/utils/Navigation.vue
@@ -42,7 +42,7 @@ const navOnSmallScreen = (changeEvent) => {
 </script>
 
 <template>
-  <div class="mt-3" data-cy="nav" >
+  <div class="mt-3" data-cy="nav" aria-label="Navigation">
     <div class="sticky top-0 z-5 mb-3 md:hidden">
       <Dropdown
         :options="navItems"

diff --git a/dashboard-prime/src/components/utils/NoContent2.vue b/dashboard-prime/src/components/utils/NoContent2.vue
@@ -55,7 +55,7 @@ function refresh() {
       </div>
       <div class="w-full"></div>
       <div class="col pt-2">
-        <div class="text-3xl no-content text-center sd-theme-primary-color">{{ title }}</div>
+        <div class="text-3xl no-content text-center">{{ title }}</div>
       </div>
     </div>
     <div class="grid justify-content-center">
@@ -78,16 +78,5 @@ function refresh() {
 </template>
 
 <style scoped>
-  .icon-style {
-    font-size: 4rem;
-    color: #969696;
-  }
-
-  .icon-container {
-    background: #ededed;
-  }
 
-  .no-content {
-    color: #3f5971;
-  }
 </style>
diff --git a/dashboard-prime/src/skills-display/components/header/SkillTreeSvgIcon.vue b/dashboard-prime/src/skills-display/components/header/SkillTreeSvgIcon.vue
@@ -19,6 +19,10 @@ import { onMounted } from 'vue'
 const props = defineProps({
   isHovering: Boolean,
   logoFill: String,
+  height: {
+    type: Number,
+    default: 2.5
+  }
 })
 
 onMounted(() => {
@@ -36,7 +40,7 @@ onMounted(() => {
     <svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          viewBox="0 0 716 384"
-         style="enable-background:new 0 0 716 384;" xml:space="preserve" height="2.5rem">
+         style="enable-background:new 0 0 716 384;" xml:space="preserve" :height="`${height}rem`">
     <switch>
       <g i:extraneous="self">
     <g id="Layer_1">