Version 0.3.0!

README.md

@@ -6,7 +6,7 @@
 [![Get Re-Nav for Chrome](./images/chrome-web-store.png)](https://chrome.google.com/webstore/detail/efjignaelidacjdhleaojfmkklganjjb)
 [![Get Re-Nav for Edge](./images/microsoft.png)](https://microsoftedge.microsoft.com/addons/detail/efnkhmlaemggdlpalglioeolbbhfpiic)
 
-![Latest Re-Nav screenshot](./images/re-nav-version-0-2-0.png)
+![Latest Re-Nav screenshot](./images/re-nav-version-0-3-0.png)
 
 ## Installation
 

source/manifest.ts

@@ -6,7 +6,7 @@ export default function createManifest(
   const manifest: Record<string, unknown> = {
     name: 'Re-Nav',
     description: 'Navigation redirects for the masses.',
-    version: '0.2.0',
+    version: '0.3.0',
     permissions: ['contextMenus', 'storage', 'tabs', 'webNavigation'],
     options_ui: {
       page: 'options/index.html',

source/options/components/usage.ts

@@ -49,6 +49,19 @@ export default class Usage extends Component {
           <li>To remove a redirect click the red button with the ✗ twice.</li>
         </ul>
 
+        <p>Sharing & importing redirects:</p>
+        <ul>
+          <li>
+            To share a redirect, click on the button with the clipboard 📋 icon.
+            This will copy a link that you can share around.
+          </li>
+          <li>
+            When you or someone else heads to a share link, it will show the
+            redirect's details and if they have Re-Nav installed it will create
+            an import button on the page.
+          </li>
+        </li>
+
         <p>Some miscellaneous notes:</p>
         <ul>
           <li>Only URLs starting with "http" will be checked.</li>

source/options/scss/components/editor.scss

@@ -25,15 +25,15 @@
     padding: 0;
 
     &.enabled {
-      background-color: var(--da-4);
+      --button-background-color: var(--da-4);
     }
 
     &.disabled {
-      background-color: var(--da-2);
+      --button-background-color: var(--da-2);
     }
 
     &.share {
-      background-color: var(--da-7);
+      --button-background-color: var(--da-7);
     }
   }
 

source/options/scss/components/page-main.scss

@@ -8,7 +8,7 @@
   margin-bottom: 16px;
 
   .button {
-    background-color: var(--da-3);
+    background-color: var(--button-background-color, var(--da-3));
     border: none;
     color: var(--db-1);
     cursor: pointer;