diff --git a/public/manifest.json b/public/manifest.json index ed8fa8c..b60c055 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -18,6 +18,13 @@ "sizes": "512x512" } ], + "permissions": [ + "http://*/*", + "https://*/*", + "clipboardRead", + "clipboardWrite", + "storage" + ], "start_url": ".", "display": "standalone", "theme_color": "#35313D", diff --git a/src/components/SettingsActions/SettingsActions.css b/src/components/SettingsActions/SettingsActions.css index 540949c..5a801d3 100644 --- a/src/components/SettingsActions/SettingsActions.css +++ b/src/components/SettingsActions/SettingsActions.css @@ -1,4 +1,4 @@ -.action-button { +button.action-button { background-color: rgba(255, 255, 255, 0.05); color: white; padding: 8px; @@ -6,6 +6,14 @@ cursor: pointer; } +button.action-button:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +button.action-button:active { + background-color: rgba(255, 255, 255, 0.2); +} + @media screen and (max-width: 558px) { .action-button { display: none; diff --git a/src/components/SettingsActions/SettingsActions.tsx b/src/components/SettingsActions/SettingsActions.tsx index 18341b0..f7ef981 100644 --- a/src/components/SettingsActions/SettingsActions.tsx +++ b/src/components/SettingsActions/SettingsActions.tsx @@ -20,10 +20,14 @@ const SettingsActions: React.FC = () => { ["size", size.toString()], ["color", color.replace("#", "")], ]).toString(); - void navigator.clipboard?.writeText( - `${window.location.host}?${paramString}` - ); - setCopied(true); + void navigator.clipboard + ?.writeText(`${window.location.host}?${paramString}`) + .then(() => { + setCopied(true); + }) + .catch(() => { + alert("Clipboard permissions must be enabled to copy links!"); + }); }; return ( diff --git a/src/hooks/useIconParameters.ts b/src/hooks/useIconParameters.ts index 356e754..5a5195c 100644 --- a/src/hooks/useIconParameters.ts +++ b/src/hooks/useIconParameters.ts @@ -58,5 +58,6 @@ export default () => { } } } + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); };