TTYG intro message

## What - New styling of the intro hint with colors ## Why - Better visual branding ## How - CSS/HTML
Ontotext-AD · Oct 21, 2024 · 22b8e70 · 22b8e70
1 parent bef3900
commit 22b8e70
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 6 deletions.
diff --git a/scripts/validate-translations.js b/scripts/validate-translations.js
@@ -36,7 +36,7 @@ const identicalTranslations = [
     "Type:",
     "type",
     "Google Analytics (GA4)",
-    "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+    "<div><span class=\"graph\">GRAPH</span><span class=\"wise\">WISE</span></div><div class=\"thrives\">AI THRIVES ON WHOLE DATA</div>",
 
     // File formats:
     "JSON",

diff --git a/src/css/bootstrap-graphdb-theme.css b/src/css/bootstrap-graphdb-theme.css
@@ -24,6 +24,10 @@
     --base-background-selected-color: #dcdcdc;
     /* The base background color that is used for hover effects in panels and elements */
     --base-background-hover-color: rgba(0, 0, 0, .1);
+
+    /* Graphwise colors */
+    --graphwise-blue-color: #001FFF;
+    --graphwise-pink-color: #DF367C;
 }
 
 :root.menu-collapsed {

diff --git a/src/css/ttyg/chat-panel.css b/src/css/ttyg/chat-panel.css
@@ -69,7 +69,57 @@
 }
 
 .chat-panel .messages-hint .hint1 {
-    font-size: 1.5rem;
+    font-size: 2rem;
+    transform:scale(1, 0.8);
+}
+
+.chat-panel .messages-hint .hint1 .graph,
+.chat-panel .messages-hint .hint1 .wise {
+    animation-duration: 3.0s;
+    animation-delay: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-out;
+}
+
+.chat-panel .messages-hint .hint1 .graph {
+    font-weight: 500;
+    animation-name: change-color-graph;
+}
+
+.chat-panel .messages-hint .hint1 .wise {
+    animation-name: change-color-wise;
+}
+
+.chat-panel .messages-hint .hint1 .thrives {
+    font-size: 0.425em;
+    font-weight: 400;
+}
+
+@keyframes change-color-graph {
+    0% {
+        color: var(--graphwise-blue-color);
+    }
+    40% {
+        color: inherit;
+    }
+    100% {
+        color: inherit;
+    }
+}
+
+@keyframes change-color-wise {
+    0% {
+        color: inherit;
+    }
+    40% {
+        color: var(--graphwise-pink-color);
+    }
+    80% {
+        color: inherit;
+    }
+    100% {
+        color: inherit;
+    }
 }
 
 .chat-panel .messages-hint .hint2 {

diff --git a/src/i18n/locale-en.json b/src/i18n/locale-en.json
@@ -276,7 +276,7 @@
             }
         },
         "chat_panel": {
-            "hint1": "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+            "hint1": "<div><span class=\"graph\">GRAPH</span><span class=\"wise\">WISE</span></div><div class=\"thrives\">AI THRIVES ON WHOLE DATA</div>",
             "hint2": "Simply ask a question!",
             "deleted_agent": "<span class=\"text-warning\"><i class=\"fa-regular fa-triangle-exclamation fa-xs\"></i> deleted agent</span>",
             "btn": {

diff --git a/src/i18n/locale-fr.json b/src/i18n/locale-fr.json
@@ -276,7 +276,7 @@
             }
         },
         "chat_panel": {
-            "hint1": "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+            "hint1": "<div><span class=\"graph\">GRAPH</span><span class=\"wise\">WISE</span></div><div class=\"thrives\">AI THRIVES ON WHOLE DATA</div>",
             "hint2": "Posez simplement une question !",
             "deleted_agent": "<span class=\"text-warning\"><i class=\"fa-regular fa-triangle-exclamation fa-xs\"></i> agent supprimé</span>",
             "btn": {

diff --git a/src/js/angular/ttyg/templates/chat-panel.html b/src/js/angular/ttyg/templates/chat-panel.html
@@ -49,7 +49,7 @@
     </div>
 
     <div class="messages-hint text-muted" ng-if="!loadingChat && chat.chatHistory.isEmpty() && !askingChatItem" ng-cloak>
-        <div class="hint1" ng-bind-html="'ttyg.chat_panel.hint1' | htmlTranslate"></div>
         <div class="hint2" ng-bind="'ttyg.chat_panel.hint2' | translate"></div>
+        <div class="hint1" ng-bind-html="'ttyg.chat_panel.hint1' | htmlTranslate"></div>
     </div>
 </div>
diff --git a/test-cypress/fixtures/locale-en.json b/test-cypress/fixtures/locale-en.json
@@ -276,7 +276,7 @@
             }
         },
         "chat_panel": {
-            "hint1": "<b>GRAPH</b>WISE – AI THRIVES ON WHOLE DATA",
+            "hint1": "<div><span class=\"graph\">GRAPH</span><span class=\"wise\">WISE</span></div><div class=\"thrives\">AI THRIVES ON WHOLE DATA</div>",
             "hint2": "Simply ask a question!",
             "deleted_agent": "<span class=\"text-warning\"><i class=\"fa-regular fa-triangle-exclamation fa-xs\"></i> deleted agent</span>",
             "btn": {