feat: zen-mode/go-to-plus button style tweaks (#7006)

This commit is contained in:
David Luzar 2023-09-19 14:20:59 +02:00 committed by GitHub
parent e3f4f567b8
commit 4b11f43117
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 22 deletions

View File

@ -56,22 +56,36 @@
}
.disable-zen-mode {
height: 30px;
padding: 10px;
position: absolute;
bottom: 10px;
bottom: 0;
[dir="ltr"] & {
right: 15px;
right: 1rem;
}
[dir="rtl"] & {
left: 15px;
left: 1rem;
}
font-size: 10px;
padding: 10px;
font-weight: 500;
opacity: 0;
visibility: hidden;
transition: visibility 0s linear 0s, opacity 0.5s;
font-family: var(--ui-font);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
border-radius: var(--border-radius-lg);
border: 1px solid var(--default-border-color);
background-color: var(--island-bg-color);
color: var(--text-primary-color);
&:hover {
background-color: var(--button-hover-bg);
}
&:active {
border-color: var(--color-primary);
}
&--visible {
opacity: 1;
visibility: visible;

View File

@ -425,17 +425,6 @@
}
}
.disable-zen-mode {
border-radius: var(--border-radius-lg);
background-color: var(--color-gray-20);
border: 1px solid var(--color-gray-30);
padding: 10px 20px;
&:hover {
background-color: var(--color-gray-30);
}
}
.scroll-back-to-content {
border-radius: var(--border-radius-lg);
background-color: var(--island-bg-color);

View File

@ -2,6 +2,7 @@ import React from "react";
import { Footer } from "../../packages/excalidraw/index";
import { EncryptedIcon } from "./EncryptedIcon";
import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
import { isExcalidrawPlusSignedUser } from "../app_constants";
export const AppFooter = React.memo(() => {
return (
@ -13,8 +14,11 @@ export const AppFooter = React.memo(() => {
alignItems: "center",
}}
>
{isExcalidrawPlusSignedUser ? (
<ExcalidrawPlusAppLink />
) : (
<EncryptedIcon />
)}
</div>
</Footer>
);

View File

@ -77,13 +77,14 @@
align-items: center;
border: 1px solid var(--color-primary);
padding: 0.5rem 0.75rem;
border-radius: var(--space-factor);
border-radius: var(--border-radius-lg);
background-color: var(--island-bg-color);
color: var(--color-primary) !important;
text-decoration: none !important;
font-size: 0.75rem;
box-sizing: border-box;
height: var(--default-button-size);
height: var(--lg-button-size);
&:hover {
background-color: var(--color-primary);