added fonts and icons

src/modules/layout/components/GridLayoutItemWrapper/index.tsx

@@ -1,5 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 import styles from "./styles.module.scss";
+import { IconButton } from "~/components/buttons/IconButton";
+
+import DeleteIcon from "~/assets/images/delete.svg";
+import SplitVertical from "~/assets/images/split-vertical.svg";
+import SplitHorizontal from "~/assets/images/split-horizontal.svg";
+
+console.log(DeleteIcon);
 
 type GridLayoutItemWrapperProps = PropsWithChildren & {
   splitVertical: () => void;
@@ -15,15 +22,23 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
 }) => (
   <div className={styles.wrapper}>
     <div className={styles.menu}>
-      <button onClick={splitVertical} role="button">
-        v
-      </button>
-      <button onClick={splitHorizontal} role="button">
-        h
-      </button>
-      <button onClick={remove} role="button">
-        d
-      </button>
+      <IconButton
+        onClick={splitVertical}
+        role="button"
+        className={styles.button}
+      >
+        <SplitVertical />
+      </IconButton>
+      <IconButton
+        onClick={splitHorizontal}
+        role="button"
+        className={styles.button}
+      >
+        <SplitHorizontal />
+      </IconButton>
+      <IconButton onClick={remove} role="button" className={styles.button}>
+        <DeleteIcon />
+      </IconButton>
     </div>
 
     {children}

src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss

@@ -9,3 +9,20 @@
   top: 0;
   right: 0;
 }
+
+.button {
+  opacity: 0.3;
+  cursor: pointer;
+  padding: 4px 2px;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+}

src/modules/layout/editor/containers/MarkdownEditorContainer/hooks/usePersistedValue.ts

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 
-const prefix = "VALUE__";
-
 const safelyGetStringValue = (key: string) => {
   try {
     return localStorage.getItem(key) ?? "";
@@ -19,7 +17,8 @@ const safelySetStringValue = (key: string, value: string) => {
 };
 
 export const usePersistedValue = (
-  id: string
+  id: string,
+  prefix: string
 ): [string, (val: string) => void] => {
   const key = `${prefix}${id}`;
   const [value, setValue] = useState(safelyGetStringValue(key));

src/modules/layout/editor/containers/MarkdownEditorContainer/index.tsx

@@ -11,7 +11,7 @@ interface MarkdownEditorContainerProps {
 export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   id,
 }) => {
-  const [value, setValue] = usePersistedValue(id);
+  const [value, setValue] = usePersistedValue(id, "MarkdownEditorContainer");
 
   return (
     <div className={styles.editor}>

src/modules/theme/constants/fonts.ts

@@ -0,0 +1,3 @@
+export enum FontFamily {
+  Inter = "inter",
+}

src/modules/theme/constants/theme.ts

@@ -0,0 +1,3 @@
+export enum Theme {
+  Dark = "dark",
+}

src/modules/theme/containers/ThemeProvider/index.tsx

@@ -0,0 +1,24 @@
+import { FC, PropsWithChildren, useEffect, useState } from "react";
+import { ThemeContext, defaultTheme } from "../../context/ThemeContext";
+
+type ThemeProviderProps = PropsWithChildren;
+
+const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
+  const [theme] = useState(defaultTheme);
+
+  useEffect(() => {
+    document.body.classList.add(`font-family-${theme.font}`);
+    return () => document.body.classList.remove(`font-family-${theme.font}`);
+  }, [theme.font]);
+
+  useEffect(() => {
+    document.body.classList.add(`theme-${theme.theme}`);
+    return () => document.body.classList.remove(`theme-${theme.theme}`);
+  }, [theme.theme]);
+
+  return (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+  );
+};
+
+export { ThemeProvider };

src/modules/theme/context/ThemeContext/index.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import { Theme } from "../../constants/theme";
+import { FontFamily } from "../../constants/fonts";
+
+export const defaultTheme = {
+  theme: Theme.Dark,
+  font: FontFamily.Inter,
+};
+
+export const ThemeContext = createContext(defaultTheme);
+
+export const useTheme = () => useContext(ThemeContext);