Polish Dropdowns (#11393)

* Align active and inactive items in dropdown menus via indentation

* Cleanup

ui/src/clockface/components/dropdowns/Dropdown.scss

@@ -41,17 +41,23 @@
 
 .dropdown--item {
   padding: 6px 11px;
+  padding-left: 21px;
   font-size: 12px;
   line-height: 12px;
   font-weight: 600;
   color: fade-out($g20-white, 0.18);
   white-space: nowrap;
   position: relative;
+  text-align: left;
 
-  &.active {
-    padding-left: 24px;
+  &.active,
+  &.checked {
     color: $g20-white;
   }
+  
+  &.checked {
+    padding-left: 24px;
+  }
 
   &:hover {
     color: $g20-white;
@@ -71,7 +77,7 @@
   border-radius: 50%;
   position: absolute;
   top: 50%;
-  left: 11px;
+  left: 8px;
   transform: translateY(-50%);
   background-color: $g20-white;
 

ui/src/clockface/components/dropdowns/DropdownItem.tsx

@@ -29,14 +29,15 @@ class DropdownItem extends Component<Props> {
     return (
       <div
         className={classnames('dropdown--item', {
-          active: selected,
+          checked: selected && checkbox,
+          active: selected && !checkbox,
           'multi-select--item': checkbox,
         })}
         onClick={this.handleClick}
       >
         {this.checkBox}
-        {this.dot}
         {this.childElements}
+        {this.dot}
       </div>
     )
   }