From 9690e2ac51256137cf5f4e11d2ad28dedd68739b Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Thu, 13 Jan 2022 15:06:11 -0300
Subject: [PATCH] Minor design improvements (#858)

* Adds the greens and yellows from the custom color palette

* Keeps the cell status indicators with the original bright colors

* Increases icon-button contrast

* Increases labeled_text font-size

* Removes type: button to fix the runtime sidebar buttons style on Safari

* Increases the toggleable menu contrast on hover

* Use the same color for the stale state in the sections sidebar
---
 assets/css/components.css                     |  4 +-
 assets/tailwind.config.js                     | 48 +++++++++++++++++++
 lib/livebook_web/helpers.ex                   |  2 +-
 lib/livebook_web/live/session_live.ex         |  8 ++--
 .../live/session_live/cell_component.ex       |  4 +-
 5 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/assets/css/components.css b/assets/css/components.css
index 0b0074f9e..d36d52e5a 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -54,7 +54,7 @@
   }
 
   .icon-button {
-    @apply p-1 flex items-center justify-center text-gray-400 hover:text-gray-800 rounded-full;
+    @apply p-1 flex items-center justify-center text-gray-500 hover:text-gray-900 rounded-full;
   }
 
   .icon-button:focus {
@@ -209,7 +209,7 @@
   }
 
   .menu-item {
-    @apply w-full flex space-x-3 px-5 py-2 items-center hover:bg-gray-50 focus:bg-gray-50 whitespace-nowrap;
+    @apply w-full flex space-x-3 px-5 py-2 items-center hover:bg-gray-100 focus:bg-gray-100 whitespace-nowrap;
   }
 
   /* Boxes */
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 5f55a82b3..8751ddab7 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -49,6 +49,54 @@ module.exports = {
           800: "#9D0C2B",
           900: "#7F072B",
         },
+        green: {
+          50: "#F3F9F3",
+          100: "#E9F4E9",
+          200: "#D2E7D1",
+          300: "#A5D0A3",
+          400: "#77B876",
+          500: "#4AA148",
+          600: "#1D891A",
+          700: "#137518",
+          800: "#0D6219",
+          900: "#084F18",
+        },
+        yellow: {
+          50: "#FFFAF5",
+          100: "#FFF7EC",
+          200: "#FFEED9",
+          300: "#FFDCB2",
+          400: "#FFCB8C",
+          500: "#FFB965",
+          600: "#FFA83F",
+          700: "#DB842E",
+          800: "#B7641F",
+          900: "#934814",
+        },
+        'green-bright': {
+          50: "#F0FDF4",
+          100: "#DCFCE7",
+          200: "#BBF7D0",
+          300: "#86EFAC",
+          400: "#4ADE80",
+          500: "#22C55E",
+          600: "#16A34A",
+          700: "#15803D",
+          800: "#166534",
+          900: "#14532D",
+        },
+        'yellow-bright': {
+          50: "#FEFCE8",
+          100: "#FEF9C3",
+          200: "#FEF08A",
+          300: "#FDE047",
+          400: "#FACC15",
+          500: "#EAB308",
+          600: "#CA8A04",
+          700: "#A16207",
+          800: "#854D0E",
+          900: "#713F12",
+        },
       },
     },
   },
diff --git a/lib/livebook_web/helpers.ex b/lib/livebook_web/helpers.ex
index ed4039489..b7efec9a8 100644
--- a/lib/livebook_web/helpers.ex
+++ b/lib/livebook_web/helpers.ex
@@ -256,7 +256,7 @@ defmodule LivebookWeb.Helpers do
 
     ~H"""
     <div class="flex flex-col space-y-1">
-      <span class="text-xs text-gray-500">
+      <span class="text-sm text-gray-500">
         <%= @label %>
       </span>
       <span class={"text-gray-800 text-sm font-semibold #{if @one_line, do: "whitespace-nowrap overflow-auto tiny-scrollbar"}"}>
diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex
index d778d4ad0..bd94818a8 100644
--- a/lib/livebook_web/live/session_live.ex
+++ b/lib/livebook_web/live/session_live.ex
@@ -389,8 +389,7 @@ defmodule LivebookWeb.SessionLive do
           Runtime
         </h3>
         <%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session.id),
-              class: "icon-button",
-              type: "button" do  %>
+              class: "icon-button" do  %>
           <.remix_icon icon="settings-3-line text-xl" />
         <% end %>
       </div>
@@ -423,8 +422,7 @@ defmodule LivebookWeb.SessionLive do
               <span>Connect</span>
             </button>
             <%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session.id),
-                  class: "button-base button-outlined-gray bg-transparent",
-                  type: "button" do  %>
+                  class: "button-base button-outlined-gray bg-transparent" do  %>
               Configure
             <% end %>
           </div>
@@ -451,7 +449,7 @@ defmodule LivebookWeb.SessionLive do
   defp session_status(%{status: :stale} = assigns) do
     ~H"""
     <button data-element="focus-cell-button" data-target={@cell_id}>
-      <.status_indicator circle_class="bg-yellow-200">
+      <.status_indicator circle_class="bg-yellow-bright-200">
       </.status_indicator>
     </button>
     """
diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex
index f8386c748..ca12a0c47 100644
--- a/lib/livebook_web/live/session_live/cell_component.ex
+++ b/lib/livebook_web/live/session_live/cell_component.ex
@@ -275,7 +275,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
   defp cell_status(%{cell_view: %{validity_status: :evaluated}} = assigns) do
     ~H"""
     <.status_indicator
-      circle_class="bg-green-400"
+      circle_class="bg-green-bright-400"
       change_indicator={true}
       tooltip={evaluated_label(@cell_view.evaluation_time_ms)}>
       Evaluated
@@ -285,7 +285,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
 
   defp cell_status(%{cell_view: %{validity_status: :stale}} = assigns) do
     ~H"""
-    <.status_indicator circle_class="bg-yellow-200" change_indicator={true}>
+    <.status_indicator circle_class="bg-yellow-bright-200" change_indicator={true}>
       Stale
     </.status_indicator>
     """