diff --git a/ui/index.html b/ui/index.html index dd8c80d..bbd0494 100644 --- a/ui/index.html +++ b/ui/index.html @@ -8,9 +8,8 @@ - - +
diff --git a/ui/src/App.vue b/ui/src/App.vue index f5028ed..b98632d 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -1,3 +1,41 @@ + + - diff --git a/ui/src/component/Notify.vue b/ui/src/component/Notify.vue index 3a2f628..cacb206 100644 --- a/ui/src/component/Notify.vue +++ b/ui/src/component/Notify.vue @@ -1,5 +1,5 @@ + + diff --git a/ui/src/store/notifications.ts b/ui/src/store/notifications-store.ts similarity index 100% rename from ui/src/store/notifications.ts rename to ui/src/store/notifications-store.ts diff --git a/ui/src/store/theme-store.ts b/ui/src/store/theme-store.ts new file mode 100644 index 0000000..a31006d --- /dev/null +++ b/ui/src/store/theme-store.ts @@ -0,0 +1,33 @@ +import { defineStore } from "pinia"; +import { computed, ref } from "vue"; + +export enum Theme { + Bumblebee = 'bumblebee', + Luxury = 'luxury' +} + +export const useThemeStore = defineStore('theme', () => { + const theme = ref(Theme.Bumblebee) + + const stored = localStorage.getItem('theme') + if (stored) { + console.log('recover from stored', stored) + theme.value = stored as Theme + } + + const setTheme = (newTheme: Theme) => { + console.log('do set theme', newTheme) + theme.value = newTheme + localStorage.setItem('theme', newTheme) + } + + const isDefault = computed(() => { + return theme.value === Theme.Bumblebee + }) + + return { + theme, + setTheme, + isDefault, + } +}) diff --git a/ui/src/style.css b/ui/src/style.css index b062e05..b5c61c9 100644 --- a/ui/src/style.css +++ b/ui/src/style.css @@ -1,86 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - --mdc-theme-primary: #7B1FA2; - --mdc-theme-secondary: #FF5722; -} - -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/ui/src/trusted/trusted/SearchKeys.vue b/ui/src/trusted/trusted/SearchKeys.vue index 2ed2c23..143a3be 100644 --- a/ui/src/trusted/trusted/SearchKeys.vue +++ b/ui/src/trusted/trusted/SearchKeys.vue @@ -3,7 +3,8 @@ import { AppAgentClient, Record } from '@holochain/client'; import { ComputedRef, inject, ref } from 'vue'; import { GpgKeyDist, SearchKeysRequest } from './types'; import { decode } from '@msgpack/msgpack'; -import { useNotificationsStore } from '../../store/notifications'; +import { useNotificationsStore } from '../../store/notifications-store'; +import { useMyKeysStore } from '../../store/my-keys-store'; const searchQuery = ref(''); const searching = ref(false) @@ -12,6 +13,7 @@ const results = ref([]); const client = inject('client') as ComputedRef; const notifications = useNotificationsStore(); +const myKeysStore = useMyKeysStore(); const searchKeys = async () => { if (!client.value || searching.value) return; @@ -45,23 +47,53 @@ const searchKeys = async () => { } } +const isMine = (keyDist: GpgKeyDist) => { + return myKeysStore.myKeys.some((r) => r.fingerprint === keyDist.fingerprint); +} + diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 6c419fb..ae98768 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -8,4 +8,8 @@ export default { extend: {}, }, plugins: [require('daisyui')], + daisyui: { + themes: ['bumblebee', 'luxury'], + darkTheme: 'luxury', + }, }