� Module styling

data/configs/config.json

@@ -1,12 +1,26 @@
 {
   "name": "config",
-  "services": [],
+  "services": [
+    {
+      "type": "Other",
+      "name": "YouTube",
+      "icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png",
+      "url": "https://youtube.com/"
+    },
+    {
+      "type": "Other",
+      "name": "YouTube ",
+      "icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png",
+      "url": "https://youtube.com/"
+    }
+  ],
   "settings": {
     "searchBar": true,
-    "searchUrl": "https://duckduckgo.com/?q=",
+    "searchUrl": "Custom",
     "enabledModules": [
       "Date",
-      "Calendar"
+      "Calendar",
+      "Weather"
     ]
   }
 }

src/components/AppShelf/AppShelf.tsx

@@ -5,7 +5,7 @@ import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
 
-const AppShelf = () => {
+const AppShelf = (props: any) => {
   const { config } = useConfig();
 
   return (

src/components/SearchBar/SearchBar.tsx

@@ -73,6 +73,7 @@ export default function SearchBar(props: any) {
         target={
           <Group direction="row">
             <TextInput
+              width={'100%'}
               variant="filled"
               icon={icon}
               ref={textInput}

src/components/modules/moduleWrapper.tsx

@@ -13,16 +13,7 @@ export default function ModuleWrapper(props: any) {
     return null;
   }
   return (
-    <Card
-      hidden={!isShown}
-      mx="sm"
-      radius="lg"
-      shadow="sm"
-      style={{
-        // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
-      }}
-    >
+    <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
       <module.component />
     </Card>
   );

src/pages/index.tsx

@@ -6,6 +6,7 @@ import fs from 'fs';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
+import SearchBar from '../components/SearchBar/SearchBar';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
 
@@ -53,9 +54,7 @@ export default function HomePage(props: any) {
   }, [initialConfig]);
   return (
     <>
-      <Group align="start" position="apart" noWrap>
-        <AppShelf />
-      </Group>
+      <AppShelf />
       <LoadConfigComponent />
     </>
   );