fix: 💄 update layout for the brand SupportWeb

.gitignore

@@ -6,6 +6,7 @@
 /.npmrc
 /node_modules
 /public/build
+/public/favicons-back
 /public/storage
 /storage/*.key
 /storage/pail

public/favicon-back/manifest.json

@@ -1,41 +0,0 @@
-{
- "name": "App",
- "icons": [
-  {
-   "src": "\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
-  },
-  {
-   "src": "\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
-  },
-  {
-   "src": "\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
-  },
-  {
-   "src": "\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
-  }
- ]
-}

public/manifest.json

@@ -1,41 +0,0 @@
-{
- "name": "App",
- "icons": [
-  {
-   "src": "\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
-  },
-  {
-   "src": "\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
-  },
-  {
-   "src": "\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
-  },
-  {
-   "src": "\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
-  }
- ]
-}

resources/assets/images/logos/uwil-cms-dark-icon.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150.33 150.33"><defs><linearGradient id="Dégradé_sans_nom_3" x1="18.53" y1="76.48" x2="131.8" y2="76.48" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#004ca3"/><stop offset="1" stop-color="#6affff"/></linearGradient></defs><g id="Calque_1-2"><rect width="150.33" height="150.33" rx="12" ry="12" style="fill:#fff; stroke-width:0px;"/><path d="M18.53,22.63h54.1l6.12,20.48-54.1.38-6.11-20.86ZM111.05,87.58c-1.53,9.7-8.43,18.16-18.46,21.19-13.96,4.22-28.71-3.68-32.93-17.64l-.57-1.9-12.68-42.22h-21.13l12.68,42.89c.58,1.95,1.56,5.08,1.89,6.24l.54,1.78c4.83,14.93,16.5,25.82,30.47,30.24,8.69,2.75,18.26,3,27.64.16,9.38-2.84,17.22-8.35,22.93-15.46,5.91-7.35,9.54-16.4,10.24-25.94.41-5.58-.17-11.32-1.89-17-.13-.44-.74-2.45-1.01-3.34l-3.2-10.6-10.08-33.35-21.13.04.72,2.38,9.36,31.59,3.2,10.6,2.69,8.89s0,0-.01,0c1.11,3.83,1.31,7.72.72,11.42" style="fill:url(#Dégradé_sans_nom_3); fill-rule:evenodd; stroke-width:0px;"/><path d="M45.05,137.98c-1.88-.97-3.32-2.33-4.34-4.08-1.02-1.75-1.53-3.77-1.53-6.05v-11.01c0-2.29.51-4.31,1.53-6.05,1.02-1.75,2.46-3.1,4.34-4.05,1.88-.95,4.05-1.43,6.53-1.43s4.6.45,6.46,1.36c1.86.91,3.3,2.19,4.34,3.86,1.03,1.67,1.55,3.6,1.55,5.79,0,.29-.19.46-.57.52l-5.58.33h-.09c-.32,0-.48-.17-.48-.52,0-1.68-.52-3.04-1.55-4.05-1.03-1.02-2.39-1.53-4.08-1.53s-3.09.51-4.12,1.53-1.55,2.37-1.55,4.05v11.49c0,1.65.52,2.99,1.55,4,1.03,1.02,2.41,1.53,4.12,1.53s3.04-.51,4.08-1.53c1.03-1.02,1.55-2.35,1.55-4,0-.35.19-.52.57-.52l5.58.24c.16,0,.29.05.41.14.11.1.17.21.17.33,0,2.19-.52,4.13-1.55,5.82-1.03,1.69-2.48,2.99-4.34,3.91s-4.01,1.38-6.46,1.38-4.66-.48-6.53-1.45Z" style="fill:#000; stroke-width:0px;"/><path d="M90.96,105.68h5.58c.16,0,.29.06.41.17.11.11.17.25.17.41v32.23c0,.16-.06.29-.17.41-.11.11-.25.17-.41.17h-5.58c-.16,0-.29-.05-.41-.17-.11-.11-.17-.25-.17-.41v-21.03c0-.13-.03-.19-.1-.19s-.13.05-.19.14l-5.05,7.91c-.16.25-.38.38-.67.38h-2.81c-.29,0-.51-.13-.67-.38l-5.05-7.91c-.06-.1-.13-.13-.19-.12-.06.02-.1.09-.1.21v20.98c0,.16-.06.29-.17.41-.11.11-.25.17-.41.17h-5.58c-.16,0-.29-.05-.41-.17-.11-.11-.17-.25-.17-.41v-32.23c0-.16.06-.29.17-.41.11-.11.25-.17.41-.17h5.58c.29,0,.51.13.67.38l7.15,11.11c.1.19.19.19.29,0l7.2-11.11c.16-.25.38-.38.67-.38Z" style="fill:#000; stroke-width:0px;"/><path d="M107.69,138.22c-1.91-.81-3.38-1.97-4.41-3.48s-1.55-3.27-1.55-5.27v-1.05c0-.16.05-.29.17-.41s.25-.17.41-.17h5.44c.16,0,.29.06.41.17s.17.25.17.41v.71c0,1.27.59,2.34,1.76,3.22s2.77,1.31,4.77,1.31c1.68,0,2.94-.36,3.77-1.07.83-.72,1.24-1.6,1.24-2.65,0-.76-.25-1.41-.76-1.93-.51-.52-1.2-.99-2.07-1.38-.88-.4-2.26-.95-4.17-1.65-2.13-.73-3.93-1.48-5.41-2.24-1.48-.76-2.72-1.8-3.72-3.12-1-1.32-1.5-2.95-1.5-4.89s.49-3.58,1.48-5.01c.99-1.43,2.35-2.53,4.1-3.29s3.77-1.14,6.05-1.14c2.42,0,4.57.43,6.46,1.29,1.89.86,3.37,2.06,4.43,3.6,1.06,1.54,1.6,3.33,1.6,5.36v.71c0,.16-.06.29-.17.41-.11.11-.25.17-.41.17h-5.48c-.16,0-.29-.06-.41-.17s-.17-.25-.17-.41v-.38c0-1.33-.55-2.47-1.65-3.41s-2.6-1.41-4.51-1.41c-1.49,0-2.66.32-3.5.95-.84.64-1.26,1.51-1.26,2.62,0,.79.25,1.46.74,2,.49.54,1.22,1.02,2.19,1.45.97.43,2.47,1.01,4.5,1.74,2.26.83,4.03,1.56,5.32,2.19s2.45,1.58,3.48,2.84c1.03,1.26,1.55,2.88,1.55,4.89,0,2.99-1.1,5.35-3.29,7.08s-5.17,2.6-8.92,2.6c-2.54,0-4.77-.41-6.67-1.22Z" style="fill:#000; stroke-width:0px;"/><path d="M131.6,138.17c-.71-.72-1.07-1.61-1.07-2.69s.35-2.02,1.05-2.72c.7-.7,1.6-1.05,2.72-1.05s2.02.35,2.72,1.05c.7.7,1.05,1.61,1.05,2.72s-.36,1.98-1.07,2.69-1.61,1.07-2.69,1.07-1.98-.36-2.69-1.07Z" style="fill:#004ca3; stroke-width:0px;"/></g></svg>

resources/assets/images/logos/uwil-cms-light-icon.svg

@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150.33 150.33">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: url(#Dégradé_sans_nom_3);
-        fill-rule: evenodd;
-      }
-
-      .cls-2 {
-        letter-spacing: 0em;
-      }
-
-      .cls-3 {
-        font-family: Barlow-Bold, Barlow;
-        font-size: 47.68px;
-        font-weight: 700;
-      }
-
-      .cls-3, .cls-4 {
-        fill: #fff;
-      }
-
-      .cls-4 {
-        opacity: 0;
-      }
-
-      .cls-5 {
-        letter-spacing: 0em;
-      }
-    </style>
-    <linearGradient id="Dégradé_sans_nom_3" data-name="Dégradé sans nom 3" x1="18.53" y1="76.48" x2="131.8" y2="76.48" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#004ca3"/>
-      <stop offset="1" stop-color="#6affff"/>
-    </linearGradient>
-  </defs>
-  <rect class="cls-4" width="150.33" height="150.33" rx="12" ry="12"/>
-  <path class="cls-1" d="M18.53,22.63h54.1l6.12,20.48-54.1.38-6.11-20.86ZM111.05,87.58c-1.53,9.7-8.43,18.16-18.46,21.19-13.96,4.22-28.71-3.68-32.93-17.64l-.57-1.9-12.68-42.22h-21.13l12.68,42.89c.58,1.95,1.56,5.08,1.89,6.24l.54,1.78c4.83,14.93,16.5,25.82,30.47,30.24,8.69,2.75,18.26,3,27.64.16s17.22-8.35,22.93-15.46c5.91-7.35,9.54-16.4,10.24-25.94.41-5.58-.17-11.32-1.89-17-.13-.44-.74-2.45-1.01-3.34l-3.2-10.6-10.08-33.35-21.13.04.72,2.38,9.36,31.59,3.2,10.6,2.69,8.89s0,0-.01,0c1.11,3.83,1.31,7.72.72,11.42"/>
-  <text class="cls-3" transform="translate(36.94 139.05)"><tspan x="0" y="0">CM</tspan><tspan class="cls-2" x="63.08" y="0">S</tspan><tspan class="cls-5" x="91.16" y="0">.</tspan></text>
-</svg>

resources/assets/images/logos/uwil-support-light-icon.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 122.45 127.15">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #be1622;
+        letter-spacing: 0em;
+      }
+
+      .cls-2 {
+        font-family: Barlow-Bold, Barlow;
+        font-size: 47.68px;
+        font-weight: 700;
+      }
+
+      .cls-3 {
+        fill: url(#Dégradé_sans_nom_183);
+        fill-rule: evenodd;
+      }
+
+      .cls-4, .cls-5 {
+        fill: #fff;
+      }
+
+      .cls-5 {
+        letter-spacing: -.01em;
+      }
+    </style>
+    <linearGradient id="Dégradé_sans_nom_183" data-name="Dégradé sans nom 183" x1="0" y1="53.85" x2="113.27" y2="53.85" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#be1622"/>
+      <stop offset="1" stop-color="#f9b233"/>
+    </linearGradient>
+  </defs>
+  <path class="cls-3" d="M0,0h54.1l6.12,20.48-54.1.38L0,0ZM92.52,64.94c-1.53,9.7-8.43,18.16-18.46,21.19-13.96,4.22-28.71-3.68-32.93-17.64l-.57-1.9-12.68-42.22H6.75l12.68,42.89c.58,1.95,1.56,5.08,1.89,6.24l.54,1.78c4.83,14.93,16.5,25.82,30.47,30.24,8.69,2.75,18.26,3,27.64.16s17.22-8.35,22.93-15.46c5.91-7.35,9.54-16.4,10.24-25.94.41-5.58-.17-11.32-1.89-17-.13-.44-.74-2.45-1.01-3.34l-3.2-10.6L96.96,0l-21.13.04.72,2.38,9.36,31.59,3.2,10.6,2.69,8.89s0,0-.01,0c1.11,3.83,1.31,7.72.72,11.42"/>
+  <text class="cls-2" transform="translate(23.42 116.42)"><tspan class="cls-4" x="0" y="0">SU</tspan><tspan class="cls-5" x="58.36" y="0">P</tspan><tspan class="cls-1" x="86.15" y="0">.</tspan></text>
+</svg>

resources/sass/back/app.scss

@@ -6,76 +6,76 @@
 @layer base {
   .light {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --foreground: 10 50% 8%;
+    --muted: 10 20% 95%;
+    --muted-foreground: 10 10% 45%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 10 50% 8%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --primary: 211.62 98.82% 33.14%;
+    --card-foreground: 10 50% 8%;
+    --border: 10 15% 88%;
+    --input: 10 15% 88%;
+    --primary: 10 75% 29%;
     --primary-foreground: 0 0% 96%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --secondary: 10 20% 94%;
+    --secondary-foreground: 10 30% 15%;
+    --accent: 10 20% 94%;
+    --accent-foreground: 10 30% 15%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 98%;
     --successive: 113 100% 38%;
-    --successive-foreground: 210 40% 98%;
+    --successive-foreground: 0 0% 98%;
     --informative: 207 69% 48%;
-    --informative-foreground: 210 40% 98%;
+    --informative-foreground: 0 0% 98%;
     --preventive: 46 100% 50%;
-    --preventive-foreground: 210 40% 98%;
-    --ring: 222.2 84% 4.9%;
+    --preventive-foreground: 46 50% 10%;
+    --ring: 10 75% 29%;
     --radius: 0.5rem;
-    --sidebar-background: 211.62 98.82% 33.14%;
+    --sidebar-background: 10 75% 29%;
     --sidebar-foreground: 0 0% 96%;
-    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary: 10 50% 15%;
     --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 10 30% 38%;
+    --sidebar-accent-foreground: 0 0% 95%;
+    --sidebar-border: 10 40% 22%;
+    --sidebar-ring: 10 75% 55%;
   }
 
   .dark {
-    --background: 240 5.9% 10%;
-    --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --card: 240 5.9% 10%;
-    --card-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --primary: 222.2 84% 4.9%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --successive: 128 63% 31%;
-    --successive-foreground: 210 40% 98%;
-    --informative: 212 50% 45%;
-    --informative-foreground: 210 40% 98%;
-    --preventive: 41 64% 56%;
-    --preventive-foreground: 210 40% 98%;
-    --ring: 212.7 26.8% 83.9%;
+    --background: 10 12% 12%;
+    --foreground: 10 15% 85%;
+    --muted: 10 10% 18%;
+    --muted-foreground: 15 10% 52%;
+    --popover: 10 12% 13%;
+    --popover-foreground: 10 15% 85%;
+    --card: 10 12% 13%;
+    --card-foreground: 10 15% 85%;
+    --border: 10 10% 22%;
+    --input: 10 10% 22%;
+    --primary: 10 75% 55%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 10 10% 20%;
+    --secondary-foreground: 10 15% 72%;
+    --accent: 10 10% 20%;
+    --accent-foreground: 10 15% 72%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+    --successive: 113 60% 45%;
+    --successive-foreground: 0 0% 98%;
+    --informative: 207 69% 55%;
+    --informative-foreground: 0 0% 98%;
+    --preventive: 46 90% 50%;
+    --preventive-foreground: 46 50% 10%;
+    --ring: 10 75% 55%;
     --radius: 0.5rem;
-    --sidebar-background: 222.2 84% 4.9%;
-    --sidebar-foreground: 210 40% 98%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-background: 10 45% 14%;
+    --sidebar-foreground: 10 15% 85%;
+    --sidebar-primary: 10 75% 55%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 10 15% 22%;
+    --sidebar-accent-foreground: 10 15% 72%;
+    --sidebar-border: 10 10% 22%;
+    --sidebar-ring: 10 75% 55%;
   }
 
   * {
@@ -112,7 +112,7 @@ html {
 .table-actions {
   th:last-child,
   td:last-child {
-    @apply bg-gray-50 dark:bg-gray-900 sticky top-0 right-0 w-[72px];
+    @apply bg-muted dark:bg-muted sticky top-0 right-0 w-[72px];
   }
 }
 

resources/ts/back/Components/ApplicationLogo.tsx

@@ -3,9 +3,9 @@ import { Link } from "@inertiajs/react";
 import { route } from "ziggy-js";
 // * Other
 import { useTheme } from "@/back/providers/ThemeProvider";
-import logoUwilCMSLight from "&/images/logos/uwil-cms-light.svg";
-import logoUwilCMSDark from "&/images/logos/uwil-cms-dark.svg";
-import logoTinyUwilCMS from "&/images/logos/uwil-cms-light-icon.svg";
+import logoUwilSupportLight from "&/images/logos/uwil-support-light.svg";
+import logoUwilSupportDark from "&/images/logos/uwil-support-dark.svg";
+import logoTinyUwilSupport from "&/images/logos/uwil-support-light-icon.svg";
 
 type ApplicationLogoProps = {
   forceLight?: boolean;
@@ -21,9 +21,9 @@ type ApplicationLogoProps = {
  * @return string
  */
 function getLogo(isCollapsed: boolean, forceLight: boolean, theme: string) {
-  if (isCollapsed) return logoTinyUwilCMS;
-  if (forceLight || theme === "dark") return logoUwilCMSLight;
-  return logoUwilCMSDark;
+  if (isCollapsed) return logoTinyUwilSupport;
+  if (forceLight || theme === "dark") return logoUwilSupportLight;
+  return logoUwilSupportDark;
 }
 
 export default function ApplicationLogo({
@@ -42,7 +42,7 @@ export default function ApplicationLogo({
       <img
         src={logo}
         alt="UWIL CMS logo"
-        className={`rounded-md w-auto mx-auto ${isCollapsed ? "h-full" : "max-h-full"}`}
+        className={`w-auto mx-auto ${isCollapsed ? "h-full" : "max-h-full"}`}
       />
     </Link>
   );

resources/ts/back/Pages/Dashboard/Index.tsx

@@ -1,5 +1,5 @@
 // * Packages
-import { AlertCircleIcon, SquareArrowOutUpRightIcon } from "lucide-react";
+import { SquareArrowOutUpRightIcon } from "lucide-react";
 import { usePage } from "@inertiajs/react";
 // * Components shadcn
 import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
@@ -9,15 +9,12 @@ import {
   CardDescription,
   CardHeader,
 } from "@/components/ui/card";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 // * Other
 import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
 import useTrans from "@/hooks/use-translations";
 import { AppEnv } from "@/types/global";
 import logoUwilReportLight from "&/images/logos/uwil-report-light.svg";
 import logoUwilReportDark from "&/images/logos/uwil-report-dark.svg";
-import logoUwilSupportLight from "&/images/logos/uwil-support-light.svg";
-import logoUwilSupportDark from "&/images/logos/uwil-support-dark.svg";
 
 export default function Dashboard() {
   const appEnv = usePage().props.appEnv as AppEnv;
@@ -29,32 +26,11 @@ export default function Dashboard() {
       label: "UWIL Report",
       link: "https://report.uwil.fr",
     },
-    {
-      image: theme === "dark" ? logoUwilSupportLight : logoUwilSupportDark,
-      description: useTrans("uwil-backend::back.uwil_support_desc"),
-      label: "UWIL Support",
-      link: "https://support.uwil.fr",
-    },
   ];
-  const productionTitle = useTrans("uwil-backend::back.warning");
-  const productionDescription = useTrans(
-    "uwil-backend::back.warning_production",
-  );
   const uwilTooltip = useTrans("uwil-backend::back.uwil_util_tooltip");
 
   return (
     <AuthenticatedLayout title={useTrans("uwil-backend::back.dashboard")}>
-      {appEnv.mode === "production" && (
-        <Alert variant="destructive" className="mb-4">
-          <AlertCircleIcon className="h-4 w-4" />
-          <AlertTitle className="font-bold">{productionTitle}</AlertTitle>
-          <AlertDescription
-            dangerouslySetInnerHTML={{
-              __html: productionDescription,
-            }}
-          />
-        </Alert>
-      )}
       <p
         className="leading-7"
         // eslint-disable-next-line react/no-danger

resources/views/back/app.blade.php

@@ -11,7 +11,7 @@
     <x-uwil-common::head.canonical />
     <x-uwil-common::head.hreflang />
     <x-uwil-common::head.og />
-    <x-uwil-common::head.favicon mask-icon-color="#0150a8" tile-color="#0150a8" theme-color="#0150a8" />
+    <x-uwil-common::head.favicon prefix="favicons-back" mask-icon-color="#0150a8" tile-color="#0150a8" theme-color="#0150a8" />
 
     <!-- Scripts -->
     @routes(nonce: $nonce ?? '')

resources/views/back/mails/link-reset-password.blade.php

@@ -7,9 +7,21 @@
 {{ __('auth.email_reset_link_expire', ['count' => config('auth.passwords.users.expire')]) }}
 
 {{ __('auth.email_button_redirect') }}
-@component('mail::button', ['url' => $url])
-<strong>{{ __('auth.email_reset_password') }}</strong>
-@endcomponent
+<div style="text-align: center; margin: 24px 0;">
+    <a href="{{ $url }}"
+       target="_blank"
+       style="
+           background-color: hsl(10, 75%, 29%);
+           color: #ffffff;
+           padding: 12px 24px;
+           border-radius: 6px;
+           text-decoration: none;
+           font-weight: bold;
+           display: inline-block;
+       ">
+        {{ __('auth.email_reset_password') }}
+    </a>
+</div>
 
 {{ __('auth.email_wrong_destination') }}
 

resources/views/back/mails/reset-password.blade.php

@@ -6,9 +6,21 @@
 {{ __('auth.email_reset_complete') }}
 
 {{ __('auth.email_new_connection') }}
-@component('mail::button', ['url' => route('back.login')])
-<strong>{{ __('auth.login') }}</strong>
-@endcomponent
+<div style="text-align: center; margin: 24px 0;">
+    <a href="{{ route('back.login') }}"
+       target="_blank"
+       style="
+           background-color: hsl(10, 75%, 29%);
+           color: #ffffff;
+           padding: 12px 24px;
+           border-radius: 6px;
+           text-decoration: none;
+           font-weight: bold;
+           display: inline-block;
+       ">
+        {{ __('auth.login') }}
+    </a>
+</div>
 
 {{ config('app.name') }}.
 

resources/views/vendor/mail/html/header.blade.php

@@ -0,0 +1,11 @@
+<tr>
+    <td class="header">
+        <a href="{{ $url }}" style="display: inline-block;">
+            <img src="data:image/svg+xml;base64,{{ base64_encode(file_get_contents(resource_path('assets/images/logos/uwil-support-dark.svg'))) }}"
+                alt="{{ config('app.name') }}"
+                width="auto"
+                height="60"
+                style="height: 60px; width: auto; display: block;">
+        </a>
+    </td>
+</tr>

vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
             targets: [
                 {
                     src: path.normalize("resources/favicons/back/*"),
-                    dest: path.normalize("public/favicon-back")
+                    dest: path.normalize("public/favicons-back")
                 },
             ],
             copyOnce: true,