Adjusts yank button positioning and sizing

Author: thiagoarrais

app/components/yank-button.hbs

@@ -2,6 +2,7 @@
   <button
     type="button"
     local-class="button"
+    ...attributes
     disabled={{@version.unyankTask.isRunning}}
     {{on "click" (perform @version.unyankTask)}}
   >
@@ -15,6 +16,7 @@
   <button
     type="button"
     local-class="button"
+    ...attributes
     disabled={{@version.yankTask.isRunning}}
     {{on "click" (perform @version.yankTask)}}
   >

app/components/yank-button.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-    tagName: '',
+  tagName: '',
 });

app/components/yank-button.module.css

@@ -1,3 +1,5 @@
 .button {
-    composes: yellow-button small from '../styles/shared/buttons.module.css';
-}
+    composes: yellow-button from '../styles/shared/buttons.module.css';
+    padding: 6px 12px;
+    border-radius: 18px;
+}

app/styles/crate/version.module.css

@@ -273,3 +273,7 @@ div.header {
 .yanked {
     composes: yanked from '../shared/typography.module.css';
 }
+
+.version {
+    padding: 4px 0;
+}

app/styles/crate/versions.module.css

@@ -37,6 +37,7 @@
 .arrow {
     display: inline-block;
     float: right;
+    margin-left: 8px;
 
     svg {
         background: #EEECDD;

app/templates/crate/version.hbs

@@ -163,7 +163,7 @@
           <h3>Versions</h3>
           <ul>
             {{#each this.smallSortedVersions as |version|}}
-              <li>
+              <li local-class="version">
                 <LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
                   {{ version.num }}
                 </LinkTo>

app/templates/crate/versions.hbs

@@ -13,17 +13,18 @@
         <LinkTo @route="crate.version" @model={{version.num}}>{{ version.num }}</LinkTo>
 
         <span local-class="date">{{moment-format version.created_at 'LL'}}</span>
+        {{#if version.yanked}}
+          <span local-class='yanked'>yanked</span>
+        {{/if}}
+      </div>
+      <div>
         {{#if this.isOwner}}
           <YankButton @version={{version}} />
-        {{else}}
-          {{#if version.yanked}}
-            <span local-class='yanked'>yanked</span>
-          {{/if}}
         {{/if}}
+        <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
+          {{svg-jar "right-arrow"}}
+        </LinkTo>
       </div>
-      <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
-        {{svg-jar "right-arrow"}}
-      </LinkTo>
     </div>
   {{/each}}
 </div>