From 518c8f486e8cfce0ae1965ba0742d38f738d4c85 Mon Sep 17 00:00:00 2001
From: Miguel Cabrerizo <30386061+doncicuto@users.noreply.github.com>
Date: Wed, 14 Feb 2024 16:45:41 +0100
Subject: [PATCH] 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
---
 .../keyboard-shortcuts.component.html         | 90 ++++++++++---------
 .../keyboard-shortcuts.component.scss         | 20 +++--
 .../e2e/organization/organizations.cy.ts      |  2 +-
 3 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
index c3a755e96d..11a6b43314 100644
--- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
+++ b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
@@ -1,49 +1,51 @@
-<h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1>
-<div mat-dialog-content>
-  <div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group">
-    <h2>{{ 'KEYBOARDSHORTCUTS.UNDERORGCONTEXT' | translate }}</h2>
-    <div class="keyboard-shortcuts-wrapper">
-      <div class="keyboard-shortcut" *ngFor="let shortcut of orgShortcuts">
-        <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
-        <span class="fill-space"></span>
-        <template
-          *ngFor="let key of shortcut.keyboardKeys; index as i"
-          [ngTemplateOutlet]="actionkey"
-          [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
-        ></template>
+<div class="container">
+  <h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1>
+  <div mat-dialog-content>
+    <div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group">
+      <h2>{{ 'KEYBOARDSHORTCUTS.UNDERORGCONTEXT' | translate }}</h2>
+      <div class="keyboard-shortcuts-wrapper">
+        <div class="keyboard-shortcut" *ngFor="let shortcut of orgShortcuts">
+          <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
+          <span class="fill-space"></span>
+          <template
+            *ngFor="let key of shortcut.keyboardKeys; index as i"
+            [ngTemplateOutlet]="actionkey"
+            [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
+          ></template>
+        </div>
+      </div>
+    </div>
+    <div class="keyboard-shortcuts-group">
+      <h2>{{ 'KEYBOARDSHORTCUTS.SIDEWIDE' | translate }}</h2>
+      <div class="keyboard-shortcuts-wrapper">
+        <ng-container *ngFor="let shortcut of shortcuts">
+          <ng-template cnslHasRole [hasRole]="shortcut.permissions">
+            <div class="keyboard-shortcut">
+              <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
+              <span class="fill-space"></span>
+              <template
+                *ngFor="let key of shortcut.keyboardKeys; index as i"
+                [ngTemplateOutlet]="actionkey"
+                [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
+              ></template>
+            </div>
+          </ng-template>
+        </ng-container>
       </div>
     </div>
   </div>
-  <div class="keyboard-shortcuts-group">
-    <h2>{{ 'KEYBOARDSHORTCUTS.SIDEWIDE' | translate }}</h2>
-    <div class="keyboard-shortcuts-wrapper">
-      <ng-container *ngFor="let shortcut of shortcuts">
-        <ng-template cnslHasRole [hasRole]="shortcut.permissions">
-          <div class="keyboard-shortcut">
-            <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
-            <span class="fill-space"></span>
-            <template
-              *ngFor="let key of shortcut.keyboardKeys; index as i"
-              [ngTemplateOutlet]="actionkey"
-              [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
-            ></template>
-          </div>
-        </ng-template>
-      </ng-container>
-    </div>
+  <div mat-dialog-actions class="action">
+    <button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
+      {{ 'ACTIONS.CLOSE' | translate }}
+    </button>
+    <span class="fill-space"></span>
   </div>
-</div>
-<div mat-dialog-actions class="action">
-  <button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
-    {{ 'ACTIONS.CLOSE' | translate }}
-  </button>
-  <span class="fill-space"></span>
-</div>
 
-<ng-template #actionkey let-key="key" let-last="last">
-  <div class="keyboard-shortcuts-action-key">
-    <div class="keyboard-shortcuts-key-overlay"></div>
-    <span class="keyboard-shortcuts-span">{{ key }}</span>
-  </div>
-  <!-- <span *ngIf="!last" class="keyboard-shortcuts-plus cnsl-secondary-text">+</span> -->
-</ng-template>
+  <ng-template #actionkey let-key="key" let-last="last">
+    <div class="keyboard-shortcuts-action-key">
+      <div class="keyboard-shortcuts-key-overlay"></div>
+      <span class="keyboard-shortcuts-span">{{ key }}</span>
+    </div>
+    <!-- <span *ngIf="!last" class="keyboard-shortcuts-plus cnsl-secondary-text">+</span> -->
+  </ng-template>
+</div>
diff --git a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
index 3d901287dd..48d830767c 100644
--- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
+++ b/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;
+  .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;
+}
diff --git a/e2e/cypress/e2e/organization/organizations.cy.ts b/e2e/cypress/e2e/organization/organizations.cy.ts
index 6cf1185fe9..b0e1f515e9 100644
--- a/e2e/cypress/e2e/organization/organizations.cy.ts
+++ b/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();