fix(UI): Message consistency, visual text spacing, visual note spacing (

#247)

* Fix spacing around the "No landmarks found" text.
* Tweak the spacing around the note that appears in the sidebar when the user is using both the sidebar and the pop-up.
* Be consistent and include the full-stop in messages that are sentences in the messages file, not the code.
* Re-group messages in the messages file slightly for clarity.

src/assemble/messages.common.json

@@ -30,10 +30,6 @@
     "message": "Toggle the display of all landmarks on the page"
   },
 
-  "noMainLandmarkFound": {
-    "message": "No main landmark found"
-  },
-
 
 
 
@@ -50,7 +46,11 @@
   },
 
   "noLandmarksFound": {
-    "message": "No landmarks found"
+    "message": "No landmarks found."
+  },
+
+  "noMainLandmarkFound": {
+    "message": "No main landmark found."
   },
 
 

src/code/_content.js

@@ -57,7 +57,7 @@ function messageHandler(message, sendingPort) {
 			if (mainElementInfo) {
 				elementFocuser.focusElement(mainElementInfo)
 			} else {
-				alert(browser.i18n.getMessage('noMainLandmarkFound') + '.')
+				alert(browser.i18n.getMessage('noMainLandmarkFound'))
 			}
 			break
 		}
@@ -107,7 +107,7 @@ function handleOutdatedResults() {
 
 function thereMustBeLandmarks() {
 	if (landmarksFinder.getNumberOfLandmarks() === 0) {
-		alert(browser.i18n.getMessage('noLandmarksFound') + '.')
+		alert(browser.i18n.getMessage('noLandmarksFound'))
 		return false
 	}
 	return true

src/static/gui.css

@@ -1,3 +1,23 @@
+:root {
+	--spacing: 0.25em;
+}
+
+body {
+	padding: calc(var(--spacing) * 2);
+	font-family: sans-serif;
+}
+
+h1 {
+	font-size: 1em;
+	padding: var(--spacing);
+	margin: 0;
+}
+
+p {
+	margin: 0;
+	padding: var(--spacing);
+}
+
 ul {
 	margin: 0;
 	padding: 0;
@@ -12,7 +32,7 @@ li {
 }
 
 button {
-	margin: 0.25em;
+	margin: var(--spacing);
 	height: auto;         /* stops Firefox causing overflows on Windows
 	                         https://github.com/matatk/landmarks/issues/149 */
 	padding-left: 0.5em;  /* These are needed due to the above */
@@ -21,19 +41,8 @@ button {
 	padding-bottom: 0.25em;
 }
 
-body {
-	padding: 0.5em;
-	font-family: sans-serif;
-}
-
-h1 {
-	font-size: 1em;
-	padding: 0.25em;
-	margin: 0;
-}
-
 label {
-	margin-top: 0.5em;
+	margin-top: calc(var(--spacing) * 2);
 }
 
 /* ui */
@@ -43,14 +52,15 @@ label {
 }
 
 #note {
+	margin-bottom: calc(var(--spacing) * 2);
 	background-color: var(--light);
 	border: 1px solid var(--vivid);
 	border-radius: 1em;
 }
 
 #note p {
-	padding-left: 0.5em;
-	padding-right: 0.5em;
+	padding: 0.5em;
+	padding-top: 0.75em;
 }
 
 #note div {