mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-23 01:22:12 +03:00
Update login and settings page to match design
- toggle for showing AI hunks not implemented yet
This commit is contained in:
Mattias Granlund
parent
d3ab856cdc
commit
9fe8f7e86e
@ -7,7 +7,7 @@
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="h-full w-full select-none bg-white font-sans text-base text-light-800 antialiased dark:bg-dark-300 dark:text-light-300"
|
||||
class="h-full w-full select-none bg-light-200 font-sans text-base text-light-800 antialiased dark:bg-dark-900 dark:text-light-300"
|
||||
style="height: 100vh"
|
||||
>
|
||||
%sveltekit.body%
|
||||
|
||||
@ -12,10 +12,9 @@ button {
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
textarea {
|
||||
outline: none;
|
||||
@apply rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-300 dark:bg-zinc-700;
|
||||
@apply rounded border border-light-500 bg-white p-2 text-light-900 dark:border-dark-400 dark:bg-dark-600 dark:text-dark-100;
|
||||
@apply hover:border-zinc-500/80;
|
||||
@apply focus:ring-2 focus:ring-blue-600;
|
||||
}
|
||||
@ -239,7 +238,7 @@ button:focus {
|
||||
@apply text-[#5852A0];
|
||||
}
|
||||
.purple.outlined {
|
||||
@apply border-[#524C93] no-underline;
|
||||
@apply border-[#524C93] text-light-900 no-underline dark:text-dark-100;
|
||||
}
|
||||
.purple.outlined:hover {
|
||||
@apply bg-[#524C93]/20;
|
||||
|
||||
BIN
src/lib/assets/logo-310x310.png
Normal file
BIN
src/lib/assets/logo-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@ -8,6 +8,8 @@
|
||||
const cloud = CloudApi();
|
||||
const user = stores.user;
|
||||
|
||||
export let width: 'basic' | 'full-width' = 'basic';
|
||||
|
||||
const pollForUser = async (token: string) => {
|
||||
const apiUser = await cloud.login.user.get(token).catch(() => null);
|
||||
if (apiUser) {
|
||||
@ -37,20 +39,18 @@
|
||||
const authUrl = derived(token, ($token) => $token?.url as string);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if $user}
|
||||
<Button kind="plain" color="destructive" on:click={() => ($user = null)}>Log out</Button>
|
||||
{:else if $token !== null}
|
||||
{#await Promise.all([open($token.url), pollForUser($token.token)])}
|
||||
<div>Log in in your system browser</div>
|
||||
{/await}
|
||||
<p>
|
||||
<button class="underline" on:click={() => open($authUrl)}>Click here</button>
|
||||
if you are not redirected automatically, you can
|
||||
</p>
|
||||
{:else}
|
||||
<Button loading={signUpOrLoginLoading} color="primary" on:click={onSignUpOrLoginClick}>
|
||||
Sign up or Log in
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $user}
|
||||
<Button kind="plain" color="destructive" on:click={() => ($user = null)}>Log out</Button>
|
||||
{:else if $token !== null}
|
||||
{#await Promise.all([open($token.url), pollForUser($token.token)])}
|
||||
<div>Log in in your system browser</div>
|
||||
{/await}
|
||||
<p>
|
||||
<button class="underline" on:click={() => open($authUrl)}>Click here</button>
|
||||
if you are not redirected automatically, you can
|
||||
</p>
|
||||
{:else}
|
||||
<Button {width} loading={signUpOrLoginLoading} color="purple" on:click={onSignUpOrLoginClick}>
|
||||
Sign up or Log in
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { building } from '$app/environment';
|
||||
import { writable, type Writable } from '@square/svelte-store';
|
||||
import { appWindow, type Theme } from '@tauri-apps/api/window';
|
||||
|
||||
@ -7,6 +8,7 @@ export const theme: Writable<string> = writable('dark');
|
||||
let systemTheme: string | null;
|
||||
|
||||
export function initTheme() {
|
||||
if (building) return;
|
||||
appWindow.theme().then((value: Theme | null) => {
|
||||
systemTheme = value;
|
||||
updateDom();
|
||||
|
||||
@ -74,7 +74,6 @@
|
||||
<Breadcrumbs project={$project} />
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
<ThemeSelector />
|
||||
<div class="mr-6">
|
||||
<Link href="/users/">
|
||||
{#await user.load() then}
|
||||
@ -91,7 +90,7 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-grow overflow-y-hidden">
|
||||
<div class="flex flex-grow overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,7 +3,6 @@ import { api, log } from '$lib';
|
||||
import Posthog from '$lib/posthog';
|
||||
import Sentry from '$lib/sentry';
|
||||
import { wrapLoadWithSentry } from '@sentry/sveltekit';
|
||||
import { initTheme } from '$lib/theme';
|
||||
|
||||
export const ssr = false;
|
||||
export const prerender = true;
|
||||
@ -11,7 +10,6 @@ export const csr = true;
|
||||
|
||||
export const load: LayoutLoad = wrapLoadWithSentry(({ fetch }) => {
|
||||
log.setup();
|
||||
initTheme();
|
||||
return {
|
||||
projects: api.projects.Projects(),
|
||||
cloud: api.CloudApi({ fetch }),
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
import type { LayoutData } from './$types';
|
||||
import { Button, Tooltip } from '$lib/components';
|
||||
import { events } from '$lib';
|
||||
import { initTheme } from '$lib/theme';
|
||||
|
||||
export let data: LayoutData;
|
||||
|
||||
const { projects } = data;
|
||||
initTheme();
|
||||
</script>
|
||||
|
||||
<div class="h-full w-full bg-light-200 p-8 text-light-900 dark:bg-dark-1000">
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
import { log, stores, toasts } from '$lib';
|
||||
import { deleteAllData } from '$lib/api';
|
||||
import { goto } from '$app/navigation';
|
||||
import { open } from '@tauri-apps/api/shell';
|
||||
import Logo from '$lib/assets/logo-310x310.png';
|
||||
import ThemeSelector from '../ThemeSelector.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
const { cloud } = data;
|
||||
@ -85,22 +86,25 @@
|
||||
.finally(() => (isDeleting = false));
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-xl p-8">
|
||||
{#if $user}
|
||||
<div class="flex flex-col gap-6 text-zinc-100">
|
||||
<header class="flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-2xl font-medium">GitButler Cloud Account</h2>
|
||||
<div class="">Your online account details on gitbutler.com</div>
|
||||
</div>
|
||||
{#if $user}
|
||||
<div class="mx-auto h-fit w-full max-w-xl bg-light-200 py-10 dark:bg-dark-900">
|
||||
<div class="flex flex-col gap-y-8">
|
||||
<div class="flex w-full justify-between">
|
||||
<h2 class="text-2xl font-medium">GitButler Settings</h2>
|
||||
<Login />
|
||||
</header>
|
||||
</div>
|
||||
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
|
||||
|
||||
<div>
|
||||
<h2 class="mb-2 text-lg font-medium">GitButler Cloud</h2>
|
||||
<p class="">Your online account details on gitbutler.com</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
on:submit={onSubmit}
|
||||
class="user-form flex flex-row items-start justify-between gap-12 rounded-lg py-2"
|
||||
class="user-form flex flex-row items-start justify-between gap-12 rounded-lg"
|
||||
>
|
||||
<fields id="right" class="flex flex-col items-center gap-2 pt-6">
|
||||
<div id="profile-picture" class="relative flex flex-col items-center gap-2 pt-4">
|
||||
{#if $user.picture}
|
||||
<img
|
||||
class="h-28 w-28 rounded-full border-zinc-300"
|
||||
@ -112,7 +116,7 @@
|
||||
<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"
|
||||
class="font-sm absolute bottom-0 right-0 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
|
||||
@ -124,32 +128,44 @@
|
||||
class="hidden"
|
||||
/>
|
||||
</label>
|
||||
</fields>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div id="contact-info" class="flex flex-1 flex-wrap">
|
||||
<div class="basis-1/2 pr-4">
|
||||
<label for="firstName" class="text-zinc-400">First name</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={userNameInput}
|
||||
name="firstName"
|
||||
bind:value={$user.name}
|
||||
type="text"
|
||||
class="w-full"
|
||||
placeholder="Name can't be empty"
|
||||
placeholder="First name can't be empty"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="basis-1/2 pr-4">
|
||||
<label for="lastName" class="text-zinc-400">Last name</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
name="lastName"
|
||||
type="text"
|
||||
class="w-full"
|
||||
placeholder="Last name can't be empty"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="mt-4 basis-full pr-4">
|
||||
<label for="email" class="text-zinc-400">Email</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
disabled
|
||||
readonly
|
||||
id="email"
|
||||
name="email"
|
||||
bind:value={$user.email}
|
||||
@ -157,112 +173,180 @@
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end pt-4">
|
||||
<Button disabled={!canTriggerUpdate} loading={saving} color="primary" type="submit">
|
||||
Update profile
|
||||
</Button>
|
||||
</footer>
|
||||
</fields>
|
||||
<div class="mt-4 basis-full pr-4 text-right">
|
||||
<Button loading={saving} color="purple" type="submit">Update profile</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center justify-items-center space-y-6 text-white">
|
||||
<div class="text-4xl font-bold text-white">Connect to GitButler Cloud</div>
|
||||
<div>Sign up or log in to GitButler Cloud for more tools and features:</div>
|
||||
<ul class="space-y-2 pb-4 text-zinc-400">
|
||||
<li class="flex flex-row space-x-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="white"
|
||||
class="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Backup everything you do in any of your projects</span>
|
||||
</li>
|
||||
<li class="flex flex-row space-x-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="white"
|
||||
class="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Sync your data across devices</span>
|
||||
</li>
|
||||
<li class="flex flex-row space-x-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="white"
|
||||
class="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
|
||||
/>
|
||||
</svg>
|
||||
<span>AI commit message automated suggestions</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-8 text-center">
|
||||
<Login />
|
||||
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
|
||||
<div>
|
||||
<h2 class="mb-2 text-lg font-medium">Appearance</h2>
|
||||
</div>
|
||||
<div class="text-center text-zinc-300">
|
||||
You will still need to give us permission for each project before we transfer any data to
|
||||
our servers. You can revoke this permission at any time.
|
||||
<div class="flex items-center">
|
||||
<div class="flex-grow">
|
||||
<p>Automatically generate AI hunk changes</p>
|
||||
<p class="text-sm text-light-700 dark:text-dark-200">
|
||||
GitButler AI will review your hunk changes and write a description of what happened
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="relative inline-flex cursor-pointer items-center">
|
||||
<input type="checkbox" value="" class="peer sr-only" />
|
||||
<div
|
||||
class="peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 peer h-6 w-11 rounded-full bg-gray-400 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-light-500 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex-grow">
|
||||
<p>Interface theme</p>
|
||||
<p class="text-sm text-light-700 dark:text-dark-200">
|
||||
Select or customize your interface theme.
|
||||
</p>
|
||||
</div>
|
||||
<div><ThemeSelector /></div>
|
||||
</div>
|
||||
|
||||
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
|
||||
|
||||
<div>
|
||||
<h2 class="mb-2 text-lg font-medium">Need help?</h2>
|
||||
</div>
|
||||
<div class="flex gap-x-4">
|
||||
<a
|
||||
href="https://discord.gg/wDKZCPEjXC"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="flex-1 rounded border border-light-200 bg-white p-4 dark:border-dark-400 dark:bg-dark-700"
|
||||
>
|
||||
<p class="mb-2 font-medium">Join our Discorder</p>
|
||||
<p class="text-light-700 dark:text-dark-200">
|
||||
Join our community and share feedback, requests, or ask a question.
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:hello@gitbutler.com?subject=Feedback or question!"
|
||||
target="_blank"
|
||||
class="flex-1 rounded border border-light-200 bg-white p-4 dark:border-dark-400 dark:bg-dark-700"
|
||||
>
|
||||
<p class="mb-2 font-medium">Contact us</p>
|
||||
<p class="text-light-700 dark:text-dark-200">
|
||||
If you have an issue or any questions, contact us.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<Button color="destructive" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
|
||||
Delete all data
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={deleteConfirmationModal} title="Delete all local data?">
|
||||
<p>Are you sure you want to delete all local data? This can’t be undone.</p>
|
||||
|
||||
<svelte:fragment slot="controls" let:close>
|
||||
<Button kind="outlined" on:click={close}>Cancel</Button>
|
||||
<Button color="destructive" loading={isDeleting} on:click={onDeleteClicked}>Delete</Button
|
||||
>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex w-full items-center border-t border-light-400 bg-white dark:border-dark-500 dark:bg-dark-1000"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-1 flex-col items-end justify-center gap-y-4 border-r border-light-400 dark:border-dark-500 dark:bg-dark-800"
|
||||
>
|
||||
<div class="mr-20 ml-8 flex w-80 max-w-lg flex-col items-center gap-y-4">
|
||||
<img alt="logo" class="inline-block h-32 w-32" src={Logo} />
|
||||
<p class="text-2xl font-medium">Login to GitButler</p>
|
||||
<Login width="full-width" />
|
||||
<Button color="purple" width="full-width" kind="outlined" on:click={() => goto('/')}
|
||||
>Skip</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex h-full flex-1 flex-col justify-center">
|
||||
<div class="ml-20 mr-8 flex w-80 max-w-lg flex-col gap-y-4">
|
||||
<h1 class="text-2xl font-medium">More than just version control</h1>
|
||||
<p>
|
||||
GitButler is a tool to help you manage all the local work you do on your code projects.<br
|
||||
/><br />Think of us as a code concierge, a smart assistant for all the coding related
|
||||
tasks you need to do every day.
|
||||
</p>
|
||||
<div class="flex gap-x-4">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 flex-shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M21.4999 16.8107C21.4999 17.6747 20.5669 18.2157 19.8169 17.7877L12.7089 13.7257C12.5369 13.6272 12.3939 13.4851 12.2944 13.3136C12.195 13.1421 12.1426 12.9474 12.1426 12.7492C12.1426 12.5509 12.195 12.3562 12.2944 12.1847C12.3939 12.0133 12.5369 11.8711 12.7089 11.7727L19.8169 7.71066C19.988 7.61292 20.1818 7.56184 20.3789 7.56253C20.5759 7.56322 20.7693 7.61565 20.9397 7.71458C21.1102 7.81351 21.2516 7.95546 21.3499 8.12624C21.4482 8.29701 21.5 8.49061 21.4999 8.68766V16.8107ZM11.7499 16.8107C11.7499 17.6747 10.8169 18.2157 10.0669 17.7877L2.95894 13.7257C2.78688 13.6272 2.64387 13.4851 2.54442 13.3136C2.44496 13.1421 2.39258 12.9474 2.39258 12.7492C2.39258 12.5509 2.44496 12.3562 2.54442 12.1847C2.64387 12.0133 2.78688 11.8711 2.95894 11.7727L10.0669 7.70966C10.238 7.61192 10.4318 7.56084 10.6289 7.56153C10.8259 7.56222 11.0193 7.61465 11.1897 7.71358C11.3602 7.81251 11.5016 7.95446 11.5999 8.12524C11.6982 8.29601 11.75 8.48961 11.7499 8.68666V16.8097V16.8107Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="mt-8 flex flex-col gap-4 border-t border-zinc-400 pt-4">
|
||||
<button
|
||||
class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default p-3 text-zinc-400 shadow transition duration-150 ease-out hover:bg-card-active hover:ease-in"
|
||||
on:click={() => open('mailto:hello@gitbutler.com?subject=Feedback or question!')}
|
||||
>
|
||||
<h2 class="text-lg text-zinc-300">Get Support</h2>
|
||||
<div class="text-zinc-500">If you have an issue or any questions, please email us.</div>
|
||||
</button>
|
||||
<button
|
||||
class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default p-3 text-zinc-400 shadow transition duration-150 ease-out hover:bg-card-active hover:ease-in"
|
||||
on:click={() => open('https://discord.gg/wDKZCPEjXC')}
|
||||
>
|
||||
<h2 class="text-lg text-zinc-300">Join our Discord</h2>
|
||||
<div class="text-zinc-500">Share feedback, request, or ask questions</div>
|
||||
</button>
|
||||
<span class="inline-block align-middle">
|
||||
Automatically recording everything you do in any o your butlered projects.
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-x-4">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 flex-shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M21.5 11.25V19.5C21.5 19.8978 21.342 20.2794 21.0607 20.5607C20.7794 20.842 20.3978 21 20 21H5.75C5.35218 21 4.97064 20.842 4.68934 20.5607C4.40804 20.2794 4.25 19.8978 4.25 19.5V11.25M12.5 4.875C12.5 4.35583 12.346 3.84831 12.0576 3.41663C11.7692 2.98495 11.3592 2.6485 10.8795 2.44982C10.3999 2.25114 9.87209 2.19915 9.36289 2.30044C8.85369 2.40173 8.38596 2.65173 8.01884 3.01885C7.65173 3.38596 7.40172 3.85369 7.30044 4.36289C7.19915 4.87209 7.25114 5.39989 7.44982 5.87954C7.6485 6.3592 7.98495 6.76917 8.41663 7.05761C8.84831 7.34605 9.35582 7.5 9.875 7.5H12.5M12.5 4.875V7.5M12.5 4.875C12.5 4.35583 12.654 3.84831 12.9424 3.41663C13.2308 2.98495 13.6408 2.6485 14.1205 2.44982C14.6001 2.25114 15.1279 2.19915 15.6371 2.30044C16.1463 2.40173 16.614 2.65173 16.9812 3.01885C17.3483 3.38596 17.5983 3.85369 17.6996 4.36289C17.8008 4.87209 17.7489 5.39989 17.5502 5.87954C17.3515 6.3592 17.0151 6.76917 16.5834 7.05761C16.1517 7.34605 15.6442 7.5 15.125 7.5H12.5M12.5 7.5V21M3.875 11.25H21.875C22.496 11.25 23 10.746 23 10.125V8.625C23 8.004 22.496 7.5 21.875 7.5H3.875C3.254 7.5 2.75 8.004 2.75 8.625V10.125C2.75 10.746 3.254 11.25 3.875 11.25Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="inline-block align-middle">
|
||||
Simplifying all your Git work, including comitting, branching and pushing, to be easy
|
||||
and intuitive.
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-x-4">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 flex-shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M16.25 15.75L13.761 13.261M13.761 13.261C14.0744 12.9476 14.323 12.5755 14.4926 12.1661C14.6622 11.7566 14.7495 11.3177 14.7495 10.8745C14.7495 10.4313 14.6622 9.99241 14.4926 9.58294C14.323 9.17346 14.0744 8.8014 13.761 8.488C13.4476 8.1746 13.0755 7.926 12.6661 7.75639C12.2566 7.58678 11.8177 7.49948 11.3745 7.49948C10.9313 7.49948 10.4924 7.58678 10.0829 7.75639C9.67346 7.926 9.3014 8.1746 8.988 8.488C8.35493 9.12107 7.99927 9.9797 7.99927 10.875C7.99927 11.7703 8.35493 12.6289 8.988 13.262C9.62107 13.8951 10.4797 14.2507 11.375 14.2507C12.2703 14.2507 13.1289 13.8951 13.762 13.262L13.761 13.261ZM21.5 12C21.5 13.1819 21.2672 14.3522 20.8149 15.4442C20.3626 16.5361 19.6997 17.5282 18.864 18.364C18.0282 19.1997 17.0361 19.8626 15.9442 20.3149C14.8522 20.7672 13.6819 21 12.5 21C11.3181 21 10.1478 20.7672 9.05585 20.3149C7.96392 19.8626 6.97177 19.1997 6.13604 18.364C5.30031 17.5282 4.63738 16.5361 4.18508 15.4442C3.73279 14.3522 3.5 13.1819 3.5 12C3.5 9.61305 4.44821 7.32387 6.13604 5.63604C7.82387 3.94821 10.1131 3 12.5 3C14.8869 3 17.1761 3.94821 18.864 5.63604C20.5518 7.32387 21.5 9.61305 21.5 12Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="inline-block align-middle">
|
||||
Helping you not just search for strings or past commits, but find useful context in the
|
||||
story of your code.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex flex-col gap-4 border-t border-zinc-400 pt-4">
|
||||
<Button color="destructive" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
|
||||
Delete all data
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={deleteConfirmationModal} title="Delete all local data?">
|
||||
<p>Are you sure you want to delete all local data? This can’t be undone.</p>
|
||||
|
||||
<svelte:fragment slot="controls" let:close>
|
||||
<Button kind="outlined" on:click={close}>Cancel</Button>
|
||||
<Button color="destructive" loading={isDeleting} on:click={onDeleteClicked}>Delete</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user