add help texts to settings and style content links properly

assets/stylesheets/base/formhack.css

@@ -34,7 +34,7 @@
   --fh-button-min-width: 200px;
   --fh-button-font-color: var(--cta-color);
   --fh-button-bg-color: var(--cta-bg);
-  --fh-button-hover-bg-color: color(var(--fh-button-bg-color) tint(20%));
+  --fh-button-hover-bg-color: var(--cta-bg-hover);
   --fh-button-hover-font-color: var(--fh-button-font-color);
 
   /* Layout */

assets/stylesheets/base/typography.css

@@ -13,3 +13,15 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+p, label, .form-item {
+  & a {
+      color: var(--color-link-content);
+      text-decoration: underline;
+
+      &:hover {
+        color: var(--color-link-content-hover);
+        text-decoration: underline;
+      }
+    }
+}

assets/stylesheets/variables.css

@@ -23,6 +23,7 @@
   --color-text-error: var(--color-palette-red);
 
   --color-link-content: var(--color-palette-blue);
+  --color-link-content-hover: var(--color-palette-blue-medium);
 
   --color-bg-default: #fff;
   --color-bg-grey: #f7f9fa;
@@ -54,5 +55,6 @@
 
   --cta-color: #fff;
   --cta-bg: var(--color-palette-blue);
+  --cta-bg-hover: var(--color-palette-blue-medium);
   --cta-radius: 3px;
 }

public/stylesheets/style.css

@@ -514,6 +514,16 @@ a {
   text-decoration: none;
 }
 
+p a, label a, .form-item a {
+  color: #5c9fef;
+  text-decoration: underline;
+}
+
+p a:hover, label a:hover, .form-item a:hover {
+  color: #3c80cf;
+  text-decoration: underline;
+}
+
 /* Based on FormHack v1.2.0 (formhack.io) */
 
 /* But with some custom modifications */
@@ -734,7 +744,7 @@ option:focus {
 
 button:focus,
 .cta:focus {
-  background-color: rgb(125, 178, 242);
+  background-color: #3c80cf;
   color: #fff;
 }
 
@@ -753,7 +763,7 @@ input[type="submit"]:focus,
 input[type="reset"]:focus,
 .cta:hover,
 .cta:focus {
-  background-color: rgb(125, 178, 242);
+  background-color: #3c80cf;
   color: #fff;
 }
 

views/settings.pug

@@ -25,7 +25,7 @@ block content
         if 'space' in errors
           each message in errors.space
             .form-item__error-message= message
-        .form-item__help-text Some help text we still need to define
+        .form-item__help-text The Space ID is a unique identifier for your space.
 
       .form-item
         label(for="cda") Delivery API key
@@ -33,15 +33,18 @@ block content
         if 'cda' in errors
           each message in errors.cda
             .form-item__error-message= message
-        .form-item__help-text Some help text we still need to define
-
+        .form-item__help-text
+          | This key is used to connect to our 
+          a(href='https://www.contentful.com/developers/docs/references/content-delivery-api/' target='_blank' rel='noopener') Delivery API.
       .form-item
         label(for="cpa") Preview API key
         input(type="text" name="cpa" value=settings.cpa)
         if 'cpa' in errors
           each message in errors.cpa
             .form-item__error-message= message
-        .form-item__help-text Some help text we still need to define
+        .form-item__help-text
+          | This key is used to connect to our 
+          a(href='https://www.contentful.com/developers/docs/references/content-preview-api/' target='_blank' rel='noopener') Preview API.
 
       .form-item
         input.cta(type="submit" value="Load settings")