style: auth modal improvements (#20)

* fix: update AuthModal links to open in new tab

- Added target="_blank" and rel="noopener noreferrer" attributes to footer links in AuthModal for improved security and user experience.

* refactor: move AuthModal to ui directory and update import path in AuthGate

- Moved AuthModal component to the ui directory for better organization.
- Updated the import path in AuthGate to reflect the new location of AuthModal.

* style: update AuthModal styles and content

- Added a fade-in slide-up animation for the favicon with a delay.
- Updated the modal description to include highlighted text.
- Reintroduced a warning message section in the modal.
- Removed the beta text from the modal title to reduce redudancy.

* fix: update warning text in AuthModal to emphasize data backup

- Changed the warning message in AuthModal from "We can't guarantee data integrity!" to "Make backups!" to better inform users about data safety during the beta phase.

Co-authored-by: Nerdic <nerdic@nerdictranslator.com>

---------

Co-authored-by: Nerdic <nerdic@nerdictranslator.com>

Author: atyrode

src/frontend/src/AuthGate.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useAuthCheck } from "./api/hooks";
-import AuthModal from "./auth/AuthModal";
+import AuthModal from "./ui/AuthModal";
 
 /**
  * If unauthenticated, it shows the AuthModal as an overlay, but still renders the app behind it.

src/frontend/src/styles/AuthModal.scss

@@ -1,6 +1,6 @@
 /* Auth Modal Styles */
 .auth-modal-overlay {
-  position: fixed;
+  position: absolute;
   inset: 0;
   z-index: 50;
   display: flex;
@@ -21,9 +21,8 @@
 .auth-modal-backdrop {
   position: absolute;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(0.8px);
-  z-index: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: -1;
 }
 
 /* Modal container with animation */
@@ -43,13 +42,28 @@
 /* Favicon behind modal, relative to wrapper */
 .auth-modal-favicon {
   position: absolute;
-  top: -13%;
+  top: -11.5%;
   left: 8%;
   width: 65px;
   height: 65px;
   z-index: 0; /* Behind modal */
   pointer-events: none;
   user-select: none;
+  opacity: 0;
+  animation: fadeInSlideUp 0.3s ease-out forwards;
+  animation-delay: 1s; /* Delay appearance by 1 second */
+}
+
+/* Animation for favicon to slide up and fade in */
+@keyframes fadeInSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Modal content */
@@ -59,7 +73,7 @@
   padding: 20px;
   margin: 12px;
   padding-top: 0px;
-  padding-bottom: 5px;
+  padding-bottom: 0px;
 }
 
 /* Modal title container */
@@ -92,17 +106,6 @@
   color: #fa8933;
 }
 
-/* Beta text */
-.beta-text {
-  position: absolute;
-  color: #555;
-  font-weight: normal;
-  font-size: 18px;
-  display: inline-block;
-  top: 5%;
-  right: -3%;
-}
-
 /* Modal description */
 .auth-modal-description {
   margin-top: 35px;
@@ -112,6 +115,12 @@
   line-height: 1.5;
   text-align: center;
   white-space: pre-line;
+  max-width: 270px;
+  
+  .highlight {
+    color: #cfcfcf;
+    font-weight: bold;
+  }
 }
 
 /* Sign-in buttons container */
@@ -176,6 +185,15 @@
   color: #a0a0a0;
 }
 
+/* Warning message */
+.auth-modal-warning {
+  margin-top: 15px;
+  text-align: center;
+  color: #606060bd;
+  font-size: 12px;
+  font-weight: 400;
+}
+
 /* Animation keyframes */
 @keyframes fadeIn {
   from {
@@ -216,38 +234,4 @@
     align-items: center;
     justify-content: center;
   }
-  .auth-modal-favicon {
-    width: 70px;
-    height: 70px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 0;
-    border-radius: 12px;
-  }
-  .auth-modal-content {
-    width: 100%;
-    max-width: 500px;
-    padding: 20px;
-    margin: 12px;
-    height: auto;
-    display: block;
-  }
-  .auth-modal-title-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    gap: 0.5rem;
-  }
-  .beta-text {
-    position: absolute;
-    color: #555;
-    font-weight: normal;
-    font-size: 18px;
-    display: inline-block;
-    top: 10%;
-    right: 15%;
-  }
 }

src/frontend/src/auth/AuthModal.tsx src/frontend/src/ui/AuthModal.tsxsrc/frontend/src/auth/AuthModal.tsx renamed to src/frontend/src/ui/AuthModal.tsx

@@ -3,14 +3,14 @@ import ReactDOM from "react-dom";
 import { capture } from "../utils/posthog";
 import { Mail } from "lucide-react";
 import { queryClient } from "../api/queryClient";
-import "../styles/AuthModal.scss";
 
 interface AuthModalProps {
-  description?: string;
+  description?: React.ReactNode;
 }
 
 const AuthModal: React.FC<AuthModalProps> = ({
-  description = "A free whiteboard IDE in your browser.",
+  description = <>Welcome to your <strong className="highlight">whiteboard IDE</strong>. 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. Make backups! 🚧",
 }) => {
   const [isMounted, setIsMounted] = useState(false);
 
@@ -63,7 +63,6 @@ const AuthModal: React.FC<AuthModalProps> = ({
           <div className="auth-modal-content">
             <div id="modal-title" className="auth-modal-title-container">
               <h2 className="auth-modal-title">pad<span className="auth-modal-title-dot">.ws</span></h2>
-              <span className="beta-text">(beta)</span>
             </div>
             <div className="auth-modal-separator" />
 
@@ -139,7 +138,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
 
             {/* Footer */}
             <div className="auth-modal-footer">
-              <a href="https://discord.com/invite/NnXSESxWpA" className="auth-modal-footer-link">
+              <a href="https://discord.com/invite/NnXSESxWpA" className="auth-modal-footer-link" target="_blank" rel="noopener noreferrer">
                 <svg
                   width="20"
                   height="20"
@@ -154,7 +153,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
                 </svg>
               </a>
               |
-              <a href="https://github.com/pad-ws/pad.ws" className="auth-modal-footer-link">
+              <a href="https://github.com/pad-ws/pad.ws" className="auth-modal-footer-link" target="_blank" rel="noopener noreferrer">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
@@ -171,10 +170,15 @@ const AuthModal: React.FC<AuthModalProps> = ({
                 </svg>
               </a>
               |
-              <a href="mailto:contact@pad.ws" className="auth-modal-footer-link">
+              <a href="mailto:contact@pad.ws" className="auth-modal-footer-link" target="_blank" rel="noopener noreferrer">
                 <Mail size={20} />
               </a>
             </div>
+            
+            {/* Warning message */}
+            <div className="auth-modal-warning">
+              {warningText}
+            </div>
           </div>
         </div>
       </div>