feat: enhance AuthDialog with new styles and speech bubble

atyrode · atyrode · commit 2bf7cfc2c065 · 2025-04-25T17:24:29.000Z
- Updated AuthDialog.scss to improve layout and responsiveness, including new animations for the logo and speech bubble.
- Modified AuthDialog component to display a random greeting message from a predefined list.
- Adjusted styles in index.scss for modal backgrounds to enhance visual consistency.
- Improved button styles and layout within the authentication modal for better user experience.
diff --git a/src/frontend/src/styles/AuthDialog.scss b/src/frontend/src/styles/AuthDialog.scss
@@ -1,36 +1,149 @@
 /* Auth Modal Styles */
 
+.excalidraw .Dialog--fullscreen {
+  .auth-modal {
+    &__logo-container {
+      display: none;
+    }
+    &__content {
+      height: 100%;
+      margin-bottom: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+    }
+    &__buttons {
+      margin-bottom: auto;
+    }
+  }
+
+  .Island {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .auth-modal {
 
+  .Island {
+    padding-top: 15px !important;
+    padding-bottom: 20px !important;
+  }
+
+  &__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(1px);
+  }
+
+  &__logo-container {
+    position: relative;
+    width: fit-content;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    animation: logo-fade-in 2s cubic-bezier(0.00, 1.26, 0.64, 0.95) forwards;
+    animation-delay: 0.5s;
+  }
+
+  @keyframes logo-fade-in {
+    from {
+      transform: translate(-270px, -318px);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-230px, -318px);
+      opacity: 1;
+    }
+  }
+
+  &__logo {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+  }
+  
+  &__logo-speech-bubble {
+    position: absolute;
+    background-color: rgb(232, 232, 232);
+    color: #333;
+    padding: 8px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    max-width: 180px;
+    left: 73px;
+    top: 0px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    animation: bubble-appear 0.3s ease-out forwards;
+    animation-delay: 1.5s;
+    opacity: 0;
+    transform: translateY(5px);
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 10px;
+      border-width: 5px 10px 5px 0;
+      border-style: solid;
+      border-color: transparent rgb(232, 232, 232) transparent transparent;
+    }
+  }
+  
+  @keyframes bubble-appear {
+    from {
+      opacity: 0;
+      transform: translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   &__title-container {
     display: flex;
     align-items: center;
-
   }
 
   &__title {
     margin: 0 auto;
-    font-size: 72px;
+    font-size: 65px;
     font-weight: 700;
     color: white;
     text-align: center;
-    display: inline-block;
     
     &-dot {
       color: #fa8933;
     }
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   &__description {
     color: #a0a0a9;
     font-size: 18px;
     line-height: 1.5;
     text-align: center;
     white-space: pre-line;
-    padding: 0 90px;
     margin-bottom: 40px;
-    margin-top: 40px;
-    
+    margin-top: 10px;
+    min-width: 300px;
+    max-width: 65%;
+
     .highlight {
       color: #cfcfcf;
       font-weight: bold;
@@ -42,17 +155,19 @@
     align-items: center;
     flex-direction: column;
     gap: 13px;
-    margin-bottom: 40px;
+    width: 100%;
+    padding-bottom: 50px;
 
     button {
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 65%;
+      min-width: 250px;
       gap: 8px;
-      width: 85%;
       height: 44px;
       border-radius: 6px;
-      border: 1px solid #727279;
+      border: 2px solid #727279;
       font-size: 15px;
       font-weight: 500;
       transition: all 0.2s ease;
@@ -61,7 +176,7 @@
       color: white;
   
       &:hover {
-        border: 1px solid #cc6d24;
+        border: 2px solid #cc6d24;
       }
     }
   }
@@ -74,7 +189,10 @@
     gap: 16px;
     color: #a0a0a0;
     margin-bottom: 10px;
-    
+    padding-top: 10px;
+    border-top: 1px solid var(--dialog-border-color);
+    width: 100%;
+
     &-link {
       display: flex;
       align-items: center;
@@ -89,9 +207,9 @@
   }
 
   &__warning {
-    text-align: center;
-    color: #606060bd;
-    font-size: 12px;
+    text-align: right;
+    color: #828282bd;
+    font-size: 14px;
     font-weight: 400;
   }
 }
diff --git a/src/frontend/src/styles/index.scss b/src/frontend/src/styles/index.scss
@@ -62,8 +62,8 @@ body {
 }
 
 .excalidraw .Modal__background {
-    background-color: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(1px);
+    background-color: rgba(0, 0, 0, 0);
+    backdrop-filter: blur(0px);
     animation: Modal__background__fade-in 0.3s ease-out forwards !important;
     
     &.animations-disabled {
diff --git a/src/frontend/src/ui/AuthDialog.tsx b/src/frontend/src/ui/AuthDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { capture } from "../utils/posthog";
 import { Mail } from "lucide-react";
 import { queryClient } from "../api/queryClient";
@@ -14,15 +14,48 @@ interface AuthDialogProps {
 }
 
 export const AuthDialog = ({
-  description = <>Welcome to your <strong className="highlight">whiteboard IDE</strong>. <br /><br /> Open <strong className="highlight">terminals</strong> and start coding right away in your own <strong className="highlight">Ubuntu VM</strong>!</>,
-  warningText = "This is a beta. Backup your work!",
+  description = <>Welcome to your <strong className="highlight">whiteboard IDE</strong>. <br /><br /> Open <strong className="highlight">terminals</strong>, <strong className="highlight">VSCode</strong> or <strong className="highlight">Cursor</strong> in your pad, and start coding right away.</>,
+  warningText = <>This is a open-source project in beta.<br /> Backup your work!</>,
   onClose,
   children,
 }: AuthDialogProps) => {
   const [modalIsShown, setModalIsShown] = useState(true);
   
+  // Array of random messages that the logo can "say"
+  const logoMessages = [
+    "Hello there!",
+    "Welcome to pad.ws!",
+    "Ready to code?",
+    "Let's build something cool!",
+    "Code, collaborate, create!",
+    "Happy coding!",
+    "Ideas become reality here!",
+    "Let's get productive!",
+    "Let's turn ideas into code!"
+  ];
+  
+  // Select a random message when component mounts
+  const randomMessage = useMemo(() => {
+    const randomIndex = Math.floor(Math.random() * logoMessages.length);
+    return logoMessages[randomIndex];
+  }, []);
+  
   useEffect(() => {
     capture("auth_modal_shown");
+    
+    // Load GitHub buttons script
+    const script = document.createElement('script');
+    script.src = 'https://buttons.github.io/buttons.js';
+    script.async = true;
+    script.defer = true;
+    document.body.appendChild(script);
+    
+    return () => {
+      // Clean up script when component unmounts
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+    };
   }, []);
 
   useEffect(() => {
@@ -54,7 +87,6 @@ export const AuthDialog = ({
   // Prepare the content for the Dialog
   const dialogContent = (
     <div className="auth-modal__content">
-
       <p className="auth-modal__description">{description}</p>
       
       {/* Sign-in buttons */}
@@ -88,46 +120,55 @@ export const AuthDialog = ({
 
       {/* Footer */}
       <div className="auth-modal__footer">
-        <a href="https://discord.com/invite/NnXSESxWpA" className="auth-modal__footer-link" target="_blank" rel="noopener noreferrer">
-          <DiscordIcon />
-        </a>
-        |
-        <a href="https://github.com/pad-ws/pad.ws" className="auth-modal__footer-link" target="_blank" rel="noopener noreferrer">
-          <GithubIcon />
-        </a>
-        |
-        <a href="mailto:contact@pad.ws" className="auth-modal__footer-link" target="_blank" rel="noopener noreferrer">
-          <Mail size={20} />
+                {/* Warning message */}
+                <div className="auth-modal__warning">
+          {warningText}
+        </div>
+
+        {/* GitHub Star button */}
+        <a className="github-button" 
+           href="https://github.com/pad-ws/pad.ws" 
+           data-color-scheme="no-preference: dark_dimmed; light: dark_dimmed; dark: dark_dimmed;" 
+           data-icon="octicon-star" 
+           data-size="large" 
+           data-show-count="true" 
+           aria-label="Star pad-ws/pad.ws on GitHub">
+          Star
         </a>
+
+
       </div>
       
-      {/* Warning message */}
-      <div className="auth-modal__warning">
-        {warningText}
-      </div>
     </div>
   );
 
   return (
     <>
       {modalIsShown && (
-        <Dialog
-          className="auth-modal"
-          size="small"
-          onCloseRequest={handleClose}
-          title={
-            <div id="modal-title" className="auth-modal__title-container">
-              {/* <img 
-                src="/assets/images/favicon.png" 
-                alt="pad.ws logo" 
-                className="auth-modal__logo" 
-              /> */}
-              <h2 className="auth-modal__title">pad<span className="auth-modal__title-dot">.ws</span></h2>
+        <div className="auth-modal__wrapper">
+          <div className="auth-modal__logo-container">
+            <img 
+              src="/assets/images/favicon.png" 
+              alt="pad.ws logo" 
+              className="auth-modal__logo" 
+            />
+            <div className="auth-modal__logo-speech-bubble">
+              {randomMessage}
             </div>
-          }
-          closeOnClickOutside={false}
-          children={children || dialogContent}
-        />
+          </div>
+          <Dialog
+            className="auth-modal"
+            size="small"
+            onCloseRequest={handleClose}
+            title={
+              <div id="modal-title" className="auth-modal__title-container">
+                <h2 className="auth-modal__title">pad<span className="auth-modal__title-dot">.ws</span></h2>
+              </div>
+            }
+            closeOnClickOutside={false}
+            children={children || dialogContent}
+          />
+        </div>
       )}
     </>
   );

Original file line number	Diff line number	Diff line change
`@@ -62,8 +62,8 @@ body {`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`.excalidraw .Modal__background {`
`65`		`- background-color: rgba(0, 0, 0, 0.2);`
`66`		`- backdrop-filter: blur(1px);`
	`65`	`+ background-color: rgba(0, 0, 0, 0);`
	`66`	`+ backdrop-filter: blur(0px);`
`67`	`67`	`animation: Modal__background__fade-in 0.3s ease-out forwards !important;`
`68`	`68`
`69`	`69`	`&.animations-disabled {`