Skip to content

Commit

Permalink
Match style of textbox stop button to submit button (#9280)
Browse files Browse the repository at this point in the history
* Change styles

* styling

* add changeset

* add changeset

* consistent width

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
  • Loading branch information
freddyaboulton and gradio-pr-bot authored Sep 6, 2024
1 parent b0b8500 commit 7122420
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 25 deletions.
8 changes: 8 additions & 0 deletions .changeset/warm-lemons-mate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@gradio/icons": minor
"@gradio/multimodaltextbox": minor
"@gradio/textbox": minor
"gradio": minor
---

feat:Match style of textbox stop button to submit button
9 changes: 7 additions & 2 deletions js/icons/src/Square.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<script>
export let fill = "currentColor";
export let stroke_width = 1.5;
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 24 24"
fill="currentColor"
{fill}
stroke="currentColor"
stroke-width="1.5"
stroke-width={`${stroke_width}`}
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-square"
Expand Down
18 changes: 6 additions & 12 deletions js/multimodaltextbox/shared/MultimodalTextbox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@
on:click={handle_stop}
>
{#if stop_btn === true}
<Square />
<Square fill={"none"} stroke_width={2.5} />
{:else}
{stop_btn}
{/if}
Expand Down Expand Up @@ -446,17 +446,19 @@
padding: 0 10px;
}
.stop-button,
.upload-button,
.submit-button {
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
}
.stop-button:hover,
.upload-button:hover,
.submit-button:hover {
background: var(--button-secondary-background-fill-hover);
}
.stop-button:active,
.upload-button:active,
.submit-button:active {
box-shadow: var(--button-shadow-active);
Expand All @@ -471,17 +473,9 @@
width: 17px;
}
.stop-button {
background: var(--button-cancel-background-fill);
color: var(--button-cancel-text-color);
}
.stop-button:hover {
background: var(--button-cancel-background-fill-hover);
color: var(--button-cancel-text-color-hover);
}
.stop-button :global(svg) {
height: 18px;
width: 18px;
height: 16px;
width: 16px;
}
.loader {
Expand Down
18 changes: 7 additions & 11 deletions js/textbox/shared/Textbox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@
on:click={handle_stop}
>
{#if stop_btn === true}
<Square />
<Square fill="none" stroke_width={2.5} />
{:else}
{stop_btn}
{/if}
Expand Down Expand Up @@ -420,31 +420,27 @@
margin-bottom: 5px;
z-index: var(--layer-1);
}
.stop-button,
.submit-button {
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
}
.stop-button:hover,
.submit-button:hover {
background: var(--button-secondary-background-fill-hover);
}
.stop-button:active,
.submit-button:active {
box-shadow: var(--button-shadow-active);
}
.submit-button :global(svg) {
height: 22px;
width: 22px;
}
.stop-button {
background: var(--button-cancel-background-fill);
color: var(--button-cancel-text-color);
}
.stop-button:hover {
background: var(--button-cancel-background-fill-hover);
color: var(--button-cancel-text-color-hover);
}
.stop-button :global(svg) {
height: 18px;
width: 18px;
height: 16px;
width: 16px;
}
.padded-button {
padding: 0 10px;
Expand Down

0 comments on commit 7122420

Please sign in to comment.