Page MenuHomePhabricator
Differential D3368

[web] Refactor search styling to match Figma
ClosedPublic
Actions

Authored by • jacek on Mar 8 2022, 4:06 AM.
Tags
None
Referenced Files
F5101283: D3368.id10287.diff
Mon, Mar 31, 2:31 PM
F5100376: D3368.id10939.diff
Mon, Mar 31, 12:39 PM
F5098631: D3368.diff
Mon, Mar 31, 3:59 AM
F5098058: D3368.id10857.diff
Mon, Mar 31, 1:05 AM
F5097000: D3368.id10137.diff
Sun, Mar 30, 10:21 PM
F5095518: D3368.id10344.diff
Sun, Mar 30, 5:50 PM
Unknown Object (File)
Sat, Mar 29, 10:19 PM
Unknown Object (File)
Tue, Mar 25, 4:51 AM
View All Files
Subscribers
• adrian
ashoat
atul
• karol

Details

Reviewers
tomek
• benschac
atul
Commits
rCOMM9ac97ade83df: [web] Refactor search styling to match Figma
Summary

Styling changes for Search making the component similar to the one from Figma in Members modal.

Figma (in members modal):

Screenshot_Google Chrome_2022-03-11_120152.png (274×1 px, 19 KB)

Implementation (now only in thread search)
Before:
Screenshot_Google Chrome_2022-03-08_131939.png (196×936 px, 16 KB)

After
v2
Screenshot_Google Chrome_2022-03-11_120102.png (138×800 px, 10 KB)

Test Plan

The thread search bar should now be similar to the search in modal design.

Diff Detail

Repository
rCOMM Comm
Branch
jacek/search-styling
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jacek created this revision.Mar 8 2022, 4:06 AM
Herald added subscribers: • karol, atul, • adrian, ashoat. · View Herald TranscriptMar 8 2022, 4:06 AM
• jacek edited the summary of this revision. (Show Details)Mar 8 2022, 4:09 AM
• jacek added reviewers: • benschac, atul.
• jacek edited the summary of this revision. (Show Details)
Harbormaster completed remote builds in B7208: Diff 10137.Mar 8 2022, 4:11 AM
• jacek requested review of this revision.Mar 8 2022, 4:11 AM
• jacek edited the summary of this revision. (Show Details)Mar 8 2022, 4:20 AM
• benschac requested changes to this revision.Mar 8 2022, 11:11 AM
• benschac added inline comments.
web/components/search.css
16

in web/style.css

body {
  font-family: var(--font-stack);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
  font-size: 1.6rem;
}

base body font is 1.6rem which should be a variable. Either way I don't think we need to define font-size here since body by default is 1.6rem.

17

we have a defined line-height in typography: --line-height-text: 1.5;

web/components/search.react.js
33

could we create a css selector:

.searchIcon svg {
 color: var(--search-icon-color);
}

and --search-icon-color is --shades-black-60.

ideally, trying to avoid hard coding colors.

34

Could you leave a TODO: update icon size comment here. The diff with updated paddings should land shortly.

This revision now requires changes to proceed.Mar 8 2022, 11:11 AM
• jacek added a child revision: D3384: [web] Introduce `MembersModal`.Mar 9 2022, 5:57 AM
• jacek added a parent revision: D3367: [web] Introduce common `Search` component.
• jacek added inline comments.Mar 11 2022, 2:37 AM
web/components/search.css
16

It is overwritten by browser stylesheets for input HTML element. When font size is not set here, its size is 13.33px.
The same is for line-height - it is normal by default, which is ~1.2

Maybe we should consider resetting the default browser styles for some elements (bi think button has the same issue), so we don't have to overwrite it?

17

See comment above ^

• jacek updated this revision to Diff 10286.Mar 11 2022, 2:38 AM

Rebase & adjust icon styling

Harbormaster completed remote builds in B7296: Diff 10286.Mar 11 2022, 2:44 AM
• jacek updated this revision to Diff 10287.Mar 11 2022, 2:57 AM

Improved clear search button to also match Figma.

Harbormaster completed remote builds in B7297: Diff 10287.Mar 11 2022, 3:02 AM
• jacek edited the summary of this revision. (Show Details)Mar 11 2022, 3:02 AM
• benschac accepted this revision.Mar 11 2022, 7:35 AM
• benschac added inline comments.
web/components/search.css
38 ↗(On Diff #10287)

can we avoid using margin? and just add padding to the parent element?

16

Yeah, let's do that here: https://linear.app/comm/issue/ENG-862/implement-css-reset-for-inputfields

This revision is now accepted and ready to land.Mar 11 2022, 7:35 AM
• jacek updated this revision to Diff 10344.Mar 14 2022, 9:58 AM

Replaced margin with padding

Harbormaster completed remote builds in B7343: Diff 10344.Mar 14 2022, 10:03 AM
• jacek added 1 blocking reviewer(s): tomek.Mar 25 2022, 4:43 AM
This revision now requires review to proceed.Mar 25 2022, 4:43 AM
• jacek updated this revision to Diff 10676.Mar 25 2022, 6:56 AM

Fix padding

Harbormaster completed remote builds in B7601: Diff 10676.Mar 25 2022, 7:03 AM
tomek accepted this revision.Mar 25 2022, 7:31 AM
This revision is now accepted and ready to land.Mar 25 2022, 7:31 AM
• jacek updated this revision to Diff 10857.Mar 31 2022, 2:21 AM

rebase

Harbormaster completed remote builds in B7741: Diff 10857.Mar 31 2022, 2:39 AM
Closed by commit rCOMM9ac97ade83df: [web] Refactor search styling to match Figma (authored by • jacek). · Explain WhyApr 1 2022, 3:50 AM
This revision was automatically updated to reflect the committed changes.
• jacek added a commit: rCOMM9ac97ade83df: [web] Refactor search styling to match Figma.

Revision Contents
Changeset List

PathSize
web/
components/
4 lines
19 lines
4 lines
3 lines

Diff 10137

View Options

web/components/clear-search-button.react.js

Show First 20 Lines • Show All 248 Lines • ▼ Show 20 Lines if (initialState) {
navigation = ( navigation = (
<NavigationContainer <NavigationContainer
initialState={initialState} initialState={initialState}
onStateChange={onNavigationStateChange} onStateChange={onNavigationStateChange}
theme={theme} theme={theme}
ref={containerRef} ref={containerRef}
> >
<BottomSheetModalProvider> <BottomSheetModalProvider>
<ChatContextProvider>
<DeepLinksContextProvider> <DeepLinksContextProvider>
<RootNavigator /> <RootNavigator />
</DeepLinksContextProvider> </DeepLinksContextProvider>
</ChatContextProvider>
<NavigationHandler /> <NavigationHandler />
</BottomSheetModalProvider> </BottomSheetModalProvider>
</NavigationContainer> </NavigationContainer>
); );
} }
return ( return (
<GestureHandlerRootView style={styles.app}> <GestureHandlerRootView style={styles.app}>
<StaffContextProvider> <StaffContextProvider>
<FeatureFlagsProvider> <FeatureFlagsProvider>
<NavContext.Provider value={navContext}> <NavContext.Provider value={navContext}>
<RootContext.Provider value={rootContext}> <RootContext.Provider value={rootContext}>
<InputStateContainer> <InputStateContainer>
<MessageEditingContextProvider> <MessageEditingContextProvider>
<SafeAreaProvider initialMetrics={initialWindowMetrics}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ActionSheetProvider> <ActionSheetProvider>
<ENSCacheProvider provider={provider}> <ENSCacheProvider provider={provider}>
<MediaCacheProvider persistence={filesystemMediaCache}> <MediaCacheProvider persistence={filesystemMediaCache}>
<EditUserAvatarProvider> <EditUserAvatarProvider>
<NativeEditThreadAvatarProvider> <NativeEditThreadAvatarProvider>
<MarkdownContextProvider> <MarkdownContextProvider>
<ChatContextProvider>
<MessageSearchProvider> <MessageSearchProvider>
<RegistrationContextProvider> <RegistrationContextProvider>
<SQLiteDataHandler /> <SQLiteDataHandler />
<ConnectedStatusBar /> <ConnectedStatusBar />
<ReduxPersistGate <ReduxPersistGate
persistor={getPersistor()} persistor={getPersistor()}
> >
{gated} {gated}
</ReduxPersistGate> </ReduxPersistGate>
<PersistedStateGate> <PersistedStateGate>
<Socket <Socket
detectUnsupervisedBackgroundRef={ detectUnsupervisedBackgroundRef={
detectUnsupervisedBackgroundRef detectUnsupervisedBackgroundRef
} }
/> />
</PersistedStateGate> </PersistedStateGate>
{navigation} {navigation}
</RegistrationContextProvider> </RegistrationContextProvider>
</MessageSearchProvider> </MessageSearchProvider>
</ChatContextProvider>
</MarkdownContextProvider> </MarkdownContextProvider>
</NativeEditThreadAvatarProvider> </NativeEditThreadAvatarProvider>
</EditUserAvatarProvider> </EditUserAvatarProvider>
</MediaCacheProvider> </MediaCacheProvider>
</ENSCacheProvider> </ENSCacheProvider>
</ActionSheetProvider> </ActionSheetProvider>
</SafeAreaProvider> </SafeAreaProvider>
</MessageEditingContextProvider> </MessageEditingContextProvider>
Show All 25 Lines
View Options

web/components/search.css

Show First 20 Lines • Show All 248 Lines • ▼ Show 20 Lines if (initialState) {
navigation = ( navigation = (
<NavigationContainer <NavigationContainer
initialState={initialState} initialState={initialState}
onStateChange={onNavigationStateChange} onStateChange={onNavigationStateChange}
theme={theme} theme={theme}
ref={containerRef} ref={containerRef}
> >
<BottomSheetModalProvider> <BottomSheetModalProvider>
<ChatContextProvider>
<DeepLinksContextProvider> <DeepLinksContextProvider>
<RootNavigator /> <RootNavigator />
</DeepLinksContextProvider> </DeepLinksContextProvider>
</ChatContextProvider>
<NavigationHandler /> <NavigationHandler />
</BottomSheetModalProvider> </BottomSheetModalProvider>
</NavigationContainer> </NavigationContainer>
); );
} }
return ( return (
<GestureHandlerRootView style={styles.app}> <GestureHandlerRootView style={styles.app}>
<StaffContextProvider> <StaffContextProvider>
<FeatureFlagsProvider> <FeatureFlagsProvider>
<NavContext.Provider value={navContext}> <NavContext.Provider value={navContext}>
<RootContext.Provider value={rootContext}> <RootContext.Provider value={rootContext}>
<InputStateContainer> <InputStateContainer>
<MessageEditingContextProvider> <MessageEditingContextProvider>
<SafeAreaProvider initialMetrics={initialWindowMetrics}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ActionSheetProvider> <ActionSheetProvider>
<ENSCacheProvider provider={provider}> <ENSCacheProvider provider={provider}>
<MediaCacheProvider persistence={filesystemMediaCache}> <MediaCacheProvider persistence={filesystemMediaCache}>
<EditUserAvatarProvider> <EditUserAvatarProvider>
<NativeEditThreadAvatarProvider> <NativeEditThreadAvatarProvider>
<MarkdownContextProvider> <MarkdownContextProvider>
<ChatContextProvider>
<MessageSearchProvider> <MessageSearchProvider>
<RegistrationContextProvider> <RegistrationContextProvider>
<SQLiteDataHandler /> <SQLiteDataHandler />
<ConnectedStatusBar /> <ConnectedStatusBar />
<ReduxPersistGate <ReduxPersistGate
persistor={getPersistor()} persistor={getPersistor()}
> >
{gated} {gated}
</ReduxPersistGate> </ReduxPersistGate>
<PersistedStateGate> <PersistedStateGate>
<Socket <Socket
detectUnsupervisedBackgroundRef={ detectUnsupervisedBackgroundRef={
detectUnsupervisedBackgroundRef detectUnsupervisedBackgroundRef
} }
/> />
</PersistedStateGate> </PersistedStateGate>
{navigation} {navigation}
</RegistrationContextProvider> </RegistrationContextProvider>
</MessageSearchProvider> </MessageSearchProvider>
</ChatContextProvider>
</MarkdownContextProvider> </MarkdownContextProvider>
</NativeEditThreadAvatarProvider> </NativeEditThreadAvatarProvider>
</EditUserAvatarProvider> </EditUserAvatarProvider>
</MediaCacheProvider> </MediaCacheProvider>
</ENSCacheProvider> </ENSCacheProvider>
</ActionSheetProvider> </ActionSheetProvider>
</SafeAreaProvider> </SafeAreaProvider>
</MessageEditingContextProvider> </MessageEditingContextProvider>
Show All 25 Lines
View Options

web/components/search.react.js

Show First 20 Lines • Show All 248 Lines • ▼ Show 20 Lines if (initialState) {
navigation = ( navigation = (
<NavigationContainer <NavigationContainer
initialState={initialState} initialState={initialState}
onStateChange={onNavigationStateChange} onStateChange={onNavigationStateChange}
theme={theme} theme={theme}
ref={containerRef} ref={containerRef}
> >
<BottomSheetModalProvider> <BottomSheetModalProvider>
<ChatContextProvider>
<DeepLinksContextProvider> <DeepLinksContextProvider>
<RootNavigator /> <RootNavigator />
</DeepLinksContextProvider> </DeepLinksContextProvider>
</ChatContextProvider>
<NavigationHandler /> <NavigationHandler />
</BottomSheetModalProvider> </BottomSheetModalProvider>
</NavigationContainer> </NavigationContainer>
); );
} }
return ( return (
<GestureHandlerRootView style={styles.app}> <GestureHandlerRootView style={styles.app}>
<StaffContextProvider> <StaffContextProvider>
<FeatureFlagsProvider> <FeatureFlagsProvider>
<NavContext.Provider value={navContext}> <NavContext.Provider value={navContext}>
<RootContext.Provider value={rootContext}> <RootContext.Provider value={rootContext}>
<InputStateContainer> <InputStateContainer>
<MessageEditingContextProvider> <MessageEditingContextProvider>
<SafeAreaProvider initialMetrics={initialWindowMetrics}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ActionSheetProvider> <ActionSheetProvider>
<ENSCacheProvider provider={provider}> <ENSCacheProvider provider={provider}>
<MediaCacheProvider persistence={filesystemMediaCache}> <MediaCacheProvider persistence={filesystemMediaCache}>
<EditUserAvatarProvider> <EditUserAvatarProvider>
<NativeEditThreadAvatarProvider> <NativeEditThreadAvatarProvider>
<MarkdownContextProvider> <MarkdownContextProvider>
<ChatContextProvider>
<MessageSearchProvider> <MessageSearchProvider>
<RegistrationContextProvider> <RegistrationContextProvider>
<SQLiteDataHandler /> <SQLiteDataHandler />
<ConnectedStatusBar /> <ConnectedStatusBar />
<ReduxPersistGate <ReduxPersistGate
persistor={getPersistor()} persistor={getPersistor()}
> >
{gated} {gated}
</ReduxPersistGate> </ReduxPersistGate>
<PersistedStateGate> <PersistedStateGate>
<Socket <Socket
detectUnsupervisedBackgroundRef={ detectUnsupervisedBackgroundRef={
detectUnsupervisedBackgroundRef detectUnsupervisedBackgroundRef
} }
/> />
</PersistedStateGate> </PersistedStateGate>
{navigation} {navigation}
</RegistrationContextProvider> </RegistrationContextProvider>
</MessageSearchProvider> </MessageSearchProvider>
</ChatContextProvider>
</MarkdownContextProvider> </MarkdownContextProvider>
</NativeEditThreadAvatarProvider> </NativeEditThreadAvatarProvider>
</EditUserAvatarProvider> </EditUserAvatarProvider>
</MediaCacheProvider> </MediaCacheProvider>
</ENSCacheProvider> </ENSCacheProvider>
</ActionSheetProvider> </ActionSheetProvider>
</SafeAreaProvider> </SafeAreaProvider>
</MessageEditingContextProvider> </MessageEditingContextProvider>
Show All 25 Lines
View Options

web/theme.css

Show First 20 Lines • Show All 248 Lines • ▼ Show 20 Lines if (initialState) {
navigation = ( navigation = (
<NavigationContainer <NavigationContainer
initialState={initialState} initialState={initialState}
onStateChange={onNavigationStateChange} onStateChange={onNavigationStateChange}
theme={theme} theme={theme}
ref={containerRef} ref={containerRef}
> >
<BottomSheetModalProvider> <BottomSheetModalProvider>
<ChatContextProvider>
<DeepLinksContextProvider> <DeepLinksContextProvider>
<RootNavigator /> <RootNavigator />
</DeepLinksContextProvider> </DeepLinksContextProvider>
</ChatContextProvider>
<NavigationHandler /> <NavigationHandler />
</BottomSheetModalProvider> </BottomSheetModalProvider>
</NavigationContainer> </NavigationContainer>
); );
} }
return ( return (
<GestureHandlerRootView style={styles.app}> <GestureHandlerRootView style={styles.app}>
<StaffContextProvider> <StaffContextProvider>
<FeatureFlagsProvider> <FeatureFlagsProvider>
<NavContext.Provider value={navContext}> <NavContext.Provider value={navContext}>
<RootContext.Provider value={rootContext}> <RootContext.Provider value={rootContext}>
<InputStateContainer> <InputStateContainer>
<MessageEditingContextProvider> <MessageEditingContextProvider>
<SafeAreaProvider initialMetrics={initialWindowMetrics}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ActionSheetProvider> <ActionSheetProvider>
<ENSCacheProvider provider={provider}> <ENSCacheProvider provider={provider}>
<MediaCacheProvider persistence={filesystemMediaCache}> <MediaCacheProvider persistence={filesystemMediaCache}>
<EditUserAvatarProvider> <EditUserAvatarProvider>
<NativeEditThreadAvatarProvider> <NativeEditThreadAvatarProvider>
<MarkdownContextProvider> <MarkdownContextProvider>
<ChatContextProvider>
<MessageSearchProvider> <MessageSearchProvider>
<RegistrationContextProvider> <RegistrationContextProvider>
<SQLiteDataHandler /> <SQLiteDataHandler />
<ConnectedStatusBar /> <ConnectedStatusBar />
<ReduxPersistGate <ReduxPersistGate
persistor={getPersistor()} persistor={getPersistor()}
> >
{gated} {gated}
</ReduxPersistGate> </ReduxPersistGate>
<PersistedStateGate> <PersistedStateGate>
<Socket <Socket
detectUnsupervisedBackgroundRef={ detectUnsupervisedBackgroundRef={
detectUnsupervisedBackgroundRef detectUnsupervisedBackgroundRef
} }
/> />
</PersistedStateGate> </PersistedStateGate>
{navigation} {navigation}
</RegistrationContextProvider> </RegistrationContextProvider>
</MessageSearchProvider> </MessageSearchProvider>
</ChatContextProvider>
</MarkdownContextProvider> </MarkdownContextProvider>
</NativeEditThreadAvatarProvider> </NativeEditThreadAvatarProvider>
</EditUserAvatarProvider> </EditUserAvatarProvider>
</MediaCacheProvider> </MediaCacheProvider>
</ENSCacheProvider> </ENSCacheProvider>
</ActionSheetProvider> </ActionSheetProvider>
</SafeAreaProvider> </SafeAreaProvider>
</MessageEditingContextProvider> </MessageEditingContextProvider>
Show All 25 Lines