Skip to content
Snippets Groups Projects
Unverified Commit 432671d1 authored by Mateusz Tyszczak's avatar Mateusz Tyszczak :scroll:
Browse files

Add color scheme detection

parent 3038f2a2
No related branches found
No related tags found
No related merge requests found
Pipeline #117938 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 31 additions and 21 deletions
index.html
+ 1
− 1
View file @ 432671d1
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hive Bridge</title> <title>Hive Bridge</title>
</head> </head>
<body class="dark"> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
......
src/App.vue
+ 10
− 1
View file @ 432671d1
...@@ -17,6 +17,15 @@ onMounted(() => { ...@@ -17,6 +17,15 @@ onMounted(() => {
hasUser.value = settingsStore.settings.account !== undefined; hasUser.value = settingsStore.settings.account !== undefined;
if (hasUser.value) if (hasUser.value)
void walletStore.createWalletFor(settingsStore.settings); void walletStore.createWalletFor(settingsStore.settings);
if (window.matchMedia) {
const media = window.matchMedia('(prefers-color-scheme: dark)');
if (media.matches)
document.documentElement.classList.add('dark');
media.addEventListener('change', event => {
document.documentElement.classList[event.matches ? 'add' : 'remove']('dark');
});
}
}); });
const complete = (data: { account: string; wallet: UsedWallet }) => { const complete = (data: { account: string; wallet: UsedWallet }) => {
hasUser.value = true; hasUser.value = true;
...@@ -35,7 +44,7 @@ const complete = (data: { account: string; wallet: UsedWallet }) => { ...@@ -35,7 +44,7 @@ const complete = (data: { account: string; wallet: UsedWallet }) => {
<SidebarProvider> <SidebarProvider>
<AppSidebar/> <AppSidebar/>
<!-- <AppHeader/> --> <!-- <AppHeader/> -->
<main class="w-full"> <main class="w-full bg-background">
<ToggleSidebar class="m-3" /> <ToggleSidebar class="m-3" />
<RouterView /> <RouterView />
</main> </main>
......
src/components/sidebar/AppSidebar.vue
+ 5
− 5
View file @ 432671d1
...@@ -49,7 +49,7 @@ const items = [ ...@@ -49,7 +49,7 @@ const items = [
<template> <template>
<Sidebar> <Sidebar>
<SidebarHeader class="pb-0"> <SidebarHeader class="pb-0">
<div class="flex items-center rounded-lg p-2 mt-1 mx-1 bg-black/40 border" v-if="settingsStore.isLoaded && hasUser"> <div class="flex items-center rounded-lg p-2 mt-1 mx-1 bg-background/40 border" v-if="settingsStore.isLoaded && hasUser">
<Avatar class="w-8 h-8 mr-2"> <Avatar class="w-8 h-8 mr-2">
<AvatarImage src="https://github.com/unovue.png" alt="@unovue" /> <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
<AvatarFallback>{{ settingsStore.settings.account?.slice(0, 2) }}</AvatarFallback> <AvatarFallback>{{ settingsStore.settings.account?.slice(0, 2) }}</AvatarFallback>
...@@ -59,14 +59,14 @@ const items = [ ...@@ -59,14 +59,14 @@ const items = [
</SidebarHeader> </SidebarHeader>
<SidebarContent> <SidebarContent>
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel>Hive Bridge</SidebarGroupLabel> <SidebarGroupLabel class="text-foreground/60">Hive Bridge</SidebarGroupLabel>
<SidebarGroupContent> <SidebarGroupContent>
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title"> <SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<RouterLink @click="isMobile && toggleSidebar()" :to="item.url"> <RouterLink @click="isMobile && toggleSidebar()" :to="item.url">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsl(var(--foreground))" :d="item.icon"/></svg> <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsl(var(--foreground))" :d="item.icon"/></svg>
<span>{{item.title}}</span> <span class="text-foreground/80">{{item.title}}</span>
</RouterLink> </RouterLink>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
...@@ -75,7 +75,7 @@ const items = [ ...@@ -75,7 +75,7 @@ const items = [
</SidebarGroup> </SidebarGroup>
</SidebarContent> </SidebarContent>
<SidebarFooter> <SidebarFooter>
<Button class="bg-black/40" variant="outline" v-if="settingsStore.isLoaded && hasUser" @click="logout"> <Button class="bg-background/40" variant="outline" v-if="settingsStore.isLoaded && hasUser" @click="logout">
<img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" /> <img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" />
<span class="font-bold">Disconnect</span> <span class="font-bold">Disconnect</span>
</Button> </Button>
...@@ -86,6 +86,6 @@ const items = [ ...@@ -86,6 +86,6 @@ const items = [
<style> <style>
[data-sidebar="sidebar"] { [data-sidebar="sidebar"] {
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background-color: rgba(0, 0, 0, 0.4); background-color: hsla(var(--background) / 70%);
} }
</style> </style>
src/components/ui/sidebar/index.ts
+ 1
− 1
View file @ 432671d1
...@@ -40,7 +40,7 @@ export const sidebarMenuButtonVariants = cva( ...@@ -40,7 +40,7 @@ export const sidebarMenuButtonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground', default: 'hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground',
outline: outline:
'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]', 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
}, },
......
src/components/utilcards/AuthorityCard.vue
+ 1
− 1
View file @ 432671d1
...@@ -40,7 +40,7 @@ onMounted(() => { ...@@ -40,7 +40,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm"> <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader> <CardHeader>
<CardTitle class="inline-flex items-center justify-between"> <CardTitle class="inline-flex items-center justify-between">
<span>Authority info</span> <span>Authority info</span>
......
src/components/utilcards/ConfirmAccountUpdateCard.vue
+ 1
− 1
View file @ 432671d1
...@@ -65,7 +65,7 @@ const updateAuthority = async() => { ...@@ -65,7 +65,7 @@ const updateAuthority = async() => {
</script> </script>
<template> <template>
<Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm"> <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader> <CardHeader>
<CardTitle class="inline-flex items-center justify-between"> <CardTitle class="inline-flex items-center justify-between">
<span>Process Authority Update</span> <span>Process Authority Update</span>
......
src/components/utilcards/ConfirmCreateAccountCard.vue
+ 1
− 1
View file @ 432671d1
...@@ -117,7 +117,7 @@ const createAccount = async() => { ...@@ -117,7 +117,7 @@ const createAccount = async() => {
</script> </script>
<template> <template>
<Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm"> <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader> <CardHeader>
<CardTitle class="inline-flex items-center justify-between"> <CardTitle class="inline-flex items-center justify-between">
<span>Process Account Creation</span> <span>Process Account Creation</span>
......
src/components/utilcards/MemoEncryptCard.vue
+ 1
− 1
View file @ 432671d1
...@@ -65,7 +65,7 @@ const encryptOrDecrypt = async () => { ...@@ -65,7 +65,7 @@ const encryptOrDecrypt = async () => {
</script> </script>
<template> <template>
<Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm"> <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader> <CardHeader>
<CardTitle class="inline-flex items-center justify-between"> <CardTitle class="inline-flex items-center justify-between">
<span>Memo encryption</span> <span>Memo encryption</span>
......
src/components/utilcards/SignTransactionCard.vue
+ 1
− 1
View file @ 432671d1
...@@ -84,7 +84,7 @@ onMounted(() => { ...@@ -84,7 +84,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm"> <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader> <CardHeader>
<CardTitle class="inline-flex items-center justify-between"> <CardTitle class="inline-flex items-center justify-between">
<span>Transaction signing</span> <span>Transaction signing</span>
......
src/style.css
+ 9
− 8
View file @ 432671d1
...@@ -21,15 +21,14 @@ ...@@ -21,15 +21,14 @@
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
--input: 240 5.9% 90%; --input: 240 5.9% 60%;
--ring: 240 10% 3.9%; --ring: 240 10% 3.9%;
--chart-1: 12 76% 61%; --chart-1: 12 76% 61%;
--chart-2: 173 58% 39%; --chart-2: 173 58% 39%;
--chart-3: 197 37% 24%; --chart-3: 197 37% 24%;
--chart-4: 43 74% 66%; --chart-4: 43 74% 66%;
--chart-5: 27 87% 67%; --chart-5: 27 87% 67%;
--radius: 0.5rem --radius: 0.5rem;
;
--sidebar-background: 0 0% 98%; --sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%; --sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%; --sidebar-primary: 240 5.9% 10%;
...@@ -37,7 +36,9 @@ ...@@ -37,7 +36,9 @@
--sidebar-accent: 240 4.8% 95.9%; --sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%; --sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%; --sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%} --sidebar-ring: 217.2 91.2% 59.8%
}
.dark { .dark {
--background: 240 10% 3.9%; --background: 240 10% 3.9%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
...@@ -56,14 +57,13 @@ ...@@ -56,14 +57,13 @@
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%; --input: 240 3.7% 45.9%;
--ring: 240 4.9% 83.9%; --ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%; --chart-1: 220 70% 50%;
--chart-2: 160 60% 45%; --chart-2: 160 60% 45%;
--chart-3: 30 80% 55%; --chart-3: 30 80% 55%;
--chart-4: 280 65% 60%; --chart-4: 280 65% 60%;
--chart-5: 340 75% 55% --chart-5: 340 75% 55%;
;
--sidebar-background: 240 5.9% 10%; --sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%; --sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%; --sidebar-primary: 224.3 76.3% 48%;
...@@ -71,7 +71,8 @@ ...@@ -71,7 +71,8 @@
--sidebar-accent: 240 3.7% 15.9%; --sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%; --sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%} --sidebar-ring: 217.2 91.2% 59.8%
}
} }
@layer base { @layer base {
* { * {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment