diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index b5c88cdf..73e39229 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -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;
diff --git a/src/css/styles.scss b/src/css/styles.scss
index d46ab1bc..bb906332 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -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);
diff --git a/src/excalidraw-app/components/AppFooter.tsx b/src/excalidraw-app/components/AppFooter.tsx
index 7011a1c4..62487321 100644
--- a/src/excalidraw-app/components/AppFooter.tsx
+++ b/src/excalidraw-app/components/AppFooter.tsx
@@ -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 ? (
+
+ ) : (
+
+ )}
);
diff --git a/src/excalidraw-app/index.scss b/src/excalidraw-app/index.scss
index 38c4c1a3..d7ab7983 100644
--- a/src/excalidraw-app/index.scss
+++ b/src/excalidraw-app/index.scss
@@ -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);