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

Increase icon and loading spinner size in Button

Browse Source 
This commit increases the size of icons and the loading spinner in Button components. The IconLoading component's class size has been updated from "h-4 w-4" to "h-5 w-5", and the icon component's class size has also been updated from "h-4 w-4" to "h-5 w-5". Additionally, some related styling adjustments have been made, such as removing the underline from button hover states and updating some background color values.

Changes:
- Update IconLoading size from "h-4 w-4" to "h-5 w-5" in Button component
- Update icon size from "h-4 w-4" to "h-5 w-5" in Button component
- Remove underline from button hover states
- Adjust background color values for button states
This commit is contained in:
idonahue 2023-05-08 16:52:18 +02:00
parent 0417e36bcc
commit f26b01934e
5 changed files with 29 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/Button/Button.svelte
View File

@ -38,25 +38,25 @@
>
{#if loading}
{#if icon}
<IconLoading class="h-4 w-4 animate-spin" />
<IconLoading class="h-5 w-5 animate-spin" />
<slot />
{:else}
<div class="items-around absolute flex w-full justify-center">
<IconLoading class="h-4 w-4 animate-spin" />
<IconLoading class="h-5 w-5 animate-spin" />
</div>
<div class="opacity-0">
<slot />
</div>
{/if}
{:else}
<svelte:component this={icon} class="h-4 w-4" />
<svelte:component this={icon} class="h-5 w-5" />
<slot />
{/if}
</button>
<style lang="postcss">
button {
@apply relative flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded py-2 text-base font-medium underline transition transition duration-150 ease-in-out ease-out hover:ease-in;
@apply relative flex w-fit items-center justify-center gap-[10px] whitespace-nowrap rounded py-2 text-base font-medium leading-[20px] underline transition duration-150 ease-in-out hover:ease-in;
}
button:focus {
@ -67,7 +67,7 @@
@apply text-zinc-300;
}
.basic:hover {
@apply bg-[#D4D4D833]/20 no-underline;
@apply bg-[#D4D4D833]/20;
}
.basic:active {
@apply bg-transparent no-underline;
@ -184,4 +184,4 @@
.full-width {
@apply w-full;
}
</style>
</style>

2
src/lib/components/icons/IconHome.svelte
View File

@ -14,7 +14,7 @@
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.12121 0C0.949699 0 0 0.949699 0 2.12121V6.9697C0 8.14121 0.949699 9.09091 2.12121 9.09091H6.9697C8.14121 9.09091 9.09091 8.14121 9.09091 6.9697V2.12121C9.09091 0.949699 8.14121 0 6.9697 0H2.12121ZM1.81818 2.12121C1.81818 1.95385 1.95385 1.81818 2.12121 1.81818H6.9697C7.13706 1.81818 7.27273 1.95385 7.27273 2.12121V6.9697C7.27273 7.13706 7.13706 7.27273 6.9697 7.27273H2.12121C1.95385 7.27273 1.81818 7.13706 1.81818 6.9697V2.12121ZM13.0303 0C11.8588 0 10.9091 0.949699 10.9091 2.12121V6.9697C10.9091 8.14121 11.8588 9.09091 13.0303 9.09091H17.8788C19.0503 9.09091 20 8.14121 20 6.9697V2.12121C20 0.949699 19.0503 0 17.8788 0H13.0303ZM12.7273 2.12121C12.7273 1.95385 12.863 1.81818 13.0303 1.81818H17.8788C18.0462 1.81818 18.1818 1.95385 18.1818 2.12121V6.9697C18.1818 7.13706 18.0462 7.27273 17.8788 7.27273H13.0303C12.863 7.27273 12.7273 7.13706 12.7273 6.9697V2.12121ZM0 13.0303C0 11.8588 0.949699 10.9091 2.12121 10.9091H6.9697C8.14121 10.9091 9.09091 11.8588 9.09091 13.0303V17.8788C9.09091 19.0503 8.14121 20 6.9697 20H2.12121C0.949699 20 0 19.0503 0 17.8788V13.0303ZM2.12121 12.7273C1.95385 12.7273 1.81818 12.8629 1.81818 13.0303V17.8788C1.81818 18.0461 1.95385 18.1818 2.12121 18.1818H6.9697C7.13706 18.1818 7.27273 18.0461 7.27273 17.8788V13.0303C7.27273 12.8629 7.13706 12.7273 6.9697 12.7273H2.12121ZM13.0303 10.9091C11.8588 10.9091 10.9091 11.8588 10.9091 13.0303V17.8788C10.9091 19.0503 11.8588 20 13.0303 20H17.8788C19.0503 20 20 19.0503 20 17.8788V13.0303C20 11.8588 19.0503 10.9091 17.8788 10.9091H13.0303ZM12.7273 13.0303C12.7273 12.8629 12.863 12.7273 13.0303 12.7273H17.8788C18.0462 12.7273 18.1818 12.8629 18.1818 13.0303V17.8788C18.1818 18.0461 18.0462 18.1818 17.8788 18.1818H13.0303C12.863 18.1818 12.7273 18.0461 12.7273 17.8788V13.0303Z"
d="M3.5 1.75C2.5335 1.75 1.75 2.5335 1.75 3.5V7.5C1.75 8.4665 2.5335 9.25 3.5 9.25H7.5C8.4665 9.25 9.25 8.4665 9.25 7.5V3.5C9.25 2.5335 8.4665 1.75 7.5 1.75H3.5ZM3.25 3.5C3.25 3.36193 3.36193 3.25 3.5 3.25H7.5C7.63807 3.25 7.75 3.36193 7.75 3.5V7.5C7.75 7.63807 7.63807 7.75 7.5 7.75H3.5C3.36193 7.75 3.25 7.63807 3.25 7.5V3.5ZM12.5 1.75C11.5335 1.75 10.75 2.5335 10.75 3.5V7.5C10.75 8.4665 11.5335 9.25 12.5 9.25H16.5C17.4665 9.25 18.25 8.4665 18.25 7.5V3.5C18.25 2.5335 17.4665 1.75 16.5 1.75H12.5ZM12.25 3.5C12.25 3.36193 12.3619 3.25 12.5 3.25H16.5C16.6381 3.25 16.75 3.36193 16.75 3.5V7.5C16.75 7.63807 16.6381 7.75 16.5 7.75H12.5C12.3619 7.75 12.25 7.63807 12.25 7.5V3.5ZM1.75 12.5C1.75 11.5335 2.5335 10.75 3.5 10.75H7.5C8.4665 10.75 9.25 11.5335 9.25 12.5V16.5C9.25 17.4665 8.4665 18.25 7.5 18.25H3.5C2.5335 18.25 1.75 17.4665 1.75 16.5V12.5ZM3.5 12.25C3.36193 12.25 3.25 12.3619 3.25 12.5V16.5C3.25 16.6381 3.36193 16.75 3.5 16.75H7.5C7.63807 16.75 7.75 16.6381 7.75 16.5V12.5C7.75 12.3619 7.63807 12.25 7.5 12.25H3.5ZM12.5 10.75C11.5335 10.75 10.75 11.5335 10.75 12.5V16.5C10.75 17.4665 11.5335 18.25 12.5 18.25H16.5C17.4665 18.25 18.25 17.4665 18.25 16.5V12.5C18.25 11.5335 17.4665 10.75 16.5 10.75H12.5ZM12.25 12.5C12.25 12.3619 12.3619 12.25 12.5 12.25H16.5C16.6381 12.25 16.75 12.3619 16.75 12.5V16.5C16.75 16.6381 16.6381 16.75 16.5 16.75H12.5C12.3619 16.75 12.25 16.6381 12.25 16.5V12.5Z"
fill="currentColor"
/>
</svg>

21
src/lib/components/icons/IconSettings.svelte
View File

@ -5,23 +5,22 @@
<svg
class={className}
width="20"
height="20"
viewBox="0 0 20 20"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
>
<path
d="M7.59396 1.94C7.68396 1.398 8.15396 1 8.70396 1H11.297C11.847 1 12.317 1.398 12.407 1.94L12.62 3.221C12.683 3.595 12.933 3.907 13.265 4.091C13.339 4.131 13.412 4.174 13.485 4.218C13.809 4.414 14.205 4.475 14.56 4.342L15.777 3.886C16.0264 3.79221 16.301 3.78998 16.5518 3.87971C16.8027 3.96945 17.0136 4.14531 17.147 4.376L18.443 6.623C18.576 6.8537 18.6229 7.12413 18.5753 7.38617C18.5277 7.6482 18.3887 7.88485 18.183 8.054L17.18 8.881C16.887 9.121 16.742 9.494 16.749 9.873C16.7506 9.95799 16.7506 10.043 16.749 10.128C16.742 10.506 16.887 10.878 17.179 11.118L18.184 11.946C18.608 12.296 18.718 12.9 18.444 13.376L17.146 15.623C17.0128 15.8536 16.8022 16.0296 16.5515 16.1195C16.3008 16.2094 16.0263 16.2074 15.777 16.114L14.56 15.658C14.205 15.525 13.81 15.586 13.484 15.782C13.4115 15.8261 13.3381 15.8688 13.264 15.91C12.933 16.093 12.683 16.405 12.62 16.779L12.407 18.059C12.317 18.602 11.847 19 11.297 19H8.70296C8.15296 19 7.68296 18.602 7.59296 18.06L7.37996 16.779C7.31796 16.405 7.06796 16.093 6.73596 15.909C6.66181 15.8681 6.58846 15.8258 6.51596 15.782C6.19096 15.586 5.79596 15.525 5.43996 15.658L4.22296 16.114C3.97369 16.2075 3.69933 16.2096 3.44866 16.1199C3.19799 16.0302 2.98727 15.8545 2.85396 15.624L1.55696 13.377C1.4239 13.1463 1.37701 12.8759 1.42462 12.6138C1.47223 12.3518 1.61125 12.1152 1.81696 11.946L2.82096 11.119C3.11296 10.879 3.25796 10.506 3.25096 10.127C3.2494 10.042 3.2494 9.95699 3.25096 9.872C3.25796 9.494 3.11296 9.122 2.82096 8.882L1.81696 8.054C1.6115 7.88489 1.47264 7.64843 1.42503 7.38662C1.37743 7.12481 1.42418 6.8546 1.55696 6.624L2.85396 4.377C2.98715 4.14614 3.19797 3.97006 3.44887 3.88014C3.69977 3.79021 3.97445 3.79229 4.22396 3.886L5.43996 4.342C5.79596 4.475 6.19096 4.414 6.51596 4.218C6.58796 4.174 6.66196 4.131 6.73596 4.09C7.06796 3.907 7.31796 3.595 7.37996 3.221L7.59396 1.94Z"
d="M8.03999 3.73111C8.1133 3.30956 8.49614 3 8.94414 3H11.0563C11.5043 3 11.8871 3.30956 11.9604 3.73111L12.1339 4.72744C12.1852 5.01833 12.3889 5.261 12.6593 5.40411C12.7196 5.43522 12.779 5.46867 12.8385 5.50289C13.1024 5.65533 13.425 5.70278 13.7141 5.59933L14.7054 5.24467C14.9086 5.17172 15.1323 5.16998 15.3366 5.23978C15.541 5.30957 15.7128 5.44636 15.8214 5.62578L16.877 7.37344C16.9854 7.55288 17.0236 7.76321 16.9848 7.96702C16.946 8.17082 16.8328 8.35488 16.6652 8.48644L15.8482 9.12967C15.6096 9.31633 15.4915 9.60644 15.4972 9.90122C15.4985 9.96733 15.4985 10.0335 15.4972 10.0996C15.4915 10.3936 15.6096 10.6829 15.8474 10.8696L16.6661 11.5136C17.0114 11.7858 17.101 12.2556 16.8778 12.6258L15.8206 14.3734C15.7121 14.5528 15.5405 14.6897 15.3363 14.7596C15.1321 14.8295 14.9086 14.828 14.7054 14.7553L13.7141 14.4007C13.425 14.2972 13.1032 14.3447 12.8377 14.4971C12.7786 14.5314 12.7189 14.5646 12.6585 14.5967C12.3889 14.739 12.1852 14.9817 12.1339 15.2726L11.9604 16.2681C11.8871 16.6904 11.5043 17 11.0563 17H8.94332C8.49532 17 8.11248 16.6904 8.03918 16.2689L7.86568 15.2726C7.81517 14.9817 7.61154 14.739 7.34111 14.5959C7.28071 14.5641 7.22096 14.5311 7.16191 14.4971C6.89718 14.3447 6.57543 14.2972 6.28545 14.4007L5.29415 14.7553C5.0911 14.8281 4.86762 14.8297 4.66344 14.7599C4.45926 14.6901 4.28762 14.5535 4.17903 14.3742L3.12256 12.6266C3.01418 12.4471 2.97598 12.2368 3.01476 12.033C3.05354 11.8292 3.16679 11.6451 3.33435 11.5136L4.15215 10.8703C4.39 10.6837 4.50811 10.3936 4.50241 10.0988C4.50113 10.0327 4.50113 9.96655 4.50241 9.90044C4.50811 9.60644 4.39 9.31711 4.15215 9.13044L3.33435 8.48644C3.16699 8.35492 3.05388 8.171 3.0151 7.96737C2.97633 7.76374 3.0144 7.55358 3.12256 7.37422L4.17903 5.62656C4.28752 5.44699 4.45925 5.31004 4.66362 5.24011C4.86799 5.17017 5.09172 5.17178 5.29496 5.24467L6.28545 5.59933C6.57543 5.70278 6.89718 5.65533 7.16191 5.50289C7.22055 5.46867 7.28083 5.43522 7.34111 5.40333C7.61154 5.261 7.81517 5.01833 7.86568 4.72744L8.03999 3.73111Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13 10C13 10.7956 12.6839 11.5587 12.1213 12.1213C11.5587 12.6839 10.7956 13 10 13C9.20435 13 8.44129 12.6839 7.87868 12.1213C7.31607 11.5587 7 10.7956 7 10C7 9.20435 7.31607 8.44129 7.87868 7.87868C8.44129 7.31607 9.20435 7 10 7C10.7956 7 11.5587 7.31607 12.1213 7.87868C12.6839 8.44129 13 9.20435 13 10Z"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
<path
d="M10 8.75C9.66848 8.75 9.35054 8.8817 9.11612 9.11612C8.8817 9.35054 8.75 9.66848 8.75 10C8.75 10.3315 8.8817 10.6495 9.11612 10.8839C9.35054 11.1183 9.66848 11.25 10 11.25C10.3315 11.25 10.6495 11.1183 10.8839 10.8839C11.1183 10.6495 11.25 10.3315 11.25 10C11.25 9.66848 11.1183 9.35054 10.8839 9.11612C10.6495 8.8817 10.3315 8.75 10 8.75ZM8.05546 8.05546C8.57118 7.53973 9.27066 7.25 10 7.25C10.7293 7.25 11.4288 7.53973 11.9445 8.05546C12.4603 8.57118 12.75 9.27066 12.75 10C12.75 10.7293 12.4603 11.4288 11.9445 11.9445C11.4288 12.4603 10.7293 12.75 10 12.75C9.27066 12.75 8.57118 12.4603 8.05546 11.9445C7.53973 11.4288 7.25 10.7293 7.25 10C7.25 9.27066 7.53973 8.57118 8.05546 8.05546Z"
fill="currentColor"
/>
</svg>

33
src/lib/components/icons/IconTerminal.svelte
View File

@ -5,29 +5,16 @@
<svg
class={className}
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask id="path-1-inside-1_1_99" fill="white">
<rect width="20" height="17.5" rx="1" />
</mask>
<rect
width="20"
height="17.5"
rx="1"
stroke="currentColor"
stroke-width="4"
stroke-linejoin="round"
mask="url(#path-1-inside-1_1_99)"
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.5 15.5V4.5H16.5V15.5H3.5ZM2 4C2 3.44772 2.44772 3 3 3H17C17.5523 3 18 3.44772 18 4V16C18 16.5523 17.5523 17 17 17H3C2.44772 17 2 16.5523 2 16V4ZM4.93057 6.5119C5.20014 6.19741 5.67361 6.16099 5.98811 6.43056L9.31095 9.2787C9.75328 9.65785 9.75328 10.3422 9.31095 10.7213L5.98811 13.5694C5.67361 13.839 5.20014 13.8026 4.93057 13.4881C4.661 13.1736 4.69743 12.7001 5.01192 12.4306L7.84757 10L5.01192 7.56944C4.69743 7.29987 4.661 6.8264 4.93057 6.5119ZM10 12.75C10 12.3358 10.3358 12 10.75 12H14.25C14.6642 12 15 12.3358 15 12.75C15 13.1642 14.6642 13.5 14.25 13.5H10.75C10.3358 13.5 10 13.1642 10 12.75Z"
fill="currentColor"
/>
<path
d="M4.375 5L8.57284 8.59815C8.66596 8.67797 8.66596 8.82203 8.57284 8.90185L4.375 12.5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
<rect x="10" y="11.25" width="6.25" height="2" rx="1" fill="currentColor" />
</svg>
</svg>

4
src/routes/projects/[projectId]/+layout.svelte
View File

@ -95,7 +95,7 @@
<Button
on:click={() => goto(`/projects/${$project.id}/terminal`)}
kind="plain"
height="small"
icon={IconTerminal}
/>
</Tooltip>
@ -105,7 +105,7 @@
<Button
on:click={() => goto(`/projects/${$project.id}/settings`)}
kind="plain"
height="small"
icon={IconSettings}
/>
</Tooltip>