fix(ui): 🐛 resolve firefox browser issues

dashhive · Oct 18, 2023 · 2f87d69 · 2f87d69
1 parent 27ba2c9
commit 2f87d69
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 44 deletions.
diff --git a/src/components/contacts-list.js b/src/components/contacts-list.js
@@ -43,7 +43,9 @@ const initialState = {
         class="pill rounded copy"
         title="Add a Contact"
       >
-        <i class="icon-plus-circle"></i>
+        <svg class="plus-circle" width="26" height="26" viewBox="0 0 16 16">
+          <use xlink:href="#icon-plus-circle"></use>
+        </svg>
         New Contact
       </button>
     </header>
@@ -58,7 +60,7 @@ const initialState = {
       }
       ${
         state.contacts.length === 0 ?
-        html`<span class="center">No Contacts found</span>` : ''
+        html`<span class="flex flex-fill center">No Contacts found</span>` : ''
       }
     </div>
 

diff --git a/src/components/svg-sprite.js b/src/components/svg-sprite.js
diff --git a/src/helpers/db.js b/src/helpers/db.js
@@ -1,8 +1,18 @@
 import {
   localforage,
-  // CrypticStorage,
 } from '../imports.js'
-import Config from '../manifest.json' assert { type: 'json' }
+
+let Config = {
+  name: 'incubator',
+  description: 'dash wallet'
+}
+
+const manifest = await fetch(
+  '/src/manifest.webmanifest'
+)
+if (manifest.ok) {
+  Config = await manifest.json()
+}
 
 export const localForageBaseCfg = {
   name: Config.name,

diff --git a/src/index.css b/src/index.css
@@ -54,13 +54,11 @@ main header figure {
   margin: 0;
 }
 main header figure figcaption:has(+ div) {
-  color: var(--dark-200, #80929C);
   font-size: .75rem;
   font-weight: 500;
   line-height: 1;
 }
 main header figure figcaption + div {
-  color: var(--f);
   display: flex;
   font-size: 3.75rem;
   font-weight: 800;
@@ -74,10 +72,6 @@ main header figure figcaption + div svg {
 main header figure figcaption + div sub {
   align-self: self-end;
   font-size: 2.75rem;
-  color: var(--dark-600);
-}
-main header figure figcaption + div sub span {
-  color: var(--f);
 }
 main footer {
   text-align: center;
@@ -102,16 +96,18 @@ figure h4 {
 }
 
 
+.flex {
+  display: flex;
+}
+.flex-fill {
+  flex: 1 1 auto;
+}
 .row {
   flex-direction: row;
 }
 .col {
   flex-direction: column;
 }
-.msg {
-  display: flex;
-  flex-direction: column;
-}
 .jc-left {
   justify-content: left;
 }
@@ -120,16 +116,24 @@ figure h4 {
 }
 .center {
   align-content: center;
+  align-items: center;
+  justify-content: center;
   justify-items: center;
   text-align: center;
 }
+
 .tag {
   display: inline-block;
   border: 1px solid var(--dark-500);
   margin: 0 .1rem .4rem 0;
   padding: .25rem;
 }
 
+.msg {
+  display: flex;
+  flex-direction: column;
+}
+
 .ta-left {
   text-align: left;
 }
@@ -160,6 +164,32 @@ figure h4 {
   padding-right: 1rem;
 }
 
+.pl-0 {
+  padding-left: 0;
+}
+.pl-1 {
+  padding-left: .25rem;
+}
+.pl-2 {
+  padding-left: .75rem;
+}
+.pl-3 {
+  padding-left: 1rem;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+.pr-1 {
+  padding-right: .25rem;
+}
+.pr-2 {
+  padding-right: .75rem;
+}
+.pr-3 {
+  padding-right: 1rem;
+}
+
 .py-0 {
   padding-top: 0;
   padding-bottom: 0;

diff --git a/src/index.html b/src/index.html
@@ -28,11 +28,11 @@
 
 	<link rel="icon" type="image/png" href="../public/favicon.png">
 	<link rel="shortcut icon" href="../public/favicon.png">
-	<link rel="manifest" href="./manifest.json?v=0.0.0" crossorigin="use-credentials">
+	<link rel="manifest" href="./manifest.webmanifest?v=0.0.0" crossorigin="use-credentials">
 
 	<link rel="icon" type="image/png" sizes="250x250" href="../public/icons/dash-d-rounded-square-250.png">
 	<link rel="apple-touch-icon" sizes="250x250" href="../public/icons/dash-d-rounded-square-250.png">
-  <link rel="stylesheet" type="text/css" media="screen" href="./index.css?v=0">
+  <link rel="stylesheet" type="text/css" media="screen" href="./index.css?v=0.0.0">
 </head>
 <body class="nt">
 

diff --git a/src/main.js b/src/main.js
@@ -81,7 +81,10 @@ let contactsList = await setupContactsList(
         //   event.target,
         //   state,
         // )
-        if (event.target?.id === 'add_contact') {
+        if (
+          event.target?.id === 'add_contact' ||
+          event.target?.parentNode?.id === 'add_contact'
+        ) {
           addContact.render(
             {
               wallet,
@@ -204,7 +207,9 @@ let walletGen = setupDialog(
     submitAlt: 'Next Form',
     cancelTxt: 'Cancel',
     cancelAlt: `Cancel Form`,
-    closeTxt: html`<i class="icon-x"></i>`,
+    closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26">
+    <use xlink:href="#icon-x"></use>
+  </svg>`,
     closeAlt: `Close`,
     footer: state => html`
       <footer class="inline col">
@@ -297,7 +302,9 @@ let walletImp = setupDialog(
     submitAlt: 'Import Existing Wallet',
     cancelTxt: 'Cancel',
     cancelAlt: `Cancel Wallet Import`,
-    closeTxt: html`<i class="icon-x"></i>`,
+    closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26">
+    <use xlink:href="#icon-x"></use>
+  </svg>`,
     closeAlt: `Close`,
     footer: state => html`
       <footer class="inline">
@@ -320,7 +327,7 @@ let walletImp = setupDialog(
           <label for="phrase">
             Recovery Phrase
           </label>
-          <div>
+          <div class="password">
             <input
               type="password"
               id="phrase"
@@ -503,7 +510,9 @@ let sendOrRequest = setupDialog(
     requestAlt: 'Request Dash',
     cancelTxt: 'Cancel',
     cancelAlt: `Cancel Form`,
-    closeTxt: html`<i class="icon-x"></i>`,
+    closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26">
+    <use xlink:href="#icon-x"></use>
+  </svg>`,
     closeAlt: `Close`,
     footer: state => html`
       <footer class="inline row">

diff --git a/src/manifest.json → src/manifest.webmanifest b/src/manifest.json → src/manifest.webmanifest
diff --git a/src/rigs/add-contact.js b/src/rigs/add-contact.js
@@ -30,7 +30,9 @@ export let addContactRig = (function (globals) {
       submitAlt: 'Add Contact',
       cancelTxt: 'Cancel',
       cancelAlt: `Cancel`,
-      closeTxt: html`<i class="icon-x"></i>`,
+      closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26">
+      <use xlink:href="#icon-x"></use>
+    </svg>`,
       closeAlt: `Close`,
       footer: state => html`
         <footer class="inline col">

diff --git a/src/rigs/wallet-encrypt.js b/src/rigs/wallet-encrypt.js
@@ -48,7 +48,7 @@ export let walletEncryptRig = (function (globals) {
             <label for="encryptionPassword">
               Encryption Password
             </label>
-            <div>
+            <div class="password">
               <input
                 type="password"
                 id="encryptionPassword"
@@ -70,7 +70,7 @@ export let walletEncryptRig = (function (globals) {
             </div>
           </article>
           <article>
-            <div class="py-3 px-3">
+            <div class="switch py-3 pr-3">
               <label for="rememberPass" class="jc-left">
                 <sub>
                   Remember password for browser session

diff --git a/src/styles/dialog.css b/src/styles/dialog.css
@@ -26,6 +26,7 @@ dialog .brand {
   top: 1.5rem;
   font-size: 0.75rem;
   text-decoration: none;
+  outline: 0 solid transparent;
 }
 dialog .brand svg {
   max-width: initial;