gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-24 18:12:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Dialog and Commit page styling

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/Dialog/Dialog.svelte
View File

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

2
src/lib/components/Modal.svelte
View File

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

10
src/routes/projects/[projectId]/commit/+page.svelte
View File

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