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

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;

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);

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>
   );

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);