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' /> - +
+ +
); }