Various styling improvements (#766)

* Various styling improvements

* Add card styling

* Fix select when editing fields

* Add colors

* Refactor prevent click

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',
   },