feature/OC-813/themes

README.md

@@ -16,7 +16,7 @@ To set up your own project, you will need a GitHub account and be logged in. Sim
 To develop locally, clone your new repository to your local machine. Open the terminal, navigate to the folder containing your repository, and make a choice to run the app in Node.js/npm or docker.
 
 ### Node.js / NPM
-You will need a Git client(optional), and have Node.js and NPM installed. This will run the front-end on port :9000 so make sure nothing runs on that.
+You will need a Git client(optional), and have Node.js and NPM installed. This will run the frontend on port :9000 so make sure nothing runs on that.
 
 ```cli
 $ cd /pwa
@@ -27,7 +27,7 @@ $ npm run serve
 
 ### Docker
 
-You will need to have docker installed. This will run the front-end on port :81 so make sure nothing runs on that.
+You will need to have docker installed. This will run the frontend on port :81 so make sure nothing runs on that.
 
 ```cli
 $ docker-compose pull
@@ -46,32 +46,32 @@ $ docker-compose up
 After succesfully setting up your dev environment, navigate to [http://localhost:81/](http://localhost:81/) to view the app in your browser.
 
 ### Configure back-end connection
-To connect to front-end to your local back-end you will first need to set up your back-end, you can follow the installation guide provided [here](https://github.com/OpenCatalogi/OpenCatalogiBundle#opencatalogibundle-).
+To connect to frontend to your local back-end you will first need to set up your back-end, you can follow the installation guide provided [here](https://github.com/OpenCatalogi/OpenCatalogiBundle#opencatalogibundle-).
 
-To connect the app to your local gateway, you will need to change the environment variables in the `env.js` file. Replace the content of the file with the following:
+To connect the app to your local gateway, you will need to change the environment variables in the `.env.development` file. Replace the content below Backend-config with the following:
 ```
-window.sessionStorage.setItem("GATSBY_ME_URL", "http://localhost/api/users/me");
-window.sessionStorage.setItem("GATSBY_API_URL", "http://localhost/api");
-window.sessionStorage.setItem("GATSBY_ADMIN_URL", "http://localhost/admin");
-window.sessionStorage.setItem("GATSBY_BASE_URL", "http://localhost");
-window.sessionStorage.setItem("GATSBY_FRONTEND_URL", "http://localhost");
-window.sessionStorage.setItem("GATSBY_ORGANIZATION", "");
-window.sessionStorage.setItem("GATSBY_LOGIN_REDIRECT", "vault");
-window.sessionStorage.setItem("ADMIN_DASHBOARD_URL", "http://localhost:8000");
+GATSBY_ME_URL=http://localhost/me
+GATSBY_API_URL=http://localhost/api
+GATSBY_ADMIN_URL=http://localhost/admin
+GATSBY_BASE_URL=http://localhost
+GATSBY_FRONTEND_URL=http://localhost:8000
+GATSBY_ORGANIZATION=http://webresourcecatalogus.conduction.svc.cluster.local/organizations/b2d3176e-f1c6-4365-ab86-dd253c65fc43
+GATSBY_LOGIN_REDIRECT=vault
+GATSBY_ADMIN_DASHBOARD_URL=https://admin.opencatalogi.nl
 ```
 
-After editing this file restart the front-end
+After editing this file restart the frontend
 
 #### Node.js / NPM
-Stop the server by pressing `CTRL + C` and rebuild the front-end:
+Stop the server by pressing `CTRL + C` and rebuild the frontend:
 
 ```cli
 $ npm run build
 $ npm run serve
 ```
 
 #### Docker
-Stop the server by pressing `CTRL + C` and restart the front-end:
+Stop the server by pressing `CTRL + C` and restart the frontend:
 ```cli
 $ docker-compose down
 $ docker-compose up

pwa/gatsby-config.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 require("dotenv").config({
-  path: `.env.${process.env.NODE_ENV}`,
+  path: `static/.env.${process.env.NODE_ENV}`,
 });
 
 module.exports = {

pwa/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.9",
+    "@conduction/theme": "1.0.38",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",

pwa/src/apiService/apiService.ts

@@ -32,7 +32,7 @@ export default class APIService {
     const authorization = this.JWT ? { Authorization: "Bearer " + this.JWT } : {};
 
     return axios.create({
-      baseURL: window.sessionStorage.getItem("GATSBY_API_URL") ?? undefined,
+      baseURL: process.env.GATSBY_API_URL ?? undefined,
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -43,7 +43,7 @@ export default class APIService {
 
   public get LoginClient(): AxiosInstance {
     return axios.create({
-      baseURL: window.sessionStorage.getItem("GATSBY_API_URL") ?? undefined,
+      baseURL: process.env.GATSBY_API_URL ?? undefined,
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -53,7 +53,7 @@ export default class APIService {
 
   public get BaseClient(): AxiosInstance {
     return axios.create({
-      baseURL: window.sessionStorage.getItem("GATSBY_BASE_URL") ?? undefined,
+      baseURL: process.env.GATSBY_BASE_URL ?? undefined,
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",

pwa/src/components/categoryCard/CategoryCard.module.css

@@ -9,15 +9,18 @@
 
 .titleLink {
   font-size: var(--web-app-font-size-lg);
-  --denhaag-link-icon-gap: var(--web-app-size-xs);
 }
 
-.titleLink > :first-child > span > svg {
+.titleLink > span > svg {
   width: var(--web-app-font-size-lg);
   height: var(--web-app-font-size-lg);
 }
 
-.titleLink > :first-child {
+.icon {
+  margin-inline-end: var(--web-app-size-xs);
+}
+
+.titleLink > span {
   display: flex;
 }
 

pwa/src/components/categoryCard/CategoryCard.tsx

@@ -19,12 +19,10 @@ export const CategoryCard: React.FC<CategoryCardProps> = ({ title, description,
     <CardWrapper className={styles.container}>
       <CardHeader>
         <CardHeaderTitle>
-          <div className={styles.titleLink}>
-            <Link to={title.href}>
-              <Icon className="utrecht-icon--conduction-start">{icon}</Icon>
-              {title.label}
-            </Link>
-          </div>
+          <Link className={styles.titleLink} to={title.href}>
+            <Icon className={styles.icon}>{icon}</Icon>
+            {title.label}
+          </Link>
         </CardHeaderTitle>
       </CardHeader>
       <Paragraph className={domain ?? styles.description}>{description}</Paragraph>