Refactor UI Design with DaisyUI

[ecwu]

• MAIN CHANGE: Introducing DaisyUI to help refactor the UI, most of the logic is leave unchanged.
• Rewrite the logprob styling logic, instead changing font color, new the problem change text backgroundColor
• Adding support for theme switching
• Introducing HeroIcon to replace the emojis, keep the aesthetic clean.

A build example can found here: https://ecwuuuuu.com/chatgpt-api-web/

[heimoshuiyu]

Great PR! Appreciated

However, I noticed that when the window width is between 1024-1333px, the top status bar causes overflow.

Additionally, I think the font size of the top status bar is too large. Removing the column-gap from the .stat class and adjusting the font-size of .stat-value to around 1.39rem can avoid this issue. This is just my suggestion, and it may also be necessary to center the top status bar... If you have any other better methods, feel free to suggest them.

[heimoshuiyu]

Would you mind adjusting the rounded radius or padding here? It looks a bit too round and the font is overlapping with the border.

[ecwu]

Would you mind adjusting the rounded radius or padding here? It looks a bit too round and the font is overlapping with the border.

the round corner seems normal on a mobile device, will change the style on the larger screen. For the Stats banner, the easier way is to scale down the font size for value and reduce the padding, but I am not willing to customize too much on topic of the daisy components. I will try to design this part.

[ecwu]

fixed & update via 08a7670

1. New textarea style:

3. New top navbar

[heimoshuiyu]

LGTM!