- add favicons

- fix template colors
-add npm bootstrap5

package-lock.json

@@ -6,6 +6,7 @@
         "": {
             "devDependencies": {
                 "axios": "^0.21.1",
+                "bootstrap": "^5.0.2",
                 "cross-env": "^7.0",
                 "fslightbox": "^3.2.3",
                 "laravel-mix": "^6.0.16",
@@ -1714,6 +1715,17 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.9.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+            "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+            "dev": true,
+            "peer": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@trysound/sax": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
@@ -2724,6 +2736,19 @@
             "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
             "dev": true
         },
+        "node_modules/bootstrap": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz",
+            "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q==",
+            "dev": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/bootstrap"
+            },
+            "peerDependencies": {
+                "@popperjs/core": "^2.9.2"
+            }
+        },
         "node_modules/brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -11112,6 +11137,13 @@
                 "fastq": "^1.6.0"
             }
         },
+        "@popperjs/core": {
+            "version": "2.9.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+            "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+            "dev": true,
+            "peer": true
+        },
         "@trysound/sax": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
@@ -11977,6 +12009,13 @@
             "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
             "dev": true
         },
+        "bootstrap": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz",
+            "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q==",
+            "dev": true,
+            "requires": {}
+        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -11,6 +11,7 @@
     },
     "devDependencies": {
         "axios": "^0.21.1",
+        "bootstrap": "^5.0.2",
         "cross-env": "^7.0",
         "fslightbox": "^3.2.3",
         "laravel-mix": "^6.0.16",

public/safari-pinned-tab.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M690 5010 c-276 -72 -493 -290 -572 -575 l-23 -80 -3 -1725 c-2
+-1169 0 -1755 8 -1817 12 -109 54 -240 101 -319 48 -80 169 -206 250 -259 82
+-55 156 -86 264 -111 76 -18 160 -19 1845 -19 l1765 0 85 22 c290 77 506 293
+583 583 l22 85 0 1770 c0 1690 -1 1774 -19 1850 -39 169 -107 288 -235 407
+-94 88 -162 130 -278 172 l-88 31 -1815 2 c-1768 2 -1817 2 -1890 -17z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Support Web",
+    "short_name": "Support Web",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

resources/sass/_bootswatch.scss

@@ -0,0 +1,331 @@
+// Lumen 5.0.2
+// Bootswatch
+
+
+// Variables
+@import 'variables';
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+// Mixins
+
+@mixin shadow($width: 4px){
+  border-style: solid;
+  border-width: 0 1px $width 1px;
+}
+
+// Navbar
+
+.navbar {
+  @include shadow();
+
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      border-color: shade-color($value, 10%);
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  @include shadow();
+  text-transform: uppercase;
+
+  &:not(.disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+  }
+
+  &:not(.disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+    @include box-shadow(none);
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: $value;
+      }
+
+      &,
+      &:not(.disabled):hover,
+      &:not(.disabled):active,
+      &:focus {
+        border-color: shade-color($value, 10%);
+      }
+    }
+  }
+}
+
+[class*="btn-outline"] {
+  border-top-width: 1px;
+}
+
+.btn-group-vertical {
+  .btn + .btn {
+    &:hover {
+      margin-top: -1px;
+      border-top-width: 1px;
+    }
+
+    &:active {
+      margin-top: -1px;
+      border-top-width: 2px;
+    }
+  }
+}
+
+// Typography
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+.blockquote-footer {
+  color: $gray-600;
+}
+
+// Forms
+
+.form-control {
+  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
+}
+
+.input-group-sm {
+  > .input-group-prepend,
+  > .input-group-append {
+    .btn {
+      font-size: $btn-font-size-sm;
+    }
+  }
+}
+
+// Navs
+
+.nav {
+  .open > a,
+  .open > a:hover,
+  .open > a:focus {
+    border-color: transparent;
+  }
+}
+
+.nav-tabs {
+  .nav-link {
+    color: $body-color;
+
+    &,
+    &.disabled,
+    &.disabled:hover,
+    &.disabled:focus {
+      margin-top: 6px;
+      border-color: $nav-tabs-border-color;
+      transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out;
+    }
+
+    &:not(.disabled):hover,
+    &:not(.disabled):focus,
+    &.active {
+      padding-bottom: add(.5rem, 6px);
+      border-bottom-color: transparent;
+      margin-top: 0;
+    }
+  }
+
+  &.nav-justified > li {
+    vertical-align: bottom;
+  }
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  @include shadow();
+  border-top-width: 1px;
+  @include box-shadow(none);
+}
+
+.breadcrumb {
+  border-color: shade-color($breadcrumb-bg, 10%);
+  @include shadow();
+}
+
+.pagination {
+  > li > a,
+  > li > span {
+    position: relative;
+    top: 0;
+    @include shadow();
+    color: $pagination-color;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    &:hover,
+    &:focus {
+      top: 1px;
+      border-bottom-width: 3px;
+      text-decoration: none;
+    }
+
+    &:active {
+      top: 2px;
+      border-bottom-width: 2px;
+    }
+  }
+
+  > .disabled > a,
+  > .disabled > span {
+    &:hover {
+      top: 0;
+      @include shadow();
+    }
+
+    &:active {
+      top: 0;
+      @include shadow();
+    }
+  }
+}
+
+.pager {
+  > li > a,
+  > li > span,
+  > .disabled > a,
+  > .disabled > span {
+    &,
+    &:hover,
+    &:active {
+      border-left-width: 2px;
+      border-right-width: 2px;
+    }
+  }
+}
+
+// Indicators
+
+.btn-close {
+  text-decoration: none;
+  opacity: .4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.alert {
+  color: $white;
+  @include shadow();
+
+  &-primary {
+    background-color: $primary;
+    border-color: shade-color($primary, 10%);
+  }
+
+  &-secondary {
+    background-color: $secondary;
+    border-color: shade-color($secondary, 10%);
+  }
+
+  &-success {
+    background-color: $success;
+    border-color: shade-color($success, 10%);
+  }
+
+  &-info {
+    background-color: $info;
+    border-color: shade-color($info, 10%);
+  }
+
+  &-danger {
+    background-color: $danger;
+    border-color: shade-color($danger, 10%);
+  }
+
+  &-warning {
+    background-color: $warning;
+    border-color: shade-color($warning, 10%);
+  }
+
+  &-dark {
+    background-color: $dark;
+    border-color: shade-color($dark, 10%);
+  }
+
+  &-light {
+    background-color: $light;
+    border-color: shade-color($light, 10%);
+  }
+
+  .alert-link {
+    font-weight: 400;
+    color: $white;
+    text-decoration: underline;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+a.list-group-item {
+  &-success {
+    &.active {
+      background-color: $success;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($success, 10%);
+    }
+  }
+
+  &-warning {
+    &.active {
+      background-color: $warning;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($warning, 10%);
+    }
+  }
+
+  &-danger {
+    &.active {
+      background-color: $danger;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($danger, 10%);
+    }
+  }
+}
+
+.modal,
+.toast {
+  .btn-close {
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+  }
+}

resources/sass/_variables.scss

@@ -1,19 +1,106 @@
-// Body
-$body-bg: #f8fafc;
+@use "sass:color";
 
-// Typography
-$font-family-sans-serif: 'Nunito', sans-serif;
-$font-size-base: 0.9rem;
-$line-height-base: 1.6;
+// Lumen 5.0.2
+// Bootswatch
 
-// Colors
-$blue: #3490dc;
-$indigo: #6574cd;
-$purple: #9561e2;
-$pink: #f66d9b;
-$red: #e3342f;
-$orange: #f6993f;
-$yellow: #ffed4a;
-$green: #38c172;
-$teal: #4dc0b5;
-$cyan: #6cb2eb;
+$theme: "lumen" !default;
+
+
+//
+// Color system
+//
+$lightness: -30%;
+$saturation: -9%;
+
+@function lowerColor($color) {
+    @return color.scale($color, $lightness: $lightness, $saturation: $saturation);
+}
+@function lowerBrightness($color) {
+    @return color.scale($color, $lightness: $lightness - 20%);
+}
+
+
+$white:    #fff !default;
+$gray-100: lowerBrightness(#f6f6f6) !default;
+$gray-200: lowerBrightness(#f0f0f0) !default;
+$gray-300: lowerBrightness(#dee2e6) !default;
+$gray-400: lowerBrightness(#ced4da) !default;
+$gray-500: lowerBrightness(#adb5bd) !default;
+$gray-600: lowerBrightness(#999) !default;
+$gray-700: lowerBrightness(#555) !default;
+$gray-800: lowerBrightness(#333) !default;
+$gray-900: lowerBrightness(#222) !default;
+$black:    #000 !default;
+
+$blue:    lowerColor(#158cba) !default;
+$indigo:  lowerColor(#6610f2) !default;
+$purple:  lowerColor(#6f42c1) !default;
+$pink:    lowerColor(#e83e8c) !default;
+$red:     lowerColor(#ff4136) !default;
+$orange:  lowerColor(#fd7e14) !default;
+$yellow:  lowerColor(#ff851b) !default;
+$green:   lowerColor(#28b62c) !default;
+$teal:    lowerColor(#20c997) !default;
+$cyan:    lowerColor(#75caeb) !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-700 !default;
+
+$min-contrast-ratio:   1.95 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Tables
+
+$table-bg-scale:              0 !default;
+
+// Buttons
+
+$btn-font-weight:             700 !default;
+
+// Dropdowns
+
+$dropdown-link-color:         rgba(0, 0, 0, .5) !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-900 !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Pagination
+
+$pagination-color:                  $gray-700 !default;
+$pagination-bg:                     $white !default;
+$pagination-hover-color:            $pagination-color !default;
+$pagination-hover-bg:               $pagination-bg !default;
+$pagination-active-border-color:    darken($primary, 5%) !default;
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $pagination-bg !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $pagination-bg !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Modals
+
+$modal-content-border-color:        rgba($black, .1) !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;

resources/sass/app.scss

@@ -16,26 +16,17 @@ a.col_sort {
     max-width: 1340px !important;
 }
 
-
-.alert-success .text-muted {
-    //color : #176319 !important;
-    color : color.adjust(#28b62c, $lightness: -20%) !important;
+// FOOTER
+body {
+    position: relative;
+    min-height: calc(100vh);
 }
-
-.alert-primary {
-    .text-muted {
-        //color : #0b4a63 !important;
-        color : color.adjust(#158cba, $lightness: -20%) !important;
-    }
-    .text-primary {
-        color : color.adjust(#158cba, $lightness: -20%) !important;
-    }
+#app {
+    padding-bottom: 8.5rem;
 }
-
-.alert-secondary .text-muted {
-    color : color.adjust(#f0f0f0, $lightness: -20%) !important;
-}
-
-.alert-danger .text-muted {
-    color : color.adjust(#ff4136, $lightness: -20%) !important;
+#footer {
+    position: absolute;
+    bottom: 0;
+    height: 4.5rem;
+    width: 100%;
 }

resources/sass/bootstrap.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "~bootstrap/scss/bootstrap";
+@import "bootswatch";

resources/views/layout/app.blade.php

@@ -4,11 +4,23 @@
     <meta charset="utf-8">
     <title>Support LDCWEB</title>
 
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0040a6">
+    <meta name="apple-mobile-web-app-title" content="Support Web">
+    <meta name="application-name" content="Support Web">
+    <meta name="msapplication-TileColor" content="#4c272c">
+    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js" integrity="sha256-551HBsteMvKOSqjUXSmRy/EOF0bBNbWB96b5L3Deh8A=" crossorigin="anonymous"></script>
 
     <!-- Styles -->
+    <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
-    <link rel="stylesheet" href="https://bootswatch.com/5/lumen/bootstrap.min.css" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.min.css" integrity="sha256-qpXwccFYncH5gTqXFe9EXZ8QeDw1Re68bbNVfFZzIzg=" crossorigin="anonymous">
     @crudPoliciesCSS
 </head>
@@ -19,6 +31,7 @@
             @yield('content')
         </div>
     </div>
+    @include('layout.footer')
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://bootswatch.com/_vendor/bootstrap/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
     @stack('scriptsConstants')

resources/views/layout/footer.blade.php

@@ -0,0 +1,7 @@
+<footer id="footer" class="text-center text-lg-start">
+    <div class="text-center p-2" style="background-color: rgba(0, 0, 0, 0.05);">
+        <img src="{{ asset('images/supportweb_128.png') }}" alt="{{ config('app.name', 'Laravel') }}" width="56">
+        © {{ date('Y') }}
+        <span class="text-reset fw-bold">LDC Web Services</span>
+    </div>
+</footer>

resources/views/layout/nav.blade.php

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
+<nav class="navbar navbar-expand-md navbar-dark bg-dark">
     <div class="container">
         <a class="navbar-brand" href="{{ url('/') }}">
             @if(auth()->user()->site ?? false)
@@ -28,17 +28,17 @@
             @endif
             <ul class="navbar-nav me-auto">
                 <li class="nav-item">
-                    <span class="nav-link text-primary font-weight-bold">{{ __('Tickets') }}</span>
+                    <span class="nav-link text-primary fw-bold">{{ __('Tickets') }}</span>
                 </li>
                 <li class="nav-item">
-                    <span class="nav-link text-dark">{{ __('Nouveau') }}&nbsp;:&nbsp;<span class="text-info">{{ $ticketsNew }}</span></span>
+                    <span class="nav-link text-light">{{ __('Nouveau') }}&nbsp;:&nbsp;<span class="text-info">{{ $ticketsNew }}</span></span>
                 </li>
                 <li class="nav-item">
-                    <span class="nav-link text-dark">{{ __('En cours') }}&nbsp;:&nbsp;<span class="text-info">{{ $ticketsInProgress }}</span></span>
+                    <span class="nav-link text-light">{{ __('En cours') }}&nbsp;:&nbsp;<span class="text-info">{{ $ticketsInProgress }}</span></span>
                 </li>
                 <li class="nav-item">
                     {{-- Mouhahahaha --}}
-                    <span class="nav-link text-dark">{{ __('Charge') }}&nbsp;:&nbsp;<span class="text-danger">{{ __('Elevée') }}</span></span>
+                    <span class="nav-link text-light">{{ __('Charge') }}&nbsp;:&nbsp;<span class="text-danger">{{ __('Elevée') }}</span></span>
                     {{-- <span class="nav-link text-dark">Charge&nbsp;:&nbsp;<span class="text-info">Stable</span></span> --}}
                 </li>
             </ul>

resources/views/ticket/show.blade.php

@@ -95,25 +95,17 @@
         </h4>
         @foreach ($messages as $message)
             @if ($message->user_id === null)
-            <div class="offset-md-3 col-md-6 alert alert-secondary text-center">
+            <div class="offset-md-3 col-md-6 alert alert-info text-center text-dark">
                 {!! nl2br(e($message->message)) !!} - Le {{ \Carbon\Carbon::parse($message->created_at)->format('d/m/Y à H:i')}}
-                <small class="text-muted">(Message système)</small>
+                <small class="fw-bold">(Message système)</small>
             </div>
-            @elseif ($message->user_id === Auth::user()->id)
-            <div class="offset-md-4 col-md-8 alert alert-dark">
+            @else
+            <div class="@if($message->user_id === Auth::user()->id)offset-md-4 alert-dark @else alert-light @endif col-md-8 alert">
                 {!! Utils::plainToHtml($message->message) !!}
                 @if ($message->file !== null)
                 <br><a data-fslightbox="gallery" href="{{ asset($message->file) }}" target="_blank">Ouvrir la pièce jointe</a><br>
                 @endif<br><br>
-                <small class="text-muted">Le {{ \Carbon\Carbon::parse($message->created_at)->format('d/m/Y à H:i')}} par {{ $message->user->name }}</small>
-            </div>
-            @else
-            <div class="col-md-8 alert alert-success">
-                {!! Utils::plainToHtml($message->message) !!}
-                @if ($message->file !== null)
-                    <br><a data-fslightbox="gallery" href="{{ asset($message->file) }}" target="_blank">Ouvrir la pièce jointe</a><br>
-                @endif<br><br>
-                <small class="text-muted">Le {{ \Carbon\Carbon::parse($message->created_at)->format('d/m/Y à H:i')}} par {{ $message->user->name }}</small>
+                <small class="text-muted fw-bold">Le {{ \Carbon\Carbon::parse($message->created_at)->format('d/m/Y à H:i')}} par {{ $message->user->name }}</small>
             </div>
             @endif
         @endforeach

webpack.mix.js

@@ -4,6 +4,7 @@ require('laravel-mix-polyfill');
 // mix Backend
 mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
+    .sass('resources/sass/bootstrap.scss', 'public/css')
     .vue()
     .polyfill({
         enabled: true,