@striae-org/striae 4.1.0 → 4.2.1

package/app/components/user/inactivity-warning.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './inactivity-warning.module.css';
 
 interface InactivityWarningProps {
@@ -15,6 +16,15 @@ export const InactivityWarning = ({
   onSignOut
 }: InactivityWarningProps) => {
   const [countdown, setCountdown] = useState(remainingSeconds);
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: onExtendSession,
+    closeOnBackdrop: false,
+  });
 
   useEffect(() => {
     setCountdown(remainingSeconds);
@@ -46,8 +56,11 @@ export const InactivityWarning = ({
   const seconds = countdown % 60;
 
   return (
-    <div className={styles.overlay}>
+    <div className={styles.overlay} aria-label="Close inactivity warning" {...overlayProps}>
       <div className={styles.modal}>
+        <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close inactivity warning' })}>
+          ×
+        </button>
         <div className={styles.header}>
           <h3>Session Timeout Warning</h3>
         </div>
@@ -66,7 +79,7 @@ export const InactivityWarning = ({
         
         <div className={styles.actions}>
           <button
-            onClick={onExtendSession}
+            onClick={requestClose}
             className={styles.extendButton}
           >
             Extend Session

package/app/components/user/manage-profile.tsx

@@ -8,7 +8,8 @@ import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { getUserData, updateUserData } from '~/utils/data';
 import { auditService } from '~/services/audit';
 import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
-import { FormField, FormButton, FormMessage } from '../form';
+import { FormField, FormButton } from '../form';
+import { Toast } from '~/components/toast/toast';
 import { MfaPhoneUpdateSection } from './mfa-phone-update';
 import styles from './manage-profile.module.css';
 
@@ -26,8 +27,9 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isMfaBusy, setIsMfaBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastType, setToastType] = useState<'success' | 'error'>('success');
   const [showResetForm, setShowResetForm] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showAuditViewer, setShowAuditViewer] = useState(false);
@@ -80,8 +82,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const handleUpdateProfile = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
-    setError('');
-    setSuccess('');
+    setShowToast(false);
 
     const oldDisplayName = user?.displayName || '';
     const oldBadgeId = initialBadgeId;
@@ -129,7 +130,12 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
 
       setInitialBadgeId(normalizedBadgeId);
 
-      setSuccess(ERROR_MESSAGES.PROFILE_UPDATED);
+      setToastType('success');
+      setToastMessage(ERROR_MESSAGES.PROFILE_UPDATED);
+      setShowToast(true);
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
     } catch (err) {
       const { message } = handleAuthError(err);
 
@@ -157,7 +163,9 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         );
       }
 
-      setError(message);
+      setToastType('error');
+      setToastMessage(message);
+      setShowToast(true);
     } finally {
       setIsLoading(false);
     }
@@ -193,6 +201,13 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   }
 
   return (
+    <>
+    <Toast
+      message={toastMessage}
+      type={toastType}
+      isVisible={showToast}
+      onClose={() => setShowToast(false)}
+    />
     <div
       className={styles.modalOverlay}
       onMouseDown={handleOverlayMouseDown}
@@ -282,9 +297,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
 
           <MfaPhoneUpdateSection user={user} isOpen={isOpen} onBusyChange={handleMfaBusyChange} />
 
-          {error && <FormMessage type="error" message={error} />}
-          {success && <FormMessage type="success" message={success} />}
-
           <div className={styles.buttonGroup}>
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile
@@ -302,5 +314,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         </form>
       </div>
     </div>
+    </>
   );
 };

package/app/{tailwind.css → global.css}

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "modern-normalize";
 
 @layer base {
   :root {

package/app/hooks/useOverlayDismiss.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, type KeyboardEventHandler, type MouseEventHandler } from 'react';
+import { useCallback, useEffect, type CSSProperties, type KeyboardEventHandler, type MouseEventHandler } from 'react';
 
 interface UseOverlayDismissOptions {
   isOpen: boolean;
@@ -8,6 +8,30 @@ interface UseOverlayDismissOptions {
   closeOnBackdrop?: boolean;
 }
 
+interface CloseButtonOptions {
+  ariaLabel?: string;
+  title?: string;
+}
+
+const sharedCloseButtonStyle: CSSProperties = {
+  position: 'absolute',
+  top: '0.6rem',
+  right: '0.6rem',
+  width: '1.9rem',
+  height: '1.9rem',
+  borderRadius: '999px',
+  border: '1px solid #d6dce2',
+  background: '#f8f9fa',
+  color: '#495057',
+  fontSize: '1.2rem',
+  lineHeight: 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  zIndex: 1,
+};
+
 export const useOverlayDismiss = ({
   isOpen,
   onClose,
@@ -30,7 +54,8 @@ export const useOverlayDismiss = ({
 
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        onClose();
+        event.preventDefault();
+        requestClose();
       }
     };
 
@@ -39,7 +64,7 @@ export const useOverlayDismiss = ({
     return () => {
       document.removeEventListener('keydown', handleEscape);
     };
-  }, [isOpen, closeOnEscape, canDismiss, onClose]);
+  }, [isOpen, closeOnEscape, canDismiss, requestClose]);
 
   const handleOverlayMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {
     if (!closeOnBackdrop || event.target !== event.currentTarget) {
@@ -60,9 +85,34 @@ export const useOverlayDismiss = ({
     }
   }, [closeOnBackdrop, requestClose]);
 
+  const isBackdropDismissInteractive = closeOnBackdrop && canDismiss;
+
+  const overlayProps = {
+    role: isBackdropDismissInteractive ? 'button' : 'presentation',
+    tabIndex: isBackdropDismissInteractive ? 0 : undefined,
+    onMouseDown: isBackdropDismissInteractive ? handleOverlayMouseDown : undefined,
+    onKeyDown: isBackdropDismissInteractive ? handleOverlayKeyDown : undefined,
+    style: { cursor: 'default' as const },
+  };
+
+  const getCloseButtonProps = useCallback((options?: CloseButtonOptions) => {
+    const ariaLabel = options?.ariaLabel || 'Close modal';
+
+    return {
+      type: 'button' as const,
+      onClick: requestClose,
+      disabled: !canDismiss,
+      'aria-label': ariaLabel,
+      title: options?.title || ariaLabel,
+      style: sharedCloseButtonStyle,
+    };
+  }, [requestClose, canDismiss]);
+
   return {
     requestClose,
     handleOverlayMouseDown,
-    handleOverlayKeyDown
+    handleOverlayKeyDown,
+    overlayProps,
+    getCloseButtonProps,
   };
 };

package/app/root.tsx

@@ -16,7 +16,7 @@ import {
 import { AuthProvider } from '~/components/auth/auth-provider';
 import { auth } from '~/services/firebase';
 import styles from '~/styles/root.module.css';
-import './tailwind.css';
+import './global.css';
 
 export const links: LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },