Add icon button style.

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"