Styling and changed checkboxes from inputs to icons

MarkUsProject · Jul 25, 2023 · 5b29fa5 · 5b29fa5
1 parent 9ba8e62
commit 5b29fa5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 36 deletions.
diff --git a/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js b/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js
@@ -7,12 +7,6 @@ export class MultiSelectDropdown extends React.Component {
     this.state = {expanded: false, tags: []};
   }
 
-  onClickOutside = e => {
-    if (!e.target.contains(e.relatedTarget)) {
-      this.setState({expanded: false});
-    }
-  };
-
   onSelect = (e, option) => {
     e.stopPropagation();
     this.props.onToggleOption(option);
@@ -36,18 +30,8 @@ export class MultiSelectDropdown extends React.Component {
               isSelected = selected.includes(option.key);
               return (
                 <li key={option.key} onClick={e => this.onSelect(e, option.key)}>
-                  <input
-                    id={option.key}
-                    type="checkbox"
-                    checked={isSelected}
-                    onChange={() => null}
-                    onBlur={e => {
-                      e.stopPropagation();
-                    }}
-                  ></input>
-                  <label htmlFor={option.key} onClick={event => event.preventDefault()}>
-                    {option.display}
-                  </label>
+                  {this.renderCheckBox(isSelected)}
+                  <span>{option.display}</span>
                 </li>
               );
             })}
@@ -57,6 +41,14 @@ export class MultiSelectDropdown extends React.Component {
     }
   };
 
+  renderCheckBox = checked => {
+    if (checked) {
+      return <FontAwesomeIcon icon="fa-solid fa-square-check" />;
+    } else {
+      return <FontAwesomeIcon icon="fa-regular fa-square" />;
+    }
+  };
+
   render() {
     let selected = this.props.selected;
     let options = this.props.options;
@@ -70,11 +62,11 @@ export class MultiSelectDropdown extends React.Component {
 
     return (
       <div
-        className="multiselect-dropdown"
+        className="dropdown multi-select-dropdown"
         onClick={() => this.setState({expanded: !this.state.expanded})}
         data-testid={this.props.title}
         tabIndex={-1}
-        onBlur={this.onClickOutside}
+        onBlur={() => this.setState({expanded: false})}
       >
         <div className={"tags-box"} data-testid={"tags-box"}>
           {selected.map(tag => (
@@ -89,9 +81,8 @@ export class MultiSelectDropdown extends React.Component {
             </div>
           ))}
         </div>
-        <div className={"options"}>
+        <div className={"options float-right"}>
           <div
-            className="float-right"
             data-testid={"reset"}
             onClick={e => {
               e.preventDefault();

diff --git a/app/assets/javascripts/fontawesome_config.js b/app/assets/javascripts/fontawesome_config.js
@@ -49,7 +49,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 import {faGithub} from "@fortawesome/free-brands-svg-icons";
-
+import {faSquare} from "@fortawesome/free-regular-svg-icons";
 config.autoAddCss = false;
 
 library.add(
@@ -102,5 +102,5 @@ library.add(
 );
 
 library.add(faGithub);
-
+library.add(faSquare);
 dom.watch();
diff --git a/app/assets/stylesheets/common/_multiselect_dropdown.scss b/app/assets/stylesheets/common/_multiselect_dropdown.scss
@@ -1,6 +1,7 @@
 @import 'constants';
 
-.multiselect-dropdown {
+.dropdown.multi-select-dropdown {
+  height: 30px;
   padding: 0.25em;
 
   .tags-box {
@@ -10,7 +11,6 @@
     width: $dropdown-horizontal - 50px;
 
     .tag {
-      background: $background-main;
       border: 1px solid $primary-three;
       border-radius: $radius;
       display: inline-block;
@@ -25,27 +25,36 @@
   }
 
   ul {
-    top: 2em;
+    display: block;
+    max-height: 120px;
+    overflow-y: auto;
 
     li {
-      align-self: stretch;
-      padding-left: 5px;
+      > span {
+        margin-left: 2pt;
+      }
+
+      .fa-square,
+      .fa-square-check {
+        color: $primary-one;
+      }
 
-      label {
-        margin-left: 0.25em;
+      &:hover,
+      &.active {
+        > .fa-square-check,
+        .fa-square {
+          color: $background-main;
+        }
       }
     }
   }
 
   .options {
-    align-items: center;
     display: inline-flex;
-    float: right;
     padding: 0.25em;
   }
 
-  .arrow-down,
-  .arrow-up {
-    margin-left: 5px;
+  .fa-xmark {
+    color: $primary-one;
   }
 }