UI Bug Fixes & Theming consistency reconciliation to PR #55

[KingXP-Pythoner]

Main Changes

• In PR #55, the notifications panel content is pushed to the bottom, this has been fixed. Some UI changes were also made to bring theming consistency and some subtlety to the colors on interaction e.g. hover state opacity color is lowered a bit more. The Join button was restyled to be a bit more subtle and flush with the rest of the design. The borders after each single notification was removed and a margin was introduced instead.
• The emoji-mart emoji picker's theme switching prop theme was added and used the editor theme to toggle. I was unable to change the background color to match the consistent theming for our dark mode because it seems they are using a shadow dom and I've got no clue how to manipulate the css yet as they dont have a prop to change the default. I've also cleaned up the logic with the useState showPicker and used the shadcn Popover component instead. This is to ensure consistency in the way we apply coding logic and reusing components.
• The textarea in chatBox was replaced with shadcn Textarea component and the existing styling to allow the emoji and send button was restyled as there was an easier way to do it with tailwind.
• I've replaced most (i think) of the usage of the native button html element with the shadcn Button component. (To ensure consistent theming).
• I've moved the right sidebar toggle to the TabTray component instead as I think this is more appropriate for UI/UX.
• Added ScrollAreaWithMask component which is just the ScrollArea component of shadcn but with a bottom mask effect that gives a flush transition.

Minor changes

• Reduced the sizes of some of the icons and also placed some in Tooltips for accessibility.
• I set the side props of the Popovers in the ActivityBar component to right which is similar to what vscode has and is useful for UX reasons.
• Removed the ^ in package.json file.
• Changes to the defaultSplitterConfig for the splitter and some css styling in index.css for a cleaner separator

[KingXP-Pythoner]

These changes seem to improve the general code quality and styling consistency. Some of the changes, like switching from single quotes to double quotes, adding missing semicolons and brackets, seem a bit unnecessary, but it's fine by me. However, I encountered an issue when running the PR code locally: it appears that accessing the editor page now redirects to the sign-in page, which results in an ERR_BAD_REQUEST error when trying to sign in (I used test values from backend/tests/test_auth.py).

I didn't add the .prettierrc.json configurations though so that's not the fault of my PR as I simply worked on the updated fork. For running the sign-in page I didn't work on that either but make sure you have in the root frontend folder the .env file with the correct base url

[savvy-itch]

I didn't add the .prettierrc.json configurations though so that's not the fault of my PR as I simply worked on the updated fork.

Oh, Prettier did automatically, I see. I wonder why it didn't do the same with my code, but whatever.

For running the sign-in page I didn't work on that either but make sure you have in the root frontend folder the .env file with the correct base url

I have .env file with VITE_BASE_URL="http://localhost:3000" in the root frontend folder and it still doesn't work.

[KingXP-Pythoner]

I didn't add the .prettierrc.json configurations though so that's not the fault of my PR as I simply worked on the updated fork.

Oh, Prettier did automatically, I see. I wonder why it didn't do the same with my code, but whatever.

For running the sign-in page I didn't work on that either but make sure you have in the root frontend folder the .env file with the correct base url

I have .env file with VITE_BASE_URL="http://localhost:3000" in the root frontend folder and it still doesn't work.

This is something that might have to be investigated in another PR. I've only worked on fixing UI stuff mainly in this PR. I believe @SHIV5T3R is also running into issues with signing in😪

[savvy-itch]

This is something that might have to be investigated in another PR. I've only worked on fixing UI stuff mainly in this PR. I believe @SHIV5T3R is also running into issues with signing in😪

But how did you access the editor when working on this PR? Did you not have to sign in?

[KingXP-Pythoner]

This is something that might have to be investigated in another PR. I've only worked on fixing UI stuff mainly in this PR. I believe @SHIV5T3R is also running into issues with signing in😪

But how did you access the editor when working on this PR? Did you not have to sign in?

I didn't sign in, I simply commented out AuthGate in the router lol.