From d037ccca296d0a8dc8cdc0ff0d685848148c3737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= <benedikt@contentful.com>
Date: Thu, 5 Oct 2017 13:32:03 +0200
Subject: [PATCH] add help texts to settings and style content links properly

---
 assets/stylesheets/base/formhack.css   |  2 +-
 assets/stylesheets/base/typography.css | 12 ++++++++++++
 assets/stylesheets/variables.css       |  2 ++
 public/stylesheets/style.css           | 14 ++++++++++++--
 views/settings.pug                     | 11 +++++++----
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/assets/stylesheets/base/formhack.css b/assets/stylesheets/base/formhack.css
index 9b6acac..a9b37e2 100644
--- a/assets/stylesheets/base/formhack.css
+++ b/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 */
diff --git a/assets/stylesheets/base/typography.css b/assets/stylesheets/base/typography.css
index 5625aef..ecb6ff6 100644
--- a/assets/stylesheets/base/typography.css
+++ b/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;
+      }
+    }
+}
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index b0098b8..27025f9 100644
--- a/assets/stylesheets/variables.css
+++ b/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;
 }
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 13d6a11..2d67830 100644
--- a/public/stylesheets/style.css
+++ b/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;
 }
 
diff --git a/views/settings.pug b/views/settings.pug
index ef5c8a1..84b158d 100644
--- a/views/settings.pug
+++ b/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&nbsp;
+          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&nbsp;
+          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")