Apply a few frontend fixes on dropdown (#169)

front/src/components/table/table-header/DropdownButton.tsx

@@ -58,8 +58,6 @@ const StyledDropdown = styled.ul`
   min-width: 160px;
   ${modalBackground}
   li {
-    border-radius: 2px;
-
     &:first-of-type {
       border-top-left-radius: var(--outer-border-radius);
       border-top-right-radius: var(--outer-border-radius);
@@ -74,18 +72,26 @@ const StyledDropdown = styled.ul`
 const StyledDropdownItem = styled.li`
   display: flex;
   align-items: center;
+  width: 160px;
   padding: ${(props) => props.theme.spacing(2)}
     calc(${(props) => props.theme.spacing(2)} - 2px);
   margin: 2px;
   cursor: pointer;
   user-select: none;
   color: ${(props) => props.theme.text60};
+  border-radius: 2px;
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);
   }
 `;
 
+const StyledDropdownItemClipped = styled.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
 const StyledDropdownTopOption = styled.li`
   display: flex;
   align-items: center;
@@ -94,13 +100,12 @@ const StyledDropdownTopOption = styled.li`
     calc(${(props) => props.theme.spacing(2)});
   cursor: pointer;
   user-select: none;
-  color: ${(props) => props.theme.text60};
+  color: ${(props) => props.theme.text80};
   font-weight: ${(props) => props.theme.fontWeightBold};
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);
   }
-  border-radius: 0%;
   border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
 `;
 
@@ -121,20 +126,24 @@ const StyledSearchField = styled.li`
   color: ${(props) => props.theme.text60};
   font-weight: ${(props) => props.theme.fontWeightBold};
 
-  border-radius: 0%;
+  overflow: hidden;
-  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
   input {
     height: 36px;
     width: 100%;
     border: none;
     padding: 8px;
     box-sizing: border-box;
-    &:hover {
+    font-family: ${(props) => props.theme.fontFamily};
-      background: rgba(0, 0, 0, 0.04);
+    border-radius: 8px;
+
+    &:focus {
+      outline: 0 none;
     }
   }
-  input::placeholder {
+  input::placeholder,
-    color: ${(props) => props.theme.text40};
+  input::-webkit-input-placeholder {
+    font-family: ${(props) => props.theme.fontFamily};
+    color: ${(props) => props.theme.text30};
     font-weight: ${(props) => props.theme.fontWeightBold};
   }
 `;
@@ -188,6 +197,7 @@ function DropdownTopOptionAngleDown() {
   );
 }
 DropdownButton.StyledDropdownItem = StyledDropdownItem;
+DropdownButton.StyledDropdownItemClipped = StyledDropdownItemClipped;
 DropdownButton.StyledSearchField = StyledSearchField;
 DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption;
 DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown;

front/src/components/table/table-header/FilterDropdownButton.tsx

@@ -108,7 +108,9 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
             setSelectedFilter(undefined);
           }}
         >
-          {result.render(result.value)}
+          <DropdownButton.StyledDropdownItemClipped>
+            {result.render(result.value)}
+          </DropdownButton.StyledDropdownItemClipped>
         </DropdownButton.StyledDropdownItem>
       );
     });

front/src/layout/styles/themes.ts

@@ -13,6 +13,7 @@ const commonTheme = {
   iconSizeLarge: '1.23rem',
 
   fontWeightBold: 500,
+  fontFamily: 'Inter, sans-serif',
 
   spacing: (multiplicator: number) => `${multiplicator * 4}px`,
 };

front/src/pages/companies/companies-columns.tsx

@@ -73,6 +73,22 @@ export const useCompaniesColumns = () => {
         ),
         size: 120,
       }),
+      columnHelper.accessor('domainName', {
+        header: () => (
+          <ColumnHead viewName="URL" viewIcon={<TbLink size={16} />} />
+        ),
+        cell: (props) => (
+          <EditableText
+            content={props.row.original.domainName || ''}
+            changeHandler={(value) => {
+              const company = props.row.original;
+              company.domainName = value;
+              updateCompany(company);
+            }}
+          />
+        ),
+        size: 100,
+      }),
       columnHelper.accessor('employees', {
         header: () => (
           <ColumnHead viewName="Employees" viewIcon={<TbSum size={16} />} />
@@ -95,22 +111,6 @@ export const useCompaniesColumns = () => {
         ),
         size: 70,
       }),
-      columnHelper.accessor('domainName', {
-        header: () => (
-          <ColumnHead viewName="URL" viewIcon={<TbLink size={16} />} />
-        ),
-        cell: (props) => (
-          <EditableText
-            content={props.row.original.domainName || ''}
-            changeHandler={(value) => {
-              const company = props.row.original;
-              company.domainName = value;
-              updateCompany(company);
-            }}
-          />
-        ),
-        size: 100,
-      }),
       columnHelper.accessor('address', {
         header: () => (
           <ColumnHead viewName="Address" viewIcon={<TbMapPin size={16} />} />