feat: wip import csv [part 1] (#1033)

* feat: wip import csv

* feat: start implementing twenty UI

* feat: new radio button component

* feat: use new radio button component and fix scroll issue

* fix: max height modal

* feat: wip try to customize react-data-grid to match design

* feat: wip match columns

* feat: wip match column selection

* feat: match column

* feat: clean heading component & try to fix scroll in last step

* feat: validation step

* fix: small cleaning and remove unused component

* feat: clean folder architecture

* feat: remove translations

* feat: remove chackra theme

* feat: remove unused libraries

* feat: use option button to open spreadsheet & fix stories

* Fix lint and fix imports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/theme/constants/background.ts

@@ -1,7 +1,7 @@
 import DarkNoise from '../assets/dark-noise.jpg';
 import LightNoise from '../assets/light-noise.png';
 
-import { grayScale, rgba } from './colors';
+import { color, grayScale, rgba } from './colors';
 
 export const backgroundLight = {
   noisy: `url(${LightNoise.toString()});`,
@@ -16,6 +16,7 @@ export const backgroundLight = {
     medium: rgba(grayScale.gray100, 0.08),
     light: rgba(grayScale.gray100, 0.04),
     lighter: rgba(grayScale.gray100, 0.02),
+    danger: rgba(color.red, 0.08),
   },
   overlay: rgba(grayScale.gray80, 0.8),
 };
@@ -33,6 +34,7 @@ export const backgroundDark = {
     medium: rgba(grayScale.gray0, 0.1),
     light: rgba(grayScale.gray0, 0.06),
     lighter: rgba(grayScale.gray0, 0.03),
+    danger: rgba(color.red, 0.08),
   },
   overlay: rgba(grayScale.gray80, 0.8),
 };

front/src/modules/ui/theme/constants/border.ts

@@ -1,4 +1,4 @@
-import { grayScale } from './colors';
+import { color, grayScale, rgba } from './colors';
 
 const common = {
   radius: {
@@ -16,6 +16,7 @@ export const borderLight = {
     light: grayScale.gray15,
     secondaryInverted: grayScale.gray50,
     inverted: grayScale.gray60,
+    danger: rgba(color.red, 0.14),
   },
   ...common,
 };
@@ -27,6 +28,7 @@ export const borderDark = {
     light: grayScale.gray70,
     secondaryInverted: grayScale.gray35,
     inverted: grayScale.gray20,
+    danger: rgba(color.red, 0.14),
   },
   ...common,
 };

front/src/modules/ui/theme/constants/colors.ts

@@ -22,7 +22,7 @@ export const grayScale = {
   gray0: '#ffffff',
 };
 
-export const color: { [key: string]: string } = {
+export const color = {
   yellow: '#ffd338',
   yellow80: '#2e2a1a',
   yellow70: '#453d1e',