Styling changes for Search making the component similar to the one from Figma in Members modal.
Figma (in members modal):
Implementation (now only in thread search)
Before:
After
v2
Details
Details
Implementation (now only in thread search)
Before:
After
v2
The thread search bar should now be similar to the search in modal design.
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Branch
- jacek/search-styling
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
| 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. | |
| 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. 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 ^ | |
| 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 | |