Merge pull request mozilla#1355 from lmorchard/1336-refix-nits-on-share

fix nits on share page
imromec · Sep 15, 2016 · 622e528 · 622e528
2 parents 1b79e3b + e0f5d39
commit 622e528
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/frontend/src/app/components/SharePage.js b/frontend/src/app/components/SharePage.js
@@ -24,9 +24,11 @@ export default function SharePage() {
               <li className="share-email"><a href="mailto:?body=https%3A//testpilot.firefox.com" data-l10n-id="shareEmail">E-mail</a></li>
             </ul>
             <p data-l10n-id="shareSecondary">or just copy and paste this link...</p>
-            <fieldset className="share-url">
-              <input type="text" readOnly value="https://testpilot.firefox.com" />
-              <button data-l10n-id="shareCopy" data-clipboard-target=".share-url input">Copy</button>
+            <fieldset className="share-url-wrapper">
+              <div className="share-url">
+                <input type="text" readOnly value="https://testpilot.firefox.com" />
+                <button data-l10n-id="shareCopy" data-clipboard-target=".share-url input">Copy</button>
+              </div>
             </fieldset>
           </div>
         </div>

diff --git a/frontend/src/styles/modules/_modals.scss b/frontend/src/styles/modules/_modals.scss
@@ -35,7 +35,6 @@
 }
 
 #share {
-  margin-top: 115px;
 
   .modal-content {
     padding: 20px 20px 30px;
@@ -335,28 +334,46 @@
   }
 }
 
+.share-url-wrapper {
+  border: 0;
+  margin: $grid-unit 0 0;
+  padding: 0;
+}
+
 .share-url {
-  border-color: $transparent-black-8;
+  @include flex-container(row, space-between, stretch);
+  border: 1px solid $transparent-black-8;
   border-radius: $small-border-radius;
-  display: flex;
-  justify-content: space-between;
-  margin-top: $grid-unit;
-  padding: 1px;
+  padding: 0;
 
   input {
+    background: transparent;
     border-width: 0;
+    flex: 0 0 80%;
     font-size: $font-unit * 1.6;
-    line-height: 1;
-    padding: $grid-unit * .5;
-    width: 85%;
+    line-height: $font-unit * 1.6;
+    padding: $grid-unit * .6;
   }
 
   button {
     background: transparent;
+    border-radius: 0 $small-border-radius $small-border-radius 0;
     border-width: 0;
     color: $default-light;
+    flex: 0 0 20%;
+    line-height: $font-unit * 1.6;
+    padding: $grid-unit * .7 $grid-unit * .8;
     text-transform: lowercase;
-    width: 15%;
+    transition: background 150ms;
+
+    &:hover,
+    &:focus {
+      background-color: $transparent-black-1;
+    }
+
+    &:active {
+      animation: pop 50ms;
+    }
   }
 }