Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APP]: Dark mode #2412

Merged
merged 18 commits into from
Jul 16, 2024
Merged

[APP]: Dark mode #2412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9ebef94
feat(app): save progress
Swepool Jul 4, 2024
98d8b7c
feat(app): change cube color depending on theme
Swepool Jul 12, 2024
8fc5130
chore(app): format
Swepool Jul 12, 2024
115f3bd
fix(app): adjust colors
Swepool Jul 15, 2024
2815a50
fix(app): adjust text color
Swepool Jul 15, 2024
dcaf121
fix(app): adjust input color
Swepool Jul 15, 2024
3af28f5
fix(app): remove color on dark
Swepool Jul 15, 2024
00ff7e0
feat(app): add theme toggle
Swepool Jul 16, 2024
197f2f3
fix(app): fix text color
Swepool Jul 16, 2024
f7dd7c7
fix(app): change button size
Swepool Jul 16, 2024
f623603
fix(app): pass theme to render correct color
Swepool Jul 16, 2024
358b909
chore(app): pre commit
Swepool Jul 16, 2024
3cc710c
fix(app): add guard
Swepool Jul 16, 2024
f624be8
fix(app): handle undefined
Swepool Jul 16, 2024
d17c6b7
chore(app): lint
Swepool Jul 16, 2024
15414a7
fix(app): set default and disable glow
Swepool Jul 16, 2024
d9ac2f1
fix(app): dialog hover color
Swepool Jul 16, 2024
a7c5bcb
fix(app): text color
Swepool Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-theme="light" class="light scroll-smooth max-h-screen touch-none overflow-hidden">
<html lang="en" class="scroll-smooth max-h-screen touch-none overflow-hidden">

<head>
<meta charset="utf-8" />
Expand Down
21 changes: 17 additions & 4 deletions app/src/lib/components/connect/connect.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.
import { Switch } from "$lib/components/ui/switch"
import { Label } from "$lib/components/ui/label"
import { showUnsupported } from "$lib/stores/user.ts"
import Sun from "virtual:icons/lucide/sun"
import Moon from "virtual:icons/lucide/moon"
import { toggleMode } from "mode-watcher"

let buttonText: string

Expand Down Expand Up @@ -93,11 +96,21 @@ $: if ($navigating) sheetOpen = false
onConnectClick={cosmosStore.connect}
onDisconnectClick={cosmosStore.disconnect}
/>
<div class="flex items-center space-x-2 mt-auto">
<Switch bind:checked={$showUnsupported} id="unsupported-assets"/>
<Label for="unsupported-assets">Show unverified assets</Label>
<div class="mt-auto flex justify-between">
<div class="flex items-center space-x-2">
<Switch bind:checked={$showUnsupported} id="unsupported-assets"/>
<Label for="unsupported-assets">Show unverified assets</Label>
</div>
<Button on:click={toggleMode} variant="default" size="icon" class="hover:text-black hover:bg-accent">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
</div>
<ThemeSwitch/>
</Sheet.Content>
</Sheet.Root>

2 changes: 1 addition & 1 deletion app/src/lib/components/connect/connection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ let metamaskAlertDialogOpen = false
"capitalize justify-start h-12 text-lg ring-0 focus:ring-0 ring-transparent",
connectStatus === "connected" && connectedWalletId === id && "border-border",
(connectStatus === "disconnected" || connectStatus == undefined) &&
"opacity-75 hover:opacity-100",
"opacity-75 hover:opacity-100 dark:hover:text-black",
hoverState === "hover" &&
connectedWalletId === id &&
"hover:text-destructive border-destructive hover:bg-transparent",
Expand Down
6 changes: 3 additions & 3 deletions app/src/lib/components/footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,19 @@ let buttons = [
'flex flex-col text-xs gap-px h-16 w-full',
isCurrentPage(button.href)
? 'bg-foreground text-primary-foreground hover:bg-foreground hover:text-primary-foreground'
: 'bg-transparent',
: 'bg-transparent dark:hover:text-black',
)}
>
<svelte:component
this={button.icon}
class="size-7 min-w-6 dark:hover:text-white text-zinc-accent"
class="size-7 min-w-6 text-zinc-accent"
/>
<div>{button.displayName}</div>
</Button>
{/each}

<Button
class="flex flex-col text-xs gap-px h-16 w-full"
class="flex flex-col text-xs gap-px h-16 w-full dark:hover:text-black"
size="icon"
name="wallet"
type="button"
Expand Down
4 changes: 2 additions & 2 deletions app/src/lib/components/header/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { routes } from "$lib/components/navigation/index.ts"

<header
class={cn(
'p-2.5 min-w-full w-screen flex flex-row items-center md:gap-4 z-10',
'dark:bg-muted p-2.5 min-w-full w-screen flex flex-row items-center md:gap-4 z-10',
'bg-card flex md:justify-start justify-between border-b border-solid',
)}
>
Expand All @@ -29,7 +29,7 @@ import { routes } from "$lib/components/navigation/index.ts"
{#each Object.entries(routes) as [name, { draft, path }], index (name)}
{@const currentRoute = $page.route.id?.split('/')[1] === path.split('/').at(1)}
<Button
size="default"
size="sm"
href={path}
variant="link"
class={cn(
Expand Down
247 changes: 125 additions & 122 deletions app/src/lib/components/spinning-outline-logo-three.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,130 @@
<script lang="ts">
import * as THREE from 'three';
import Square from './spinning-logo/square.svelte';
import { onMount } from 'svelte';
import { createCube } from '$lib/three/cube';

let cubeWidth = 128;
let gap = 64;
let cubeCount = 16;
// let cubeWidth = 128;
// let gap = 80;
// let cubeCount = 16;
let logoWidth = cubeWidth * cubeCount + gap * (cubeCount - 1);
let cubesY = cubeWidth * 2 + gap;
$: cubeDelta = (20 - cubeWidth) / 2;
let strokeWidth = 2.5;

let threeContainer: HTMLElement;
let threeCanvas: HTMLCanvasElement;


onMount(() => {
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: threeCanvas, alpha: true });
const devicePixelRatio = window.devicePixelRatio || 1;
renderer.setPixelRatio(devicePixelRatio);
renderer.setClearColor(0x000000, 0);

const camera = new THREE.PerspectiveCamera(20, 2, 1, 4000);

const startCameraZ = cubeWidth * 5;
const sideCameraOffset = cubeWidth * 3;

camera.position.z = startCameraZ;

let cubes: Array<THREE.Group> = [];
for (let x = 0; x < cubeCount; x++) {
const cube = createCube(cubeWidth, strokeWidth);
cube.position.z = 0;
cube.position.x = (x * (cubeWidth + gap));
cube.rotation.x = x * ((Math.PI/2)/cubeCount);
cubes.push(cube);
scene.add(cube);
}

function resizeCanvasToDisplaySize() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;

if (canvas.width !== width || canvas.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}

const clock = new THREE.Clock();

// start with going through the cubes
let animationState: "SLIDING_RIGHT" | "ROTATING_RIGHT" | "SLIDING_LEFT" | "ROTATING_LEFT" = "SLIDING_LEFT";
camera.rotation.y = Math.PI/2;
camera.position.z = 0;
camera.position.x = logoWidth + sideCameraOffset;

function animate(time: number) {
const secs = clock.getDelta() * 0.65;

resizeCanvasToDisplaySize();

if (animationState === "SLIDING_RIGHT") {
camera.position.x += (secs * 150);
if (camera.position.x >= logoWidth + sideCameraOffset) {
animationState = "ROTATING_RIGHT";
}
}
else if (animationState === "ROTATING_RIGHT") {
const rotating = camera.rotation.y < Math.PI/2;
const translating = camera.position.z > 0;
if (!rotating && !translating) {
animationState = "SLIDING_LEFT";
}
if (rotating) {
camera.rotation.y += secs * 0.4
}
if (translating) {
camera.position.z -= secs * 160;
}
}
else if (animationState === "SLIDING_LEFT") {
if (camera.position.x > -sideCameraOffset) {
camera.position.x -= (secs * 150);
} else {
animationState = "ROTATING_LEFT";
}
}

else if (animationState === "ROTATING_LEFT") {
const rotating = camera.rotation.y > 0;
const translating = camera.position.z < startCameraZ;
if (!rotating && !translating) {
animationState = "SLIDING_RIGHT";
}
if (rotating) {
camera.rotation.y -= secs * 4.00
}
if (translating) {
camera.position.z += secs * 400;
}
}

cubes.forEach((cube, index) => {cube.rotation.x += secs * -2 * (((cubeCount - index) + 1)/(cubeCount + 1))})

renderer.render(scene, camera);
requestAnimationFrame(animate);
// console.log(clock.elapsedTime);
}

requestAnimationFrame(animate);
});
<script lang="ts">
import * as THREE from "three"
import Square from "./spinning-logo/square.svelte"
import { onMount } from "svelte"
import { createCube } from "$lib/three/cube"
import { mode, userPrefersMode } from "mode-watcher"
import { browser } from "$app/environment"

let cubeWidth = 128
let gap = 64
let cubeCount = 16
// let cubeWidth = 128;
// let gap = 80;
// let cubeCount = 16;
let logoWidth = cubeWidth * cubeCount + gap * (cubeCount - 1)
let cubesY = cubeWidth * 2 + gap
$: cubeDelta = (20 - cubeWidth) / 2
let strokeWidth = 2.5

let threeContainer: HTMLElement
let threeCanvas: HTMLCanvasElement

const render = (mode: string | undefined) => {
if (!browser) return
const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: threeCanvas, alpha: true })
const devicePixelRatio = window.devicePixelRatio || 1
renderer.setPixelRatio(devicePixelRatio)
renderer.setClearColor(0x000000, 0)

const camera = new THREE.PerspectiveCamera(20, 2, 1, 4000)

const startCameraZ = cubeWidth * 5
const sideCameraOffset = cubeWidth * 3

camera.position.z = startCameraZ

let cubes: Array<THREE.Group> = []
for (let x = 0; x < cubeCount; x++) {
const cube = createCube(cubeWidth, strokeWidth, mode)
cube.position.z = 0
cube.position.x = x * (cubeWidth + gap)
cube.rotation.x = x * (Math.PI / 2 / cubeCount)
cubes.push(cube)
scene.add(cube)
}

function resizeCanvasToDisplaySize() {
const canvas = renderer.domElement
const width = canvas.clientWidth
const height = canvas.clientHeight

if (canvas.width !== width || canvas.height !== height) {
renderer.setSize(width, height, false)
camera.aspect = width / height
camera.updateProjectionMatrix()
}
}

const clock = new THREE.Clock()

// start with going through the cubes
let animationState: "SLIDING_RIGHT" | "ROTATING_RIGHT" | "SLIDING_LEFT" | "ROTATING_LEFT" =
"SLIDING_LEFT"
camera.rotation.y = Math.PI / 2
camera.position.z = 0
camera.position.x = logoWidth + sideCameraOffset

function animate(time: number) {
const secs = clock.getDelta() * 0.65

resizeCanvasToDisplaySize()

if (animationState === "SLIDING_RIGHT") {
camera.position.x += secs * 150
if (camera.position.x >= logoWidth + sideCameraOffset) {
animationState = "ROTATING_RIGHT"
}
} else if (animationState === "ROTATING_RIGHT") {
const rotating = camera.rotation.y < Math.PI / 2
const translating = camera.position.z > 0
if (!(rotating && translating)) {
animationState = "SLIDING_LEFT"
}
if (rotating) {
camera.rotation.y += secs * 0.4
}
if (translating) {
camera.position.z -= secs * 160
}
} else if (animationState === "SLIDING_LEFT") {
if (camera.position.x > -sideCameraOffset) {
camera.position.x -= secs * 150
} else {
animationState = "ROTATING_LEFT"
}
} else if (animationState === "ROTATING_LEFT") {
const rotating = camera.rotation.y > 0
const translating = camera.position.z < startCameraZ
if (!(rotating || translating)) {
animationState = "SLIDING_RIGHT"
}
if (rotating) {
camera.rotation.y -= secs * 4.0
}
if (translating) {
camera.position.z += secs * 400
}
}

cubes.forEach((cube, index) => {
cube.rotation.x += secs * -2 * ((cubeCount - index + 1) / (cubeCount + 1))
})

renderer.render(scene, camera)
requestAnimationFrame(animate)
// console.log(clock.elapsedTime);
}
requestAnimationFrame(animate)
}

onMount(() => render($mode))
$: render($mode)
</script>

<div class="relative flex-1">
<div class="absolute size-full" bind:this={threeContainer}>
<canvas class="size-full" bind:this={threeCanvas}></canvas>
<div bind:this={threeContainer} class="absolute size-full">
<canvas bind:this={threeCanvas} class="size-full"></canvas>
</div>
</div>
1 change: 1 addition & 0 deletions app/src/lib/components/stats-bar-stat.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,4 @@ function formatValue(value: number | string): string {
100% { @apply text-primary; }
}
</style>

13 changes: 11 additions & 2 deletions app/src/lib/components/stepper.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ const cancel = () => {
<li class="flex gap-4 w-full">
<div class="flex flex-col items-center">
<!-- top step connector !-->
<div class={cn("w-1 flex-1", index !== 0 ? "bg-black" : "")}></div>
<div class={cn(
"w-1 flex-1",
index !== 0 ? "dark:bg-muted-foreground bg-black" : "",
index !== 0 ? "dark:bg-muted-foreground bg-black" : "",
)}></div>
<!-- stepper icon !-->
<div class={cn(
"size-12 border-4 relative transition-all duration-300",
Expand All @@ -53,7 +57,12 @@ const cancel = () => {
{/if}
</div>
<!-- bottom step connector !-->
<div class={cn("w-1 flex-1", index !== $steps.length - 1 && step.status !== "ERROR" && step.status !== "WARNING" ? "bg-black" : "")}></div>
<div class={cn("w-1 flex-1",
index === $stepsUpToError.length - 1 ? "bg-transparent" : "dark:bg-muted-foreground",
index !== $steps.length - 1 &&
step.status !== "ERROR" &&
step.status !== "WARNING" ? "bg-black" : "")
}></div>
</div>
<div class="font-bold py-4 flex flex-col min-h-[80px] max-w-[calc(100%-80px)] break-words justify-center">
{#if step.traceDetails}
Expand Down
3 changes: 2 additions & 1 deletion app/src/lib/components/ui/button/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ const buttonVariants = tv({
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 uppercase font-semibold",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:hover:text-black",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground font-sans ",
link: "text-primary no-underline hover:no-underline font-supermolot font-bold text-md decoration-transparent uppercase rounded-none border-solid"
Expand Down
2 changes: 1 addition & 1 deletion app/src/lib/components/ui/card/card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export { className as class }
</script>

<div
class={cn('border bg-card text-card-foreground shadow-sm', className)}
class={cn('border bg-card text-card-foreground shadow-sm dark:bg-muted', className)}
{...$$restProps}
>
<slot />
Expand Down
Loading
Loading