Change sort and filter chip style, Add seperator (#1222)

- change sort filter chip style & seperator

front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx

@@ -75,6 +75,22 @@ const StyledFilterContainer = styled.div`
   display: flex;
 `;
 
+const StyledSeperatorContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSeperator = styled.div`
+  align-self: stretch;
+  background: ${({ theme }) => theme.background.quaternary};
+  width: 1px;
+`;
+
 function SortAndFilterBar<SortField>({
   context,
   sorts,
@@ -141,10 +157,16 @@ function SortAndFilterBar<SortField>({
                     <IconArrowNarrowUp size={theme.icon.size.md} />
                   )
                 }
+                isSort
                 onRemove={() => onRemoveSort(sort.key)}
               />
             );
           })}
+          {sorts.length && filtersWithDefinition.length && (
+            <StyledSeperatorContainer>
+              <StyledSeperator />
+            </StyledSeperatorContainer>
+          )}
           {filtersWithDefinition.map((filter) => {
             return (
               <SortOrFilterChip

front/src/modules/ui/filter-n-sort/components/SortOrFilterChip.tsx

@@ -10,18 +10,24 @@ type OwnProps = {
   labelValue: string;
   icon: ReactNode;
   onRemove: () => void;
+  isSort?: boolean;
 };
 
-const StyledChip = styled.div`
+type StyledChipProps = {
+  isSort?: boolean;
+};
+
+const StyledChip = styled.div<StyledChipProps>`
   align-items: center;
-  background-color: ${({ theme }) => theme.background.secondary};
+  background-color: ${({ theme }) => theme.accent.quaternary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border: 1px solid ${({ theme }) => theme.accent.tertiary};
-  border-radius: 50px;
+  border-radius: 4px;
   color: ${({ theme }) => theme.color.blue};
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
   font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ isSort }) => (isSort ? 'bold' : 'normal')};
   padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
 `;
 const StyledIcon = styled.div`
@@ -39,7 +45,7 @@ const StyledDelete = styled.div`
   margin-top: 1px;
   user-select: none;
   &:hover {
-    background-color: ${({ theme }) => theme.background.tertiary};
+    background-color: ${({ theme }) => theme.accent.secondary};
     border-radius: ${({ theme }) => theme.border.radius.sm};
   }
 `;
@@ -54,10 +60,11 @@ function SortOrFilterChip({
   labelValue,
   icon,
   onRemove,
+  isSort,
 }: OwnProps) {
   const theme = useTheme();
   return (
-    <StyledChip>
+    <StyledChip isSort={isSort}>
       <StyledIcon>{icon}</StyledIcon>
       {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
       {labelValue}