Simplify .InlineLinkButton

Use `classes` to extend, not obliterate, component styles, and obviate
the need to use complex mixins.

dev-server/ui-playground/components/ButtonPatterns.js

@@ -35,12 +35,15 @@ export default function ButtonPatterns() {
 
         <Library.Example title="Basic usage">
           <Library.Demo withSource>
-            <LinkButton className="InlineLinkButton">Log in</LinkButton>
+            <LinkButton classes="InlineLinkButton">Log in</LinkButton>
           </Library.Demo>
         </Library.Example>
-        <Library.Example title="Dark variant: Always has underline">
+        <Library.Example title="Dark variant, customized with underline">
           <Library.Demo withSource>
-            <LinkButton className="InlineLinkButton" variant="dark">
+            <LinkButton
+              classes="InlineLinkButton InlineLinkButton--underlined"
+              variant="dark"
+            >
               Log in
             </LinkButton>
           </Library.Demo>
@@ -58,19 +61,19 @@ export default function ButtonPatterns() {
           <Library.Demo withSource>
             <IconButton
               className="NonResponsiveIconButton"
-              icon="edit"
+              icon="copy"
               title="Edit"
               size="small"
             />
             <IconButton
               className="NonResponsiveIconButton"
-              icon="edit"
+              icon="copy"
               title="Edit"
               size="medium"
             />
             <IconButton
               className="NonResponsiveIconButton"
-              icon="edit"
+              icon="copy"
               title="Edit"
               size="large"
             />

src/sidebar/components/Excerpt.js

@@ -26,7 +26,7 @@ function InlineControls({ isCollapsed, setCollapsed, linkStyle = {} }) {
     <div className="Excerpt__inline-controls">
       <div className="Excerpt__toggle-container">
         <LinkButton
-          className="InlineLinkButton"
+          classes="InlineLinkButton InlineLinkButton--underlined"
           onClick={() => setCollapsed(!isCollapsed)}
           expanded={!isCollapsed}
           title="Toggle visibility of full excerpt text"

src/sidebar/components/LoggedOutMessage.js

@@ -32,7 +32,7 @@ function LoggedOutMessage({ onLogin }) {
         </a>{' '}
         or{' '}
         <LinkButton
-          className="InlineLinkButton"
+          classes="InlineLinkButton InlineLinkButton--underlined"
           onClick={onLogin}
           variant="dark"
         >

src/sidebar/components/TopBar.js

@@ -86,7 +86,7 @@ function TopBar({
       {auth.status === 'logged-out' && (
         <span className="TopBar__login-links u-font--large u-horizontal-rhythm">
           <LinkButton
-            className="InlineLinkButton"
+            classes="InlineLinkButton"
             onClick={onSignUp}
             style={loginLinkStyle}
             variant="primary"
@@ -95,7 +95,7 @@ function TopBar({
           </LinkButton>
           <div>/</div>
           <LinkButton
-            className="InlineLinkButton"
+            classes="InlineLinkButton"
             onClick={onLogin}
             style={loginLinkStyle}
             variant="primary"

src/styles/sidebar/buttons.scss

@@ -8,16 +8,11 @@
 // Similar to `.LinkButton`, with inline layout (so button can be used
 // within text)
 .InlineLinkButton {
-  @include buttons.LinkButton(
-    (
-      'inline': true,
-    )
-  );
-  // Custom: The dark variant is used for inline, anchor-like styling and needs
-  // to be underlined at all times to match <a> styling near it
-  &--dark {
-    text-decoration: underline;
-  }
+  display: inline;
+}
+
+.InlineLinkButton--underlined {
+  text-decoration: underline;
 }
 
 .PublishControlButton {