From 7c20812a0db50d575a9b3ece1b3f545fcb5451f3 Mon Sep 17 00:00:00 2001
From: Ali Abid <aliabid94@gmail.com>
Date: Thu, 11 Feb 2021 09:30:06 -0800
Subject: [PATCH] flag styling

---
 gradio/static/css/gradio.css | 10 +++++-----
 gradio/static/js/gradio.js   |  6 +-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index 96b9ff07cc..226f9aebd2 100644
--- a/gradio/static/css/gradio.css
+++ b/gradio/static/css/gradio.css
@@ -109,12 +109,12 @@ input.submit {
 input.submit:hover {
   background-color: #f39c12;
 }
-.flagged {
-  background-color: pink !important;
+.flag {
+  transition: background-color 100ms;
+}
+.flagged {
+  background-color: #e74c3c !important;
 }
-/* label:hover {
-  background-color: lightgray;
-} */
 .overlay {
   position: absolute;
   height: 100vh;
diff --git a/gradio/static/js/gradio.js b/gradio/static/js/gradio.js
index 1a63283aef..3eccfeab34 100644
--- a/gradio/static/js/gradio.js
+++ b/gradio/static/js/gradio.js
@@ -191,8 +191,6 @@ function gradio(config, fn, target, example_file_path) {
     for (let output_interface of output_interfaces) {
       output_interface.clear();
     }
-    target.find(".flag").removeClass("flagged");
-    target.find(".flag").val("FLAG");
     target.find(".flag_message").empty();
     target.find(".loading").addClass("invisible");
     target.find(".loading_time").text("");
@@ -498,8 +496,6 @@ function gradio(config, fn, target, example_file_path) {
     target.find(".submit").show();
     target.find(".submit").click(function() {
       io_master.gather();
-      target.find(".flag").removeClass("flagged");
-      target.find(".flag").val("FLAG");
     })
   }
   if (!config.show_input) {
@@ -509,7 +505,7 @@ function gradio(config, fn, target, example_file_path) {
   target.find(".flag").click(function() {
     if (io_master.last_output) {
       target.find(".flag").addClass("flagged");
-      target.find(".flag").val("FLAGGED");
+      window.setTimeout(() => {target.find(".flag").removeClass("flagged");}, 100);
       io_master.flag();
     }
   })