mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-10-06 11:35:54 +08:00
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:
parent
67952b07be
commit
9690e2ac51
5 changed files with 56 additions and 10 deletions
|
@ -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 */
|
||||
|
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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"}"}>
|
||||
|
|
|
@ -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>
|
||||
"""
|
||||
|
|
|
@ -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>
|
||||
"""
|
||||
|
|
Loading…
Add table
Reference in a new issue