Style clean up for click to copy

client/scss/click-to-copy/_click-to-copy.scss

@@ -2,25 +2,37 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
   cursor: pointer;
+  border: 1px solid $grey-alt;
+  border-radius: 6px;
+  max-width: 280px;
   .click-to-copy {
     border: none;
-    padding: 0.5em;
+    padding: 0.36em 0.5em;
     margin: 0;
     color: black;
-    background-color: white;
+    background-color: transparent;
     width: calc(100% - 1em - 2px);
     font-size: 14px;
     color: #2E2F31;
     letter-spacing: -0.6px;
     line-height: 20px;
-    max-width: 200px;
+    max-width: 236px;
     letter-spacing: 0;
     font-family: monospace;
+    border-right: 1px solid #9095a54d;
   }
-  svg {
-    stroke: $brand-color;
-
+  .icon-wrap {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    svg {
+      stroke: $brand-color;
+      width: 12px;
+      height: 12px;
+    }
   }
 }
 

client/scss/share-buttons/_share-buttons.scss

@@ -1,7 +1,7 @@
 .share-buttons {
     display: flex;
     align-items: center;
-    
+    margin: 0 -7px;
     a {
         display: block;
         margin: 0 7px;

client/scss/variables/_variables.scss

@@ -8,6 +8,7 @@ $failure-color: red;
 // $brand-color: #ff725d;
 $brand-color: #1944F9;
 $grey: #9095A5;
+$grey-alt: #9095a54d;
 
 $primary-padding: 3em;
 $secondary-padding: 2em;

client/scss/vertical-split/_vertical-split.scss

@@ -10,6 +10,13 @@
   display: none;
 }
 
+.collapse-content {
+  padding-bottom: 80px;
+  @media (max-width: $break-point-medium) {
+    padding-bottom: 60px;
+  }
+}
+
 .collapse-button {
   outline: none;
   background: none;

client/src/components/ClickToCopy/index.jsx

@@ -32,7 +32,9 @@ class ClickToCopy extends React.Component {
           readOnly
           spellCheck='false'
         />
-        <Icon.Copy />
+        <div className='icon-wrap'>
+          <Icon.Copy />
+        </div>
       </div>
     );
   }