From c4e60bee2a60c1c23613b5588b8602c0e07ea940 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian_thierry@ext.connect-tech.sncf>
Date: Mon, 21 Oct 2024 16:37:58 +0200
Subject: [PATCH] Add icon button style.

---
 .../components/header/header.component.html   |  5 +-
 .../components/header/header.component.scss   | 62 ++-----------------
 .../code-block-dialog.component.html          |  7 ++-
 .../code-block-dialog.component.scss          | 14 -----
 .../code-block-dialog.component.ts            |  2 +
 .../picture-selection-dialog.component.html   |  7 ++-
 .../picture-selection-dialog.component.scss   | 14 -----
 .../publication-edition.component.html        | 14 ++---
 .../side-menu/side-menu.component.html        |  1 +
 .../side-menu/side-menu.component.scss        | 18 ------
 .../submit-button.component.html              |  2 +-
 .../src/app/pages/login/login.component.html  |  2 +-
 .../app/pages/signin/signin.component.html    |  2 +-
 frontend/src/design_system/button.scss        | 21 ++++++-
 14 files changed, 51 insertions(+), 120 deletions(-)

diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index 4ea9f1b..df91e86 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -1,6 +1,7 @@
 <div class="left">
     <button type="button"
             (click)="sideMenu.open()"
+            class="cod-btn icon"
             matTooltip="Click to show side menu" 
             matRipple 
             i18n-matTooltip>
@@ -18,8 +19,8 @@
 
 <div class="right">
     @if (isAuthenticated) {
-        <button mat-button
-                class="button"
+        <button type="button"
+                class="cod-btn icon"
                 [matMenuTriggerFor]="authenticatedUserMenu" 
                 matRipple>
             <mat-icon>more_vert</mat-icon>
diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss
index f331cd7..a17213b 100644
--- a/frontend/src/app/components/header/header.component.scss
+++ b/frontend/src/app/components/header/header.component.scss
@@ -26,25 +26,6 @@ $headerHeight: 3.5em;
             padding: 0 1em;
             z-index: 2;
 
-            button {
-                background-color: #3f51b5;
-                color: white;
-                border: none;
-                border-radius: 10em;
-                transition: background-color .2s ease-in-out;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                $buttonSize: 2.5em;
-                width: $buttonSize;
-                height: $buttonSize;
-
-                &:hover {
-                    cursor: pointer;
-                    background-color: #5c6bc0;
-                }
-            }
-
             a {
                 display: flex;
                 flex-direction: row;
@@ -120,45 +101,10 @@ $headerHeight: 3.5em;
             top: 0;
             right: 0;
             z-index: 2;
-
-            a {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 5em;
-                color: white;
-                margin: 0.5em 0.5em;
-                border-radius: 10em;
-                text-decoration: none;
-                padding: 0 .8em;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    background-color: #5c6bc0;
-                }
-            }
-
-             button {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 2.5em;
-                color: white;
-                margin: 0.5em 0.5em;
-                border-radius: 10em;
-                text-decoration: none;
-                padding: 0;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    background-color: #5c6bc0;
-                }
-
-                mat-icon {
-                    margin: 0;
-                }
+            margin-right: .5em;
+            
+            a, button {
+                margin: .5em;
             }
         }
     }
diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
index 05bd861..5d38a51 100644
--- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
+++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
@@ -1,4 +1,9 @@
-<button type="button" class="close" (click)="closeDialog()" matRipple>
+<button type="button"
+        (click)="closeDialog()"
+        class="cod-btn icon secondary close"
+        matTooltip="Close"
+        matRipple
+        i18n-matTooltip>
     <mat-icon>close</mat-icon>
 </button>
 <header>
diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
index 30239c5..e21d3e8 100644
--- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
+++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
@@ -6,20 +6,6 @@
     position: relative;
     max-height: 90vh;
 
-    .close {
-        position: absolute;
-        top: 1em;
-        right: 1em;
-        width: 2.5em;
-        height: 2.5em;
-        border-radius: 10em;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-
     header {
         flex: 1;
         display: flex;
diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
index 61cec69..cb1a5b1 100644
--- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
+++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
@@ -6,6 +6,7 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIcon } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import { MatSelectModule } from '@angular/material/select';
+import { MatTooltip } from "@angular/material/tooltip";
 
 export interface ProgramingLanguage {
     code: string;
@@ -94,6 +95,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
         MatInputModule,
         MatRippleModule,
         MatSelectModule,
+        MatTooltip,
         ReactiveFormsModule,
     ]
 })
diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
index e9e4d8b..f724318 100644
--- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
+++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
@@ -1,4 +1,9 @@
-<button type="button" class="close" (click)="closeDialog()" matRipple>
+<button type="button"
+        (click)="closeDialog()"
+        class="cod-btn icon secondary close"
+        matTooltip="Close"
+        matRipple
+        i18n-matTooltip>
     <mat-icon>close</mat-icon>
 </button>
 <header>
diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
index a0637aa..d5ead41 100644
--- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
+++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
@@ -6,20 +6,6 @@
     position: relative;
     max-height: 90vh;
 
-    .close {
-        position: absolute;
-        top: 1em;
-        right: 1em;
-        width: 2.5em;
-        height: 2.5em;
-        border-radius: 10em;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-
     header {
         flex: 1;
         display: flex;
diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.html b/frontend/src/app/components/publication-edition/publication-edition.component.html
index f834e8e..fd412c8 100644
--- a/frontend/src/app/components/publication-edition/publication-edition.component.html
+++ b/frontend/src/app/components/publication-edition/publication-edition.component.html
@@ -58,13 +58,6 @@
                             i18n-matTooltip>
                         H3
                     </button>
-                    <button type="button"
-                            (click)="selectAPicture()"
-                            matTooltip="Click to insert a picture"
-                            matRipple
-                            i18n-matTooltip>
-                        <mat-icon>image</mat-icon>
-                    </button>
                     <button type="button"
                             (click)="insertLink()"
                             matTooltip="Click to insert a link"
@@ -72,6 +65,13 @@
                             i18n-matTooltip>
                         <mat-icon>link</mat-icon>
                     </button>
+                    <button type="button"
+                            (click)="selectAPicture()"
+                            matTooltip="Click to insert a picture"
+                            matRipple
+                            i18n-matTooltip>
+                        <mat-icon>image</mat-icon>
+                    </button>
                     <button type="button"
                             (click)="displayCodeBlockDialog()"
                             matTooltip="Click to insert a code block"
diff --git a/frontend/src/app/components/side-menu/side-menu.component.html b/frontend/src/app/components/side-menu/side-menu.component.html
index f911856..733ac4d 100644
--- a/frontend/src/app/components/side-menu/side-menu.component.html
+++ b/frontend/src/app/components/side-menu/side-menu.component.html
@@ -6,6 +6,7 @@
         </a>
         <button type="button"
                 (click)="close()"
+                class="cod-btn icon"
                 matTooltip="Close the menu"
                 matRipple
                 i18n-matTooltip>
diff --git a/frontend/src/app/components/side-menu/side-menu.component.scss b/frontend/src/app/components/side-menu/side-menu.component.scss
index 30a1a05..eee7622 100644
--- a/frontend/src/app/components/side-menu/side-menu.component.scss
+++ b/frontend/src/app/components/side-menu/side-menu.component.scss
@@ -41,24 +41,6 @@
                     height: $imageSize;
                 }
             }
-
-            button {
-                border-radius: 10em;
-                border: none;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                width: 2.5em;
-                height: 2.5em;
-                color: white;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    cursor: pointer;
-                    background-color: #5c6bc0;
-                }
-            }
         }
 
         h2 {
diff --git a/frontend/src/app/components/submit-button/submit-button.component.html b/frontend/src/app/components/submit-button/submit-button.component.html
index 01852ab..d1410c8 100644
--- a/frontend/src/app/components/submit-button/submit-button.component.html
+++ b/frontend/src/app/components/submit-button/submit-button.component.html
@@ -1,5 +1,5 @@
 <button type="submit"
-        class="cod-button {{color}}"
+        class="cod-btn {{color}}"
         [disabled]="disabled || requestPending"
         (click)="click.emit()"
         matRipple>
diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html
index 165af6f..fb3517f 100644
--- a/frontend/src/app/pages/login/login.component.html
+++ b/frontend/src/app/pages/login/login.component.html
@@ -18,6 +18,6 @@
     </div>
     <div class="actions reversed">
         <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
-        <a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
+        <a [routerLink]="['/signin']" class="cod-btn secondary" matRipple i18n>Create an account</a>
     </div>
 </form>
\ No newline at end of file
diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html
index c47af27..972e526 100644
--- a/frontend/src/app/pages/signin/signin.component.html
+++ b/frontend/src/app/pages/signin/signin.component.html
@@ -34,6 +34,6 @@
     </div>
     <div class="actions reversed">
         <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
-        <a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
+        <a [routerLink]="['/login']" class="cod-btn secondary" matRipple i18n>I already have an account</a>
     </div>
 </form>
\ No newline at end of file
diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss
index 61fdf30..43539ea 100644
--- a/frontend/src/design_system/button.scss
+++ b/frontend/src/design_system/button.scss
@@ -1,10 +1,13 @@
-button.cod-btn, a.cod-button {
+button.cod-btn, a.cod-btn {
     padding: .8em 1.2em;
     border-radius: 10em;
     border: none;
     background-color: #3f51b5;
     color: white;
     transition: background-color .2s ease-in-out;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     &:hover {
         background-color: #5b6ed8;
@@ -19,8 +22,22 @@ button.cod-btn, a.cod-button {
             background-color: #f2f4ff;
         }
     }
+
+    &.icon {
+        $buttonSize: 2.5em;
+        width: $buttonSize;
+        height: $buttonSize;
+        padding: 0;
+
+        &.close {
+            position: absolute;
+            top: 1em;
+            right: 1em;
+            color: black;
+        }
+    }
 }
 
-a.cod-button {
+a.cod-btn {
     text-decoration: none;
 }
\ No newline at end of file