Tanned yank button depending on background

Author: thiagoarrais

app/components/yank-button.hbs

@@ -1,7 +1,7 @@
 {{#if @version.yanked}}
   <button
     type="button"
-    local-class="button"
+    local-class="{{this.localClass}}"
     ...attributes
     data-test-version-unyank-button={{@version.num}}
     disabled={{@version.unyankTask.isRunning}}
@@ -16,7 +16,7 @@
 {{else}}
   <button
     type="button"
-    local-class="button"
+    local-class="{{this.localClass}}"
     ...attributes
     data-test-version-yank-button={{@version.num}}
     disabled={{@version.yankTask.isRunning}}

app/components/yank-button.js

@@ -1,5 +1,15 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  tagName: '',
-});
+export default class YankButton extends Component {
+  get tagName() {
+    return '';
+  }
+
+  get localClass() {
+    if (this.args.tan) {
+      return 'tan-button';
+    }
+
+    return 'yellow-button';
+  }
+}

app/components/yank-button.module.css

@@ -1,3 +1,7 @@
-.button {
+.yellow-button {
     composes: yellow-button small from '../styles/shared/buttons.module.css';
+}
+
+.tan-button {
+    composes: tan-button small from '../styles/shared/buttons.module.css';
 }

app/templates/crate/version.hbs

@@ -7,7 +7,7 @@
       <h1 data-test-crate-name>{{ this.crate.name }}</h1>
       <h2 data-test-crate-version>{{ this.currentVersion.num }}</h2>
       {{#if this.isOwner }}
-        <YankButton @version={{this.currentVersion}} />
+        <YankButton @version={{this.currentVersion}} @tan={{true}} />
       {{/if}}
     </div>