portalicious: theming feedback

AB#32473
global-121 · Jan 24, 2025 · d2a095b · d2a095b
1 parent 97eae2c
commit d2a095b
Show file tree

Hide file tree

Showing 41 changed files with 443 additions and 222 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,6 +6,15 @@
     "source.fixAll.eslint": "explicit",
     "source.removeUnusedImports": "explicit"
   },
+  "tailwindCSS.rootFontSize": 14,
+  "tailwindCSS.showPixelEquivalents": true,
+  "tailwindCSS.classAttributes": [
+    "class",
+    "styleClass",
+    "icon",
+    "ngClass",
+    "class:list"
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   // The following setting is necessary to avoid false negatives in the VSCode Angular Language

diff --git a/e2e/portalicious/components/TableComponent.ts b/e2e/portalicious/components/TableComponent.ts
@@ -25,7 +25,7 @@ class TableComponent {
     this.globalSearchOpenerButton = this.page.getByTitle('Filter by keyword');
     this.globalSearchInput = this.page.getByPlaceholder('Filter by keyword');
     this.clearAllFiltersButton = this.page.getByRole('button', {
-      name: 'Clear all filters',
+      name: 'Clear filters',
     });
     this.applyFiltersButton = this.page.getByLabel('Apply');
     this.textboxField = this.page.getByRole('textbox');

diff --git a/e2e/portalicious/tests/ExportPeopleAffectedList/ExportDuplicateRegistrations.spec.ts b/e2e/portalicious/tests/ExportPeopleAffectedList/ExportDuplicateRegistrations.spec.ts
@@ -50,9 +50,7 @@ test('[29318] Export duplicate people affected list', async ({ page }) => {
 
   await test.step('Export list and validate XLSX files downloaded', async () => {
     await registrations.selectAllRegistrations();
-    await registrations.clickAndSelectExportOption(
-      'Export duplicate registrations',
-    );
+    await registrations.clickAndSelectExportOption('Duplicate registrations');
     await registrations.exportAndAssertDuplicates(0, {
       id,
       status,

diff --git a/e2e/portalicious/tests/ExportPeopleAffectedList/ExportHighVolumeOfRegistrations.spec.ts b/e2e/portalicious/tests/ExportPeopleAffectedList/ExportHighVolumeOfRegistrations.spec.ts
@@ -51,9 +51,7 @@ test('[29359] Export inclusion list with 15000 PAs', async ({ page }) => {
 
   await test.step('Export list and validate XLSX file downloaded', async () => {
     await registrations.selectAllRegistrations();
-    await registrations.clickAndSelectExportOption(
-      'Export selected registrations',
-    );
+    await registrations.clickAndSelectExportOption('Selected registrations');
     await registrations.exportAndAssertSelectedRegistrations(
       0,
       {

diff --git a/e2e/portalicious/tests/ExportPeopleAffectedList/ExportRegistrationsDataChanges.spec.ts b/e2e/portalicious/tests/ExportPeopleAffectedList/ExportRegistrationsDataChanges.spec.ts
@@ -48,9 +48,7 @@ test('[29337] Export all People Affected data changes', async ({ page }) => {
 
   await test.step('Export list and validate XLSX files downloaded', async () => {
     await registrations.selectAllRegistrations();
-    await registrations.clickAndSelectExportOption(
-      'Export status & data changes',
-    );
+    await registrations.clickAndSelectExportOption('Status & data changes');
     await registrations.exportAndAssertStatusAndDataChanges(0, {
       referenceId: registrationsPV[0].referenceId, // Assert only the first registration
       changedBy,

diff --git a/e2e/portalicious/tests/ExportPeopleAffectedList/ExportRegistrationsList.spec.ts b/e2e/portalicious/tests/ExportPeopleAffectedList/ExportRegistrationsList.spec.ts
@@ -50,9 +50,7 @@ test('[29358] Export People Affected list', async ({ page }) => {
 
   await test.step('Export list and validate XLSX files downloaded', async () => {
     await registrations.selectAllRegistrations();
-    await registrations.clickAndSelectExportOption(
-      'Export selected registrations',
-    );
+    await registrations.clickAndSelectExportOption('Selected registrations');
     await registrations.exportAndAssertSelectedRegistrations(0, {
       id,
       status,

diff --git a/e2e/portalicious/tests/SendMessage/SendTemplatedMessage.spec.ts b/e2e/portalicious/tests/SendMessage/SendTemplatedMessage.spec.ts
@@ -14,9 +14,9 @@ import RegistrationsPage from '@121-e2e/portalicious/pages/RegistrationsPage';
 const sendingMessageToast =
   'Closing this notification will not cancel message sending.';
 const englishMessageTemplate =
-  'This is a message from the Red Cross. Thanks for registering. From now on you will receive an Albert Heijn voucher via WhatsApp every Tuesday. You will receive the vouchers as long as you are on the list of . The Red Cross can also provide you with information about, for example, medical assistance, food or safety. Check out our website: https://helpfulinformation.redcross.nl/ or ask your question via WhatsApp: https://wa.me/3197010286964';
+  'This is a message from the Red Cross.\n\nThanks for registering. From now on you will receive an Albert Heijn voucher via WhatsApp every Tuesday. You will receive the vouchers as long as you are on the list of .\n\nThe Red Cross can also provide you with information about, for example, medical assistance, food or safety. Check out our website:\n\nhttps://helpfulinformation.redcross.nl/\n\nor ask your question via WhatsApp:\n\nhttps://wa.me/3197010286964';
 const dutchMessageTemplate =
-  'Dit is een bericht van het Rode Kruis. Bedankt voor je inschrijving. Je ontvangt vanaf nu elke dinsdag een Albert Heijn waardebon via WhatsApp. Je ontvangt de waardebonnen zo lang je op de lijst staat van . Het Rode Kruis kan je ook informatie geven over bijvoorbeeld medische hulp, voedsel of veiligheid. Kijk op onze website: https://helpfulinformation.redcross.nl/ of stel je vraag via WhatsApp: https://wa.me/3197010286964';
+  'Dit is een bericht van het Rode Kruis.\n\nBedankt voor je inschrijving. Je ontvangt vanaf nu elke dinsdag een Albert Heijn waardebon via WhatsApp. Je ontvangt de waardebonnen zo lang je op de lijst staat van .\n\nHet Rode Kruis kan je ook informatie geven over bijvoorbeeld medische hulp, voedsel of veiligheid. Kijk op onze website:\n\nhttps://helpfulinformation.redcross.nl/\n\nof stel je vraag via WhatsApp:\n\nhttps://wa.me/3197010286964';
 
 test.beforeEach(async ({ page }) => {
   await resetDB(SeedScript.nlrcMultiple);

diff --git a/interfaces/Portalicious/.vscode/settings.json b/interfaces/Portalicious/.vscode/settings.json
@@ -8,7 +8,7 @@
   "eslint.format.enable": true,
   "css.customData": [".vscode/tailwind.json"],
   "tailwindCSS.rootFontSize": 14,
-  "tailwindCSS.showPixelEquivalents": false,
+  "tailwindCSS.showPixelEquivalents": true,
   "tailwindCSS.classAttributes": [
     "class",
     "styleClass",

diff --git a/interfaces/Portalicious/eslint.config.js b/interfaces/Portalicious/eslint.config.js
@@ -123,6 +123,7 @@ module.exports = tseslint.config(
             'ng-container[slot]',
             'p-button[icon]',
             'p-button[iconPos]',
+            'p-button[size]',
             'p-columnFilter[display]',
             'p-drawer[position]',
             'p-fileUpload[accept]',
@@ -141,6 +142,7 @@ module.exports = tseslint.config(
             'styleClass',
             'severity',
             'th[pSortableColumn]',
+            'app-button-menu[size]',
             'app-colored-chip[variant]',
             'app-confirmation-dialog[headerClass]',
             'app-confirmation-dialog[headerIcon]',

diff --git a/interfaces/Portalicious/src/app/app.theme.ts b/interfaces/Portalicious/src/app/app.theme.ts
@@ -55,21 +55,27 @@ const AppTheme = definePreset(Aura, {
           hoverColor: colors.purple.DEFAULT,
         },
         text: {
+          color: colors.black.DEFAULT,
           hoverColor: colors.purple.DEFAULT,
         },
         highlight: {
           background: colors.purple[100],
           focusBackground: colors.purple[100],
           color: colors.purple.DEFAULT,
-          focusColor: colors.purple.DEFAULT,
+          focusColor: colors.black.DEFAULT,
         },
         formField: {
-          hoverBorderColor: colors.purple.DEFAULT,
+          color: colors.black.DEFAULT,
+          focusBorderColor: colors.purple[500],
+          hoverBorderColor: colors.purple[500],
           invalidBorderColor: colors.red[500],
           invalidPlaceholder: colors.red[500],
         },
         navigation: {
           item: {
+            focusColor: colors.black.DEFAULT,
+            iconColor: colors.black.DEFAULT,
+            iconFocusColor: colors.black.DEFAULT,
             focusBackground: colors.purple[100],
             activeBackground: colors.purple[100],
           },
@@ -79,12 +85,79 @@ const AppTheme = definePreset(Aura, {
     focusRing: {
       color: colors.purple.DEFAULT,
     },
+    borderRadius: {
+      // used by cards
+      xl: '1.125rem',
+    },
   },
   components: {
     button: {
-      text: {
-        primary: {
-          color: colors.black.DEFAULT,
+      gap: '0.625rem',
+      paddingX: '1.25rem',
+      paddingY: '0.6rem',
+      sm: {
+        paddingX: '1rem',
+        paddingY: '0.25rem',
+      },
+      colorScheme: {
+        light: {
+          primary: {
+            hover: {
+              background: colors.purple[600],
+            },
+            active: {
+              background: colors.purple[900],
+            },
+          },
+          outlined: {
+            primary: {
+              hover: {
+                background: colors.purple[100],
+              },
+              active: {
+                background: colors.white,
+                color: colors.purple[900],
+              },
+            },
+            contrast: {
+              border: {
+                color: colors.grey[500],
+              },
+              hover: {
+                background: colors.grey[100],
+              },
+              active: {
+                background: colors.white,
+              },
+            },
+          },
+          text: {
+            primary: {
+              color: colors.black.DEFAULT,
+            },
+            secondary: {
+              color: colors.black.DEFAULT,
+            },
+          },
+        },
+      },
+    },
+    card: {
+      shadow: tailwindConfig.theme.extend.boxShadow.cards,
+    },
+    datatable: {
+      body: {
+        cell: {
+          padding: '0.625rem 1rem',
+        },
+      },
+      colorScheme: {
+        light: {
+          row: {
+            hover: {
+              color: colors.black.DEFAULT,
+            },
+          },
         },
       },
     },
@@ -93,6 +166,47 @@ const AppTheme = definePreset(Aura, {
         light: severityVariants,
       },
     },
+    radiobutton: {
+      colorScheme: {
+        light: {
+          icon: {
+            checked: {
+              color: colors.purple.DEFAULT,
+              hover: {
+                color: colors.purple.DEFAULT,
+              },
+            },
+          },
+          checked: {
+            background: colors.white,
+            hover: {
+              background: colors.white,
+            },
+          },
+        },
+      },
+    },
+    scrollpanel: {
+      colorScheme: {
+        light: {
+          bar: {
+            background: colors.grey[700],
+          },
+        },
+      },
+      bar: {
+        size: '0.5rem',
+      },
+    },
+    tabs: {
+      tab: {
+        color: colors.black.DEFAULT,
+        hover: {
+          color: colors.grey[700],
+          borderColor: colors.grey[700],
+        },
+      },
+    },
     toast: {
       colorScheme: {
         light: severityVariants,

diff --git a/interfaces/Portalicious/src/app/components/button-menu/button-menu.component.html b/interfaces/Portalicious/src/app/components/button-menu/button-menu.component.html
@@ -26,7 +26,7 @@
   [popup]="true"
   (onShow)="menuOpen.set(true)"
   (onHide)="menuOpen.set(false)"
-  styleClass="mt-2"
+  styleClass="mt-3"
 >
   <ng-template pTemplate="start">
     <ng-content select="[menu-start]"></ng-content>

diff --git a/...p/components/card-summary-metrics-container/card-summary-metrics-container.component.html b/...p/components/card-summary-metrics-container/card-summary-metrics-container.component.html
@@ -1,4 +1,4 @@
-<dl class="grid grid-cols-2 items-stretch gap-4 border-t border-grey-300">
+<dl class="grid grid-cols-2 items-stretch gap-x-6 border-t border-grey-300">
   @for (metric of summaryMetrics(); track metric) {
     <app-metric-container [metric]="metric"></app-metric-container>
   }

diff --git a/interfaces/Portalicious/src/app/components/colored-chip/colored-chip.component.ts b/interfaces/Portalicious/src/app/components/colored-chip/colored-chip.component.ts
@@ -10,6 +10,7 @@ import { TooltipModule } from 'primeng/tooltip';
 
 export type ChipVariant =
   | 'blue'
+  | 'contrast'
   | 'green'
   | 'grey'
   | 'orange'
@@ -45,7 +46,7 @@ export class ColoredChipComponent {
       case 'green':
         return `${baseClass} bg-green-100 text-green-700`;
       case 'purple':
-        return `${baseClass} bg-purple-100 text-purple-700`;
+        return `${baseClass} bg-purple-100 text-purple-900`;
       case 'red':
         return `${baseClass} bg-red-100 text-red-700`;
       case 'orange':
@@ -54,6 +55,8 @@ export class ColoredChipComponent {
         return `${baseClass} bg-yellow-100 text-yellow-700`;
       case 'grey':
         return `${baseClass} bg-grey-100 text-grey-700`;
+      case 'contrast':
+        return `${baseClass} bg-grey-50 text-grey-900`;
       default:
         return '';
     }

diff --git a/...es/Portalicious/src/app/components/confirmation-dialog/confirmation-dialog.component.html b/...es/Portalicious/src/app/components/confirmation-dialog/confirmation-dialog.component.html
@@ -13,7 +13,7 @@ <h3 [class]="headerClass()">
         <p-button
           icon="pi pi-times"
           class="ms-auto"
-          severity="secondary"
+          severity="contrast"
           text
           (click)="confirmDialog.onReject()"
         />

diff --git a/...aces/Portalicious/src/app/components/form-field-wrapper/form-field-wrapper.component.html b/...aces/Portalicious/src/app/components/form-field-wrapper/form-field-wrapper.component.html
@@ -1,11 +1,13 @@
-<!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
-<label
-  class="block [&_.p-datepicker]:w-full [&_input]:w-full [&_textarea]:w-full"
->
-  <strong class="mb-2 block">
-    {{ label() | translatableString }}
-  </strong>
-  <ng-content></ng-content>
-  <app-form-error [error]="errorMessage()" />
-</label>
-<ng-content select="[slot='details']"></ng-content>
+<div class="mb-2">
+  <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+  <label
+    class="block [&_.p-datepicker]:w-full [&_input]:w-full [&_textarea]:w-full"
+  >
+    <strong class="mb-2 block">
+      {{ label() | translatableString }}
+    </strong>
+    <ng-content></ng-content>
+    <app-form-error [error]="errorMessage()" />
+  </label>
+  <ng-content select="[slot='details']"></ng-content>
+</div>
diff --git a/interfaces/Portalicious/src/app/components/form/form-default.component.html b/interfaces/Portalicious/src/app/components/form/form-default.component.html
@@ -15,6 +15,7 @@
       type="submit"
       rounded
       [loading]="mutation().isPending()"
+      styleClass="w-full"
     />
   </div>
 </form>
diff --git a/interfaces/Portalicious/src/app/components/metric-container/metric-container.component.html b/interfaces/Portalicious/src/app/components/metric-container/metric-container.component.html
@@ -1,5 +1,5 @@
 <div class="flex h-full flex-col">
-  <dt class="px-2 pb-2 pt-2 txt-body-m">
+  <dt class="px-2 pb-2 pt-5 text-grey-700 txt-body-m">
     {{ metric().label }}
   </dt>
   <dd class="mt-auto border-b border-grey-300 px-2 pb-2 font-bold txt-h-2">

diff --git a/...faces/Portalicious/src/app/components/page-layout/components/header/header.component.html b/...faces/Portalicious/src/app/components/page-layout/components/header/header.component.html
@@ -25,17 +25,17 @@
           i18n-label="Top-right user-menu@@header-user-menu"
           [icon]="'pi pi-user'"
           [menuItems]="userMenuOptions()"
-          class="[&_.p-button-label]:duration-0 [&_button:focus]:bg-white [&_button:not(:hover,:focus)]:text-white"
+          class="[&_.p-button-label]:font-semibold [&_.p-button-label]:duration-0 [&_.p-button-label]:txt-body-m [&_button:focus]:border-white [&_button:focus]:bg-transparent [&_button:hover]:border-white [&_button:hover]:bg-transparent [&_button]:text-white"
           [plain]="true"
           [text]="true"
-          [size]="'small'"
+          size="small"
         >
           <p
             menu-start
             class="mb-2 border-b border-b-grey-300 px-3 py-2"
           >
             <ng-container i18n>
-              Logged in as: <strong>{{ userName() }}</strong>
+              Logged in as:<br />{{ userName() }}
             </ng-container>
           </p>
         </app-button-menu>
@@ -59,7 +59,7 @@
       [pFocusTrapDisabled]="!sidebarVisible()"
       [tabIndex]="-1"
     >
-      <div>
+      <div class="p-drawer-header p-0">
         <p-button
           label="Close"
           i18n-label="@@generic-close"
@@ -114,7 +114,7 @@
       </div>
       <div class="px-6">
         <app-language-switcher />
-        <small class="block text-center text-grey-500">
+        <small class="block pb-2 text-center text-grey-500">
           <app-health-widget />
         </small>
       </div>