Apply new theme (#449)

* Apply new theme

* Fix storybook

* Fixes

* Fix regressions

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

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+import { ThemeType } from './themes';
+
+export const overlayBackground = (props: { theme: ThemeType }) =>
+  css`
+    backdrop-filter: blur(8px);
+    background: ${props.theme.background.transparent.secondary};
+    box-shadow: ${props.theme.boxShadow.strong};
+  `;
+
+export const textInputStyle = (props: any) =>
+  css`
+    background-color: transparent;
+    border: none;
+    color: ${props.theme.font.color.primary};
+    outline: none;
+    padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${props.theme.font.color.light};
+      font-family: ${props.theme.font.family};
+      font-weight: ${props.theme.font.weight.medium};
+    }
+  `;
+
+export const hoverBackground = (props: any) =>
+  css`
+    transition: background 0.1s ease;
+    &:hover {
+      background: ${props.theme.background.transparent.light};
+    }
+  `;