- refactor sections

- combine resume and metadata contexts

src/components/shared/Input.js

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { get, isFunction } from 'lodash';
+import { isFunction } from 'lodash';
 import React, { memo, useEffect, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdClose } from 'react-icons/md';
@@ -26,14 +26,14 @@ const Input = ({
   type = 'text',
 }) => {
   const [uuid, setUuid] = useState(null);
-  const stateValue = useSelector((state) => get(state, path));
+  const stateValue = useSelector(path, '');
   const dispatch = useDispatch();
 
   useEffect(() => {
     setUuid(uuidv4());
   }, []);
 
-  value = isFunction(onChange) ? value : stateValue;
+  value = path ? stateValue : value;
   onChange = isFunction(onChange)
     ? onChange
     : (e) => {

src/components/shared/Input.module.css

@@ -14,10 +14,16 @@
   @apply text-primary opacity-50;
 }
 
+.container label input:hover,
+.container label textarea:hover,
+.container label select:hover {
+  @apply outline-none border-secondary-dark;
+}
+
 .container label input:focus,
 .container label textarea:focus,
 .container label select:focus {
-  @apply outline-none border-gray-500;
+  @apply outline-none border-primary;
 }
 
 .container label > p {

src/components/shared/PhotoUpload.module.css

@@ -3,4 +3,14 @@
   height: 60px;
   flex: 0 0 60px;
   @apply flex items-center justify-center cursor-pointer bg-secondary text-secondary-dark rounded-full;
+  @apply transition-opacity duration-200 ease-in-out;
+}
+
+.circle:focus {
+  @apply outline-none;
+}
+
+.circle:hover {
+  @apply opacity-75;
+  @apply transition-opacity duration-200 ease-in-out;
 }

src/components/shared/SectionIcon.js

@@ -19,9 +19,9 @@ const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
         duration={500}
         containerId={containerId}
         activeClass="text-primary"
-        className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary"
+        className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary animate__animated animate__fadeIn"
       >
-        <Icon size="16px" />
+        <Icon size="18px" />
       </Link>
     </Tooltip>
   );