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};
   }
 `;
 

front/src/modules/ui/icon/index.ts

@@ -12,6 +12,7 @@ export { IconSearch } from '@tabler/icons-react';
 export { IconSettings } from '@tabler/icons-react';
 export { IconLogout } from '@tabler/icons-react';
 export { IconColorSwatch } from '@tabler/icons-react';
+export { IconProgressCheck } from '@tabler/icons-react';
 export { IconX } from '@tabler/icons-react';
 export { IconChevronLeft } from '@tabler/icons-react';
 export { IconPlus } from '@tabler/icons-react';

front/src/modules/ui/themes/accent.ts

@@ -0,0 +1,15 @@
+import { color } from './colors';
+
+export const accentLight = {
+  primary: color.blueAccent25,
+  secondary: color.blueAccent20,
+  tertiary: color.blueAccent15,
+  quaternary: color.blueAccent10,
+};
+
+export const accentDark = {
+  primary: color.blueAccent75,
+  secondary: color.blueAccent80,
+  tertiary: color.blueAccent85,
+  quaternary: color.blueAccent90,
+};

front/src/modules/ui/themes/colors.ts

@@ -116,6 +116,14 @@ export const color = {
   gray20: grayScale.gray15,
   gray10: grayScale.gray10,
   gray0: grayScale.gray0,
+  blueAccent90: '#141a25',
+  blueAccent85: '#151D2E',
+  blueAccent80: '#152037',
+  blueAccent75: '#16233F',
+  blueAccent25: '#dae6fc',
+  blueAccent20: '#e2ecfd',
+  blueAccent15: '#edf2fe',
+  blueAccent10: '#f5f9fd',
 };
 
 export function rgba(hex: string, alpha: number) {

front/src/modules/ui/themes/themes.ts

@@ -1,3 +1,4 @@
+import { accentDark, accentLight } from './accent';
 import { animation } from './animation';
 import { backgroundDark, backgroundLight } from './background';
 import { blur } from './blur';
@@ -43,11 +44,10 @@ const common = {
 export const lightTheme = {
   ...common,
   ...{
+    accent: accentLight,
     background: backgroundLight,
     border: borderLight,
     boxShadow: boxShadowLight,
-    selectedCardHover: color.blue20,
-    selectedCard: color.blue10,
     font: fontLight,
     name: 'light',
   },
@@ -57,11 +57,10 @@ export type ThemeType = typeof lightTheme;
 export const darkTheme: ThemeType = {
   ...common,
   ...{
+    accent: accentDark,
     background: backgroundDark,
     border: borderDark,
     boxShadow: boxShadowDark,
-    selectedCardHover: color.blue70,
-    selectedCard: color.blue80,
     font: fontDark,
     name: 'dark',
   },