Add missing theme functions for metamigo-frontend

.gitignore

@@ -19,3 +19,4 @@ docker-compose.yml
 coverage
 .pgpass
 **/dist/**
+.metamigo.local.json

apps/leafcutter/middleware.ts

@@ -1,4 +1,5 @@
 import { withAuth } from "next-auth/middleware";
+import getConfig from "next/config";
 
 export default withAuth(
   () => { },
@@ -13,7 +14,12 @@ export default withAuth(
           headers,
         } = req;
 
-        const embedded = process.env.LINK_EMBEDDED === "true";
+        return true;
+        /*
+                const {
+                  publicRuntimeConfig: { embedded },
+                } = getConfig();
+        
                 if (embedded) {
                   return true;
                 }
@@ -33,6 +39,7 @@ export default withAuth(
                 }
         
                 return false;
+                */
       },
     }
   }

apps/metamigo-frontend/components/layout/Menu.tsx

@@ -27,8 +27,8 @@ export const Menu: FC = ({ onMenuClick, logout, dense = false }: any) => {
   const theme = useTheme();
   // @ts-ignore
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
-  const open = useSelector((state: any) => state.admin.ui.sidebarOpen);
+  const open = true; // useSelector((state: any) => state.admin.ui.sidebarOpen);
-  useSelector((state: any) => state.theme); // force rerender on theme change
+  // useSelector((state: any) => state.theme); // force rerender on theme change
 
   const handleToggle = (menu: MenuName) => {
     setState((state: any) => ({ ...state, [menu]: !state[menu] }));

apps/metamigo-frontend/components/layout/themes.ts

@@ -1,4 +1,5 @@
 export const theme = {
+  spacing: () => 8,
   palette: {
     primary: {
       main: "#337799",
@@ -12,10 +13,35 @@ export const theme = {
     background: {
       default: "#fff",
     },
+    getContrastText(color: string) { return color === "#ffffff" ? "#000" : "#fff"; },
   },
   shape: {
     borderRadius: 5,
   },
+  breakpoints: {
+    up: (key: any) => `@media (min-width:${key})`,
+    down: (key: any) => `@media (max-width:${key})`,
+  },
+  transitions: {
+    create(props: any) {
+      return `all ${props.duration}ms ${props.easing}`;
+    },
+    easing: {
+      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+      easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+      sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+    },
+    duration: {
+      shortest: 150,
+      shorter: 200,
+      short: 250,
+      standard: 300,
+      complex: 375,
+      enteringScreen: 225,
+      leavingScreen: 195,
+    },
+  },
   typography: {
     h6: { fontSize: 16, fontWeight: 600, color: "#1bb1bb" },
   },