feat: light UI redesign #30

postrad · 2020-05-25T20:21:40Z

The current UI isn't quite as intuitive as it could be. This PR aims to help fix that problem.

add the extension's name and logo
add more consistency to font sizes and spacing values
~~make "white list" feature's behavior clearer~~
I think, after spending time with the UI during this PR, that this is out of scope. It deserves a PR of its own.
make custom input usage clearer

This is currently a work-in-progress. I still need to review open issues to see if this PR can address those any of those as well.

postrad · 2020-05-25T20:22:17Z

src/components/__tests__/popup.test.tsx

@@ -8,7 +8,8 @@ import {
 import { act } from 'react-dom/test-utils';

 import * as chromeHelpers from '../../helpers/chrome';
-import Popup, { colors } from '../popup';
+import { COLORS } from '../../constants/colors';


I like the app caps constant.

Agreed 👍

postrad · 2020-05-25T20:22:53Z

src/components/customInput.tsx

-        onChange={(e) => setColor(e.target.value)}
-      />
-      <button type="submit">Save</button>
+      <label className="customForm--label">enter hexadecimal value</label>


TODO: get the for and id hooked up for the input.

postrad · 2020-05-25T20:23:53Z

src/components/popup.tsx

    }

    getActiveColorEffect();
  }, []);

  return (
    <div className="colorLinks">
-      <span
+      <h1


Preserve the nice visual indicator for the current color, but also let's remind users what extension they're using.

postrad · 2020-05-25T20:24:38Z

src/components/popup.tsx

      </div>

-      {showCustomInput && <CustomInput color={activeColor} saveHandler={onColorChange} />}
+      <details>


Still need to refactor (remove?) the hook logic, since the sweet new <details> element makes this easy.

Oh that is 🔥

postrad · 2020-05-25T20:25:41Z

src/styles/popup.css

+
+/* variables
+_________________________________________________________*/
+:root {


I would like to use css custom properties for all the color logic. Setting and getting them in a Chrome extension has proven a little more elusive than I expected. But this will at least help consolidate our style values.

therynamo · 2020-06-01T01:19:02Z

src/components/__tests__/popup.test.tsx

@@ -8,7 +8,8 @@ import {
 import { act } from 'react-dom/test-utils';

 import * as chromeHelpers from '../../helpers/chrome';
-import Popup, { colors } from '../popup';
+import { COLORS } from '../../constants/colors';


Agreed 👍

therynamo · 2020-06-01T01:21:40Z

src/components/popup.tsx

      </div>

-      {showCustomInput && <CustomInput color={activeColor} saveHandler={onColorChange} />}
+      <details>


Oh that is 🔥

therynamo · 2020-06-01T01:22:02Z

src/constants/colors.ts

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


We can turn prefer default export out.

You know, I don't mind named imports. What do you think?

I prefer them, to be honest. LETS BREAK THEM DOWN!

postrad · 2020-06-20T01:33:58Z

src/components/__tests__/popup.test.tsx

-    expect(customForm.length).toEqual(0);
-  });
-
-  it('should show custom input when no active color found', async () => {


Active color always exists, so I removed this test.

postrad · 2020-06-20T01:34:19Z

src/components/__tests__/popup.test.tsx


    expect(colorButtons[0]).toHaveClass('colorLinks--button active');
    expect(whiteList.length).toEqual(1);
-    expect(customForm.length).toEqual(0);


Custom form exists in the DOM now, even when it isn't visible.

postrad · 2020-06-20T01:34:35Z

src/components/__tests__/popup.test.tsx

-    await waitFor(() => expect(customForm.length).toEqual(1), { container });
-  });
-
-  it('should show a custom input when the custom color button is clicked', async () => {


This functionality no longer exists.

postrad · 2020-06-20T01:36:10Z

src/components/colorButton.tsx

@@ -9,7 +9,7 @@ interface OwnProps {
 const ColorButton: FC<OwnProps> = ({ color, clickHandler, active }) => (
  <div>
    <button
-      aria-label="save color"


We don't need an aria-label, since this is clearly an extension that assists people who can see, and this label would only benefit screen reader users.

postrad · 2020-06-20T01:38:13Z

.eslintrc.js

    'comma-dangle': 'off',
    'implicit-arrow-linebreak': 'off',
+    'import/prefer-default-export': 'off',


sortin things alphabetically

and we prefer named imports 😄

coveralls · 2020-06-20T01:55:20Z

Pull Request Test Coverage Report for Build 143157397

0 of 0 changed or added relevant lines in 0 files are covered.
1 unchanged line in 1 file lost coverage.
Overall coverage decreased (-0.3%) to 92.806%

Files with Coverage Reduction	New Missed Lines	%
src/components/popup.tsx	1	93.75%

Totals
Change from base Build 132399733:	-0.3%
Covered Lines:	108
Relevant Lines:	114

💛 - Coveralls

postrad · 2020-06-20T01:57:16Z

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
    'comma-dangle': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/prefer-default-export': 'off',
+    'jsx-a11y/control-has-associated-label': 'off',


This rule seems unnecessary to enforce since screen reader support doesn't seem necessary.

therynamo · 2020-06-23T22:58:19Z

Wow @postrad, these are some really awesome upgrades! I love the new UI tweaks too.

I did see one "bug" (if you will), where submitting a custom color would not "save", and wouldn't display "current color".

Here is a gif:

Also, do you think it'd be helpful to support both # and omission of the # in "custom color"?

postrad added 6 commits May 17, 2020 09:51

resolve merge

3046ba3

added Constants folder with colors

8fdb6da

clean up

9632ca8

Merge branch 'master' into light-redesign

e570df9

redesign custom input

65cff3a

more style tweaks

be425ad

postrad added the 🚀 feat A new feature! label May 25, 2020

postrad commented May 25, 2020

View reviewed changes

postrad requested a review from therynamo May 25, 2020 20:26

therynamo reviewed Jun 1, 2020

View reviewed changes

therynamo assigned postrad Jun 19, 2020

postrad added 6 commits June 19, 2020 19:04

Merge branch 'master' into light-redesign

9b4978f

added current color text and style tweaks

5270296

removed url text

00f510f

linting fixes

455854e

fixed customInput test

53f613d

fixed tests

3fea811

postrad commented Jun 20, 2020

View reviewed changes

postrad added 3 commits June 19, 2020 20:48

adding a for and id to label and input

800f11a

removed unused import

f8ea525

disabled aria label rule

c26c0fb

postrad commented Jun 20, 2020

View reviewed changes

postrad marked this pull request as ready for review June 20, 2020 01:57

postrad added 7 commits June 20, 2020 13:37

added colorButton tests

701d845

more lil unit tests

98ab742

add css custom properties for better dynamic styles

b35c74f

removed space

e64a79e

added enum

5bf37fa

appeased linter

cc0c32c

removed bang

af392bb

therynamo added this to In Progress in Color Links Jun 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: light UI redesign #30

feat: light UI redesign #30

postrad commented May 25, 2020 •

edited

postrad May 25, 2020

therynamo Jun 1, 2020

postrad May 25, 2020

postrad May 25, 2020

postrad May 25, 2020

therynamo Jun 1, 2020

postrad May 25, 2020

therynamo Jun 1, 2020

therynamo Jun 1, 2020

therynamo Jun 1, 2020

postrad Jun 9, 2020

therynamo Jun 10, 2020

postrad Jun 20, 2020

postrad Jun 20, 2020

postrad Jun 20, 2020

postrad Jun 20, 2020

postrad Jun 20, 2020

postrad Jun 20, 2020 •

edited

coveralls commented Jun 20, 2020 •

edited

postrad Jun 20, 2020

therynamo commented Jun 23, 2020

		@@ -0,0 +1,2 @@

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

feat: light UI redesign #30

Are you sure you want to change the base?

feat: light UI redesign #30

Conversation

postrad commented May 25, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

postrad Jun 20, 2020 • edited

Choose a reason for hiding this comment

coveralls commented Jun 20, 2020 • edited

Pull Request Test Coverage Report for Build 143157397

💛 - Coveralls

Choose a reason for hiding this comment

therynamo commented Jun 23, 2020

postrad commented May 25, 2020 •

edited

postrad Jun 20, 2020 •

edited

coveralls commented Jun 20, 2020 •

edited