- complete onyx design template

- implement public sharable urls
- implement more actions

src/components/shared/Input.module.css

@@ -1,11 +1,7 @@
-.container {
-  @apply w-full;
-}
-
 .container label input,
 .container label textarea,
 .container label select {
-  @apply py-3 px-4 rounded text-primary-900 bg-primary-200 border border-transparent appearance-none;
+  @apply w-full py-3 px-4 rounded text-primary-900 bg-primary-200 border border-transparent appearance-none;
 }
 
 .container label input::placeholder,

src/components/shared/InputArray.js

@@ -1,50 +0,0 @@
-import { Field } from 'formik';
-import React, { memo } from 'react';
-import { MdAdd } from 'react-icons/md';
-import { getFieldProps, handleKeyUp } from '../../utils';
-import Input from './Input';
-
-const InputArray = ({ formik, schema, helpers, label, path, placeholder }) => {
-  const handleClickAdd = () => {
-    formik.values.temp && helpers.push(formik.values.temp);
-    formik.setFieldValue('temp', '');
-  };
-
-  return (
-    <div className="col-span-2">
-      <label>
-        <span>{label}</span>
-
-        {formik.values[path] &&
-          formik.values[path].map((x, i) => (
-            <Field key={i} name={`${path}.${i}`}>
-              {({ field, meta }) => (
-                <Input
-                  className="my-1"
-                  onClick={() => helpers.remove(i)}
-                  {...field}
-                  {...meta}
-                />
-              )}
-            </Field>
-          ))}
-
-        <div className="flex items-center">
-          <Input
-            placeholder={placeholder}
-            {...getFieldProps(formik, schema, 'temp')}
-          />
-          <MdAdd
-            size="18px"
-            tabIndex="0"
-            className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
-            onKeyUp={(e) => handleKeyUp(e, handleClickAdd)}
-            onClick={handleClickAdd}
-          />
-        </div>
-      </label>
-    </div>
-  );
-};
-
-export default memo(InputArray);

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>

src/components/shared/SectionIcon.js

@@ -1,6 +1,7 @@
 import { Tooltip } from '@material-ui/core';
 import React, { memo, useEffect } from 'react';
 import { Link, scrollSpy } from 'react-scroll';
+import styles from './SectionIcon.module.css';
 
 const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
   const { id, name, icon: Icon } = section;
@@ -19,7 +20,7 @@ const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
         duration={500}
         containerId={containerId}
         activeClass="text-primary-900"
-        className="py-2 cursor-pointer focus:outline-none focus:text-primary-900 hover:text-primary-900"
+        className={styles.icon}
       >
         <Icon size="18px" />
       </Link>

src/components/shared/SectionIcon.module.css

@@ -0,0 +1,11 @@
+.icon {
+  @apply py-2 cursor-pointer;
+}
+
+.icon:focus {
+  @apply outline-none text-primary-900;
+}
+
+.icon:hover {
+  @apply text-primary-900;
+}