Design changes #781

1. I feel the added css is hacky, (see mention in Github comments)

2. I guess I haven't figured out the correct way to use `palette.additional["gray"][8]`, the "Add more files" should have a light gray background  [according to the design](https://user-images.githubusercontent.com/33178835/108517161-5a102d00-72c7-11eb-9004-4390e75c035a.png).

3. [according to the design](https://user-images.githubusercontent.com/33178835/108517161-5a102d00-72c7-11eb-9004-4390e75c035a.png) the "done" button is large. Do we have any other such buttons in the UI? using a `variant="large"` made it wider, and larger. Wondering if I missed something, if I should leave it as is, or if we should create some new variant "wide" or something.

4. This red "Please select a file" at the end my demo isn't super nice either :)

Here's the upload flow:
upload.mp4

hey @Tbaut
I placed some replies to your comments, hoping they would help with 1 & 2. for -
3. For the button, I would simply add a width to the button under a CSS className, not add a variant.
4. Yes the Please select a file doesn't look right. centralizing it might improve it, or we can always ask cindy
to put up a design quickly

…ge-776

Tbaut · 2021-02-22T12:40:08Z

Thanks a lot @tanmoyAtb your guidance helped a lot.
I pushed some changes, and try to not have this PR go in too many directions.
I will comment in github why I did some things I did.

render · 2021-02-22T12:40:11Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

packages/common-components/src/FileInput/FileInput.tsx

Tbaut · 2021-02-22T12:57:26Z

packages/files-ui/src/Components/Modules/UploadFileModule.tsx

  const classes = useStyles()
  const { uploadFiles, currentPath } = useDrive()

  const UploadSchema = object().shape({
-    files: array()
-      .min(1, "Please select a file")


With the "Done" button being disabled when there's no file to upload, it gives the nice UX that users understand right away that they can't upload anything, and we don't need to have this error message (that we discussed earlier wasn't nicely placed).

render · 2021-02-22T12:57:56Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

tanmoyAtb

Looks great !
Some pointers -
The space above the list of files should be smaller !

tanmoyAtb · 2021-02-22T17:23:29Z

packages/files-ui/src/Components/Modules/UploadFileModule.tsx

+              className={clsx(classes.okButton, "wide")}
+              disabled={isDoneDisabled}
+            >
+              <Trans>Done</Trans>


should be Upload

Thanks Tanmoy, I've discussed this with @sweetpea22 and the "Upload" had been understood by user as a "Add more", or "Browse". That's why we thought the button should rather give the confidence to users that it should be clicked when they are done. Maybe "Submit" could be better?

How about "Start Upload"?

Yes "Start upload" seems more relatable to me !

okay, should we change txt content of the first upload modal (before adding files) to "start upload" too or nah?

I think the text is fine, you're selecting files. The real upload would happen when you "strat upload" :)

Changing that.

Tbaut · 2021-02-22T17:50:02Z

Here's what it looks like now:

edit: the space between the top of the modal and the "Add more files" are still inconsistent. Making this space smaller looks weird to me though.

Should I make it look like this? :
edit: did it.

This is how it looks with the last commit
https://user-images.githubusercontent.com/33178835/108748326-bdf05b00-753e-11eb-83b2-83be9b6bce02.mp4

render · 2021-02-22T17:53:03Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

Tbaut · 2021-02-23T10:09:21Z

I addressed the spacing issue.

render · 2021-02-23T10:11:05Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

render · 2021-02-23T10:29:44Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

tanmoyAtb

Looks good !

sweetpea22

hey guys, the background of modals has changed to gray[2], easier on the eyes 😛
prob can address this in another PR.

FSM1

great work

render · 2021-02-23T19:00:31Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

…e-776

render · 2021-02-23T19:28:08Z

Your Render PR Server at https://components-storybook-dev-pr-781.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-c0nspjjjbvmciotr8q7g.

Tbaut · 2021-02-24T10:34:17Z

Thanks for the help @FSM1. I'll open a follow-up PR for the modal @sweetpea22, and the translation in a pre-commit so that we don't forget about it.

design changes with grumbles

845a6ca

Tbaut commented Feb 19, 2021

View reviewed changes

packages/common-components/src/FileInput/FileInput.tsx Outdated Show resolved Hide resolved

Tbaut commented Feb 19, 2021

View reviewed changes

packages/common-components/src/FileInput/FileInput.tsx Outdated Show resolved Hide resolved

Tbaut requested review from RyRy79261, FSM1 and tanmoyAtb February 19, 2021 14:48

fix deployment

5625c53

Thibaut Sardan added 3 commits February 22, 2021 10:26

Merge branch 'dev' of github.com:imploy/ui into fix/tbaut-design-chan…

6005739

…ge-776

translation

4758968

remove useless error message and fix css

eecc828

Tbaut commented Feb 22, 2021

View reviewed changes

packages/common-components/src/FileInput/FileInput.tsx Show resolved Hide resolved

bring back dropzone check

fad8536

Tbaut commented Feb 22, 2021

View reviewed changes

tanmoyAtb reviewed Feb 22, 2021

View reviewed changes

start upload and space above files

3b8c89f

fiddle with margin

cb2cfb1

Thibaut Sardan added 2 commits February 23, 2021 11:24

restore paperclip

8985138

end of file carriage return

b045474

Tbaut requested review from tanmoyAtb and sweetpea22 February 23, 2021 16:24

tanmoyAtb approved these changes Feb 23, 2021

View reviewed changes

sweetpea22 approved these changes Feb 23, 2021

View reviewed changes

Tbaut mentioned this pull request Feb 23, 2021

Use eslint accross the board and use its power #785

Merged

update messages.po

987f8d5

FSM1 approved these changes Feb 23, 2021

View reviewed changes

Merge remote-tracking branch 'origin/dev' into fix/tbaut-design-chang…

595558b

…e-776

Tbaut merged commit feffe35 into dev Feb 24, 2021

Tbaut deleted the fix/tbaut-design-change-776 branch February 24, 2021 10:34

This was referenced Feb 24, 2021

Add yarn extract in github workflow after each commit #786

Closed

Change background modal to gray[2] #787

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design changes #781

Design changes #781

Tbaut commented Feb 19, 2021 •

edited

Loading

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

tanmoyAtb commented Feb 20, 2021

Tbaut commented Feb 22, 2021

render bot commented Feb 22, 2021

Tbaut Feb 22, 2021

render bot commented Feb 22, 2021

tanmoyAtb left a comment

tanmoyAtb Feb 22, 2021

Tbaut Feb 22, 2021 •

edited

Loading

sweetpea22 Feb 22, 2021

tanmoyAtb Feb 22, 2021

sweetpea22 Feb 22, 2021

Tbaut Feb 22, 2021

Tbaut commented Feb 22, 2021 •

edited

Loading

render bot commented Feb 22, 2021

Tbaut commented Feb 23, 2021

render bot commented Feb 23, 2021

render bot commented Feb 23, 2021

tanmoyAtb left a comment

sweetpea22 left a comment

FSM1 left a comment

render bot commented Feb 23, 2021

render bot commented Feb 23, 2021

Tbaut commented Feb 24, 2021

Design changes #781

Design changes #781

Conversation

Tbaut commented Feb 19, 2021 • edited Loading

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

render bot commented Feb 19, 2021

tanmoyAtb commented Feb 20, 2021

Tbaut commented Feb 22, 2021

render bot commented Feb 22, 2021

Tbaut Feb 22, 2021

Choose a reason for hiding this comment

render bot commented Feb 22, 2021

tanmoyAtb left a comment

Choose a reason for hiding this comment

tanmoyAtb Feb 22, 2021

Choose a reason for hiding this comment

Tbaut Feb 22, 2021 • edited Loading

Choose a reason for hiding this comment

sweetpea22 Feb 22, 2021

Choose a reason for hiding this comment

tanmoyAtb Feb 22, 2021

Choose a reason for hiding this comment

sweetpea22 Feb 22, 2021

Choose a reason for hiding this comment

Tbaut Feb 22, 2021

Choose a reason for hiding this comment

Tbaut commented Feb 22, 2021 • edited Loading

render bot commented Feb 22, 2021

Tbaut commented Feb 23, 2021

render bot commented Feb 23, 2021

render bot commented Feb 23, 2021

tanmoyAtb left a comment

Choose a reason for hiding this comment

sweetpea22 left a comment

Choose a reason for hiding this comment

FSM1 left a comment

Choose a reason for hiding this comment

render bot commented Feb 23, 2021

render bot commented Feb 23, 2021

Tbaut commented Feb 24, 2021

Tbaut commented Feb 19, 2021 •

edited

Loading

Tbaut Feb 22, 2021 •

edited

Loading

Tbaut commented Feb 22, 2021 •

edited

Loading