chore(app): better ux for settings actions

public/manifest.json

@@ -18,6 +18,13 @@
       "sizes": "512x512"
     }
   ],
+  "permissions": [
+    "http://*/*",
+    "https://*/*",
+    "clipboardRead",
+    "clipboardWrite",
+    "storage"
+  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#35313D",

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;

src/components/SettingsActions/SettingsActions.tsx

@@ -20,10 +20,14 @@ const SettingsActions: React.FC = () => {
       ["size", size.toString()],
       ["color", color.replace("#", "")],
     ]).toString();
-    void navigator.clipboard?.writeText(
+    void navigator.clipboard
-      `${window.location.host}?${paramString}`
+      ?.writeText(`${window.location.host}?${paramString}`)
-    );
+      .then(() => {
         setCopied(true);
+      })
+      .catch(() => {
+        alert("Clipboard permissions must be enabled to copy links!");
+      });
   };
 
   return (

src/hooks/useIconParameters.ts

@@ -58,5 +58,6 @@ export default () => {
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };