Fleet UI: Dropdown arrows updated, on hover button icon color, etc (#13129)

frontend/components/BackLink/_styles.scss

@@ -3,4 +3,12 @@
   align-items: center;
   padding: $pad-small $pad-xxsmall; // larger clickable area
   gap: $pad-xsmall;
+
+  &:hover {
+    svg {
+      path {
+        stroke: $core-vibrant-blue-over;
+      }
+    }
+  }
 }

frontend/components/Modal/Modal.tsx

@@ -1,6 +1,8 @@
 import React, { useContext, useEffect } from "react";
 import classnames from "classnames";
 import { NotificationContext } from "context/notification";
+import Button from "components/buttons/Button/Button";
+import Icon from "components/Icon/Icon";
 
 const baseClass = "modal";
 
@@ -72,7 +74,9 @@ const Modal = ({
         <div className={`${baseClass}__header`}>
           <span>{title}</span>
           <div className={`${baseClass}__ex`}>
-            <button className="button button--unstyled" onClick={onExit} />
+            <Button className="button button--unstyled" onClick={onExit}>
+              <Icon name="ex" color="core-fleet-black" size="medium" />
+            </Button>
           </div>
         </div>
         <div className={`${baseClass}__content`}>{children}</div>

frontend/components/Modal/_styles.scss

@@ -33,18 +33,19 @@
 
   &__ex {
     text-decoration: none;
-    padding-left: $pad-xsmall;
 
-    .button::after {
-      content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png");
-      transform: scale(0.5);
-      border-radius: 0px;
+    &:hover {
+      .icon {
+        svg {
+          path {
+            stroke: $core-vibrant-blue;
+          }
+        }
+      }
     }
 
-    .button:hover::after {
-      content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png");
-      transform: scale(0.5);
-      border-radius: 0px;
+    .button {
+      padding: $pad-small;
     }
   }
 

frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss

@@ -48,6 +48,10 @@
       .Select-input {
         height: auto;
       }
+
+      .Select-arrow-zone {
+        display: flex;
+      }
     }
 
     .Select-menu-outer {
@@ -66,12 +70,6 @@
       left: -12px;
     }
 
-    &:not(.is-open) {
-      .Select-control:hover .Select-arrow {
-        content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
-      }
-    }
-
     &.is-open {
       .Select-control .Select-placeholder {
         color: $core-vibrant-blue;

frontend/components/buttons/Button/_styles.scss

@@ -225,6 +225,12 @@ $base-class: "button";
     &:hover,
     &:focus {
       color: $core-vibrant-blue-over;
+
+      svg {
+        path {
+          fill: $core-vibrant-blue-over;
+        }
+      }
     }
 
     // globally styled gap between text and icon

frontend/components/forms/fields/Dropdown/Dropdown.jsx

@@ -6,6 +6,7 @@ import Select from "react-select";
 
 import dropdownOptionInterface from "interfaces/dropdownOption";
 import FormField from "components/forms/FormField";
+import Icon from "components/Icon";
 
 const baseClass = "dropdown";
 
@@ -110,8 +111,22 @@ class Dropdown extends Component {
     );
   };
 
+  renderCustomDropdownArrow = () => {
+    return (
+      <div className={`${baseClass}__custom-arrow`}>
+        <Icon name="chevron" className={`${baseClass}__icon`} />
+      </div>
+    );
+  };
+
   render() {
-    const { handleChange, renderOption, onMenuOpen, onMenuClose } = this;
+    const {
+      handleChange,
+      renderOption,
+      onMenuOpen,
+      onMenuClose,
+      renderCustomDropdownArrow,
+    } = this;
     const {
       error,
       className,
@@ -159,6 +174,7 @@ class Dropdown extends Component {
           onOpen={onMenuOpen}
           onClose={onMenuClose}
           autoFocus={autoFocus}
+          arrowRenderer={renderCustomDropdownArrow}
         />
       </FormField>
     );

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -1,4 +1,11 @@
 .dropdown {
+  &__custom-arrow {
+    display: flex;
+
+    svg {
+      transition: transform 0.25s ease;
+    }
+  }
   &__label {
     display: block;
     font-size: $small;
@@ -113,16 +120,6 @@
     }
   }
 
-  .Select-arrow {
-    content: url("../assets/images/icon-chevron-black-16x16@2x.png");
-    height: 16px;
-    width: 16px;
-    vertical-align: middle;
-    margin-top: -1px;
-    margin-left: -4px;
-    border: none;
-  }
-
   &.is-focused {
     &.dropdown__select {
       border: 1px solid $core-vibrant-blue;
@@ -137,34 +134,35 @@
   }
 
   &.is-open {
+    .dropdown__icon {
+      svg {
+        transform: rotate(180deg);
+        transition: transform 0.25s ease;
+        path {
+          stroke: $core-vibrant-blue-over;
+        }
+      }
+    }
     .Select-control {
       border-radius: $border-radius;
-
-      .Select-arrow {
-        content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
-        height: 16px;
-        width: 16px;
-        margin-left: -4px;
-        border: none;
-        top: 0px;
-      }
     }
   }
   :hover {
-    .Select-arrow {
-      content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
-      height: 16px;
-      width: 16px;
-      margin-left: -4px;
-      border: none;
+    .dropdown__icon {
+      svg {
+        path {
+          stroke: $core-vibrant-blue-over;
+        }
+      }
     }
+
     &.is-open {
-      .Select-arrow {
-        content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
-        height: 16px;
-        width: 16px;
-        margin-left: -4px;
-        border: none;
+      .dropdown__icon {
+        svg {
+          path {
+            stroke: $core-vibrant-blue-over;
+          }
+        }
       }
     }
   }
@@ -277,7 +275,7 @@
     }
 
     .Select-arrow-zone {
-      display: block;
+      display: flex;
     }
 
     .Select-option {

frontend/components/top_nav/UserMenu/_styles.scss

@@ -6,6 +6,18 @@
       border: 1px solid $ui-vibrant-blue-10;
       border-right: 0;
     }
+    &:focus:has(+ .dropdown-button__options--opened) {
+      .icon {
+        svg {
+          transform: rotate(180deg);
+          transition: transform 0.25s ease;
+        }
+      }
+    }
+
+    svg {
+      transition: transform 0.25s ease;
+    }
   }
 
   .dropdown-button__options {

frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss

@@ -1,11 +1,15 @@
 .label-filter-select {
   width: 175px;
 
+  svg {
+    transition: transform 0.25s ease;
+  }
+
   &:hover {
     // no access to hover state from react-select in JS so this is done here.
     .custom-dropdown-indicator {
       & path {
-        fill: $core-vibrant-blue;
+        stroke: $core-vibrant-blue;
       }
     }
   }
@@ -21,6 +25,13 @@
       box-shadow: none;
       border: 1px solid $core-vibrant-blue;
     }
+    &--is-focused,
+    &--menu-is-open {
+      svg {
+        transform: rotate(180deg);
+        transition: transform 0.25s ease;
+      }
+    }
   }
 
   .label-filter-select__value-container {

frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/_styles.scss

@@ -1,5 +1,4 @@
 .host-actions-dropdown {
-
   .form-field {
     margin: 0;
   }
@@ -47,6 +46,10 @@
       .Select-input {
         height: auto;
       }
+
+      .Select-arrow-zone {
+        display: flex;
+      }
     }
 
     .Select-multi-value-wrapper {

frontend/pages/hosts/details/_styles.scss

@@ -176,6 +176,14 @@
         font-size: $x-small;
         height: 38px;
         margin-left: $pad-small;
+
+        &:hover {
+          svg {
+            path {
+              fill: $core-vibrant-blue-over;
+            }
+          }
+        }
       }
 
       .refetch-offline {