Improve layout of the settings pages

frontend/src/components/forms/MovieUploadForm.tsx

@@ -12,7 +12,7 @@ import {
   faCircleNotch,
   faInfoCircle,
   faTimes,
-  faXmark,
+  faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
@@ -222,7 +222,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         Cell: ({ row: { index } }) => {
           return (
             <Action
-              icon={faXmark}
+              icon={faTrash}
               color="red"
               onClick={() => action.remove(index)}
             ></Action>

frontend/src/components/forms/ProfileEditForm.tsx

@@ -2,7 +2,7 @@ import { Action, Selector, SelectorOption, SimpleTable } from "@/components";
 import { useModals, withModal } from "@/modules/modals";
 import { useTableStyles } from "@/styles";
 import { useArrayAction, useSelectorOptions } from "@/utilities";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import {
   Accordion,
   Alert,
@@ -207,7 +207,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
         Cell: ({ row }) => {
           return (
             <Action
-              icon={faXmark}
+              icon={faTrash}
               color="red"
               onClick={() => action.remove(row.index)}
             ></Action>

frontend/src/components/forms/SeriesUploadForm.tsx

@@ -16,7 +16,7 @@ import {
   faCircleNotch,
   faInfoCircle,
   faTimes,
-  faXmark,
+  faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
@@ -285,7 +285,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
         Cell: ({ row: { index } }) => {
           return (
             <Action
-              icon={faXmark}
+              icon={faTrash}
               color="red"
               onClick={() => action.remove(index)}
             ></Action>

frontend/src/pages/Settings/General/index.tsx

@@ -71,6 +71,7 @@ const SettingsGeneralView: FunctionComponent = () => {
               label="Authentication"
               clearable
               options={securityOptions}
+              placeholder="No Authentication"
               settingKey="settings-auth-type"
               beforeStaged={(v) => (v === null ? "None" : v)}
             ></Selector>
@@ -122,6 +123,7 @@ const SettingsGeneralView: FunctionComponent = () => {
             <Selector
               clearable
               settingKey="settings-proxy-type"
+              placeholder="No Proxy"
               options={proxyOptions}
               beforeStaged={(v) => (v === null ? "None" : v)}
             ></Selector>

frontend/src/pages/Settings/Languages/components.tsx

@@ -5,6 +5,7 @@ import {
 } from "@/components";
 import { Language } from "@/components/bazarr";
 import { useSelectorOptions } from "@/utilities";
+import { InputWrapper } from "@mantine/core";
 import { FunctionComponent, useMemo } from "react";
 import { useLatestEnabledLanguages, useLatestProfiles } from ".";
 import { BaseInput, Selector, SelectorProps } from "../components";
@@ -19,21 +20,23 @@ type LanguageSelectorProps = Omit<
 
 export const LanguageSelector: FunctionComponent<
   LanguageSelectorProps & BaseInput<string[]>
-> = ({ settingKey, options }) => {
+> = ({ settingKey, location, label, options }) => {
   const enabled = useLatestEnabledLanguages();
   const { setValue } = useFormActions();
 
   const wrappedOptions = useSelectorOptions(options, (value) => value.name);
 
   return (
-    <MultiSelector
-      {...wrappedOptions}
-      value={enabled}
-      searchable
-      onChange={(val) => {
-        setValue(val, settingKey);
-      }}
-    ></MultiSelector>
+    <InputWrapper label={label}>
+      <MultiSelector
+        {...wrappedOptions}
+        value={enabled}
+        searchable
+        onChange={(val) => {
+          setValue(val, settingKey, location);
+        }}
+      ></MultiSelector>
+    </InputWrapper>
   );
 };
 

frontend/src/pages/Settings/Languages/index.tsx

@@ -55,6 +55,7 @@ const SettingsLanguagesView: FunctionComponent = () => {
         </Message>
         <LanguageSelector
           label="Languages Filter"
+          placeholder="Select languages"
           settingKey={enabledLanguageKey}
           options={languages ?? []}
         ></LanguageSelector>
@@ -76,6 +77,7 @@ const SettingsLanguagesView: FunctionComponent = () => {
           <CollapseBox.Content indent>
             <ProfileSelector
               label="Profile"
+              placeholder="Select a profile"
               settingKey="settings-general-serie_default_profile"
             ></ProfileSelector>
           </CollapseBox.Content>
@@ -90,9 +92,10 @@ const SettingsLanguagesView: FunctionComponent = () => {
               Apply only to Movies added to Bazarr after enabling this option.
             </Message>
           </CollapseBox.Control>
-          <CollapseBox.Content>
+          <CollapseBox.Content indent>
             <ProfileSelector
               label="Profile"
+              placeholder="Select a profile"
               settingKey="settings-general-movie_default_profile"
             ></ProfileSelector>
           </CollapseBox.Content>

frontend/src/pages/Settings/Languages/table.tsx

@@ -5,7 +5,7 @@ import {
 } from "@/components/forms/ProfileEditForm";
 import { useModals } from "@/modules/modals";
 import { BuildKey, useArrayAction } from "@/utilities";
-import { faWrench, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { Badge, Button, Group } from "@mantine/core";
 import { cloneDeep } from "lodash";
 import { FunctionComponent, useCallback, useMemo } from "react";
@@ -132,7 +132,7 @@ const Table: FunctionComponent = () => {
                 }}
               ></Action>
               <Action
-                icon={faXmark}
+                icon={faTrash}
                 color="red"
                 onClick={() => action.remove(row.index)}
               ></Action>

frontend/src/pages/Settings/Sonarr/index.tsx

@@ -61,6 +61,7 @@ const SettingsSonarrView: FunctionComponent = () => {
             </Message>
             <MultiSelector
               label="Excluded Series Types"
+              placeholder="Select series types"
               settingKey="settings-sonarr-excluded_series_types"
               options={seriesTypeOptions}
             ></MultiSelector>

frontend/src/pages/Settings/Subtitles/index.tsx

@@ -99,6 +99,7 @@ const SettingsSubtitlesView: FunctionComponent = () => {
           <CollapseBox.Control>
             <Selector
               clearable
+              placeholder="Select a provider"
               settingKey="settings-general-anti_captcha_provider"
               beforeStaged={(v) => (v === undefined ? "None" : v)}
               options={antiCaptchaOption}