Tweaks to alert modal component styling. Replaced invalidLogin handli…

…ng with invalid login alert modal.

src/components/invalid-login-modal.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Modal from './modal'
+
+const InvalidLoginModal = ({onClose}) => (
+	<Modal onClose={onClose} ignoreClose={true} smaller={true} alert={true}>
+		<div>
+			<span className='alert-title'>
+				Your Session is No Longer Valid
+			</span>
+			<p className='alert-description'>Your session with Materia is considered invalid and you have been logged out. You'll have to log back in to see this content.</p>
+			<span className='buttons'>
+				<a className='action_button'
+					onClick={onClose}>
+					Okay
+				</a>
+			</span>
+		</div>
+	</Modal>
+)
+
+export default InvalidLoginModal

src/components/modal.scss

@@ -34,6 +34,8 @@
 		z-index: 1003;
 		width: 540px;
 		min-height: 200px;
+
+		text-align: center;
 	}
 }
 .closed {
@@ -102,7 +104,7 @@
 
 .alert-title {
 	border-bottom: solid 1px #bebebe;
-	text-align: left;
+	text-align: center;
 	position: static;
 	display: block;
 	font-weight: bold;

src/components/my-widgets-collaborate-dialog.jsx

@@ -295,9 +295,11 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set
 	if (state.shareNotAllowed === true) {
 		noShareWarningRender = (
 			<Modal onClose={disableShareNotAllowed} smaller={true} alert={true}>
-				<span className='alert-title'>Share Not Allowed</span>
-				<p className='alert-description'>Access must be set to "Guest Mode" to collaborate with students.</p>
-				<button className='alert-btn' onClick={disableShareNotAllowed}>Okay</button>
+				<div>
+					<span className='alert-title'>Share Not Allowed</span>
+					<p className='alert-description'>Access must be set to "Guest Mode" to collaborate with students.</p>
+					<button className='action_button' onClick={disableShareNotAllowed}>Okay</button>
+				</div>
 			</Modal>
 		)
 	}

src/components/my-widgets-page.jsx

@@ -5,6 +5,7 @@ import rawPermsToObj from '../util/raw-perms-to-object'
 import Header from './header'
 import MyWidgetsSideBar from './my-widgets-side-bar'
 import MyWidgetSelectedInstance from './my-widgets-selected-instance'
+import InvalidLoginModal from './invalid-login-modal'
 import LoadingIcon from './loading-icon'
 import useInstanceList from './hooks/useInstanceList'
 import useCopyWidget from './hooks/useCopyWidget'
@@ -68,11 +69,6 @@ const MyWidgetsPage = () => {
 		}
 	}, [validCode])
 
-	// hook associated with the invalidLogin error
-	useEffect(() => {
-		if (invalidLogin) window.location.reload();
-	}, [invalidLogin])
-
 	// hook to attach the hashchange event listener to the window
 	useEffect(() => {
 		window.addEventListener('hashchange', listenToHashChange)
@@ -300,6 +296,13 @@ const MyWidgetsPage = () => {
 		)
 	}
 
+	let invalidLoginRender = null
+	if (invalidLogin) {
+		invalidLoginRender = (
+			<InvalidLoginModal onClose={() => { window.location.href = 'users/logout' }}></InvalidLoginModal>
+		)
+	}
+
 	/**
 	 * If the user is loading, show a loading screen. If the user is fetching, show a loading screen. If
 	 * the user has no widgets, show a message. If the user has no selected widget, show a message. If the
@@ -383,6 +386,7 @@ const MyWidgetsPage = () => {
 			<div className='my_widgets'>
 
 				{widgetCatalogCalloutRender}
+				{invalidLoginRender}
 
 				<div className='container'>
 					<div className="container_main-content">