portalicious: theming feedback

AB#32473
global-121 · Jan 23, 2025 · a7bf4ac · a7bf4ac
1 parent 069e09e
commit a7bf4ac
Show file tree

Hide file tree

Showing 36 changed files with 411 additions and 146 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/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: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>

diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/header/header.component.ts b/interfaces/Portalicious/src/app/components/page-layout/components/header/header.component.ts
@@ -55,7 +55,7 @@ export class HeaderComponent {
   userMenuOptions = computed<MenuItem[]>(() => [
     {
       label: $localize`:Menu-item:Change password`,
-      icon: 'pi pi-cog',
+      icon: 'pi pi-key',
       routerLink: `/${AppRoutes.changePassword}`,
       visible: !!this.authService.ChangePasswordComponent,
     },

diff --git a/...icious/src/app/components/page-layout/components/project-menu/project-menu.component.html b/...icious/src/app/components/page-layout/components/project-menu/project-menu.component.html
@@ -1,5 +1,5 @@
 <div
-  class="w-full bg-white px-6 pt-1 shadow-project-menu lg:px-24 [&_.p-tablist-tab-list]:border-transparent [&_.p-tablist-tab-list_.p-tab:not(.p-tab-active)]:border-transparent"
+  class="w-full bg-white px-6 pt-1 shadow-project-menu lg:px-24 [&_.p-tablist-tab-list]:border-transparent [&_.p-tablist-tab-list_.p-tab:not(.p-tab-active):not(:hover)]:border-transparent"
   data-testid="project-header"
 >
   <app-tabs-menu [menuItems]="navMenuItems()" />

diff --git a/...ble/components/query-table-column-management/query-table-column-management.component.html b/...ble/components/query-table-column-management/query-table-column-management.component.html
@@ -2,7 +2,8 @@
   icon="pi pi-cog"
   (click)="showColumnManagement()"
   text
-  severity="secondary"
+  size="large"
+  severity="contrast"
   title="Manage table"
   i18n-title="@@query-table-manage-table"
   aria-label="Manage table"

diff --git a/...query-table/components/query-table-global-search/query-table-global-search.component.html b/...query-table/components/query-table-global-search/query-table-global-search.component.html
@@ -20,7 +20,7 @@
           icon="pi pi-times"
           (click)="filterChange.emit(undefined)"
           text
-          severity="secondary"
+          severity="contrast"
           class="absolute end-0 top-1/2 -translate-y-1/2"
           styleClass="bg-transparent hover:text-purple-700 focus:text-purple-700"
         />
@@ -31,7 +31,8 @@
       icon="pi pi-search"
       (click)="globalFilterVisible.set(true)"
       text
-      severity="secondary"
+      severity="contrast"
+      size="large"
       title="Filter by keyword"
       i18n-title="@@table-quick-search"
       aria-label="Filter by keyword"