- implement cloud functions for printing

- implement AMOLED mode
- implement reset layout

src/components/builder/right/sections/Layout.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import { move, reorder } from '../../../../utils';
+import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './Layout.module.css';
 
 const Layout = () => {
+  const [resetLayoutText, setResetLayoutText] = useState('Reset Layout');
+
   const blocks = useSelector('metadata.layout');
   const dispatch = useDispatch();
 
@@ -44,6 +47,16 @@ const Layout = () => {
     }
   };
 
+  const handleResetLayout = () => {
+    if (resetLayoutText === 'Reset Layout') {
+      setResetLayoutText('Are you sure?');
+      return;
+    }
+
+    dispatch({ type: 'reset_layout' });
+    setResetLayoutText('Reset Layout');
+  };
+
   return (
     <section>
       <Heading>Layout</Heading>
@@ -89,6 +102,10 @@ const Layout = () => {
           ))}
         </DragDropContext>
       </div>
+
+      <div className="flex">
+        <Button onClick={handleResetLayout}>{resetLayoutText}</Button>
+      </div>
     </section>
   );
 };

src/components/shared/Avatar.js

@@ -1,20 +1,49 @@
 import cx from 'classnames';
 import { toUrl } from 'gatsby-source-gravatar';
-import React, { memo, useContext, useMemo } from 'react';
+import React, { memo, useContext, useMemo, useState } from 'react';
+import { Menu, MenuItem } from '@material-ui/core';
 import UserContext from '../../contexts/UserContext';
 import styles from './Avatar.module.css';
+import { handleKeyUp } from '../../utils';
 
 const Avatar = ({ className }) => {
-  const { user } = useContext(UserContext);
+  const { user, logout } = useContext(UserContext);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  const handleLogout = () => {
+    logout();
+    handleClose();
+  };
 
   const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
 
   return (
-    <img
-      src={photoURL}
-      alt={user.displayName}
-      className={cx(styles.container, className)}
-    />
+    <div>
+      <div
+        tabIndex="0"
+        role="button"
+        className="flex focus:outline-none"
+        onClick={handleClick}
+        onKeyUp={(e) => handleKeyUp(e, handleClick)}
+      >
+        <img
+          src={photoURL}
+          alt={user.displayName}
+          className={cx(styles.container, className)}
+        />
+      </div>
+      <Menu
+        keepMounted
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        open={Boolean(anchorEl)}
+      >
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+    </div>
   );
 };