From 6c6321c86e5c29c01df2fb38324aaa867afe1418 Mon Sep 17 00:00:00 2001
From: Fadil <Fadil.zemmari@xelians.fr>
Date: Thu, 17 Dec 2020 14:49:35 +0100
Subject: [PATCH] [US TRTL-617] Add sidenav panel new design
---
.../vitamui-menu-button.component.html | 6 ++-
.../vitamui-menu-button.component.scss | 7 ++-
.../vitamui-menu-button.component.ts | 1 +
.../vitamui-sidenav-header.component.html | 10 +++--
.../error-dialog/error-dialog.component.html | 2 +-
ui/ui-frontend-common/src/sass/_button.scss | 2 +-
.../src/sass/_sidepanel.scss | 39 ++++++++++++----
ui/ui-frontend-common/src/sass/_theme.scss | 10 ++---
.../src/sass/material/_preview-tab.scss | 44 ++++++++++++-------
.../src/sass/material/_tab-group.scss | 2 +
.../customer-create.component.html | 2 +-
.../sso-tab/sso-tab.component.html | 2 +-
.../owner-create/owner-create.component.html | 2 +-
.../group-create/group-create.component.html | 2 +-
.../group-list/group-list.component.html | 2 +-
.../user-create/user-create.component.html | 6 +--
.../user-preview/user-preview.component.html | 2 +-
.../projects/identity/src/sass/_form.scss | 2 +
.../identity/src/sass/_profile-tag.scss | 2 +
.../projects/identity/src/sass/_tooltip.scss | 2 +
.../identity/src/sass/_vitamui-tab-group.scss | 2 +
.../projects/identity/src/sass/login.scss | 2 +
.../projects/identity/src/sass/styles.scss | 3 +-
.../projects/portal/src/sass/login.scss | 2 +
.../portal/src/sass/material-custom.scss | 2 +
.../access-contract-create.component.html | 4 +-
.../components/arrays/arrays.component.html | 2 +-
.../miscellaneous.component.html | 6 +--
.../sample-dialog.component.html | 2 +-
29 files changed, 115 insertions(+), 57 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.html
index c839d8f2c..f53018b8b 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.html
@@ -1,10 +1,12 @@
<button #trigger="matMenuTrigger" [matMenuTriggerFor]="moreMenu" class="btn outline outline-primary"
[ngClass]="{'btn-circle large' : icon && !label}" [class.hidden]="trigger.menuOpen">
- <i *ngIf="icon" class="material-icons" [class.mr-3]="label">{{icon}}</i>
+ <i *ngIf="icon" class="vitamui-icon {{icon}}" [class.mr-3]="label"></i>
{{label}}
</button>
<mat-menu #moreMenu="matMenu" xPosition="before" [overlapTrigger]="true" class="more-action-menu {{overlayPos}}">
- <button mat-menu-item disableRipple class="menu-cancel-button"><i class="material-icons">clear</i></button>
+ <button mat-menu-item disableRipple class="menu-cancel-button">
+ <i class="vitamui-icon vitamui-icon-close"></i>
+ </button>
<ng-content></ng-content>
</mat-menu>
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.scss
index c47c4a6c2..5a677d924 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.scss
@@ -19,6 +19,10 @@
}
}
+ .btn-circle.large > i {
+ font-size: xx-large;
+ }
+
.mat-menu-item {
border-left: 1px solid var(--vitamui-primary);
border-right: 1px solid var(--vitamui-primary);
@@ -50,8 +54,7 @@
justify-content: center;
> i {
- font-size: 18px;
- font-weight: bold;
+ font-size: 14px;
color: var(--vitamui-primary);
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.ts
index b463aa4e5..6479920ff 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.ts
@@ -13,6 +13,7 @@ export class VitamuiMenuButtonComponent {
/**
* Set the icon to display on the button.
* If there is only an icon, the button will be rounded.
+ * WARNING : ONLY USE VITAMUI ICONS, MATERIAL ICONS WONT WORK
*/
@Input() icon: string;
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html
index 9ab4d8b7d..7c96c4ff5 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html
@@ -1,7 +1,9 @@
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-end">
- <button class="btn link xx-large" (click)="onclose.emit()"><i class="material-icons">close</i></button>
+ <button class="btn link cancel" (click)="onclose.emit()">
+ <i class="vitamui-icon vitamui-icon-close"></i>
+ </button>
</div>
<!-- if we have a one line title (25 chars), then apply a top margin -->
@@ -15,11 +17,11 @@
</i>
<div>
- <h5 class="m-0">{{title}}</h5>
- <p class="text medium m-0">{{subtitle}}</p>
+ <h5 class="m-0 text-primary">{{title}}</h5>
+ <p class="text large light m-0">{{subtitle}}</p>
</div>
- <div class="d-flex align-items-end actions">
+ <div class="d-flex align-items-end justify-content-end actions">
<ng-content></ng-content>
</div>
</div>
diff --git a/ui/ui-frontend-common/src/app/modules/error-dialog/error-dialog.component.html b/ui/ui-frontend-common/src/app/modules/error-dialog/error-dialog.component.html
index 56ab45106..b0d5760fc 100644
--- a/ui/ui-frontend-common/src/app/modules/error-dialog/error-dialog.component.html
+++ b/ui/ui-frontend-common/src/app/modules/error-dialog/error-dialog.component.html
@@ -6,6 +6,6 @@
<button class="btn link" (click)="goBack()" i18n="@@goBackButton">
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <span class="underline">Retour</span>
+ <span class="text-underline">Retour</span>
</button>
</div>
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/sass/_button.scss b/ui/ui-frontend-common/src/sass/_button.scss
index e144dc569..717897e26 100644
--- a/ui/ui-frontend-common/src/sass/_button.scss
+++ b/ui/ui-frontend-common/src/sass/_button.scss
@@ -163,7 +163,7 @@
}
&.cancel {
- @include btn(transparent, transparent, transparent, transparent, var(--vitamui-grey-900), var(--vitamui-gray-900));
+ @include btn(transparent, transparent, transparent, transparent, var(--vitamui-grey-900), var(--vitamui-grey-900));
}
i {
diff --git a/ui/ui-frontend-common/src/sass/_sidepanel.scss b/ui/ui-frontend-common/src/sass/_sidepanel.scss
index 4ebd241ad..7cb048d7c 100644
--- a/ui/ui-frontend-common/src/sass/_sidepanel.scss
+++ b/ui/ui-frontend-common/src/sass/_sidepanel.scss
@@ -2,13 +2,18 @@
background: white;
margin-top: 72px; // header height
width: 584px;
- height: 100vh;
}
.vitamui-sidepanel-header {
background-color: white;
- padding: 5px 15px 10px 10px;
- height: 142px;
+ padding: 2px 20px 10px 10px;
+ height: 174px;
+
+ .cancel {
+ > i {
+ color: var(--vitamui-grey-600)!important;
+ }
+ }
.title {
display: flex;
@@ -17,7 +22,7 @@
> i {
color: var(--vitamui-grey-900);
- font-size: 45px;
+ font-size: 35px;
}
// DEPREACTED : REMOVE THIS H2 CSS AT THE END OF THE REDESIGN
@@ -30,8 +35,16 @@
}
> div:first-of-type {
- width: 66%;
- padding-left: 1.5rem;
+ width: 76%;
+ padding-left: 2rem;
+
+ > h5 {
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ text-overflow: ellipsis;
+ }
> p {
display: -webkit-box;
@@ -43,23 +56,31 @@
}
> .actions {
- width: 25%;
+ width: 15%;
}
}
}
.vitamui-sidepanel-body {
font-size: 16px;
-
+ background-color: var(--vitamui-background);
color: var(--vitamui-grey-900);
position: absolute;
bottom: 0;
right: 0;
left: 0;
- top: 214px;
+ top: 247px;
overflow: auto;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
+
+
.mat-drawer-content {
background-color: var(--vitamui-background);
}
diff --git a/ui/ui-frontend-common/src/sass/_theme.scss b/ui/ui-frontend-common/src/sass/_theme.scss
index 41ea73e97..21666fd9b 100644
--- a/ui/ui-frontend-common/src/sass/_theme.scss
+++ b/ui/ui-frontend-common/src/sass/_theme.scss
@@ -100,8 +100,6 @@ button {
color: var(--vitamui-primary-300)!important;
}
-
-
.text-secondary {
color: var(--vitamui-secondary)!important;
}
@@ -110,6 +108,10 @@ button {
color: $red!important;
}
+.text-underline {
+ text-decoration: underline;
+}
+
.bg-primary {
background-color: var(--vitamui-primary)!important;
}
@@ -118,9 +120,7 @@ button {
background-color: var(--vitamui-secondary)!important;
}
-.underline {
- text-decoration: underline;
-}
+
.no-hover {
&:hover {
diff --git a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
index 1d5a271bf..770ce388c 100644
--- a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
+++ b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
@@ -1,10 +1,29 @@
+.mat-drawer {
+ border-left: none!important;
+ box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.1);
+}
+
.preview-tab-group.mat-tab-group {
+ .mat-tab-header {
+ border-bottom: none;
+ background-color: white;
+ height: 40px;
+ position: fixed;
+ width: 100%;
+ z-index: 10;
+
+ .mat-tab-header-pagination {
+ display: none;
+ }
+ }
+
.mat-tab-label {
-
+ color: var(--vitamui-grey-600);
+ align-items: baseline;
min-width: 130px;
- height: 37px;
opacity: 1;
- color: var(--vitamui-grey-600);
+ height: 40px;
+ padding-top: 3px;
&:hover {
background-color: var(--vitamui-grey-300);
@@ -18,16 +37,8 @@
.mat-tab-label-active {
.mat-tab-label-content {
color: var(--vitamui-primary);
- font-weight: 700;
- }
- }
-
- .mat-tab-header {
- border-top: 1px solid var(--vitamui-grey-400);
- border-bottom: 1px solid var(--vitamui-grey-400);
-
- .mat-tab-header-pagination {
- display: none;
+ font-size: 16px;
+ font-weight: 400;
}
}
@@ -36,22 +47,23 @@
}
.mat-tab-body-content {
- padding: 35px 30px;
+ padding: 55px 30px 20px;
overflow: visible;
}
.mat-ink-bar {
background-color: transparent!important;
+ height: 3px;
&::before {
content: '';
display: block;
- width: 50%;
+ width: 69%;
background-color: var(--vitamui-primary);
height: 6px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
- left: 25%;
+ left: 16%;
position: relative;
}
}
diff --git a/ui/ui-frontend-common/src/sass/material/_tab-group.scss b/ui/ui-frontend-common/src/sass/material/_tab-group.scss
index ecbeebf87..c2803ed39 100644
--- a/ui/ui-frontend-common/src/sass/material/_tab-group.scss
+++ b/ui/ui-frontend-common/src/sass/material/_tab-group.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : THIS CODE SEEMS TO BE UNSED, REMOVE IT AT THE END OF THE REDESIGN **/
+
.account-tab-group.mat-tab-group {
.mat-tab-header {
border-bottom: none;
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
index 921a5e056..d8b5b3eb5 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
@@ -240,7 +240,7 @@
<ng-template #back>
<button type="button" class="btn link mt-1 ml-1 text-primary" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <span i18n="Previous step button label@@customerCreateBackButton" class="underline">Retour</span>
+ <span i18n="Previous step button label@@customerCreateBackButton" class="text-underline">Retour</span>
</button>
</ng-template>
</vitamui-common-stepper>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html
index 29c1e7ce3..e674ece21 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html
@@ -45,7 +45,7 @@
<div>
<button type="button" class="btn link" (click)="selectedIdentityProvider=null">
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <ng-container i18n="Back button label@@idpBackButton"><span class="underline">Retourner à la liste des IDP</span></ng-container>
+ <ng-container i18n="Back button label@@idpBackButton"><span class="text-underline">Retourner à la liste des IDP</span></ng-container>
</button>
<app-identity-provider-details [identityProvider]="selectedIdentityProvider" [domains]="domains"
[readOnly]="readOnly || selectedIdentityProvider.readonly"></app-identity-provider-details>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html
index df8f8e3bd..902cfe28d 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html
@@ -35,7 +35,7 @@
</div>
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</form>
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html b/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html
index 47ee84b13..f90c80fd8 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html
@@ -66,7 +66,7 @@
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <ng-container i18n="Previous step button label@@profileGroupCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@profileGroupCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</cdk-step>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
index 5f35d9fa6..12a95a1ce 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
@@ -18,7 +18,7 @@
<div class="vitamui-row p-0 px-4" [class.no-hover]="row.state === 'expanded'" *ngIf="!group?.selected" [vitamuiCommonCollapse] #row="vitamuiCommonCollapse">
<div class="d-flex justify-content-between align-items-center clickable">
<div class="row-label d-flex align-items-center" (click)="updateGroup(group?.id,group?.name, row)">{{group?.name}}</div>
- <button class="btn link underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
+ <button class="btn link text-underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
</div>
<app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@expansionAnimation]></app-group-detail>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html b/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html
index 6a6b56a73..0d286dfec 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html
@@ -118,7 +118,7 @@
</div>
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</cdk-step>
@@ -192,7 +192,7 @@
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</cdk-step>
@@ -230,7 +230,7 @@
</div>
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</cdk-step>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.html b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.html
index 10a4ce02f..bd7f34392 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.html
@@ -4,7 +4,7 @@
[subtitle]="'(' + user?.identifier + ')'"
[icon]="'vitamui-icon-user'"
(onclose)="emitClose()">
- <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'">
+ <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'vitamui-icon-more-horiz'">
<button mat-menu-item i18n="@@userPreviewEnabled" (click)="updateStatus('ENABLED')" [disabled]="user?.status === 'ENABLED'">Activer </button>
<button mat-menu-item i18n="@@userPreviewDisabled" (click)="updateStatus('DISABLED')" [disabled]="user?.status === 'DISABLED'">Désactiver</button>
</vitamui-common-menu-button>
diff --git a/ui/ui-frontend/projects/identity/src/sass/_form.scss b/ui/ui-frontend/projects/identity/src/sass/_form.scss
index 032853c37..a7ba18e03 100644
--- a/ui/ui-frontend/projects/identity/src/sass/_form.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/_form.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
.vitamui-form vitamui-slide-toggle {
margin-bottom: 20px;
}
diff --git a/ui/ui-frontend/projects/identity/src/sass/_profile-tag.scss b/ui/ui-frontend/projects/identity/src/sass/_profile-tag.scss
index f39739616..f1bd3e08a 100644
--- a/ui/ui-frontend/projects/identity/src/sass/_profile-tag.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/_profile-tag.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
.profile-tag {
font-size: 14px;
font-weight: 500;
diff --git a/ui/ui-frontend/projects/identity/src/sass/_tooltip.scss b/ui/ui-frontend/projects/identity/src/sass/_tooltip.scss
index 15386030f..31605d670 100644
--- a/ui/ui-frontend/projects/identity/src/sass/_tooltip.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/_tooltip.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
@import '~ui-frontend-common/sass/variables/colors';
$arrow-size: 20px;
diff --git a/ui/ui-frontend/projects/identity/src/sass/_vitamui-tab-group.scss b/ui/ui-frontend/projects/identity/src/sass/_vitamui-tab-group.scss
index ecbeebf87..746bd5201 100644
--- a/ui/ui-frontend/projects/identity/src/sass/_vitamui-tab-group.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/_vitamui-tab-group.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
.account-tab-group.mat-tab-group {
.mat-tab-header {
border-bottom: none;
diff --git a/ui/ui-frontend/projects/identity/src/sass/login.scss b/ui/ui-frontend/projects/identity/src/sass/login.scss
index f3acb3567..3455246d3 100644
--- a/ui/ui-frontend/projects/identity/src/sass/login.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/login.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
@import '~ui-frontend-common/sass/variables/colors';
@import '~ui-frontend-common/sass/mixins/fonts';
diff --git a/ui/ui-frontend/projects/identity/src/sass/styles.scss b/ui/ui-frontend/projects/identity/src/sass/styles.scss
index be8a2eeaf..051e7cbaa 100644
--- a/ui/ui-frontend/projects/identity/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/styles.scss
@@ -1,7 +1,8 @@
@import '~ui-frontend-common/sass/icons/vitamui-icons.css';
@import '~ui-frontend-common/sass/theme';
-$grid-gutter-width: 20px;
+/** TODO DEPRECATED : REMOVE THIS LINE AT THE END OF THE REWORK **/
+$grid-gutter-width: 20px;
@import '~bootstrap/scss/bootstrap-grid';
diff --git a/ui/ui-frontend/projects/portal/src/sass/login.scss b/ui/ui-frontend/projects/portal/src/sass/login.scss
index d3a097d9a..10866a4c2 100644
--- a/ui/ui-frontend/projects/portal/src/sass/login.scss
+++ b/ui/ui-frontend/projects/portal/src/sass/login.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
@import '~ui-frontend-common/sass/variables/colors';
.login-box {
diff --git a/ui/ui-frontend/projects/portal/src/sass/material-custom.scss b/ui/ui-frontend/projects/portal/src/sass/material-custom.scss
index 82b6e2ef8..10a56f56c 100644
--- a/ui/ui-frontend/projects/portal/src/sass/material-custom.scss
+++ b/ui/ui-frontend/projects/portal/src/sass/material-custom.scss
@@ -1,3 +1,5 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
.mat-menu-panel.nav-menu {
border-radius: 10px;
margin-top: 4px;
diff --git a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-create/access-contract-create.component.html b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-create/access-contract-create.component.html
index 568284a15..b7293b162 100644
--- a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-create/access-contract-create.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-create/access-contract-create.component.html
@@ -129,7 +129,7 @@
</div>
<button type="button" class="back" cdkStepperPrevious>
<i class="material-icons">arrow_back</i>
- <ng-container i18n="Previous step button label@@accessContractCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@accessContractCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</cdk-step>
@@ -159,7 +159,7 @@
</div>
<button type="button" class="back" cdkStepperPrevious>
<i class="material-icons">arrow_back</i>
- <ng-container i18n="Previous step button label@@accessContractCreateBackButton"><span class="underline">Retour</span></ng-container>
+ <ng-container i18n="Previous step button label@@accessContractCreateBackButton"><span class="text-underline">Retour</span></ng-container>
</button>
</div>
</cdk-step>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
index 0854dfe3d..2d4e7fe85 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
@@ -167,7 +167,7 @@
<div class="d-flex justify-content-between align-items-center clickable">
<div class="row-label d-flex align-items-center" (click)="handleClick(group)">
{{group?.name}}</div>
- <button class="btn link underline"
+ <button class="btn link text-underline"
(click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
</div>
<div *ngIf="row.state === 'expanded' then dialogSubArray"></div>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/miscellaneous.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/miscellaneous.component.html
index 75b673c04..fcba2ca63 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/miscellaneous.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/miscellaneous.component.html
@@ -40,14 +40,14 @@
<div class="d-flex">
<div class="mr-2">
- <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'">
+ <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'vitamui-icon-more-horiz'">
<button mat-menu-item>Activer</button>
<button mat-menu-item>Désactiver</button>
</vitamui-common-menu-button>
</div>
<div class="mr-2">
- <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'">
+ <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'vitamui-icon-more-horiz'">
<button mat-menu-item>Activer</button>
<button mat-menu-item>Désactiver</button>
</vitamui-common-menu-button>
@@ -61,7 +61,7 @@
</div>
<div>
- <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'" [label]="'With text & icon'">
+ <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'vitamui-icon-more-horiz'" [label]="'With text & icon'">
<button mat-menu-item>Activer</button>
<button mat-menu-item>Désactiver</button>
</vitamui-common-menu-button>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html
index a5dd677c9..88a6e3161 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html
@@ -25,7 +25,7 @@
</div>
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
- <span class="underline">Retour</span>
+ <span class="text-underline">Retour</span>
</button>
</div>
</cdk-step>
--
GitLab