From 77f21a369becafd8857c22159db83b7bbe75a215 Mon Sep 17 00:00:00 2001
From: Piper <piperchester@users.noreply.github.com>
Date: Mon, 19 Oct 2020 23:15:19 -0700
Subject: [PATCH] fix: color of selected country in footer (#92)

* docs: add install instructions

* refactor: drop period from selected country

* fix: color on selected country
---
 CONTRIBUTING.md           | 7 ++++++-
 src/components/Footer.jsx | 1 -
 src/styles/global.scss    | 7 +++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index af28719..8e12828 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,11 @@
 # Contributing Guidelines
 
-This is a GatsbyJS site, on top of Netlify CMS for now, and powered by YAML files.
+This is a GatsbyJS site, on top of Netlify CMS for now, and powered by YAML files. It's easy to start hacking. All you need is to
+
+1. Fork the repo
+1. `yarn` to fetch dependencies
+1. `yarn start` to spin up dev server on localhost:8000
+1. Update, commit, push to your fork. And open a pull request
 
 Swing by `src/data/links/` to see all the links, and if you'd like to add a new one just copy and paste one of the older ones and update it.
 
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index cad1496..3450ebf 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -67,7 +67,6 @@ const Footer = () => {
                     {Countries.fromAlpha2Code(country.code).emoji}{' '}
                     {country.name}
                   </span>{' '}
-                  <span>&middot;</span>
                 </>
               ) : null}
               <Button href="/select-your-country" className="link text-white">
diff --git a/src/styles/global.scss b/src/styles/global.scss
index ed925a3..b01410a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -17,6 +17,13 @@ blockquote p {
   display: inline;
 }
 
+// Ensure the selected country is
+// readable on the #333 footer.
+.change-country .current {
+  color: white;
+  margin-bottom: 20px;
+}
+
 /* Select Your Country */
 .select-your-country {
   max-width: 768px;