Update TextBox component

[magicznyleszek]

Description

Update looks of TextBox component and cleanup its usage.

Notes

Things here:

• Unified looks of TextBox component - former 'on-white' type is now de-facto only style (notice the plenty places with removed m='on-white')
• We are slowly moving towards 12px and 14px font sizes
• TextBox has now 100% width
• Dropped description option from TextBox (never used)
• TextBox is now Functional Component with CSS Module
• Moved some BEM components definitions to the files that use them
• Moved MetadataEditor styles to separate file
• Updated all the places that were overriding .text-box directly
• Cleaned up ConnectProjects a tiny bit
• Updated focus styles for Button component
• Use focus-visible instead of focus for global focus styles

Related issues

Fixes #3914

[srartese]

Since this links to issue #3914, how much of these styles are we adhering to? For example I see that you unified the text box styles with your changes but we don't have the change when searching and letters being bolded.

[magicznyleszek]

@srartese right, sorry - that old issue is not that up-to-date. The latest designs for TextBox are at https://www.figma.com/file/AL7q1d3qNr9XILJxBjyxcn/Website-%2B-KPI-%2F-Password-Forms?type=design&node-id=199%3A7582&mode=design&t=lg1f3uo914tvV2TM-1 and the "searching and letters being bolded" part is for KoboSelect component.

[srartese]

• In that case there are a few discrepancies for active styles and errors. The glow in Figma around the box has more of a shadow than the current version.

• Error textbox is missing icon and color is changing the label when it shouldn't be.

• Lastly, the login modal text boxes are not updated with the new style.

[magicznyleszek]

@srartese I've pushed a lot of changes :P I found a more complete Figma designs and updated everything accordingly (besides option "Populated" x "Error", which I feel has wrong text color by mistake). I also updated the storybook definition for TextBox, so you can test everything there (if you haven't done so already) :)

As for the login page (or rather all Django templates), this would require a lot more work and turning those forms into React apps. I will create a separate GH issue for handling that. We might be doing this soon when we redesign those pages (Figma design is already done)

[srartese]

Looks great!

[srartese]

I know this wasn't a change you made but since we are updating this file should we change these to use the sizes variables here? IE: margin-right: 24px; to margin-right: sizes.$x24;