Buttons, user settings page, command K input size.

This commit is contained in:
Ian Donahue 2023-04-03 20:31:09 +02:00
parent 7266f1a854
commit e5de6bcf7b
6 changed files with 71 additions and 46 deletions

View File

@ -56,7 +56,7 @@ button {
/* COMMAND PALETTE */
.commnand-palette-section-header {
.command-palette-section-header {
@apply mx-2 mb-2 mt-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300;
}

View File

@ -78,8 +78,9 @@
<style lang="postcss">
a,
button {
@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline transition duration-150 ease-out hover:ease-in;
text-underline-offset: 3px;
}
.basic {

View File

@ -186,14 +186,14 @@
</script>
<Modal on:close bind:this={modal}>
<div class="commnand-palette flex max-h-[360px] w-[640px] flex-col rounded text-zinc-400">
<div class="command-palette flex max-h-[360px] w-[640px] flex-col rounded text-zinc-400">
<!-- Search input area -->
<div class="search-input flex items-center border-b border-zinc-400/20 py-2">
<div class="ml-4 mr-2 flex flex-grow items-center">
<!-- Project scope -->
{#if scopeToProject}
<div class="mr-1 flex items-center">
<span class="font-semibold text-zinc-300">{$project?.title}</span>
<span class="text-lg font-semibold text-zinc-300">{$project?.title}</span>
<span class="ml-1 text-lg">/</span>
</div>
{/if}
@ -201,7 +201,7 @@
<div class="mr-1 flex-grow">
<!-- svelte-ignore a11y-autofocus -->
<input
class="w-full bg-transparent text-zinc-300 focus:outline-none"
class="command-palette-input w-full bg-transparent text-zinc-300 text-lg leading-10 focus:outline-none"
bind:value={userInput}
on:input|stopPropagation={updateMatchFilesQuery}
type="text"
@ -218,7 +218,7 @@
{#each commandGroups as group, groupIdx}
{#if group.visible}
<div class="w-full cursor-default select-none px-2">
<p class="commnand-palette-section-header result-section-header">
<p class="command-palette-section-header result-section-header">
<span>{group.name}</span>
{#if group.description}
<span class="ml-2 font-light italic text-zinc-300/70">({group.description})</span>

View File

@ -77,7 +77,7 @@
<Modal on:close bind:this={modal}>
<div class="mx-2 mb-2 w-full cursor-default select-none">
<p
class="commnand-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300"
class="command-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300"
>
Replay working history
</p>

View File

@ -111,7 +111,7 @@
$: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0;
</script>
<div id="commit-page" class="flex h-full w-full gap-2">
<div id="commit-page" class="flex h-full w-full">
<div class="commit-panel-container border-r border-zinc-700 p-4">
<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>
@ -180,14 +180,19 @@
required
/>
<textarea
name="description"
disabled={isGeneratingCommitMessage || isCommitting}
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 focus:border-blue-600"
rows="10"
placeholder="Description (optional)"
bind:value={description}
/>
<div class="commit-description-container relative">
<div class="generating-commit bg-zinc-600 px-3 py-1 absolute top-1 left-1 rounded">
✨ Summarizing changes...
</div>
<textarea
name="description"
disabled={isGeneratingCommitMessage || isCommitting}
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 focus:border-blue-600"
rows="10"
placeholder="Description (optional)"
bind:value={description}
/>
</div>
<div class="flex justify-between">
{#if isGeneratingCommitMessage}
@ -234,7 +239,7 @@
</form>
</div>
<div id="preview" class="m-2 flex flex-auto cursor-text select-text overflow-auto">
<div id="preview" class="m-4 flex flex-auto cursor-text select-text overflow-auto border rounded p-4 border-gb-700 bg-card-default">
{#if $selectedDiffPath !== undefined}
{#if $selectedDiff !== undefined}
<DiffViewer diff={$selectedDiff} path={$selectedDiffPath} />

View File

@ -69,6 +69,35 @@
on:submit={onSubmit}
class="user-form flex flex-row items-start justify-between gap-12 rounded-lg py-2"
>
<fields id="right" class="pt-6 flex flex-col items-center gap-2">
{#if $user.picture}
<img
class="h-28 w-28 rounded-full border-zinc-300"
src={userPicture}
alt="Your avatar"
/>
{/if}
<label
title="Edit profile photo"
for="picture"
class="font-sm -mt-6 -ml-16 cursor-default rounded-lg border border-zinc-600 bg-zinc-800 px-2 text-center text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50"
>
Edit
<input
on:change={onPictureChange}
type="file"
id="picture"
name="picture"
accept={fileTypes.join('')}
class="hidden"
/>
</label>
</fields>
<fields id="left" class="flex flex-1 flex-col gap-3">
<div class="flex flex-col gap-1">
<label for="name" class="text-zinc-400">Name</label>
@ -94,36 +123,12 @@
/>
</div>
<footer class="pt-4">
<footer class="pt-4 flex justify-end">
<Button loading={saving} role="primary" type="submit">Update profile</Button>
</footer>
</fields>
<fields id="right" class="flex flex-col items-center gap-2">
{#if $user.picture}
<img
class="h-28 w-28 rounded-full border-zinc-300"
src={userPicture}
alt="Your avatar"
/>
{/if}
<label
title="Edit profile photo"
for="picture"
class="font-sm -mt-6 -ml-16 cursor-default rounded-lg border border-zinc-600 bg-zinc-800 px-2 text-center text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50"
>
Edit
<input
on:change={onPictureChange}
type="file"
id="picture"
name="picture"
accept={fileTypes.join('')}
class="hidden"
/>
</label>
</fields>
</form>
</div>
{:else}
@ -195,12 +200,26 @@
{/if}
<div class="mt-8 flex flex-col border-t border-zinc-400 pt-4">
<h2 class="text-lg font-medium text-zinc-100">Get Support</h2>
<div class="text-sm text-zinc-300">
If you have an issue or any questions, please email us.
<div class="mt-4">
<a
class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default hover:bg-card-active shadow p-3 text-zinc-400 transition duration-150 ease-out hover:ease-in"
href="mailto:hello@gitbutler.com?subject=Feedback or question!">
<h2 class="text-lg text-zinc-300">Get Support</h2>
<div>If you have an issue or any questions, please email us.</div>
</a>
</div>
<div class="mt-4">
<a class="text-blue-200" href="mailto:hello@gitbutler.com">hello@gitbutler.com</a>
<a
class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default hover:bg-card-active shadow p-3 text-zinc-400 transition duration-150 ease-out hover:ease-in"
href="https://discord.gg/wDKZCPEjXC"
target="_blank"
rel="noreferrer"
>
<h2 class="text-lg text-zinc-300">Join our Discord</h2>
<div class="text-sm text-zinc-500">Share feedback, request, or ask questions</div>
</a>
</div>
</div>
</div>