Minor cosmetic changes (#1383)

* changes

* pass tests

* change to source sans

* formatting

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

gradio/components.py

@@ -3498,7 +3498,7 @@ class Button(Clickable, Component):
         self,
         value: str = "Run",
         *,
-        variant: str = "primary",
+        variant: str = "secondary",
         visible: bool = True,
         elem_id: Optional[str] = None,
         **kwargs,

gradio/interface.py

@@ -461,14 +461,14 @@ class Interface(Blocks):
                                 self.InterfaceTypes.STANDARD,
                                 self.InterfaceTypes.INPUT_ONLY,
                             ]:
-                                clear_btn = Button("Clear", variant="secondary")
+                                clear_btn = Button("Clear")
                                 if not self.live:
-                                    submit_btn = Button("Submit")
+                                    submit_btn = Button("Submit", variant="primary")
                             elif self.interface_type == self.InterfaceTypes.UNIFIED:
-                                clear_btn = Button("Clear", variant="secondary")
-                                submit_btn = Button("Submit")
+                                clear_btn = Button("Clear")
+                                submit_btn = Button("Submit", variant="primary")
                                 if self.allow_flagging == "manual":
-                                    flag_btn = Button("Flag", variant="secondary")
+                                    flag_btn = Button("Flag")
 
                 if self.interface_type in [
                     self.InterfaceTypes.STANDARD,
@@ -481,14 +481,12 @@ class Interface(Blocks):
                             component.render()
                         with Row().style(mobile_collapse=False):
                             if self.interface_type == self.InterfaceTypes.OUTPUT_ONLY:
-                                clear_btn = Button("Clear", variant="secondary")
-                                submit_btn = Button("Generate")
+                                clear_btn = Button("Clear")
+                                submit_btn = Button("Generate", variant="primary")
                             if self.allow_flagging == "manual":
-                                flag_btn = Button("Flag", variant="secondary")
+                                flag_btn = Button("Flag")
                             if self.interpretation:
-                                interpretation_btn = Button(
-                                    "Interpret", variant="secondary"
-                                )
+                                interpretation_btn = Button("Interpret")
             submit_fn = (
                 lambda *args: self.run_prediction(args)[0]
                 if len(self.output_components) == 1

gradio/test_data/blocks_configs.py

@@ -55,19 +55,14 @@ XRAY_CONFIG = {
         {
             "id": 7,
             "type": "json",
-            "props": {
-                "show_label": True,
-                "name": "json",
-                "visible": True,
-                "style": {},
-            },
+            "props": {"show_label": True, "name": "json", "visible": True, "style": {}},
         },
         {
             "id": 8,
             "type": "button",
             "props": {
                 "value": "Run",
-                "variant": "primary",
+                "variant": "secondary",
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -100,19 +95,14 @@ XRAY_CONFIG = {
         {
             "id": 12,
             "type": "json",
-            "props": {
-                "show_label": True,
-                "name": "json",
-                "visible": True,
-                "style": {},
-            },
+            "props": {"show_label": True, "name": "json", "visible": True, "style": {}},
         },
         {
             "id": 13,
             "type": "button",
             "props": {
                 "value": "Run",
-                "variant": "primary",
+                "variant": "secondary",
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -263,7 +253,7 @@ XRAY_CONFIG_DIFF_IDS = {
             "type": "button",
             "props": {
                 "value": "Run",
-                "variant": "primary",
+                "variant": "secondary",
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -308,7 +298,7 @@ XRAY_CONFIG_DIFF_IDS = {
             "type": "button",
             "props": {
                 "value": "Run",
-                "variant": "primary",
+                "variant": "secondary",
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -464,7 +454,7 @@ XRAY_CONFIG_WITH_MISTAKE = {
                 "value": "Run",
                 "name": "button",
                 "css": {"background-color": "red", "--hover-color": "orange"},
-                "variant": "primary",
+                "variant": "secondary",
             },
         },
         {
@@ -510,7 +500,7 @@ XRAY_CONFIG_WITH_MISTAKE = {
                 "value": "Run",
                 "name": "button",
                 "style": {},
-                "variant": "primary",
+                "variant": "secondary",
             },
         },
         {

test/test_blocks.py

@@ -57,8 +57,9 @@ class TestBlocks(unittest.TestCase):
                     )
             textbox = gr.Textbox()
             demo.load(fake_func, [], [textbox])
-            config = demo.get_config_file()
-            config.pop("version")  # remove version key
+
+        config = demo.get_config_file()
+        config.pop("version")  # remove version key
         self.assertDictEqual(XRAY_CONFIG, config)
 
     @pytest.mark.asyncio

ui/packages/app/index.html

@@ -54,7 +54,11 @@
 			crossorigin="anonymous"
 		/>
 		<link
-			href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+			href="https://fonts.googleapis.com/css?family=Source Sans Pro"
+			rel="stylesheet"
+		/>
+		<link
+			href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
 			rel="stylesheet"
 		/>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>

ui/packages/app/src/Blocks.svelte

@@ -381,8 +381,11 @@
 			src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
 	{/if}
 </svelte:head>
-<div class="w-full h-full min-h-screen {mode}">
-	<div class="mx-auto container px-4 py-6 dark:bg-gray-950">
+<div class="w-full h-full min-h-screen {mode} flex flex-col">
+	<div
+		class="mx-auto container px-4 py-6 dark:bg-gray-950"
+		class:flex-grow={(window.__gradio_mode__ = "app")}
+	>
 		{#if ready}
 			<Render
 				component={rootNode.component}
@@ -398,20 +401,19 @@
 			/>
 		{/if}
 	</div>
-	<div
-		class="gradio-page container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50"
-	>
-		<div
-			class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-600 dark:text-gray-300 justify-center py-2"
+	<footer class="flex justify-center pb-6">
+		<a
+			href="https://gradio.app"
+			target="_blank"
+			rel="noreferrer"
+			class="group text-gray-300 dark:text-gray-500 hover:text-gray-400 dark:hover:text-gray-400 transition-colors font-semibold text-sm"
 		>
-			<a href="https://gradio.app" target="_blank" rel="noreferrer">
-				{$_("interface.built_with_Gradio")}
-				<img
-					class="h-5 inline-block pb-0.5"
-					src="{static_src}/static/img/logo.svg"
-					alt="logo"
-				/>
-			</a>
-		</div>
-	</div>
+			{$_("interface.built_with_Gradio")}
+			<img
+				class="h-[22px] ml-0.5 inline-block pb-0.5 filter grayscale opacity-50 group-hover:grayscale-0 group-hover:opacity-100 transition"
+				src="{static_src}/static/img/logo.svg"
+				alt="logo"
+			/>
+		</a>
+	</footer>
 </div>

ui/packages/atoms/src/BlockTitle.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <span
-	class="text-gray-600 text-[0.855rem] mb-2 block dark:text-gray-200 relative z-40"
+	class="text-gray-500 text-[0.855rem] mb-2 block dark:text-gray-200 relative z-40"
 	class:sr-only={!show_label}
 	class:h-0={!show_label}
 	class:!m-0={!show_label}

ui/packages/form/src/CheckboxGroup.svelte

@@ -29,7 +29,7 @@
 	{#each choices as choice, i}
 		<label
 			class:!cursor-not-allowed={disabled}
-			class={"flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer bg-white shadow-sm checked:shadow-inner" +
+			class={"gr-input-label flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer shadow-sm checked:shadow-inner" +
 				create_classes(style)}
 		>
 			<input

ui/packages/form/src/Radio.svelte

@@ -22,7 +22,7 @@
 	{#each choices as choice, i (i)}
 		<label
 			class:!cursor-not-allowed={disabled}
-			class={"flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer bg-white shadow-sm checked:shadow-inner" +
+			class={"gr-input-label flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer shadow-sm checked:shadow-inner" +
 				create_classes(style)}
 		>
 			<input

ui/packages/theme/src/tokens.css

@@ -45,7 +45,7 @@
 }
 
 .gr-text-input {
-	@apply p-2.5;
+	@apply p-2.5 shadow-inner disabled:shadow-none;
 }
 
 .gr-check-radio {
@@ -56,6 +56,10 @@
 	@apply rounded;
 }
 
+.gr-input-label {
+	@apply bg-gradient-to-t from-gray-50 to-white hover:from-gray-100 dark:from-gray-900 dark:to-gray-800 transition;
+}
+
 .gr-radio {
 	@apply rounded-full;
 }
@@ -65,7 +69,7 @@
 }
 
 .gr-button-primary {
-	@apply from-orange-100/70 to-orange-200/80 hover:to-orange-100/90 text-orange-600 border-orange-200
+	@apply from-orange-200/70 to-orange-300/80 hover:from-orange-200/90 text-orange-600 border-orange-200
 	  	 dark:from-orange-700 dark:to-orange-700 dark:hover:to-orange-500 dark:text-white dark:border-orange-600;
 }