Browser ext => 0.0.8. Add Reset settings button.

browser-extension/assets/manifest-v2.json

@@ -4,7 +4,7 @@
   "short_name": "Haskell Spotlight",
   "description": "Search on Hackage, Hoogle and more soon.",
   "homepage_url": "https://github.com/haskell-spotlight/haskell-spotlight",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "icons": { "192": "images/icon-192.png" },
   "content_scripts": [
     {

browser-extension/assets/manifest-v3.json

@@ -4,7 +4,7 @@
   "short_name": "Haskell Spotlight",
   "description": "Search on Hackage, Hoogle and more soon.",
   "homepage_url": "https://github.com/haskell-spotlight/haskell-spotlight",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "icons": { "192": "images/icon-192.png" },
   "content_scripts": [
     {

browser-extension/popup/Popup.module.css

@@ -69,3 +69,22 @@
 .kbdKeyActive {
   filter: grayscale(0);
 }
+
+.resetKeyBindingsButton {
+  text-align: center;
+  background-color: #5e5086;
+  color: #fff;
+  border-radius: 8px;
+  display: inline-flex;
+  margin: auto;
+  padding: 4px 8px;
+  filter: grayscale(1);
+  border-bottom: 6px solid #453a62;
+  border-right: 4px solid #453a62;
+  transition: var(--transition-short);
+}
+
+.resetKeyBindingsButton:hover {
+  cursor: pointer;
+  filter: grayscale(0);
+}

browser-extension/popup/Popup.tsx

@@ -61,7 +61,7 @@ export default () => {
       onKeyUp={handleKeyUp}
       onKeyDown={handleKeyDown}
     >
-      <div className={s.header}>Haskell Spotlight</div>
+      <div className={s.header}><a href="https://github.com/haskell-spotlight/haskell-spotlight">Haskell Spotlight &nbsp;⭐</a></div>
       <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flex: '1 1' }}>
         <div style={{ fontSize: '14px', textAlign: 'center', padding: '0 18px' }}>
           {state === 'awaitingForNewKeyBinding' && <span>Click on the area bellow to change hotkey.</span>}
@@ -91,13 +91,17 @@ export default () => {
           </div>
         )}
 
-        <a
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '12px 12px 32px 12px', fontSize: '16px', fontWeight: 'bold', color: '#5e5086' }}
-          href="https://github.com/haskell-spotlight/haskell-spotlight"
-          target="__blank"
+        <div
+          className={s.resetKeyBindingsButton}
+          onClick={async () => {
+            await k.setDefaultKeyBindings();
+            const kb = await k.readKeyBinding('toggleSpotlight');
+            setKeyBinding(kb);
+            setState('keyBindingUpdated');
+          }}
         >
-          ⭐️ github.com/haskell-spotlight/haskell-spotlight
-        </a>
+          Reset settings
+        </div>
       </div>
     </div>
   );