Style adjustment

Author: alexanderbock

backend/frontend/src/components/ImageThumbnail.tsx

@@ -1,15 +1,17 @@
 import { Anchor } from '@mantine/core'
 
-export function ImageThumbnail({
-  type, group, name, hardware, timestamp, stopPropagation = false,
-}: {
+interface Props {
   type: string
   group: string
   name: string
   hardware: string
   timestamp?: string
   stopPropagation?: boolean
-}) {
+};
+
+export function ImageThumbnail({
+  type, group, name, hardware, timestamp, stopPropagation = false,
+}: Props) {
   const timePart = timestamp ? `/${timestamp}` : ''
   return (
     <Anchor

backend/frontend/src/components/SortableHeader.tsx

@@ -1,15 +1,13 @@
 import { Table } from '@mantine/core'
 import { SortColumn } from '../types'
 
-export function SortableHeader({
-  sortKey,
-  label,
-  onSort,
-}: {
+interface Props {
   sortKey: SortColumn
   label: string
   onSort: (col: SortColumn) => void
-}) {
+};
+
+export function SortableHeader({ sortKey, label, onSort }: Props) {
   return (
     <Table.Th style={{ cursor: 'pointer' }} onClick={() => onSort(sortKey)}>
       {label}

backend/frontend/src/components/TestHistory.tsx

@@ -3,13 +3,12 @@ import { TestRecord, TestData } from '../types'
 import { diffDisplay, diffStyle, timingDisplay } from '../utils'
 import { ImageThumbnail } from './ImageThumbnail'
 
-export function TestHistory({
-  record,
-  onUpdateReference,
-}: {
+interface Props {
   record: TestRecord
   onUpdateReference: (record: TestRecord) => void
-}) {
+};
+
+export function TestHistory({ record, onUpdateReference }: Props) {
   const testData = [...record.data].reverse()
 
   return (
@@ -32,28 +31,26 @@ export function TestHistory({
           {testData.map((d: TestData, i: number) => (
             <Table.Tr key={d.timeStamp}>
               <Table.Td>
-                <Text size="xs" c="dimmed">{new Date(d.timeStamp).toUTCString()}</Text>
+                <Text size="sm" c="dimmed">{new Date(d.timeStamp).toUTCString()}</Text>
               </Table.Td>
               <Table.Td>
-                <Box px={4} style={{ borderRadius: 4, display: 'inline-block', ...diffStyle(d.pixelError) }}>
-                  <Text size="sm">{diffDisplay(d.pixelError)}</Text>
+                <Box px={4} style={{ borderRadius: 4, display: 'inline-block', width: 70, textAlign: 'center', ...diffStyle(d.pixelError) }}>
+                  <Text>{diffDisplay(d.pixelError)}</Text>
                 </Box>
               </Table.Td>
               <Table.Td>
                 <Anchor
-                  size="xs"
                   href={`https://github.com/OpenSpace/OpenSpace/commit/${d.commitHash}`}
                   target="_blank"
                 >
                   {d.commitHash.substring(0, 8)}
                 </Anchor>
               </Table.Td>
               <Table.Td>
-                <Text size="sm">{timingDisplay(d.timing)}</Text>
+                <Text>{timingDisplay(d.timing)}</Text>
               </Table.Td>
               <Table.Td>
                 <Anchor
-                  size="xs"
                   href={`/api/result/log/${record.group}/${record.name}/${record.hardware}/${d.timeStamp}`}
                   target="_blank"
                 >
@@ -74,7 +71,7 @@ export function TestHistory({
               </Table.Td>
               <Table.Td>
                 {i === 0 && (
-                  <Button size="xs" variant="default" onClick={() => onUpdateReference(record)}>
+                  <Button variant="default" onClick={() => onUpdateReference(record)}>
                     Upgrade Candidate to Reference
                   </Button>
                 )}

backend/frontend/src/components/TestRow.tsx

@@ -3,19 +3,18 @@ import { TestRecord } from '../types'
 import { diffDisplay, diffStyle, timingDisplay } from '../utils'
 import { ImageThumbnail } from './ImageThumbnail'
 
-export function TestRow({
-  record,
-  onOpen,
-}: {
+interface Props {
   record: TestRecord
   onOpen: (record: TestRecord) => void
-}) {
+};
+
+export function TestRow({ record, onOpen }: Props) {
   const latestData = record.data[record.data.length - 1]
   if (!latestData) return null
 
   return (
     <Table.Tr style={{ cursor: 'pointer' }} onClick={() => onOpen(record)}>
-      <Table.Td>
+      <Table.Td style={{ width: 90 }}>
         <Box
           px={6}
           py={2}

backend/frontend/src/main.tsx

@@ -10,5 +10,5 @@ createRoot(document.getElementById('root')!).render(
     <MantineProvider defaultColorScheme="dark">
       <App />
     </MantineProvider>
-  </StrictMode>,
+  </StrictMode>
 )

backend/frontend/src/pages/Compare.tsx

@@ -8,19 +8,15 @@ import { diffDisplay, diffStyle } from '../utils'
 
 type ImageType = 'reference' | 'candidate'
 
-function CompareCell({
-  type,
-  group,
-  name,
-  hardware1,
-  hardware2,
-}: {
+interface Props {
   type: string
   group: string
   name: string
   hardware1: string
   hardware2: string
-}) {
+};
+
+function CompareCell({ type, group, name, hardware1, hardware2, }: Props) {
   const [pixelError, setPixelError] = useState<number | null>(null)
   const compareUrl = `/api/compare/${type}/${group}/${name}/${hardware1}/${hardware2}`
 

backend/frontend/src/pages/Home.tsx

@@ -70,7 +70,7 @@ export default function Home() {
     <Box>
       {/* Header */}
       <Box py="md" style={{ textAlign: 'center', backgroundColor: 'var(--mantine-color-dark-7)' }}>
-        <Title order={1} style={{ fontVariant: 'small-caps' }}>
+        <Title order={1} style={{ fontVariant: 'small-caps', fontFamily: 'Roboto, sans-serif' }}>
           <Link to="/" style={{ textDecoration: 'none', color: 'white' }}>
             OpenSpace Image Testing
           </Link>