From 12d8c1d03e7542fbd8ece07babec6545075adbe2 Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Thu, 24 Apr 2025 17:12:42 +0000 Subject: [PATCH 1/4] 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. --- src/frontend/src/auth/AuthModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/auth/AuthModal.tsx b/src/frontend/src/auth/AuthModal.tsx index 088bdb8..8bad37e 100644 --- a/src/frontend/src/auth/AuthModal.tsx +++ b/src/frontend/src/auth/AuthModal.tsx @@ -139,7 +139,7 @@ const AuthModal: React.FC = ({ {/* Footer */}
- + = ({ | - + = ({ | - +
From 1632419ac5c01ed43bd4cc65ea99c5ce3b3ab5a4 Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Thu, 24 Apr 2025 17:32:09 +0000 Subject: [PATCH 2/4] 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. --- src/frontend/src/AuthGate.tsx | 2 +- src/frontend/src/{auth => ui}/AuthModal.tsx | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/frontend/src/{auth => ui}/AuthModal.tsx (100%) diff --git a/src/frontend/src/AuthGate.tsx b/src/frontend/src/AuthGate.tsx index 1c1dfc6..6a1f274 100644 --- a/src/frontend/src/AuthGate.tsx +++ b/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. diff --git a/src/frontend/src/auth/AuthModal.tsx b/src/frontend/src/ui/AuthModal.tsx similarity index 100% rename from src/frontend/src/auth/AuthModal.tsx rename to src/frontend/src/ui/AuthModal.tsx From 762065292a8f9783958258a68b207eed3e7876de Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Thu, 24 Apr 2025 21:22:45 +0000 Subject: [PATCH 3/4] 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. --- src/frontend/src/styles/AuthModal.scss | 86 +++++++++++--------------- src/frontend/src/ui/AuthModal.tsx | 12 ++-- 2 files changed, 43 insertions(+), 55 deletions(-) diff --git a/src/frontend/src/styles/AuthModal.scss b/src/frontend/src/styles/AuthModal.scss index c55cf78..9adccae 100644 --- a/src/frontend/src/styles/AuthModal.scss +++ b/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%; - } } diff --git a/src/frontend/src/ui/AuthModal.tsx b/src/frontend/src/ui/AuthModal.tsx index 8bad37e..31da01b 100644 --- a/src/frontend/src/ui/AuthModal.tsx +++ b/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 = ({ - description = "A free whiteboard IDE in your browser.", + description = <>Welcome to your whiteboard IDE. Open terminals and start coding right away in your own Ubuntu VM!, + warningText = "🚧 This is a beta. We can't guarantee data integrity! 🚧", }) => { const [isMounted, setIsMounted] = useState(false); @@ -63,7 +63,6 @@ const AuthModal: React.FC = ({
@@ -175,6 +174,11 @@ const AuthModal: React.FC = ({
+ + {/* Warning message */} +
+ {warningText} +
From cf975f16b4d25462bcf39a18b0972064e9ac297f Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Thu, 24 Apr 2025 21:52:58 +0000 Subject: [PATCH 4/4] 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 --- src/frontend/src/ui/AuthModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/ui/AuthModal.tsx b/src/frontend/src/ui/AuthModal.tsx index 31da01b..80d5f6d 100644 --- a/src/frontend/src/ui/AuthModal.tsx +++ b/src/frontend/src/ui/AuthModal.tsx @@ -10,7 +10,7 @@ interface AuthModalProps { const AuthModal: React.FC = ({ description = <>Welcome to your whiteboard IDE. Open terminals and start coding right away in your own Ubuntu VM!, - warningText = "🚧 This is a beta. We can't guarantee data integrity! 🚧", + warningText = "🚧 This is a beta. Make backups! 🚧", }) => { const [isMounted, setIsMounted] = useState(false);