Simplify PublishControlButton styling

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

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

@@ -20,7 +20,7 @@ export default function ButtonPatterns() {
 
         <Library.Example title="Basic usage">
           <Library.Demo withSource>
-            <LabeledButton className="PublishControlButton" variant="primary">
+            <LabeledButton classes="PublishControlButton" variant="primary">
               Publish to My Group
             </LabeledButton>
           </Library.Demo>

src/sidebar/components/Annotation/AnnotationPublishControl.js

@@ -81,7 +81,8 @@ function AnnotationPublishControl({
     <div className="AnnotationPublishControl">
       <div className="annotation-publish-button">
         <LabeledButton
-          className="PublishControlButton"
+          classes="PublishControlButton"
+          data-testid="publish-control-button"
           style={buttonStyle}
           onClick={onSave}
           disabled={isDisabled}

src/sidebar/components/Annotation/test/AnnotationPublishControl-test.js

@@ -78,7 +78,7 @@ describe('AnnotationPublishControl', () => {
   });
 
   const getPublishButton = wrapper =>
-    wrapper.find('LabeledButton.PublishControlButton');
+    wrapper.find('LabeledButton[data-testid="publish-control-button"]');
 
   describe('theming', () => {
     it('should apply theme styles', () => {

src/styles/sidebar/buttons.scss

@@ -15,14 +15,10 @@
   text-decoration: underline;
 }
 
+// Disable border-radius on right side so it can align with a button next to it
 .PublishControlButton {
-  @include buttons.LabeledButton {
-    // Border-radius turned off
-    &--primary {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 // This button style has asymmetrical padding. Hold it here to see if