style(code editor): improved UI / UX for code editor

[akhilvc10]

Improved Code Editor UI and UX

Changes

1. Introduces improvements to the Code Editor component's UI and UX based on the new design.

2. Updates the color codes to Tailwind's neutral gray, based on the latest mockup.

3. Removes the old theme variables.

Before:

After:

Screenshot

Video Recording

https://github.com/OpenDevin/OpenDevin/assets/23031065/20e89f7f-bdeb-4512-a378-d58315d1d9b0

[foragerr]

Looks great! 👏 How much harder is it to allow multiple files to stay open?

[akhilvc10]

Looks great! 👏 How much harder is it to allow multiple files to stay open?

Thanks ! @foragerr

Allowing multiple files to stay open is not a significantly complex task, but it does require additional development effort and thoughtful implementation.

In this particular PR, my primary focus was on improving the existing UI and enhancing the overall user experience. This was an important step to ensure the core functionality is intuitive and user-friendly.

I plan to create a separate PR dedicated to adding this "multiple file open" functionality in the near future.

[openartist]

@akhilvc10 It's looking great but I see a few issues. I'll do a thorough review in a bit.

[Sparkier]

Awesome, really like the design. One thing I immediately noticed from the screenshots is that there are some issues with the tab design:

1. it is very hard to recognize the currently active tab
2. the height of the tab bar is larger than the height of the headings of all other containers now

[rbren]

@akhilvc10 can you check the accessibility of the gray text against the black background? It looks too low-contrast to me

https://webaim.org/resources/contrastchecker/ will tell you if it's high contrast enough

[akhilvc10]

I've made some changes based on the above feedbacks. I've incorporated a new theme color based on the latest UI from @openartist. Now we are using Tailwind CSS colors by default and have removed the existing theme variables. This will solve the issue of inconsistent theme variable names while collaborating.

[openartist]

• The font in the file tree is incorrect, the files should be indented • The active tab vs inactive tab color are not correct (see design) • The stroke around the chat input field is incorrect • Terminal is missing an icon • If we are going to add tabbed files now, let's add a vertical line that goes across: • Can you update the chat box style with the most current? • I found a discrepancy in the design where the tab fonts were using Inter, can you check the design and make sure you're using SF Pro? • There seems to be some spacing that's off in the IDE:

[openartist]

• I added a new file tree collapse design here: https://www.figma.com/file/iM5UBG1lnpg2sgE3cFnF1P/OpenDevin?type=design&node-id=7595%3A36144&mode=design&t=IkaOirz618UGlKcU-1