Add icon button style.

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
+        <button type="button"
-                class="button"
+                class="cod-btn icon"
                 [matMenuTriggerFor]="authenticatedUserMenu" 
                 matRipple>
             <mat-icon>more_vert</mat-icon>

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;
+            margin-right: .5em;
             
-            a {
+            a, button {
-                display: flex;
+                margin: .5em;
-                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;
-                }
             }
         }
     }

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>

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;

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,
     ]
 })

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>

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;

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"

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>

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 {

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>

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>

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>

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;
 }