Develop

.github/workflows/compile_and_build.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 21
+          node-version: 22
 
       - name: Install dependencies
         run: npm install

react/assets/forus-platform/scss/_common/blocks/block-export-options.scss

@@ -1,4 +1,4 @@
-&.block-export-options {
+.block.block-export-options {
     .export-section {
         margin-bottom: 25px;
         display: flex;

react/assets/forus-platform/scss/_common/components/modals.scss

@@ -67,11 +67,15 @@
 
         .modal-header {
             background: #fff;
-            padding: 20px 25px;
+            padding: 15px 25px;
             font: 600 16px/25px var(--base-font);
             border-bottom: 1px solid #d4d9dd;
             position: relative;
             border-radius: 3px 3px 0 0;
+
+            &.modal-header-compact {
+                padding: 10px 25px;
+            }
         }
 
         .modal-body {
@@ -173,6 +177,10 @@
                     }
                 }
 
+                &.modal-section-compact {
+                    padding: 10px 20px;
+                }
+
                 &.modal-section-collapse {
                     padding: 0;
                 }

react/assets/forus-platform/scss/_common/components/tables.scss

@@ -587,6 +587,13 @@
                 }
             }
 
+            &.tr-collapsed {
+                td {
+                    padding-top: 0px;
+                    padding-bottom: 0px;
+                }
+            }
+
             &.light {
                 background: #fff;
             }

react/assets/forus-platform/scss/_common/dashboard.scss

@@ -54,7 +54,6 @@
     @import 'blocks/block-system-notification-editor.scss';
     @import 'blocks/block-mail_preview.scss';
     @import 'blocks/block-photo-selector-notifications.scss';
-    @import 'blocks/block-export-options.scss';
     @import 'blocks/block-feedback-result.scss';
     @import 'blocks/block-permissions-list.scss';
     @import 'blocks/block-announcements.scss';
@@ -99,6 +98,7 @@
 @import 'blocks/block-label-tabs.scss';
 @import 'blocks/block-translation-stats.scss';
 @import 'blocks/block-provider-product-overview.scss';
+@import 'blocks/block-export-options.scss';
 @import 'blocks/block-attachments-list.scss';
 @import 'blocks/block-request-clarification.scss';
 

react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss

@@ -2,9 +2,11 @@
     width: 100%;
     padding: 32px;
     background: #fff;
-    box-shadow: var(--box-shadow);
     margin-bottom: 40px;
-    border-radius: var(--border-radius);
+    background: var(--showcase-item-background);
+    border-radius: var(--showcase-item-border-radius);
+    box-shadow: var(--showcase-item-shadow);
+    border: var(--showcase-item-border);
 
     .block-accessibility-header {
         font: 400 18px/27px var(--base-font);
@@ -39,9 +41,13 @@
             }
         }
 
+        &:first-child {
+            padding-top: 0;
+        }
+
         &:last-child {
             border-bottom: none;
             padding-bottom: 0;
         }
     }
-}
+}

react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss

@@ -9,6 +9,7 @@
         display: flex;
         padding: 0 0 40px;
         border-bottom: 1px solid var(--border-color);
+        transition: box-shadow 0.4s;
 
         .fund-media {
             width: 52%;
@@ -28,8 +29,7 @@
             display: flex;
             flex-direction: column;
             align-self: center;
-            cursor: default;
-
+
             .fund-label {
                 margin: 0 0 5px;
                 line-height: 20px;
@@ -81,6 +81,10 @@
         }
     }
 
+    a.fund-item:hover {
+        box-shadow: var(--showcase-item-hover-shadow);
+    }
+
     @media screen and (min-width: 1000px) {
         &.block-cms-funds-compact {
             --gap: 25px;

react/assets/forus-webshop/scss/includes/blocks/block-faq.scss

@@ -3,7 +3,34 @@
     flex-direction: column;
     max-width: 100%;
     align-items: center;
-    gap: 8px;
+    gap: 30px;
+
+    .block-faq-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .block-faq-header {
+        max-width: 100%;
+        width: 1080px;
+        margin-bottom: 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .block-faq-title {
+            color: #222;
+            font: 700 22px/30px var(--base-font);
+            margin: 0 0;
+        }
+
+        .block-faq-subtitle {
+            color: #353535;
+            font: 400 18px/24px var(--base-font);
+            margin: 0 0;
+        }
+    }
 
     .faq-item {
         background: #fff;
@@ -89,6 +116,20 @@
     }
 
     @media screen and (max-width: 1000px) {
+        gap: 20px;
+
+        .block-faq-header {
+            margin-bottom: 5px;
+
+            .block-faq-title {
+                font: 700 16px/24px var(--base-font);
+            }
+
+            .block-faq-subtitle {
+                font: 400 12px/20px var(--base-font);
+            }
+        }
+
         .faq-item {
             .faq-item-header {
                 padding: 15px 14px 15px 15px;

react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss

@@ -239,5 +239,9 @@
             font: 500 1.3em var(--heading-font-family);
             margin-bottom: 1em;
         }
+
+        &.block-markdown-large {
+            padding-right: 0;
+        }
     }
 }

react/assets/forus-webshop/scss/includes/blocks/block-products.scss

@@ -35,11 +35,10 @@
             min-width: 0;
             flex-direction: column;
             background: #ffffff;
-            @include cf();
 
             .product-photo {
                 display: flex;
-                flex: 1 1 100%;
+                flex: 0 1 auto;
                 border-bottom: 1px solid var(--border-color);
 
                 img {
@@ -63,20 +62,24 @@
                     flex: 0 1 auto;
                     margin: 0 0;
                     word-wrap: break-word;
+                    color: var(--products-text-color);
+                }
+
+                .product-subtitle,
+                .product-price {
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    color: var(--products-text-color);
                 }
 
                 .product-title {
-                    font: 700 17px/24px var(--base-font);
+                    font: 700 16px/24px var(--base-font);
                     color: var(--products-title-color);
                     transition: 0.4s color;
                 }
 
                 .product-subtitle {
-                    font: 400 14px/20px var(--base-font);
+                    font: 400 13px/20px var(--base-font);
                 }
             }
 

react/assets/forus-webshop/scss/includes/layout/_header.scss

@@ -2,7 +2,7 @@
     .section-title {
         font: var(--heading-font);
         color: var(--heading-color);
-        margin: 0 0 20px;
+        margin: 0 0 30px;
         text-align: center;
     }
 

react/assets/forus-webshop/scss/includes/sections/_section.scss

@@ -3,7 +3,7 @@
         color: var(--heading-color);
         font: var(--section-title-font);
         text-align: var(--section-title-align);
-        margin: 0 0 20px;
+        margin: 0 0 30px;
 
         a {
             font: inherit !important;

react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx

@@ -23,13 +23,13 @@ import { useOrganizationService } from '../../../services/OrganizationService';
 import TableTopScroller from '../tables/TableTopScroller';
 
 export default function BlockCardNotes({
-    isAssigned,
+    showCreate,
     fetchNotes,
     deleteNote,
     storeNote,
     fetchNotesRef,
 }: {
-    isAssigned: boolean;
+    showCreate: boolean;
     fetchNotes: (value: FilterModel) => Promise<ApiResponse<Note>>;
     deleteNote: (note: Note) => Promise<ApiResponseSingle<null>>;
     storeNote: (values: FormValuesModel) => Promise<ApiResponseSingle<Note>>;
@@ -131,7 +131,7 @@ export default function BlockCardNotes({
                     {translate('notes.header.title')}({notes.meta.total})
                 </div>
                 <div className="button-group">
-                    {isAssigned && (
+                    {showCreate && (
                         <div className="button button-sm button-primary" onClick={onAddNote} data-dusk="addNoteBtn">
                             <em className="mdi mdi-plus icon-start" />
                             {translate('notes.buttons.add_new')}
@@ -146,7 +146,7 @@ export default function BlockCardNotes({
                         {configsElement}
 
                         <TableTopScroller>
-                            <table className="table table-align-top">
+                            <table className="table">
                                 {headElement}
 
                                 <tbody>
@@ -167,11 +167,14 @@ export default function BlockCardNotes({
                                                 {note.employee.identity_address === identity.address && (
                                                     <TableRowActions
                                                         dataDusk={`noteMenuBtn${note.id}`}
-                                                        content={() => (
+                                                        content={(e) => (
                                                             <div className="dropdown dropdown-actions">
                                                                 <div
                                                                     className="dropdown-item"
-                                                                    onClick={() => onDeleteNote(note)}
+                                                                    onClick={() => {
+                                                                        e?.close();
+                                                                        onDeleteNote(note);
+                                                                    }}
                                                                     data-dusk="deleteNoteBtn">
                                                                     <em className="mdi mdi-delete-outline icon-start" />
                                                                     Verwijderen

react/src/dashboard/components/elements/card/Card.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Button, ButtonType } from '../button/Button';
+import classNames from 'classnames';
 
 export default function Card({
     title,
@@ -9,6 +10,7 @@ export default function Card({
     footer,
     footerHidden = false,
     dusk = null,
+    className = '',
 }: {
     title: string;
     section?: boolean;
@@ -17,9 +19,10 @@ export default function Card({
     footer?: ReactNode | ReactNode[];
     footerHidden?: boolean;
     dusk?: string;
+    className?: string;
 }) {
     return (
-        <div className={'card'} data-dusk={dusk}>
+        <div className={classNames('card', className)} data-dusk={dusk}>
             <div className="card-header">
                 <div className="card-title flex flex-grow">{title}</div>
                 <div className="card-header-actions">

react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx

@@ -20,7 +20,7 @@ export default function CardBlockKeyValue({
             {items?.map((item, index) => (
                 <div className="keyvalue-item" key={index}>
                     <div className="keyvalue-key">{item.label}</div>
-                    <div className="keyvalue-value text-black">{item.value || <TableEmptyValue />}</div>
+                    <div className="keyvalue-value text-black">{item.value ?? <TableEmptyValue />}</div>
                 </div>
             ))}
         </div>