diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/click-to-copy/_click-to-copy.scss
index f408978a..16b6996f 100644
--- a/client/scss/click-to-copy/_click-to-copy.scss
+++ b/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;
+ }
}
}
diff --git a/client/scss/share-buttons/_share-buttons.scss b/client/scss/share-buttons/_share-buttons.scss
index 8c429596..26be33a1 100644
--- a/client/scss/share-buttons/_share-buttons.scss
+++ b/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;
diff --git a/client/scss/variables/_variables.scss b/client/scss/variables/_variables.scss
index f7ad0ce9..5f19ce0e 100644
--- a/client/scss/variables/_variables.scss
+++ b/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;
diff --git a/client/scss/vertical-split/_vertical-split.scss b/client/scss/vertical-split/_vertical-split.scss
index 1271c83b..ebccf388 100644
--- a/client/scss/vertical-split/_vertical-split.scss
+++ b/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;
diff --git a/client/src/components/ClickToCopy/index.jsx b/client/src/components/ClickToCopy/index.jsx
index 832ce973..8bc4d3cb 100644
--- a/client/src/components/ClickToCopy/index.jsx
+++ b/client/src/components/ClickToCopy/index.jsx
@@ -32,7 +32,9 @@ class ClickToCopy extends React.Component {
readOnly
spellCheck='false'
/>
-