- complete onyx design template

- implement public sharable urls
- implement more actions

src/components/shared/PhotoUpload.js

@@ -1,3 +1,4 @@
+import { Tooltip } from '@material-ui/core';
 import React, { memo, useContext, useRef } from 'react';
 import { MdFileUpload } from 'react-icons/md';
 import StorageContext from '../../contexts/StorageContext';
@@ -20,27 +21,29 @@ const PhotoUpload = () => {
 
   return (
     <div className="flex items-center">
-      <div
-        role="button"
-        tabIndex="0"
-        className={styles.circle}
-        onClick={handleIconClick}
-        onKeyUp={(e) => handleKeyUp(e, handleIconClick)}
-      >
-        <MdFileUpload size="22px" />
-        <input
-          name="file"
-          type="file"
-          ref={fileInputRef}
-          className="hidden"
-          onChange={handleImageUpload}
-        />
-      </div>
+      <Tooltip title="Upload Photograph" placement="right-start">
+        <div
+          role="button"
+          tabIndex="0"
+          className={styles.circle}
+          onClick={handleIconClick}
+          onKeyUp={(e) => handleKeyUp(e, handleIconClick)}
+        >
+          <MdFileUpload size="22px" />
+          <input
+            name="file"
+            type="file"
+            ref={fileInputRef}
+            className="hidden"
+            onChange={handleImageUpload}
+          />
+        </div>
+      </Tooltip>
 
       <Input
         name="photograph"
         label="Photograph"
-        className="pl-6"
+        className="pl-6 w-full"
         path="profile.photograph"
       />
     </div>