Refactor Dialog and Commit page styling

Changes:
- In Dialog.svelte, replaced hard-coded color values with class-based colors for better maintainability.
- Added padding to the paragraph elements in page.svelte for better spacing.
- Updated the font-semibold class to use consistent text color across elements.
This commit is contained in:
idonahue 2023-04-12 17:38:47 +02:00
parent 490e696da5
commit 89955fcbbd
3 changed files with 10 additions and 10 deletions

View File

@ -10,16 +10,16 @@
</script>
<Modal on:close bind:this={modal}>
<div class="flex w-[620px] flex-col text-[#D4D4D8]">
<div class="mx-4 my-4 flex">
<div class="flex-grow text-[18px]">
<div class="flex flex-col text-zinc-400">
<div class="p-4 flex">
<div class="flex-grow text-[18px] text-zinc-300">
<slot name="title">Title</slot>
</div>
<button on:click={() => modal.hide()}>
<IconClose class="h-6 w-6" />
</button>
</div>
<p class="mx-4 my-4 text-base">
<p class="p-4 text-base">
<slot />
</p>
<div class="m-4 ml-auto flex gap-4">

View File

@ -42,7 +42,7 @@ It does minimal styling. A close event is fired when the modal is closed.
</Modal>
```
-->
<!-- test -->
<svelte:window on:click={handleClick} />
<dialog

View File

@ -157,20 +157,20 @@
<Dialog bind:this={connectToCloudDialog}>
<svelte:fragment slot="title">GitButler Cloud required</svelte:fragment>
<svelte:fragment>
<p>
<p class="py-2">
By connecting to GitButler Cloud you'll unlock improved, cloud only features, including
AI-generated commit summaries, and the assurance of never losing your work with synced
project.
</p>
<p class="mt-2 flex flex-col">
<span class="font-semibold">AI-genearate commits</span>
<p class="py-2 flex flex-col">
<span class="font-semibold text-zinc-300">AI-genearate commits</span>
<span>
This not only saves you time and effort but also ensures consistency in tone and style,
ultimately helping you to boost sales and improve customer satisfaction.
</span>
</p>
<p class="mt-2 flex flex-col">
<span class="font-semibold">Secure and reliable backup</span>
<p class="py-2 flex flex-col">
<span class="font-semibold text-zinc-300">Secure and reliable backup</span>
<span>
GitButler backup guarantees that anything youve ever written in your projects are safe,
secure and easily recoverable.