First round styling

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -66,11 +66,11 @@ export default class PermalinkButton extends React.Component {
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div className={cn(`${name}-container`, styles.container)}>
-          
+
           <button
             ref={(ref) => this.linkButton = ref}
             onClick={this.toggle}
-            className={`${name}-button`}>
+            className={cn(`${name}-button`, styles.button)}>
               {t('permalink')}
             <Icon name="link" />
           </button>
@@ -89,7 +89,7 @@ export default class PermalinkButton extends React.Component {
             <Button
               onClick={this.copyPermalink}
               className={cn([
-                styles.button,
+                styles.copyButton,
                 `${name}-copy-button`, {
                   [styles.success]:copySuccessful,
                   [styles.failure]: copyFailure
@@ -98,7 +98,7 @@ export default class PermalinkButton extends React.Component {
               {copySuccessful && 'Copied'}
               {copyFailure && 'Not supported'}
             </Button>
-            
+
           </div>
         </div>
       </ClickOutside>

plugins/talk-plugin-permalink/client/components/styles.css

@@ -42,7 +42,13 @@
 }
 
 .button {
+  margin: 5px 0px 5px 10px;
+  cursor: pointer;
+}
+
+.copyButton {
   display: inline-block;
+  margin: 5px 10px 5px 0px;
   float: right;
   box-sizing: border-box;
   margin: 0;
@@ -52,18 +58,19 @@
   height: auto;
   padding: 2px;
   transition: background-color 0.4s ease;
+  cursor: pointer;
 }
 
-.button:hover{
+.copyButton:hover{
   color: black;
 }
 
-.button.success {
+.copyButton.success {
   background-color: #00897B;
   color: white;
 }
 
-.button.failure {
+.copyButton.failure {
   background-color: #FF5252;
   color: white;
 }
@@ -74,4 +81,4 @@
 
 .active {
   display: block;
-}
+}