From 8f75b74c1cdc7a9bd4a29392b481b8902eafba53 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Tue, 3 Oct 2023 22:44:31 -0400
Subject: tiny ui updates & backend lib patches

---
 .../src/entries/background/server-api/endpoints.ts |   6 +-
 .../src/entries/background/server-api/index.ts     |  17 ++--
 .../src/entries/contentScript/primary/main.js      |   2 +-
 extension/src/entries/options/App.vue              |  20 +++--
 .../src/entries/options/components/Identities.vue  | 100 ++++++++++-----------
 .../entries/options/components/SiteSettings.vue    |  84 +++++++++--------
 extension/src/entries/options/index.html           |   2 +-
 extension/src/entries/options/main.js              |   6 +-
 .../entries/popup/Components/IdentitySelection.vue |   2 +-
 extension/src/entries/popup/Components/Login.vue   |   2 +-
 .../src/entries/popup/Components/PageContent.vue   |   4 +-
 extension/src/entries/popup/main.js                |   2 +-
 12 files changed, 128 insertions(+), 119 deletions(-)

(limited to 'extension/src/entries')

diff --git a/extension/src/entries/background/server-api/endpoints.ts b/extension/src/entries/background/server-api/endpoints.ts
index a7f1488..b27bfa9 100644
--- a/extension/src/entries/background/server-api/endpoints.ts
+++ b/extension/src/entries/background/server-api/endpoints.ts
@@ -20,7 +20,7 @@ import { Method } from "axios";
 export interface EndpointDefinition {
     readonly method: Method
     path(request?: any): string
-    onRequest: (request?: any) => Promise<any>
+    onRequest: (...request: any) => Promise<any>
     onResponse: (response: any, request?: any) => Promise<any>
 }
 
@@ -42,7 +42,7 @@ export const initEndponts = () => {
         return endpoints.get(id);
     }
 
-    const execRequest = async <T>(id: string, request?: any): Promise<T> => {
+    const execRequest = async <T>(id: string, ...request: any): Promise<T> => {
         const endpoint = getEndpoint(id);
         if (!endpoint) {
             throw new Error(`Endpoint ${id} not found`);
@@ -52,7 +52,7 @@ export const initEndponts = () => {
         const path = endpoint.path(request);
 
         //Execute the request handler
-        const req = await endpoint.onRequest(request);
+        const req = await endpoint.onRequest(...request);
 
         //Get axios
         const axios = useAxios(null);
diff --git a/extension/src/entries/background/server-api/index.ts b/extension/src/entries/background/server-api/index.ts
index 3e1ada0..ee6582d 100644
--- a/extension/src/entries/background/server-api/index.ts
+++ b/extension/src/entries/background/server-api/index.ts
@@ -15,9 +15,10 @@
 
 
 import { Ref } from "vue"
+import { get } from '@vueuse/core'
 import { WebMessage } from "@vnuge/vnlib.browser"
 import { initEndponts } from "./endpoints"
-import { NostrEvent, NostrPubKey, NostrRelay } from "../types"
+import { NostrEvent } from "../types"
 
 export enum Endpoints {
     GetKeys = 'getKeys',
@@ -35,7 +36,7 @@ export const initApi = (nostrUrl: Ref<string>) => {
     registerEndpoint({
         id: Endpoints.GetKeys,
         method: 'GET',
-        path: () => `${nostrUrl.value}?type=getKeys`,
+        path: () => `${get(nostrUrl)}?type=getKeys`,
         onRequest: () => Promise.resolve(),
         onResponse: (response) => Promise.resolve(response)
     })
@@ -43,7 +44,7 @@ export const initApi = (nostrUrl: Ref<string>) => {
     registerEndpoint({
         id: Endpoints.DeleteKey,
         method: 'DELETE',
-        path: (key: NostrPubKey) => `${nostrUrl.value}?type=identity&key_id=${key.Id}`,
+        path: ([key]) => `${get(nostrUrl)}?type=identity&key_id=${key.Id}`,
         onRequest: () => Promise.resolve(),
         onResponse: (response: WebMessage) => response.getResultOrThrow()
     })
@@ -51,8 +52,8 @@ export const initApi = (nostrUrl: Ref<string>) => {
     registerEndpoint({
         id: Endpoints.SignEvent,
         method: 'POST',
-        path: () => `${nostrUrl.value}?type=signEvent`,
-        onRequest: (event: NostrEvent) => Promise.resolve(event),
+        path: () => `${get(nostrUrl)}?type=signEvent`,
+        onRequest: ([event]) => Promise.resolve(event),
         onResponse: async (response: WebMessage<NostrEvent>) => {
             return response.getResultOrThrow()
         }
@@ -61,7 +62,7 @@ export const initApi = (nostrUrl: Ref<string>) => {
     registerEndpoint({
         id: Endpoints.GetRelays,
         method: 'GET',
-        path: () => `${nostrUrl.value}?type=getRelays`,
+        path: () => `${get(nostrUrl)}?type=getRelays`,
         onRequest: () => Promise.resolve(),
         onResponse: (response) => Promise.resolve(response)
     })
@@ -69,8 +70,8 @@ export const initApi = (nostrUrl: Ref<string>) => {
     registerEndpoint({
         id: Endpoints.SetRelay,
         method: 'POST',
-        path: () => `${nostrUrl.value}?type=relay`,
-        onRequest: (relay: NostrRelay) => Promise.resolve(relay),
+        path: () => `${get(nostrUrl)}?type=relay`,
+        onRequest: ([relay]) => Promise.resolve(relay),
         onResponse: (response) => Promise.resolve(response)
     })
 
diff --git a/extension/src/entries/contentScript/primary/main.js b/extension/src/entries/contentScript/primary/main.js
index 24ef4ef..047d0e9 100644
--- a/extension/src/entries/contentScript/primary/main.js
+++ b/extension/src/entries/contentScript/primary/main.js
@@ -21,7 +21,7 @@ import Notification from '@kyvg/vue3-notification'
 import '@fontsource/noto-sans-masaram-gondi'
 
 //We need inline styles to inject into the shadow dom
-import tw from "~/assets/tailwind.scss?inline";
+import tw from "~/assets/all.scss?inline";
 import localStyle from './style.scss?inline'
 
 renderContent([], (appRoot, shadowRoot) => {
diff --git a/extension/src/entries/options/App.vue b/extension/src/entries/options/App.vue
index f22feb0..f55b73b 100644
--- a/extension/src/entries/options/App.vue
+++ b/extension/src/entries/options/App.vue
@@ -3,25 +3,25 @@
 
     <notifications class="toaster" group="form" position="top-right" />
 
-    <div class="container flex w-full p-4 mx-auto mt-8 text-gray-800 dark:text-gray-200">
+    <div class="container flex w-full p-4 mx-auto mt-8 text-black dark:text-white">
       <div class="w-full max-w-4xl mx-auto">
         <div class="">
-            <h3>NVault</h3>
+            <h2>NVault</h2>
         </div>
         <TabGroup :selected-index="selectedTab" @change="id => selectedTab = id" >
           <TabList class="flex gap-3 pb-2 border-b border-gray-300 dark:border-dark-500">
             <Tab v-slot="{ selected }">
-              <button class="border-b-2" :class="[selected ? 'border-primary-500' : 'border-transparent']">
+              <button class="tab-title" :class="{ selected }">
                 Identities
               </button>
             </Tab>
             <Tab v-slot="{ selected }">
-              <button class="border-b-2" :class="[selected ? 'border-primary-500' : 'border-transparent']">
+              <button class="tab-title" :class="{ selected }">
                 Privacy
               </button>
             </Tab>
             <Tab v-slot="{ selected }">
-              <button class="border-b-2" :class="[selected ? 'border-primary-500' : 'border-transparent']">
+              <button class="tab-title" :class="{ selected }">
                 Settings
               </button>
             </Tab>
@@ -82,7 +82,7 @@
                   <div class="flex flex-col w-full max-w-md mx-auto mt-3">
                     <div class="">
                       <div class="text-sm">User Name</div>
-                      <input class="w-full primary" type="text" v-model="keyBuffer.UserName"/>
+                      <input class="w-full input" type="text" v-model="keyBuffer.UserName"/>
                     </div>
                     <div class="gap-2 my-3 ml-auto">
                       <button class="rounded btn sm primary" @click="onUpdate">Update</button>
@@ -187,6 +187,14 @@ main {
   max-width: 230px;
 }
 
+.tab-title{
+  @apply border-b-2 border-transparent dark:text-gray-200;
+  
+  &.selected{
+    @apply dark:border-gray-200 border-black;
+  }
+}
+
 .id-card{
   @apply flex md:flex-row flex-col gap-2 p-3 text-sm duration-75 ease-in-out border-2 rounded-lg shadow-md cursor-pointer;
   @apply bg-white dark:bg-dark-700 border-gray-200 hover:border-gray-400 dark:border-dark-500 hover:dark:border-dark-200;
diff --git a/extension/src/entries/options/components/Identities.vue b/extension/src/entries/options/components/Identities.vue
index c86a6ac..d7fd75d 100644
--- a/extension/src/entries/options/components/Identities.vue
+++ b/extension/src/entries/options/components/Identities.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="sm:px-3">
-        <div class="flex justify-end gap-2">
+        <div class="flex justify-end gap-2 text-black dark:text-white">
              <div class="">
                 <div class="">
                     <button class="rounded btn sm" @click="onNip05Download">
@@ -11,24 +11,26 @@
             </div>
             <div class="mb-2">
                 <Popover class="relative" v-slot="{ open }">
-                    <PopoverButton class="rounded btn primary sm">Create</PopoverButton>
-                    <PopoverOverlay v-if="open" class="fixed inset-0 bg-black opacity-30" />
-                    <PopoverPanel class="absolute z-10 mt-2 md:-left-12" v-slot="{ close }">
-                        <div class="p-4 bg-white border border-gray-200 rounded-md shadow-lg dark:border-dark-300 dark:bg-dark-700">
-                            <div class="text-sm w-72">
+                    <PopoverButton class="rounded btn sm">Create</PopoverButton>
+                    <PopoverOverlay v-if="open" class="fixed inset-0 bg-black opacity-50" />
+                    <PopoverPanel class="absolute z-10 mt-2 md:-right-0" v-slot="{ close }">
+                        <div class="p-3 bg-white border border-gray-200 rounded shadow-lg dark:border-dark-600 dark:bg-dark-900">
+                            <div class="text-sm w-80">
                                 <form @submit.prevent="e => onCreate(e, close)">
-                                    Create new nostr identity
-                                    <div class="mt-2">
-                                        <input class="w-full primary" type="text" name="username" placeholder="User Name"/>
+                                    <span class="text-lg dark:text-gray-200">
+                                        Create keypair
+                                    </span>
+                                    <div class="mt-4">
+                                        <input class="w-full rounded input" type="text" name="username" placeholder="username"/>
                                     </div>
-                                    <div class="mt-2">
-                                        <input class="w-full primary" type="text" name="key" placeholder="Existing key?"/>
-                                        <div class="p-1.5 text-xs text-gray-600 dark:text-gray-300">
+                                    <div class="mt-3">
+                                        <input class="w-full rounded input" type="text" name="key" placeholder="Existing secret key?"/>
+                                        <div class="p-1.5 text-xs text-gray-600 dark:text-gray-400">
                                             Optional, hexadecimal private key (64 characters)
                                         </div>
                                     </div>
                                     <div class="flex justify-end mt-2">
-                                        <button class="rounded btn sm primary" type="submit">Create</button>
+                                        <button class="rounded sm btn" type="submit">Create</button>
                                     </div>
                                 </form>
                             </div>
@@ -38,47 +40,38 @@
             </div>
         </div>
         <div v-for="key in allKeys" :key="key" class="mt-2 mb-3">
-            <div class="id-card" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)">
+            <div class="" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)">
                 
-                <div class="flex flex-col min-w-0" @click="selectKey(key)">
-                    <div class="py-2">
-
-                        <table class="w-full text-sm text-left border-collapse">
-                            <thead class="">
-                                <tr>
-                                    <th scope="col" class="p-2 font-medium">Nip 05</th>
-                                    <th scope="col" class="p-2 font-medium">Modified</th>
-                                    <th scope="col" class="p-2 font-medium"></th>
-                                </tr>
-                            </thead>
-                            <tbody class="border-t border-gray-100 divide-y divide-gray-100 dark:border-dark-500 dark:divide-dark-500">
-                                <tr>
-                                    <th class="p-2 font-medium">{{ key.UserName }}</th>
-                                    <td class="p-2">{{ prettyPrintDate(key) }}</td>
-                                    <td class="flex justify-end p-2 ml-auto text-sm font-medium">
-                                        <div class="ml-auto button-group">
-                                            <button class="btn sm borderless" @click="copy(key.PublicKey)">
-                                                <fa-icon icon="copy"/>
-                                            </button>
-                                            <button class="btn sm borderless" @click="editKey(key)">
-                                                <fa-icon icon="edit"/>
-                                            </button>
-                                            <button class="btn sm red borderless" @click="onDeleteKey(key)">
-                                                <fa-icon icon="trash" />
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                        
-                    </div>
-                    <div class="py-2 overflow-hidden border-gray-500 border-y dark:border-dark-500 text-ellipsis">
-                        <span class="font-semibold">pub:</span>
-                        <span class="ml-1">{{ key.PublicKey }}</span> 
+                <div class="mb-8">
+                    <div class="cursor-pointer w-fit" @click="selectKey(key)">
+                        <h3 :class="[ isSelected(key) ? 'underline' : 'dark:hover:text-gray-300 hover:text-gray-700']" class="duration-100 ease-out">
+                           {{ key.UserName }}
+                        </h3>
                     </div>
-                    <div class="py-2">
-                        <strong>Id:</strong> {{ key.Id }}
+                    <div class="mt-3">
+                        <p class="text-xs text-gray-700 truncate dark:text-gray-300">
+                            {{ key.PublicKey }}
+                        </p>
+                        <div class="flex flex-row gap-3 mt-1 text-xs text-gray-600 dark:text-gray-500">
+                            <div class="">
+                                {{ prettyPrintDate(key) }}
+                            </div>
+                             <div class="">
+                                <button class="text-red-700" @click="onDeleteKey(key)">
+                                    Delete
+                                </button>
+                            </div>
+                            <div class="">
+                                <button class="" @click="editKey(key)">
+                                    Edit
+                                </button>
+                            </div>
+                            <div class="">
+                                <button class="" @click="copy(key.PublicKey)">
+                                    Copy
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -94,7 +87,8 @@ import { ref, toRefs } from "vue";
 import {
     Popover,
     PopoverButton,
-    PopoverPanel
+    PopoverPanel,
+    PopoverOverlay
 } from '@headlessui/vue'
 import { apiCall, configureNotifier } from '@vnuge/vnlib.browser';
 import { useManagment, useStatus } from '~/bg-api/options.ts';
diff --git a/extension/src/entries/options/components/SiteSettings.vue b/extension/src/entries/options/components/SiteSettings.vue
index eafe8f3..01d3eac 100644
--- a/extension/src/entries/options/components/SiteSettings.vue
+++ b/extension/src/entries/options/components/SiteSettings.vue
@@ -8,32 +8,51 @@
                 </h3>
                 <div class="my-6">
                     <fieldset :disabled="waiting">
-                        <div class="w-full">
-                            <div class="flex flex-row justify-between">
-                                <label class="mr-2">Always on NIP-07</label>
+                        <div class="">
+                            <div class="w-full">
+                                <div class="flex flex-row w-full">
+                                    <Switch
+                                        v-model="buffer.autoInject"
+                                        :class="buffer.autoInject ? 'bg-black dark:bg-gray-50' : 'bg-gray-200 dark:bg-dark-600'"
+                                        class="relative inline-flex items-center h-5 rounded-full w-11"
+                                    >
+                                        <span class="sr-only">NIP-07</span>
+                                        <span
+                                            :class="buffer.autoInject ? 'translate-x-6' : 'translate-x-1'"
+                                            class="inline-block w-4 h-4 transition transform bg-white rounded-full dark:bg-dark-900"
+                                        />
+                                    </Switch>
+                                    <div class="my-auto ml-2 text-sm dark:text-gray-200">
+                                       Always on NIP-07
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="mt-3">
+                            <div class="flex flex-row w-fit">
                                 <Switch
-                                    v-model="buffer.autoInject"
-                                    :class="buffer.autoInject ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'"
-                                    class="relative inline-flex items-center h-6 ml-auto rounded-full w-11"
+                                    v-model="v$.heartbeat.$model"
+                                    :class="v$.heartbeat.$model ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-dark-600'"
+                                    class="relative inline-flex items-center h-5 mx-auto rounded-full w-11"
                                 >
-                                    <span class="sr-only">NIP-07</span>
+                                    <span class="sr-only">Stay logged in</span>
                                     <span
-                                        :class="buffer.autoInject ? 'translate-x-6' : 'translate-x-1'"
-                                        class="inline-block w-4 h-4 transition transform bg-white rounded-full"
+                                        :class="v$.heartbeat.$model ? 'translate-x-6' : 'translate-x-1'"
+                                        class="inline-block w-4 h-4 transition transform rounded-full bg-gray-50 dark:bg-dark-900"
                                     />
                                 </Switch>
+                                <div class="my-auto ml-2 text-sm dark:text-gray-200">
+                                   Stay logged-in
+                                </div>
                             </div>
                         </div>
-                        <p class="mt-1 text-xs">
-                            Enable auto injection of <code>window.nostr</code> support to all websites. Sites may be able to 
-                            track you if you enable this feature.
-                        </p>
                     </fieldset>
                 </div>
                 <h3 class="text-center">
                     Server settings
                 </h3>
-                <p class="text-sm">
+                <p class="text-xs dark:text-gray-400">
                     You must be careful when editing these settings as you may loose connection to your vault
                     server if you input the wrong values.
                 </p>
@@ -52,43 +71,25 @@
                 </div>
                 <fieldset :disabled="waiting || !editMode">
                     <div class="pl-1 mt-2">
-                        <div class="flex flex-row w-full">
-                            <div>
-                                <label class="mb-2">Stay logged in</label>
-                                <Switch
-                                    v-model="v$.heartbeat.$model"
-                                    :class="v$.heartbeat.$model ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'"
-                                    class="relative inline-flex items-center h-6 mx-auto rounded-full w-11"
-                                >
-                                    <span class="sr-only">Stay logged in</span>
-                                    <span
-                                        :class="v$.heartbeat.$model ? 'translate-x-6' : 'translate-x-1'"
-                                        class="inline-block w-4 h-4 transition transform bg-white rounded-full"
-                                    />
-                                </Switch>
-                            </div>
-                            <div class="my-auto text-xs">
-                                Enables keepalive messages to regenerate credentials when they expire
-                            </div>
-                        </div>
+                        
                     </div>
                     <div class="mt-2">
                         <label class="pl-1">BaseUrl</label>
-                        <input class="w-full primary" v-model="v$.apiUrl.$model" :class="{'error': v$.apiUrl.$invalid }" />
+                        <input class="w-full input" v-model="v$.apiUrl.$model" :class="{'error': v$.apiUrl.$invalid }" />
                         <p class="pl-1 mt-1 text-xs text-red-500">
                             * The http path to the vault server (must start with http:// or https://)
                         </p>
                     </div>
                     <div class="mt-2">
                         <label class="pl-1">Account endpoint</label>
-                        <input class="w-full primary" v-model="v$.accountBasePath.$model" :class="{ 'error': v$.accountBasePath.$invalid }" />
+                        <input class="w-full input" v-model="v$.accountBasePath.$model" :class="{ 'error': v$.accountBasePath.$invalid }" />
                         <p class="pl-1 mt-1 text-xs text-red-500">
                             * This is the path to the account server endpoint (must start with /)
                         </p>
                     </div>
                     <div class="mt-2">
                         <label class="pl-1">Nostr endpoint</label>
-                        <input class="w-full primary" v-model="v$.nostrEndpoint.$model" :class="{ 'error': v$.nostrEndpoint.$invalid }" />
+                        <input class="w-full input" v-model="v$.nostrEndpoint.$model" :class="{ 'error': v$.nostrEndpoint.$invalid }" />
                         <p class="pl-1 mt-1 text-xs text-red-500">
                             * This is the path to the Nostr plugin endpoint path (must start with /)
                         </p>
@@ -155,6 +156,7 @@ const editMode = ref(false);
 const toggleEdit = useToggle(editMode);
 
 const autoInject = computed(() => buffer.autoInject)
+const heartbeat = computed(() => buffer.heartbeat)
 
 const onSave = async () => {
 
@@ -217,16 +219,20 @@ const testConnection = async () =>{
 const loadConfig = async () => {
     const config = await getSiteConfig();
     apply(config);
+}
+
+const init = async () => {
+    await loadConfig();
 
     //Watch for changes to autoinject value and publish changes when it does
-    watchDebounced(autoInject, publishConfig, { debounce: 500 })
+    watchDebounced(autoInject, publishConfig, { debounce: 500, immediate: false })
+    watchDebounced(heartbeat, publishConfig, { debounce: 500, immediate: false })
 }
 
 //If edit mode is toggled off, reload config
 watch(editMode, v => v ? null : loadConfig());
 
-
-loadConfig();
+init();
 
 </script>
 
diff --git a/extension/src/entries/options/index.html b/extension/src/entries/options/index.html
index 72f2de7..976e7ea 100644
--- a/extension/src/entries/options/index.html
+++ b/extension/src/entries/options/index.html
@@ -10,7 +10,7 @@
         @apply bg-dark-900;
       }
       body{
-        @apply bg-gray-50;
+        @apply bg-white;
       }
     </style>
   </head>
diff --git a/extension/src/entries/options/main.js b/extension/src/entries/options/main.js
index 92a4868..b9892ba 100644
--- a/extension/src/entries/options/main.js
+++ b/extension/src/entries/options/main.js
@@ -17,15 +17,15 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import '@fontsource/noto-sans-masaram-gondi'
-import "~/assets/tailwind.scss";
+import "~/assets/all.scss";
 import Notifications from "@kyvg/vue3-notification";
 
 /* FONT AWESOME CONFIG */
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faChevronLeft, faCopy, faDownload, faEdit, faExternalLinkAlt, faLock, faLockOpen, faMoon, faSun, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faChevronRight, faCopy, faDownload, faEdit, faExternalLinkAlt, faLock, faLockOpen, faMoon, faSun, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faCopy, faEdit, faChevronLeft, faMoon, faSun, faLock, faLockOpen, faExternalLinkAlt, faTrash, faDownload)
+library.add(faCopy, faEdit, faChevronLeft, faMoon, faSun, faLock, faLockOpen, faExternalLinkAlt, faTrash, faDownload, faChevronRight)
 
 createApp(App)
     .use(Notifications)
diff --git a/extension/src/entries/popup/Components/IdentitySelection.vue b/extension/src/entries/popup/Components/IdentitySelection.vue
index d95dedb..d1a7333 100644
--- a/extension/src/entries/popup/Components/IdentitySelection.vue
+++ b/extension/src/entries/popup/Components/IdentitySelection.vue
@@ -2,7 +2,7 @@
     <div class="px-3 text-left">
        <div class="w-full">
             <div class="">
-                <select class="w-full primary" 
+                <select class="w-full input" 
                 :disabled="waiting"
                 :value="selected?.Id"
                 @change.prevent="onSelected"
diff --git a/extension/src/entries/popup/Components/Login.vue b/extension/src/entries/popup/Components/Login.vue
index 495b64e..c863430 100644
--- a/extension/src/entries/popup/Components/Login.vue
+++ b/extension/src/entries/popup/Components/Login.vue
@@ -3,7 +3,7 @@
         <form class="" @submit.prevent="onSubmit">
             <fieldset class="px-4 input-container">
                 <label class="">Please enter your authentication token</label>
-                <textarea class="w-full primary" v-model="token" rows="5">
+                <textarea class="w-full input" v-model="token" rows="5">
                 </textarea>
             </fieldset>
             <div class="flex justify-end mt-2">
diff --git a/extension/src/entries/popup/Components/PageContent.vue b/extension/src/entries/popup/Components/PageContent.vue
index c9b2d5f..eda9bab 100644
--- a/extension/src/entries/popup/Components/PageContent.vue
+++ b/extension/src/entries/popup/Components/PageContent.vue
@@ -5,8 +5,8 @@
     >
       
       <div class="flex flex-row w-full px-1 pl-4">
-        <div class="flex-auto my-auto font-mono text-sm">
-          A nostr credential vault
+        <div class="flex-auto my-auto">
+          <h3>NVault</h3>
         </div>
         <div class="my-auto" v-if="loggedIn">
           <button class="rounded btn sm red" @click.prevent="logout">
diff --git a/extension/src/entries/popup/main.js b/extension/src/entries/popup/main.js
index d9101ab..4a32bb7 100644
--- a/extension/src/entries/popup/main.js
+++ b/extension/src/entries/popup/main.js
@@ -17,7 +17,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import Notifications from "@kyvg/vue3-notification";
 import '@fontsource/noto-sans-masaram-gondi'
-import "~/assets/tailwind.scss";
+import "~/assets/all.scss";
 
 /* FONT AWESOME CONFIG */
 import { library } from '@fortawesome/fontawesome-svg-core'
-- 
cgit