From 4b11f43117519c37f34497e6c1b268f8e4c06326 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Tue, 19 Sep 2023 14:20:59 +0200
Subject: [PATCH] feat: zen-mode/go-to-plus button style tweaks (#7006)

---
 src/components/LayerUI.scss                 | 28 +++++++++++++++------
 src/css/styles.scss                         | 11 --------
 src/excalidraw-app/components/AppFooter.tsx |  8 ++++--
 src/excalidraw-app/index.scss               |  5 ++--
 4 files changed, 30 insertions(+), 22 deletions(-)

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",
         }}
       >
-        <ExcalidrawPlusAppLink />
-        <EncryptedIcon />
+        {isExcalidrawPlusSignedUser ? (
+          <ExcalidrawPlusAppLink />
+        ) : (
+          <EncryptedIcon />
+        )}
       </div>
     </Footer>
   );
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);