Visual updates on Project page and added Mono font to project

This commit is contained in:
Ian Donahue 2023-03-10 16:19:38 +01:00
parent d4fc6d8441
commit 9fadfbfa2d
5 changed files with 20 additions and 19 deletions

View File

@ -177,12 +177,12 @@
<div class="text-lg text-zinc-300 hover:text-zinc-200"> <div class="text-lg text-zinc-300 hover:text-zinc-200">
{project.title} {project.title}
</div> </div>
<div class="font-mono break-words text-zinc-500"> <div class="font-mono text-base break-words text-zinc-500">
{project.path} {project.path}
</div> </div>
</div> </div>
<div <div
class="font-mono flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 text-zinc-500" class="font-mono flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 text-zinc-300"
> >
{#if project.api} {#if project.api}
<div class="flex flex-row items-center space-x-2 "> <div class="flex flex-row items-center space-x-2 ">

View File

@ -120,7 +120,7 @@
</h1> </h1>
<div class="mt-4 grid grid-cols-3"> <div class="mt-4 grid grid-cols-3">
<div class="col-span-2 pr-6"> <div class="col-span-2 pr-6">
<h2 class="mb-4 text-lg font-bold text-zinc-500">Recent File Changes</h2> <h2 class="mb-4 text-lg font-bold text-zinc-300">Recent File Changes</h2>
{#if $dateSessions === undefined} {#if $dateSessions === undefined}
<span>Loading...</span> <span>Loading...</span>
{:else} {:else}
@ -150,14 +150,14 @@
</div> </div>
<div class="col-span-1 space-y-6"> <div class="col-span-1 space-y-6">
<div> <div>
<h2 class="mb-2 text-lg font-bold text-zinc-500">Work in Progress</h2> <h2 class="mb-2 text-lg font-bold text-zinc-300">Work in Progress</h2>
{#if $filesStatus.length == 0} {#if $filesStatus.length == 0}
<div class="rounded bg-green-900 p-4 text-green-500">Everything is committed</div> <div class="rounded bg-green-900 p-4 text-green-500 borer-green-800">Everything is committed</div>
{:else} {:else}
<div class="rounded bg-blue-900 p-4"> <div class="rounded bg-yellow-500 p-4 text-yellow-900 border border-yellow-600 font-mono">
<ul class=""> <ul class="pl-4">
{#each $filesStatus as activity} {#each $filesStatus as activity}
<li> <li class="list-disc ">
{activity.status.slice(0, 1)} {activity.status.slice(0, 1)}
{shortPath(activity.path)} {shortPath(activity.path)}
</li> </li>
@ -168,11 +168,11 @@
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-zinc-500">Recent Activity</h2> <h2 class="text-lg font-bold text-zinc-300">Recent Activity</h2>
{#each recentActivity($dateSessions) as activity} {#each recentActivity($dateSessions) as activity}
<div class="mt-4 mb-1 text-zinc-400"> <div class="recent-activity-card mt-4 mb-1 text-zinc-400 border border-zinc-700 rounded">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-row justify-between rounded-t bg-zinc-700 p-2"> <div class="flex flex-row justify-between rounded-t bg-[#2F2F33] p-2">
<div class="text-zinc-300"> <div class="text-zinc-300">
{new Date(parseInt(activity.timestampMs)).toLocaleDateString('en-us', { {new Date(parseInt(activity.timestampMs)).toLocaleDateString('en-us', {
weekday: 'long', weekday: 'long',
@ -181,9 +181,9 @@
day: 'numeric' day: 'numeric'
})} })}
</div> </div>
<div>{activity.type}</div> <div class="font-mono text-right">{activity.type}</div>
</div> </div>
<div class="rounded-b bg-zinc-600 p-2">{activity.message}</div> <div class="rounded-b bg-[#2F2F33] p-2">{activity.message}</div>
</div> </div>
</div> </div>
{/each} {/each}

View File

@ -158,7 +158,7 @@
id="path" id="path"
name="path" name="path"
type="text" type="text"
class="w-full rounded-lg border border-zinc-600 bg-black p-2 text-zinc-300" class="w-full rounded-lg border border-zinc-600 bg-zinc-900 p-2 text-zinc-300"
value={$project?.path} value={$project?.path}
/> />
</div> </div>
@ -168,7 +168,7 @@
id="name" id="name"
name="name" name="name"
type="text" type="text"
class="w-full rounded-lg border border-zinc-600 bg-black p-2 text-zinc-300" class="w-full rounded-lg border border-zinc-600 bg-zinc-900 p-2 text-zinc-300"
value={$project?.title} value={$project?.title}
required required
/> />
@ -179,7 +179,7 @@
id="description" id="description"
name="description" name="description"
rows="3" rows="3"
class="w-full rounded-lg border border-zinc-600 bg-black p-2 text-zinc-300" class="w-full rounded-lg border border-zinc-600 bg-zinc-900 p-2 text-zinc-300"
value={$project?.api?.description} value={$project?.api?.description}
/> />
</div> </div>

View File

@ -78,7 +78,7 @@
name="name" name="name"
bind:value={userName} bind:value={userName}
type="text" type="text"
class="w-full rounded-lg border border-zinc-600 bg-black px-2 py-1 text-zinc-300" class="w-full rounded-lg border border-zinc-600 bg-zinc-900 px-3 py-2 text-zinc-300"
required required
/> />
</div> </div>
@ -91,7 +91,7 @@
name="email" name="email"
bind:value={$user.email} bind:value={$user.email}
type="text" type="text"
class="w-full rounded-lg border border-zinc-600 bg-black px-2 py-1 text-zinc-300" class="w-full rounded-lg border border-zinc-600 bg-zinc-900 px-3 py-2 text-zinc-300"
/> />
</div> </div>

View File

@ -4,7 +4,8 @@ const config = {
theme: { theme: {
fontFamily: { fontFamily: {
sans: ['Inter', 'SF Pro', '-apple-system', 'system-ui'] sans: ['Inter', 'SF Pro', '-apple-system', 'system-ui'],
mono: ['SF Mono', 'Consolas', 'Liberation Mono', 'monospace']
}, },
fontSize: { fontSize: {
xs: '10px', xs: '10px',