feat: revamp home ui

[julia-eileen]

Acceptance Criteria

• Configure the project to allow the old UI codebase to coexist with the new one until the revamp is completed.
• Implement a feature flag system using the useNewUiEnabled hook.
• Modify the Sass build script to generate output for both the old and new UI.
• Set up the project to allow a theming system (dark and light mode).
• Update navigation, status components, and the homepage according to the new UI.

Security Checklist

• Make sure you do not include new dependencies in the project unless strictly necessary and do not include dev-dependencies as production ones. More dependencies increase the possibility of one of them being hijacked and affecting us.

2024-10-16.12-30-01.mp4

2024-10-16.13-39-59.mp4

[julia-eileen]

To quickly test the new UI without modifying the feature flag response, simply update the hooks/useNewUiEnabled.js file with the following content:

/**
 * Copyright (c) Hathor Labs and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { useFlag } from '@unleash/proxy-client-react';
import { UNLEASH_NEW_UI_FEATURE_FLAG } from '../constants';

export const useNewUiEnabled = () => {
  const newUiEnabled = useFlag(UNLEASH_NEW_UI_FEATURE_FLAG) || true;

  return newUiEnabled;
};

[tuliomir]

Thanks for contributing to our project! Here are some questions and suggestions on an initial partial review.

[tuliomir]

Not related to any file in specific: When running the application in localhost using the new UI, I'm receiving the following warning on browser console:

index.js:26 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    at li
    at ConditionalNavigation (http://localhost:3000/static/js/main.chunk.js:4765:5)

This may be related to some specific usage on the Navigation.js file, but I'm unsure of its source as of now.

[julia-eileen]

Not related to any file in specific: When running the application in localhost using the new UI, I'm receiving the following warning on browser console:

index.js:26 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    at li
    at ConditionalNavigation (http://localhost:3000/static/js/main.chunk.js:4765:5)

This may be related to some specific usage on the Navigation.js file, but I'm unsure of its source as of now.

It's because of the dropdown, can we fix it in the next PR? it would take some time to refactor this.

[tuliomir]

Hello @julia-eileen ,
We have a rule in this repository that requires commits made to it to be signed before merging a PR. Could you please sign your commits so that this branch complies with the rule?
Here are some resources to help with that:

• GitHub on signing commits
• A single command for signing multiple commits, via SO

If you want, you can also squash all commits into one, so that the signing is made easier.

[julia-eileen]

Hello @julia-eileen , We have a rule in this repository that requires commits made to it to be signed before merging a PR. Could you please sign your commits so that this branch complies with the rule? Here are some resources to help with that:

* GitHub on [signing commits](https://docs.github.com/authentication/managing-commit-signature-verification/about-commit-signature-verification)

* A single command for [signing multiple commits](https://superuser.com/a/1123928), via SO

If you want, you can also squash all commits into one, so that the signing is made easier.

Hi @tuliomir ,

Thank you for pointing that out and for providing the helpful guide! I’ve followed the instructions and signed all of my commits. Please let me know if everything looks good now or if there’s anything else I need to adjust. Thanks again for your support and patience! 🦊