Rework to collaboration dialog

src/components/include.scss

@@ -2,16 +2,19 @@
 $color-features: #0093e7;
 $color-features-active: #0357a5;
 $color-red: #ca3b3b;
+$color-light-red: #f26666;
 $color-yellow: #ffd439;
 $color-yellow-hover: #ffc904;
 $color-yellow-bg: #ffeca8;
 $color-orange: #ffba5d;
+$color-dark-orange: #864c00;
 $color-green: #c5dd60;
 $color-purple: #b944cc;
 
 $very-light-gray: #ececec;
 $light-gray: #dadada;
 $gray: #9a9a9a;
+$moderate-gray: #797979;
 $extremely-dark-gray: #333;
 
 $color-background-dark: #21232a;

src/components/modal.jsx

@@ -33,7 +33,7 @@ const Modal = (props) => {
 				<span className='close-button'
 					id='close-button'
 					aria-label={`close${props.testId ? `-${props.testId}-` : '-'}modal`}
-					onClick={props.onClose}>X</span>
+					onClick={props.onClose}>&#10005;</span>
 				<div className={`modal-guts ${props.noGutter ? 'no-gutter' : ''}`}>
 					{props.children}
 				</div>

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

@@ -257,7 +257,8 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set
 					onChange={(e) => setState({...state, searchText: e.target.value})}
 					className='user-add'
 					type='text'
-					placeholder="Enter a Materia user's name or e-mail"/>
+					placeholder="Enter a user's name or e-mail"/>
+				<span className="collab-input-disclaimer">Only individuals who have previously used Materia will show up in search.</span>
 				{ searchResultsRender }
 			</div>
 		)
@@ -273,7 +274,11 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set
 		mainContentRender = <NoContentIcon />
 
 		if (containsUser) {
-			const mainContentElements = Array.from(state.updatedAllUserPerms).map(([userId, userPerms]) => {
+
+			const mainContentElements = []
+			let userContentElement = null
+
+			Array.from(state.updatedAllUserPerms).forEach(([userId, userPerms]) => {
 				if (userPerms.remove === true) return
 
 				let user = collabUsers[userId]
@@ -282,24 +287,31 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set
 					return <div key={userId}></div>
 				}
 
-				user.is_owner = user.id === inst.user_id;
-
-				return <CollaborateUserRow
-					key={user.id}
-					user={user}
-					perms={userPerms}
-					myPerms={myPerms}
-					isCurrentUser={currentUser.id === user.id}
-					onlyOneFullPermHolder={onlyOneFullPermHolder}
-					removedCurrentUser={removedCurrentUser}
-					onChange={(userId, perms) => updatePerms(userId, perms)}
-					readOnly={myPerms?.can?.share === false}
-				/>
+				user.is_owner = user.id === inst.user_id
+				const rowElement = (
+					<CollaborateUserRow
+						key={user.id}
+						user={user}
+						perms={userPerms}
+						myPerms={myPerms}
+						isCurrentUser={currentUser.id === user.id}
+						onlyOneFullPermHolder={onlyOneFullPermHolder}
+						removedCurrentUser={removedCurrentUser}
+						onChange={(userId, perms) => updatePerms(userId, perms)}
+						readOnly={myPerms?.can?.share === false}
+					/>
+				)
+
+				if (currentUser.id === user.id) userContentElement = rowElement
+				else mainContentElements.push(rowElement)
 			})
 
 			mainContentRender = (
 				<>
-					{ mainContentElements }
+					<header className='access-list-header'>You</header>
+					{ userContentElement }
+					<header className='access-list-header'>Users With Access</header>
+					{ mainContentElements.length > 0 ? mainContentElements : <span className='not-shared'>No other users have access to your widget.</span> }
 				</>
 			)
 		}
@@ -342,12 +354,14 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set
 					{/* Calendar portal used to bring calendar popup out of access-list to avoid cutting off the overflow */}
 					<div id='calendar-portal' />
 					<p className='disclaimer'>
-						Users with full access can edit or copy this widget and can
+						Users with full access can edit this widget and can
 						add or remove people in this list. 
 						{onlyOneFullPermHolder && myPerms.accessLevel == access.FULL && (
-							<em>
-								{'\u00A0'}Note: There must be at least one user with full access.
-							</em>
+							<span>
+								<em>
+								{	'\u00A0'}Note: There must be at least one user with full access.
+								</em>
+							</span>
 						)}
 					</p>
 					<div className='btn-box'>