refactor(ui): buttons style

src/app/core/components/header/header.component.html

@@ -6,6 +6,7 @@
       class="custom-dark-hover"
       icon="fas fa-chevron-down"
       iconPos="right"
+      variant="text"
       [label]="currentUser()?.fullName"
       (click)="menu.toggle($event)"
     ></p-button>

src/app/features/project/analytics/components/analytics-kpi/analytics-kpi.component.html

@@ -9,7 +9,7 @@
 
   @if (showButton()) {
     <div>
-      <p-button severity="secondary">{{ buttonLabel() | translate }}</p-button>
+      <p-button severity="secondary" [label]="buttonLabel() | translate"> </p-button>
     </div>
   }
 </div>

src/app/features/project/contributors/components/contributors-list/contributors-list.component.html

@@ -157,8 +157,8 @@ <h2>{{ 'project.contributors.curatorInfo.heading' | translate }}</h2>
           </div>
         </td>
         <td>
-          <p-button class="btn-icon-text button-shadow-none" (click)="removeContributor(contributor)">
-            <i class="osf-icon-trash red-icon"></i>
+          <p-button variant="text" [severity]="'danger'" (click)="removeContributor(contributor)">
+            <i class="fas fa-trash"></i>
           </p-button>
         </td>
       </tr>

src/app/features/project/files/project-files.component.html

@@ -42,34 +42,39 @@
     </div>
 
     <div class="flex flex-column w-full gap-2 sm:flex-row md:w-max">
-      <div class="btn-full-width">
-        @let id = currentFolder()?.id ?? '';
-        @let rootFolder = !currentFolder()?.relationships?.parentFolderLink;
-        <p-button [disabled]="fileIsUploading" class="no-padding-button" (click)="downloadFolder(id, rootFolder)">
-          <div class="outline-button w-full md:w-max blue">
-            <i class="osf-icon-download"> </i>
-            <span>{{ 'project.files.actions.downloadAsZip' | translate }}</span>
-          </div>
-        </p-button>
-      </div>
+      @let id = currentFolder()?.id ?? '';
+      @let rootFolder = !currentFolder()?.relationships?.parentFolderLink;
+      <p-button
+        [disabled]="fileIsUploading"
+        outlined
+        raised
+        (click)="downloadFolder(id, rootFolder)"
+        [icon]="'fas fa-download'"
+        [label]="'project.files.actions.downloadAsZip' | translate"
+      >
+      </p-button>
 
-      <div class="btn-full-width">
-        <p-button [disabled]="fileIsUploading" class="no-padding-button" (click)="createFolderVisible = true">
-          <div class="outline-button w-full md:w-max green">
-            <i class="osf-icon-plus"> </i>
-            <span>{{ 'project.files.actions.createFolder' | translate }}</span>
-          </div>
-        </p-button>
-      </div>
+      <p-button
+        [disabled]="fileIsUploading"
+        outlined
+        raised
+        severity="success"
+        [icon]="'fas fa-plus'"
+        [label]="'project.files.actions.createFolder' | translate"
+        (click)="createFolderVisible = true"
+      >
+      </p-button>
 
-      <div class="btn-full-width">
-        <p-button [disabled]="fileIsUploading" class="no-padding-button" (click)="fileInput.click()">
-          <div class="outline-button w-full md:w-max green">
-            <i class="osf-icon-upload"> </i>
-            <span>{{ 'project.files.actions.uploadFile' | translate }}</span>
-          </div>
-        </p-button>
-      </div>
+      <p-button
+        [disabled]="fileIsUploading"
+        outlined
+        raised
+        severity="success"
+        [icon]="'fas fa-upload'"
+        [label]="'project.files.actions.uploadFile' | translate"
+        (click)="fileInput.click()"
+      >
+      </p-button>
 
       <input #fileInput type="file" class="hidden" (change)="onFileSelected($event)" />
     </div>

src/app/features/project/metadata/project-metadata.component.html

@@ -22,13 +22,13 @@ <h2>{{ meta.title }}</h2>
           <p>{{ meta.description }}</p>
         </div>
 
-        <p-button severity="secondary"> Select </p-button>
+        <p-button severity="secondary" label="Select"> </p-button>
       </div>
     }
   </div>
 
-  <div class="flex justify-content-end flex-0 mt-auto">
-    <p-button label="Cancel" [link]="true" severity="info" class="w-10rem btn-full-width"></p-button>
+  <div class="flex justify-content-end flex-0 mt-auto gap-2">
+    <p-button label="Cancel" severity="info" class="w-10rem btn-full-width"></p-button>
     <p-button class="w-10rem btn-full-width bg-primary-blue-second" label="Next"></p-button>
   </div>
 </section>

src/app/features/project/overview/components/overview-components/overview-components.component.html

@@ -22,8 +22,8 @@ <h2 class="flex gap-2">
                 <a class="component-title" [href]="'my-projects/' + component.id">{{ component.title }}</a>
               </h2>
               <div>
-                <p-button class="btn-icon" (click)="componentActionMenu.toggle($event)">
-                  <i class="osf-icon-dots"></i>
+                <p-button severity="contrast" raised variant="outlined" (click)="componentActionMenu.toggle($event)">
+                  <i class="fas fa-ellipsis-vertical"></i>
                 </p-button>
 
                 <p-menu appendTo="body" #componentActionMenu [model]="componentActionItems(component.id)" popup>

src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html

@@ -2,12 +2,7 @@
   class="flex justify-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
 >
   <div class="flex align-items-center gap-2 cursor-pointer w-full sm:w-5">
-    <p-button
-      role="button"
-      [ariaLabel]="'Toggle ' + title()"
-      class="btn-icon-text form-btn button-shadow-none"
-      (click)="toggle()"
-    >
+    <p-button role="button" variant="text" severity="contrast" [ariaLabel]="'Toggle ' + title()" (click)="toggle()">
       <i class="pi" [ngClass]="{ 'pi-plus': !expanded(), 'pi-minus': expanded() }"></i>
     </p-button>
 

src/app/features/settings/account-settings/components/add-email/add-email.component.html

@@ -16,8 +16,7 @@
       class="w-full"
       styleClass="w-full"
       (onClick)="dialogRef.close()"
-      [text]="true"
-      severity="secondary"
+      severity="info"
       [label]="'settings.accountSettings.addEmail.buttons.cancel' | translate"
     >
     </p-button>

src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html

@@ -50,8 +50,11 @@ <h2 class="account-setting-header">{{ 'settings.accountSettings.connectedEmails.
                 }
               </div>
 
-              <p-button severity="secondary" (click)="makePrimary(email.id)">
-                {{ 'settings.accountSettings.connectedEmails.buttons.makePrimary' | translate }}
+              <p-button
+                severity="secondary"
+                (click)="makePrimary(email.id)"
+                [label]="'settings.accountSettings.connectedEmails.buttons.makePrimary' | translate"
+              >
               </p-button>
             </div>
           }

src/app/shared/utils/default-confirmation-config.helper.ts

@@ -8,7 +8,6 @@ export const defaultConfirmationConfig: Confirmation = {
   rejectButtonProps: {
     label: 'Cancel',
     severity: 'info',
-    outlined: true,
   },
   acceptButtonProps: {
     label: 'Confirm',