From 3f33a99e843c3fe41419aae9c853ca096a5f67f4 Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Thu, 4 May 2023 10:18:52 +0200 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9E=95=20amserdam=20design=20tokens=20ad?= =?UTF-8?q?ded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/package-lock.json | 13 +++++++++++++ pwa/package.json | 1 + 2 files changed, 14 insertions(+) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 5c4b1777b..48e381eff 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -49,6 +49,7 @@ "devDependencies": { "@material-ui/core": "^4.12.4", "@material-ui/lab": "^4.11.3-deprecations.1", + "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.95", "@nl-design-system-unstable/rotterdam-design-tokens": "1.0.0-alpha.88", "@types/dateformat": "^5.0.0", "@types/dedent": "^0.7.0", @@ -3663,6 +3664,12 @@ "eslint-scope": "5.1.1" } }, + "node_modules/@nl-design-system-unstable/amsterdam-design-tokens": { + "version": "1.0.0-alpha.95", + "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/amsterdam-design-tokens/-/amsterdam-design-tokens-1.0.0-alpha.95.tgz", + "integrity": "sha512-KtSTLoa/cG3Mbzli/+RGN/FK6boVBewZoOuedouahcJ6KsyNIizcgZpoAX3+8OjWVerXIrAbiALnm3I99FRwuQ==", + "dev": true + }, "node_modules/@nl-design-system-unstable/rotterdam-design-tokens": { "version": "1.0.0-alpha.88", "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/rotterdam-design-tokens/-/rotterdam-design-tokens-1.0.0-alpha.88.tgz", @@ -21207,6 +21214,12 @@ "eslint-scope": "5.1.1" } }, + "@nl-design-system-unstable/amsterdam-design-tokens": { + "version": "1.0.0-alpha.95", + "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/amsterdam-design-tokens/-/amsterdam-design-tokens-1.0.0-alpha.95.tgz", + "integrity": "sha512-KtSTLoa/cG3Mbzli/+RGN/FK6boVBewZoOuedouahcJ6KsyNIizcgZpoAX3+8OjWVerXIrAbiALnm3I99FRwuQ==", + "dev": true + }, "@nl-design-system-unstable/rotterdam-design-tokens": { "version": "1.0.0-alpha.88", "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/rotterdam-design-tokens/-/rotterdam-design-tokens-1.0.0-alpha.88.tgz", diff --git a/pwa/package.json b/pwa/package.json index 61702cfa9..e391e0811 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -64,6 +64,7 @@ "devDependencies": { "@material-ui/core": "^4.12.4", "@material-ui/lab": "^4.11.3-deprecations.1", + "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.95", "@nl-design-system-unstable/rotterdam-design-tokens": "1.0.0-alpha.88", "@types/dateformat": "^5.0.0", "@types/dedent": "^0.7.0", From 9b61897d57d37ae9e70347862e3277c50b53cd26 Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Thu, 4 May 2023 14:35:52 +0200 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=8E=A8=20rotterdam=20thema=20ge=C3=AF?= =?UTF-8?q?mporteert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/src/data/themes.ts | 1 + pwa/src/styling/index.css | 1 + 2 files changed, 2 insertions(+) diff --git a/pwa/src/data/themes.ts b/pwa/src/data/themes.ts index 4af1e4cdd..597e82105 100644 --- a/pwa/src/data/themes.ts +++ b/pwa/src/data/themes.ts @@ -1,4 +1,5 @@ export const themes = [ { label: "Rotterdam", value: "rotterdam", className: "rotterdam-theme" }, { label: "Utrecht", value: "utrecht", className: "utrecht-theme" }, + { label: "Amsterdam", value: "amsterdam", className: "amsterdam-theme" }, ]; diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css index 207873550..d1fb9253c 100644 --- a/pwa/src/styling/index.css +++ b/pwa/src/styling/index.css @@ -4,6 +4,7 @@ /* TODO: Load themes on-demand */ @import "../../node_modules/@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css"; @import "../../node_modules/@utrecht/design-tokens/dist/theme.css"; +@import "../../node_modules/@nl-design-system-unstable/amsterdam-design-tokens/dist/index.css"; /* Package includes */ @import "react-loading-skeleton/dist/skeleton.css"; From 58ba265db522ad0ab6026d0eabd594a3654b9a1f Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Thu, 4 May 2023 14:37:25 +0200 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=92=84=20amstedam=20logo=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/static/images/LogoAmsterdam.svg | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 pwa/static/images/LogoAmsterdam.svg diff --git a/pwa/static/images/LogoAmsterdam.svg b/pwa/static/images/LogoAmsterdam.svg new file mode 100644 index 000000000..80491f34f --- /dev/null +++ b/pwa/static/images/LogoAmsterdam.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From 2f641ed52135a2bf6d533f4a9e3da962cdce770b Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Thu, 4 May 2023 14:37:42 +0200 Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=92=84=20amsterdam=20thema=20css=20ad?= =?UTF-8?q?ded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/static/themes/amsterdam.css | 194 ++++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 pwa/static/themes/amsterdam.css diff --git a/pwa/static/themes/amsterdam.css b/pwa/static/themes/amsterdam.css new file mode 100644 index 000000000..575c10d93 --- /dev/null +++ b/pwa/static/themes/amsterdam.css @@ -0,0 +1,194 @@ +/* + * Generics global +*/ +:root { + /* Sizes */ + --web-app-size-4xs: var(--skeleton-size-4xs); + --web-app-size-3xs: var(--skeleton-size-3xs); + --web-app-size-2xs: var(--skeleton-size-2xs); + --web-app-size-xs: var(--skeleton-size-xs); + --web-app-size-sm: var(--skeleton-size-sm); + --web-app-size-md: var(--skeleton-size-md); + --web-app-size-lg: var(--skeleton-size-lg); + --web-app-size-xl: var(--skeleton-size-xl); + --web-app-size-2xl: var(--skeleton-size-2xl); + --web-app-size-3xl: var(--skeleton-size-3xl); + --web-app-size-4xl: var(--skeleton-size-4xl); + + /* Font families */ + --web-app-primary-font-family: "Bolder"; + --web-app-content-font-family: var(--skeleton-content-font-family); + + /* Font sizes */ + --web-app-font-size-4xs: var(--skeleton-font-size-4xs); + --web-app-font-size-3xs: var(--skeleton-font-size-3xs); + --web-app-font-size-2xs: var(--skeleton-font-size-2xs); + --web-app-font-size-xs: var(--skeleton-font-size-xs); + --web-app-font-size-sm: var(--skeleton-font-size-sm); + --web-app-font-size-md: var(--skeleton-font-size-md); + --web-app-font-size-lg: var(--skeleton-font-size-lg); + --web-app-font-size-xl: var(--skeleton-font-size-xl); + --web-app-font-size-2xl: var(--skeleton-font-size-2xl); + --web-app-font-size-3xl: var(--skeleton-font-size-3xl); + --web-app-font-size-4xl: var(--skeleton-font-size-4xl); + + /* Line heights */ + --web-app-line-height-xs: var(--skeleton-line-height-xs); + --web-app-line-height-sm: var(--skeleton-line-height-sm); + --web-app-line-height-md: var(--skeleton-line-height-md); + --web-app-line-height-lg: var(--skeleton-line-height-lg); + + /* Font weights */ + --web-app-font-weight-light: var(--skeleton-font-weight-light); + --web-app-font-weight-normal: var(--skeleton-font-weight-normal); + --web-app-font-weight-bold: var(--skeleton-font-weight-bold); + + /* Border radiuses */ + --web-app-border-radius-sm: 0; + --web-app-border-radius-md: 0; + --web-app-border-radius-lg: 0; + + /* Focus border */ + --web-app-focus-border: unset; + + /* Theme colors */ + --web-app-color-white: hsl(0 0% 100%); + --web-app-color-black: hsl(0 0% 0%); + --web-app-color-grey: var(--skeleton-color-grey-1); + --web-app-color-table-grey: #f9f9f9; + --web-app-color-table-hover-grey: #eff4f6; + + --web-app-color-link: var(--web-app-color-black); + --web-app-color-link-active: var(--web-app-color-black); + + --web-app-color-heading: var(--web-app-color-black); + + --web-app-color-primary-text: var(--web-app-color-black); + + --web-app-color-disabled: #eff4f6; + + --web-app-color-primary-action: var(--rotterdam-color-green); + --web-app-color-primary-action-hover: var(--rotterdam-color-green); + + --web-app-color-secondary-action: var(--rotterdam-color-green); + --web-app-color-secondary-action-hover: var(--rotterdam-color-green); + + --web-app-color-table-row-background-hover: #eff4f6; + + --web-app-color-invalid: hsl(6 93% 42%); + + --web-app-color-background-light: #eff4f6; + --web-app-color-body-background: var(--web-app-color-white); + + --web-app-color-background-page-header: var(--rotterdam-color-green); + --web-app-color-page-header: var(--web-app-color-white); + + --web-app-color-background-page-top-bar: var(--web-app-color-white); + + --web-app-color-background-footer: #eff4f6; + --web-app-color-footer-headings: auto; + --web-app-color-footer-links: var(--web-app-color-black); + + --web-app-header-logo-container-background-color: unset; + --web-app-header-logo-container-padding: unset; + --web-app-header-logo-container-border-radius: 0; + --web-app-header-logo-container-height: 25px; + --web-app-header-organization-logo-width: 115px; + --web-app-header-organization-logo-src: url("images/Logoamsterdam.svg"); + + --web-app-footer-logo-container-background-color: unset; + --web-app-footer-logo-container-padding: unset; + --web-app-footer-logo-container-border-radius: 0; + --web-app-footer-logo-container-height: 50px; + --web-app-footer-organization-logo-width: 230px; + --web-app-footer-organization-logo-src: url("images/Logoamsterdam.svg"); + + --web-app-rating-active-color: var(--rotterdam-color-green); + --web-app-rating-disable-color: #bfbfbf; + + --web-app-layer-color-interaction: #1a75ff; + --web-app-layer-color-process: #dd3c49; + --web-app-layer-color-integration: #efc025; + --web-app-layer-color-services: #69b090; + --web-app-layer-color-data: #7a51c8; + --web-app-layer-color-unknown: #586265; + + --web-app-layer-category-color-interaction: #cfe2ff; + --web-app-layer-category-color-process: #f8d7da; + --web-app-layer-category-color-integration: #fff3cd; + --web-app-layer-category-color-services: #d1e7dd; + --web-app-layer-category-color-data: #e2d9f3; + + --web-app-breadcrumb-color: var(--rotterdam-color-green); + + --web-app-submit-component-background-color: var(--skeleton-color-grey-1); + + /* Components */ + --web-app-tag-color: var(--web-app-color-black); + --web-app-tag-background-color: var(--skeleton-color-grey-1); + + --web-app-card-border-color: 1px solid var(--skeleton-color-grey-2); + + --web-app-organization-card-logo-height: 100px; + --web-app-organization-card-logo-width: 100px; + + --web-app-code-block-background-color: var(--skeleton-color-grey-1); + + --web-app-badge-counter-color: var(--web-app-color-black); + --web-app-badge-counter-background-color: var(--skeleton-color-grey-1); + --web-app-badge-counter-height: 18px; + --web-app-badge-counter-width: 18px; + --web-app-badge-counter-font-size: 12px; + --web-app-badge-counter-max-number-font-size: 10px; + + --web-app-layer-accordion-inactive-opacity: 0.65; + --web-app-layer-accordion-disabled-opacity: 0.15; + + --web-app-component-image-max-width: 300px; + --web-app-component-rating-indicator-height: 160px; + + --web-app-organization-detail-logo-height: 300px; + --web-app-organization-detail-logo-width: 350px; + + --web-app-component-detail-logo-height: 225px; + --web-app-component-detail-logo-width: 300px; + + --web-app-relations-frame-width: 1024px; + --web-app-relations-frame-height: 500px; + --web-app-relations-border: 1px solid #dddddd; + --web-app-relations-background-color: rgb(251, 251, 251); + + --web-app-download-popup-width: 500px; + --web-app-overlay-background: rgba(0, 0, 0, 0.3); + + --web-app-container-width-lg: 1440px; + + /* @conduction: Secondary Top Navigation */ + --web-app-secondary-top-nav-item-padding: var(--web-app-size-md); + --web-app-secondary-top-nav-font-size: var(--web-app-font-size-md); + --web-app-secondary-top-nav-color: var(--rotterdam-color-green); + --web-app-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1); + --web-app-secondary-top-nav-font-weight: var(--web-app-font-weight-light); + + /* @condcution: Primary Top Navigation */ + --web-app-primary-top-nav-item-padding: var(--web-app-size-md); + --web-app-primary-top-nav-color: var(--rotterdam-color-green); + --web-app-primary-top-nav-background-color: var(--rotterdam-color-green); + --web-app-primary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1); + --web-app-primary-top-nav-dropdown-border-radius: var(--web-app-border-radius-md); + + /* @gemeent-denhaag: SideNav */ + --web-app-sidenav-link-active-color: var(--rotterdam-color-green); + --web-app-sidenav-link-hover-color: var(--rotterdam-color-green); + --web-app-sidenav-link-padding-block-end: var(--web-app-size-xs); + --web-app-sidenav-link-padding-block-start: var(--web-app-size-xs); + --web-app-sidenav-item-font-family: var(--web-app-primary-font-family); + --web-app-sidenav-item-font-weight: var(--web-app-font-weight-normal); + --web-app-sidenav-item-font-size: var(--web-app-size-md); + + /* @gemeent-denhaag: Alert */ + --web-app-alert-info-background-color: #dbecfa; + --web-app-alert-info-action-button-background-color: hsl(207 80% 35%); + --web-app-alert-info-action-button-background-color-hover: hsl(207 80% 30%); + --web-app-alert-info-icon-color: hsl(207 80% 35%); +} From 2ca1e5a87f35bd892ccfca45e11090b1bb1a2e57 Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Thu, 11 May 2023 16:30:15 +0200 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=8E=A8=20added=20amsterdam=20reponsiv?= =?UTF-8?q?e=20classname=20toe=20voor=20responsive=20text?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/src/data/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pwa/src/data/themes.ts b/pwa/src/data/themes.ts index 597e82105..d8ff0fc55 100644 --- a/pwa/src/data/themes.ts +++ b/pwa/src/data/themes.ts @@ -1,5 +1,5 @@ export const themes = [ { label: "Rotterdam", value: "rotterdam", className: "rotterdam-theme" }, { label: "Utrecht", value: "utrecht", className: "utrecht-theme" }, - { label: "Amsterdam", value: "amsterdam", className: "amsterdam-theme" }, + { label: "Amsterdam", value: "amsterdam", className: "amsterdam-theme amsterdam-theme--responsive" }, ]; From 0864bb73292d3e5acc5b7cf7d43e71da04f12215 Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Fri, 12 May 2023 14:37:01 +0200 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9E=95=20font=20van=20amsterdam=20toegev?= =?UTF-8?q?oegd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/package-lock.json | 32 +++++++++++++++++++++++++------- pwa/package.json | 3 ++- pwa/src/styling/index.css | 1 + 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 48e381eff..fceffa18c 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -47,9 +47,10 @@ "vis-network": "^9.1.2" }, "devDependencies": { + "@amsterdam/asc-assets": "0.38.0", "@material-ui/core": "^4.12.4", "@material-ui/lab": "^4.11.3-deprecations.1", - "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.95", + "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.100", "@nl-design-system-unstable/rotterdam-design-tokens": "1.0.0-alpha.88", "@types/dateformat": "^5.0.0", "@types/dedent": "^0.7.0", @@ -81,6 +82,16 @@ "node": ">=6.0.0" } }, + "node_modules/@amsterdam/asc-assets": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/@amsterdam/asc-assets/-/asc-assets-0.38.0.tgz", + "integrity": "sha512-uyeS7ufNndOCGFCQ9CkrzWAGCq221euw8u/g1NARxZXQ1cut7h2qR+kurO466mb7Hvgww9SNQ4X/FOaNZU2UAg==", + "dev": true, + "peerDependencies": { + "react": "^17.0.2 || ^18.1.0", + "react-dom": "^17.0.2 || ^18.1.0" + } + }, "node_modules/@ardatan/relay-compiler": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.0.tgz", @@ -3665,9 +3676,9 @@ } }, "node_modules/@nl-design-system-unstable/amsterdam-design-tokens": { - "version": "1.0.0-alpha.95", - "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/amsterdam-design-tokens/-/amsterdam-design-tokens-1.0.0-alpha.95.tgz", - "integrity": "sha512-KtSTLoa/cG3Mbzli/+RGN/FK6boVBewZoOuedouahcJ6KsyNIizcgZpoAX3+8OjWVerXIrAbiALnm3I99FRwuQ==", + "version": "1.0.0-alpha.100", + "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/amsterdam-design-tokens/-/amsterdam-design-tokens-1.0.0-alpha.100.tgz", + "integrity": "sha512-aZ9vcNbH4Nmm5BVCcRSi/S7/hW+g75MnMVr5Ttm1A3cmqZXinXEF7VIc2ltxNXcjLj+F34CFeQdAOVapUgezLg==", "dev": true }, "node_modules/@nl-design-system-unstable/rotterdam-design-tokens": { @@ -18627,6 +18638,13 @@ "@jridgewell/trace-mapping": "^0.3.9" } }, + "@amsterdam/asc-assets": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/@amsterdam/asc-assets/-/asc-assets-0.38.0.tgz", + "integrity": "sha512-uyeS7ufNndOCGFCQ9CkrzWAGCq221euw8u/g1NARxZXQ1cut7h2qR+kurO466mb7Hvgww9SNQ4X/FOaNZU2UAg==", + "dev": true, + "requires": {} + }, "@ardatan/relay-compiler": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.0.tgz", @@ -21215,9 +21233,9 @@ } }, "@nl-design-system-unstable/amsterdam-design-tokens": { - "version": "1.0.0-alpha.95", - "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/amsterdam-design-tokens/-/amsterdam-design-tokens-1.0.0-alpha.95.tgz", - "integrity": "sha512-KtSTLoa/cG3Mbzli/+RGN/FK6boVBewZoOuedouahcJ6KsyNIizcgZpoAX3+8OjWVerXIrAbiALnm3I99FRwuQ==", + "version": "1.0.0-alpha.100", + "resolved": "https://registry.npmjs.org/@nl-design-system-unstable/amsterdam-design-tokens/-/amsterdam-design-tokens-1.0.0-alpha.100.tgz", + "integrity": "sha512-aZ9vcNbH4Nmm5BVCcRSi/S7/hW+g75MnMVr5Ttm1A3cmqZXinXEF7VIc2ltxNXcjLj+F34CFeQdAOVapUgezLg==", "dev": true }, "@nl-design-system-unstable/rotterdam-design-tokens": { diff --git a/pwa/package.json b/pwa/package.json index e391e0811..52064d3d3 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -62,9 +62,10 @@ "vis-network": "^9.1.2" }, "devDependencies": { + "@amsterdam/asc-assets": "0.38.0", "@material-ui/core": "^4.12.4", "@material-ui/lab": "^4.11.3-deprecations.1", - "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.95", + "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.100", "@nl-design-system-unstable/rotterdam-design-tokens": "1.0.0-alpha.88", "@types/dateformat": "^5.0.0", "@types/dedent": "^0.7.0", diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css index d1fb9253c..2f6f91d41 100644 --- a/pwa/src/styling/index.css +++ b/pwa/src/styling/index.css @@ -5,6 +5,7 @@ @import "../../node_modules/@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css"; @import "../../node_modules/@utrecht/design-tokens/dist/theme.css"; @import "../../node_modules/@nl-design-system-unstable/amsterdam-design-tokens/dist/index.css"; +@import "../../node_modules/@nl-design-system-unstable/amsterdam-design-tokens/dist/font.css"; /* Package includes */ @import "react-loading-skeleton/dist/skeleton.css"; From 57225f078ca8a41a1a8acc66f859751401ddadbd Mon Sep 17 00:00:00 2001 From: scar055 <48519289+scar055@users.noreply.github.com> Date: Fri, 12 May 2023 15:36:25 +0200 Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=8E=A8=20theme=20switcher=20select=20?= =?UTF-8?q?naar=20utrecht=20veranderd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styling/themeProvider/ThemeProvider.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/pwa/src/styling/themeProvider/ThemeProvider.tsx b/pwa/src/styling/themeProvider/ThemeProvider.tsx index 8c6b605d9..911286e47 100644 --- a/pwa/src/styling/themeProvider/ThemeProvider.tsx +++ b/pwa/src/styling/themeProvider/ThemeProvider.tsx @@ -4,9 +4,9 @@ import "./../../styling/design-tokens/component-overrides.css"; import { useForm } from "react-hook-form"; import { themes } from "../../data/themes"; import { FormFieldInput } from "@gemeente-denhaag/form-field"; -import { SelectSingle } from "@conduction/components"; import { Document } from "@utrecht/component-library-react/dist/css-module"; import { FormField, FormLabel } from "@utrecht/component-library-react/dist/css-module"; +import { Select, SelectOption } from "@utrecht/component-library-react"; export const ThemeProvider = ({ children }: React.PropsWithChildren): JSX.Element => { const [theme, setTheme] = React.useState("rotterdam"); @@ -48,17 +48,16 @@ const ThemeSwitcher: React.FC = ({ setTheme }) => { const { register, watch, - control, formState: { errors }, } = useForm(); React.useEffect(() => { const subscription = watch(({ themeSwitcher }) => { - setTheme(themeSwitcher?.value); + setTheme(themeSwitcher); }); return () => subscription.unsubscribe(); - }); + }, [watch]); return (
@@ -68,13 +67,18 @@ const ThemeSwitcher: React.FC = ({ setTheme }) => { Thema aanpasssen:
- + defaultValue={themes[0].value} + invalid={errors["themeSwitcher"]} + {...register("themeSwitcher")} + > + {themes.map(({ label, value }) => ( + + {label} + + ))} +