Refactor node and draft reg cards for better CSS (#1353)

Co-authored-by: Yuhuai Liu <yuhuai@cos.io>

Author: futa-ikeda

lib/osf-components/addon/components/draft-registration-card/styles.scss

@@ -38,20 +38,16 @@
     }
 }
 
-// stylelint-disable selector-no-qualifying-type
-a.DraftRegistrationCard__review {
-    margin-right: 10px;
+.DraftRegistrationCard__review {
+    composes: Button from '../button/styles.scss';
+    composes: SecondaryButton from '../button/styles.scss';
+    composes: MediumButton from '../button/styles.scss';
 
     &:hover {
-        text-decoration: none;
+        text-decoration: none !important; /* override OsfLink hover style */
     }
 }
 
-// stylelint-enable selector-no-qualifying-type
-.DraftRegistrationCard__edit {
-    vertical-align: bottom;
-}
-
 .DraftRegistrationCard__delete {
     button {
         padding: 6px 12px;

lib/osf-components/addon/components/draft-registration-card/template.hbs

@@ -78,20 +78,17 @@
                         @route='registries.drafts.draft.review'
                         @models={{array this.draftRegistration.id}}
                     >
-                        <Button>
-                            {{t 'osf-components.draft-registration-card.review'}}
-                        </Button>
+                        {{t 'osf-components.draft-registration-card.review'}}
                     </OsfLink>
                     {{#unless this.draftRegistration.currentUserIsReadOnly}}
                         <OsfLink
                             data-test-draft-card-edit
+                            local-class='DraftRegistrationCard__review'
                             data-analytics-name='Edit'
                             @route='registries.drafts.draft'
                             @models={{array this.draftRegistration.id}}
                         >
-                            <Button local-class='DraftRegistrationCard__edit'>
-                                {{t 'general.edit'}}
-                            </Button>
+                            {{t 'general.edit'}}
                         </OsfLink>
                     {{/unless}}
                 </div>

lib/osf-components/addon/components/node-card/styles.scss

@@ -87,3 +87,13 @@
     overflow: hidden;
     white-space: nowrap;
 }
+
+.NodeCard__link {
+    composes: Button from '../button/styles.scss';
+    composes: SecondaryButton from '../button/styles.scss';
+    composes: MediumButton from '../button/styles.scss';
+
+    &:hover {
+        text-decoration: none !important; /* override OsfLink hover style */
+    }
+}

lib/osf-components/addon/components/node-card/template.hbs

@@ -172,30 +172,24 @@
             </dl>
             <div local-class='MyRegistrationsButtons'>
                 <OsfLink
+                    local-class='NodeCard__link'
                     data-analytics-name='View registration'
                     data-test-view-button='{{@node.id}}'
                     @route='resolve-guid'
                     @models={{array @node.id}}
                 >
-                    <Button
-                        local-class='RegistrationCard_view'
-                    >
-                        {{t 'node_card.view_button'}}
-                    </Button>
+                    {{t 'node_card.view_button'}}
                 </OsfLink>
                 {{#if this.latestSchemaResponse}}
                     {{#if this.shouldShowViewChangesButton}}
                         <OsfLink
+                            local-class='NodeCard__link'
                             data-analytics-name='View changes'
                             data-test-view-changes-button={{@node.id}}
                             @route='registries.edit-revision.review'
                             @models={{array this.latestSchemaResponse.id}}
                         >
-                            <Button
-                                {{!-- local-class='RegistrationCard_update' --}}
-                            >
-                                {{t 'node_card.view_changes_button'}}
-                            </Button>
+                            {{t 'node_card.view_changes_button'}}
                         </OsfLink>
                     {{/if}}
                 {{/if}}