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
This commit is contained in:
Cristine Guadelupe 2022-01-13 15:06:11 -03:00 committed by GitHub
parent 67952b07be
commit 9690e2ac51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 56 additions and 10 deletions

View file

@ -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 */

View file

@ -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",
},
},
},
},

View file

@ -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"}"}>

View file

@ -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>
"""

View file

@ -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>
"""