mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-18 10:44:33 +08:00
Amend error toast and pill styling (#4454)
* remove error gradient and add border to toast * changelog * tweak styling for light and dark error status and toast * run prettier * restore removed onclick * remove formatting * fix dracula test --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Hannah
GitHub
parent
36a6f37711
commit
7dc73d2bec
@ -41,6 +41,7 @@ demo.launch()
|
||||
|
||||
## Other Changes:
|
||||
|
||||
- Change styling of status and toast error components by [@hannahblair](https://github.com/hannahblair) in [PR 4454](https://github.com/gradio-app/gradio/pull/4454).
|
||||
- Clean up unnecessary `new Promise()`s by [@akx](https://github.com/akx) in [PR 4442](https://github.com/gradio-app/gradio/pull/4442).
|
||||
- Minor UI cleanup for Examples and Dataframe components [@aliabid94](https://github.com/aliabid94) in [PR 4455](https://github.com/gradio-app/gradio/pull/4455).
|
||||
- Add Catalan translation [@jordimas](https://github.com/jordimas) in [PR 4483](https://github.com/gradio-app/gradio/pull/4483).
|
||||
|
||||
@ -617,6 +617,8 @@ class Base(ThemeClass):
|
||||
error_border_width_dark=None,
|
||||
error_text_color=None,
|
||||
error_text_color_dark=None,
|
||||
error_icon_color=None,
|
||||
error_icon_color_dark=None,
|
||||
input_background_fill=None,
|
||||
input_background_fill_dark=None,
|
||||
input_background_fill_focus=None,
|
||||
@ -1412,13 +1414,13 @@ class Base(ThemeClass):
|
||||
)
|
||||
)
|
||||
self.error_background_fill = error_background_fill or getattr(
|
||||
self, "error_background_fill", colors.red.c100
|
||||
self, "error_background_fill", colors.red.c50
|
||||
)
|
||||
self.error_background_fill_dark = error_background_fill_dark or getattr(
|
||||
self, "error_background_fill_dark", "*background_fill_primary"
|
||||
)
|
||||
self.error_border_color = error_border_color or getattr(
|
||||
self, "error_border_color", colors.red.c200
|
||||
self, "error_border_color", colors.red.c100
|
||||
)
|
||||
self.error_border_color_dark = error_border_color_dark or getattr(
|
||||
self, "error_border_color_dark", colors.red.c500
|
||||
@ -1430,10 +1432,16 @@ class Base(ThemeClass):
|
||||
self, "error_border_width_dark", None
|
||||
)
|
||||
self.error_text_color = error_text_color or getattr(
|
||||
self, "error_text_color", colors.red.c500
|
||||
self, "error_text_color", colors.red.c700
|
||||
)
|
||||
self.error_text_color_dark = error_text_color_dark or getattr(
|
||||
self, "error_text_color_dark", colors.red.c500
|
||||
self, "error_text_color_dark", colors.red.c50
|
||||
)
|
||||
self.error_icon_color = error_icon_color or getattr(
|
||||
self, "error_icon_color", colors.red.c700
|
||||
)
|
||||
self.error_icon_color_dark = error_icon_color_dark or getattr(
|
||||
self, "error_icon_color_dark", colors.red.c500
|
||||
)
|
||||
self.input_background_fill = input_background_fill or getattr(
|
||||
self, "input_background_fill", "*neutral_100"
|
||||
|
||||
@ -47,6 +47,12 @@ class Default(Base):
|
||||
super().set(
|
||||
# Colors
|
||||
input_background_fill_dark="*neutral_800",
|
||||
error_background_fill=colors.red.c50,
|
||||
error_background_fill_dark="*neutral_900",
|
||||
error_border_color=colors.red.c100,
|
||||
error_border_color_dark=colors.red.c500,
|
||||
error_icon_color=colors.red.c700,
|
||||
error_icon_color_dark=colors.red.c500,
|
||||
# Transition
|
||||
button_transition="none",
|
||||
# Shadows
|
||||
@ -65,8 +71,6 @@ class Default(Base):
|
||||
# Gradients
|
||||
stat_background_fill="linear-gradient(to right, *primary_400, *primary_200)",
|
||||
stat_background_fill_dark="linear-gradient(to right, *primary_400, *primary_600)",
|
||||
error_background_fill=f"linear-gradient(to right, {colors.red.c100}, *background_fill_secondary)",
|
||||
error_background_fill_dark="*background_fill_primary",
|
||||
checkbox_label_background_fill="linear-gradient(to top, *neutral_50, white)",
|
||||
checkbox_label_background_fill_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
|
||||
checkbox_label_background_fill_hover="linear-gradient(to top, *neutral_100, white)",
|
||||
|
||||
@ -19,27 +19,31 @@
|
||||
|
||||
<div
|
||||
class="toast-body"
|
||||
role="alert"
|
||||
on:click|stopPropagation
|
||||
on:keydown|stopPropagation
|
||||
in:fade={{ duration: 200, delay: 100 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
>
|
||||
<button on:click={close_message} class="toast-close">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="35"
|
||||
height="35"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="close-svg"
|
||||
class="toast-icon"
|
||||
><circle cx="12" cy="12" r="10" /><line
|
||||
x1="12"
|
||||
x2="12"
|
||||
y2="13"
|
||||
y1="7"
|
||||
/><line x1="13" y1="16" x2="11.01" y2="16" /></svg
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="toast-details">
|
||||
<div class="toast-title">Something went wrong</div>
|
||||
@ -48,6 +52,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={close_message}
|
||||
class="toast-close"
|
||||
type="button"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
|
||||
<div class="timer" />
|
||||
</div>
|
||||
|
||||
@ -55,73 +68,63 @@
|
||||
.toast-body {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: var(--size-8);
|
||||
right: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
margin: var(--size-6) var(--size-4);
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
box-shadow: var(--shadow-drop-lg);
|
||||
border: 1px solid var(--error-border-color);
|
||||
border-radius: var(--container-radius);
|
||||
background: var(--error-background-fill);
|
||||
padding: var(--size-4) var(--size-6);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
max-width: 610px;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--size-1) var(--size-3);
|
||||
color: var(--error-text-color);
|
||||
color: var(--color-red-500);
|
||||
font-weight: var(--weight-bold);
|
||||
font-size: var(--text-lg);
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--line-xs);
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
.toast-icon {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: var(--size-2);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-red-600);
|
||||
padding: var(--size-2);
|
||||
padding-left: calc(var(--size-2) - 1px);
|
||||
width: var(--size-10);
|
||||
height: var(--size-10);
|
||||
color: white;
|
||||
padding: var(--size-1);
|
||||
padding-left: calc(var(--size-1) - 1px);
|
||||
color: var(--error-icon-color);
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
margin: 0 var(--size-3);
|
||||
border-radius: var(--size-3);
|
||||
padding: 0px var(--size-1-5);
|
||||
color: var(--error-icon-color);
|
||||
font-size: var(--size-5);
|
||||
line-height: var(--size-5);
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
padding: var(--size-1) var(--size-3);
|
||||
color: var(--body-text-color);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--error-text-color);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.toast-details {
|
||||
padding-left: var(--size-3);
|
||||
margin: var(--size-3) var(--size-3) var(--size-3) 0;
|
||||
width: 100%;
|
||||
}
|
||||
svg {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.close-svg {
|
||||
top: var(--size-2);
|
||||
right: var(--size-2);
|
||||
bottom: var(--size-2);
|
||||
left: var(--size-2);
|
||||
width: var(--size-6);
|
||||
height: var(--size-6);
|
||||
}
|
||||
|
||||
@keyframes countdown {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
@ -137,7 +140,7 @@
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
animation: countdown 10s linear forwards;
|
||||
background: var(--color-red-600);
|
||||
background: var(--error-icon-color);
|
||||
width: 100%;
|
||||
height: var(--size-1);
|
||||
}
|
||||
|
||||
@ -145,6 +145,12 @@ dracula = gr.themes.Base(
|
||||
).set(
|
||||
body_background_fill=dracula_gray.c500,
|
||||
color_accent_soft=dracula_gray.c100,
|
||||
error_border_color="#fecaca",
|
||||
error_background_fill="#fee2e2",
|
||||
error_icon_color="#b91c1c",
|
||||
error_icon_color_dark="#ef4444",
|
||||
error_text_color="#ef4444",
|
||||
error_text_color_dark="#ef4444",
|
||||
background_fill_primary=dracula_gray.c500,
|
||||
background_fill_secondary=dracula_gray.c500,
|
||||
block_background_fill=dracula_gray.c300,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user