From 4142c0b6c34cdcb3ddab68b3446de7ba55166ac8 Mon Sep 17 00:00:00 2001 From: "Yassine R." Date: Wed, 13 Aug 2025 21:04:38 +0200 Subject: [PATCH 1/7] feat(mon-domifa): init dsfr --- packages/portail-admins/angular.json | 11 +- packages/portail-admins/package.json | 1 + .../portail-admins/src/app/app.component.html | 35 +- .../custom-toastr/custom-toastr.component.css | 174 -------- .../custom-toastr.component.html | 34 +- .../custom-toastr.component.scss | 27 ++ .../custom-toastr/custom-toastr.component.ts | 2 +- .../shared/constants/FA_ICONS.const.ts | 3 +- .../shared/services/custom-toast.service.ts | 2 +- .../src/app/modules/shared/shared.module.ts | 8 + .../src/assets/css/bootstrap-custom.css | 199 --------- .../src/assets/css/bootstrap-custom.scss | 405 ++++++++++++++++++ .../portail-admins/src/assets/css/fonts.css | 50 --- .../portail-admins/src/assets/css/fonts.scss | 25 ++ .../portail-admins/src/assets/css/forms.scss | 2 - .../portail-admins/src/assets/css/icons.css | 114 ----- .../portail-admins/src/assets/css/main.scss | 25 +- .../src/assets/icones/avispassage.svg | 6 - .../src/assets/icones/ban-solid.svg | 1 - .../src/assets/icones/calendar.svg | 8 - .../src/assets/icones/colis.svg | 7 - .../src/assets/icones/courrier.svg | 4 - .../src/assets/icones/danger.svg | 13 - .../src/assets/icones/distribution.svg | 5 - .../src/assets/icones/fleche-droite.svg | 3 - .../src/assets/icones/fleche-gauche.svg | 3 - .../src/assets/icones/icon-heart.png | Bin 1424 -> 0 bytes .../src/assets/icones/moins.svg | 3 - .../portail-admins/src/assets/icones/note.svg | 4 - .../src/assets/icones/passage.svg | 10 - .../src/assets/icones/phone.svg | 3 - .../portail-admins/src/assets/icones/plus.svg | 4 - .../src/assets/icones/profil/boite-lettre.svg | 9 - .../src/assets/icones/profil/contact.svg | 4 - .../src/assets/icones/profil/dossier.svg | 9 - .../src/assets/icones/profil/informations.svg | 7 - .../icones/profil/infos-complementaires.svg | 8 - .../src/assets/icones/reception.svg | 5 - .../src/assets/icones/recommande.svg | 9 - packages/portail-usagers/angular.json | 6 +- packages/portail-usagers/package.json | 1 + .../src/app/app.component.html | 27 +- .../shared/constants/FA_ICONS.const.ts | 3 +- .../section-links.component.html | 21 +- .../section-links/section-links.component.ts | 2 - .../portail-usagers/src/assets/css/fonts.scss | 31 +- .../portail-usagers/src/assets/css/main.scss | 231 +++++++++- yarn.lock | 32 ++ 48 files changed, 767 insertions(+), 829 deletions(-) delete mode 100644 packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.css create mode 100644 packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.scss delete mode 100644 packages/portail-admins/src/assets/css/bootstrap-custom.css create mode 100644 packages/portail-admins/src/assets/css/bootstrap-custom.scss delete mode 100644 packages/portail-admins/src/assets/css/fonts.css create mode 100644 packages/portail-admins/src/assets/css/fonts.scss delete mode 100644 packages/portail-admins/src/assets/css/icons.css delete mode 100644 packages/portail-admins/src/assets/icones/avispassage.svg delete mode 100644 packages/portail-admins/src/assets/icones/ban-solid.svg delete mode 100644 packages/portail-admins/src/assets/icones/calendar.svg delete mode 100644 packages/portail-admins/src/assets/icones/colis.svg delete mode 100644 packages/portail-admins/src/assets/icones/courrier.svg delete mode 100644 packages/portail-admins/src/assets/icones/danger.svg delete mode 100644 packages/portail-admins/src/assets/icones/distribution.svg delete mode 100644 packages/portail-admins/src/assets/icones/fleche-droite.svg delete mode 100644 packages/portail-admins/src/assets/icones/fleche-gauche.svg delete mode 100644 packages/portail-admins/src/assets/icones/icon-heart.png delete mode 100644 packages/portail-admins/src/assets/icones/moins.svg delete mode 100644 packages/portail-admins/src/assets/icones/note.svg delete mode 100644 packages/portail-admins/src/assets/icones/passage.svg delete mode 100644 packages/portail-admins/src/assets/icones/phone.svg delete mode 100644 packages/portail-admins/src/assets/icones/plus.svg delete mode 100644 packages/portail-admins/src/assets/icones/profil/boite-lettre.svg delete mode 100644 packages/portail-admins/src/assets/icones/profil/contact.svg delete mode 100644 packages/portail-admins/src/assets/icones/profil/dossier.svg delete mode 100644 packages/portail-admins/src/assets/icones/profil/informations.svg delete mode 100644 packages/portail-admins/src/assets/icones/profil/infos-complementaires.svg delete mode 100644 packages/portail-admins/src/assets/icones/reception.svg delete mode 100644 packages/portail-admins/src/assets/icones/recommande.svg diff --git a/packages/portail-admins/angular.json b/packages/portail-admins/angular.json index d7d2c18155..6557d77a79 100644 --- a/packages/portail-admins/angular.json +++ b/packages/portail-admins/angular.json @@ -22,14 +22,15 @@ "assets": ["src/assets"], "styles": [ "src/styles.scss", - "src/assets/css/bootstrap-custom.css", + "./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.main.min.css", + "./node_modules/@gouvfr/dsfr/dist/utility/utility.main.min.css", + "src/assets/css/bootstrap-custom.scss", "src/assets/css/forms.scss", - "src/assets/css/fonts.css", + "src/assets/css/fonts.scss", "src/assets/css/main.scss", - "src/assets/css/print.css", - "src/assets/css/icons.css" + "src/assets/css/print.css" ], - "scripts": [], + "scripts": ["./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"], "aot": false, "vendorChunk": true, "extractLicenses": false, diff --git a/packages/portail-admins/package.json b/packages/portail-admins/package.json index f0d5fab444..39015280ce 100644 --- a/packages/portail-admins/package.json +++ b/packages/portail-admins/package.json @@ -28,6 +28,7 @@ "@angular/platform-browser-dynamic": "^18.2.13", "@angular/router": "^18.2.13", "@domifa/common": "workspace:^", + "@edugouvfr/ngx-dsfr": "^1.14.3", "@fortawesome/angular-fontawesome": "0.15.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", diff --git a/packages/portail-admins/src/app/app.component.html b/packages/portail-admins/src/app/app.component.html index 5704311862..ff13616f71 100644 --- a/packages/portail-admins/src/app/app.component.html +++ b/packages/portail-admins/src/app/app.component.html @@ -112,6 +112,7 @@ +
@@ -169,11 +170,6 @@
  • {{ link.label }} -
    • @@ -210,10 +206,6 @@ rel="noopener external" title="info.gouv.fr - nouvelle fenêtre" >info.gouv.fr -
  • @@ -224,11 +216,7 @@ rel="noopener external" title="service-public.fr - nouvelle fenêtre" >service-public.fr - +
  • legifrance.gouv.fr - +
  • data.gouv.fr - +
    • @@ -277,12 +257,7 @@ target="_blank" rel="noopener noreferrer" >licence etalab-2.0 - +

    diff --git a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.css b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.css deleted file mode 100644 index b26096b778..0000000000 --- a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.css +++ /dev/null @@ -1,174 +0,0 @@ -.toast-title { - font-weight: bold; -} - -.toast-message { - -ms-word-wrap: break-word; - word-wrap: break-word; -} - -.toast-message a, -.toast-message label { - color: #ffffff; -} - -.toast-message a:hover { - color: #cccccc; - text-decoration: none; -} - -.toast-top-center { - top: 0; - right: 0; - width: 100%; -} -.toast-bottom-center { - bottom: 0; - right: 0; - width: 100%; -} -.toast-top-full-width { - top: 0; - right: 0; - width: 100%; -} -.toast-bottom-full-width { - bottom: 0; - right: 0; - width: 100%; -} -.toast-top-left { - top: 12px; - left: 12px; -} -.toast-top-right { - top: 12px; - right: 12px; -} -.toast-bottom-right { - right: 12px; - bottom: 12px; -} -.toast-bottom-left { - bottom: 12px; - left: 12px; -} -#toast-container { - position: fixed; - z-index: 999999; - pointer-events: none; - /*overrides*/ -} -#toast-container * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#toast-container > div { - position: relative; - pointer-events: auto; - overflow: hidden; - margin: 0 0 6px; - padding: 15px; - width: 320px; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - border-radius: 6px; - -moz-box-shadow: 0 0 12px #999999; - -webkit-box-shadow: 0 0 12px #999999; - box-shadow: 0 0 12px #999999; - color: #ffffff; -} - -#toast-container > div.rtl { - direction: rtl; - padding: 15px 50px 15px 15px; - background-position: right 15px center; -} - -#toast-container > div:hover { - -moz-box-shadow: 0 0 10px #000000; - -webkit-box-shadow: 0 0 10px #000000; - box-shadow: 0 0 10px #000000; - cursor: pointer; -} - -#toast-container.toast-top-center > div, -#toast-container.toast-bottom-center > div { - width: 300px; - margin-left: auto; - margin-right: auto; -} -#toast-container.toast-top-full-width > div, -#toast-container.toast-bottom-full-width > div { - width: 96%; - margin-left: auto; - margin-right: auto; -} - -.toast { - background-color: #030303; -} - -.toast-success { - background-color: var(--bs-green); -} - -.toast-error { - background-color: var(--bs-danger); -} - -.toast-info { - background-color: #2f96b4; -} - -.toast-warning { - color: black; - background-color: var(--orange); -} - -/*Responsive Design*/ -@media all and (max-width: 240px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 11em; - } - #toast-container > div.rtl { - padding: 8px 50px 8px 8px; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } - #toast-container .rtl .toast-close-button { - left: -0.2em; - right: 0.2em; - } -} -@media all and (min-width: 241px) and (max-width: 480px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 18em; - } - #toast-container > div.rtl { - padding: 8px 50px 8px 8px; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } - #toast-container .rtl .toast-close-button { - left: -0.2em; - right: 0.2em; - } -} -@media all and (min-width: 481px) and (max-width: 768px) { - #toast-container > div { - padding: 15px 15px 15px 50px; - width: 25em; - } - #toast-container > div.rtl { - padding: 15px 50px 15px 15px; - } -} diff --git a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.html b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.html index 07c5514b57..ccc8994d90 100644 --- a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.html +++ b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.html @@ -1,26 +1,14 @@ -
    -
    -
    -
    - -
    -
    -
    - {{ toast.message }} -
    -
    -
    -
    +
    +
    diff --git a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.scss b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.scss new file mode 100644 index 0000000000..8c7ce54d1c --- /dev/null +++ b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.scss @@ -0,0 +1,27 @@ +#toast-container { + position: fixed; + z-index: 999999; + pointer-events: none; + background-color: white; + padding: 0; + top: 10px; + left: 10px; + width: 500px; + /*overrides*/ + + .fr-alert { + width: 400px; + } +} + +/*Responsive Design*/ +@media all and (max-width: 240px) { + #toast-container .fr-alert { + width: 320px; + } +} +@media all and (min-width: 241px) and (max-width: 480px) { + #toast-container .fr-alert { + width: 320px; + } +} diff --git a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.ts b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.ts index d967dde5ec..83e247c41a 100644 --- a/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.ts +++ b/packages/portail-admins/src/app/modules/shared/components/custom-toastr/custom-toastr.component.ts @@ -11,7 +11,7 @@ import { CustomToastService } from "../../services"; @Component({ selector: "app-custom-toastr", templateUrl: "./custom-toastr.component.html", - styleUrls: ["./custom-toastr.component.css"], + styleUrls: ["./custom-toastr.component.scss"], animations: [fadeInOut], }) export class CustomToastrComponent implements OnInit, OnDestroy { diff --git a/packages/portail-admins/src/app/modules/shared/constants/FA_ICONS.const.ts b/packages/portail-admins/src/app/modules/shared/constants/FA_ICONS.const.ts index d5ace992dd..ebddc64078 100644 --- a/packages/portail-admins/src/app/modules/shared/constants/FA_ICONS.const.ts +++ b/packages/portail-admins/src/app/modules/shared/constants/FA_ICONS.const.ts @@ -26,7 +26,6 @@ import { faUserPlus, faExclamationTriangle, faSpinner, - faArrowUpRightFromSquare, faExternalLinkAlt, faKey, faLink, @@ -47,7 +46,7 @@ export const FA_ICONS: IconDefinition[] = [ faInfoCircle, faUserPlus, faCircleNotch, - faArrowUpRightFromSquare, + faComment, faSignInAlt, faCheck, diff --git a/packages/portail-admins/src/app/modules/shared/services/custom-toast.service.ts b/packages/portail-admins/src/app/modules/shared/services/custom-toast.service.ts index 198d68be95..c6e3c36da3 100644 --- a/packages/portail-admins/src/app/modules/shared/services/custom-toast.service.ts +++ b/packages/portail-admins/src/app/modules/shared/services/custom-toast.service.ts @@ -40,6 +40,6 @@ export class CustomToastService { setTimeout(() => { this.toast.display = false; this.toast$.next(this.toast); - }, 6000); + }, 60000); } } diff --git a/packages/portail-admins/src/app/modules/shared/shared.module.ts b/packages/portail-admins/src/app/modules/shared/shared.module.ts index 294c82f540..5e81adf8ad 100644 --- a/packages/portail-admins/src/app/modules/shared/shared.module.ts +++ b/packages/portail-admins/src/app/modules/shared/shared.module.ts @@ -17,6 +17,7 @@ import { import { FonctionSelectionComponent } from "./components/fonction-selection/fonction-selection.component"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { FonctionFormatPipe } from "./pipes/fonction-format.pipe"; +import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr"; @NgModule({ declarations: [ @@ -44,6 +45,13 @@ import { FonctionFormatPipe } from "./pipes/fonction-format.pipe"; ReactiveFormsModule, FonctionFormatPipe, ], + imports: [ + DsfrAlertModule, + CommonModule, + FontAwesomeModule, + FormsModule, + ReactiveFormsModule, + ], providers: [AdminStructuresApiClient], }) export class SharedModule { diff --git a/packages/portail-admins/src/assets/css/bootstrap-custom.css b/packages/portail-admins/src/assets/css/bootstrap-custom.css deleted file mode 100644 index 8118bcddfb..0000000000 --- a/packages/portail-admins/src/assets/css/bootstrap-custom.css +++ /dev/null @@ -1,199 +0,0 @@ -.badge { - font-size: 0.8rem; -} - -.alert { - position: relative; - display: flex; - align-items: left; - justify-content: left; - word-break: break-word; - padding: 0.75rem; -} - -.alert .svg-icon { - display: table-cell; - margin-right: 1rem; - width: 35px; - height: 35px; - padding: 6px; - box-sizing: border-box; - -webkit-mask-size: 98%; - mask-size: 98%; -} - -.alert div, -.alert span { - padding-left: 5px; - flex-shrink: 1; - align-self: center; -} - -.alert a { - color: black; -} - -.alert p { - margin: auto 0 !important; -} - -.alert-info .svg-icon { - background-color: var(--bs-primary); -} - -.alert-warning .svg-icon { - background-color: #f0870c; -} - -.alert-danger .svg-icon { - background-color: #f00c0c; -} - -.alert-success { - color: #155724; - background-color: #d4edda; - border-color: #c3e6cb; -} - -.alert-success hr { - border-top-color: #b1dfbb; -} - -.alert-success .alert-link { - color: #0b2e13; -} - -.alert-info { - color: #084298; - background-color: #cfe2ff; - border-color: #b6d4fe; -} - -.alert-warning { - color: #664d03; - background-color: #fff3cd; - border-color: #ffecb5; -} - -.alert-info hr { - border-color: #b6d4fe; -} - -.alert-info .alert-link { - color: #062c33; -} - -.alert-danger { - color: #47090e; - background-color: #f8d7da; - border-color: #f5c2c7; -} - -.alert-danger hr { - border-top-color: #f1b0b7; -} - -.alert-danger .alert-link { - color: #491217; -} - -.close { - opacity: 1 !important; -} - -#modal-title { - font-style: normal; - font-weight: bold; - font-size: 1.4rem; - margin-bottom: 0.2rem; - margin-top: 0.2rem; -} - -@media (min-width: 576px) { - .modal-dialog { - max-width: 780px; - margin: 1.75rem auto; - } -} - -@media all and (max-width: 480px) { - .head-page { - text-align: center; - } -} - -small { - color: #6e6e6e !important; -} - -.outside { - opacity: 1 !important; -} - -.ngb-dp-weekday { - color: var(--bs-primary) !important; -} - -.table > :not(:first-child) { - border-top: 0 !important; -} - -.table th .btn-primary { - background-color: var(--bs-primary); -} - -thead th { - font-style: normal; - font-weight: 700; - border-bottom: 1px solid #e5e7ef; - transition: all 0.2s ease; -} - -.show .dropdown-toggle, -.dropdown-toggle:focus, -.dropdown-toggle:active { - color: var(--bs-primary) !important; - border-color: var(--bs-primary) !important; - background-color: white !important; - box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5); -} - -.dropdown-menu { - padding: 0 !important; - margin: 0; - border-radius: 5px; - background: #ffffff; - border: 1px solid #ececec; - box-shadow: 0 0 0 0.25rem rgba(65, 101, 245, 0.077); -} - -.dropdown-item:hover { - background-color: #9b9b9b !important; - color: black; -} - -.dropdown-item { - padding: 0.6rem 1rem; - cursor: pointer; - min-width: 200px; - border-bottom: 1px solid #9b9b9b; -} - -.dropdown-item:not(:last-child) { - border-bottom: 1px solid #cfcfd9; -} - -.dropdown-item:last-child { - border: 0 !important; -} - -.dropdown-item .ng-fa-icon { - width: 30px; - display: inline-block; - vertical-align: middle; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} diff --git a/packages/portail-admins/src/assets/css/bootstrap-custom.scss b/packages/portail-admins/src/assets/css/bootstrap-custom.scss new file mode 100644 index 0000000000..a2366406d1 --- /dev/null +++ b/packages/portail-admins/src/assets/css/bootstrap-custom.scss @@ -0,0 +1,405 @@ +.badge { + font-size: 0.8rem; +} + +.alert { + position: relative; + display: flex; + align-items: left; + justify-content: left; + word-break: break-word; + padding: 0.75rem; +} + +.alert .svg-icon { + display: table-cell; + margin-right: 1rem; + width: 35px; + height: 35px; + padding: 6px; + box-sizing: border-box; + -webkit-mask-size: 98%; + mask-size: 98%; +} + +.alert div, +.alert span { + padding-left: 5px; + flex-shrink: 1; + align-self: center; +} + +.alert a { + color: black; +} + +.alert p { + margin: auto 0 !important; +} + +.alert-info .svg-icon { + background-color: var(--bs-primary); +} + +.alert-warning .svg-icon { + background-color: #f0870c; +} + +.alert-danger .svg-icon { + background-color: #f00c0c; +} + +.alert-success { + color: #155724; + background-color: #d4edda; + border-color: #c3e6cb; +} + +.alert-success hr { + border-top-color: #b1dfbb; +} + +.alert-success .alert-link { + color: #0b2e13; +} + +.alert-info { + color: #084298; + background-color: #cfe2ff; + border-color: #b6d4fe; +} + +.alert-warning { + color: #664d03; + background-color: #fff3cd; + border-color: #ffecb5; +} + +.alert-info hr { + border-color: #b6d4fe; +} + +.alert-info .alert-link { + color: #062c33; +} + +.alert-danger { + color: #47090e; + background-color: #f8d7da; + border-color: #f5c2c7; +} + +.alert-danger hr { + border-top-color: #f1b0b7; +} + +.alert-danger .alert-link { + color: #491217; +} + +.close { + opacity: 1 !important; +} + +#modal-title { + font-style: normal; + font-weight: bold; + font-size: 1.4rem; + margin-bottom: 0.2rem; + margin-top: 0.2rem; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 780px; + margin: 1.75rem auto; + } +} + +@media all and (max-width: 480px) { + .head-page { + text-align: center; + } +} + +small { + color: #6e6e6e !important; +} + +.outside { + opacity: 1 !important; +} + +.ngb-dp-weekday { + color: var(--bs-primary) !important; +} + +.table > :not(:first-child) { + border-top: 0 !important; +} + +.table th .btn-primary { + background-color: var(--bs-primary); +} + +thead th { + font-style: normal; + font-weight: 700; + border-bottom: 1px solid #e5e7ef; + transition: all 0.2s ease; +} + +.show .dropdown-toggle, +.dropdown-toggle:focus, +.dropdown-toggle:active { + color: var(--bs-primary) !important; + border-color: var(--bs-primary) !important; + background-color: white !important; +} + +.dropdown-menu { + padding: 0 !important; + margin: 0; + border-radius: 5px; + background: #ffffff; + border: 1px solid #ececec; +} + +.dropdown-item:hover { + background-color: #9b9b9b !important; + color: black; +} + +.dropdown-item { + padding: 0.6rem 1rem; + cursor: pointer; + min-width: 200px; + border-bottom: 1px solid #9b9b9b; +} + +.dropdown-item:not(:last-child) { + border-bottom: 1px solid #cfcfd9; +} + +.dropdown-item:last-child { + border: 0 !important; +} + +.dropdown-item .ng-fa-icon { + width: 30px; + display: inline-block; + vertical-align: middle; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +// TEMP: adaptations CSS pour faire cohabiter le DSFR & Bootstrap + +// Variables de couleurs +$primary: #4164f5; +$bs-primary: #4164f5; +$secondary: #50e3c2; +$bs-secondary: #50e3c2; + +// Variables RGB pour les box-shadow +$primary-rgb: 65, 100, 245; +$secondary-rgb: 80, 227, 194; + +// Base pour tous les boutons - suppression text-decoration DSFR uniquement +.btn { + text-decoration: none !important; + text-decoration-line: none !important; + text-decoration-color: initial !important; + text-decoration-style: initial !important; + text-decoration-thickness: initial !important; +} + +// BTN PRIMARY - Override couleurs uniquement +.btn-primary { + background-color: $primary !important; + border-color: $primary !important; + color: #fff !important; + + &:hover { + background-color: darken($primary, 7.5%) !important; + border-color: darken($primary, 10%) !important; + color: #fff !important; + } + + &:focus, + &.focus { + background-color: darken($primary, 7.5%) !important; + border-color: darken($primary, 25%) !important; + color: #fff !important; + } + + &:active, + &.active { + background-color: darken($primary, 10%) !important; + border-color: darken($primary, 12.5%) !important; + color: #fff !important; + } + + &:disabled, + &.disabled { + background-color: $primary !important; + border-color: $primary !important; + color: #fff !important; + } +} + +// BTN OUTLINE PRIMARY - Override couleurs uniquement +.btn-outline-primary { + color: $primary !important; + border-color: $primary !important; + background-color: transparent !important; + + &:hover { + color: #fff !important; + background-color: $primary !important; + border-color: $primary !important; + } + + &:focus, + &.focus { + color: #fff !important; + background-color: $primary !important; + border-color: $primary !important; + } + + &:active, + &.active { + color: #fff !important; + background-color: $primary !important; + border-color: $primary !important; + } + + &:disabled, + &.disabled { + color: $primary !important; + background-color: transparent !important; + border-color: $primary !important; + } +} + +// BTN SECONDARY - Override couleurs uniquement +.btn-secondary { + background-color: $secondary !important; + border-color: $secondary !important; + color: #fff !important; + + &:hover { + background-color: darken($secondary, 7.5%) !important; + border-color: darken($secondary, 10%) !important; + color: #fff !important; + } + + &:focus, + &.focus { + background-color: darken($secondary, 7.5%) !important; + border-color: darken($secondary, 25%) !important; + color: #fff !important; + } + + &:active, + &.active { + background-color: darken($secondary, 10%) !important; + border-color: darken($secondary, 12.5%) !important; + color: #fff !important; + } + + &:disabled, + &.disabled { + background-color: $secondary !important; + border-color: $secondary !important; + color: #fff !important; + } +} + +// BTN OUTLINE SECONDARY - Override couleurs uniquement +.btn-outline-secondary { + color: $secondary !important; + border-color: $secondary !important; + background-color: transparent !important; + + &:hover { + color: #fff !important; + background-color: $secondary !important; + border-color: $secondary !important; + } + + &:focus, + &.focus { + color: #fff !important; + background-color: $secondary !important; + border-color: $secondary !important; + } + + &:active, + &.active { + color: #fff !important; + background-color: $secondary !important; + border-color: $secondary !important; + } + + &:disabled, + &.disabled { + color: $secondary !important; + background-color: transparent !important; + border-color: $secondary !important; + } +} + +// BTN WHITE PRIMARY - Votre classe personnalisée +.btn-white-primary { + background-color: #ffffff !important; + color: $primary !important; + box-shadow: 0 2px 2px darken($primary, 15%) !important; + border-radius: 3px !important; + border-color: transparent !important; + + &:hover { + background-color: #e7e7e7 !important; + color: $primary !important; + } + + &:disabled, + &.disabled { + background-color: #6c757d !important; // Bootstrap gray-800 equivalent + color: white !important; + opacity: 1 !important; + } + + &:active, + &:focus-visible, + &:focus { + background-color: #ffffff !important; + + color: darken($primary, 15%) !important; + box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.7) !important; + } +} + +header [href], +header [href].btn, +.header [href], +.header [href].btn, +nav [href], +a.btn { + background-image: none !important; + background-position: initial !important; + background-repeat: initial !important; + background-size: initial !important; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; +} + +img[target="_blank"]:after, +a[target="_blank"] img:after, +[target="_blank"] img:after { + content: none !important; + display: none !important; +} diff --git a/packages/portail-admins/src/assets/css/fonts.css b/packages/portail-admins/src/assets/css/fonts.css deleted file mode 100644 index 55b1616779..0000000000 --- a/packages/portail-admins/src/assets/css/fonts.css +++ /dev/null @@ -1,50 +0,0 @@ -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Regular.woff") format("woff"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Medium.woff") format("woff"); - font-style: normal; - font-weight: 600; -} - -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Bold.woff") format("woff"); - font-weight: 700; -} - -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff"); - font-style: italic; -} - -h2 { - font-style: normal; - font-weight: 700; - font-size: 1.35rem; - margin: 1.2rem 0; -} - -h3 { - font-style: normal; - font-weight: bold; - font-size: 1.3rem; - margin: 1.2rem 0; -} - -h4 { - font-style: normal; - font-weight: bold; - font-size: 1.2rem; - margin: 1.1rem 0; -} diff --git a/packages/portail-admins/src/assets/css/fonts.scss b/packages/portail-admins/src/assets/css/fonts.scss new file mode 100644 index 0000000000..ed61a3a910 --- /dev/null +++ b/packages/portail-admins/src/assets/css/fonts.scss @@ -0,0 +1,25 @@ +h1 { + line-height: 1.2 !important; + margin-bottom: 0.5rem; +} + +h2 { + font-style: normal; + font-weight: 700; + font-size: 1.35rem; + margin: 1.2rem 0; +} + +h3 { + font-style: normal; + font-weight: bold; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +h4 { + font-style: normal; + font-weight: bold; + font-size: 1.2rem; + margin: 1.1rem 0; +} diff --git a/packages/portail-admins/src/assets/css/forms.scss b/packages/portail-admins/src/assets/css/forms.scss index 81dde8efba..446946b2e3 100644 --- a/packages/portail-admins/src/assets/css/forms.scss +++ b/packages/portail-admins/src/assets/css/forms.scss @@ -79,8 +79,6 @@ textarea.form-control { .btn-white-primary { background-color: #ffffff; color: #4164f5; - box-shadow: 0 2px 2px #2f4ece; - border-radius: 3px; } .btn-white-primary:hover { diff --git a/packages/portail-admins/src/assets/css/icons.css b/packages/portail-admins/src/assets/css/icons.css deleted file mode 100644 index 64ff83a24b..0000000000 --- a/packages/portail-admins/src/assets/css/icons.css +++ /dev/null @@ -1,114 +0,0 @@ -.svg-icon { - min-height: 20px; - min-width: 20px; - background-repeat: no-repeat; - background-position: center center; - -webkit-mask-size: 100%; - mask-size: 100%; -} - -.icon-plus { - -webkit-mask: url("../icones/plus.svg") no-repeat center; - mask: url("../icones/plus.svg") no-repeat center; - min-height: 24px; - min-width: 20px; - display: block; - background-repeat: no-repeat; - background-position: center center; - -webkit-mask-size: 100%; - mask-size: 100%; - background-color: white; -} - -.icon-moins { - min-height: 24px; - min-width: 20px; - display: block; - background-repeat: no-repeat; - background-position: center center; - -webkit-mask-size: 100%; - mask-size: 100%; - background-color: white; - mask: url("../icones/moins.svg") no-repeat center; - -webkit-mask: url("../icones/moins.svg") no-repeat center; -} - -.icon-danger { - -webkit-mask: url("../icones/danger.svg") no-repeat center; - mask: url("../icones/danger.svg") no-repeat center; -} - -.icon-calendar { - -webkit-mask: url("../icones/calendar.svg") no-repeat center; - mask: url("../icones/calendar.svg") no-repeat center; -} - -.icon-courrierIn, -.icon-courrier { - -webkit-mask: url("../icones/courrier.svg") no-repeat center; - mask: url("../icones/courrier.svg") no-repeat center; -} - -.icon-colisIn, -.icon-colis { - -webkit-mask: url("../icones/colis.svg") no-repeat center; - mask: url("../icones/colis.svg") no-repeat center; -} - -.icon-recommandeIn, -.icon-recommande { - -webkit-mask: url("../icones/recommande.svg") no-repeat center; - mask: url("../icones/recommande.svg") no-repeat center; -} - -.icon-recommandeIn, -.icon-avis-passage { - -webkit-mask: url("../icones/avispassage.svg") no-repeat center; - mask: url("../icones/avispassage.svg") no-repeat center; -} - -.icon-appel { - -webkit-mask: url("../icones/phone.svg") no-repeat center; - mask: url("../icones/phone.svg") no-repeat center; -} - -.icon-passage { - -webkit-mask: url("../icones/passage.svg") no-repeat center; - mask: url("../icones/passage.svg") no-repeat center; -} - -.icon-distribution { - -webkit-mask: url("../icones/distribution.svg") no-repeat center; - mask: url("../icones/distribution.svg") no-repeat center; -} - -.icon-reception { - -webkit-mask: url("../icones/reception.svg") no-repeat center; - mask: url("../icones/reception.svg") no-repeat center; -} - -.icon-ban { - -webkit-mask: url("../icones/ban-solid.svg") no-repeat center; - mask: url("../icones/ban-solid.svg") no-repeat center; -} - -.icon-arrow { - background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.38467 11L6 5.99896L1.38467 1L1 1.41689L5.23031 5.99972L1 10.5839L1.38467 11Z' fill='%23333333' stroke='%23333333'/%3E%3C/svg%3E%0A"); -} - -.list-icon { - box-sizing: border-box; - background-color: white; - -webkit-mask-size: 100%; - mask-size: 100%; - height: 24px; - padding: 2px; - vertical-align: top; - display: inline-block; - width: 24px; -} - -.icon-note { - -webkit-mask: url("../icones/note.svg") no-repeat center; - mask: url("../icones/note.svg") no-repeat center; -} diff --git a/packages/portail-admins/src/assets/css/main.scss b/packages/portail-admins/src/assets/css/main.scss index b10cbe9948..12e29f0e39 100644 --- a/packages/portail-admins/src/assets/css/main.scss +++ b/packages/portail-admins/src/assets/css/main.scss @@ -1,22 +1,3 @@ -html, -body { - font-family: "Marianne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - -html { - font-size: 90%; -} - -ul { - margin-bottom: 0; -} - -caption { - color: black !important; -} - .content { background-color: #f2f2f2; min-height: calc(90vh - 78px); @@ -32,10 +13,6 @@ caption { min-height: calc(90vh - 78px); } -.container { - max-width: 1500px; -} - .modal-backdrop.show { opacity: 0.75; } @@ -187,7 +164,7 @@ legend { font-style: normal; font-weight: bold; font-size: 1.7rem; - color: #ffffff; + color: #ffffff !important; } } diff --git a/packages/portail-admins/src/assets/icones/avispassage.svg b/packages/portail-admins/src/assets/icones/avispassage.svg deleted file mode 100644 index 81f8111aae..0000000000 --- a/packages/portail-admins/src/assets/icones/avispassage.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/portail-admins/src/assets/icones/ban-solid.svg b/packages/portail-admins/src/assets/icones/ban-solid.svg deleted file mode 100644 index 8faf65e0e2..0000000000 --- a/packages/portail-admins/src/assets/icones/ban-solid.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/portail-admins/src/assets/icones/calendar.svg b/packages/portail-admins/src/assets/icones/calendar.svg deleted file mode 100644 index 597618aafc..0000000000 --- a/packages/portail-admins/src/assets/icones/calendar.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/colis.svg b/packages/portail-admins/src/assets/icones/colis.svg deleted file mode 100644 index dffe56a55e..0000000000 --- a/packages/portail-admins/src/assets/icones/colis.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/courrier.svg b/packages/portail-admins/src/assets/icones/courrier.svg deleted file mode 100644 index d7165caf9d..0000000000 --- a/packages/portail-admins/src/assets/icones/courrier.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/portail-admins/src/assets/icones/danger.svg b/packages/portail-admins/src/assets/icones/danger.svg deleted file mode 100644 index 12072ea346..0000000000 --- a/packages/portail-admins/src/assets/icones/danger.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/distribution.svg b/packages/portail-admins/src/assets/icones/distribution.svg deleted file mode 100644 index 0916b47715..0000000000 --- a/packages/portail-admins/src/assets/icones/distribution.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/portail-admins/src/assets/icones/fleche-droite.svg b/packages/portail-admins/src/assets/icones/fleche-droite.svg deleted file mode 100644 index 92232e7b20..0000000000 --- a/packages/portail-admins/src/assets/icones/fleche-droite.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/portail-admins/src/assets/icones/fleche-gauche.svg b/packages/portail-admins/src/assets/icones/fleche-gauche.svg deleted file mode 100644 index 99babb1560..0000000000 --- a/packages/portail-admins/src/assets/icones/fleche-gauche.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/portail-admins/src/assets/icones/icon-heart.png b/packages/portail-admins/src/assets/icones/icon-heart.png deleted file mode 100644 index a4a99f37508edf2a4ec0997ca9cc9ce5cd79edd2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1424 zcmV;B1#kL^P)EX>4Tx04R}tkv&MmKpe$iQ;Q-k4ptBm%ut;yh>D1lR-p(LO0CeUgUO{|(4-+r zad8w}3l4rPRvlcNb#-tR1i=pwH#a9m7b)?7NufoI2gm(*ckglc4iM^PrkWjNfT~$W zDjpLv*;TRg6#)z(gclA>^e5@H zmKHezdbWX!>y{?(0hc>K|C25mk|X(P3i&+nen#Jv1$u9R?lrf!<~~jzfHZZLxB(6h zfsq1buY0_^tG%~>&ouk{0j#iczPvJDU;qFB24YJ`L;(K){{a7>y{D4^000SaNLh0L z04^f{04^f|c%?sf00007bV*G`2jvAH4LUSN0#UaB000?uMObu0Z*6U5Zgc=ca%Ew3 zWn>_CX>@2HM@dakSAh-}000ALNklxp%y%+1our zmg|u}%o0Fcd1bk^rHI9t9H-J>J8p5Uh#R?;+C@W>8k?n2NiPUilU6=Hjv7r)bIe8xe ztdvd)WUZ%$z*}nNAXsMugy;gW)2Ifx?qCIi7d0D#o>K>c(C0sM#R#n5N#ay!qO(*o)WO{QA{^-sXMi{$0ayAFsMZ7+ILPoxMKdYs7QW6IHA) zb`EZzJg=ExXkOu%=zN9XsfZ27*#%hrN+3M*!hOTjVtc~)eD8s=+J#dX@IqPhUb+qh zzrB9|=z#;7<`t=jjLy zMEz@m;9C(FGfjy4a7E)-2!TK>V6*|2uv>KM@WOrDzvB)V`gGU;;VB{eLzCyr-P4YS z5c~uOx!~b>&BQFO@k%BfaTf$aXo`rhZ_qOw(e~36BLgwF zfbgddG6B&%rwU>PvE@iX^<5z0PlQB+SgAvn+N-x;3_Z-; e=DEvYU;GE`#Fn>?Osxz60000 - - diff --git a/packages/portail-admins/src/assets/icones/note.svg b/packages/portail-admins/src/assets/icones/note.svg deleted file mode 100644 index af7f058c72..0000000000 --- a/packages/portail-admins/src/assets/icones/note.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/portail-admins/src/assets/icones/passage.svg b/packages/portail-admins/src/assets/icones/passage.svg deleted file mode 100644 index 6137610c81..0000000000 --- a/packages/portail-admins/src/assets/icones/passage.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/phone.svg b/packages/portail-admins/src/assets/icones/phone.svg deleted file mode 100644 index 95cd65aac4..0000000000 --- a/packages/portail-admins/src/assets/icones/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/portail-admins/src/assets/icones/plus.svg b/packages/portail-admins/src/assets/icones/plus.svg deleted file mode 100644 index 7c864eacab..0000000000 --- a/packages/portail-admins/src/assets/icones/plus.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/portail-admins/src/assets/icones/profil/boite-lettre.svg b/packages/portail-admins/src/assets/icones/profil/boite-lettre.svg deleted file mode 100644 index 2eba1d8486..0000000000 --- a/packages/portail-admins/src/assets/icones/profil/boite-lettre.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/profil/contact.svg b/packages/portail-admins/src/assets/icones/profil/contact.svg deleted file mode 100644 index b4e7ec7eb6..0000000000 --- a/packages/portail-admins/src/assets/icones/profil/contact.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/portail-admins/src/assets/icones/profil/dossier.svg b/packages/portail-admins/src/assets/icones/profil/dossier.svg deleted file mode 100644 index 1cd6da02db..0000000000 --- a/packages/portail-admins/src/assets/icones/profil/dossier.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/profil/informations.svg b/packages/portail-admins/src/assets/icones/profil/informations.svg deleted file mode 100644 index bcda804f2c..0000000000 --- a/packages/portail-admins/src/assets/icones/profil/informations.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/profil/infos-complementaires.svg b/packages/portail-admins/src/assets/icones/profil/infos-complementaires.svg deleted file mode 100644 index 1550b4bc88..0000000000 --- a/packages/portail-admins/src/assets/icones/profil/infos-complementaires.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/packages/portail-admins/src/assets/icones/reception.svg b/packages/portail-admins/src/assets/icones/reception.svg deleted file mode 100644 index 642857b601..0000000000 --- a/packages/portail-admins/src/assets/icones/reception.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/portail-admins/src/assets/icones/recommande.svg b/packages/portail-admins/src/assets/icones/recommande.svg deleted file mode 100644 index ec3cd4c625..0000000000 --- a/packages/portail-admins/src/assets/icones/recommande.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/portail-usagers/angular.json b/packages/portail-usagers/angular.json index 18f806f4c4..f8c0923167 100644 --- a/packages/portail-usagers/angular.json +++ b/packages/portail-usagers/angular.json @@ -26,13 +26,15 @@ "assets": ["src/assets", "src/robots.txt"], "styles": [ "src/styles.scss", + "./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.main.min.css", + "./node_modules/@gouvfr/dsfr/dist/utility/utility.main.min.css", "src/assets/css/print.css", "src/assets/css/icons.css", "src/assets/css/forms.css", "src/assets/css/main.scss", "src/assets/css/fonts.scss" ], - "scripts": [] + "scripts": ["./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"] }, "configurations": { "analyze": { @@ -53,7 +55,7 @@ { "type": "initial", "maximumWarning": "500kb", - "maximumError": "4mb" + "maximumError": "6mb" }, { "type": "anyComponentStyle", diff --git a/packages/portail-usagers/package.json b/packages/portail-usagers/package.json index 741ebbd19b..cbfe3298de 100644 --- a/packages/portail-usagers/package.json +++ b/packages/portail-usagers/package.json @@ -27,6 +27,7 @@ "@angular/platform-browser-dynamic": "^18.2.13", "@angular/router": "^18.2.13", "@domifa/common": "workspace:^", + "@edugouvfr/ngx-dsfr": "^1.14.3", "@fortawesome/angular-fontawesome": "0.15.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", diff --git a/packages/portail-usagers/src/app/app.component.html b/packages/portail-usagers/src/app/app.component.html index f532ad3ac3..09036e25b2 100644 --- a/packages/portail-usagers/src/app/app.component.html +++ b/packages/portail-usagers/src/app/app.component.html @@ -137,11 +137,6 @@
  • {{ link.label }} -
    • @@ -178,10 +173,6 @@ rel="noopener external" title="info.gouv.fr - nouvelle fenêtre" >info.gouv.fr -
  • @@ -192,11 +183,7 @@ rel="noopener external" title="service-public.fr - nouvelle fenêtre" >service-public.fr - +
  • legifrance.gouv.fr - +
  • data.gouv.fr - +
    • diff --git a/packages/portail-usagers/src/app/modules/shared/constants/FA_ICONS.const.ts b/packages/portail-usagers/src/app/modules/shared/constants/FA_ICONS.const.ts index 14072e90d9..3324930b78 100644 --- a/packages/portail-usagers/src/app/modules/shared/constants/FA_ICONS.const.ts +++ b/packages/portail-usagers/src/app/modules/shared/constants/FA_ICONS.const.ts @@ -7,7 +7,6 @@ import { faFileWord, } from "@fortawesome/free-regular-svg-icons"; import { - faArrowUpRightFromSquare, faCheckCircle, faCircleNotch, faDownload, @@ -31,6 +30,6 @@ export const FA_ICONS: IconDefinition[] = [ faSignInAlt, faTimesCircle, faCheckCircle, - faArrowUpRightFromSquare, + faExternalLinkAlt, ]; diff --git a/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.html b/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.html index 2d48de0ad6..05f6f915da 100644 --- a/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.html +++ b/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.html @@ -24,12 +24,7 @@

    Liens utiles

    class="btn btn-outline-primary d-block" href="https://soliguide.fr/fr?utm_source=domifa" >Consulter Soliguide - +
    Liens utiles class="btn btn-outline-primary d-block" href="https://www.mesdroitssociaux.gouv.fr/accueil?utm_source=domifa" >Consulter "Mes droits sociaux" - +
    Liens utiles class="btn btn-outline-primary d-block my-1" href="https://mes-aides.1jeune1solution.beta.gouv.fr/?utm_source=domifa" >Consulter "mes Aides 1 jeune 1 solution" - +
    diff --git a/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.ts b/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.ts index 83344247ae..f56c882d8a 100644 --- a/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.ts +++ b/packages/portail-usagers/src/app/modules/usager-account/components/home-usager/sections/section-links/section-links.component.ts @@ -2,7 +2,6 @@ import { NgIf } from "@angular/common"; import { Component, Input } from "@angular/core"; import { PortailUsagerPublic } from "@domifa/common"; import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; -import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; @Component({ selector: "app-section-links", @@ -13,5 +12,4 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; }) export class SectionLinksComponent { @Input() public usager!: PortailUsagerPublic; - public readonly faArrowUpRightFromSquare = faArrowUpRightFromSquare; } diff --git a/packages/portail-usagers/src/assets/css/fonts.scss b/packages/portail-usagers/src/assets/css/fonts.scss index e0bec2efd6..b418842d34 100644 --- a/packages/portail-usagers/src/assets/css/fonts.scss +++ b/packages/portail-usagers/src/assets/css/fonts.scss @@ -1,35 +1,6 @@ -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Regular.woff") format("woff"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Medium.woff") format("woff"); - - font-style: normal; - font-weight: 600; -} - -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Bold.woff") format("woff"); - font-weight: 700; -} - -@font-face { - font-family: "Marianne"; - src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), - url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff"); - font-style: italic; -} h1 { font-size: 1.7rem; + line-height: 2.3rem !important; } h2 { diff --git a/packages/portail-usagers/src/assets/css/main.scss b/packages/portail-usagers/src/assets/css/main.scss index 8b360ece76..6c2845ca0b 100644 --- a/packages/portail-usagers/src/assets/css/main.scss +++ b/packages/portail-usagers/src/assets/css/main.scss @@ -98,7 +98,7 @@ html { font-style: normal; font-weight: bold; font-size: 1.7rem; - color: #ffffff; + color: #ffffff !important; } .page-content { @@ -229,3 +229,232 @@ html { margin: 1.75rem auto; } } + +// +// +// +// TEMP: adaptations CSS pour faire cohabiter le DSFR & Bootstrap +// +// +// + +// Variables de couleurs +$primary: #4164f5; +$bs-primary: #4164f5; +$secondary: #50e3c2; +$bs-secondary: #50e3c2; + +// Variables RGB pour les box-shadow +$primary-rgb: 65, 100, 245; +$secondary-rgb: 80, 227, 194; + +.bg-primary { + h1, + h2, + h3 { + color: white !important; + } +} +// Base pour tous les boutons - suppression text-decoration DSFR uniquement +.btn { + text-decoration: none !important; + text-decoration-line: none !important; + text-decoration-color: initial !important; + text-decoration-style: initial !important; + text-decoration-thickness: initial !important; +} + +// BTN PRIMARY - Override couleurs uniquement +.btn-primary { + background-color: $primary !important; + border-color: $primary !important; + color: #fff !important; + + &:hover { + background-color: darken($primary, 7.5%) !important; + border-color: darken($primary, 10%) !important; + color: #fff !important; + } + + &:focus, + &.focus { + background-color: darken($primary, 7.5%) !important; + border-color: darken($primary, 25%) !important; + color: #fff !important; + } + + &:active, + &.active { + background-color: darken($primary, 10%) !important; + border-color: darken($primary, 12.5%) !important; + color: #fff !important; + } + + &:disabled, + &.disabled { + background-color: $primary !important; + border-color: $primary !important; + color: #fff !important; + } +} + +// BTN OUTLINE PRIMARY - Override couleurs uniquement +.btn-outline-primary { + color: $primary !important; + border-color: $primary !important; + background-color: transparent !important; + + &:hover { + color: #fff !important; + background-color: $primary !important; + border-color: $primary !important; + } + + &:focus, + &.focus { + color: #fff !important; + background-color: $primary !important; + border-color: $primary !important; + } + + &:active, + &.active { + color: #fff !important; + background-color: $primary !important; + border-color: $primary !important; + } + + &:disabled, + &.disabled { + color: $primary !important; + background-color: transparent !important; + border-color: $primary !important; + } +} + +// BTN SECONDARY - Override couleurs uniquement +.btn-secondary { + background-color: $secondary !important; + border-color: $secondary !important; + color: #fff !important; + + &:hover { + background-color: darken($secondary, 7.5%) !important; + border-color: darken($secondary, 10%) !important; + color: #fff !important; + } + + &:focus, + &.focus { + background-color: darken($secondary, 7.5%) !important; + border-color: darken($secondary, 25%) !important; + color: #fff !important; + } + + &:active, + &.active { + background-color: darken($secondary, 10%) !important; + border-color: darken($secondary, 12.5%) !important; + color: #fff !important; + } + + &:disabled, + &.disabled { + background-color: $secondary !important; + border-color: $secondary !important; + color: #fff !important; + } +} + +// BTN OUTLINE SECONDARY - Override couleurs uniquement +.btn-outline-secondary { + color: $secondary !important; + border-color: $secondary !important; + background-color: transparent !important; + + &:hover { + color: #fff !important; + background-color: $secondary !important; + border-color: $secondary !important; + } + + &:focus, + &.focus { + color: #fff !important; + background-color: $secondary !important; + border-color: $secondary !important; + } + + &:active, + &.active { + color: #fff !important; + background-color: $secondary !important; + border-color: $secondary !important; + } + + &:disabled, + &.disabled { + color: $secondary !important; + background-color: transparent !important; + border-color: $secondary !important; + } +} + +// BTN WHITE PRIMARY - Votre classe personnalisée +.btn-white-primary { + background-color: #ffffff !important; + color: $primary !important; + box-shadow: 0 2px 2px darken($primary, 15%) !important; + border-radius: 3px !important; + border-color: transparent !important; + + &:hover { + background-color: #e7e7e7 !important; + color: $primary !important; + } + + &:disabled, + &.disabled { + background-color: #6c757d !important; // Bootstrap gray-800 equivalent + color: white !important; + opacity: 1 !important; + } + + &:active, + &:focus-visible, + &:focus { + background-color: #ffffff !important; + + color: darken($primary, 15%) !important; + box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.7) !important; + } +} + +header [href], +header [href].btn, +.header [href], +.header [href].btn, +nav [href], +a:has(img)::after, +a.btn { + background-image: none !important; + background-position: initial !important; + background-repeat: initial !important; + background-size: initial !important; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; +} + +a:has(img)::after, +img[target="_blank"]:after, +a[target="_blank"] img:after, +[target="_blank"] img:after { + content: none !important; + display: none !important; +} + +table a, +a:has(img) { + text-decoration: none !important; + background: none !important; +} diff --git a/yarn.lock b/yarn.lock index bfb885c130..d9fbbeb797 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4294,6 +4294,7 @@ __metadata: "@angular/platform-browser-dynamic": "npm:^18.2.13" "@angular/router": "npm:^18.2.13" "@domifa/common": "workspace:^" + "@edugouvfr/ngx-dsfr": "npm:^1.14.3" "@fortawesome/angular-fontawesome": "npm:0.15.0" "@fortawesome/fontawesome-svg-core": "npm:^6.7.2" "@fortawesome/free-regular-svg-icons": "npm:^6.7.2" @@ -4363,6 +4364,7 @@ __metadata: "@angular/platform-browser-dynamic": "npm:^18.2.13" "@angular/router": "npm:^18.2.13" "@domifa/common": "workspace:^" + "@edugouvfr/ngx-dsfr": "npm:^1.14.3" "@fortawesome/angular-fontawesome": "npm:0.15.0" "@fortawesome/fontawesome-svg-core": "npm:^6.7.2" "@fortawesome/free-regular-svg-icons": "npm:^6.7.2" @@ -4402,6 +4404,29 @@ __metadata: languageName: unknown linkType: soft +"@edugouvfr/ngx-dsfr@npm:^1.14.3": + version: 1.14.3 + resolution: "@edugouvfr/ngx-dsfr@npm:1.14.3" + dependencies: + "@gouvfr/dsfr": "npm:1.13.1" + tslib: "npm:^2.4.0" + peerDependencies: + "@angular/common": ">=17" + "@angular/core": ">=17" + "@angular/forms": ">=17" + "@playwright/test": ^1 + args-parser: ">=1.3.0" + rxjs: ^6 || ^7 + uuid: ">=8.3.0" + peerDependenciesMeta: + "@playwright/test": + optional: true + bin: + ngx-dsfr: index.js + checksum: 10/f943c22f4307fcb833e967c0b84566a8be874a70213a87f7a197eceac3e7f376a0b7c967cb7bfc9b680119ee61fbdd823f11a7293312e8f9a9b3f949d8541a94 + languageName: node + linkType: hard + "@emnapi/core@npm:^1.1.0": version: 1.3.1 resolution: "@emnapi/core@npm:1.3.1" @@ -4902,6 +4927,13 @@ __metadata: languageName: node linkType: hard +"@gouvfr/dsfr@npm:1.13.1": + version: 1.13.1 + resolution: "@gouvfr/dsfr@npm:1.13.1" + checksum: 10/e7593cb11ab2cafe7cf2a8929477d772802cf633cf8b9c35bc55cfc13d31e4a9c8005cdeb6099cafa58e16b167bdb67162abcefda661477fc4d69764dd7b2d30 + languageName: node + linkType: hard + "@grpc/grpc-js@npm:^1.7.1": version: 1.10.9 resolution: "@grpc/grpc-js@npm:1.10.9" From f615fcbe84de2cf0879c9fc4056a9cabf88a6658 Mon Sep 17 00:00:00 2001 From: "Yassine R." Date: Mon, 18 Aug 2025 17:20:09 +0200 Subject: [PATCH 2/7] fix(yarn): fix yarn.lock --- packages/portail-admins/jest.config.js | 3 +++ .../portail-admins/src/app/modules/shared/shared.module.ts | 6 ------ packages/portail-usagers/jest.config.js | 3 +++ packages/portail-usagers/package.json | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/portail-admins/jest.config.js b/packages/portail-admins/jest.config.js index 6c8273e127..9518555cdf 100644 --- a/packages/portail-admins/jest.config.js +++ b/packages/portail-admins/jest.config.js @@ -7,4 +7,7 @@ module.exports = { "^assets/(.*)$": "/src/assets/$1", "^environments/(.*)$": "/src/environments/$1", }, + transformIgnorePatterns: [ + "node_modules/(?!.*\\.mjs$|uuid|@edugouvfr/ngx-dsfr)", + ], }; diff --git a/packages/portail-admins/src/app/modules/shared/shared.module.ts b/packages/portail-admins/src/app/modules/shared/shared.module.ts index 5e81adf8ad..f2059b785f 100644 --- a/packages/portail-admins/src/app/modules/shared/shared.module.ts +++ b/packages/portail-admins/src/app/modules/shared/shared.module.ts @@ -44,13 +44,7 @@ import { DsfrAlertModule } from "@edugouvfr/ngx-dsfr"; FormsModule, ReactiveFormsModule, FonctionFormatPipe, - ], - imports: [ DsfrAlertModule, - CommonModule, - FontAwesomeModule, - FormsModule, - ReactiveFormsModule, ], providers: [AdminStructuresApiClient], }) diff --git a/packages/portail-usagers/jest.config.js b/packages/portail-usagers/jest.config.js index c24688a4fb..5e87a4e694 100644 --- a/packages/portail-usagers/jest.config.js +++ b/packages/portail-usagers/jest.config.js @@ -7,4 +7,7 @@ module.exports = { "^environments/(.*)$": "/src/environments/$1", }, setupFilesAfterEnv: ["/setup-jest.ts"], + transformIgnorePatterns: [ + "node_modules/(?!.*\\.mjs$|uuid|@edugouvfr/ngx-dsfr)", + ], }; diff --git a/packages/portail-usagers/package.json b/packages/portail-usagers/package.json index cbfe3298de..c263529715 100644 --- a/packages/portail-usagers/package.json +++ b/packages/portail-usagers/package.json @@ -86,4 +86,4 @@ "ng-lint-staged lint --fix --" ] } -} +} \ No newline at end of file From 2edaf42c5ad0cb5b0904d80cdd63648f3774be85 Mon Sep 17 00:00:00 2001 From: Houssem Balty Date: Tue, 23 Sep 2025 11:32:52 +0200 Subject: [PATCH 3/7] feat(admin-usagers): add skip links to admin and usagers (#3920) * feat(admin-usagers): add skip links to admin and usagers * fix(admins): conditionnally adding searchbar skiplink --- .../portail-admins/src/app/app.component.html | 42 +------------------ .../portail-admins/src/app/app.component.ts | 23 +++++++++- .../shared/services/custom-toast.service.ts | 2 +- .../src/app/modules/shared/shared.module.ts | 4 +- packages/portail-usagers/package.json | 2 +- .../src/app/app.component.html | 23 +--------- .../src/app/app.component.scss | 24 ----------- .../portail-usagers/src/app/app.component.ts | 15 ++++--- .../src/app/modules/shared/shared.module.ts | 5 ++- 9 files changed, 41 insertions(+), 99 deletions(-) diff --git a/packages/portail-admins/src/app/app.component.html b/packages/portail-admins/src/app/app.component.html index ff13616f71..730dc4eed3 100644 --- a/packages/portail-admins/src/app/app.component.html +++ b/packages/portail-admins/src/app/app.component.html @@ -1,45 +1,5 @@ - - +