Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor design improvements #858

Merged
merged 7 commits into from
Jan 13, 2022
Merged

Minor design improvements #858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
19673ca
Adds the greens and yellows from the custom color palette
cristineguadelupe Jan 12, 2022
06f8ffb
Keeps the cell status indicators with the original bright colors
cristineguadelupe Jan 12, 2022
31694e6
Increases icon-button contrast
cristineguadelupe Jan 13, 2022
411cf47
Increases labeled_text font-size
cristineguadelupe Jan 13, 2022
5c4d324
Removes type: button to fix the runtime sidebar buttons style on Safari
cristineguadelupe Jan 13, 2022
7d3ae83
Increases the toggleable menu contrast on hover
cristineguadelupe Jan 13, 2022
6985234
Use the same color for the stale state in the sections sidebar
cristineguadelupe Jan 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down
48 changes: 48 additions & 0 deletions assets/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion lib/livebook_web/helpers.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}"}>
Expand Down
8 changes: 3 additions & 5 deletions lib/livebook_web/live/session_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
"""
Expand Down
4 changes: 2 additions & 2 deletions lib/livebook_web/live/session_live/cell_component.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We mirror the status in the bottom-right indicators and in sections panel, if you look bg-yellow-200 you should find all places :D

Stale
</.status_indicator>
"""
Expand Down