Update searching

components/CharacterResult/index.scss

@@ -28,7 +28,7 @@
     gap: $unit-half;
 
     h5 {
-      color: var(--text-secondary);
+      color: var(--text-tertiary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;

components/Input/index.scss

@@ -7,6 +7,14 @@
   display: block;
   padding: $unit-2x;
   width: 100%;
+
+  &.Bound {
+    background-color: var(--input-bound-bg);
+
+    &:hover {
+      background-color: var(--input-bound-bg-hover);
+    }
+  }
 }
 
 .InputError {

components/Input/index.tsx

@@ -16,11 +16,12 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
   forwardedRef
 ) {
   const classes = classNames({ Input: true }, props.className)
+  const { value, ...inputProps } = props
 
   return (
     <label className="Label" htmlFor={props.name}>
       <input
-        {...props}
+        {...inputProps}
         autoComplete="off"
         className={classes}
         defaultValue={props.value || ''}

components/JobSkillResult/index.scss

@@ -56,7 +56,7 @@
     }
 
     h5 {
-      color: var(--text-secondary);
+      color: var(--text-tertiary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;

components/SearchModal/index.tsx

@@ -89,7 +89,7 @@ const SearchModal = (props: Props) => {
         setRecordCount(response.data.meta.count)
 
         if (replace) {
-          replaceResults(response.data.count, response.data.results)
+          replaceResults(response.data.meta.count, response.data.results)
         } else {
           appendResults(response.data.results)
         }
@@ -330,7 +330,7 @@ const SearchModal = (props: Props) => {
           <div id="Bar">
             <Input
               autoComplete="off"
-              className="Search"
+              className="Search Bound"
               name="query"
               placeholder={props.placeholderText}
               ref={searchInput}

components/SummonResult/index.scss

@@ -28,7 +28,7 @@
     gap: $unit-half;
 
     h5 {
-      color: var(--text-secondary);
+      color: var(--text-tertiary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;

components/WeaponResult/index.scss

@@ -28,7 +28,7 @@
     gap: $unit-half;
 
     h5 {
-      color: var(--text-secondary);
+      color: var(--text-tertiary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;