modif bouttons et page message

src/app/app.routes.ts

@@ -24,10 +24,10 @@ export const routes: Routes = [
                 loadComponent: () => import('./pages/menu/menu/menu.component').then(x => x.Menu)
             },
 
-            /*{
+            {
                 path:'parameters',
-                loadComponent: () => import('./pages/parameters/parameters.component').then(x => x.Parameters)
+                loadComponent: () => import('./pages/parameters/parameters-main/parameters-main.component').then(x => x.ParametersMain)
-            }*/
+            }
         ]
     },
     {

src/app/pages/menu/menu-nav/menu-nav.component.css

@@ -0,0 +1,29 @@
+.hamburger-btn {
+    width: 50px;
+    height: 50px;
+    border: none;
+    cursor: pointer;
+    border-radius: 17px;
+
+    /* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
+    background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+
+    /* Légère ombre rosée */
+    box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Transitions pour l'hover */
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.hamburger-btn:hover {
+    transform: scale(1.04);
+    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+}
+
+.hamburger-btn:active {
+    transform: scale(0.97);
+}

src/app/pages/menu/menu-param/menu-param.component.css

@@ -0,0 +1,29 @@
+.hamburger-btn {
+    width: 50px;
+    height: 50px;
+    border: none;
+    cursor: pointer;
+    border-radius: 17px;
+
+    /* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
+    background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+
+    /* Légère ombre rosée */
+    box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Transitions pour l'hover */
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.hamburger-btn:hover {
+    transform: scale(1.04);
+    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+}
+
+.hamburger-btn:active {
+    transform: scale(0.97);
+}

src/app/pages/menu/menu-param/menu-param.component.html

@@ -0,0 +1,9 @@
+<button class="hamburger-btn" (click)="openParam()">
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0,0,256,256">
+        <g fill-opacity="0.81176" fill="#bd5a5a" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+            <g transform="scale(5.12,5.12)">
+                <path d="M47.16,21.221l-5.91,-0.966c-0.346,-1.186 -0.819,-2.326 -1.411,-3.405l3.45,-4.917c0.279,-0.397 0.231,-0.938 -0.112,-1.282l-3.889,-3.887c-0.347,-0.346 -0.893,-0.391 -1.291,-0.104l-4.843,3.481c-1.089,-0.602 -2.239,-1.08 -3.432,-1.427l-1.031,-5.886c-0.084,-0.478 -0.499,-0.828 -0.985,-0.828h-5.5c-0.49,0 -0.908,0.355 -0.987,0.839l-0.956,5.854c-1.2,0.345 -2.352,0.818 -3.437,1.412l-4.83,-3.45c-0.399,-0.285 -0.942,-0.239 -1.289,0.106l-3.887,3.887c-0.343,0.343 -0.391,0.883 -0.112,1.28l3.399,4.863c-0.605,1.095 -1.087,2.254 -1.438,3.46l-5.831,0.971c-0.482,0.08 -0.836,0.498 -0.836,0.986v5.5c0,0.485 0.348,0.9 0.825,0.985l5.831,1.034c0.349,1.203 0.831,2.362 1.438,3.46l-3.441,4.813c-0.284,0.397 -0.239,0.942 0.106,1.289l3.888,3.891c0.343,0.343 0.884,0.391 1.281,0.112l4.87,-3.411c1.093,0.601 2.248,1.078 3.445,1.424l0.976,5.861c0.079,0.481 0.496,0.834 0.985,0.834h5.5c0.485,0 0.9,-0.348 0.984,-0.825l1.045,-5.89c1.199,-0.353 2.348,-0.833 3.43,-1.435l4.905,3.441c0.398,0.281 0.938,0.232 1.282,-0.111l3.888,-3.891c0.346,-0.347 0.391,-0.894 0.104,-1.292l-3.498,-4.857c0.593,-1.08 1.064,-2.222 1.407,-3.408l5.918,-1.039c0.479,-0.084 0.827,-0.5 0.827,-0.985v-5.5c0.001,-0.49 -0.354,-0.908 -0.838,-0.987zM25,32c-3.866,0 -7,-3.134 -7,-7c0,-3.866 3.134,-7 7,-7c3.866,0 7,3.134 7,7c0,3.866 -3.134,7 -7,7z"></path>
+            </g>
+        </g>
+    </svg>
+</button>

src/app/pages/menu/menu-param/menu-param.component.ts

@@ -0,0 +1,17 @@
+import {Component, inject} from '@angular/core';
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-menu-param',
+  imports: [],
+  templateUrl: './menu-param.component.html',
+  styleUrl: './menu-param.component.css'
+})
+export class MenuParamComponent {
+
+  private router = inject(Router)
+
+  openParam() {
+    this.router.navigate(['/main/parameters']);
+  }
+}

src/app/pages/menu/menu/menu.component.css

@@ -0,0 +1,16 @@
+.page-menu {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    padding: 26px;
+    gap: 12px;
+}
+
+.header {
+    display: flex;
+}
+
+.param {
+    align-items: flex-end;
+}

src/app/pages/menu/menu/menu.component.html

@@ -1 +1,6 @@
+<div class="page-menu">
+    <div class="header">
         <app-menu-nav/>
+        <app-menu-param/>
+    </div>
+</div>

src/app/pages/menu/menu/menu.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {MenuNav} from "../menu-nav/menu-nav.component";
+import {MenuParamComponent} from "../menu-param/menu-param.component";
 
 @Component({
   selector: 'app-menu',
   imports: [
-    MenuNav
+    MenuNav,
+    MenuParamComponent
   ],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.css'

src/app/pages/messages/messages-infouser/messages-infouser.component.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     gap: 14px;
-    padding: 10px 24px 10px 10px;
+    padding: 7px 130px 7px 5px;
     border: none;
     cursor: pointer;
     border-radius: 50px;
@@ -21,8 +21,8 @@
 }
 
 .profile-btn .icon-wrapper {
-    width: 48px;
+    width: 40px;
-    height: 48px;
+    height: 40px;
     border-radius: 50%;
     background-color: #c07070;
     display: flex;

src/app/pages/messages/messages-main/messages-main.component.css

@@ -10,7 +10,7 @@
 .topbar {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 30px;
 }
 
 .messages {
@@ -52,8 +52,12 @@
     align-self: flex-end;
 }
 
+.message.sent {
+    align-self: flex-end;
+}
+
 .message.sent p {
-    background: radial-gradient(ellipse at 70% 30%, #fff 0%, #f9ece9 80%);
+    background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
 }
 
 .bottombar {

src/app/pages/messages/messages-main/messages-main.component.html

@@ -2,13 +2,19 @@
 
     <div class="topbar">
         <app-messages-menu/>
+        <div class="param">
             <app-messages-infouser/>
         </div>
+    </div>
 
     <div class="messages">
         <div class="message received">
             <p>Salut, comment tu vas ?</p>
-            <span class="timestamp">15:33, Aujd.</span>
+            <span class="timestamp">15:33, Hier.</span>
+        </div>
+        <div class="message sent">
+            <p>ça va</p>
+            <span class="timestamp">11:25, Aujd.</span>
         </div>
     </div>
 

src/app/pages/messages/messages-menu/messages-menu.component.css

@@ -1,9 +1,9 @@
 .hamburger-btn {
-    width: 60px;
+    width: 50px;
-    height: 60px;
+    height: 50px;
     border: none;
     cursor: pointer;
-    border-radius: 22px;
+    border-radius: 17px;
 
     /* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
     background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);

src/app/pages/messages/messages-send/messages-send.component.html

@@ -7,7 +7,6 @@
     <button type="submit" class="send-btn">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M5 12L3 3L21 12L3 21L5 12Z" fill="#b05050"/>
-            <path d="M5 12H21" stroke="#b05050" stroke-width="2" stroke-linecap="round"/>
         </svg>
     </button>
 </form>

src/app/pages/parameters/parameters-exit/parameters-exit.component.html

@@ -0,0 +1,10 @@
+<button class="hamburger-btn" (click)="exitParam()">
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+         width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
+         preserveAspectRatio="xMidYMid meet">
+
+        <g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+           fill="#000000" stroke="none">
+        </g>
+    </svg>
+</button>

src/app/pages/parameters/parameters-exit/parameters-exit.component.ts

@@ -0,0 +1,17 @@
+import {Component, inject} from '@angular/core';
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-parameters-exit',
+  imports: [],
+  templateUrl: './parameters-exit.component.html',
+  styleUrl: './parameters-exit.component.css'
+})
+export class ParametersExit {
+
+  private router = inject(Router)
+
+  exitParam() {
+    this.router.navigate(['/main/menu']);
+  }
+}

src/app/pages/parameters/parameters-main/parameters-main.component.css

@@ -0,0 +1,8 @@
+.page-param {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    padding: 16px;
+    gap: 12px;
+}

src/app/pages/parameters/parameters-main/parameters-main.component.html

@@ -0,0 +1,5 @@
+<div class="page-param" >
+    <app-parameters-exit/>
+    <p>Paramètres !</p>
+
+</div>

src/app/pages/parameters/parameters-main/parameters-main.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {ParametersExit} from "../parameters-exit/parameters-exit.component";
+
+@Component({
+  selector: 'app-parameters-main',
+  imports: [
+    ParametersExit
+  ],
+  templateUrl: './parameters-main.component.html',
+  styleUrl: './parameters-main.component.css'
+})
+export class ParametersMain {
+
+}