Fixed and improved UI while correcting text

10 files changed, 95 insertions, 75 deletions

diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx
index 8cf02672e..5a310c359 100644
--- a/frontend/src/pages/Episodes/table.tsx
+++ b/frontend/src/pages/Episodes/table.tsx
@@ -221,10 +221,10 @@ const Table: FunctionComponent<Props> = ({
   useEffect(() => {
     if (instance.current) {
       if (initial) {
+        // start with all rows collapsed
+        instance.current.toggleAllRowsExpanded(false);
         // expand the last/current season on initial display
         instance.current.toggleRowExpanded([`season:${maxSeason}`], true);
-        // make sure season 0 is collapsed
-        instance.current.toggleRowExpanded([`season:0`], false);
       } else {
         if (expand !== undefined) {
           instance.current.toggleAllRowsExpanded(expand);
diff --git a/frontend/src/pages/History/Movies/index.tsx b/frontend/src/pages/History/Movies/index.tsx
index f82863cfc..ee4e98df0 100644
--- a/frontend/src/pages/History/Movies/index.tsx
+++ b/frontend/src/pages/History/Movies/index.tsx
@@ -58,6 +58,7 @@ const MoviesHistoryView: FunctionComponent = () => {
         accessor: "score",
       },
       {
+        Header: "Match",
         accessor: "matches",
         Cell: (row) => {
           const { matches, dont_matches: dont } = row.row.original;
@@ -90,6 +91,7 @@ const MoviesHistoryView: FunctionComponent = () => {
         },
       },
       {
+        Header: "Info",
         accessor: "description",
         Cell: ({ value }) => {
           return (
@@ -100,11 +102,12 @@ const MoviesHistoryView: FunctionComponent = () => {
         },
       },
       {
+        Header: "Upgrade",
         accessor: "upgradable",
         Cell: (row) => {
           if (row.value) {
             return (
-              <TextPopover text="This Subtitles File Is Eligible For An Upgrade.">
+              <TextPopover text="This Subtitle File Is Eligible For An Upgrade.">
                 <FontAwesomeIcon size="sm" icon={faRecycle}></FontAwesomeIcon>
               </TextPopover>
             );
@@ -114,6 +117,7 @@ const MoviesHistoryView: FunctionComponent = () => {
         },
       },
       {
+        Header: "Blacklist",
         accessor: "blacklisted",
         Cell: ({ row, value }) => {
           const add = useMovieAddBlacklist();
diff --git a/frontend/src/pages/History/Series/index.tsx b/frontend/src/pages/History/Series/index.tsx
index ceea28299..d6b1469bf 100644
--- a/frontend/src/pages/History/Series/index.tsx
+++ b/frontend/src/pages/History/Series/index.tsx
@@ -74,6 +74,7 @@ const SeriesHistoryView: FunctionComponent = () => {
         accessor: "score",
       },
       {
+        Header: "Match",
         accessor: "matches",
         Cell: (row) => {
           const { matches, dont_matches: dont } = row.row.original;
@@ -106,6 +107,7 @@ const SeriesHistoryView: FunctionComponent = () => {
         },
       },
       {
+        Header: "Info",
         accessor: "description",
         Cell: ({ row, value }) => {
           return (
@@ -116,11 +118,12 @@ const SeriesHistoryView: FunctionComponent = () => {
         },
       },
       {
+        Header: "Upgrade",
         accessor: "upgradable",
         Cell: (row) => {
           if (row.value) {
             return (
-              <TextPopover text="This Subtitles File Is Eligible For An Upgrade.">
+              <TextPopover text="This Subtitle File Is Eligible For An Upgrade.">
                 <FontAwesomeIcon size="sm" icon={faRecycle}></FontAwesomeIcon>
               </TextPopover>
             );
@@ -130,6 +133,7 @@ const SeriesHistoryView: FunctionComponent = () => {
         },
       },
       {
+        Header: "Blacklist",
         accessor: "blacklisted",
         Cell: ({ row, value }) => {
           const {
diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx
index 139ad3a46..66921347c 100644
--- a/frontend/src/pages/Series/index.tsx
+++ b/frontend/src/pages/Series/index.tsx
@@ -1,6 +1,5 @@
 import { useSeriesModification, useSeriesPagination } from "@/apis/hooks";
 import { Action } from "@/components";
-import { AudioList } from "@/components/bazarr";
 import LanguageProfileName from "@/components/bazarr/LanguageProfile";
 import { ItemEditModal } from "@/components/forms/ItemEditForm";
 import { useModals } from "@/modules/modals";
@@ -45,13 +44,6 @@ const SeriesView: FunctionComponent = () => {
         },
       },
       {
-        Header: "Audio",
-        accessor: "audio_language",
-        Cell: ({ value }) => {
-          return <AudioList audios={value}></AudioList>;
-        },
-      },
-      {
         Header: "Languages Profile",
         accessor: "profileId",
         Cell: ({ value }) => {
diff --git a/frontend/src/pages/Settings/Languages/index.tsx b/frontend/src/pages/Settings/Languages/index.tsx
index 762174133..61733c992 100644
--- a/frontend/src/pages/Settings/Languages/index.tsx
+++ b/frontend/src/pages/Settings/Languages/index.tsx
@@ -102,7 +102,7 @@ const SettingsLanguagesView: FunctionComponent = () => {
         <Selector
           clearable
           settingKey={defaultUndEmbeddedSubtitlesLang}
-          label="Treat unknown language embedded subtitles track as (changing this will trigger full subtitles indexation using cache)"
+          label="Treat unknown language embedded subtitles track as (changing this will trigger full subtitles indexing using cache)"
           placeholder="Select languages"
           options={undEmbeddedSubtitlesLanguages.map((v) => {
             return { label: v.name, value: v.code2 };
@@ -112,7 +112,7 @@ const SettingsLanguagesView: FunctionComponent = () => {
           }}
         ></Selector>
       </Section>
-      <Section header="Languages Profiles">
+      <Section header="Languages Profile">
         <Table></Table>
       </Section>
       <Section header="Default Settings">
@@ -121,7 +121,7 @@ const SettingsLanguagesView: FunctionComponent = () => {
           settingKey="settings-general-serie_default_enabled"
         ></Check>
         <Message>
-          Apply only to Series added to Bazarr after enabling this option.
+          Will apply only to Series added to Bazarr after enabling this option.
         </Message>
 
         <CollapseBox indent settingKey="settings-general-serie_default_enabled">
@@ -137,7 +137,7 @@ const SettingsLanguagesView: FunctionComponent = () => {
           settingKey="settings-general-movie_default_enabled"
         ></Check>
         <Message>
-          Apply only to Movies added to Bazarr after enabling this option.
+          Will apply only to Movies added to Bazarr after enabling this option.
         </Message>
 
         <CollapseBox indent settingKey="settings-general-movie_default_enabled">
diff --git a/frontend/src/pages/Settings/Subtitles/options.ts b/frontend/src/pages/Settings/Subtitles/options.ts
index d38133133..75fc4b027 100644
--- a/frontend/src/pages/Settings/Subtitles/options.ts
+++ b/frontend/src/pages/Settings/Subtitles/options.ts
@@ -33,12 +33,13 @@ export const folderOptions: SelectorOption<string>[] = [
 
 export const embeddedSubtitlesParserOption: SelectorOption<string>[] = [
   {
-    label: "ffprobe (faster)",
+    label:
+      "ffprobe (faster than mediainfo. Part of Bazarr installation already)",
     value: "ffprobe",
   },
   {
     label:
-      "mediainfo (slower but may give better results. Must be already installed)",
+      "mediainfo (slower but may give better results. User must install the mediainfo executable first)",
     value: "mediainfo",
   },
 ];
diff --git a/frontend/src/pages/System/Announcements/table.tsx b/frontend/src/pages/System/Announcements/table.tsx
index 2d9037b20..74a160190 100644
--- a/frontend/src/pages/System/Announcements/table.tsx
+++ b/frontend/src/pages/System/Announcements/table.tsx
@@ -33,7 +33,7 @@ const Table: FunctionComponent<Props> = ({ announcements }) => {
         },
       },
       {
-        Header: "More info",
+        Header: "More Info",
         accessor: "link",
         Cell: ({ value }) => {
           if (value) {
diff --git a/frontend/src/pages/System/Backups/table.tsx b/frontend/src/pages/System/Backups/table.tsx
index d0570da40..4f9eeae44 100644
--- a/frontend/src/pages/System/Backups/table.tsx
+++ b/frontend/src/pages/System/Backups/table.tsx
@@ -3,9 +3,8 @@ import { Action, PageTable } from "@/components";
 import { useModals } from "@/modules/modals";
 import { useTableStyles } from "@/styles";
 import { Environment } from "@/utilities";
-import { faClock, faHistory, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Group, Text } from "@mantine/core";
+import { faHistory, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { Anchor, Text } from "@mantine/core";
 import { FunctionComponent, useMemo } from "react";
 import { Column } from "react-table";
 
@@ -17,10 +16,6 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
   const columns: Column<System.Backups>[] = useMemo<Column<System.Backups>[]>(
     () => [
       {
-        accessor: "type",
-        Cell: <FontAwesomeIcon icon={faClock}></FontAwesomeIcon>,
-      },
-      {
         Header: "Name",
         accessor: "filename",
         Cell: ({ value }) => {
@@ -50,52 +45,61 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
         },
       },
       {
-        id: "actions",
+        id: "restore",
+        Header: "Restore",
         accessor: "filename",
         Cell: ({ value }) => {
           const modals = useModals();
           const restore = useRestoreBackups();
+          return (
+            <Action
+              label="Restore"
+              onClick={() =>
+                modals.openConfirmModal({
+                  title: "Restore Backup",
+                  children: (
+                    <Text size="sm">
+                      Are you sure you want to restore the backup ({value})?
+                      Bazarr will automatically restart and reload the UI during
+                      the restore process.
+                    </Text>
+                  ),
+                  labels: { confirm: "Restore", cancel: "Cancel" },
+                  confirmProps: { color: "red" },
+                  onConfirm: () => restore.mutate(value),
+                })
+              }
+              icon={faHistory}
+            ></Action>
+          );
+        },
+      },
+      {
+        id: "delet4",
+        Header: "Delete",
+        accessor: "filename",
+        Cell: ({ value }) => {
+          const modals = useModals();
           const remove = useDeleteBackups();
           return (
-            <Group spacing="xs" noWrap>
-              <Action
-                label="Restore"
-                onClick={() =>
-                  modals.openConfirmModal({
-                    title: "Restore Backup",
-                    children: (
-                      <Text size="sm">
-                        Are you sure you want to restore the backup ({value})?
-                        Bazarr will automatically restart and reload the UI
-                        during the restore process.
-                      </Text>
-                    ),
-                    labels: { confirm: "Restore", cancel: "Cancel" },
-                    confirmProps: { color: "red" },
-                    onConfirm: () => restore.mutate(value),
-                  })
-                }
-                icon={faHistory}
-              ></Action>
-              <Action
-                label="Delete"
-                color="red"
-                onClick={() =>
-                  modals.openConfirmModal({
-                    title: "Delete Backup",
-                    children: (
-                      <Text size="sm">
-                        Are you sure you want to delete the backup ({value})?
-                      </Text>
-                    ),
-                    labels: { confirm: "Delete", cancel: "Cancel" },
-                    confirmProps: { color: "red" },
-                    onConfirm: () => remove.mutate(value),
-                  })
-                }
-                icon={faTrash}
-              ></Action>
-            </Group>
+            <Action
+              label="Delete"
+              color="red"
+              onClick={() =>
+                modals.openConfirmModal({
+                  title: "Delete Backup",
+                  children: (
+                    <Text size="sm">
+                      Are you sure you want to delete the backup ({value})?
+                    </Text>
+                  ),
+                  labels: { confirm: "Delete", cancel: "Cancel" },
+                  confirmProps: { color: "red" },
+                  onConfirm: () => remove.mutate(value),
+                })
+              }
+              icon={faTrash}
+            ></Action>
           );
         },
       },
diff --git a/frontend/src/pages/System/Status/index.tsx b/frontend/src/pages/System/Status/index.tsx
index ebb5d03d8..80757c4c7 100644
--- a/frontend/src/pages/System/Status/index.tsx
+++ b/frontend/src/pages/System/Status/index.tsx
@@ -10,7 +10,15 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { faCode, faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Container, Divider, Grid, Stack, Text } from "@mantine/core";
+import {
+  Anchor,
+  Container,
+  Divider,
+  Grid,
+  Space,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import moment from "moment";
 import {
@@ -30,12 +38,14 @@ interface InfoProps {
 function Row(props: InfoProps): JSX.Element {
   const { title, children } = props;
   return (
-    <Grid>
-      <Grid.Col span={5}>
-        <Text weight="bold">{title}</Text>
+    <Grid columns={10}>
+      <Grid.Col span={2}>
+        <Text size="sm" align="right" weight="bold">
+          {title}
+        </Text>
       </Grid.Col>
-      <Grid.Col span={12 - 5}>
-        <Text>{children}</Text>
+      <Grid.Col span={3}>
+        <Text size="sm"> {children}</Text>
       </Grid.Col>
     </Grid>
   );
@@ -68,9 +78,13 @@ const InfoContainer: FunctionComponent<
 > = ({ title, children }) => {
   return (
     <Stack>
-      <h4>{title}</h4>
-      <Divider></Divider>
+      <Divider
+        labelProps={{ size: "medium", weight: "bold" }}
+        labelPosition="left"
+        label={title}
+      ></Divider>
       {children}
+      <Space />
     </Stack>
   );
 };
diff --git a/frontend/src/pages/System/Tasks/table.tsx b/frontend/src/pages/System/Tasks/table.tsx
index 38ea5b5e0..ea45af49d 100644
--- a/frontend/src/pages/System/Tasks/table.tsx
+++ b/frontend/src/pages/System/Tasks/table.tsx
@@ -35,6 +35,7 @@ const Table: FunctionComponent<Props> = ({ tasks }) => {
         accessor: "next_run_in",
       },
       {
+        Header: "Run",
         accessor: "job_running",
         Cell: ({ row, value }) => {
           const { job_id: jobId } = row.original;
@@ -42,7 +43,7 @@ const Table: FunctionComponent<Props> = ({ tasks }) => {
 
           return (
             <MutateAction
-              label="Run"
+              label="Run Job"
               icon={faPlay}
               iconProps={{ spin: value }}
               mutation={runTask}