Add ripple everywhere.

frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html

@@ -1,10 +1,10 @@
 <h1>{{title}}</h1>
 <h2>{{description}}</h2>
 <footer>
-    <button type="button" class="secondary" (click)="closeDialog()" i18n>
+    <button type="button" class="cod-btn secondary" (click)="closeDialog()" matRipple i18n>
         No
     </button>
-    <button type="button" (click)="closeAndValidate()" i18n>
+    <button type="button" class="cod-btn" (click)="closeAndValidate()" matRipple i18n>
         Yes
     </button>
 </footer>

frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss

@@ -8,32 +8,5 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-
-        button {
-            padding: .8em 1.2em;
-            border-radius: 10em;
-            border: none;
-            background-color: #3f51b5;
-            color: white;
-            transition: background-color .2s ease-in-out;
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        
-            &:hover {
-                background-color: #5b6ed8;
-            }
-        
-            &.secondary {
-                color: #3f51b5;
-                background-color: white;
-        
-                &:hover {
-                    background-color: #f2f4ff;
-                    cursor: pointer;
-                }
-            }
-        }
     }
 }

frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,4 +1,5 @@
 import { Component, inject, Input } from "@angular/core";
+import { MatRippleModule } from "@angular/material/core";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 
 export interface ConfirmationDialogData {
@@ -11,7 +12,7 @@ export interface ConfirmationDialogData {
     standalone: true,
     templateUrl: './confirmation-dialog.component.html',
     styleUrl: './confirmation-dialog.component.scss',
-    imports: []
+    imports: [MatRippleModule]
 })
 export class ConfirmationDialog {
     private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);

frontend/src/app/components/header/header.component.html

@@ -1,5 +1,9 @@
 <div class="left">
-    <button type="button" (click)="sideMenu.open()" matTooltip="Click to show side menu" i18n-matTooltip>
+    <button type="button"
+            (click)="sideMenu.open()"
+            matTooltip="Click to show side menu" 
+            matRipple 
+            i18n-matTooltip>
         <mat-icon>menu</mat-icon>
     </button>
     <a [routerLink]="['/home']">
@@ -14,7 +18,10 @@
 
 <div class="right">
     @if (isAuthenticated) {
-        <button mat-button class="button" [matMenuTriggerFor]="authenticatedUserMenu">
+        <button mat-button
+                class="button"
+                [matMenuTriggerFor]="authenticatedUserMenu" 
+                matRipple>
             <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #authenticatedUserMenu="matMenu">
@@ -30,7 +37,7 @@
             </div>
         </mat-menu>
     } @else {
-        <a [routerLink]="['/login']" class="button" matRipple i18n>Login</a>
+        <a [routerLink]="['/login']" class="cod-btn" matRipple i18n>Login</a>
     }
 </div>
 <app-side-menu #sideMenu></app-side-menu>

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html

@@ -1,10 +1,10 @@
-<button type="button" class="close" (click)="closeDialog()">
+<button type="button" class="close" (click)="closeDialog()" matRipple>
     <mat-icon>close</mat-icon>
 </button>
 <header>
     <h1 i18n>Add a code block</h1>
 </header>
-<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
+<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
     <div class="form-content">
         <mat-form-field>
             <mat-label i18n>Programming language</mat-label>
@@ -21,11 +21,11 @@
             <textarea matInput formControlName="codeBlock"></textarea>
         </mat-form-field>
     </div>
-    <div class="actions">
+    <div class="actions reversed">
-        <button type="submit" i18n>
+        <button type="submit" class="cod-btn" matRipple i18n>
             Validate
         </button>
-        <button type="button" (click)="closeDialog()" class="secondary" i18n>
+        <button type="button" (click)="closeDialog()" class="cod-btn secondary" matRipple i18n>
             Cancel
         </button>
     </div>

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss

@@ -39,40 +39,6 @@
                     }
                 }
             }
-
-            &.actions {
-                display: flex;
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                button {
-                    padding: .8em 1.2em;
-                    border-radius: 10em;
-                    border: none;
-                    background-color: #3f51b5;
-                    color: white;
-                    transition: background-color .2s ease-in-out;
-                    cursor: pointer;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                
-                    &:hover {
-                        background-color: #5b6ed8;
-                    }
-                
-                    &.secondary {
-                        color: #3f51b5;
-                        background-color: white;
-                
-                        &:hover {
-                            background-color: #f2f4ff;
-                            cursor: pointer;
-                        }
-                    }
-                }
-            }
         }
     }
 }

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject } from "@angular/core";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { MatRippleModule } from "@angular/material/core";
 import { MatDialogRef } from "@angular/material/dialog";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIcon } from "@angular/material/icon";
@@ -91,6 +92,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
         MatFormFieldModule,
         MatIcon,
         MatInputModule,
+        MatRippleModule,
         MatSelectModule,
         ReactiveFormsModule,
     ]

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html

@@ -1,4 +1,4 @@
-<button type="button" class="close" (click)="closeDialog()">
+<button type="button" class="close" (click)="closeDialog()" matRipple>
     <mat-icon>close</mat-icon>
 </button>
 <header>
@@ -19,10 +19,18 @@
     }
 </div>
 <footer>
-    <button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
+    <button type="button"
+            (click)="closeDialog()"
+            class="cod-btn secondary"
+            matRipple
+            i18n>
         Cancel
     </button>
-    <button type="button" (click)="fileUpload.click()" matRipple i18n>
+    <button type="button"
+            (click)="fileUpload.click()"
+            class="cod-btn"
+            matRipple
+            i18n>
         <mat-icon>upload_file</mat-icon>
         Add new picture
     </button>

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts

@@ -11,9 +11,14 @@ import { MatTooltip } from "@angular/material/tooltip";
 @Component({
     selector: 'app-picture-selection',
     standalone: true,
-    imports: [MatProgressSpinnerModule, MatIcon, MatRippleModule, MatTooltip],
     templateUrl: './picture-selection-dialog.component.html',
     styleUrl: './picture-selection-dialog.component.scss',
+    imports: [
+        MatIcon, 
+        MatRippleModule, 
+        MatProgressSpinnerModule, 
+        MatTooltip
+    ],
 })
 export class PictureSelectionDialog implements OnInit {
     private readonly pictureRestService = inject(PictureRestService);

frontend/src/app/components/publication-edition/publication-edition.component.html

@@ -37,25 +37,53 @@
                 </div>
 
                 <div class="actions">
-                    <button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip>
+                    <button type="button"
+                            (click)="insertTitle(1)"
+                            matTooltip="Click to insert a title 1 section"
+                            matRipple
+                            i18n-matTooltip>
                         H1
                     </button>
-                    <button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip>
+                    <button type="button"
+                            (click)="insertTitle(2)"
+                            matTooltip="Click to insert a title 2 section"
+                            matRipple
+                            i18n-matTooltip>
                         H2
                     </button>
-                    <button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip>
+                    <button type="button"
+                            (click)="insertTitle(3)"
+                            matTooltip="Click to insert a title 3 section"
+                            matRipple
+                            i18n-matTooltip>
                         H3
                     </button>
-                    <button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip>
+                    <button type="button"
+                            (click)="selectAPicture()"
+                            matTooltip="Click to insert a picture"
+                            matRipple
+                            i18n-matTooltip>
                         <mat-icon>image</mat-icon>
                     </button>
-                    <button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip>
+                    <button type="button"
+                            (click)="insertLink()"
+                            matTooltip="Click to insert a link"
+                            matRipple
+                            i18n-matTooltip>
                         <mat-icon>link</mat-icon>
                     </button>
-                    <button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip>
+                    <button type="button"
+                            (click)="displayCodeBlockDialog()"
+                            matTooltip="Click to insert a code block"
+                            matRipple
+                            i18n-matTooltip>
                         <mat-icon>code</mat-icon>
                     </button>
-                    <button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip>
+                    <button type="button"
+                            matTooltip="Click to display editor help"
+                            disabled
+                            matRipple
+                            i18n-matTooltip>
                         <mat-icon>help</mat-icon>
                     </button>
                 </div>
@@ -93,7 +121,11 @@
     </mat-tab-group>
     <footer>
         <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
-        <button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
+        <button type="button"
+                class="cod-btn secondary" 
+                (click)="goPreviousLocation()" 
+                matRipple 
+                i18n>
             Cancel
         </button>
     </footer>

frontend/src/app/components/publication-edition/publication-edition.component.scss

@@ -102,6 +102,11 @@
 
         button {
             padding: 0;
+            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;
@@ -109,17 +114,6 @@
             height: 3em;
             box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
             font-weight: bold;
-        }
-    }
-}
-
-button, a.button {
-    padding: .8em 1.2em;
-    border-radius: 10em;
-    border: none;
-    background-color: #3f51b5;
-    color: white;
-    transition: background-color .2s ease-in-out;
 
             &:hover {
                 background-color: #5b6ed8;
@@ -130,14 +124,6 @@ button, a.button {
                 background-color: #5f6aa6;
                 cursor: not-allowed;
             }
-
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
-
-        &:hover {
-            background-color: #f2f4ff;
-            cursor: pointer;
         }
     }
 }

frontend/src/app/components/publication-edition/publication-edition.component.ts

@@ -15,6 +15,7 @@ import { CategoryService } from "../../core/service/category.service";
 import { SubmitButtonComponent } from "../submit-button/submit-button.component";
 import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
 import { PublicationEditionService } from "./publication-edition.service";
+import { MatRippleModule } from "@angular/material/core";
 
 @Component({
     selector: 'app-publication-edition',
@@ -26,6 +27,7 @@ import { PublicationEditionService } from "./publication-edition.service";
         MatDialogModule,
         MatIconModule,
         MatInputModule,
+        MatRippleModule,
         MatProgressSpinnerModule,
         MatSelectModule,
         MatTabsModule,

frontend/src/app/components/publications-search-bar/publications-search-bar.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="formGroup">
     <input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
-    <button type="submit" (click)="searchPublications()">
+    <button type="submit" (click)="searchPublications()" matRipple>
         <mat-icon>search</mat-icon>
     </button>
 </form>

frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss

@@ -27,7 +27,7 @@
             top: 0;
             right: 0;
             color: #aaaaaa;
-            padding: .4em;
+            padding: .3em;
     
             &:hover {
                 background-color: #eee;

frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts

@@ -1,6 +1,6 @@
-import { HttpParams } from "@angular/common/http";
 import { Component, inject } from "@angular/core";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { MatRippleModule } from "@angular/material/core";
 import { MatIconModule } from "@angular/material/icon";
 import { Router } from "@angular/router";
 
@@ -11,8 +11,9 @@ import { Router } from "@angular/router";
     styleUrl: './publications-search-bar.component.scss',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
+        MatIconModule,
-        MatIconModule
+        MatRippleModule,
+        ReactiveFormsModule
     ],
     providers: []
 })

frontend/src/app/components/side-menu/side-menu.component.html

@@ -4,7 +4,11 @@
             <img src="assets/images/codiki.png" alt="logo"/>
             Codiki
         </a>
-        <button type="button" (click)="close()" matTooltip="Close the menu" i18n-matTooltip>
+        <button type="button"
+                (click)="close()"
+                matTooltip="Close the menu"
+                matRipple
+                i18n-matTooltip>
             <mat-icon>close</mat-icon>
         </button>
     </h1>

frontend/src/app/components/side-menu/side-menu.component.ts

@@ -3,13 +3,20 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
+import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-side-menu',
   standalone: true,
-  imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule, RouterModule],
   templateUrl: './side-menu.component.html',
-  styleUrl: './side-menu.component.scss'
+  styleUrl: './side-menu.component.scss',
+  imports: [
+    CategoriesMenuComponent, 
+    MatIconModule,
+    MatRippleModule, 
+    MatTooltipModule,
+    RouterModule
+  ]
 })
 export class SideMenuComponent {
   isOpenned: boolean = false;

frontend/src/app/components/submit-button/submit-button.component.html

@@ -1,7 +1,8 @@
 <button type="submit"
         class="cod-button {{color}}"
         [disabled]="disabled || requestPending"
-        (click)="click.emit()">
+        (click)="click.emit()"
+        matRipple>
     @if (requestPending) {
         <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
     }

frontend/src/app/components/submit-button/submit-button.component.ts

@@ -1,14 +1,18 @@
 import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatRippleModule } from "@angular/material/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
-
 @Component({
     selector: 'app-submit-button',
     standalone: true,
-    imports: [MatProgressSpinnerModule, CommonModule],
     templateUrl: 'submit-button.component.html',
-    styleUrl: 'submit-button.component.scss'
+    styleUrl: 'submit-button.component.scss',
+    imports: [
+        CommonModule,
+        MatRippleModule,
+        MatProgressSpinnerModule
+    ]
 })
 export class SubmitButtonComponent {
     @Input() requestPending: boolean = false;

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" i18n>Create an account</a>
+        <a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
     </div>
 </form>

frontend/src/app/pages/login/login.component.ts

@@ -6,13 +6,20 @@ import { LoginService } from './login.service';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
+import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-login',
   standalone: true,
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',
-  imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
+  imports: [
+    MatIconModule, 
+    MatRippleModule,
+    ReactiveFormsModule, 
+    RouterModule,
+    SubmitButtonComponent
+  ],
   providers: [LoginService, MatSnackBarModule]
 })
 export class LoginComponent implements OnInit, OnDestroy {

frontend/src/app/pages/publication/publication.component.html

@@ -12,6 +12,7 @@
                     <a [routerLink]="['edit']"
                         class="button action"
                         matTooltip="Click to edit the publication"
+                        matRipple
                         i18n-matTooltip>
                         <mat-icon>edit</mat-icon>
                     </a>
@@ -33,6 +34,7 @@
                         (click)="deletePublication()"
                         matTooltip="Click to delete the publication" 
                         matTooltipPosition="left"
+                        matRipple
                         i18n-matTooltip>
                         <mat-icon>delete</mat-icon>
                         Delete

frontend/src/app/pages/publication/publication.component.ts

@@ -1,25 +1,33 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { CommonModule, Location } from '@angular/common';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { MatRippleModule } from '@angular/material/core';
-import { MatIcon } from '@angular/material/icon';
-import { AuthenticationService } from '../../core/service/authentication.service';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
+import { Publication } from '../../core/rest-services/publications/model/publication';
+import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
+import { AuthenticationService } from '../../core/service/authentication.service';
 
 declare let Prism: any;
 
 @Component({
   selector: 'app-publication',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule],
   templateUrl: './publication.component.html',
-  styleUrl: './publication.component.scss'
+  styleUrl: './publication.component.scss',
+  imports: [
+    CommonModule,
+    MatIcon,
+    MatRippleModule,
+    MatProgressSpinner,
+    MatTooltipModule,
+    RouterModule
+  ]
 })
 export class PublicationComponent implements OnInit, OnDestroy {
   private readonly activatedRoute = inject(ActivatedRoute);

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" i18n>I already have an account</a>
+        <a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
     </div>
 </form>

frontend/src/app/pages/signin/signin.component.ts

@@ -7,13 +7,20 @@ import { SigninService } from './signin.service';
 import { LoginService } from '../login/login.service';
 import { FormError } from '../../core/model/FormError';
 import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
+import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-signin',
   standalone: true,
-  imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
   templateUrl: './signin.component.html',
   styleUrl: './signin.component.scss',
+  imports: [
+    MatIconModule, 
+    MatRippleModule,
+    ReactiveFormsModule, 
+    RouterModule, 
+    SubmitButtonComponent
+  ],
   providers: [SigninService, LoginService]
 })
 export class SigninComponent implements OnInit, OnDestroy {