Make demo more consistent, showcase install better

Author: AlexFlipnote

i18n/da-DK.json

@@ -5,6 +5,7 @@
   "search.placeholder": "Søg på nettet...",
   "demo.weather.location": "Pladsholder",
   "demo.weather.condition": "Solholder",
+  "demo.install.title": "Installer udvidelse",
   "demo.install": "Føj til {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

i18n/en-GB.json

@@ -7,6 +7,7 @@
   "search.placeholder": "Search the web...",
   "demo.weather.location": "Placeholder",
   "demo.weather.condition": "Sunholder",
+  "demo.install.title": "Install extension",
   "demo.install": "Add to {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

i18n/es-ES.json

@@ -7,6 +7,7 @@
   "search.placeholder": "Buscar en la web...",
   "demo.weather.location": "Marcador de posición",
   "demo.weather.condition": "Marcador de sol",
+  "demo.install.title": "Instalar extensión",
   "demo.install": "Añadir a {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

i18n/fr-FR.json

@@ -5,6 +5,7 @@
   "search.placeholder": "Rechercher sur le web...",
   "demo.weather.location": "Emplacement",
   "demo.weather.condition": "Sunholder",
+  "demo.install.title": "Installer l'extension",
   "demo.install": "Ajouter à {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

i18n/no-NB.json

@@ -7,6 +7,7 @@
   "search.placeholder": "Søk på nettet...",
   "demo.weather.location": "Plassholder",
   "demo.weather.condition": "Solholder",
+  "demo.install.title": "Installer utvidelse",
   "demo.install": "Legg til i {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

i18n/pt-PT.json

@@ -5,6 +5,7 @@
   "search.placeholder": "Pesquisar na web...",
   "demo.weather.location": "Localização",
   "demo.weather.condition": "Sunholder",
+  "demo.install.title": "Instalar extensão",
   "demo.install": "Adicionar ao {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

i18n/sv-SE.json

@@ -5,6 +5,7 @@
   "search.placeholder": "Sök på webben...",
   "demo.weather.location": "Platshållare",
   "demo.weather.condition": "Solhållare",
+  "demo.install.title": "Installera tillägg",
   "demo.install": "Lägg till i {browser}",
   "time.format.default": "%H:%M:%S",
   "time.format.default_12h": "%I:%M:%S %p",

src/index.html

@@ -226,10 +226,12 @@ <h2 class="section-title" data-translate="settings.nav.category.features"></h2>
     <!-- Demo Panel Toggle -->
     <button id="demo-panel-toggle" style="display: none;" aria-label="Demo settings"></button>
 
-    <!-- Demo: Install button -->
-    <a id="install-button" target="_blank" style="display: none;">
-      PLACEHOLDER
-    </a>
+    <!-- Demo: Install box -->
+    <section id="install-box" style="display: none;">
+      <span id="install-box-title"></span>
+      <a id="install-button-chrome" target="_blank" href="https://chromewebstore.google.com/detail/npagigfpfilcemncemkphndcaigegcbk">PLACEHOLDER</a>
+      <a id="install-button-firefox" target="_blank" href="https://addons.mozilla.org/addon/alexflipnote-homepage/">PLACEHOLDER</a>
+    </section>
 
     <!-- Scripts -->
     <script src="js/index.js"></script>

src/js/index.js

@@ -758,19 +758,10 @@ if (isExtension) {
 
   // Add a nice install button
   function downloadButton(language=undefined) {
-    let browser = "Chrome"
-    let link = "https://chromewebstore.google.com/detail/npagigfpfilcemncemkphndcaigegcbk"
-
-    if (isFirefox) {
-      browser = "Firefox"
-      link = "https://addons.mozilla.org/addon/alexflipnote-homepage/"
-    }
-
-    const addbutton = document.getElementById("install-button")
-    addbutton.style.display = "block"
-    addbutton.innerText = translate(language, "demo.install", {browser: browser})
-    addbutton.href = link
-    if (link === "#") addbutton.onclick = () => { return false }
+    document.getElementById("install-box").style.display = "flex"
+    document.getElementById("install-box-title").innerText = translate(language, "demo.install.title")
+    document.getElementById("install-button-chrome").innerText = translate(language, "demo.install", {browser: "Chrome/Edge"})
+    document.getElementById("install-button-firefox").innerText = translate(language, "demo.install", {browser: "Firefox"})
   }
 
   downloadButton()

src/scss/components/demo.scss

@@ -43,7 +43,7 @@ $gear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vi
   .demo-panel-close {
     background: transparent;
     border-radius: .5rem;
-    color: var(--font-secondary);
+    color: rgba(255, 255, 255, .75);
     cursor: pointer;
     font-size: 1.25rem;
     line-height: 1;
@@ -55,7 +55,7 @@ $gear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vi
 
     &:hover {
       background-color: rgba(255, 255, 255, .08);
-      color: var(--font-primary);
+      color: #fff;
     }
   }
 
@@ -117,22 +117,32 @@ $gear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vi
   &.panel-open { opacity: 0; pointer-events: none; }
 }
 
-#install-button {
+#install-box {
   backdrop-filter: var(--blur-amount-ui);
   background-color: var(--blur-background);
-  border-radius: .5rem;
+  border-radius: 1rem;
   bottom: 1.5rem;
-  color: var(--font-primary);
-  cursor: pointer;
+  color: #fff;
+  flex-direction: column;
+  gap: .35rem;
   left: 1.5rem;
-  padding: .5rem 1rem;
+  padding: .6rem 1.2rem;
   position: fixed;
-  text-decoration: none;
-  transition: background-color .3s ease, transform .3s ease, color .3s ease, box-shadow .3s ease;
 
-  &:hover {
-    background-color: rgba(#2ecc71, .8);
-    box-shadow: var(--box-shadow);
-    transform: translateY(-.25rem);
+  #install-box-title {
+    font-size: .7rem;
+    font-weight: bold;
+    letter-spacing: .1em;
+    opacity: .5;
+    text-transform: uppercase;
+  }
+
+  a {
+    color: #fff;
+    font-size: .9rem;
+    text-decoration: none;
+    transition: color .2s ease;
+
+    &:hover { color: rgba(#2ecc71, 1); }
   }
 }