Quickfix/action filters alignment (#193)

* Align filter labels properly * Do not wrap filter label tooltips alone * Add contrast to select dropdown hover items
kausaltech · Oct 13, 2023 · 155f972 · 155f972
1 parent 37d28ca
commit 155f972
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/components/actions/ActionListFilters.tsx b/components/actions/ActionListFilters.tsx
@@ -168,6 +168,12 @@ const MainCategory = styled.div`
   }
 `;
 
+const FilterColumn = styled(Col)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+
 function sortDepthFirst<Type>(
   items: Type[],
   compareItem: (a: Type, b: Type) => number,
@@ -481,7 +487,7 @@ abstract class DefaultFilter<Value extends FilterValue>
   ) {
     const _isMulti = isMulti ?? false;
     return (
-      <Col sm={this.sm} md={this.md} lg={this.lg} key={this.id}>
+      <FilterColumn sm={this.sm} md={this.md} lg={this.lg} key={this.id}>
         <ActionListDropdownInput
           isMulti={_isMulti}
           id={this.id}
@@ -492,7 +498,7 @@ abstract class DefaultFilter<Value extends FilterValue>
           onChange={onChange}
           options={this.options}
         />
-      </Col>
+      </FilterColumn>
     );
   }
 }
@@ -806,7 +812,7 @@ class ActionNameFilter implements ActionListFilter<string | undefined> {
     t: TFunction
   ) {
     return (
-      <Col m={this.sm} md={this.md} lg={this.lg} key={this.id}>
+      <FilterColumn m={this.sm} md={this.md} lg={this.lg} key={this.id}>
         <ActionListTextInput
           id={this.id}
           label={this.getLabel(t)}
@@ -815,7 +821,7 @@ class ActionNameFilter implements ActionListFilter<string | undefined> {
           currentValue={value}
           inputRef={this.ref}
         />
-      </Col>
+      </FilterColumn>
     );
   }
 }

diff --git a/components/common/PopoverTip.tsx b/components/common/PopoverTip.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'common/i18n';
 import { Button, Tooltip } from 'reactstrap';
 
 const InfoButton = styled(Button)`
-  padding: 0 0.5rem 0.1rem;
+  padding: 0 0.25rem 0.1rem;
   line-height: 0.5rem;
   opacity: 0.5;
   svg {

diff --git a/components/common/SelectDropdown.tsx b/components/common/SelectDropdown.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Select, {
   components,
   DropdownIndicatorProps,
-  GroupBase,
   MultiValueProps,
   Theme as SelectTheme,
   ValueContainerProps,
@@ -11,16 +10,17 @@ import styled from 'styled-components';
 import Highlighter from 'react-highlight-words';
 import { FormGroup, Label as BSLabel } from 'reactstrap';
 import { useTheme, Theme } from 'common/theme';
-import { data } from 'autoprefixer';
 import PopoverTip from 'components/common/PopoverTip';
-import { TRUE } from 'sass';
-import { useTranslation } from 'common/i18n';
 
 const Label = styled(BSLabel)`
   font-weight: ${(props) => props.theme.formLabelFontWeight};
   line-height: ${(props) => props.theme.lineHeightSm};
 `;
 
+const TooltipWrapper = styled.span`
+  white-space: nowrap; // Prevents the tooltip from wrapping
+`;
+
 function getSelectStyles<Option extends SelectDropdownOption>(
   theme: Theme,
   multi: boolean,
@@ -81,11 +81,15 @@ function getSelectStyles<Option extends SelectDropdownOption>(
       const { indent } = data;
       const ret = {
         ...provided,
-        color: theme.themeColors.black,
+        color: isSelected
+          ? theme.themeColors.white
+          : isFocused
+          ? theme.themeColors.black
+          : theme.themeColors.black,
         backgroundColor: isSelected
-          ? theme.graphColors.grey020
+          ? theme.graphColors.grey080
           : isFocused
-          ? theme.graphColors.grey005
+          ? theme.graphColors.grey020
           : theme.graphColors.white,
         margin: 0,
         //marginLeft: `${indent ?? 0}rem`,
@@ -231,14 +235,27 @@ function SelectDropdown<
   } = props;
   const theme = useTheme();
   const styles = getSelectStyles(theme, props.isMulti === true, size);
+
+  /* Do not wrap the tooltip icon on a new line alone */
+  /* Join it with the last word of the label instead */
+  /* TODO: Make this a part of the label/PopoverTip component */
+  const labelLastWord = label?.split(' ').pop();
+  const labelText = helpText
+    ? label?.slice(0, label.length - (labelLastWord?.length || 0))
+    : label;
+  const tooltipElement = helpText ? (
+    <TooltipWrapper>
+      {labelLastWord}
+      <PopoverTip content={helpText} identifier={id} invert={invert} />
+    </TooltipWrapper>
+  ) : null;
+
   return (
     <FormGroup>
       {label && (
         <Label for={id}>
-          {label}
-          {helpText && (
-            <PopoverTip content={helpText} identifier={id} invert={invert} />
-          )}
+          {labelText}
+          {tooltipElement}
         </Label>
       )}
       <Select<SelectDropdownOption, IsMulti>
@@ -261,7 +278,7 @@ function SelectDropdown<
             />
           );
           if (context === 'value' || !indent) return highlighted;
-          let spans: JSX.Element[] = [];
+          const spans: JSX.Element[] = [];
           for (let i = 0; i < indent; i++) {
             spans.push(
               <span