Oh ok, the backend of the app is made so that it returns the English value if the French is not defined and vice-versa. I guess that is something that can be added as a notice on the admin dashboard for when people modify/add schools

Yes, just so we don't have duplicate information in the database, in case they would like to update one name, they would only need to update the english one and not both

I would accept it, but should the translations only be in the specified language? (I feel like it does, but if you think otherwise, I'll accept the PR)

Describe the bug Since the introduction of Razzle.js, we are now using the <BrowserRouter /> instead of <Router /> because the server side rendering (SSR) from Razzle.js. The history instance cannot be passed to the <BrowserRouter />, that component creates the history instance inside of it. We need to somehow figure out how to navigate the user to the error page from that handleError() function.

I see two possible solution to this problem:

1. Pass the history instance to the handleError() function everywhere that we call it
2. Somehow figure out a way get an instance of history with <BrowserRouter /> (using the barebones <Router /> will cause the page to not render because of SSR)
3. Just add a page reload after adding the /error path - the easiest solution

To Reproduce Steps to reproduce the behavior:

1. Trigger an error
2. See that the url has changed to /error but the content has not been refreshed

Expected behavior For the page to show the content of the /error page

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application --> Brings back what we used to have

• Pass history object to the handleError function
• Made the UnexpectedError page component use the same errorResult component as the other error components

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> I think this is good enough to close #800. Its not doing error boundaries, but I will open a new issue

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Describe the bug The title says it

To Reproduce Steps to reproduce the behavior:

1. Go to the landing page (logout)
2. See the change language button not centered in the navbar

Expected behavior Fort the button to be centered vertically

Screenshots

Additional context Potentially related to #1009

Not happening anymore since the PR of the landing page

We should also take into consideration the benefits of yarn (parallel installation, caching of packages locally, and generation of license, if we care about that, with yarn licenses generate-disclaimer)

And from Jenkins logs, it seems to only take 2 seconds to install yarn

Removing yarn from the docker image would mean using a custom docker image and not the official one from node.js, which is something I'm not sure we should do. Just saw the lts of node.js is v14.15, we should prob update them, if they don't introduce any bugs

Not saying that we shouldn't switch if its better, but we should look at both sides before switching

not sure if I'll be able to touch this, this week @dynamic11 feel free to takeover - I know think its somehow related to neutrino, https://neutrinojs.org/packages/react/#polyfills, or maybe this https://neutrinojs.org/packages/web/#targets

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

• Pass history object to the handleError function

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> I think this is good enough to close #800. Its not doing error boundaries, but I will open a new issue

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Is your feature request related to a problem? Please describe. UAT is a month old and we should probably update it soon

Describe the solution you'd like Update UAT

Describe alternatives you've considered

Additional context

To Reproduce Steps to reproduce the behavior:

1. Go to a profile
2. Make sure the app is in French
3. See the capitalization error in the card

Expected behavior For it to be properly capitalized

Screenshots

Describe the bug The title says it

To Reproduce Steps to reproduce the behavior:

1. Go to the landing page (logout)
2. See the change language button not centered in the navbar

Expected behavior Fort the button to be centered vertically

Screenshots

Additional context Potentially related to #1009

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

• Made page more responsive/centered
• Changed images to ones from https://www.manypixels.co/gallery/

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> NA

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Looks good, I would remove this comment and design wise for the charts, we can work on it after this is merged, unless you want to do it now

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

• Remove ant design dayjs webpack plugin

@dynamic11 can you please test it locally to see if the date pickers works for you now?

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> fixes #1010

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. --> NA

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

and to make the seeding automatic, feel free to add it to the package.json

Oh, I don't think we're talking about the same thing. I mean you are specifying the same thing for the French and English translations, in the init seed, it was only specified in the specific language, and was specified in the other if there would be a difference in the writing between language

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

• Made page properly responsive
• Changed images to ones from https://www.manypixels.co/gallery/

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> NA

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

A small note here, we'll need to do the seeding in the our instances - @MohamedRadwan and @dynamic11 do we want the seeding to happen automatic? (so we don't forget in the future) If so, we just need to add yarn -s seed after the migration to this package.json script

https://github.com/CDH-Studio/I-Talent/blob/69f274429f5f69b1f3db78715c74117d3d3b1ebd/services/backend/package.json#L13

@SukhsimranpreetSekhon feel free to merge it

Unsurprisingly keycloak is the request that takes the longest haha

@MohamedRadwan maybe, we could use the babel plugin thing, but its not working with more than just one lib right now, I tried it and don't remember if it went down that much. I think if we see es in the analyze means that we are using the es?

Describe the bug The application is not working on IE

To Reproduce Steps to reproduce the behavior:

1. Go on IE and see the application favicon forever

Expected behavior The application to work on IE

Screenshots

Additional context I think this is related to the terser uglifier (just need to modify the arrow config https://github.com/terser/terser#compress-options)

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application --> When loading the website not at root (landing or home screen), the loading favicon would not display. This is more visible in IE

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> fixes #1016

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. --> NA

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Describe the bug When loading the application not at the root path / (aka home or landing screen) and the loading icon is supposed to show, it would not.

To Reproduce Steps to reproduce the behavior:

1. Go a path that is not root /
2. Refresh the page (more visible in IE)
3. See the logo not loading

Expected behavior To show the logo

Describe the bug When loading the application not at the root path / (aka home or landing screen) and the loading icon is supposed to show, it would not.

To Reproduce Steps to reproduce the behavior:

1. Go a path that is not root /
2. Refresh the page (more visible in IE)
3. See the logo not loading

Expected behavior To show the logo

Kind of a regression here #1015, since I removed the ant design day.js webpack plugin (it was crashing the application, I would rather the app to be big than to crash right now)...

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

• Remove ant design dayjs webpack plugin

@dynamic11 can you please test it locally to see if the date pickers works for you now?

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> #1010

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. --> NA

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application --> When loading the website not at root (landing or home screen), the loading favicon would not display. This is more visible in IE

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> NA

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. --> NA

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

• Removed everything related to craco
• More deps (but smaller node_modules) - more control over the versions of our deps
• Reduces the size of the build by a little
• Added css minimizer and js uglifier

Note: wasn't able to apply the babel-plugin-import multiple times, https://github.com/neutrinojs/neutrino/issues/1646, hope to fix the related bug so we can have multiple instances of that plugin

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> closes #991

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Is your feature request related to a problem? Please describe. I'm not sure how I didn't see this before, but react themselves recommend neutrino.js in their README. We should switch to it, since it does not rely on react-scripts and it will be less finicky updating our frontend packages. In addition, I'm not even sure if craco will support the latest version of react-scripts

Describe the solution you'd like Switch to neutrino.js

Describe alternatives you've considered We've tried react-app-rewired with customized-cra in the past, then switched to razzle.js, and now we are using craco.

Additional context https://github.com/gsoft-inc/craco/issues/205

I would maybe put a small comment here explaining why this is done, and you'll need to fix the linting errors (https://cicd.ised-isde.canada.ca/blue/organizations/jenkins/DSD%2FI-Talent%2FI-Talent/detail/user-dropdown-accessibility/9/pipeline), for this one here, you'll just need to disable eslint for these two lines for the react/jsx-no-duplicate-props rule. Maybe something like /* eslint-disable react/jsx-no-duplicate-props */ then this afterwards /* eslint-enable react/jsx-no-duplicate-props */

I fixed the local dev env issue, and not getting that keycloak error. Still looking into the react hot loader warning, but it should still work fine...

Really unsure why its not working... Reverting the day.js for ant design fixes it @dynamic11 you think this is fine for now? just removing the antd-dayjs-webpack-plugin for now?

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Just tried this on your branch, and it goes directly to the menu (but there still that tab twice bug, but I think its fine)

Current situation

Right now the components are making their own API calls to get data, and it may get messy passing the data to children components and making sure that the component hierarchy is structured well for passing the data down to the children. Also, we wouldn't want every child to make separate API calls, which would tax the server. In addition, this is also bloating our components with axios and the backend address import and taking into account the errors that the API may return scattered across the app/components.

Admin implementation

In the new backend change, while I was adapting the admin side of the application, I was making the API calls in the controller component and saving it to redux. Children components would subscribe to redux and get the information. But to get a good flow, I was also saving in redux if the data was loading and wasn't even saving in redux if there was an error, so the children component was not aware of an error (if one would arise).

Redux-thunk (the ultimate solution, in my opinion)

We can make asynchronous calls in redux with redux-thunk and since we are using redux-toolkit it is already built-in and way easier than using redux-thunk barebones. With redux-thunk the API calls would be made in redux, making the API calls central. It also automatically creates three action types/things the components can subscribe to, either pending, fulfilled, and rejected. To make the call, it would be similar to the custom admin implementation, where one component calls the API, but would instead dispatch an action to redux, which would in return call the API and the components wanting that information would subscribe to the action types created by redux-thunk.

I wanted to create this issue since it seems like it would clean a bit more the frontend code and remove duplication but is not super urgent to implement since our API calls are working. @dynamic11 what do you think about this?

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application --> Just figured out that there's theming variables that can be overridden.... (which are these ones https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)

• Modify the ant-design theme variables instead of creating a big scss override file specifying the ant design css class names

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> NA

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. --> NA

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Not sure why there's a warning about the hot reload, I can look into it, but I don't think it should cause any bug. For keycloack, I think thats related to an update, not 100% sure. But in your second image, it seems like the env.js file isn't getting created, but it worked for me yesterday.

I'll look into it

Oh sorry, wasn't sure where this originated from. Thanks for the info and quick code explanation! I'll look at potentially making a fix/PR for @neutrinojs/babel-merge if I have time and it's only related to this section

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application -->

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) -->

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

What lol, that weird... I'll pull your branch and play with it a bit. But yeah, it does seem really big

For the analyze, you need to attach your shell to the frontend contianert

We should just utilize the nested scss/less feature maybe instead.

Ex:

.lang-header {}
.lang-title {}
.lang-buttonContainer {}

to

.lang {
  &-header {}
  &-title {}
  &-buttonContainer {}
}

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application --> The navbar was too high and was rendering over the modals/dropdown (I think this error slipped when I was making the hamburger menu work)

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> NA

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

This PR:

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

Changes introduced

<!-- Explain briefly in a small paragraph or in bullet form the changes this PR brings to the application --> The navbar was too high and was rendering over the modals/dropdown

Related issue(s)

<!-- If this PR fixes/closes an issue, please prepend that issue number with one of the github closing keywords (ex: fixes, closes, ...) --> NA

Screenshots (if applicable)

<!-- If you have made UI changes to the application, include a screenshot and if the change involves movement, include a GIF. If the UI changes when the application is in mobile view, show a mobile screenshot too. -->

This PR:

Checklist

If the database has been modified:

• [ ] Update database diagram <!-- Updated diagram located in the backend, at ./src/docs/I-Talent database.xml, with draw.io and updated the png image at ./src/docs/I-Talent database.png -->
• [ ] Create new migration <!-- Ran yarn migrate:create in backend docker container -->

If API endpoints has been modified:

• [ ] Update backend documentation <!-- Updated corresponding swagger documentation in the routers -->
• [ ] Create/Update validators for the API endpoints <!-- Restrict and sanitize user input in the routers with express-validator.github.io -->
• [ ] The API endpoints are properly secured with keycloak <!-- Use the keycloak.protect(roleName) express middleware in the routes -->

<!-- Optional for now, since tests are not working correctly

• [ ] Create tests for your changes
• [ ] Make sure the tests are passing -->

If the UI has been modified:

• [ ] It is translated in both language (with no hard coded text) <!-- To sort the keys and remove unused keys in the translation files, run yarn i18n:cleanup -->
• [ ] Has been tested on IE
• [ ] The modifications are tab friendly
• [ ] It is accessible

I think you could add lodash to the package.json and it would work? I don't it would add it to the react-bundle, as weird as it sounds - but you can for sure just add another package.json (maybe one at the root of the repo?)