- creating a dynamic color palette

- implementing actions section

src/components/shared/Avatar.js

@@ -11,9 +11,9 @@ const Avatar = ({ className }) => {
 
   return (
     <img
-      className={cx(styles.container, className)}
       src={photoURL}
       alt={user.displayName}
+      className={cx(styles.container, className)}
     />
   );
 };

src/components/shared/Button.js

@@ -1,21 +1,20 @@
-import classNames from 'classnames';
+import cx from 'classnames';
 import React, { memo } from 'react';
 import { handleKeyUp } from '../../utils';
 import styles from './Button.module.css';
 
 const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
   const Icon = icon;
-  const classes = classNames(styles.container, className, {
-    [styles.outline]: outline,
-  });
 
   return (
     <button
-      className={classes}
       onKeyUp={(e) => handleKeyUp(e, onClick)}
       onClick={isLoading ? undefined : onClick}
+      className={cx(styles.container, className, {
+        [styles.outline]: outline,
+      })}
     >
-      {icon && <Icon size="14" className="mr-2" />}
+      {icon && <Icon size="14" className="mr-3" />}
       {isLoading ? 'Loading...' : title}
     </button>
   );

src/components/shared/Button.module.css

@@ -1,16 +1,31 @@
 .container {
-  padding: 6px 24px;
-  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
+  font-size: 11px;
+  padding: 6px 18px;
+  @apply relative flex items-center cursor-pointer rounded font-semibold bg-primary-900 border border-primary-900 text-primary-50;
+  @apply transition-colors duration-200 ease-in-out;
 }
 
 .container:hover {
-  @apply bg-primary-dark;
+  @apply bg-primary-700 border-primary-700;
+  @apply transition-colors duration-200 ease-in-out;
+}
+
+.container:active {
+  top: 1px;
+}
+
+.container:focus {
+  @apply outline-none;
 }
 
 .container.outline {
-  @apply border border-primary bg-inverse text-primary;
+  @apply border border-primary-900 bg-transparent text-primary-900;
 }
 
 .container.outline:hover {
-  @apply bg-inverse-dark;
+  @apply bg-primary-200;
+}
+
+.container.outline:focus {
+  @apply outline-none;
 }

src/components/shared/Input.js

@@ -2,8 +2,9 @@ import cx from 'classnames';
 import { isFunction } from 'lodash';
 import React, { memo, useEffect, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
-import { MdClose } from 'react-icons/md';
+import { MdClose, MdOpenInNew } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
+import { IoIosCopy } from 'react-icons/io';
 import { useDispatch, useSelector } from '../../contexts/ResumeContext';
 import { handleKeyUp } from '../../utils';
 import styles from './Input.module.css';
@@ -17,12 +18,11 @@ const Input = ({
   onBlur,
   options,
   touched,
+  onClick,
   onChange,
   className,
   isRequired,
   placeholder,
-  onDeleteItem,
-  showDeleteItemButton,
   type = 'text',
 }) => {
   const [uuid, setUuid] = useState(null);
@@ -68,12 +68,12 @@ const Input = ({
               placeholder={placeholder}
             />
 
-            {showDeleteItemButton && isFunction(onDeleteItem) && (
+            {isFunction(onClick) && (
               <MdClose
                 size="16px"
                 tabIndex="0"
-                onClick={onDeleteItem}
-                onKeyUp={(e) => handleKeyUp(e, onDeleteItem)}
+                onClick={onClick}
+                onKeyUp={(e) => handleKeyUp(e, onClick)}
                 className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
               />
             )}
@@ -143,6 +143,21 @@ const Input = ({
           </div>
         )}
 
+        {type === 'action' && (
+          <div className={cx('relative grid items-center', styles.readOnly)}>
+            <input readOnly id={uuid} name={name} type="text" value={value} />
+
+            <div
+              tabIndex="0"
+              role="button"
+              onClick={onClick}
+              onKeyUp={(e) => handleKeyUp(e, onClick)}
+            >
+              <MdOpenInNew size="16px" />
+            </div>
+          </div>
+        )}
+
         {error && touched && <p>{error}</p>}
       </label>
     </div>

src/components/shared/Input.module.css

@@ -5,25 +5,25 @@
 .container label input,
 .container label textarea,
 .container label select {
-  @apply py-3 px-4 rounded bg-secondary text-primary border border-secondary appearance-none;
+  @apply py-3 px-4 rounded text-primary-900 bg-primary-200 border border-transparent appearance-none;
 }
 
 .container label input::placeholder,
 .container label textarea::placeholder,
 .container label select::placeholder {
-  @apply text-primary opacity-50;
+  @apply opacity-50;
 }
 
 .container label input:hover,
 .container label textarea:hover,
 .container label select:hover {
-  @apply outline-none border-secondary-dark;
+  @apply outline-none border-primary-400;
 }
 
 .container label input:focus,
 .container label textarea:focus,
 .container label select:focus {
-  @apply outline-none border-primary;
+  @apply outline-none border-primary-600;
 }
 
 .container label > p {
@@ -32,9 +32,30 @@
 
 .circle {
   left: 14px;
-  @apply absolute bg-white rounded-full w-6 h-6;
+  @apply absolute bg-primary-900 rounded-full w-6 h-6;
 }
 
 div.circle + input {
   padding-left: 44px;
-}
+}
+
+.read-only input:hover {
+  cursor: default;
+  border-color: transparent !important;
+}
+
+.read-only input:focus {
+  border-color: transparent !important;
+}
+
+.read-only div {
+  @apply absolute rounded-r top-0 right-0 bottom-0 w-20 flex justify-center items-center bg-primary-50;
+}
+
+.read-only div:hover {
+  @apply bg-primary-100;
+}
+
+.read-only div:focus {
+  @apply outline-none;
+}

src/components/shared/InputArray.js

@@ -21,8 +21,7 @@ const InputArray = ({ formik, schema, helpers, label, path, placeholder }) => {
               {({ field, meta }) => (
                 <Input
                   className="my-1"
-                  showDeleteItemButton
-                  onDeleteItem={() => helpers.remove(i)}
+                  onClick={() => helpers.remove(i)}
                   {...field}
                   {...meta}
                 />

src/components/shared/PhotoUpload.module.css

@@ -2,7 +2,7 @@
   width: 60px;
   height: 60px;
   flex: 0 0 60px;
-  @apply flex items-center justify-center cursor-pointer bg-secondary text-secondary-dark rounded-full;
+  @apply flex items-center justify-center cursor-pointer bg-primary-200 text-primary-500 rounded-full;
   @apply transition-opacity duration-200 ease-in-out;
 }
 

src/components/shared/SectionIcon.js

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