Enhanced layout of the reset button (use same style as in appearance …

…section (#1371) * Enhanced layout of the reset button (use same style as in appearance section
oliverschwendener · Feb 16, 2025 · 7b1b702 · 7b1b702
1 parent 134bf97
commit 7b1b702
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/docs/Extensions/PasswordGenerator/example-settings.png b/docs/Extensions/PasswordGenerator/example-settings.png
diff --git a/src/renderer/Extensions/PasswordGenerator/PasswordGeneratorSettings.tsx b/src/renderer/Extensions/PasswordGenerator/PasswordGeneratorSettings.tsx
@@ -3,7 +3,8 @@ import { useExtensionSetting } from "@Core/Hooks";
 import { Setting } from "@Core/Settings/Setting";
 import { SettingGroup } from "@Core/Settings/SettingGroup";
 import { SettingGroupList } from "@Core/Settings/SettingGroupList";
-import { Button, Input, Switch } from "@fluentui/react-components";
+import { Button, Input, Switch, Tooltip } from "@fluentui/react-components";
+import { ArrowCounterclockwiseRegular } from "@fluentui/react-icons";
 import { useTranslation } from "react-i18next";
 
 export const PasswordGeneratorSettings = () => {
@@ -142,18 +143,21 @@ export const PasswordGeneratorSettings = () => {
                             }}
                         >
                             <Input
-                                style={{ width: 250 }}
+                                style={{ width: 300 }}
                                 value={`${symbols}`}
                                 type="text"
                                 onChange={(_, { value }) => value && setSymbols(value)}
+                                contentAfter={
+                                    <Tooltip content={t("resetSymbols")} relationship="label" withArrow>
+                                        <Button
+                                            size="small"
+                                            appearance="subtle"
+                                            icon={<ArrowCounterclockwiseRegular fontSize={14} />}
+                                            onClick={() => setSymbols(PasswordGeneratorDefaultSymbols)}
+                                        />
+                                    </Tooltip>
+                                }
                             />
-                            <Button
-                                appearance="secondary"
-                                style={{ marginLeft: 8, width: 50 }}
-                                onClick={() => setSymbols(PasswordGeneratorDefaultSymbols)}
-                            >
-                                {t("resetSymbols")}
-                            </Button>
                             <Switch
                                 checked={includeSymbols}
                                 onChange={(_, { checked }) => setIncludeSymbols(checked)}