cleanup user profile layout and styles

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -2,9 +2,7 @@
 
   <div class="aca-page-layout-header">
     <adf-toolbar class="adf-toolbar--inline">
-      <button mat-icon-button (click)="goBack()">
+      <adf-button (click)="goBack()" variant="icon" icon="arrow_back"></adf-button>
-        <mat-icon>arrow_back</mat-icon>
-      </button>
     </adf-toolbar>
     <h1 class="aca-page-title">{{ 'ACA_FOLDER_RULES.ACTIONS.MANAGE_RULES' | translate }}</h1>
   </div>

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts

@@ -33,7 +33,7 @@ import { delay, takeUntil } from 'rxjs/operators';
 import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
-import { NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
+import { ButtonComponent, NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { ActionDefinitionTransformed } from '../model/rule-action.model';
 import { ActionsService } from '../services/actions.service';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
@@ -67,7 +67,8 @@ import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-componen
     TemplateModule,
     GenericErrorComponent,
     RuleDetailsUiComponent,
-    MatDialogModule
+    MatDialogModule,
+    ButtonComponent
   ],
   selector: 'aca-manage-rules',
   templateUrl: 'manage-rules.smart-component.html',

projects/aca-content/src/lib/components/view-profile/view-profile.component.html

@@ -1,145 +1,175 @@
 <div class="app-profile-container">
   <div class="app-profile-row">
     <div class="app-profile-title">
-      <button *ngIf="(appNavNarMode$ | async) === 'collapsed'" mat-icon-button (click)="toggleClick()"
+      <adf-button *ngIf="(appNavNarMode$ | async) === 'collapsed'" variant="icon" icon="menu" (click)="toggleClick()"
-        title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
+        title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}"></adf-button>
-        <mat-icon>menu</mat-icon>
+      <adf-button variant="icon" icon="arrow_back" (click)="navigateToPersonalFiles()"></adf-button>
-      </button>
-      <mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
       <h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
     </div>
   </div>
-  <div class="app-profile-general-row" [formGroup]="profileForm">
-    <div class="app-profile-general">
-      <div class="app-profile-general-section">
-        <mat-icon class="app-profile-general-icon" (click)="toggleGeneralDropdown()" id="toggle-general-dropdown">
-          {{ generalSectionDropdown ?  'expand_more' : 'chevron_right'}}</mat-icon>
-        <h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
-      </div>
-      <div class="app-general-edit-btn" *ngIf="generalSectionButtonsToggle">
-        <button mat-raised-button (click)="toggleGeneralButtons()" id="general-edit-button"
-          class="app-general-edit">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
-      </div>
-      <div class="app-general-edit-btn" *ngIf="!generalSectionButtonsToggle">
-        <button mat-raised-button class="app-general-cancel-btn" id="general-cancel-button"
-          (click)="toggleGeneralButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
-        <button mat-raised-button class="app-general-save-btn" id="general-save-button" [disabled]="profileForm.invalid"
-          (click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
-      </div>
-    </div>
-    <mat-divider class="app-divider" *ngIf="generalSectionDropdown"></mat-divider>
-    <div *ngIf="generalSectionDropdown">
-      <div class="app-general-dropdown">
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
-          <input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
-            class="app-profile-general-dropdown-input-details app-selected">
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details"  *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
-          <input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
-            class="app-profile-general-dropdown-input-details app-selected">
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
-          <input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
-            class="app-profile-general-dropdown-input-details app-selected">
-          <mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
-            {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-          </mat-error>
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
-        <input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
-          class="app-profile-general-dropdown-input-details app-selected">
-        <mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
-          {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-        </mat-error>
-        </div>
-      </div>
-    </div>
-  </div>
 
-  <div class="app-profile-contact-row" [formGroup]="profileForm">
+  <div class="app-profile-content">
-    <div class="app-profile-general profile-general-bottom-radius">
+    <section [formGroup]="profileForm">
-      <div class="app-profile-general-section">
+      <div class="app-profile-general">
-        <mat-icon class="app-profile-general-icon" (click)="toggleContactDropdown()" id="toggle-contact-dropdown">
+        <div class="app-profile-general-section">
-          {{ contactSectionDropdown ?  'expand_more' : 'chevron_right'}}</mat-icon>
+          <adf-button
-        <h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
+            id="toggle-general-dropdown"
-      </div>
+            (click)="toggleGeneralDropdown($event)"
+            variant="icon"
+            icon="{{ generalSectionDropdown ?  'expand_more' : 'chevron_right'}}">
+          </adf-button>
+          <h4
+            tabindex="0"
+            class="app-general-title"
+            (click)="toggleGeneralDropdown($event)"
+            (keydown.enter)="toggleGeneralDropdown($event)"
+            (keydown.space)="toggleGeneralDropdown($event)">
+            {{'APP.EDIT_PROFILE.GENERAL' | translate}}
+          </h4>
+        </div>
 
-      <div class="app-general-edit-btn" *ngIf="contactSectionButtonsToggle">
+        <div class="flex flex-row items-center gap-x-2">
-        <button mat-raised-button class="app-general-edit" id="contact-edit-button"
+          <ng-container *ngIf="generalSectionButtonsToggle">
-          (click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
+            <adf-button variant="raised" (click)="toggleGeneralButtons()" id="general-edit-button">{{'APP.EDIT_PROFILE.EDIT' | translate}}</adf-button>
+          </ng-container>
+          <ng-container *ngIf="!generalSectionButtonsToggle">
+            <adf-button
+              id="general-cancel-button"
+              variant="raised"
+              (click)="toggleGeneralButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</adf-button>
+            <adf-button
+              id="general-save-button"
+              variant="raised"
+              color="primary"
+              [disabled]="profileForm.invalid"
+              (click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</adf-button>
+          </ng-container>
+        </div>
       </div>
-      <div class="app-general-edit-btn" *ngIf="!contactSectionButtonsToggle">
+      <mat-divider class="app-divider" *ngIf="generalSectionDropdown"></mat-divider>
-        <button mat-raised-button class="app-general-cancel-btn" id="contact-cancel-button"
+      <div *ngIf="generalSectionDropdown">
-          (click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
+        <div class="app-general-dropdown">
-        <button mat-raised-button  class="app-general-save-btn" id="contact-save-button" [disabled]="profileForm.invalid"
+          <div class="flex">
-          (click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
-      </div>
+            <p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
-    </div>
+          </div>
-    <mat-divider class="app-divider" *ngIf="contactSectionDropdown"></mat-divider>
+          <mat-divider></mat-divider>
-    <div *ngIf="contactSectionDropdown">
+          <div class="flex">
-      <div class="app-general-dropdown">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
-        <div class="app-general-dropdown-details">
+            <p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
+          </div>
-          <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
+          <mat-divider></mat-divider>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName"
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
+            <input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
+              class="app-profile-general-dropdown-input-details app-selected">
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details"  *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
+            <input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
+              class="app-profile-general-dropdown-input-details app-selected">
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
+            <input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
+              class="app-profile-general-dropdown-input-details app-selected">
+            <mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
+              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+            </mat-error>
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
+          <input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
             class="app-profile-general-dropdown-input-details app-selected">
-        </div>
+          <mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
-            class="app-profile-general-dropdown-input-details app-selected">
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
-            class="app-profile-general-dropdown-input-details app-selected">
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
-          <input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
-            class="app-profile-general-dropdown-input-details app-selected">
-          <mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
-            {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
-          </mat-error>
-        </div>
-        <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
-          <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
-          <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
-            class="app-profile-general-dropdown-input-details app-selected">
-          <mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
             {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
           </mat-error>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
+
+    <section [formGroup]="profileForm">
+      <div class="app-profile-general profile-general-bottom-radius">
+        <div class="app-profile-general-section">
+          <adf-button
+            id="toggle-contact-dropdown"
+            (click)="toggleContactDropdown($event)"
+            variant="icon"
+            icon="{{ generalSectionDropdown ?  'expand_more' : 'chevron_right'}}">
+          </adf-button>
+          <h4
+            tabindex="0"
+            class="app-general-title"
+            (click)="toggleContactDropdown($event)"
+            (keydown.enter)="toggleContactDropdown($event)"
+            (keydown.space)="toggleContactDropdown($event)">
+            {{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}
+          </h4>
+        </div>
+
+        <div class="flex flex-row items-center gap-x-2">
+          <ng-container *ngIf="contactSectionButtonsToggle">
+            <adf-button variant="raised" (click)="toggleContactButtons()" id="contact-edit-button">{{'APP.EDIT_PROFILE.EDIT' | translate}}</adf-button>
+          </ng-container>
+          <ng-container *ngIf="!contactSectionButtonsToggle">
+            <adf-button id="contact-cancel-button" variant="raised" (click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</adf-button>
+            <adf-button id="contact-save-button" variant="raised" color="primary" [disabled]="profileForm.invalid" (click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</adf-button>
+          </ng-container>
+        </div>
+      </div>
+      <mat-divider class="app-divider" *ngIf="contactSectionDropdown"></mat-divider>
+      <div *ngIf="contactSectionDropdown">
+        <div class="app-general-dropdown">
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
+            <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName"
+              class="app-profile-general-dropdown-input-details app-selected">
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
+            <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
+              class="app-profile-general-dropdown-input-details app-selected">
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
+            <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
+              class="app-profile-general-dropdown-input-details app-selected">
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
+            <input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
+              class="app-profile-general-dropdown-input-details app-selected">
+            <mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
+              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+            </mat-error>
+          </div>
+          <mat-divider></mat-divider>
+          <div class="flex">
+            <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
+            <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
+            <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
+              class="app-profile-general-dropdown-input-details app-selected">
+            <mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
+              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+            </mat-error>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </div>

projects/aca-content/src/lib/components/view-profile/view-profile.component.scss

@@ -1,10 +1,37 @@
 app-view-profile {
+  /* stylelint-disable selector-class-pattern */
+  .flex {
+    display: flex;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .gap-x-2 {
+    column-gap: 0.5rem;
+  }
+  /* stylelint-enable selector-class-pattern */
+
+  mat-divider {
+    border-top-color: var(--theme-grey-divider-color);
+  }
+
   letter-spacing: 0.5px;
 
   .app-profile-container {
     overflow: scroll;
     height: 100%;
     width: 100%;
+
+    section {
+      border: 1px solid var(--theme-grey-background-color);
+      border-radius: 1rem;
+    }
   }
 
   .app-profile-row {
@@ -27,52 +54,32 @@ app-view-profile {
     margin-top: 1rem;
   }
 
-  .app-profile-general-row {
+  .app-profile-content {
     margin: 2rem 0 0 2rem;
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.5rem;
     width: 70%;
-    border: 1px solid var(--theme-grey-background-color);
-    border-radius: 1rem;
-  }
-
-  .app-profile-icon {
-    margin-right: 1rem;
-    cursor: pointer;
-  }
-
-  .app-profile-general-icon {
-    cursor: pointer;
-  }
-
-  .app-profile-text {
-    letter-spacing: 0.5px;
   }
 
   .app-profile-general {
     display: flex;
-    padding-left: 1rem;
+    margin: 0.5rem;
-  }
-
-  .app-profile-general-bottom-radius {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
   }
 
   .app-profile-general-section {
     display: flex;
-    width: 60%;
+    width: 100%;
-    padding-top: 1rem;
+    align-items: center;
-    cursor: pointer;
   }
 
   .app-general-title {
     margin-left: 0.6rem;
-    margin-top: 4px;
+    margin-top: 0;
+    margin-bottom: 0;
     letter-spacing: 0.5px;
-  }
+    cursor: pointer;
-
+    user-select: none;
-  .app-general-edit-btn {
-    width: 60%;
-    text-align: end;
   }
 
   .app-divider {
@@ -89,45 +96,10 @@ app-view-profile {
     box-shadow: 0 0 2px var(--theme-blue-button-color);
   }
 
-  .app-general-edit {
-    background: var(--theme-grey-text-background-color);
-    height: 30px;
-    margin: 1rem;
-  }
-
-  .app-general-edit:hover {
-    background: var(--theme-grey-hover-background-color);
-  }
-
-  .app-general-cancel-btn {
-    height: 30px;
-    margin: 1rem;
-    margin-left: 0.5rem;
-    background-color: var(--theme-grey-text-background-color);
-    padding-top: 0.25px;
-  }
-
-  .app-general-save-btn {
-    width: 75px;
-    height: 30px;
-    margin: 1rem;
-    margin-left: 0.5rem;
-    color: white;
-    background-color: var(--theme-blue-button-color);
-  }
-
-  .app-general-dropdown-divider {
-    border-top-color: var(--theme-grey-divider-color);
-  }
-
   .app-general-dropdown {
     padding: 0 1rem;
   }
 
-  .app-general-dropdown-details {
-    display: flex;
-  }
-
   .app-profile-general-dropdown-heading {
     color: var(--theme-heading-color);
     width: 20%;
@@ -148,43 +120,6 @@ app-view-profile {
     background-color: var(--theme-dropdown-color);
   }
 
-  .app-profile-login-row {
-    margin: 2rem 0 0 2rem;
-    width: 70%;
-    border: 1px solid var(--theme-grey-background-color);
-    border-radius: 1rem;
-  }
-
-  .app-profile-login {
-    display: flex;
-    padding-left: 1rem;
-  }
-
-  .app-profile-login-dropdown-details {
-    width: 24%;
-    height: 25px;
-    border: none;
-    margin-top: 1.3rem;
-    background-color: var(--theme-dropdown-color);
-  }
-
-  .app-profile-login-dropdown-heading-forgot {
-    margin-top: 1.3rem;
-    color: var(--theme-heading-color);
-    margin-left: 16rem;
-  }
-
-  .app-profile-company-row {
-    margin-top: 2rem;
-  }
-
-  .app-profile-contact-row {
-    margin: 2rem 0 5rem 2rem;
-    width: 70%;
-    border: 1px solid var(--theme-grey-background-color);
-    border-radius: 1rem;
-  }
-
   .app-error-message {
     padding-top: 2rem;
     padding-left: 0.5rem;

projects/aca-content/src/lib/components/view-profile/view-profile.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { AlfrescoApiService } from '@alfresco/adf-core';
+import { AlfrescoApiService, ButtonComponent } from '@alfresco/adf-core';
 import { PeopleApi, Person } from '@alfresco/js-api';
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -31,15 +31,13 @@ import { Observable, Subject, throwError } from 'rxjs';
 import { AppService } from '@alfresco/aca-shared';
 import { takeUntil } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatButtonModule, MatIconModule, MatDividerModule, MatFormFieldModule],
+  imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatDividerModule, MatFormFieldModule, ButtonComponent],
   selector: 'app-view-profile',
   templateUrl: './view-profile.component.html',
   styleUrls: ['./view-profile.component.scss'],
@@ -108,7 +106,8 @@ export class ViewProfileComponent implements OnInit, OnDestroy {
     });
   }
 
-  toggleGeneralDropdown() {
+  toggleGeneralDropdown(event: Event) {
+    event.preventDefault();
     this.generalSectionDropdown = !this.generalSectionDropdown;
 
     if (!this.generalSectionDropdown) {
@@ -157,7 +156,8 @@ export class ViewProfileComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleContactDropdown() {
+  toggleContactDropdown(event: Event) {
+    event.preventDefault();
     this.contactSectionDropdown = !this.contactSectionDropdown;
 
     if (!this.contactSectionDropdown) {