✨ add a <Tip/> component and use it

src/components/AppShelf/AddAppShelfItem.tsx

@@ -24,6 +24,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList, StatusCodes } from '../../tools/types';
+import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -273,15 +274,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                       }}
                       error={form.errors.apiKey && 'Invalid API key'}
                     />
-                    <Text
+                    <Tip>
-                      style={{
+                      Get your API key{' '}
-                        alignSelf: 'center',
-                        fontSize: '0.75rem',
-                        textAlign: 'center',
-                        color: 'gray',
-                      }}
-                    >
-                      Tip: Get your API key{' '}
                       <Anchor
                         target="_blank"
                         weight="bold"
@@ -290,7 +284,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                       >
                         here.
                       </Anchor>
-                    </Text>
+                    </Tip>
                   </>
                 )}
                 {form.values.type === 'qBittorrent' && (

src/components/Settings/CommonSettings.tsx

@@ -6,6 +6,7 @@ import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionS
 import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
+import Tip from '../layout/Tip';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
@@ -26,17 +27,13 @@ export default function CommonSettings(args: any) {
     <Group direction="column" grow mb="lg">
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
-        <Text
+        <Tip>
-          style={{
+          Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or
-            fontSize: '0.75rem',
+          for a Torrent respectively.
-            color: 'gray',
+        </Tip>
-            marginBottom: '0.5rem',
-          }}
-        >
-          Tip: %s can be used as a placeholder for the query.
-        </Text>
         <SegmentedControl
           fullWidth
+          mb="sm"
           title="Search engine"
           value={
             // Match config.settings.searchUrl with a key in the matches array
@@ -58,21 +55,24 @@ export default function CommonSettings(args: any) {
           data={matches}
         />
         {searchUrl === 'Custom' && (
-          <TextInput
+          <>
-            label="Query URL"
+            <Tip>%s can be used as a placeholder for the query.</Tip>
-            placeholder="Custom query URL"
+            <TextInput
-            value={customSearchUrl}
+              label="Query URL"
-            onChange={(event) => {
+              placeholder="Custom query URL"
-              setCustomSearchUrl(event.currentTarget.value);
+              value={customSearchUrl}
-              setConfig({
+              onChange={(event) => {
-                ...config,
+                setCustomSearchUrl(event.currentTarget.value);
-                settings: {
+                setConfig({
-                  ...config.settings,
+                  ...config,
-                  searchUrl: event.currentTarget.value,
+                  settings: {
-                },
+                    ...config.settings,
-              });
+                    searchUrl: event.currentTarget.value,
-            }}
+                  },
-          />
+                });
+              }}
+            />
+          </>
         )}
       </Group>
       <ColorSchemeSwitch />
@@ -80,16 +80,7 @@ export default function CommonSettings(args: any) {
       <ModuleEnabler />
       <ConfigChanger />
       <SaveConfigComponent />
-      <Text
+      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
-        style={{
-          alignSelf: 'center',
-          fontSize: '0.75rem',
-          textAlign: 'center',
-          color: 'gray',
-        }}
-      >
-        Tip: You can upload your config file by dragging and dropping it onto the page!
-      </Text>
     </Group>
   );
 }

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>
+  );
+}