feat: 3box branding, button states

3box · May 22, 2020 · ddf2048 · ddf2048
1 parent 0f0a0a0
commit ddf2048
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 38 deletions.
diff --git a/iframe/.DS_Store b/iframe/.DS_Store
diff --git a/iframe/assets/logo.svg b/iframe/assets/logo.svg
diff --git a/iframe/css/style.scss b/iframe/css/style.scss
@@ -46,16 +46,30 @@ button {
   align-items: center;
   border: none;
   box-shadow: 2px 3px 8px 0px #00000025;
-}
 
-.button:active:focus {
-  outline: none !important;
-  box-shadow: none;
+  &:active:focus {
+    outline: none !important;
+    border: none;
+    box-shadow: inset 1px 1px 4px #0000001a;
+  }
+
+  &:active {
+    outline: none !important;
+    border: none;
+    box-shadow: 2px 3px 8px 0px #00000025;
+  }
+
+  &:focus {
+    outline: none !important;
+    border: none;
+    box-shadow: 2px 3px 8px 0px #00000025;
+  }
 }
 
-.button:focus {
-  outline: none !important;
-  box-shadow: none;
+.primaryButton {
+  color: $threeBoxBlue;
+  background-color: white;
+  border: none;
 }
 
 button {
@@ -483,6 +497,14 @@ button {
   padding: 25px 30px 20px 30px;
   color: #817972a6;
   text-align: center;
+
+  a {
+    color: #817972a6;
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
 }
 
 .buttonFooter {
@@ -513,12 +535,6 @@ button {
   margin-top: 25px;
 }
 
-.primaryButton {
-  color: $threeIdOrange;
-  background-color: white;
-  border: none;
-}
-
 .secondaryButton {
   background-color: white;
   border: none;

diff --git a/iframe/css/variables.scss b/iframe/css/variables.scss
@@ -3,12 +3,14 @@ $sideBarWidth: 200px;
 
 $inputPadding: 12px 14px;
 
-// // Brand Colors
+// Brand Colors
 $threeBoxBlue: #1168df;
 $threeBoxBlueHover: #0950b0;
+$textColor: #727581;
 
-$threeIdOrange: #F76837;
-$textColor: #817972;
+// ThreeId Brand Colors
+// $threeIdOrange: #F76837;
+// $textColor: #817972;
 
 $symbolGrey: #D8D8D8;
 

diff --git a/iframe/html/template.js b/iframe/html/template.js
@@ -42,7 +42,11 @@ const template = (data,isMobile) => `
         </div>
       </div>
       <div class='${style.footerText}'>
-        <p> This site uses 3ID to give you more control of your data. <span> What is this? </span></p>
+        <p> This site uses 3Box and 3ID to give you control of your data.
+          <a href="https://3box.io" rel="noopener noreferrer" target="_blank">
+            What is this?
+          </a>
+        </p>
       </div>
     </div>
   </div>