[Replace][Desktop] Rose::Button (#2812)

* replace rose::button in ui/desktop

* replace .rose-button in ui/admin acceptance tests

* update @iconOnly to @isIconOnly

* add required @text arg for isIconOnly btns

* re-add title html element

* add _button.scss for custom styling

* add hover styling over close btn

* fix a bug when we hover in dark mode

* fix bug in main, hover white should trigger in dark mode

* remove &:not(:disabled) on btn close window class

* fix merge conflict

* fix styling

ui/admin/tests/acceptance/credential-store/credentials/update-test.js

@@ -143,7 +143,7 @@ module(
         );
       await visit(urls.usernamePasswordCredential);
       assert
-        .dom('.rose-layout-page-actions .rose-button-secondary')
+        .dom('.rose-layout-page-actions .hds-button-secondary')
         .doesNotExist();
     });
 
@@ -154,7 +154,7 @@ module(
         );
       await visit(urls.usernameKeyPairCredential);
       assert
-        .dom('.rose-layout-page-actions .rose-button-secondary')
+        .dom('.rose-layout-page-actions .hds-button-secondary')
         .doesNotExist();
     });
 
@@ -165,7 +165,7 @@ module(
         );
       await visit(urls.jsonCredential);
       assert
-        .dom('.rose-layout-page-actions .rose-button-secondary')
+        .dom('.rose-layout-page-actions .hds-button-secondary')
         .doesNotExist();
     });
 

ui/desktop/app/styles/app.scss

@@ -7,8 +7,8 @@
 @use 'rose/variables/media';
 @use 'rose/utilities/type';
 
-@use 'rose';
 @use 'notify';
+@use 'rose';
 
 .rose-layout-centered {
   > .rose-layout-page {
@@ -123,6 +123,20 @@
     margin: sizing.rems(xs);
   }
 
+  .button-window-close {
+    &:hover {
+      background: var(--failure);
+    }
+  }
+
+  .button-window-minimize,
+  .button-window-fullscreen {
+    &:hover {
+      background: var(--white);
+      color: var(--black);
+    }
+  }
+
   .logotype {
     display: none;
   }
@@ -482,4 +496,4 @@
       flex-basis: 100%;
     }
   }
-}
+}

ui/desktop/app/templates/application.hbs

@@ -21,26 +21,31 @@
 
       <header.utilities as |utilities|>
         {{#if this.showWindowActions}}
-          <Rose::Button
-            @iconOnly='x'
-            @style='warning'
+          <Hds::Button
+            {{on 'click' this.close}}
             class='button-window-close'
             title={{t 'actions.close'}}
-            {{on 'click' this.close}}
+            @text={{t 'actions.close'}}
+            @icon='x'
+            @isIconOnly={{true}}
           />
-          <Rose::Button
-            @iconOnly='square'
-            @style='secondary'
+          <Hds::Button
+            {{on 'click' this.toggleFullScreen}}
             class='button-window-fullscreen'
             title={{t 'actions.fullscreen'}}
-            {{on 'click' this.toggleFullScreen}}
+            @text={{t 'actions.fullscreen'}}
+            @icon='square'
+            @isIconOnly={{true}}
+            @color='secondary'
           />
-          <Rose::Button
-            @iconOnly='minus'
-            @style='secondary'
+          <Hds::Button
+            {{on 'click' this.minimize}}
             class='button-window-minimize'
             title={{t 'actions.minimize'}}
-            {{on 'click' this.minimize}}
+            @text={{t 'actions.minimize'}}
+            @icon='minus'
+            @isIconOnly={{true}}
+            @color='secondary'
           />
         {{/if}}