[HMCR-1117] Bootstrap Corrections

asd

Author: ionwyn

.github/workflows/hmr-build-deploy.yml

@@ -16,7 +16,7 @@ jobs:
       actions: write
     steps:
       - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.9.1
+        uses: styfle/cancel-workflow-action@0.13.1
         with:
           access_token: ${{ github.token }}
 

client/src/js/components/fragments/Header.js

@@ -50,7 +50,7 @@ const Header = ({ currentUser }) => {
   return (
     <header className="mb-3">
       <Navbar expand="lg" className={`navbar-dark header-nav ${environmentClass}`}>
-        <Container>
+        <Container className='d-flex justify-content-between align-items-center flex-wrap'>
           <NavbarBrand tag={Link} onClick={hideNavbar} to="/">
             <img
               className="img-fluid d-none d-md-block"

client/src/js/components/ui/DataTableControl.js

@@ -34,7 +34,7 @@ const DataTableControl = ({
               return (
                 <th key={column.heading} style={style}>
                   {column.heading}
-                  {!column.nosort && <FontAwesomeButton icon="sort" onClick={() => onHeadingSortClicked(column.key)} />}
+                  {!column.nosort && <FontAwesomeButton className="no-border" icon="sort" onClick={() => onHeadingSortClicked(column.key)} />}
                 </th>
               );
             })}

client/src/js/components/ui/FontAwesomeButton.js

@@ -7,7 +7,8 @@ const FontAwesomeButton = (props) => {
     <Button
       size={props.size || 'xs'}
       color={props.color || 'primary'}
-      className={`fontawesome-button ${props.className}`}
+      outline={props.noBorder ? false : props.outline !== false}
+      className={`fontawesome-button${props.noBorder ? ' no-border' : ''}${props.className ? ` ${props.className}` : ''}`}
       onClick={props.onClick}
       id={props.id}
       disabled={props.disabled}

client/src/js/components/ui/MultiDropdownField.js

@@ -67,11 +67,12 @@ const MultiDropdownField = ({ values, setFieldValue, items, name, title, searcha
           </div>
         )}
         <div className="multi-item select-all">
-          <Label check className="multi-item-label">
+          <Label check className="multi-item-label d-flex align-items-center">
             <Input
               name={name}
               type="checkbox"
               checked={selectAll}
+              className="m-0 me-2"
               onChange={(e) => {
                 handleSelectedAllChecked(e.target.checked);
               }}
@@ -86,12 +87,13 @@ const MultiDropdownField = ({ values, setFieldValue, items, name, title, searcha
                 const displayName = item.name;
                 return (
                   <div key={item.id} className="multi-item">
-                    <Label check className="multi-item-label">
+                    <Label check className="multi-item-label d-flex align-items-center">
                       <Input
                         name={name}
                         type="checkbox"
                         value={item.id}
                         checked={values[name].includes(item.id)}
+                        className="m-0 me-2"
                         onChange={(e) => {
                           handleItemSelected(e.target.checked, item.id, push, remove);
                         }}

client/src/scss/_forms.scss

@@ -14,22 +14,11 @@
 }
 
 .multiselect-all {
-  // margin-left: -0.75rem;
-  // padding-left: 2.25rem;
-  // margin-right: -0.75rem;
-  // padding-right: 0.75rem;
-
-  .custom-control-label {
+  .form-check-label {
     font-weight: bold;
   }
 }
 
-.custom-file {
-  .custom-file-label {
-    overflow: hidden;
-  }
-}
-
 .form-control.fieldset{
   border: 1px solid;
   padding: 0.375rem 0.75rem;

client/src/scss/vendor/_additions.scss

@@ -5,6 +5,16 @@
 //---------------------------------------------------------------------------------------
 // sass-lint:disable force-element-nesting, force-pseudo-nesting
 
+// Remove all borders from a button
+.no-border {
+  border: none !important;
+  box-shadow: none !important;
+
+  &:focus, &:active {
+    box-shadow: none !important;
+  }
+}
+
 // The label element is no longer bolded by default, neither is this class defined
 .control-label {
   font-weight: 700;