Style updates

src/pages/homepage/components/SettingsButton/ThemingCard.tsx

@@ -13,7 +13,13 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiShuffle } from 'react-icons/fi';
-import { actionIconClasses, selectClasses, stackClasses, textClasses } from 'styles';
+import {
+	actionIconClasses,
+	selectClasses,
+	stackClasses,
+	textClasses,
+	toolTipClasses,
+} from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 
 function ThemingCard() {
@@ -80,9 +86,9 @@ function ThemingCard() {
 					</Text>
 				</Stack>
 				<Tooltip
+					className={toolTipClasses.default}
+					classNames={toolTipClasses}
 					label='Random Theme'
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
 					withArrow
 				>
 					<ActionIcon
@@ -226,9 +232,9 @@ function ThemingCard() {
 					}}
 				/>
 				<Tooltip
+					className={toolTipClasses.default}
+					classNames={toolTipClasses}
 					label='Shuffle Playlist'
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
 					withArrow
 				>
 					<ActionIcon