Merge pull request #709 from openstad/fix/dh-styling_8-01

Fix/dh styling 8 01
openstad · Jan 13, 2025 · d5f3d3e · d5f3d3e
2 parents f8266d0 + 4b2ffe2
commit d5f3d3e
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 14 deletions.
diff --git a/operations/deployments/openstad-headless/environments/prod/images.yml b/operations/deployments/openstad-headless/environments/prod/images.yml
@@ -1,15 +1,15 @@
 admin:
   deploymentContainer:
-    image: ghcr.io/openstad/admin-server:main-42ebce1
+    image: ghcr.io/openstad/admin-server:main-2b2d38e
 api:
   deploymentContainer:
-    image: ghcr.io/openstad/api-server:main-42ebce1
+    image: ghcr.io/openstad/api-server:main-2b2d38e
 auth:
   deploymentContainer:
-    image: ghcr.io/openstad/auth-server:main-42ebce1
+    image: ghcr.io/openstad/auth-server:main-2b2d38e
 image:
   deploymentContainer:
-    image: ghcr.io/openstad/image-server:main-42ebce1
+    image: ghcr.io/openstad/image-server:main-2b2d38e
 cms:
   deploymentContainer:
-    image: ghcr.io/openstad/cms-server:main-42ebce1
+    image: ghcr.io/openstad/cms-server:main-2b2d38e
diff --git a/packages/document-map/src/document-map.css b/packages/document-map/src/document-map.css
@@ -402,4 +402,20 @@ a + .url-list:before {
   padding: 0;
   left: 50%;
   transform: translateX(-50%);
+}
+
+section.comment-item-footer .utrecht-button--disabled:before, 
+.like-option-container .utrecht-button--disabled:hover:before {
+  content: 'Je moet ingelogd zijn om te kunnen reageren.';
+  position: absolute;
+  inset: 3px;
+  background: #adadad;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  font-size: 12px;
+  padding: 10px 10px;
+  line-height: 13px;
+  font-weight: 500;
 }
diff --git a/packages/document-map/src/document-map.tsx b/packages/document-map/src/document-map.tsx
@@ -704,7 +704,7 @@ function DocumentMap({
               {displayResourceInfo === 'left' && (
                 <section className="content-intro">
                   {resource.title ? <Heading level={1}>{resource.title}</Heading> : null}
-                  {resource.summary ? <Paragraph>{resource.summary}</Paragraph> : null}
+                  {resource.summary ? <Heading level={2} appearance='utrecht-heading-4' dangerouslySetInnerHTML={{ __html: resource.summary }}></Heading> : null}
 
                   {(displayResourceDescription === 'yes' && resource.description) ? <Paragraph dangerouslySetInnerHTML={{ __html: resource.description }} /> : null}
                 </section>
@@ -716,7 +716,7 @@ function DocumentMap({
             <div className="content-container mobileonly">
               <section className="content-intro">
                 {resource.title ? <Heading level={1}>{resource.title}</Heading> : null}
-                {resource.summary ? <Paragraph>{resource.summary}</Paragraph> : null}
+                {resource.summary ? <Heading level={2} appearance='utrecht-heading-4' dangerouslySetInnerHTML={{ __html: resource.summary }}></Heading> : null}
 
                 {(displayResourceDescription === 'yes' && resource.description) ? <Paragraph dangerouslySetInnerHTML={{ __html: resource.description }} /> : null}
               </section>
@@ -931,7 +931,7 @@ function DocumentMap({
           {displayResourceInfo === 'right' && (
             <section className="content-intro desktoponly">
               {resource.title ? <Heading level={1}>{resource.title}</Heading> : null}
-              {resource.summary ? <Paragraph>{resource.summary}</Paragraph> : null}
+              {resource.summary ? <Heading level={2} appearance='utrecht-heading-4' dangerouslySetInnerHTML={{ __html: resource.summary }}></Heading> : null}
 
               {(displayResourceDescription === 'yes' && resource.description) ? <Paragraph dangerouslySetInnerHTML={{ __html: resource.description }} /> : null}
 

diff --git a/packages/leaflet-map/src/area.tsx b/packages/leaflet-map/src/area.tsx
@@ -151,7 +151,7 @@ export function Area({
                 <>
                   <Popup className={'leaflet-popup'}>
                     {item.title && <h3 className="utrecht-heading-3">{item.title}</h3>}
-                    {item.url && <a className="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--primary-action" href={item.url}>Lees verder</a>}
+                    {item.url && <a className="pop-up-link" href={item.url}>Lees verder</a>}
                   </Popup>
                 </>
               }

diff --git a/packages/leaflet-map/src/css/base-map.css b/packages/leaflet-map/src/css/base-map.css
@@ -16,8 +16,17 @@
 }
 
 .leaflet-container a {
-  color: var(--_utrecht-button-appearance-color);
+  display: inline-block;
+  font-size: 18px;
+  color: var(--utrecht-button-primary-action-background-color);
 }
 .leaflet-bottom.leaflet-right{
   display: none;
-}
+}
+
+
+.leaflet-popup .leaflet-popup-content{
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
diff --git a/packages/resource-detail-with-map/src/resourceDetailWithMap.css b/packages/resource-detail-with-map/src/resourceDetailWithMap.css
@@ -155,4 +155,49 @@
 
 .osc-resource-detail-content.osc-resource-detail-grid .osc-resource-detail-content-items.resource-has-no-images .osc-carousel .carousel-items .image-container img {
   display: none;
-}
+}
+
+
+/* Text Colors */
+.color-FFFFFF { color: #FFFFFF; }
+.color-000000 { color: #000000; }
+.color-EC673E { color: #EC673E; }
+.color-7DB47B { color: #7DB47B; }
+.color-98BFE6 { color: #98BFE6; }
+.color-FAE065 { color: #FAE065; }
+.color-F59A02 { color: #F59A02; }
+.color-B078AF { color: #B078AF; }
+.color-E881B0 { color: #E881B0; }
+.color-A52A2A { color: #A52A2A; }
+.color-D1D1D1 { color: #D1D1D1; }
+.color-00FFFF { color: #00FFFF; }
+.color-FFD700 { color: #FFD700; }
+.color-ADFF2F { color: #ADFF2F; }
+.color-4B0082 { color: #4B0082; }
+.color-8B4513 { color: #8B4513; }
+.color-FA8072 { color: #FA8072; }
+.color-20B2AA { color: #20B2AA; }
+.color-4682B4 { color: #4682B4; }
+.color-D3D3D3 { color: #D3D3D3; }
+
+/* Background Colors */
+.bgColor-FFFFFF { background-color: #FFFFFF; }
+.bgColor-000000 { background-color: #000000; }
+.bgColor-EC673E { background-color: #EC673E; }
+.bgColor-7DB47B { background-color: #7DB47B; }
+.bgColor-98BFE6 { background-color: #98BFE6; }
+.bgColor-FAE065 { background-color: #FAE065; }
+.bgColor-F59A02 { background-color: #F59A02; }
+.bgColor-B078AF { background-color: #B078AF; }
+.bgColor-E881B0 { background-color: #E881B0; }
+.bgColor-A52A2A { background-color: #A52A2A; }
+.bgColor-D1D1D1 { background-color: #D1D1D1; }
+.bgColor-00FFFF { background-color: #00FFFF; }
+.bgColor-FFD700 { background-color: #FFD700; }
+.bgColor-ADFF2F { background-color: #ADFF2F; }
+.bgColor-4B0082 { background-color: #4B0082; }
+.bgColor-8B4513 { background-color: #8B4513; }
+.bgColor-FA8072 { background-color: #FA8072; }
+.bgColor-20B2AA { background-color: #20B2AA; }
+.bgColor-4682B4 { background-color: #4682B4; }
+.bgColor-D3D3D3 { background-color: #D3D3D3; }
diff --git a/packages/resource-detail-with-map/src/resourceDetailWithMap.tsx b/packages/resource-detail-with-map/src/resourceDetailWithMap.tsx
@@ -166,6 +166,17 @@ function ResourceDetailWithMap({
   const resourceImages = (Array.isArray(resource.images) && resource.images.length > 0) ? resource.images : [{ url: defaultImage }];
   const hasImages = (Array.isArray(resourceImages) && resourceImages.length > 0 && resourceImages[0].url !== '') ? '' : 'resource-has-no-images';
 
+  const firstStatus = resource.statuses
+    ? resource.statuses
+    .filter((status: { seqnr: number }) => status.seqnr !== undefined && status.seqnr !== null)
+    .sort((a: { seqnr: number }, b: { seqnr: number }) => a.seqnr - b.seqnr)[0] || resource.statuses[0]
+    : false;
+
+  const colorClass = firstStatus && firstStatus.color ? `color-${firstStatus.color}` : '';
+  const backgroundColorClass = firstStatus && firstStatus.backgroundColor ? `bgColor-${firstStatus.backgroundColor}` : '';
+
+  const statusClasses = `${colorClass} ${backgroundColorClass}`.trim();
+
   return (
     <section className="osc-resource-detail-content osc-resource-detail-grid">
       {resource ? (
@@ -181,7 +192,7 @@ function ResourceDetailWithMap({
                     src={i.url}
                     imageFooter={
                       <div>
-                        <Paragraph className="osc-resource-detail-content-item-status">
+                        <Paragraph className={`osc-resource-detail-content-item-status ${statusClasses}`}>
                           {resource.statuses
                             ?.map((s: { label: string }) => s.label)
                             ?.join(', ')}

diff --git a/packages/stem-begroot/src/step-1/begroot-budget-list/stem-begroot-budget-list.tsx b/packages/stem-begroot/src/step-1/begroot-budget-list/stem-begroot-budget-list.tsx
@@ -111,7 +111,7 @@ export const StemBegrootBudgetList = ({
                         onClick={() => {
                           onSelectedResourceRemove(resource);
                         }}
-                        className="subtle-button"
+                        className="primary-action-button"
                         icon="ri-close-line"
                         iconOnly={true}
                         text='Item verwijderen'