fix(console): broken layout and colors in keyboard shortcuts modal (#7276)

* fix(console): broken styles in keyboards shortcut modal

* fix(e2e): increase timeout for org delete test

* fix: ugly space in button between top border and background color when hovered

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html

@@ -1,3 +1,4 @@
+<div class="container">
   <h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1>
   <div mat-dialog-content>
     <div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group">
@@ -47,3 +48,4 @@
     </div>
     <!-- <span *ngIf="!last" class="keyboard-shortcuts-plus cnsl-secondary-text">+</span> -->
   </ng-template>
+</div>

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss

@@ -21,6 +21,7 @@
     h2 {
       font-size: 1rem;
       margin: 0 0 1rem 0;
+      color: $text-color;
     }
 
     .keyboard-shortcuts-wrapper {
@@ -85,21 +86,30 @@
   .keyboard-shortcuts-plus {
     font-size: 14px;
   }
-}
 
   .title {
     font-size: 1.2rem;
     margin-top: 0;
+    color: $text-color;
+  }
 }
 
 .action {
   display: flex;
-
+  margin-top: 1rem;
   button {
     border-radius: 0.5rem;
+    .mat-mdc-button-persistent-ripple {
+      border-style: none !important;
+    }
   }
 
   .fill-space {
     flex: 1;
   }
 }
+
+.container {
+  padding: 1.5rem;
+  border-radius: 6px !important;
+}

e2e/cypress/e2e/organization/organizations.cy.ts

@@ -27,7 +27,7 @@ describe('organizations', () => {
       cy.visit(orgsPath);
       cy.contains('tr', newOrg).click();
       cy.get('[data-e2e="actions"]').click();
-      cy.get('[data-e2e="delete"]', { timeout: 1000 }).should('be.visible').click();
+      cy.get('[data-e2e="delete"]', { timeout: 3000 }).should('be.visible').click();
       cy.get('[data-e2e="confirm-dialog-input"]').focus().clear().type(newOrg);
       cy.get('[data-e2e="confirm-dialog-button"]').click();
       cy.shouldConfirmSuccess();