Use same font family and sizing as Linear

This commit is contained in:
Kiril Videlov 2023-02-23 13:25:39 +01:00
parent 35a3a0194d
commit c162567b6e
15 changed files with 54 additions and 36 deletions

View File

@ -18,14 +18,15 @@
"@codemirror/view": "^6.7.3", "@codemirror/view": "^6.7.3",
"@tauri-apps/api": "^1.2.0", "@tauri-apps/api": "^1.2.0",
"date-fns": "^2.29.3", "date-fns": "^2.29.3",
"fluent-svelte": "^1.6.0",
"idb-keyval": "^6.2.0", "idb-keyval": "^6.2.0",
"inter-ui": "^3.19.3",
"mm-jsr": "^3.0.2", "mm-jsr": "^3.0.2",
"nanoid": "^4.0.1", "nanoid": "^4.0.1",
"posthog-js": "^1.46.1", "posthog-js": "^1.46.1",
"seti-icons": "^0.0.4", "seti-icons": "^0.0.4",
"svelte-icons": "^2.1.0", "svelte-icons": "^2.1.0",
"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log", "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log"
"fluent-svelte": "^1.6.0"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-static": "next", "@sveltejs/adapter-static": "next",

View File

@ -19,6 +19,7 @@ specifiers:
eslint-plugin-unicorn: ^45.0.2 eslint-plugin-unicorn: ^45.0.2
fluent-svelte: ^1.6.0 fluent-svelte: ^1.6.0
idb-keyval: ^6.2.0 idb-keyval: ^6.2.0
inter-ui: ^3.19.3
mm-jsr: ^3.0.2 mm-jsr: ^3.0.2
nanoid: ^4.0.1 nanoid: ^4.0.1
postcss: ^8.4.14 postcss: ^8.4.14
@ -47,6 +48,7 @@ dependencies:
date-fns: 2.29.3 date-fns: 2.29.3
fluent-svelte: 1.6.0 fluent-svelte: 1.6.0
idb-keyval: 6.2.0 idb-keyval: 6.2.0
inter-ui: 3.19.3
mm-jsr: 3.0.2 mm-jsr: 3.0.2
nanoid: 4.0.1 nanoid: 4.0.1
posthog-js: 1.46.1 posthog-js: 1.46.1
@ -1665,6 +1667,10 @@ packages:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
dev: true dev: true
/inter-ui/3.19.3:
resolution: {integrity: sha512-5FG9fjuYOXocIfjzcCBhICL5cpvwEetseL3FU6tP3d6Bn7g8wODhB+I9RNGRTizCT7CUG4GOK54OPxqq3msQgg==}
dev: false
/internal-slot/1.0.5: /internal-slot/1.0.5:
resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==} resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}

View File

@ -7,7 +7,7 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body class="fixed h-full w-full overflow-hidden font-sans antialiased"> <body class="fixed h-full w-full overflow-hidden font-sans antialiased text-base">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

View File

@ -1,3 +1,4 @@
@import "inter-ui/inter.css";
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

View File

@ -11,7 +11,7 @@
export let session: Session | undefined; export let session: Session | undefined;
</script> </script>
<div id="session-nav" class="grid grid-cols-3 gap-6 text-sm"> <div id="session-nav" class="grid grid-cols-3 gap-6">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
{#if previousSesssion} {#if previousSesssion}
<a <a

View File

@ -17,7 +17,7 @@
<div class="font-bold text-zinc-300"> <div class="font-bold text-zinc-300">
{toHumanBranchName(session.meta.branch)} {toHumanBranchName(session.meta.branch)}
</div> </div>
<div class="mt-1 text-xs"> <div class="mt-1">
<span> <span>
{#if session.meta.startTimestampMs} {#if session.meta.startTimestampMs}
{toHumanReadableTime(session.meta.startTimestampMs)} {toHumanReadableTime(session.meta.startTimestampMs)}

View File

@ -80,10 +80,10 @@
/> />
</div> </div>
</div> </div>
<div id="time-range" class="text-xs"> <div id="time-range" class="">
{toHumanReadableDate(session.meta.startTimestampMs)}, {toHumanReadableDate(session.meta.startTimestampMs)},
{toHumanReadableTime(session.meta.startTimestampMs)} {toHumanReadableTime(session.meta.startTimestampMs)}
<div class="text-xs text-zinc-600"> <div class=" text-zinc-600">
{Math.round( {Math.round(
(session.meta.lastTimestampMs - session.meta.startTimestampMs) / (session.meta.lastTimestampMs - session.meta.startTimestampMs) /
60 60
@ -97,7 +97,7 @@
<div class="w-6 h-6 text-white fill-blue-400"> <div class="w-6 h-6 text-white fill-blue-400">
{@html pathToIconSvg(delta)} {@html pathToIconSvg(delta)}
</div> </div>
<div class="text-xs text-white w-24 truncate"> <div class="text-white w-24 truncate">
{pathToName(delta)} {pathToName(delta)}
</div> </div>
</div> </div>

View File

@ -41,7 +41,7 @@
<a <a
{href} {href}
title={startTime.toLocaleTimeString()} title={startTime.toLocaleTimeString()}
class="group absolute inset-1 flex flex-col items-center justify-center rounded-lg bg-zinc-300 p-3 text-xs leading-5 hover:bg-zinc-200 shadow" class="group absolute inset-1 flex flex-col items-center justify-center rounded-lg bg-zinc-300 p-3 leading-5 hover:bg-zinc-200 shadow"
> >
<p class="order-1 font-semibold text-zinc-800"> <p class="order-1 font-semibold text-zinc-800">
{toHumanBranchName(label)} {toHumanBranchName(label)}

View File

@ -18,7 +18,7 @@
<header <header
data-tauri-drag-region data-tauri-drag-region
class="sticky top-0 z-50 flex flex-row items-center h-8 overflow-hidden text-sm border-b select-none text-zinc-400 border-zinc-700 bg-zinc-900 " class="sticky top-0 z-50 flex flex-row items-center h-8 overflow-hidden border-b select-none text-zinc-400 border-zinc-700 bg-zinc-900 "
> >
<div class="ml-24"> <div class="ml-24">
<BackForwardButtons /> <BackForwardButtons />
@ -38,7 +38,7 @@
<!-- <div <!-- <div
class="flex items-center flex-shrink-0 h-6 border-t select-none border-zinc-700 bg-zinc-900 " class="flex items-center flex-shrink-0 h-6 border-t select-none border-zinc-700 bg-zinc-900 "
> >
<div class="flex flex-row items-center ml-4 space-x-2 text-xs"> <div class="flex flex-row items-center ml-4 space-x-2">
<div class="w-2 h-2 bg-green-700 rounded-full" /> <div class="w-2 h-2 bg-green-700 rounded-full" />
<div>Up to date</div> <div>Up to date</div>
</div> </div>

View File

@ -94,14 +94,14 @@
class="flex items-center flex-shrink-0 h-6 border-t select-none border-zinc-700 bg-zinc-900 " class="flex items-center flex-shrink-0 h-6 border-t select-none border-zinc-700 bg-zinc-900 "
> >
<div <div
class="flex flex-row mx-4 items-center space-x-2 text-xs justify-between w-full" class="flex flex-row mx-4 items-center space-x-2 justify-between w-full"
> >
{#if $project?.api?.sync} {#if $project?.api?.sync}
<a <a
href="/projects/{$project?.id}/settings" href="/projects/{$project?.id}/settings"
class="text-zinc-400 hover:text-zinc-300" class="text-zinc-400 hover:text-zinc-300"
> >
<div class="flex flex-row items-center space-x-2 text-xs"> <div class="flex flex-row items-center space-x-2 ">
<div class="w-2 h-2 bg-green-700 rounded-full" /> <div class="w-2 h-2 bg-green-700 rounded-full" />
<div class="text-zinc-200">Syncing</div> <div class="text-zinc-200">Syncing</div>
</div> </div>
@ -114,7 +114,7 @@
href="/projects/{$project?.id}/settings" href="/projects/{$project?.id}/settings"
class="text-zinc-400 hover:text-zinc-300" class="text-zinc-400 hover:text-zinc-300"
> >
<div class="flex flex-row items-center space-x-2 text-xs"> <div class="flex flex-row items-center space-x-2 ">
<div class="w-2 h-2 bg-red-700 rounded-full" /> <div class="w-2 h-2 bg-red-700 rounded-full" />
<div class="text-zinc-200">Offline</div> <div class="text-zinc-200">Offline</div>
</div> </div>

View File

@ -136,7 +136,7 @@
<div <div
class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5 mb-1" class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5 mb-1"
> >
<div class="grid-cols-11 -mr-px text-sm border-zinc-700 grid"> <div class="grid-cols-11 -mr-px border-zinc-700 grid">
<div /> <div />
<div <div
class="col-span-2 flex items-center justify-center py-2" class="col-span-2 flex items-center justify-center py-2"
@ -196,7 +196,7 @@
: ''}" : ''}"
> >
<button <button
class="z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5 class="z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 leading-5
{selectedFileIdx == i {selectedFileIdx == i
? 'text-zinc-200 cursor-default' ? 'text-zinc-200 cursor-default'
: 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}" : 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}"
@ -250,7 +250,7 @@
)} / span 1;" )} / span 1;"
> >
<button <button
class="z-20 h-full flex flex-col w-full items-center justify-center text-xs " class="z-20 h-full flex flex-col w-full items-center justify-center"
on:click={() => { on:click={() => {
value = timeStampToCol( value = timeStampToCol(
new Date(delta.timestampMs) new Date(delta.timestampMs)

View File

@ -44,7 +44,7 @@
<div class="flex flex-col text-zinc-100 space-y-6"> <div class="flex flex-col text-zinc-100 space-y-6">
<div class="space-y-0"> <div class="space-y-0">
<div class="text-lg font-medium">Project Settings</div> <div class="text-lg font-medium">Project Settings</div>
<div class="text-sm text-zinc-400"> <div class="text-zinc-400">
Manage your project settings for <strong Manage your project settings for <strong
>{$project?.title}</strong >{$project?.title}</strong
> >
@ -79,7 +79,7 @@
Git Host Git Host
</div> </div>
<div <div
class="text-sm text-zinc-400 font-mono" class="text-zinc-400 font-mono"
> >
{hostname($project?.api?.git_url)} {hostname($project?.api?.git_url)}
</div> </div>
@ -87,7 +87,7 @@
Repository ID Repository ID
</div> </div>
<div <div
class="text-sm text-zinc-400 font-mono" class="text-zinc-400 font-mono"
> >
{repo_id($project?.api?.git_url)} {repo_id($project?.api?.git_url)}
</div> </div>
@ -115,7 +115,7 @@
<div class="space-y-2"> <div class="space-y-2">
<div class="flex flex-row space-x-2 items-end"> <div class="flex flex-row space-x-2 items-end">
<div class="">GitButler Cloud</div> <div class="">GitButler Cloud</div>
<div class="text-xs text-zinc-400"> <div class="text-zinc-400">
backup your work and access advanced features backup your work and access advanced features
</div> </div>
</div> </div>
@ -126,7 +126,7 @@
{/if} {/if}
<div class="space-y-2"> <div class="space-y-2">
<div class="ml-1">Path</div> <div class="ml-1">Path</div>
<div class="text-sm text-zinc-400 font-mono"> <div class="text-zinc-400 font-mono">
{$project?.path} {$project?.path}
</div> </div>
</div> </div>

View File

@ -65,7 +65,7 @@
class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5 pr-8" class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5 pr-8"
> >
<div <div
class="grid-cols-7 -mr-px text-sm leading-6 border-r border-zinc-700 divide-x divide-zinc-700 grid" class="grid-cols-7 -mr-px leading-6 border-r border-zinc-700 divide-x divide-zinc-700 grid"
> >
<div class="col-end-1 w-14" /> <div class="col-end-1 w-14" />
<div class="flex items-center justify-center py-3"> <div class="flex items-center justify-center py-3">
@ -139,7 +139,7 @@
<div class="row-end-1 h-7" /> <div class="row-end-1 h-7" />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
12AM 12AM
</div> </div>
@ -147,7 +147,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
2AM 2AM
</div> </div>
@ -155,7 +155,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
4AM 4AM
</div> </div>
@ -163,7 +163,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
6AM 6AM
</div> </div>
@ -171,7 +171,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
8AM 8AM
</div> </div>
@ -179,7 +179,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
10AM 10AM
</div> </div>
@ -187,7 +187,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
12PM 12PM
</div> </div>
@ -195,7 +195,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
2PM 2PM
</div> </div>
@ -203,7 +203,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
4PM 4PM
</div> </div>
@ -211,7 +211,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
6PM 6PM
</div> </div>
@ -219,7 +219,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
8PM 8PM
</div> </div>
@ -227,7 +227,7 @@
<div /> <div />
<div> <div>
<div <div
class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-500" class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right leading-5 text-zinc-500"
> >
10PM 10PM
</div> </div>

View File

@ -107,7 +107,7 @@
<div class="mt-8 text-center"> <div class="mt-8 text-center">
<Login {user} {api} /> <Login {user} {api} />
</div> </div>
<div class="text-sm text-zinc-300 text-center"> <div class="text-zinc-300 text-center">
You will still need to give us permission for each project You will still need to give us permission for each project
before we transfer any data to our servers. You can revoke before we transfer any data to our servers. You can revoke
this permission at any time. this permission at any time.

View File

@ -3,6 +3,16 @@ const config = {
darkMode: "class", darkMode: "class",
theme: { theme: {
fontFamily: {
sans: ["Inter", "SF Pro", "-apple-system", "system-ui"],
},
fontSize: {
xs: "10px",
sm: "12px",
base: "13px",
lg: "15px",
xl: "22px",
},
extend: {}, extend: {},
}, },