feat: Navie branding

getappmap · Jan 10, 2024 · 6b6bfef · 6b6bfef
1 parent f095a6e
commit 6b6bfef
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 22 deletions.
diff --git a/packages/components/src/assets/compass-icon.svg b/packages/components/src/assets/compass-icon.svg
diff --git a/packages/components/src/components/chat/Chat.vue b/packages/components/src/components/chat/Chat.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="chat">
     <div class="button-panel" v-if="isChatting">
+      <div id="header-logo">
+        <v-app-map-navie-logo />
+        <div id="header-navie-logo">Navie</div>
+      </div>
       <v-button class="clear" size="small" kind="ghost" @click.native="clear">New chat</v-button>
     </div>
     <div class="messages" data-cy="messages" ref="messages" @scroll="manageScroll">
@@ -58,6 +62,7 @@ import VChatInput from '@/components/chat/ChatInput.vue';
 import VSuggestionGrid from '@/components/chat/SuggestionGrid.vue';
 import VSpinner from '@/components/Spinner.vue';
 import VLoaderIcon from '@/assets/eva_loader-outline.svg';
+import VAppMapNavieLogo from '@/assets/appmap-full-logo.svg';
 import VButton from '@/components/Button.vue';
 import { AI } from '@appland/client';
 
@@ -112,6 +117,7 @@ export default {
     VSuggestionGrid,
     VSpinner,
     VLoaderIcon,
+    VAppMapNavieLogo,
     VButton,
   },
   props: {
@@ -287,6 +293,21 @@ export default {
 <style lang="scss" scoped>
 $border-color: darken($gray4, 10%);
 
+#header-logo {
+  margin-right: auto;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: bold;
+  font-size: 11px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+#header-navie-logo {
+  padding-top: 3px;
+}
 .chat {
   display: flex;
   flex-direction: column;

diff --git a/packages/components/src/components/chat/ChatInput.vue b/packages/components/src/components/chat/ChatInput.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 //@ts-nocheck
 
-import VSendIcon from '@/assets/send.svg';
+import VSendIcon from '@/assets/compass-icon.svg';
 import VPopper from '@/components/Popper.vue';
 
 export default {
@@ -140,7 +140,6 @@ $border-color: #7289c5;
       outline: none !important;
     }
   }
-
   .popper {
     position: absolute;
     top: 50%;
@@ -150,32 +149,32 @@ $border-color: #7289c5;
     &__text {
       border: none;
     }
-
     .send {
       height: 2rem;
       width: 2rem;
       padding: 0.25rem;
       border: none;
       border-radius: $border-radius;
-      background-color: lighten($border-color, 10%);
+      background-color: #6c81ba;
       transition: background-color 0.5s ease-in-out;
-
+      svg {
+        path {
+          fill: #fff;
+        }
+      }
       &:disabled {
         pointer-events: none;
         background-color: rgba($color: #7289c5, $alpha: 0.25);
-      }
 
+        svg {
+          path {
+            fill: #9aa9d3;
+          }
+        }
+      }
       &:hover {
         cursor: pointer;
-        background-color: white;
-      }
-
-      svg {
-        transform: rotate(90deg) translateY(-1px);
-        transform-origin: center center;
-        path {
-          fill: black;
-        }
+        background-color: $hotpink;
       }
     }
   }

diff --git a/packages/components/src/components/chat/UserMessage.vue b/packages/components/src/components/chat/UserMessage.vue
@@ -45,7 +45,7 @@
 
 <script lang="ts">
 //@ts-nocheck
-import VAppmapLogo from '@/assets/appmap-logomark.svg';
+import VNavieCompass from '@/assets/compass-icon.svg';
 import VUserAvatar from '@/assets/user-avatar.svg';
 import VThumbIcon from '@/assets/thumb.svg';
 import VButton from '@/components/Button.vue';
@@ -91,7 +91,7 @@ export default {
   name: 'v-user-message',
 
   components: {
-    VAppmapLogo,
+    VNavieCompass,
     VUserAvatar,
     VThumbIcon,
     VButton,
@@ -124,10 +124,10 @@ export default {
       return this.message.toString() || '...';
     },
     avatar() {
-      return this.isUser ? VUserAvatar : VAppmapLogo;
+      return this.isUser ? VUserAvatar : VNavieCompass;
     },
     name() {
-      return this.isUser ? 'You' : 'AppMap';
+      return this.isUser ? 'You' : 'Navie';
     },
     renderedMarkdown() {
       const markdown = marked.parse(this.dynamicMessage);
@@ -188,7 +188,7 @@ export default {
 
 .message {
   display: grid;
-  grid-template-columns: 32px 1fr;
+  grid-template-columns: 38px 1fr;
   grid-template-rows: 16px 1fr;
   gap: 0.5rem 1rem;
   padding: 0 1rem;
@@ -199,8 +199,8 @@ export default {
   }
 
   .avatar {
-    width: 32px;
-    height: 32px;
+    width: 38px;
+    height: 38px;
     overflow: hidden;
     grid-column: 1;
     border-radius: 50%;

diff --git a/packages/components/src/pages/VsCodeExtension.vue b/packages/components/src/pages/VsCodeExtension.vue
@@ -380,6 +380,7 @@ const browserPrefixes = ['', 'webkit', 'moz'];
 export default {
   name: 'VSCodeExtension',
   components: {
+    NavieCompass,
     AppMapLogo,
     HamburgerMenu,
     CloseIcon,