Match style of textbox stop button to submit button (#9280)

* Change styles * styling * add changeset * add changeset * consistent width --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Sep 6, 2024 · 7122420 · 7122420
1 parent b0b8500
commit 7122420
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 25 deletions.
diff --git a/.changeset/warm-lemons-mate.md b/.changeset/warm-lemons-mate.md
@@ -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
diff --git a/js/icons/src/Square.svelte b/js/icons/src/Square.svelte
@@ -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"

diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -366,7 +366,7 @@
 					on:click={handle_stop}
 				>
 					{#if stop_btn === true}
-						<Square />
+						<Square fill={"none"} stroke_width={2.5} />
 					{:else}
 						{stop_btn}
 					{/if}
@@ -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);
@@ -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 {

diff --git a/js/textbox/shared/Textbox.svelte b/js/textbox/shared/Textbox.svelte
@@ -309,7 +309,7 @@
 				on:click={handle_stop}
 			>
 				{#if stop_btn === true}
-					<Square />
+					<Square fill="none" stroke_width={2.5} />
 				{:else}
 					{stop_btn}
 				{/if}
@@ -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;