Updated ui layout.

ui/src/Pages/SettingsPage/ThumbnailPreferences.tsx

@@ -1,7 +1,11 @@
 import { gql } from '@apollo/client'
 import React, { useRef, useState } from 'react'
 import { useMutation, useQuery } from '@apollo/client'
-import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
+import {
+  SectionTitle,
+  InputLabelDescription,
+  InputLabelTitle,
+} from './SettingsPage'
 import { useTranslation } from 'react-i18next'
 import { thumbnailMethodQuery } from './__generated__/thumbnailMethodQuery'
 import {
@@ -60,111 +64,55 @@ const ThumbnailPreferences = () => {
   const methodItems: DropdownItem[] = [
     {
       label: t(
-        'settings.thumbnails.downsample_method.nearest_neighbor',
+        'settings.thumbnails.method.filter.nearest_neighbor',
-        'Nearest Neighbor'
+        'Nearest Neighbor (default)'
       ),
       value: 0,
     },
     {
-      label: t('settings.thumbnails.downsample_method.box', 'Box'),
+      label: t('settings.thumbnails.method.filter.box', 'Box'),
       value: 1,
     },
     {
-      label: t('settings.thumbnails.downsample_method.linear', 'Linear'),
+      label: t('settings.thumbnails.method.filter.linear', 'Linear'),
       value: 2,
     },
     {
       label: t(
-        'settings.thumbnails.downsample_method.mitchell_netravali',
+        'settings.thumbnails.method.filter.mitchell_netravali',
         'Mitchell-Netravali'
       ),
       value: 3,
     },
     {
-      label: t(
+      label: t('settings.thumbnails.method.filter.catmull_rom', 'Catmull-Rom'),
-        'settings.thumbnails.downsample_method.catmull_rom',
-        'Catmull-Rom'
-      ),
       value: 4,
     },
     {
-      label: t('settings.thumbnails.downsample_method.Lanczos', 'Lanczos'),
+      label: t(
+        'settings.thumbnails.method.filter.Lanczos',
+        'Lanczos (highest quality)'
+      ),
       value: 5,
     },
   ]
 
-  // const [enablePeriodicScanner, setEnablePeriodicScanner] = useState(false)
-  // const [thumbnailMethod, setThumbnailMethod] = useState({
-  //   value: 0,
-  //   unit: TimeUnit.Second,
-  // })
-  //
-  // const scanIntervalServerValue = useRef<number | null>(null)
-  //
-  // const scanIntervalQuery = useQuery<scanIntervalQuery>(SCAN_INTERVAL_QUERY, {
-  //   onCompleted(data) {
-  //     const queryScanInterval = data.siteInfo.periodicScanInterval
-  //
-  //     if (queryScanInterval == 0) {
-  //       setScanInterval({
-  //         unit: TimeUnit.Second,
-  //         value: 0,
-  //       })
-  //     } else {
-  //       setScanInterval(
-  //         convertToAppropriateUnit({
-  //           unit: TimeUnit.Second,
-  //           value: queryScanInterval,
-  //         })
-  //       )
-  //     }
-  //
-  //     setEnablePeriodicScanner(queryScanInterval > 0)
-  //   },
-  // })
-  //
-  // const [setScanIntervalMutation, { loading: scanIntervalMutationLoading }] =
-  //   useMutation<
-  //     changeScanIntervalMutation,
-  //     changeScanIntervalMutationVariables
-  //   >(SCAN_INTERVAL_MUTATION)
-  //
-  // const onScanIntervalCheckboxChange = (checked: boolean) => {
-  //   setEnablePeriodicScanner(checked)
-  //
-  //   onScanIntervalUpdate(
-  //     checked ? scanInterval : { value: 0, unit: TimeUnit.Second }
-  //   )
-  // }
-  //
-  // const onScanIntervalUpdate = (scanInterval: TimeValue) => {
-  //   const seconds = convertToSeconds(scanInterval)
-  //
-  //   if (scanIntervalServerValue.current != seconds) {
-  //     setScanIntervalMutation({
-  //       variables: {
-  //         interval: seconds,
-  //       },
-  //     })
-  //     scanIntervalServerValue.current = seconds
-  //   }
-  // }
-
   return (
-    <>
+    <div>
-      <div className="mt-4">
+      <SectionTitle>
+        {t('settings.thumbnails.title', 'Thumbnail preferences')}
+      </SectionTitle>
       <label htmlFor="thumbnail_method_field">
         <InputLabelTitle>
-            {t('settings.thumbnails.field.label', 'Downsampling method')}
+          {t('settings.thumbnails.method.label', 'Downsampling method')}
         </InputLabelTitle>
         <InputLabelDescription>
           {t(
-              'settings.thumbnails.field.description',
+            'settings.thumbnails.method.description',
             'The filter to use when generating thumbnails'
           )}
         </InputLabelDescription>
       </label>
-        <div className="flex gap-2">
       <Dropdown
         aria-label="Method"
         items={methodItems}
@@ -174,19 +122,13 @@ const ThumbnailPreferences = () => {
           updateDownsampleMethod(value)
         }}
       />
-        </div>
-      </div>
       <Loader
         active={downsampleMethodQuery.loading || downsampleMutationData.loading}
         size="small"
         style={{ marginLeft: 16 }}
       />
-    </>
+    </div>
   )
 }
 
 export default ThumbnailPreferences
-
-// <h3 className="font-semibold text-lg mt-4 mb-2">
-//   {t('settings.thumbnails.title', 'Thumbnail preferences')}
-// </h3>