fix(search-box): fix for alignment of clear button

Fix for the vertical alignment of the clear buttons at search inputs.
Add the missing clear/reset button for the AddToGroupModal.

Author: cagdas001

client/src/components/AddToGroupModal/index.jsx

@@ -155,6 +155,10 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
     setCreatingGroup(false);
   };
 
+  const reset = () => {
+    setFilter("");
+  };
+
   return (
     <Modal
       onCancel={onCancel}
@@ -175,6 +179,16 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
             value={filter}
             disabled={loadingGroups}
           />
+          <span
+            className={
+              filter.length > 0
+                ? `${style.resetKeyword}`
+                : `${style.resetKeyword} ${style.resetKeywordHidden}`
+            }
+            onClick={() => reset()}
+          >
+            &times;
+          </span>
           <Button
             className={style.createButton}
             onClick={createGroup}

client/src/components/AddToGroupModal/style.module.scss

@@ -63,6 +63,12 @@
   &::placeholder {
     opacity: 0.5;
   }
+
+  &::-ms-clear {
+    display: none;
+    height: 0;
+    width: 0;
+  }
 }
 
 .searchRow {
@@ -92,3 +98,24 @@
   font: 400 12pt/1.25 Inter;
   margin-left: 30px;
 }
+
+.resetKeyword {
+  position: absolute;
+  left: 67.5%;
+  top: 10px;
+  appearance: none;
+  border: none;
+  color: $textColor;
+  cursor: pointer;
+  font-size: 24px;
+  font-family: Arial;
+  outline: none;
+
+  &:hover {
+    color: $red;
+  }
+
+  &.resetKeywordHidden {
+    visibility: hidden;
+  }
+}

client/src/components/SuggestionBox/style.module.scss

@@ -97,13 +97,21 @@
   height: 20px;
 }
 
+// firefox solution to vertically align .resetKeyword
+@supports (-moz-appearance: none) {
+  .resetKeyword {
+    align-self: center;
+  }
+}
+
 .resetKeyword {
   order: 2;
   appearance: none;
   border: none;
   color: $textColor;
   cursor: pointer;
   font-size: 24px;
+  font-family: Arial;
   outline: none;
 
   &:hover {

client/src/components/searchBox/searchBox.module.scss

@@ -61,13 +61,21 @@
   outline: none;
 }
 
+// firefox solution to vertically align .resetKeyword
+@supports (-moz-appearance: none) {
+  .resetKeyword {
+    align-self: center;
+  }
+}
+
 .resetKeyword {
   order: 2;
   appearance: none;
   border: none;
   color: $textColor;
   cursor: pointer;
   font-size: 24px;
+  font-family: Arial;
   outline: none;
 
   &:hover {