Fix some icon display size + fix padding issue on EditableChip component (#314)

* Fix some icon display size + fix padding issue on EditableChip component

* Fix according to PR

* Fix server generate and deploy scripts

* Fix image size on Opportunities board

* Fix lint

* Fix according to PR

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconPlus } from '@/ui/icons/index';
@@ -21,9 +22,10 @@ const StyledButton = styled.button`
 `;
 
 export const NewButton = () => {
+  const theme = useTheme();
   return (
     <StyledButton>
-      <IconPlus size={16} />
+      <IconPlus size={theme.iconSizeMedium} />
       New
     </StyledButton>
   );

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -19,8 +19,8 @@ export type EditableChipProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input`
-  padding-left: ${(props) => props.theme.spacing(1)};
-  padding-right: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(2)};
   width: 100%;
 
   ${textInputStyle}

front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconCheck } from '@/ui/icons/index';
@@ -35,10 +36,13 @@ export function DropdownMenuSelectableItem({
   onClick,
   children,
 }: React.PropsWithChildren<Props>) {
+  const theme = useTheme();
   return (
     <DropdownMenuSelectableItemContainer onClick={onClick} selected={selected}>
       <StyledLeftContainer>{children}</StyledLeftContainer>
-      <StyledRightIcon>{selected && <IconCheck size={16} />}</StyledRightIcon>
+      <StyledRightIcon>
+        {selected && <IconCheck size={theme.iconSizeMedium} />}
+      </StyledRightIcon>
     </DropdownMenuSelectableItemContainer>
   );
 }

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {
@@ -65,6 +66,7 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
   onRemoveFilter,
   onCancelClick,
 }: OwnProps<SortField, TData>) {
+  const theme = useTheme();
   return (
     <StyledBar>
       <StyledChipcontainer>
@@ -76,9 +78,9 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
               id={sort.key}
               icon={
                 sort.order === 'desc' ? (
-                  <IconArrowNarrowDown />
+                  <IconArrowNarrowDown size={theme.iconSizeMedium} />
                 ) : (
-                  <IconArrowNarrowUp />
+                  <IconArrowNarrowUp size={theme.iconSizeMedium} />
                 )
               }
               onRemove={() => onRemoveSort(sort.key)}

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconX } from '@/ui/icons/index';
@@ -50,13 +51,14 @@ function SortOrFilterChip({
   icon,
   onRemove,
 }: OwnProps) {
+  const theme = useTheme();
   return (
     <StyledChip>
       <StyledIcon>{icon}</StyledIcon>
       {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
-        <IconX />
+        <IconX size={theme.iconSizeMedium} />
       </StyledDelete>
     </StyledChip>
   );