🖌️ style: UI update

[berry-13]

Summary

updated the color scheme to resemble that of ChatGPT and addressed several UI bugs

added new tooltips

Change Type

• [x] Bug fix
• [x] Style update

Checklist

• [x] My code adheres to this project's style guidelines
• [x] I have performed a self-review of my own code
• [x] I have commented in any complex areas of my code
• [x] I have made pertinent documentation changes
• [x] My changes do not introduce new warnings
• [x] I have written tests demonstrating that my changes are effective or that my feature works
• [x] Local unit tests pass with my changes
• [x] Any changes dependent on mine have been merged and published in downstream modules.

[itzraiss]

@Berry-13 So with these corrections, my PR #1751 would no longer be necessary. Do you think it would be interesting to add the event of showing the Rename and Delete icons when hovering the mouse?

[berry-13]

@Berry-13 So with these corrections, my PR #1751 would no longer be necessary. Do you think it would be interesting to add the event of showing the Rename and Delete icons when hovering the mouse?

yeah, it's likely no longer necessary. I also want to add only one button with the three dots, similar to ChatGPT

[danny-avila]

To be honest Idk if I like the new dark theme 🤷‍♂️ it’s too dark

[danny-avila]

Thanks! Btw I might make this part of the next tag/release. What were the bugs fixed?

[berry-13]

Thanks! Btw I might make this part of the next tag/release. What were the bugs fixed?

sorry, they were not bugs, but rather a result of the wrong style. This includes the style of the conversation (such as the right corners) and the style of the buttons in the preset selection

[machinsoft]

We will have a build conflict. Could you please incorporate my settings into your code? I will then delete my branch, as there are minor changes there #1785

[berry-13]

We will have a build conflict. Could you please incorporate my settings into your code? I will then delete my branch, as there are minor changes there #1785

sure

[danny-avila]

I'm thinking of squashing all of your commits to see if it makes the merge simpler. would love to be able to cycle themes from the current (old) with the new since most of is just color palette.

[peterhoang]

To be honest Idk if I like the new dark theme 🤷‍♂️ it’s too dark

Same. Would it be possible to retain the "old" dark theme and not a complete replacement? Perhaps, giving the users the control to choose a "theme"?

[berry-13]

To be honest Idk if I like the new dark theme 🤷‍♂️ it’s too dark

Same. Would it be possible to retain the "old" dark theme and not a complete replacement? Perhaps, giving the users the control to choose a "theme"?

yes, I thought I had already written it, but instead, I was mistaken. Anyway, yes, I will try to add the possibility to change many more themes and maybe even to create them

[danny-avila]

Mind fixing this merge conflicts? Looking to test and merge. Also, was it necessary to change every file's tailwind class? I feel it's a missed opportunity to use tailwind themes and match the classes where applicable.

[danny-avila]

see https://github.com/L-Blondy/tw-colors

[berry-13]

I feel it's a missed opportunity to use tailwind themes and match the classes where applicable.

Sure, I can make a new PR about that. This is just a UI update. Thanks for sharing the "tw-colors". I'll integrate it in a next PR, since it will take a lot more time to merge this then

[danny-avila]

I feel it's a missed opportunity to use tailwind themes and match the classes where applicable.

Sure, I can make a new PR about that. This is just a UI update. Thanks for sharing the "tw-colors". I'll integrate it in a next PR, since it will take a lot more time to merge this then

I may accept this PR first but I believe it will be harder to integrate the old style that is being replaced once it's gone. You can always use this PR for reference at least.

[danny-avila]

@Berry-13 bg-gray-800 was much darker for us (which is what I think ChatGPT had it originally as) so I updated since ChatGPT was noticably lighter which I liked. Also updated styling some other areas.

[berry-13]

@Berry-13 bg-gray-800 was much darker for us (which is what I think ChatGPT had it originally as) so I updated since ChatGPT was noticably lighter which I liked. Also updated styling some other areas.

ok, thanks

[olinorwell]

Feedback from my users (mostly family and inside my office) is that the old style from last year up till a few weeks ago was much loved - the new style is too dark and although it might match OpenAI better - the general consensus is that the old one is significantly better to look at. It would be hugely popular if there was a way to keep the old theme, or at least allow the background colour to be set. I thought about trying to hack a solution but thought I'd mention it as it seems like others agree.

[berry-13]

Feedback from my users (mostly family and inside my office) is that the old style from last year up till a few weeks ago was much loved - the new style is too dark and although it might match OpenAI better - the general consensus is that the old one is significantly better to look at. It would be hugely popular if there was a way to keep the old theme, or at least allow the background colour to be set. I thought about trying to hack a solution but thought I'd mention it as it seems like others agree.

sure, I'm already working on a theme option. Right now, my goal is to add the old style and also give the user the option to customize themes directly from the UI

[machinsoft]

Feedback from my users (mostly family and inside my office) is that the old style from last year up till a few weeks ago was much loved - the new style is too dark and although it might match OpenAI better - the general consensus is that the old one is significantly better to look at. It would be hugely popular if there was a way to keep the old theme, or at least allow the background colour to be set. I thought about trying to hack a solution but thought I'd mention it as it seems like others agree.

You can manually change the style for yourself without relying on others. It's easily done by simply modifying a couple of lines of code in the CSS to match your preferred colors.

You can change the style in these files: client\src\style.css

--gray-500:#686262;
--gray-600:#3d3d3f;
--gray-700:#262626;
--gray-750:#333333;
--gray-800:#171717;
--gray-900:#0d0d0d;

client\tailwind.config.cjs

500: '#686262',
600: '#3d3d3f',
700: '#262626', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
750: '#333333',
800: '#212121', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
900: '#0d0d0d',

For example, I really like the dark style, but it's not dark enough for me, so I made it even darker than the standard dark style. I was thinking of suggesting it as the default, but now I'm not sure if it will be appreciated or not.