feat: light UI redesign by postrad · Pull Request #30 · therynamo/color-links

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


 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

-        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

  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

      </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

+
+/* 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


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


Agreed 👍

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

      </div>

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


Oh that is 🔥

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

@@ -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

-    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


    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

-    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

 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

-    'no-console': 'off',
    '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

    '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

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

		export const COLORS: Array<string> = ['#37d67a', '#2ccce4', '#06A77D', '#ff8a65', '#1E91D6'] No newline at end of file

Conversation

postrad commented May 25, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

postrad Jun 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coveralls commented Jun 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 143157397

💛 - Coveralls

Uh oh!

Choose a reason for hiding this comment

Uh oh!

therynamo commented Jun 23, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

postrad commented May 25, 2020 •

edited

Loading

postrad Jun 20, 2020 •

edited

Loading

coveralls commented Jun 20, 2020 •

edited

Loading