cherry-pick used icons from @tabler

2024-12-23 09:33:01 +03:00 · 2023-03-14 10:13:51 +01:00 · 2023-03-14 10:13:51 +01:00 · 31d04024cd
commit 31d04024cd
parent 9958730c2f
18 changed files with 221 additions and 61 deletions
--- a/package.json
+++ b/package.json
@ -38,7 +38,6 @@
 		"@replit/codemirror-lang-csharp": "^6.1.0",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@square/svelte-store": "^1.0.14",
-		"@tabler/icons-svelte": "^2.6.0",
 		"@tauri-apps/api": "^1.2.0",
 		"date-fns": "^2.29.3",
 		"diff": "^5.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -28,7 +28,6 @@ specifiers:
  '@square/svelte-store': ^1.0.14
  '@sveltejs/adapter-static': next
  '@sveltejs/kit': next
-  '@tabler/icons-svelte': ^2.6.0
  '@tauri-apps/api': ^1.2.0
  '@tauri-apps/cli': ^1.2.2
  '@types/diff': ^5.0.2
@ -64,7 +63,7 @@ dependencies:
  '@codemirror/autocomplete': 6.4.2_yom6siklgbeshd7shgtg2sdiku
  '@codemirror/commands': 6.2.0
  '@codemirror/lang-angular': github.com/codemirror/lang-angular/ee6151b55668b2941c71b0d1db9f5a526ef29710
-  '@codemirror/lang-css': github.com/codemirror/lang-css/2cde46bf378ae36413e7fca5e24a2606f3cdf840_nzpoxphwgc7witc3f5hdaoweju
+  '@codemirror/lang-css': github.com/codemirror/lang-css/6634d974af0f4275de9fdd86f9f1ff6d36d77154_nzpoxphwgc7witc3f5hdaoweju
  '@codemirror/lang-html': github.com/codemirror/lang-html/0420487e1ac04bfd59129c243e3b7b802ffca30c
  '@codemirror/lang-java': github.com/codemirror/lang-java/834c534e7d689b0d88c15e3af55b0ee551d985d2
  '@codemirror/lang-javascript': 6.1.4
@ -84,9 +83,8 @@ dependencies:
  '@lezer/lr': 1.3.3
  '@nextjournal/lang-clojure': 1.0.0
  '@replit/codemirror-lang-csharp': 6.1.0_dbd6aqsmfpystthdbxnrle4dwe
-  '@replit/codemirror-lang-svelte': 6.0.0_yycrqtt34ynecrgehdjoffcaie
+  '@replit/codemirror-lang-svelte': 6.0.0_zzhyj4jznormobdmwnw2yxfkk4
  '@square/svelte-store': 1.0.14
-  '@tabler/icons-svelte': 2.6.0_svelte@3.55.1
  '@tauri-apps/api': 1.2.0
  date-fns: 2.29.3
  diff: 5.1.0
@ -147,8 +145,8 @@ packages:
      '@lezer/common': 1.0.2
    dev: false

-  /@codemirror/lang-css/6.1.0_nzpoxphwgc7witc3f5hdaoweju:
-    resolution: {integrity: sha512-GYn4TyMvQLrkrhdisFh8HCTDAjPY/9pzwN12hG9UdrTUxRUMicF+8GS24sFEYaleaG1KZClIFLCj0Rol/WO24w==}
+  /@codemirror/lang-css/6.1.1_nzpoxphwgc7witc3f5hdaoweju:
+    resolution: {integrity: sha512-P6jdNEHyRcqqDgbvHYyC9Wxkek0rnG3a9aVSRi4a7WrjPbQtBTaOmvYpXmm13zZMAatO4Oqpac+0QZs7sy+LnQ==}
    dependencies:
      '@codemirror/autocomplete': 6.4.2_yom6siklgbeshd7shgtg2sdiku
      '@codemirror/language': 6.6.0
@ -163,7 +161,7 @@ packages:
    resolution: {integrity: sha512-bqCBASkteKySwtIbiV/WCtGnn/khLRbbiV5TE+d9S9eQJD7BA4c5dTRm2b3bVmSpilff5EYxvB4PQaZzM/7cNw==}
    dependencies:
      '@codemirror/autocomplete': 6.4.2_yom6siklgbeshd7shgtg2sdiku
-      '@codemirror/lang-css': 6.1.0_nzpoxphwgc7witc3f5hdaoweju
+      '@codemirror/lang-css': 6.1.1_nzpoxphwgc7witc3f5hdaoweju
      '@codemirror/lang-javascript': 6.1.4
      '@codemirror/language': 6.6.0
      '@codemirror/state': 6.2.0
@ -612,7 +610,7 @@ packages:
      '@lezer/lr': 1.3.3
    dev: false

-  /@replit/codemirror-lang-svelte/6.0.0_yycrqtt34ynecrgehdjoffcaie:
+  /@replit/codemirror-lang-svelte/6.0.0_zzhyj4jznormobdmwnw2yxfkk4:
    resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
    peerDependencies:
      '@codemirror/autocomplete': ^6.0.0
@ -628,7 +626,7 @@ packages:
      '@lezer/lr': ^1.0.0
    dependencies:
      '@codemirror/autocomplete': 6.4.2_yom6siklgbeshd7shgtg2sdiku
-      '@codemirror/lang-css': github.com/codemirror/lang-css/2cde46bf378ae36413e7fca5e24a2606f3cdf840_nzpoxphwgc7witc3f5hdaoweju
+      '@codemirror/lang-css': github.com/codemirror/lang-css/6634d974af0f4275de9fdd86f9f1ff6d36d77154_nzpoxphwgc7witc3f5hdaoweju
      '@codemirror/lang-html': github.com/codemirror/lang-html/0420487e1ac04bfd59129c243e3b7b802ffca30c
      '@codemirror/lang-javascript': 6.1.4
      '@codemirror/language': 6.6.0
@ -702,19 +700,6 @@ packages:
      - supports-color
    dev: true

-  /@tabler/icons-svelte/2.6.0_svelte@3.55.1:
-    resolution: {integrity: sha512-ehUpaAO15KtWP9RCGJI5UDFiHgH8HvmjjD4dGpPPhvb0/Yhb8sWfob181Wq95mCCXPa4e8rRebks5vXZh9c01Q==}
-    peerDependencies:
-      svelte: ^3.49.0
-    dependencies:
-      '@tabler/icons': 2.6.0
-      svelte: 3.55.1
-    dev: false
-
-  /@tabler/icons/2.6.0:
-    resolution: {integrity: sha512-rflJyQSsu2iV6QgrA7ZdGaikSTdIVpXlem0jBIcx18OKg0ZJmLojmrhNo7DpOW7bCT4Hr2r6jcpq8uSYrinqZw==}
-    dev: false
-
  /@tauri-apps/api/1.2.0:
    resolution: {integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==}
    engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
@ -3257,11 +3242,11 @@ packages:
      '@lezer/highlight': 1.1.3
    dev: false

-  github.com/codemirror/lang-css/2cde46bf378ae36413e7fca5e24a2606f3cdf840_nzpoxphwgc7witc3f5hdaoweju:
-    resolution: {tarball: https://codeload.github.com/codemirror/lang-css/tar.gz/2cde46bf378ae36413e7fca5e24a2606f3cdf840}
-    id: github.com/codemirror/lang-css/2cde46bf378ae36413e7fca5e24a2606f3cdf840
+  github.com/codemirror/lang-css/6634d974af0f4275de9fdd86f9f1ff6d36d77154_nzpoxphwgc7witc3f5hdaoweju:
+    resolution: {tarball: https://codeload.github.com/codemirror/lang-css/tar.gz/6634d974af0f4275de9fdd86f9f1ff6d36d77154}
+    id: github.com/codemirror/lang-css/6634d974af0f4275de9fdd86f9f1ff6d36d77154
    name: '@codemirror/lang-css'
-    version: 6.1.0
+    version: 6.1.1
    prepare: true
    requiresBuild: true
    dependencies:
@ -3282,7 +3267,7 @@ packages:
    requiresBuild: true
    dependencies:
      '@codemirror/autocomplete': 6.4.2_yom6siklgbeshd7shgtg2sdiku
-      '@codemirror/lang-css': 6.1.0_nzpoxphwgc7witc3f5hdaoweju
+      '@codemirror/lang-css': 6.1.1_nzpoxphwgc7witc3f5hdaoweju
      '@codemirror/lang-javascript': 6.1.4
      '@codemirror/language': 6.6.0
      '@codemirror/state': 6.2.0
--- a/src/app.html
+++ b/src/app.html
@ -6,7 +6,10 @@
 		%sveltekit.head%
 	</head>

-	<body class="fixed h-full w-full bg-zinc-800 font-sans text-base antialiased" style="background: linear-gradient(152.08deg, #27272A 17.75%, #19191F 99.04%)">
+	<body
+		class="fixed h-full w-full bg-zinc-800 font-sans text-base antialiased"
+		style="background: linear-gradient(152.08deg, #27272a 17.75%, #19191f 99.04%)"
+	>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/lib/components/icons/IconCircleFilled.svelte
+++ b/src/lib/components/icons/IconCircleFilled.svelte
@ -0,0 +1,19 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path
+		d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z"
+		stroke-width="0"
+		fill="currentColor"
+	/>
+</svg>
--- a/src/lib/components/icons/IconCircleHalf.svelte
+++ b/src/lib/components/icons/IconCircleHalf.svelte
@ -0,0 +1,19 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+	<path d="M12 3v18" />
+	<path d="M12 14l7 -7" />
+	<path d="M12 19l8.5 -8.5" />
+	<path d="M12 9l4.5 -4.5" />
+</svg>
--- a/src/lib/components/icons/IconMapPinFilled.svelte
+++ b/src/lib/components/icons/IconMapPinFilled.svelte
@ -0,0 +1,19 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path
+		d="M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .21l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"
+		stroke-width="0"
+		fill="currentColor"
+	/>
+</svg>
--- a/src/lib/components/icons/IconPlayerPauseFilled.svelte
+++ b/src/lib/components/icons/IconPlayerPauseFilled.svelte
@ -0,0 +1,24 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path
+		d="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z"
+		stroke-width="0"
+		fill="currentColor"
+	/>
+	<path
+		d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z"
+		stroke-width="0"
+		fill="currentColor"
+	/>
+</svg>
--- a/src/lib/components/icons/IconPlayerPlayFilled.svelte
+++ b/src/lib/components/icons/IconPlayerPlayFilled.svelte
@ -0,0 +1,19 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path
+		d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z"
+		stroke-width="0"
+		fill="currentColor"
+	/>
+</svg>
--- a/src/lib/components/icons/IconRotateClockwise.svelte
+++ b/src/lib/components/icons/IconRotateClockwise.svelte
@ -0,0 +1,20 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+	<path d="M5.63 7.16l0 .01" />
+	<path d="M4.06 11l0 .01" />
+	<path d="M4.63 15.1l0 .01" />
+	<path d="M7.16 18.37l0 .01" />
+	<path d="M11 19.94l0 .01" />
+</svg>
--- a/src/lib/components/icons/IconSquareRoundedFilled.svelte
+++ b/src/lib/components/icons/IconSquareRoundedFilled.svelte
@ -0,0 +1,19 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path
+		d="M12 2c-.218 0 -.432 .002 -.642 .005l-.616 .017l-.299 .013l-.579 .034l-.553 .046c-4.785 .464 -6.732 2.411 -7.196 7.196l-.046 .553l-.034 .579c-.005 .098 -.01 .198 -.013 .299l-.017 .616l-.004 .318l-.001 .324c0 .218 .002 .432 .005 .642l.017 .616l.013 .299l.034 .579l.046 .553c.464 4.785 2.411 6.732 7.196 7.196l.553 .046l.579 .034c.098 .005 .198 .01 .299 .013l.616 .017l.642 .005l.642 -.005l.616 -.017l.299 -.013l.579 -.034l.553 -.046c4.785 -.464 6.732 -2.411 7.196 -7.196l.046 -.553l.034 -.579c.005 -.098 .01 -.198 .013 -.299l.017 -.616l.005 -.642l-.005 -.642l-.017 -.616l-.013 -.299l-.034 -.579l-.046 -.553c-.464 -4.785 -2.411 -6.732 -7.196 -7.196l-.553 -.046l-.579 -.034a28.058 28.058 0 0 0 -.299 -.013l-.616 -.017l-.318 -.004l-.324 -.001z"
+		stroke-width="0"
+		fill="currentColor"
+	/>
+</svg>
--- a/src/lib/components/icons/index.ts
+++ b/src/lib/components/icons/index.ts
@ -0,0 +1,15 @@
+export { default as BookmarkIcon } from './BookmarkIcon.svelte';
+export { default as BranchIcon } from './BranchIcon.svelte';
+export { default as CommitIcon } from './CommitIcon.svelte';
+export { default as ContactIcon } from './ContactIcon.svelte';
+export { default as FileIcon } from './FileIcon.svelte';
+export { default as FolderIcon } from './FolderIcon.svelte';
+export { default as LabelIcon } from './LabelIcon.svelte';
+export { default as ProjectIcon } from './ProjectIcon.svelte';
+export { default as IconRotateClockwise } from './IconRotateClockwise.svelte';
+export { default as IconPlayerPauseFilled } from './IconPlayerPauseFilled.svelte';
+export { default as IconPlayerPlayFilled } from './IconPlayerPlayFilled.svelte';
+export { default as IconCircleHalf } from './IconCircleHalf.svelte';
+export { default as IconSquareRoundedFilled } from './IconSquareRoundedFilled.svelte';
+export { default as IconMapPinFilled } from './IconMapPinFilled.svelte';
+export { default as IconCircleFilled } from './IconCircleFilled.svelte';
--- a/src/lib/components/timeline/TimelineDaySessionActivities.svelte
+++ b/src/lib/components/timeline/TimelineDaySessionActivities.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { Activity } from '$lib/sessions';
 	import {
-		IconCircleHalf2,
+		IconCircleHalf,
 		IconMapPinFilled,
 		IconSquareRoundedFilled,
 		IconCircleFilled
-	} from '@tabler/icons-svelte';
+	} from '$lib/components/icons';

 	export let activities: Activity[];
 	export let sessionStart: number;
@ -42,7 +42,7 @@
 					{:else if activity.type.startsWith('merge')}
 						<IconMapPinFilled class="h-3 w-3 text-green-500 hover:text-green-600" />
 					{:else if activity.type.startsWith('rebase')}
-						<IconCircleHalf2 class="h-3 w-3 text-orange-500 hover:text-orange-600" />
+						<IconCircleHalf class="h-3 w-3 text-orange-500 hover:text-orange-600" />
 					{:else if activity.type.startsWith('push')}
 						<IconCircleFilled class="h-3 w-3 text-purple-500 hover:text-purple-600" />
 					{/if}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -188,7 +188,9 @@
 											</div>
 										</div>

-										<div class="flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 font-mono text-sm text-zinc-300">
+										<div
+											class="flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 font-mono text-sm text-zinc-300"
+										>
 											{#if project.api}
 												<div class="flex flex-row items-center space-x-2 ">
 													<div class="h-2 w-2 rounded-full bg-green-600" />
--- a/src/routes/projects/[projectId]/+layout.svelte
+++ b/src/routes/projects/[projectId]/+layout.svelte
@ -37,10 +37,18 @@
 	>
 		<div class="flex flex-row items-center space-x-2">
 			<form action="/projects/{$project?.id}/search" method="GET">
-				<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
+				<label
+					for="default-search"
+					class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white">Search</label
+				>
 				<div class="relative">
-					<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-						<svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 12a4 4 0 110-8 4 4 0 010 8zm9.707 4.293l-4.82-4.82A5.968 5.968 0 0014 8 6 6 0 002 8a6 6 0 006 6 5.968 5.968 0 003.473-1.113l4.82 4.82a.997.997 0 001.414 0 .999.999 0 000-1.414z" fill="#5C5F62"/></svg>
+					<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+						<svg class="mr-2 h-5 w-5" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+							><path
+								d="M8 12a4 4 0 110-8 4 4 0 010 8zm9.707 4.293l-4.82-4.82A5.968 5.968 0 0014 8 6 6 0 002 8a6 6 0 006 6 5.968 5.968 0 003.473-1.113l4.82 4.82a.997.997 0 001.414 0 .999.999 0 000-1.414z"
+								fill="#5C5F62"
+							/></svg
+						>
 					</div>
 					<div class="flex w-48 max-w-lg rounded-md shadow-sm">
 						<input
@ -50,10 +58,12 @@
 							placeholder="search"
 							autocomplete="off"
 							aria-label="Search input"
-							class="block p-[3px] px-2 rounded w-full min-w-0 flex-1 placeholder:text-zinc-500  text-zinc-200 sm:text-sm sm:leading-6 bg-zinc-800 pl-10 border border-zinc-700"
+							class="block w-full min-w-0 flex-1 rounded border border-zinc-700 bg-zinc-800  p-[3px] px-2 pl-10 text-zinc-200 placeholder:text-zinc-500 sm:text-sm sm:leading-6"
 							style=""
 						/>
-						<div class="absolute right-1 top-1 inline-flex items-center rounded border bg-zinc-700/50 border-zinc-700/20 px-1 py-[2px] text-gray-400 sm:text-sm shadow">
+						<div
+							class="absolute right-1 top-1 inline-flex items-center rounded border border-zinc-700/20 bg-zinc-700/50 px-1 py-[2px] text-gray-400 shadow sm:text-sm"
+						>
 							&#8984;K
 						</div>
 					</div>
@ -116,14 +126,12 @@
 		</ul>
 	</nav>

-	<div class="project-container flex-auto overflow-y-auto h-100">
+	<div class="project-container h-100 flex-auto overflow-y-auto">
 		<slot />
 	</div>

 	<footer class="w-full text-sm font-medium">
-		<div
-			class="flex h-8 flex-shrink-0 select-none items-center border-t border-zinc-700"
-		>
+		<div class="flex h-8 flex-shrink-0 select-none items-center border-t border-zinc-700">
 			<div class="mx-4 flex w-full flex-row items-center justify-between space-x-2">
 				{#if $project?.api?.sync}
 					<a href="/projects/{$project?.id}/settings" class="text-zinc-400 hover:text-zinc-300">
--- a/src/routes/projects/[projectId]/player/+page.svelte
+++ b/src/routes/projects/[projectId]/player/+page.svelte
@ -3,7 +3,7 @@
 	import { listFiles } from '$lib/sessions';
 	import { type Delta, list as listDeltas } from '$lib/deltas';
 	import { CodeViewer } from '$lib/components';
-	import { IconPlayerPauseFilled, IconPlayerPlayFilled } from '@tabler/icons-svelte';
+	import { IconPlayerPauseFilled, IconPlayerPlayFilled } from '$lib/components/icons';
 	import slider from '$lib/slider';
 	import { onMount } from 'svelte';

@ -172,7 +172,10 @@
 				<h2 class="px-4 py-2 text-xl text-zinc-300">{frame.filepath}</h2>
 			</header>

-			<div class="project-container flex-auto overflow-y-auto overflow-x-hidden" style="height: calc(100vh - 270px)">
+			<div
+				class="project-container flex-auto overflow-y-auto overflow-x-hidden"
+				style="height: calc(100vh - 270px)"
+			>
 				<CodeViewer filepath={frame.filepath} doc={frame.doc} deltas={frame.deltas} />
 			</div>
 		{/if}
--- a/src/routes/projects/[projectId]/settings/+page.svelte
+++ b/src/routes/projects/[projectId]/settings/+page.svelte
@ -3,7 +3,7 @@
 	import { Login } from '$lib/components';
 	import type { PageData } from './$types';
 	import { log, toasts } from '$lib';
-	import { IconRotateClockwise2 } from '@tabler/icons-svelte';
+	import { IconRotateClockwise } from '$lib/components/icons';

 	export let data: PageData;
 	const { project, user, api } = data;
@ -190,7 +190,7 @@
 						<div
 							class="w-content flex w-32 flex-row items-center justify-center gap-1 rounded bg-blue-400 py-2 px-3 text-white"
 						>
-							<IconRotateClockwise2 class="h-5 w-5 animate-spin" />
+							<IconRotateClockwise class="h-5 w-5 animate-spin" />
 							<span>Updating...</span>
 						</div>
 					{:else}
--- a/src/routes/projects/[projectId]/timeline/+page.svelte
+++ b/src/routes/projects/[projectId]/timeline/+page.svelte
@ -157,32 +157,38 @@
 				class="session-day-component flex flex-col rounded-lg border border-zinc-700 bg-[#2F2F33]"
 				class:min-w-full={selection.dateMilliseconds == +dateMilliseconds}
 			>
-				<div class="session-day-container flex justify-between items-center border-b border-zinc-700 bg-zinc-700/30 py-2 px-4 font-medium">
+				<div
+					class="session-day-container flex items-center justify-between border-b border-zinc-700 bg-zinc-700/30 py-2 px-4 font-medium"
+				>
 					<div class="session-day-header font-bold text-zinc-200">
 						{formatDate(new Date(+dateMilliseconds))}
 					</div>
 					<div class="session-forward-back-controls flex gap-1">
-						<div class="button-next group px-1 py-1 bg-zinc-600 border-1 border-zinc-700 rounded shadow hover:bg-zinc-500 hover:border-zinc-600">
+						<div
+							class="button-next border-1 group rounded border-zinc-700 bg-zinc-600 px-1 py-1 shadow hover:border-zinc-600 hover:bg-zinc-500"
+						>
 							<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="h-4 w-4">
-								<path 
-									fill-rule="evenodd" 
-									clip-rule="evenodd" 
-									d="M9.6 12.8C9.3952 12.8 9.1904 12.7216 9.0344 12.5656L5.0344 8.56563C4.7216 8.25283 4.7216 7.74723 5.0344 7.43443L9.0344 3.43443C9.3472 3.12163 9.8528 3.12163 10.1656 3.43443C10.4784 3.74723 10.4784 4.25283 10.1656 4.56563L6.7312 8.00003L10.1656 11.4344C10.4784 11.7472 10.4784 12.2528 10.1656 12.5656C10.0096 12.7216 9.8048 12.8 9.6 12.8Z" 
+								<path
+									fill-rule="evenodd"
+									clip-rule="evenodd"
+									d="M9.6 12.8C9.3952 12.8 9.1904 12.7216 9.0344 12.5656L5.0344 8.56563C4.7216 8.25283 4.7216 7.74723 5.0344 7.43443L9.0344 3.43443C9.3472 3.12163 9.8528 3.12163 10.1656 3.43443C10.4784 3.74723 10.4784 4.25283 10.1656 4.56563L6.7312 8.00003L10.1656 11.4344C10.4784 11.7472 10.4784 12.2528 10.1656 12.5656C10.0096 12.7216 9.8048 12.8 9.6 12.8Z"
 									fill="none"
 									class="fill-zinc-400 group-hover:fill-zinc-300"
 								/>
-							</svg>	
+							</svg>
 						</div>
-						<div class="button-previous group px-1 py-1 bg-zinc-600 border-1 border-zinc-700 rounded shadow hover:bg-zinc-500 hover:border-zinc-600">
+						<div
+							class="button-previous border-1 group rounded border-zinc-700 bg-zinc-600 px-1 py-1 shadow hover:border-zinc-600 hover:bg-zinc-500"
+						>
 							<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="h-4 w-4">
-								<path 
-									fill-rule="evenodd" 
-									clip-rule="evenodd" 
-									d="M6.40005 12.8C6.19525 12.8 5.99045 12.7216 5.83445 12.5656C5.52165 12.2528 5.52165 11.7472 5.83445 11.4344L9.26885 8.00003L5.83445 4.56563C5.52165 4.25283 5.52165 3.74723 5.83445 3.43443C6.14725 3.12163 6.65285 3.12163 6.96565 3.43443L10.9657 7.43443C11.2785 7.74723 11.2785 8.25283 10.9657 8.56563L6.96565 12.5656C6.80965 12.7216 6.60485 12.8 6.40005 12.8Z" 
+								<path
+									fill-rule="evenodd"
+									clip-rule="evenodd"
+									d="M6.40005 12.8C6.19525 12.8 5.99045 12.7216 5.83445 12.5656C5.52165 12.2528 5.52165 11.7472 5.83445 11.4344L9.26885 8.00003L5.83445 4.56563C5.52165 4.25283 5.52165 3.74723 5.83445 3.43443C6.14725 3.12163 6.65285 3.12163 6.96565 3.43443L10.9657 7.43443C11.2785 7.74723 11.2785 8.25283 10.9657 8.56563L6.96565 12.5656C6.80965 12.7216 6.60485 12.8 6.40005 12.8Z"
 									fill="none"
 									class="fill-zinc-400 group-hover:fill-zinc-300"
 								/>
-							</svg>	
+							</svg>
 						</div>
 					</div>
 				</div>
--- a/src/routes/users/+page.svelte
+++ b/src/routes/users/+page.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Login } from '$lib/components';
 	import type { PageData } from './$types';
-	import { IconRotateClockwise2 } from '@tabler/icons-svelte';
+	import { IconRotateClockwise } from '$lib/components/icons';
 	import { log, toasts } from '$lib';

 	export let data: PageData;
@ -100,7 +100,7 @@
 								<div
 									class="w-content flex w-32 flex-row items-center justify-center gap-1 rounded bg-blue-600 px-4 py-2 text-white"
 								>
-									<IconRotateClockwise2 class="h-5 w-5 animate-spin" />
+									<IconRotateClockwise class="h-5 w-5 animate-spin" />
 									<span>Updating...</span>
 								</div>
 							{:else}