[UI] Stylish text tweak (#9336)

* Update <StylishText>

- Re-enable gradient
- Based on selected highlight color

* Refactor UI

* Do not require size prop

* Memoize

src/frontend/src/components/items/StylishText.tsx

@@ -1,18 +1,58 @@
-import { Text, useMantineTheme } from '@mantine/core';
+import {
+  type MantineSize,
+  Text,
+  darken,
+  getThemeColor,
+  lighten,
+  useMantineColorScheme,
+  useMantineTheme
+} from '@mantine/core';
+import { useMemo } from 'react';
+import { useLocalState } from '../../states/LocalState';
 
-import * as classes from '../../main.css';
+// Hook that memoizes the gradient color based on the primary color of the theme
+const useThematicGradient = () => {
+  const { usertheme } = useLocalState();
+  const theme = useMantineTheme();
+  const colorScheme = useMantineColorScheme();
 
+  const primary = useMemo(() => {
+    return getThemeColor(usertheme.primaryColor, theme);
+  }, [usertheme.primaryColor, theme]);
+
+  const secondary = useMemo(() => {
+    let secondary = primary;
+    if (colorScheme.colorScheme == 'dark') {
+      secondary = lighten(primary, 0.3);
+    } else {
+      secondary = darken(primary, 0.3);
+    }
+
+    return secondary;
+  }, [usertheme, colorScheme, primary]);
+
+  return useMemo(() => {
+    return { primary, secondary };
+  }, [primary, secondary]);
+};
+
+// A stylish text component that uses the primary color of the theme
 export function StylishText({
   children,
-  size = 'md'
+  size
 }: Readonly<{
   children: JSX.Element | string;
-  size?: string;
+  size?: MantineSize;
 }>) {
-  const theme = useMantineTheme();
+  const { primary, secondary } = useThematicGradient();
 
   return (
-    <Text size={size} className={classes.signText} c={theme.primaryColor}>
+    <Text
+      fw={700}
+      size={size ?? 'xl'}
+      variant='gradient'
+      gradient={{ from: primary.toString(), to: secondary.toString() }}
+    >
       {children}
     </Text>
   );

src/frontend/src/components/nav/DetailDrawer.tsx

@@ -6,6 +6,7 @@ import type { To } from 'react-router-dom';
 
 import type { UiSizeType } from '../../defaults/formatters';
 import { useLocalState } from '../../states/LocalState';
+import { StylishText } from '../items/StylishText';
 import * as classes from './DetailDrawer.css';
 
 /**
@@ -66,9 +67,7 @@ function DetailDrawerComponent({
               <IconChevronLeft />
             </ActionIcon>
           )}
-          <Text size='xl' fw={600} variant='gradient'>
+          <StylishText size='xl'>{title}</StylishText>
-            {title}
-          </Text>
         </Group>
       }
     >

src/frontend/src/main.css.ts

@@ -112,11 +112,6 @@ export const tab = style({
   }
 });
 
-export const signText = style({
-  fontSize: 'xl',
-  fontWeight: 700
-});
-
 export const error = style({
   backgroundColor: vars.colors.gray[0],
   color: vars.colors.red[6]

src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro';
-import { Badge, Group, Stack, Table, Title } from '@mantine/core';
+import { Badge, Group, Stack, Table } from '@mantine/core';
 import { IconEdit, IconKey, IconUser } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
@@ -8,6 +8,7 @@ import { ActionButton } from '../../../../components/buttons/ActionButton';
 import { YesNoUndefinedButton } from '../../../../components/buttons/YesNoButton';
 import type { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
 import { ActionDropdown } from '../../../../components/items/ActionDropdown';
+import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { useEditApiFormModal } from '../../../../hooks/UseForm';
 import { useUserState } from '../../../../states/UserState';
@@ -98,9 +99,9 @@ export function AccountDetailPanel() {
       {editProfile.modal}
       <Stack gap='xs'>
         <Group justify='space-between'>
-          <Title order={3}>
+          <StylishText size='lg'>
             <Trans>Account Details</Trans>
-          </Title>
+          </StylishText>
           <ActionDropdown
             tooltip={t`Account Actions`}
             icon={<IconUser />}
@@ -125,9 +126,9 @@ export function AccountDetailPanel() {
         {renderDetailTable(accountDetailFields)}
 
         <Group justify='space-between'>
-          <Title order={3}>
+          <StylishText size='lg'>
             <Trans>Profile Details</Trans>
-          </Title>
+          </StylishText>
           <ActionButton
             text={t`Edit Profile`}
             icon={<IconEdit />}

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -15,7 +15,6 @@ import {
   Table,
   Text,
   TextInput,
-  Title,
   Tooltip
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
@@ -467,14 +466,14 @@ function MfaSection() {
           title={t`Recovery Codes`}
           centered
         >
-          <Title order={3}>
+          <StylishText size='lg'>
             <Trans>Unused Codes</Trans>
-          </Title>
+          </StylishText>
           <Code>{recoveryCodes?.unused_codes?.join('\n')}</Code>
 
-          <Title order={3}>
+          <StylishText size='lg'>
             <Trans>Used Codes</Trans>
-          </Title>
+          </StylishText>
           <Code>{recoveryCodes?.used_codes?.join('\n')}</Code>
         </Modal>
       </SimpleGrid>

src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -11,7 +11,6 @@ import {
   Select,
   Slider,
   Table,
-  Title,
   useMantineTheme
 } from '@mantine/core';
 import { IconRestore } from '@tabler/icons-react';
@@ -19,6 +18,7 @@ import { useState } from 'react';
 
 import { ColorToggle } from '../../../../components/items/ColorToggle';
 import { LanguageSelect } from '../../../../components/items/LanguageSelect';
+import { StylishText } from '../../../../components/items/StylishText';
 import { SizeMarks } from '../../../../defaults/defaults';
 import { IS_DEV } from '../../../../main';
 import { useLocalState } from '../../../../states/LocalState';
@@ -57,9 +57,9 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
 
   return (
     <Container w='100%' mih={height} p={0}>
-      <Title order={3}>
+      <StylishText size='lg'>
         <Trans>Display Settings</Trans>
-      </Title>
+      </StylishText>
       <Table>
         <Table.Tbody>
           <Table.Tr>

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -11,8 +11,7 @@ import {
   List,
   LoadingOverlay,
   Stack,
-  Text,
+  Text
-  Title
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconCheck, IconRefresh } from '@tabler/icons-react';
@@ -248,9 +247,8 @@ function MachineDrawer({
         <Group justify='space-between'>
           <Group>
             {machine && <MachineStatusIndicator machine={machine} />}
-            <Title order={4}>{machine?.name}</Title>
+            <StylishText size='md'>{machine?.name ?? t`Machine`}</StylishText>
           </Group>
-
           <Group>
             {machine?.restart_required && (
               <Badge color='red'>

src/frontend/src/tables/machine/MachineTypeTable.tsx

@@ -85,9 +85,9 @@ function MachineTypeDrawer({
     <>
       <Stack>
         <Group wrap='nowrap'>
-          <Title order={4}>
+          <StylishText size='md'>
             {machineType ? machineType.name : machineTypeSlug}
-          </Title>
+          </StylishText>
         </Group>
 
         {!machineType && (

src/frontend/src/tables/settings/GroupTable.tsx

@@ -6,8 +6,7 @@ import {
   Pill,
   PillGroup,
   Stack,
-  Text,
+  Text
-  Title
 } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -15,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import AdminButton from '../../components/buttons/AdminButton';
 import { EditApiForm } from '../../components/forms/ApiForm';
+import { StylishText } from '../../components/items/StylishText';
 import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -112,9 +112,9 @@ export function GroupDrawer({
         id={`group-detail-drawer-${id}`}
       />
       <Group justify='space-between'>
-        <Title order={5}>
+        <StylishText size='md'>
           <Trans>Permission set</Trans>
-        </Title>
+        </StylishText>
         <AdminButton model={ModelType.group} id={instance.pk} />
       </Group>
       <Group>{permissionsAccordion}</Group>

src/frontend/src/tables/settings/UserTable.tsx

@@ -250,7 +250,7 @@ export function UserTable() {
   // Table Actions - Add New User
   const newUser = useCreateApiFormModal({
     url: ApiEndpoints.user_list,
-    title: t`Add user`,
+    title: t`Add User`,
     fields: {
       username: {},
       email: {},