Merge branch 'dev' into docker-integration

src/components/layout/Header.tsx

@@ -1,24 +1,25 @@
-import React from 'react';
 import {
-  createStyles,
-  Header as Head,
-  Group,
+  ActionIcon,
   Box,
   Burger,
+  createStyles,
   Drawer,
-  Title,
+  Group,
+  Header as Head,
   ScrollArea,
-  ActionIcon,
+  Title,
   Transition,
 } from '@mantine/core';
 import { useBooleanToggle } from '@mantine/hooks';
-import { Logo } from './Logo';
-import SearchBar from '../modules/search/SearchModule';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
-import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../modules';
+import { DashdotModule } from '../modules/dash.';
 import { ModuleWrapper } from '../modules/moduleWrapper';
 import { CalendarModule, TotalDownloadsModule, WeatherModule, DateModule } from '../modules';
 import DockerDrawer from '../Docker/DockerDrawer';
+import SearchBar from '../modules/search/SearchModule';
+import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { Logo } from './Logo';
 
 const HEADER_HEIGHT = 60;
 
@@ -86,6 +87,7 @@ export function Header(props: any) {
                       <ModuleWrapper module={TotalDownloadsModule} />
                       <ModuleWrapper module={WeatherModule} />
                       <ModuleWrapper module={DateModule} />
+                      <ModuleWrapper module={DashdotModule} />
                     </Group>
                   </ScrollArea>
                 </div>

src/components/layout/Tip.tsx

@@ -0,0 +1,19 @@
+import { Text } from '@mantine/core';
+
+interface TipProps {
+  children: React.ReactNode;
+}
+
+export default function Tip(props: TipProps) {
+  return (
+    <Text
+      style={{
+        fontSize: '0.75rem',
+        color: 'gray',
+        marginBottom: '0.5rem',
+      }}
+    >
+      Tip: {props.children}
+    </Text>
+  );
+}

src/components/layout/Widgets.tsx

@@ -1,6 +1,7 @@
 import { Group } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../modules';
+import { DashdotModule } from '../modules/dash.';
 import { ModuleWrapper } from '../modules/moduleWrapper';
 
 export default function Widgets(props: any) {
@@ -14,6 +15,7 @@ export default function Widgets(props: any) {
           <ModuleWrapper module={TotalDownloadsModule} />
           <ModuleWrapper module={WeatherModule} />
           <ModuleWrapper module={DateModule} />
+          <ModuleWrapper module={DashdotModule} />
         </Group>
       )}
     </>