💄 Styling backgrounds of widgets

src/components/AppShelf/AppShelfMenu.tsx

@@ -36,10 +36,11 @@ export default function AppShelfMenu(props: any) {
       <Menu
         position="right"
         radius="md"
+        shadow="xl"
         styles={{
           body: {
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            // Add shadow and elevation to the body
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
           },
         }}
       >

src/components/modules/calendar/CalendarModule.tsx

@@ -247,6 +247,11 @@ function DayComponent(props: any) {
         radius="lg"
         shadow="xl"
         transition="pop"
+        styles={{
+          body: {
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
+          },
+        }}
         width={700}
         onClose={() => setOpened(false)}
         opened={opened}

src/pages/index.tsx

@@ -1,7 +1,5 @@
 import { getCookie, setCookies } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
-import path from 'path';
-import fs from 'fs';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
@@ -10,6 +8,7 @@ import { useConfig } from '../tools/state';
 import { migrateToIdConfig } from '../tools/migrate';
 import { ModuleWrapper } from '../components/modules/moduleWrapper';
 import { DownloadsModule } from '../components/modules';
+import { getConfig } from '../tools/getConfig';
 
 export async function getServerSideProps({
   req,
@@ -17,38 +16,20 @@ export async function getServerSideProps({
 }: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
   let cookie = getCookie('config-name', { req, res });
   if (!cookie) {
-    setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
+    setCookies('config-name', 'default', {
+      req,
+      res,
+      maxAge: 60 * 60 * 24 * 30,
+      sameSite: 'strict',
+    });
     cookie = 'default';
   }
-  // Check if the config file exists
-  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
-  if (!fs.existsSync(configPath)) {
-    return {
-      props: {
-        config: {
-          name: cookie.toString(),
-          services: [],
-          settings: {
-            searchUrl: 'https://www.google.com/search?q=',
-          },
-          modules: {},
-        },
-      },
-    };
-  }
-
-  const config = fs.readFileSync(configPath, 'utf8');
-  // Print loaded config
-  return {
-    props: {
-      config: JSON.parse(config),
-    },
-  };
+  return getConfig(cookie as string);
 }
 
 export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
-  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const { setConfig } = useConfig();
   useEffect(() => {
     const migratedConfig = migrateToIdConfig(initialConfig);
     setConfig(migratedConfig);

src/tools/getConfig.ts

@@ -0,0 +1,31 @@
+import path from 'path';
+import fs from 'fs';
+
+export function getConfig(name: string) {
+  // Check if the config file exists
+  const configPath = path.join(process.cwd(), 'data/configs', `${name}.json`);
+  if (!fs.existsSync(configPath)) {
+    return {
+      props: {
+        configName: name,
+        config: {
+          name: name.toString(),
+          services: [],
+          settings: {
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+          modules: {},
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      configName: name,
+      config: JSON.parse(config),
+    },
+  };
+}