From 7e28ac5ca0e991e2543001f13cdb72a6a6fea2c7 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Wed, 15 Jul 2026 01:26:56 -0500
Subject: [PATCH] Re-add welcome modal

---
 package.json                         |  2 +-
 src/css/style.css                    | 46 ++++++++++++++++------------
 src/js/modals/welcome.modal.js       |  4 +++
 src/js/templates/sidebar.template.js |  2 +-
 src/js/views/home.view.js            | 18 +++++------
 5 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 810b1c62..fe28d906 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.17.159",
+  "version": "0.17.160",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index a57b5fbd..a5f1d7eb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1385,18 +1385,6 @@ button.sidebar-plugin-nav-item {
   gap: 20px;
 }
 
-.sidebar-about-link {
-  margin: 16px;
-  margin-left: 35px;
-  text-align: left;
-}
-
-@media (hover: hover) {
-  .sidebar-about-link:hover {
-    text-decoration: underline;
-  }
-}
-
 @media (min-width: 800px) {
   .logged-out-sidebar .sidebar-header {
     align-items: center;
@@ -1421,6 +1409,7 @@ button.sidebar-plugin-nav-item {
   width: 100%;
   padding-top: 10px;
   padding-left: 20px;
+  padding-bottom: 6px;
 }
 
 @media (min-width: 800px) {
@@ -1445,7 +1434,8 @@ button.sidebar-plugin-nav-item {
   min-width: 100px;
 }
 
-.logged-out-sidebar .login-button {
+.logged-out-sidebar .login-button,
+.logged-out-sidebar .sidebar-about-link {
   width: fit-content;
   margin-left: 16px;
   margin-top: 8px;
@@ -1454,15 +1444,10 @@ button.sidebar-plugin-nav-item {
 }
 
 @media (min-width: 800px) {
-  .logged-out-sidebar .login-button {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
+  .logged-out-sidebar .login-button,
   .logged-out-sidebar .sidebar-about-link {
     margin-left: auto;
     margin-right: auto;
-    text-align: center;
   }
 }
 
@@ -9874,6 +9859,29 @@ p.setting-item-desc {
   }
 }
 
+.bottom-sheet.welcome-modal {
+  width: 90%;
+  max-width: 410px;
+  top: 50%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  max-height: 80vh;
+  border: var(--hair) solid var(--post-border-color);
+  border-radius: var(--dialog-border-radius);
+  box-shadow: none;
+  animation: none;
+  transform: translate(-50%, -50%);
+}
+
+.bottom-sheet.welcome-modal::before {
+  display: none;
+}
+
+.bottom-sheet.welcome-modal .modal-dialog-content {
+  padding-top: 24px;
+}
+
 .sidebar-action-items {
   display: flex;
   flex-direction: column;
diff --git a/src/js/modals/welcome.modal.js b/src/js/modals/welcome.modal.js
index 407e089e..81e2e2f8 100644
--- a/src/js/modals/welcome.modal.js
+++ b/src/js/modals/welcome.modal.js
@@ -11,6 +11,10 @@ export class WelcomeModal extends Modal {
     return { "data-testid": "welcome-modal" };
   }
 
+  get dragToDismiss() {
+    return false;
+  }
+
   render({ dismiss }) {
     return html`
       <div class="modal-dialog-content">
diff --git a/src/js/templates/sidebar.template.js b/src/js/templates/sidebar.template.js
index e6fd5f98..b9fdfa77 100644
--- a/src/js/templates/sidebar.template.js
+++ b/src/js/templates/sidebar.template.js
@@ -125,7 +125,7 @@ function loggedOutSidebarTemplate({ activeNavItem, onClickActiveItem }) {
           >Sign in</a
         >
         <button
-          class="sidebar-about-link sidebar-text-link"
+          class="rounded-button sidebar-about-link"
           data-testid="sidebar-about-link"
           @click=${() => {
             WelcomeModal.open();
diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js
index 4fc80b8b..4946c6bd 100644
--- a/src/js/views/home.view.js
+++ b/src/js/views/home.view.js
@@ -10,7 +10,7 @@ import { FEED_PAGE_SIZE, LOGGED_OUT_FEED_URI } from "/js/config.js";
 import { bindToPage, pageEffect } from "/js/router.js";
 import { showToast } from "/js/toasts.js";
 import { Signal, ReactiveStore } from "/js/signals.js";
-// import { WelcomeModal } from "/js/modals/welcome.modal.js";
+import { WelcomeModal } from "/js/modals/welcome.modal.js";
 
 class HomeView extends View {
   async render({
@@ -26,7 +26,7 @@ class HomeView extends View {
     },
   }) {
     const CURRENT_FEED_URI_STORAGE_KEY = "home-view-currentFeedUri";
-    // const WELCOME_MODAL_SEEN_STORAGE_KEY = "welcome-modal-seen";
+    const WELCOME_MODAL_SEEN_STORAGE_KEY = "welcome-modal-seen";
 
     const storedFeedUri = isAuthenticated
       ? localStorage.getItem(CURRENT_FEED_URI_STORAGE_KEY)
@@ -48,13 +48,13 @@ class HomeView extends View {
       resetToDefaultFeed();
     }
 
-    // if (
-    //   !isAuthenticated &&
-    //   !sessionStorage.getItem(WELCOME_MODAL_SEEN_STORAGE_KEY)
-    // ) {
-    //   sessionStorage.setItem(WELCOME_MODAL_SEEN_STORAGE_KEY, "true");
-    //   WelcomeModal.open();
-    // }
+    if (
+      !isAuthenticated &&
+      !sessionStorage.getItem(WELCOME_MODAL_SEEN_STORAGE_KEY)
+    ) {
+      sessionStorage.setItem(WELCOME_MODAL_SEEN_STORAGE_KEY, "true");
+      WelcomeModal.open();
+    }
 
     if (isAuthenticated) {
       pageEffect(root, () => {
-- 
2.51.2