Various styling improvements (#766)

* Various styling improvements

* Add card styling

* Fix select when editing fields

* Add colors

* Refactor prevent click

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

@@ -4,10 +4,10 @@ import { DropResult } from '@hello-pangea/dnd'; // Atlassian dnd does not suppor
 export const StyledBoard = styled.div`
   border-radius: ${({ theme }) => theme.spacing(2)};
   display: flex;
+  flex: 1;
   flex-direction: row;
   overflow-x: auto;
   padding-left: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
 `;
 
 export type BoardPipelineStageColumn = {

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

@@ -5,8 +5,11 @@ import { debounce } from '~/utils/debounce';
 
 import { EditColumnTitleInput } from './EditColumnTitleInput';
 
-export const StyledColumn = styled.div`
+export const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
   background-color: ${({ theme }) => theme.background.primary};
+  border-left: 1px solid
+    ${({ theme, isFirstColumn }) =>
+      isFirstColumn ? 'none' : theme.border.color.light};
   display: flex;
   flex-direction: column;
   min-width: 200px;
@@ -14,15 +17,19 @@ export const StyledColumn = styled.div`
 `;
 
 const StyledHeader = styled.div`
+  align-items: center;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  height: 24px;
+  justify-content: left;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
   width: 100%;
 `;
 
 export const StyledColumnTitle = styled.h3`
   align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ color }) => color};
   display: flex;
   flex-direction: row;
@@ -30,13 +37,16 @@ export const StyledColumnTitle = styled.h3`
   font-style: normal;
   font-weight: ${({ theme }) => theme.font.weight.medium};
   gap: ${({ theme }) => theme.spacing(2)};
-  height: 24px;
   margin: 0;
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledAmount = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
+  margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 type OwnProps = {
@@ -46,6 +56,7 @@ type OwnProps = {
   onTitleEdit: (title: string) => void;
   totalAmount?: number;
   children: React.ReactNode;
+  isFirstColumn: boolean;
 };
 
 export function BoardColumn({
@@ -54,6 +65,7 @@ export function BoardColumn({
   onTitleEdit,
   totalAmount,
   children,
+  isFirstColumn,
 }: OwnProps) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [internalValue, setInternalValue] = React.useState(title);
@@ -65,10 +77,9 @@ export function BoardColumn({
   };
 
   return (
-    <StyledColumn>
+    <StyledColumn isFirstColumn={isFirstColumn}>
       <StyledHeader onClick={() => setIsEditing(true)}>
         <StyledColumnTitle color={colorCode}>
-          •
           {isEditing ? (
             <EditColumnTitleInput
               color={colorCode}

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

@@ -16,11 +16,12 @@ type OwnProps<SortField> = {
 };
 
 const StyledContainer = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   display: flex;
   flex-direction: column;
 `;
 
-const StyledTableHeader = styled.div`
+const StyledBoardHeader = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
@@ -83,7 +84,7 @@ export function BoardHeader<SortField>({
 
   return (
     <StyledContainer>
-      <StyledTableHeader>
+      <StyledBoardHeader>
         <StyledViewSection>
           <StyledIcon>{viewIcon}</StyledIcon>
           {viewName}
@@ -100,7 +101,7 @@ export function BoardHeader<SortField>({
             HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
           />
         </StyledFilters>
-      </StyledTableHeader>
+      </StyledBoardHeader>
       <SortAndFilterBar
         context={context}
         sorts={sorts}

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

@@ -16,7 +16,7 @@ const StyledButton = styled.button`
   padding: ${({ theme }) => theme.spacing(1)};
 
   &:hover {
-    background-color: ${({ theme }) => theme.background.secondary};
+    background-color: ${({ theme }) => theme.background.tertiary};
   }
 `;