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

Refactor CSS styles and clean up code

Browse Source 
The diff is mainly focused on updating the styling of the input fields, changing some class names, and removing extra spacing or unnecessary lines.

Changes include:
- Reformatting textarea and input element styling by breaking selectors into multiple lines for better readability.
- Updating input focus styles in `CommandPalette/Commit.svelte` to remove duplicate classes.
- Adjusting padding and margins for elements in `FileActivity.svelte` and `+page.svelte` for improved appearance and alignment.
- Tweaking and simplifying class names in `+page.svelte` for consistency and readability.
This commit is contained in:
Ian Donahue 2023-04-04 19:45:44 +02:00
parent f51757372f
commit f17255d4e0
4 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.postcss
View File

@ -3,7 +3,6 @@
@tailwind components;
@tailwind utilities;
/* Boilerplate CSS */
a,
button {
@ -14,14 +13,16 @@ button {
cursor: default;
}
textarea, input {
textarea,
input {
@apply rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100;
}
textarea:focus, input:focus{
outline: none;
textarea:focus,
input:focus {
outline: none;
@apply hover:border-zinc-500/80;
@apply focus:ring-2 focus:ring-blue-600/30;
@apply focus:focus:border-blue-600 focus:border-[1px];
@apply focus:border-[1px] focus:focus:border-blue-600;
}
.drag-none {

4
src/lib/components/CommandPalette/Commit.svelte
View File

@ -94,7 +94,7 @@
<fieldset class="flex flex-auto transform flex-col gap-2 overflow-auto transition-all">
{#if $statuses.length > 0}
<input
class="ring-gray-600 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-100 sm:py-1.5 sm:text-sm sm:leading-6"
class="ring-gray-600 focus:ring-blue-100 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:py-1.5 sm:text-sm sm:leading-6"
type="text"
name="summary"
placeholder="Summary (required)"
@ -107,7 +107,7 @@
name="description"
placeholder="Description (optional)"
bind:value={description}
class="ring-gray-600 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-100 sm:py-1.5 sm:text-sm sm:leading-6"
class="ring-gray-600 focus:ring-blue-100 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:py-1.5 sm:text-sm sm:leading-6"
/>
{#if isCommitting}

2
src/routes/projects/[projectId]/FileActivity.svelte
View File

@ -40,7 +40,7 @@
<style>
.file-activity {
@apply flex h-full items-baseline gap-1 pt-2 pl-1 pr-1;
@apply flex h-full items-baseline gap-1 px-4 pt-2;
align-items: flex-end;
border-bottom: 1px solid rgb(55, 55, 55);
background-color: rgba(0, 0, 0, 0.1);

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

@ -128,7 +128,7 @@
<form on:submit|preventDefault={onCommit} class="flex w-1/3 min-w-[500px] flex-col gap-4">
<ul class="flex w-full flex-col rounded border border-gb-700 bg-card-default pb-1">
<header class="flex w-full items-center p-2 bg-card-active">
<header class="flex w-full items-center bg-card-active p-2">
<input
type="checkbox"
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
@ -145,15 +145,12 @@
</header>
{#each $statuses as { path, staged }, i}
<li
class="bg-card-default "
>
<div
class:bg-gb-700={$selectedDiffPath === path}
class:hover:bg-divider={$selectedDiffPath !== path}
class="file-changed-item flex cursor-text select-text items-center gap-2 bg-card-default px-1 py-2 mx-1 mt-1 rounded"
>
<li class="bg-card-default ">
<div
class:bg-gb-700={$selectedDiffPath === path}
class:hover:bg-divider={$selectedDiffPath !== path}
class="file-changed-item mx-1 mt-1 flex cursor-text select-text items-center gap-2 rounded bg-card-default px-1 py-2"
>
<input
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
disabled={isCommitting || isGeneratingCommitMessage}
@ -161,10 +158,10 @@
staged
? git.unstage({ projectId, paths: [path] }).catch(() => {
error('Failed to unstage file');
})
})
: git.stage({ projectId, paths: [path] }).catch(() => {
error('Failed to stage file');
});
});
}}
name="path"
type="checkbox"
@ -190,8 +187,8 @@
class="
w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100
hover:border-zinc-500/80
focus:ring-2 focus:ring-blue-600/30
focus:focus:border-blue-600 focus:border-[1px]
focus:border-[1px] focus:focus:border-blue-600
focus:ring-2 focus:ring-blue-600/30
"
disabled={isGeneratingCommitMessage || isCommitting}
type="text"
@ -221,8 +218,8 @@
class="
w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100
hover:border-zinc-500/80
focus:ring-2 focus:ring-blue-600/30
focus:focus:border-blue-600 focus:border-[1px]
focus:border-[1px] focus:focus:border-blue-600
focus:ring-2 focus:ring-blue-600/30
"
rows="10"
placeholder="Description (optional)"