Cleanup about and version dialogs (#6235)

InvenTree/InvenTree/api.py

@@ -52,7 +52,7 @@ class VersionView(APIView):
                 'code': InvenTree.version.inventreeGithubUrl(),
                 'credit': InvenTree.version.inventreeCreditsUrl(),
                 'app': InvenTree.version.inventreeAppUrl(),
-                'bug': f'{InvenTree.version.inventreeGithubUrl()}/issues',
+                'bug': f'{InvenTree.version.inventreeGithubUrl()}issues',
             },
         })
 

src/frontend/src/components/items/CopyButton.tsx

@@ -20,6 +20,7 @@ export function CopyButton({
           compact
         >
           <IconCopy size={10} />
+          {label && <div>&nbsp;</div>}
           {label && label}
         </Button>
       )}

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -1,5 +1,16 @@
 import { Trans } from '@lingui/macro';
-import { Anchor, Badge, Group, Stack, Table, Text, Title } from '@mantine/core';
+import {
+  Anchor,
+  Badge,
+  Button,
+  Divider,
+  Group,
+  Space,
+  Stack,
+  Table,
+  Text,
+  Title
+} from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 
@@ -17,7 +28,10 @@ type AboutLookupRef = {
   copy?: boolean;
 };
 
-export function AboutInvenTreeModal({}: ContextModalProps<{
+export function AboutInvenTreeModal({
+  context,
+  id
+}: ContextModalProps<{
   modalBody: string;
 }>) {
   const [user] = useUserState((state) => [state.user]);
@@ -80,6 +94,10 @@ export function AboutInvenTreeModal({}: ContextModalProps<{
   }Active plugins: ${JSON.stringify(server.active_plugins)}`;
   return (
     <Stack>
+      <Divider />
+      <Title order={5}>
+        <Trans>Version Information</Trans>
+      </Title>
       <Group>
         <Text>
           <Trans>Your InvenTree version status is</Trans>
@@ -98,9 +116,6 @@ export function AboutInvenTreeModal({}: ContextModalProps<{
           </Badge>
         )}
       </Group>
-      <Title order={5}>
-        <Trans>Version Information</Trans>
-      </Title>
       <Table>
         <tbody>
           {fillTable(
@@ -161,11 +176,21 @@ export function AboutInvenTreeModal({}: ContextModalProps<{
           )}
         </tbody>
       </Table>
-      <Group>
+      <Divider />
+      <Group position="apart">
         <CopyButton
           value={copyval}
           label={<Trans>Copy version information</Trans>}
         />
+        <Space />
+        <Button
+          color="red"
+          onClick={() => {
+            context.closeModal(id);
+          }}
+        >
+          <Trans>Dismiss</Trans>
+        </Button>
       </Group>
     </Stack>
   );

src/frontend/src/components/modals/ServerInfoModal.tsx

@@ -1,5 +1,13 @@
 import { Trans } from '@lingui/macro';
-import { Badge, Button, Stack, Table, Title } from '@mantine/core';
+import {
+  Badge,
+  Button,
+  Divider,
+  Group,
+  Stack,
+  Table,
+  Title
+} from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 
 import { useServerApiState } from '../../states/ApiState';
@@ -13,6 +21,7 @@ export function ServerInfoModal({
 
   return (
     <Stack>
+      <Divider />
       <Title order={5}>
         <Trans>Server</Trans>
       </Title>
@@ -127,15 +136,17 @@ export function ServerInfoModal({
           </tr>
         </tbody>
       </Table>
-      <Button
+      <Divider />
-        color="red"
+      <Group position="right">
-        variant="outline"
+        <Button
-        onClick={() => {
+          color="red"
-          context.closeModal(id);
+          onClick={() => {
-        }}
+            context.closeModal(id);
-      >
+          }}
-        <Trans>Close modal</Trans>
+        >
-      </Button>
+          <Trans>Dismiss</Trans>
+        </Button>
+      </Group>
     </Stack>
   );
 }

src/frontend/src/defaults/links.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro';
 import { openContextModal } from '@mantine/modals';
 
 import { DocumentationLinkItem } from '../components/items/DocumentationLinks';
+import { StylishText } from '../components/items/StylishText';
 import { IS_DEV_OR_DEMO } from '../main';
 
 export const footerLinks = [
@@ -73,7 +74,11 @@ export const navDocLinks: DocumentationLinkItem[] = [
 function serverInfo() {
   return openContextModal({
     modal: 'info',
-    title: <Trans>System Information</Trans>,
+    title: (
+      <StylishText size="xl">
+        <Trans>System Information</Trans>
+      </StylishText>
+    ),
     size: 'xl',
     innerProps: {}
   });
@@ -82,7 +87,11 @@ function serverInfo() {
 function aboutInvenTree() {
   return openContextModal({
     modal: 'about',
-    title: <Trans>About InvenTree</Trans>,
+    title: (
+      <StylishText size="xl">
+        <Trans>About InvenTree</Trans>
+      </StylishText>
+    ),
     size: 'xl',
     innerProps: {}
   });