Improved UX/UI. Fixed https://github.com/libredirect/libredirect/issues/552

3 files changed, 21 insertions, 9 deletions

diff --git a/src/pages/options/index.js b/src/pages/options/index.js
index 6fb8e452..3c3f6d1f 100644
--- a/src/pages/options/index.js
+++ b/src/pages/options/index.js
@@ -73,6 +73,13 @@ function loadPage(path) {
 			})
 		}
 
+		const frontend_name_element = document.getElementById(`${service}_page`).getElementsByClassName("frontend_name")[0]
+		if (divs[service].frontend) {
+			frontend_name_element.href = config.services[service].frontends[divs[service].frontend.value].url
+		} else {
+			frontend_name_element.href = Object.values(config.services[service].frontends)[0].url
+		}
+
 		if (Object.keys(config.services[service].frontends).length > 1) {
 			changeFrontendsSettings(service)
 		}
@@ -85,7 +92,6 @@ function loadPage(path) {
 	}
 }
 
-
 async function processDefaultCustomInstances(frontend, networks, document) {
 	let customInstances = []
 	let options
diff --git a/src/pages/options/widgets/about.pug b/src/pages/options/widgets/about.pug
index 93830a1d..3ef0e86d 100644
--- a/src/pages/options/widgets/about.pug
+++ b/src/pages/options/widgets/about.pug
@@ -6,19 +6,19 @@ section(class="option-block" id="about_page")
         div(class="some-block option-block")
             h4 Donate: ♥️
             h4 
-                a(href="https://libredirect.github.io/donate") https://libredirect.github.io/donate
+                a(href="https://libredirect.github.io/donate" target="_blank") https://libredirect.github.io/donate
 
         div(class="some-block option-block")
             h4 FAQ:
             h4 
-                a(href="https://libredirect.github.io/faq") https://libredirect.github.io/faq
+                a(href="https://libredirect.github.io/faq" target="_blank") https://libredirect.github.io/faq
 
         div(class="some-block option-block")
             h4 Docs:
             h4 
-                a(href="https://libredirect.github.io/docs") https://libredirect.github.io/docs
+                a(href="https://libredirect.github.io/docs" target="_blank") https://libredirect.github.io/docs
 
         div(class="some-block option-block")
             h4 Source Code:
             h4 
-                a(href="https://libredirect.github.io/source_code") https://libredirect.github.io/source_code
\ No newline at end of file
+                a(href="https://libredirect.github.io/source_code" target="_blank") https://libredirect.github.io/source_code
\ No newline at end of file
diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug
index dc527c78..22b8ab2d 100644
--- a/src/pages/options/widgets/services.pug
+++ b/src/pages/options/widgets/services.pug
@@ -1,7 +1,8 @@
 each val, service in services
     section(class="option-block" id=service+"_page")
         div(class="some-block option-block")
-            h1(data-localise="__MSG_"+service+"__")=services[service].name
+            h1
+                a(href=services[service].url)=services[service].name
 
         hr
 
@@ -15,10 +16,15 @@ each val, service in services
 
         if Object.keys(services[service].frontends).length> 1
             div(class="some-block option-block")
-                h4(data-localise="__MSG_frontend__") Frontend
+                h4
+                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
                 select(id=service+"-frontend")
                     each val, frontend in services[service].frontends
                         option(value=frontend)=services[service].frontends[frontend].name
+        else 
+            div(class="some-block option-block")
+                h4
+                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
 
         if services[service].embeddable
             div(class="some-block option-block")
@@ -35,14 +41,14 @@ each val, service in services
                 div(id=frontend)
                     div(class="some-block option-block")
                         h4(data-localise="__MSG_instances__") Add your favorite instances
-                    
+
                     form(class="custom-instance-form")
                         div(class="some-block option-block")
                             input(class="custom-instance" placeholder=`http://${frontend}.com` type="url" )
                             button(class="add add-instance" type="submit")
                                 svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
                                     path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
-                    
+
                     div(class="checklist custom-checklist")                    
                     each val, network in networks
                         div(class=network)