Users management/Team management pages: Actions dropdown styling (#1392)

changes/issue-1255-action-dropdown-styling

@@ -0,0 +1,2 @@
+* Actions dropdown matches wireframes
+* Fix spacing, arrow, coloring

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

@@ -1,4 +1,6 @@
 .dropdown-cell {
+  width: 80px;
+
   .Select {
     position: unset;
 
@@ -35,6 +37,7 @@
       left: unset;
       top: unset;
       max-height: 220px;
+      padding: $pad-small;
     }
 
     &:not(.is-open) {

frontend/components/TableContainer/DataTable/_styles.scss

@@ -48,6 +48,7 @@
 
         &:last-child {
           border-right: none;
+          width: 180px;
         }
       }
     }
@@ -56,7 +57,9 @@
       position: absolute;
       top: -1px;
       width: 100%;
-      max-width: calc( 100vw - 2rem - 2rem - 0.125rem - 300px); // same as wrapper page for flex layout
+      max-width: calc(
+        100vw - 2rem - 2rem - 0.125rem - 300px
+      ); // same as wrapper page for flex layout
       border: 0;
 
       &__container {
@@ -81,7 +84,7 @@
           margin-right: $pad-medium;
         }
       }
-      
+
       &__inner-left,
       &__inner-right {
         display: flex;

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

@@ -118,33 +118,6 @@
     margin-top: 8px;
     margin-left: -4px;
     border: none;
-
-    &:hover {
-      content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
-    }
-  }
-
-  &.is-open {
-    .Select-arrow {
-      content: url("../assets/images/icon-collapse-black-16x16@2x.png");
-      height: 16px;
-      width: 16px;
-      margin-top: 14px;
-      margin-left: -3px;
-      border: none;
-
-      &:hover {
-        content: url("../assets/images/icon-collapse-blue-16x16@2x.png");
-      }
-    }
-
-    .Select-arrow-zone {
-      &:hover {
-        .Select-arrow {
-          border-top-color: transparent;
-        }
-      }
-    }
   }
 
   &.is-focused {
@@ -159,6 +132,36 @@
     }
   }
 
+  &.is-open {
+    .Select-arrow {
+      content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
+      height: 16px;
+      width: 16px;
+      margin-top: 12px;
+      margin-left: -4px;
+      border: none;
+    }
+  }
+  :hover {
+    .Select-arrow {
+      content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
+      height: 16px;
+      width: 16px;
+      margin-left: -4px;
+      border: none;
+    }
+    &.is-open {
+      .Select-arrow {
+        content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
+        height: 16px;
+        width: 16px;
+        margin-top: 10px;
+        margin-left: -4px;
+        border: none;
+      }
+    }
+  }
+
   &.has-value {
     > .Select-control,
     &.is-pseudo-focused > .Select-control {
@@ -178,6 +181,7 @@
     overflow: hidden;
     border: 0;
     margin: 0;
+    padding: $pad-small;
   }
 
   .Select-noresults {
@@ -187,7 +191,7 @@
   .Select-option {
     color: $core-fleet-black;
     font-size: $x-small;
-    margin: 6px 0;
+    margin: 0;
     padding: 6px $pad-medium;
     display: block;
 

frontend/pages/admin/TeamManagementPage/_styles.scss

@@ -5,7 +5,7 @@
     @include sticky-settings-description;
     padding-bottom: $pad-medium;
   }
-  
+
   .Select.is-focused:not(.is-open) > .Select-control {
     border: none;
     box-shadow: none;
@@ -13,7 +13,8 @@
 
   .Select.is-open {
     .Select-arrow {
-      margin-top: $pad-xsmall;
+      margin-top: 6px;
+      margin-bottom: -2px;
     }
   }
 
@@ -30,5 +31,4 @@
     margin-top: $pad-xxsmall;
     padding-left: 0;
   }
-
 }

frontend/pages/admin/UserManagementPage/_styles.scss

@@ -43,6 +43,10 @@
       padding: 18px 30px;
       white-space: nowrap;
       border-radius: 6px 0;
+
+      &:last-child {
+        min-width: 100px;
+      }
     }
   }
 
@@ -125,10 +129,11 @@
     border: none;
     box-shadow: none;
   }
-  
+
   .Select.is-open {
     .Select-arrow {
-      margin-top: 4px;
+      margin-top: 6px;
+      margin-bottom: -2px;
     }
   }
 
@@ -145,5 +150,4 @@
     margin-top: 2px;
     padding-left: 0;
   }
-
 }