Merge pull request #10989 from Turbo87/global-load-more

Simplify `.load-more` CSS classes

Author: Turbo87

app/styles/dashboard.module.css

@@ -115,22 +115,7 @@
     text-align: right;
 }
 
-:global(.load-more) {
+.load-more {
     padding: var(--space-s);
     border-top: 1px solid light-dark(hsla(51, 90%, 42%, .25), #232321);
-
-    button {
-        display: block;
-        text-align: center;
-        width: 100%;
-        padding: var(--space-2xs);
-        outline: 0;
-        border: 0;
-        background-color: light-dark(#dbd9cf, #202023);
-        color: light-dark(#525252, #f9f7ec);
-
-        &:hover, &:focus {
-            background-color: light-dark(#c5c2b2, #26262b);
-        }
-    }
 }

app/styles/shared/buttons.module.css

@@ -84,3 +84,18 @@
 :global(.button--small) {
     padding: var(--space-2xs) var(--space-s);
 }
+
+:global(.load-more-button) {
+    display: block;
+    text-align: center;
+    width: 100%;
+    padding: var(--space-2xs);
+    outline: 0;
+    border: 0;
+    background-color: light-dark(#dbd9cf, #202023);
+    color: light-dark(#525252, #f9f7ec);
+
+    &:hover, &:focus {
+        background-color: light-dark(#c5c2b2, #26262b);
+    }
+}

app/templates/crate/versions.hbs

@@ -27,9 +27,10 @@
   {{/each}}
 </ul>
 {{#if (or this.loadMoreTask.isRunning this.next_page)}}
-  <div local-class="load-more" class="load-more">
+  <div local-class="load-more">
     <button
       type="button"
+      class="load-more-button"
       data-test-id={{if this.loadMoreTask.isRunning "loading" "load-more"}}
       disabled={{this.loadMoreTask.isRunning}}
       {{on "click" (perform this.loadMoreTask)}}

app/templates/dashboard.hbs

@@ -60,8 +60,8 @@
       </ul>
 
       {{#if this.hasMore}}
-        <div class="load-more">
-          <button type="button" disabled={{this.loadMoreTask.isRunning}} {{on "click" (perform this.loadMoreTask)}}>
+        <div local-class="load-more">
+          <button type="button" class="load-more-button" disabled={{this.loadMoreTask.isRunning}} {{on "click" (perform this.loadMoreTask)}}>
             Load More
             {{#if this.loadMoreTask.isRunning}}
               <LoadingSpinner />

ember-cli-build.js

@@ -59,8 +59,6 @@ module.exports = function (defaults) {
         'crates-io/styles/shared/sort-by',
         'crates-io/styles/shared/typography',
         'crates-io/styles/application',
-        // for the `.load-more` class
-        'crates-io/styles/dashboard',
         // for the `.scopes-list` class
         'crates-io/styles/settings/tokens/new',
         // for the `.box-link` class