Page MenuHomePhabricator
Files F3487160

D3368.id10287.diff
No OneTemporary
Actions

D3368.id10287.diff
View Options

diff --git a/web/components/clear-search-button.react.js b/web/components/clear-search-button.react.js
--- a/web/components/clear-search-button.react.js
+++ b/web/components/clear-search-button.react.js
@@ -1,10 +1,9 @@
// @flow
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as React from 'react';
+import SWMansionIcon from '../SWMansionIcon.react';
import css from './search.css';
type ClearSearchButtonProps = {
@@ -19,7 +18,7 @@
});
return (
<button className={searchClassNames} onClick={onClick}>
- <FontAwesomeIcon icon={faTimes} />
+ <SWMansionIcon icon="cross" size={12} />
</button>
);
}
diff --git a/web/components/search.css b/web/components/search.css
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -3,29 +3,39 @@
display: flex;
align-items: center;
margin: 1rem;
+ border-radius: 16px;
+}
+
+div.searchIcon {
+ display: flex;
+ margin: 8px;
+ color: var(--search-icon-color);
}
input.searchInput {
- background-color: var(--text-input-bg);
- font-size: var(--s-font-14);
- padding: 1rem;
+ background-color: transparent;
+ font-size: var(--m-font-16);
+ line-height: 1.5;
+ padding: 12px 0;
flex: 1;
border: none;
- color: var(--text-input-color);
+ color: var(--search-input-color);
outline: none;
}
input.searchInput::placeholder {
- color: var(--text-input-placeholder);
+ color: var(--search-input-placeholder);
}
button.clearSearch {
- color: var(--text-input-color);
+ color: var(--search-clear-color);
transition: ease-in-out 0.15s;
border: none;
- padding: 0 1rem;
- font-size: var(--m-font-16);
- background: none;
+ background: var(--search-clear-bg);
+ border-radius: 50%;
+ display: flex;
+ padding: 6px;
+ margin: 8px;
}
button.clearSearchDisabled {
diff --git a/web/components/search.react.js b/web/components/search.react.js
--- a/web/components/search.react.js
+++ b/web/components/search.react.js
@@ -2,6 +2,7 @@
import * as React from 'react';
+import SWMansionIcon from '../SWMansionIcon.react';
import ClearSearchButton from './clear-search-button.react';
import css from './search.css';
@@ -29,6 +30,9 @@
return (
<div className={css.searchContainer}>
+ <div className={css.searchIcon}>
+ <SWMansionIcon size={24} icon="search" />
+ </div>
<input
className={css.searchInput}
onChange={onChange}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -113,4 +113,9 @@
--app-list-icon-disabled-color: var(--shades-white-80);
--account-settings-label: var(--shades-black-60);
--account-button-color: var(--violet-dark-100);
+ --search-clear-color: var(--shades-white-100);
+ --search-clear-bg: var(--shades-black-70);
+ --search-input-color: var(--shades-white-100);
+ --search-input-placeholder: var(--shades-black-60);
+ --search-icon-color: var(--shades-black-60);
}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 19, 7:12 AM (21 h, 3 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2675826
Default Alt Text
D3368.id10287.diff (2 KB)

Event Timeline