diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx index 424683c0e..c05d30e68 100644 --- a/src/components/AppShelf/AddAppShelfItem.tsx +++ b/src/components/AppShelf/AddAppShelfItem.tsx @@ -256,14 +256,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & color: 'gray', }} > - tip: Get your API key{' '} + Tip: Get your API key{' '} - here + here. diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx index 047caa9dc..31bc16349 100644 --- a/src/components/AppShelf/AppShelfItem.tsx +++ b/src/components/AppShelf/AppShelfItem.tsx @@ -91,11 +91,11 @@ export function AppShelfItem(props: any) { > - Service {service.name} removed successfully + Service {service.name} removed successfully! ), color: 'green', diff --git a/src/components/Config/SaveConfig.tsx b/src/components/Config/SaveConfig.tsx index cb9dab76d..2348bd608 100644 --- a/src/components/Config/SaveConfig.tsx +++ b/src/components/Config/SaveConfig.tsx @@ -60,7 +60,7 @@ export default function SaveConfigComponent(props: any) { ); diff --git a/src/components/Settings/ModuleEnabler.tsx b/src/components/Settings/ModuleEnabler.tsx index c3b69f7e7..14d8a2f08 100644 --- a/src/components/Settings/ModuleEnabler.tsx +++ b/src/components/Settings/ModuleEnabler.tsx @@ -12,7 +12,7 @@ export default function ModuleEnabler(props: any) { key={module.title} size="md" checked={config.modules?.[module.title]?.enabled ?? false} - label={`Enable ${module.title} module`} + label={`Enable ${module.title}`} onChange={(e) => { setConfig({ ...config, diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index fec303ca7..956db2ec7 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -92,7 +92,7 @@ function SettingsMenu(props: any) { color: 'gray', }} > - tip: You can upload your config file by dragging and dropping it onto the page + Tip: You can upload your config file by dragging and dropping it onto the page! diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 1ecd33ceb..ff47dc811 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { createStyles, Footer as FooterComponent } from '@mantine/core'; import { showNotification } from '@mantine/notifications'; import { CURRENT_VERSION, REPO_URL } from '../../../data/constants'; +import { IconAlertCircle as AlertCircle } from '@tabler/icons'; const useStyles = createStyles((theme) => ({ footer: { @@ -38,12 +39,22 @@ export function Footer({ links }: FooterCenteredProps) { // Fetch Data here when component first mounted fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => { res.json().then((data) => { - if (data.tag_name !== CURRENT_VERSION) { + if (data.tag_name >= CURRENT_VERSION) { showNotification({ color: 'yellow', autoClose: false, title: 'New version available', - message: `Version ${data.tag_name} is available, update now! 😡`, + icon: , + message: `Version ${data.tag_name} is available, update now!`, + }); + } else if (data.tag_name <= CURRENT_VERSION) { + showNotification({ + color: 'orange', + autoClose: 5000, + title: 'You are using a development version', + icon: , + loading: true, + message: 'This version of Homarr is still in development! Bugs are expected 🐛', }); } }); diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx index c1232a051..2c37a6f99 100644 --- a/src/components/layout/Logo.tsx +++ b/src/components/layout/Logo.tsx @@ -13,11 +13,11 @@ export function Logo({ style }: any) { }} /> - Critical: No qBittorrent/Deluge instance found in services. + No supported download clients found! - Add a qBittorrent/Deluge service to view current downloads + Add a download service to view your current downloads... diff --git a/src/components/modules/downloads/TotalDownloadsModule.tsx b/src/components/modules/downloads/TotalDownloadsModule.tsx index ad94bad8a..915e46912 100644 --- a/src/components/modules/downloads/TotalDownloadsModule.tsx +++ b/src/components/modules/downloads/TotalDownloadsModule.tsx @@ -43,7 +43,7 @@ function humanFileSize(initialBytes: number, si = true, dp = 1) { } export const TotalDownloadsModule: IModule = { - title: 'Download speed', + title: 'Download Speed', description: 'Show the current download speed of supported services', icon: Download, component: TotalDownloadsComponent, @@ -104,9 +104,9 @@ export default function TotalDownloadsComponent() { if (!qBittorrentService && !delugeService) { return ( - Critical: No qBittorrent/Deluge instance found in services. + No supported download clients found! - Add a qBittorrent/Deluge service to view current downloads + Add a download service to view your current downloads... diff --git a/src/components/modules/search/SearchModule.tsx b/src/components/modules/search/SearchModule.tsx index d553965e7..3f3153465 100644 --- a/src/components/modules/search/SearchModule.tsx +++ b/src/components/modules/search/SearchModule.tsx @@ -116,7 +116,7 @@ export default function SearchBar(props: any) { } > - tip: Use the prefixes !yt and !t in front of your query to search on YouTube + Tip: Use the prefixes !yt and !t in front of your query to search on YouTube or for a Torrent respectively. diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 65a1a82cb..5cbf81843 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -9,6 +9,7 @@ import { useHotkeys } from '@mantine/hooks'; import Layout from '../components/layout/Layout'; import { ConfigProvider } from '../tools/state'; import { theme } from '../tools/theme'; +import { styles } from '../tools/styles'; export default function App(props: AppProps & { colorScheme: ColorScheme }) { const { Component, pageProps } = props; @@ -35,6 +36,9 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { ...theme, colorScheme, }} + styles={{ + ...styles, + }} withGlobalStyles withNormalizeCSS > diff --git a/src/tools/styles.ts b/src/tools/styles.ts new file mode 100644 index 000000000..905d6903c --- /dev/null +++ b/src/tools/styles.ts @@ -0,0 +1,12 @@ +import { MantineProviderProps } from '@mantine/core'; + +export const styles: MantineProviderProps['styles'] = { + Checkbox: { + input: { cursor: 'pointer' }, + label: { cursor: 'pointer' }, + }, + Switch: { + input: { cursor: 'pointer' }, + label: { cursor: 'pointer' }, + }, +}; diff --git a/src/tools/theme.ts b/src/tools/theme.ts index 69d7b9643..32b492886 100644 --- a/src/tools/theme.ts +++ b/src/tools/theme.ts @@ -1,3 +1,6 @@ import { MantineProviderProps } from '@mantine/core'; -export const theme: MantineProviderProps['theme'] = {}; +export const theme: MantineProviderProps['theme'] = { + primaryColor: 'red', + primaryShade: 6, +};