From 8c4845df0f70402f89fe9d3c0fb1e39999476e09 Mon Sep 17 00:00:00 2001
From: huy <huytran.dev.web@gmail.com>
Date: Wed, 22 Feb 2023 10:05:48 +0700
Subject: [PATCH] #197: width of searchfield

---
 src/components/Search/index.jsx         | 6 +++---
 src/components/Search/index.module.scss | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Search/index.module.scss

diff --git a/src/components/Search/index.jsx b/src/components/Search/index.jsx
index b40ce5e2..dc3d7afa 100644
--- a/src/components/Search/index.jsx
+++ b/src/components/Search/index.jsx
@@ -7,7 +7,7 @@ import { useDamViewModel } from 'store/DamStore/DamViewModelContextProvider';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { observer } from 'mobx-react';
-
+import styles from './index.module.scss';
 const Search = observer(() => {
   const damListViewModel = useDamViewModel();
   const { t } = useTranslation('common');
@@ -51,7 +51,7 @@ const Search = observer(() => {
   const filterBy = () => true;
 
   return (
-    <div className={`input-group d-flex mb-0 pe-2 wr_input_search bg-theme `}>
+    <div className={`input-group d-flex mb-0 pe-2 wr_input_search bg-theme ${styles.width}`}>
       <button
         type="button"
         id="button-search"
@@ -70,7 +70,7 @@ const Search = observer(() => {
         options={options}
         className="col bg-theme"
         inputProps={{
-          className: `border-0 w-100 shadow-none bg-theme fw-semibold `,
+          className: `border-0 w-100 shadow-none bg-theme fw-semibold ${styles.input}`,
         }}
         onKeyDown={handleKeyDown}
         onChange={handleChange}
diff --git a/src/components/Search/index.module.scss b/src/components/Search/index.module.scss
new file mode 100644
index 00000000..b2834a6c
--- /dev/null
+++ b/src/components/Search/index.module.scss
@@ -0,0 +1,9 @@
+.width {
+  max-width: 656px;
+}
+input {
+  &::placeholder {
+    color: #c0c0c0;
+    font-weight: 400;
+  }
+}