feat: light UI redesign

.eslintrc.js

@@ -13,12 +13,13 @@ module.exports = {
     'plugin:jest/recommended',
   ],
   rules: {
-    'no-console': 'off',
     'comma-dangle': 'off',
     'implicit-arrow-linebreak': 'off',
+    'import/prefer-default-export': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
-    'react/prop-types': 'off',
-    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'no-console': 'off',
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react/prop-types': 'off',
   },
 };

src/components/__tests__/customInput.test.tsx

@@ -6,10 +6,10 @@ describe('customInput', () => {
   it('should update the current color with a custom one', () => {
     // Learn more about onSubmit testing here: https://kula.blog/posts/test_on_submit_in_react_testing_library/
     const saveSpy = jest.fn();
-    const { getByLabelText } = render(<CustomInput color="#ffffff" saveHandler={saveSpy} />);
+    const { getByLabelText, getByTestId } = render(<CustomInput color="#ffffff" saveHandler={saveSpy} />);
 
     const input = getByLabelText('custom input') as HTMLInputElement;
-    const form = getByLabelText('custom form');
+    const form = getByTestId('form');
 
     fireEvent.change(input, {
       target: { value: '#f06d06' },

src/components/__tests__/popup.test.tsx

@@ -4,11 +4,13 @@ import {
   RenderResult,
   waitFor,
   fireEvent,
+  getAllByTestId,
 } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
 import * as chromeHelpers from '../../helpers/chrome';
-import Popup, { colors } from '../popup';
+import { COLORS } from '../../constants/colors';
+import Popup from '../popup';
 
 jest.mock('../../helpers/chrome.ts');
 jest.mock('../../helpers/whitelisting.ts');
@@ -25,63 +27,17 @@ describe('Popup', () => {
       utils = render(<Popup />);
     });
 
-    const { queryAllByLabelText } = utils;
+    const { queryAllByLabelText, getByTestId, getAllByTestId } = utils;
 
-    (chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(colors[0]);
+    (chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(COLORS[0]);
 
     await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());
 
-    const colorButtons = queryAllByLabelText('save color');
+    const colorButtons = getAllByTestId('color button');
     const whiteList = queryAllByLabelText('whitelist toggle');
-    const customForm = queryAllByLabelText('custom form');
 
     expect(colorButtons[0]).toHaveClass('colorLinks--button active');
     expect(whiteList.length).toEqual(1);
-    expect(customForm.length).toEqual(0);
-  });
-
-  it('should show custom input when no active color found', async () => {
-    let utils = {} as RenderResult;
-
-    act(async () => {
-      utils = render(<Popup />);
-    });
-
-    const { getByLabelText, queryAllByLabelText, container } = utils;
-
-    (chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue('');
-
-    await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());
-
-    const customColor = getByLabelText('custom color');
-    const customForm = queryAllByLabelText('custom form');
-
-    expect(customColor).toHaveClass('colorLinks--button active');
-    await waitFor(() => expect(customForm.length).toEqual(1), { container });
-  });
-
-  it('should show a custom input when the custom color button is clicked', async () => {
-    let utils = {} as RenderResult;
-
-    act(async () => {
-      utils = render(<Popup />);
-    });
-
-    const { queryAllByLabelText, queryByLabelText } = utils;
-    (chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(colors[0]);
-
-    await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());
-
-    const colorButtons = queryAllByLabelText('save color');
-    const customColorButton = queryByLabelText('custom color');
-    const customForm = queryAllByLabelText('custom form');
-
-    expect(colorButtons[0]).toHaveClass('colorLinks--button active');
-    expect(customForm.length).toEqual(0);
-
-    fireEvent.click(customColorButton);
-
-    waitFor(() => expect(customForm.length).toEqual(1));
   });
 
   it('should save a color when a color button is clicked', async () => {
@@ -91,12 +47,12 @@ describe('Popup', () => {
       utils = render(<Popup />);
     });
 
-    const { queryAllByLabelText } = utils;
-    (chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(colors[0]);
+    const { queryAllByLabelText, getAllByTestId } = utils;
+    (chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(COLORS[0]);
 
     await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());
 
-    const colorButtons = queryAllByLabelText('save color');
+    const colorButtons = getAllByTestId('color button');
     const customForm = queryAllByLabelText('custom form');
 
     expect(colorButtons[0]).toHaveClass('colorLinks--button active');

src/components/colorButton.tsx

@@ -9,11 +9,11 @@ interface OwnProps {
 const ColorButton: FC<OwnProps> = ({ color, clickHandler, active }) => (
   <div>
     <button
-      aria-label="save color"
+      data-testid="color button"
       type="button"
       className={`colorLinks--button${active ? ' active' : ''}`}
       onClick={clickHandler}
-      style={{ color: 'white', background: color }}
+      style={{ background: color }}
     />
   </div>
 );

src/components/customInput.tsx

@@ -10,17 +10,24 @@ const CustomInput: FC<OwnProps> = ({ color, saveHandler }) => {
 
   return (
     <form
-      aria-label="custom form"
-      className="colorLinks--custom"
+      className="customForm"
       onSubmit={() => saveHandler(currentColor)}
+      data-testid="form"
     >
-      <input
-        placeholder="#ff0000"
-        aria-label="custom input"
-        value={currentColor}
-        onChange={(e) => setColor(e.target.value)}
-      />
-      <button type="submit">Save</button>
+      <label className="customForm--label">enter hexadecimal value</label>
+      <div className="customForm--clickables">
+        <input
+          aria-label="custom input"
+          value={currentColor}
+          onChange={(e) => setColor(e.target.value)}
+        />
+        {' '}
+        <button type="submit">save</button>
+        <p>
+          current color:
+          <b style={{ color }}>{color}</b>
+        </p>
+      </div>
     </form>
   );
 };

src/components/popup.tsx

@@ -4,17 +4,14 @@ import WhitelistManager from './whitelist';
 import ColorButton from './colorButton';
 import CustomInput from './customInput';
 import { getActiveColor, saveActiveColor } from '../helpers/chrome';
-
-export const colors = ['#37d67a', '#2ccce4', '#06A77D', '#ff8a65', '#1E91D6'];
+import { COLORS } from '../constants/colors';
 
 const Popup = () => {
   const [activeColor, setActiveColor] = useState('');
-  const [showCustomInput, setShowCustomInput] = useState(false);
 
   const onColorChange = useCallback((color) => {
     saveActiveColor(color);
     setActiveColor(color);
-    setShowCustomInput(false);
   }, []);
 
   useEffect(() => {
@@ -28,46 +25,38 @@ const Popup = () => {
       }
 
       setActiveColor(result);
-      setShowCustomInput(!colors.includes(result));
     }
 
     getActiveColorEffect();
   }, []);
 
   return (
     <div className="colorLinks">
-      <span
+      <h1
         style={{
           color: activeColor,
-          paddingBottom: '5px',
-          transition: 'color .5s',
-        }}
+      }}
       >
-        A Quick Brown Fox Jumped
-      </span>
+        <img aria-hidden="true" src="../links48.png" alt="" />
+        <span>color links</span>
+      </h1>
       <div className="colorLinks--grid">
-        {colors.map((color) => (
+        {COLORS.map((color) => (
           <ColorButton
             color={color}
             clickHandler={() => onColorChange(color)}
             key={color}
             active={color === activeColor}
           />
         ))}
-
-        <div>
-          <button
-            type="button"
-            aria-label="custom color"
-            className={`colorLinks--button${!colors.includes(activeColor) ? ' active' : ''}`}
-            onClick={() => setShowCustomInput(true)}
-          >
-            #
-          </button>
-        </div>
       </div>
 
-      {showCustomInput && <CustomInput color={activeColor} saveHandler={onColorChange} />}
+      <details>
+        <summary>
+          custom color
+        </summary>
+        <CustomInput color={activeColor} saveHandler={onColorChange} />
+      </details>
       <WhitelistManager />
     </div>
   );

src/constants/colors.ts

@@ -0,0 +1,2 @@
+
+export const COLORS: Array<string> = ['#37d67a', '#2ccce4', '#06A77D', '#ff8a65', '#1E91D6'];