Update selectors and badge styles #235

Lykhoyda · 2023-07-04T16:10:06Z

closes #162

Lykhoyda · 2023-07-10T13:30:38Z

@Tbaut the styles of Select and Autocomplete are updated. There could be minor misalignment with the design. The short version where we display only the icon is done for "Select" component only. The PR is already big enough, any new updates and features would be better handled in a separate PR.

Tbaut

Thanks a lot for this huge one. I made my best to review as thoroughly as possible. I'll ask @sweetpea22 to answer some of my comments here, and let's see how we move forward with these particular ones. There are so many changes, it's hard to review everything. Let me know what you want to fix in this PR or not, and we should create issues for those you'd prefer to tackle separately.

packages/ui/src/components/library/InputField.tsx

packages/ui/src/components/selectors/AccountSelection.tsx

packages/ui/src/components/library/TextFieldStyled.tsx

packages/ui/src/components/selectors/GenericAccountSelection.tsx

packages/ui/src/components/selectors/MultiProxySelection.tsx

packages/ui/src/components/EasySetup/BalancesTransfer.tsx

Tbaut · 2023-07-10T21:35:32Z

packages/ui/src/components/library/Autocomplete.tsx

+}
+
+Autocomplete.defaultProps = {
+  iconSize: '1.25rem'


I find the icons way too small in a dropdown, and don't really display nicely with 2 information such as a name and address.
Identicons are a way to identify accounts quickly and need to be large enough for a selection I'd say. Ping @sweetpea22

yes it looks like my design here is wrong, it's too small to look good. I'm thinking to only use the big ones like this and remove the address in the dropdown for tidiness. but i'll give it a go to see how this looks first, brb

agreed, cool

Lykhoyda · 2023-07-11T13:42:53Z

@Tbaut thank you for the detailed review. I updated the design according to the comments, please check again

asnaith · 2023-07-11T20:36:26Z

I took a look through all major screens after the recent changes and I did not notice any issues, nice visual improvements :)

Lykhoyda · 2023-07-13T10:56:14Z

@Tbaut please take a look. I updated the types for the methods and fixed the long list appearance

Tbaut

Thank you so much, this is looking great. I found a couple things that were forgotten, but I think we're good to go after that :)

Tbaut · 2023-07-13T12:22:08Z

packages/ui/src/components/library/Autocomplete.tsx

+  FilterOptionsState
+} from '@mui/base/useAutocomplete/useAutocomplete'
+import { theme } from '../../styles/theme'
+


There is something not right with the identity.

To reproduce, click the preview link, watch the address DCZyhphXsRLcW84G9WmWEXtAA8DKGtVGSFZLJYty8Ajjyfa

How did you put the icon? I wasn't able to watch the address with such name, but I centred and cut the long string name

The check icon is from the on-chain identity retrived automatically. Sorry I didn't mention it but you have to be on Kusama to see it.

Also add it without giving it a name, that works. This is now displayed this way, which is unreadable. The name should be on 1 line and the address on another

Tbaut · 2023-07-13T12:23:32Z

packages/ui/src/styles/theme.ts

@@ -140,6 +148,10 @@ export const theme = createTheme({
      primary: '#F1F5F9',
      secondary: '#F8FAFC'
    },
+    proxyBadge: {
+      pure: '#4C66AA',
+      multi: '#94A3B8'


The multi is still using the inaccessible color, please use the ones I linked.

edit: this https://www.figma.com/file/4dQC9kxf5uxCrAjpkzAK0D/Multix?node-id=502%3A15616&mode=dev
which corresponds to this I believe

border-radius: 0.9375rem; border: 1px solid var(--gray-400, #E6ECF1); background: var(--gray-300, #F1F5F9);

Tbaut · 2023-07-13T12:37:41Z

packages/ui/src/components/select/SignerSelection.tsx

-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Signing with"


I realized that we lost this quite important information, as users may not understand what this account selection is made for. Let's create an issue if you want to tackle this outside of this PR.

Not sure I completely understand how you want to display it. It would be better to see the design first. Also, I would prefer to make any changes in the following issues.

Yeah it's fine as a separate issue. We need to adapt the 2 cases where the label was pretty useful, those are in the multisig creation, that's the most important, and the transaction signing.

In the first case, users are most probably new to Multix and may have no idea what this dropdown is doing. In that case, we need to add a title "Signing with" above it.

I would prefer that issue focus on one subject, otherwise, it's not enjoyable to work in one huge PR

Regarding this in particular, I totally agree. Please open an issue and we can tackle it in a dedicated PR.

The bug I mentioned here should however be fixed before we merge #235 (comment)

@Tbaut the bug you mentioned is fixed

packages/ui/src/components/library/Autocomplete.tsx

Tbaut · 2023-07-13T15:02:24Z

There is another badge color that has been forgotten, and the background is still red, here:

Multix/packages/ui/src/components/Transactions/Transaction.tsx

Lines 148 to 149 in d5a92cc

    
               background-color: ${theme.custom.identity.red}; 
        
             }

Lykhoyda · 2023-07-13T15:09:40Z

label="Signing with"

It's not a big deal to change but we have a lot of small stuff to fix or adjust, so the story is open for a long time. I would prefer that issue focus on one subject, otherwise, it's not enjoyable to work in one huge PR. It's not only about this badge but in general.

Tbaut

nice, that was yet another big one, thank you!

github-actions bot deployed to multix (Preview) July 4, 2023 16:11 View deployment

github-actions bot deployed to multix (Preview) July 5, 2023 10:37 View deployment

Lykhoyda marked this pull request as ready for review July 10, 2023 13:27

github-actions bot deployed to multix (Preview) July 10, 2023 13:28 View deployment

Lykhoyda requested review from Tbaut and asnaith July 10, 2023 13:30

Tbaut reviewed Jul 10, 2023

View reviewed changes

github-actions bot deployed to multix (Preview) July 11, 2023 12:53 View deployment

Lykhoyda requested a review from Tbaut July 11, 2023 13:43

github-actions bot deployed to multix (Preview) July 11, 2023 13:43 View deployment

Lykhoyda added 8 commits July 11, 2023 16:28

update Select styles

dd1fb27

update proxy autoselect styles

e9609f3

update inputs styles

f5cb480

update inputs styles

1f1d919

wip

b667e51

update styles

60e6218

update styles

b41874c

update paddings

c211837

Lykhoyda force-pushed the lykhoyda/update_selectors_styles branch from 9076a9f to c211837 Compare July 11, 2023 14:28

github-actions bot deployed to multix (Preview) July 11, 2023 14:29 View deployment

asnaith approved these changes Jul 11, 2023

View reviewed changes

update types

2b8202a

github-actions bot deployed to multix (Preview) July 12, 2023 17:05 View deployment

cleanup

3d17e7a

github-actions bot deployed to multix (Preview) July 12, 2023 19:08 View deployment

Lykhoyda added 2 commits July 13, 2023 12:54

refactor portal for autoselect

d8fb916

Merge branch 'main' into lykhoyda/update_selectors_styles

04a4122

github-actions bot deployed to multix (Preview) July 13, 2023 10:56 View deployment

Tbaut reviewed Jul 13, 2023

View reviewed changes

update styles

5092903

Lykhoyda requested a review from Tbaut July 13, 2023 14:33

github-actions bot deployed to multix (Preview) July 13, 2023 14:34 View deployment

update for proxy

19a2140

github-actions bot deployed to multix (Preview) July 13, 2023 15:02 View deployment

update styles

418881c

github-actions bot deployed to multix (Preview) July 13, 2023 15:52 View deployment

Merge branch 'main' into lykhoyda/update_selectors_styles

393f9e2

github-actions bot requested a deployment to multix (Preview) July 14, 2023 11:12 Abandoned

github-actions bot deployed to multix (Preview) July 14, 2023 11:15 View deployment

update icon data

67c8fb3

github-actions bot deployed to multix (Preview) July 14, 2023 11:45 View deployment

get back badge corner

9fa8e41

github-actions bot deployed to multix (Preview) July 14, 2023 12:17 View deployment

Tbaut changed the title ~~Lykhoyda/update selectors styles~~ Update selectors and badge styles Jul 14, 2023

Tbaut approved these changes Jul 14, 2023

View reviewed changes

Tbaut merged commit 56d070a into main Jul 14, 2023
5 checks passed

Tbaut deleted the lykhoyda/update_selectors_styles branch July 14, 2023 12:32

Tbaut mentioned this pull request Jul 17, 2023

Fix too small identicons and lack of badges #261

Merged

Tbaut mentioned this pull request Jul 31, 2023

Warning: React does not recognize the sideBadge badgeType minifiedVersion inputSize prop on a DOM element. #274

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update selectors and badge styles #235

Update selectors and badge styles #235

Lykhoyda commented Jul 4, 2023 •

edited

Loading

Lykhoyda commented Jul 10, 2023

Tbaut left a comment

Tbaut Jul 10, 2023

sweetpea22 Jul 11, 2023

Tbaut Jul 11, 2023

Lykhoyda commented Jul 11, 2023

asnaith commented Jul 11, 2023

Lykhoyda commented Jul 13, 2023

Tbaut left a comment

Tbaut Jul 13, 2023

Lykhoyda Jul 13, 2023

Tbaut Jul 13, 2023

Tbaut Jul 13, 2023

Tbaut Jul 13, 2023 •

edited

Loading

Tbaut Jul 13, 2023

Lykhoyda Jul 13, 2023

Tbaut Jul 13, 2023

Tbaut Jul 13, 2023

Lykhoyda Jul 13, 2023

Tbaut commented Jul 13, 2023

Lykhoyda commented Jul 13, 2023

Tbaut left a comment

Update selectors and badge styles #235

Update selectors and badge styles #235

Conversation

Lykhoyda commented Jul 4, 2023 • edited Loading

Lykhoyda commented Jul 10, 2023

Tbaut left a 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

Lykhoyda commented Jul 11, 2023

asnaith commented Jul 11, 2023

Lykhoyda commented Jul 13, 2023

Tbaut left a 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

Tbaut Jul 13, 2023 • edited Loading

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

Tbaut commented Jul 13, 2023

Lykhoyda commented Jul 13, 2023

Tbaut left a comment

Choose a reason for hiding this comment

Lykhoyda commented Jul 4, 2023 •

edited

Loading

Tbaut Jul 13, 2023 •

edited

Loading