From 4bc6f3599e6edd621e81f16548a19d95a630593c Mon Sep 17 00:00:00 2001
From: maxieprotocol <max@bigchaindb.com>
Date: Wed, 13 May 2020 14:36:07 +0200
Subject: [PATCH] Modify primary button & search styles

---
 src/components/atoms/Button.module.css        | 63 ++++++++++++-------
 src/components/molecules/SearchBar.module.css | 30 +++++----
 src/styles/_variables.css                     |  4 +-
 3 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/src/components/atoms/Button.module.css b/src/components/atoms/Button.module.css
index 1deb92531..ee50599c3 100644
--- a/src/components/atoms/Button.module.css
+++ b/src/components/atoms/Button.module.css
@@ -1,33 +1,47 @@
 .button {
-  border: 2px solid var(--color-secondary);
+  border: 0;
   cursor: pointer;
   outline: 0;
   margin: 0;
   display: inline-block;
   width: fit-content;
-  padding: calc(var(--spacer) / 5) var(--spacer);
+  padding: calc(var(--spacer) / 3) var(--spacer);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
   border-radius: var(--border-radius);
   transition: 0.2s ease-out;
-  color: var(--brand-grey-lighter);
-  background: var(--color-secondary);
+  color: var(--brand-white);
+  background: var(--brand-grey-light);
+  box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.1);
   user-select: none;
+  margin-left: calc(var(--spacer) / 4);
+  margin-right: calc(var(--spacer) / 4);
+}
+
+.button:first-child {
+  margin-left: 0;
+}
+
+.button:last-child {
+  margin-right: 0;
 }
 
 .button:hover,
 .button:focus {
-  text-decoration: none;
   color: var(--brand-white);
-  transform: translate3d(0, -1px, 0);
+  background: var(--brand-grey-light);
+  text-decoration: none;
+  transform: translate3d(0, -0.05rem, 0);
+  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.1);
 }
 
 .button:active {
-  color: var(--brand-white);
-  background: var(--brand-grey-dark);
-  border-color: var(--brand-grey-dark);
+  background: var(--brand-grey-light);
   transition: none;
+  transform: none;
+  box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.1);
 }
 
 .button:disabled {
@@ -36,32 +50,35 @@
   opacity: 0.5;
 }
 
-.primary {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
+.primary,
 .primary:hover,
-.primary:focus {
-}
-
+.primary:focus,
 .primary:active {
+  background: var(--brand-gradient);
 }
 
 .link {
   border: 0;
   outline: 0;
   display: inline-block;
-  width: fit-content;
   background: 0;
   padding: 0;
-  color: var(--color-primary);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-base);
-  font-family: inherit;
+  color: var(--brand-pink);
   box-shadow: none;
   cursor: pointer;
 }
 .link:hover {
-  color: var(--color-primary);
+  background: none;
+  color: var(--brand-pink);
+  box-shadow: none;
+}
+
+/* Size Modifiers */
+.small {
+  font-size: var(--font-size-small);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
+}
+
+.text.small {
+  padding: 0;
 }
diff --git a/src/components/molecules/SearchBar.module.css b/src/components/molecules/SearchBar.module.css
index 723114876..26cf4907e 100644
--- a/src/components/molecules/SearchBar.module.css
+++ b/src/components/molecules/SearchBar.module.css
@@ -13,32 +13,36 @@
   margin-top: -1px;
   width: 100%;
   border-width: 1px;
-  background-color: var(--brand-pink);
-  border-color: var(--brand-pink);
-  color: var(--brand-grey-lighter);
   text-transform: uppercase;
-}
-
-.inputGroup button:hover,
-.inputGroup button:focus,
-.inputGroup .input:focus + button {
-  color: var(--brand-white);
-  background-color: var(--brand-pink);
+  color: var(--brand-grey-lighter);
+  background: var(--brand-gradient);
+  box-shadow: none;
 }
 
 .inputGroup button:hover,
 .inputGroup button:focus,
 .inputGroup .input:focus + button:hover,
 .inputGroup .input:focus + button:focus {
-  background-color: var(--brand-pink);
-  border-color: var(--brand-pink);
+  background: var(--brand-gradient);
   transform: none;
+  box-shadow: none;
+}
+
+.inputGroup .input:focus + button {
+  color: var(--brand-white);
+}
+
+/* .inputGroup button:hover,
+.inputGroup button:focus,
+.inputGroup .input:focus + button {
+  color: var(--brand-white);
+  background-color: var(--brand-pink);
 }
 
 .inputGroup .input:focus + button {
   border-color: var(--brand-pink);
   background-color: var(--brand-pink);
-}
+} */
 
 @media screen and (min-width: 30rem) {
   .inputGroup {
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 31daafe0e..6237a27df 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -11,6 +11,8 @@
   --brand-violet: #e000cf;
   --brand-blue: #11597b;
 
+  --brand-gradient: linear-gradient(to right bottom, #7b1173, #ff4092);
+
   --green: #5fb359;
   --red: #d80606;
   --orange: #b35f36;
@@ -53,7 +55,7 @@
   --break-point--huge: 1400px;
 
   --spacer: 2rem;
-  --border-radius: 2px;
+  --border-radius: 0.2rem;
 
   --layout-max-width: 85rem;