Done with mobile

package.json

@@ -6,11 +6,13 @@
     "@fluentui/react": "^7.121.4",
     "@reach/auto-id": "^0.12.1",
     "@reach/dialog": "^0.11.2",
+    "@reach/tooltip": "^0.12.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@xstate/react": "^0.8.1",
     "babel-eslint": "^10.1.0",
+    "clipboard-polyfill": "^3.0.1",
     "eslint": "^7.16.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-react-app": "^6.0.0",
@@ -34,7 +36,9 @@
     "react-dropzone": "^11.0.2",
     "react-router-dom": "5",
     "react-scripts": "^4.0.1",
+    "react-shepherd": "^3.3.2",
     "react-transition-group": "^4.4.1",
+    "shepherd.js": "^8.1.0",
     "trix": "^1.3.1",
     "uuid": "^8.2.0",
     "wicg-inert": "^3.0.3",
@@ -64,6 +68,7 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.0.5"
+    "prettier": "^2.0.5",
+    "typescript": "^4.1.3"
   }
 }

src/components/ActionButton/ActionButton.js

@@ -35,7 +35,7 @@ export function ActionButton({
 
 ActionButton.propTypes = {
 	type: PropTypes.oneOf(['button', 'submit', 'reset']),
-	variant: PropTypes.oneOf(['round', 'flat', 'bold-orange', 'bold-pink', 'danger']).isRequired,
+	variant: PropTypes.string.isRequired,
 	iconName: PropTypes.string,
 };
 

src/components/CharacterCard.js

@@ -54,7 +54,7 @@ export function CharacterCard({character, children}) {
 			)}
 
 			<figcaption className="CharacterCard__overlay">
-				<p className="CharacterCard__name">
+				<p className="CharacterCard__name" style={{margin: 0}}>
 					{character.name}
 				</p>
 				{children}

src/components/Dialog.js

@@ -58,6 +58,7 @@ export function DialogParagraph({...props}) {
 	return <Text as="p" variant="medium" {...props} />;
 }
 
+const AnimatedContent = motion.custom(DialogContent);
 /**
  * A wrapper around `@reach/dialog` that provides styles and an id
  * for the title of the dialog via Context.
@@ -66,18 +67,19 @@ export function DialogParagraph({...props}) {
  * 	isOpen: boolean,
  * 	onDismiss?: function(): void,
  * 	children: import('react').ReactNode,
+ * 	overlayProps?: Object,
  * 	[s: string]: any,
  * }} props
  */
 export function Dialog({
-	isOpen, onDismiss, children, ...props
+	isOpen, onDismiss, children, overlayProps, ...props
 }) {
 	const titleId = useId('title');
 	return (
-		<DialogOverlay isOpen={isOpen} onDismiss={onDismiss} className="Dialog__overlay" {...props}>
-			<DialogContent className="Dialog" aria-labelledby={titleId}>
+		<DialogOverlay isOpen={isOpen} onDismiss={onDismiss} className="Dialog__overlay" {...overlayProps}>
+			<AnimatedContent layout="true" className="Dialog" aria-labelledby={titleId} {...props}>
 				<DialogContext.Provider value={{titleId}}>{children}</DialogContext.Provider>
-			</DialogContent>
+			</AnimatedContent>
 		</DialogOverlay>
 	);
 }

src/components/Input/Input.js

@@ -4,16 +4,30 @@ import {emptyObject} from '../../shared/empty.js';
 
 import './Input.css';
 
+/**
+ * @param {{
+ * 	id?: string,
+ * 	label?: string,
+ * 	frameProps?: Object,
+ * 	[s: string]: any,
+ * }} params
+ */
 export function TextInput({
-	id = 'input', label, frameProps = emptyObject, ...props
+	id = 'input',
+	label,
+	frameProps = emptyObject,
+	...props
 }) {
 	const idValue = useId(id);
 
 	return (
 		<div className="Input__frame" {...frameProps}>
-			<Text variant="mediumTitle" as="label" htmlFor={idValue} className="Input__label">
-				{label}
-			</Text>
+			{label && (
+				/* @ts-ignore */
+				<Text variant="mediumTitle" as="label" htmlFor={idValue} className="Input__label">
+					{label}
+				</Text>
+			)}
 			<input id={idValue} className="Input__field" {...props} />
 		</div>
 	);

src/components/ProfileHeader.js

@@ -3,6 +3,7 @@ import {useHistory} from 'react-router-dom';
 
 import {Text} from '@fluentui/react';
 
+import {ShepherdTourContext} from 'react-shepherd';
 import {auth, useUser} from '../shared/firebase.js';
 import {ProfileMenuContext} from '../shared/machines.js';
 import {ProfileMenu, ProfileMenuItem} from './ProfileMenu.js';
@@ -14,6 +15,8 @@ import {useScrollStatus} from '../shared/helpers.js';
  * @returns {JSX.Element}
  */
 export function ProfileHeader() {
+	const tour = useContext(ShepherdTourContext);
+
 	const user = useUser();
 	const scrollStatus = useScrollStatus();
 	const [current, send] = useContext(ProfileMenuContext);
@@ -31,15 +34,21 @@ export function ProfileHeader() {
 		menuName = 'Share';
 		menuItems = (
 			<>
-				<ProfileMenuItem key="view-shared">View Shared</ProfileMenuItem>
+				<ProfileMenuItem
+					key="view-shared"
+					id="view-shared-button"
+					onClick={() => send('VIEW_SHARED')}
+				>
+					View Shared
+				</ProfileMenuItem>
 				<ProfileMenuItem
 					key="share"
+					id="share-button"
 					onClick={() => send('SHARE_CHARACTER')}
 				>
 					Share Character
 				</ProfileMenuItem>
-				<ProfileMenuItem key="un-share">Un-share Character</ProfileMenuItem>
-				<ProfileMenuItem key="back" onClick={() => send('MENU_BACK')}>
+				<ProfileMenuItem key="back" id="share-back-button" onClick={() => send('MENU_BACK')}>
 					Back
 				</ProfileMenuItem>
 			</>
@@ -48,12 +57,19 @@ export function ProfileHeader() {
 		menuName = 'Profile';
 		menuItems = (
 			<>
-				<ProfileMenuItem key="share-menu" onClick={() => send('OPEN_SHARE_MENU')}>
+				<ProfileMenuItem key="share-menu" id="share-menu-button" onClick={() => send('OPEN_SHARE_MENU')}>
 					Share Menu
 				</ProfileMenuItem>
-				<ProfileMenuItem key="settings">Settings</ProfileMenuItem>
-				<ProfileMenuItem key="help">Help</ProfileMenuItem>
-				<ProfileMenuItem key="sign-out" onClick={signOut}>
+				<ProfileMenuItem key="settings" id="settings-button">Settings</ProfileMenuItem>
+				<ProfileMenuItem
+					key="help"
+					id="help-tour-button"
+					onClick={() => {
+						if (!tour.isActive()) tour.start();
+					}}
+				>Help
+				</ProfileMenuItem>
+				<ProfileMenuItem key="sign-out" id="sign-out-button" onClick={signOut}>
 					Sign Out
 				</ProfileMenuItem>
 			</>

src/components/ProfileMenu.js

@@ -2,6 +2,7 @@ import {useContext, useEffect, useRef} from 'react';
 
 import {Text} from '@fluentui/react';
 import {AnimatePresence, motion} from 'framer-motion';
+import {ShepherdTourContext} from 'react-shepherd';
 
 import {colors, transitions} from '../shared/theme.js';
 import {PROFILE_SIZE, ProfilePhoto} from './ProfilePhoto.js';
@@ -127,6 +128,8 @@ export function ProfileMenuItem(props) {
 export function ProfileMenu({
 	email, name, menuName, children,
 }) {
+	const tour = useContext(ShepherdTourContext);
+
 	const [profileState, send, service] = useContext(ProfileMenuContext);
 	const backdropRef = useRef(null);
 
@@ -189,7 +192,15 @@ export function ProfileMenu({
 					onHoverEnd={() => send('HOVER_END')}
 					onFocus={() => send('FOCUS')}
 					onBlur={() => send('BLUR')}
-					onClick={() => send('TAP_TOGGLE')}
+					onClick={() => {
+						send('TAP_TOGGLE');
+						if (
+							tour.isActive()
+							&& (profileState.matches('closed') || profileState.matches('partiallyOpen'))
+						) {
+							tour.next();
+						}
+					}}
 					transition={transitions.menu}
 					aria-label={buttonLabel}
 					title={buttonLabel}
@@ -234,6 +245,7 @@ export function ProfileMenu({
 						animate={{opacity: 0.81}}
 						exit={{opacity: 0}}
 						style={backdropStyles}
+						id="profile-menu-backdrop"
 					/>
 				)}
 			</AnimatePresence>

src/components/ProfilePhoto.js

@@ -37,8 +37,8 @@ export function ProfilePhoto({email, ...props}) {
 	const [state, send] = useMachine(gravatarMachine);
 
 	useEffect(() => {
-		if (email) send('FETCH', {email});
-	}, [email, send]);
+		if (email && !user?.photoURL) send('FETCH', {email});
+	}, [email, send, user]);
 
 	let photo;
 	if (user?.photoURL) photo = user.photoURL;