Move import/export buttons to bottom

YouTube-Enhancer · Nov 15, 2023 · ddd44d0 · ddd44d0
1 parent 398fb28
commit ddd44d0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 27 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -40,7 +40,6 @@
 	"settings": {
 		"sections": {
 			"importExportSettings": {
-				"title": "Import/Export Settings",
 				"importButton": {
 					"error": {
 						"validation": "Error importing settings. Please check the file format.\n{{ERROR_MESSAGE}}",

diff --git a/public/locales/en-US.json.d.ts b/public/locales/en-US.json.d.ts
@@ -67,7 +67,6 @@ interface EnUS {
 					title: "Import settings from a JSON file";
 					value: "Import Settings";
 				};
-				title: "Import/Export Settings";
 			};
 			language: {
 				select: { label: "Language"; title: "The language to use for the extension" };

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -356,28 +356,6 @@ export default function Settings({
 						t={i18nInstance.t}
 					/>
 				</Suspense>
-				<SettingSection>
-					<SettingTitle title={t("settings.sections.importExportSettings.title")} />
-					<div className="flex gap-1 p-2">
-						<input
-							className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
-							id="import_settings_button"
-							onClick={importSettings}
-							title={t("settings.sections.importExportSettings.importButton.title")}
-							type="button"
-							value={t("settings.sections.importExportSettings.importButton.value")}
-						/>
-						<input
-							className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
-							id="export_settings_button"
-							onClick={exportSettings}
-							style={{ marginLeft: "auto" }}
-							title={t("settings.sections.importExportSettings.exportButton.title")}
-							type="button"
-							value={t("settings.sections.importExportSettings.exportButton.value")}
-						/>
-					</div>
-				</SettingSection>
 				<SettingSection>
 					<SettingTitle title={t("settings.sections.miscellaneous.title")} />
 					<Setting
@@ -613,7 +591,7 @@ export default function Settings({
 						type="select"
 					/>
 				</SettingSection>
-				<div className="sticky bottom-0 left-0 flex gap-1 bg-[#f5f5f5] p-2 dark:bg-[#181a1b]">
+				<div className="sticky bottom-0 left-0 flex justify-between gap-1 bg-[#f5f5f5] p-2 dark:bg-[#181a1b]">
 					<input
 						className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 						id="clear_data_button"
@@ -622,6 +600,22 @@ export default function Settings({
 						type="button"
 						value={t("settings.sections.bottomButtons.clear.value")}
 					/>
+					<input
+						className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+						id="import_settings_button"
+						onClick={importSettings}
+						title={t("settings.sections.importExportSettings.importButton.title")}
+						type="button"
+						value={t("settings.sections.importExportSettings.importButton.value")}
+					/>
+					<input
+						className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
+						id="export_settings_button"
+						onClick={exportSettings}
+						title={t("settings.sections.importExportSettings.exportButton.title")}
+						type="button"
+						value={t("settings.sections.importExportSettings.exportButton.value")}
+					/>
 					{notifications.filter((n) => n.action === "reset_settings").length > 0 ? (
 						<input
 							className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
@@ -636,7 +630,6 @@ export default function Settings({
 
 								addNotification("success", t("pages.options.notifications.success.saved"));
 							}}
-							style={{ marginLeft: "auto" }}
 							title={t("settings.sections.bottomButtons.confirm.title")}
 							type="button"
 							value={t("settings.sections.bottomButtons.confirm.value")}
@@ -646,7 +639,6 @@ export default function Settings({
 							className="warning p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 							id="reset_button"
 							onClick={resetOptions}
-							style={{ marginLeft: "auto" }}
 							title={t("settings.sections.bottomButtons.reset.title")}
 							type="button"
 							value={t("settings.sections.bottomButtons.reset.value")}