Rework tab and tab list padding and gaps to match designs (#1529)

front/src/modules/ui/tab/components/Tab.tsx

@@ -30,7 +30,8 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2)};
+  margin-bottom: -1px;
+  padding: ${({ theme }) => theme.spacing(2) + ' 0'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
 `;
 

front/src/modules/ui/tab/components/TabList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -20,6 +21,15 @@ type TabListProps = {
   context: React.Context<string | null>;
 };
 
+const StyledContainer = styled.div`
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 40px;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
 export function TabList({ tabs, context }: TabListProps) {
   const initialActiveTabId = tabs[0].id;
 
@@ -33,7 +43,7 @@ export function TabList({ tabs, context }: TabListProps) {
   }, [initialActiveTabId, setActiveTabId]);
 
   return (
-    <>
+    <StyledContainer>
       {tabs
         .filter((tab) => !tab.hide)
         .map((tab) => (
@@ -49,6 +59,6 @@ export function TabList({ tabs, context }: TabListProps) {
             disabled={tab.disabled}
           />
         ))}
-    </>
+    </StyledContainer>
   );
 }

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -18,7 +18,10 @@ export const Default: Story = {
   args: {
     title: 'Tab title',
     active: false,
+    Icon: IconCheckbox,
+    disabled: false,
   },
+
   decorators: [ComponentDecorator],
 };
 
@@ -42,11 +45,15 @@ export const Catalog: Story = {
         {
           name: 'Active',
           values: ['true', 'false'],
+          labels: (active: string) =>
+            active === 'true' ? 'active' : 'inactive',
           props: (active: string) => ({ active: active === 'true' }),
         },
         {
           name: 'Disabled',
           values: ['true', 'false'],
+          labels: (disabled: string) =>
+            disabled === 'true' ? 'disabled' : 'enabled',
           props: (disabled: string) => ({ disabled: disabled === 'true' }),
         },
       ],

front/src/modules/ui/top-bar/TopBar.tsx

@@ -24,6 +24,8 @@ const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
   font-weight: ${({ theme }) => theme.font.weight.medium};
   height: 39px;
   justify-content: space-between;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
   z-index: 5;
 `;
 

front/src/modules/ui/view-bar/components/ViewBarDetails.tsx

@@ -46,7 +46,6 @@ const StyledChipcontainer = styled.div`
   height: 40px;
   justify-content: space-between;
   margin-left: ${({ theme }) => theme.spacing(2)};
-  margin-right: ${({ theme }) => theme.spacing(1)};
   overflow-x: auto;
 `;
 

front/src/pages/tasks/Tasks.tsx

@@ -27,9 +27,8 @@ const StyledTasksContainer = styled.div`
 const StyledTabListContainer = styled.div`
   align-items: end;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
   height: 40px;
-  margin-left: ${({ theme }) => theme.spacing(2)};
+  margin-left: ${({ theme }) => `-${theme.spacing(2)}`};
 `;
 
 export function Tasks() {