[Update] Apply new ui for dashboard

[vitran12]

What this PR does / why we need it?

Apply new UI for

• [x] Login
• [x] Logout
• [x] Heading
• [x] Footer
• [x] New Project
• [x] Project List
  • [x] Search
  • [x]Overview Project
  • [x] Document
  • [x]API
  • [x] Setting
• [x] Setting Account
• [x] Responsive
• [x] Theme Light/Dark

Any background context you want to provide?

What are the relevant tickets?

Fixes #

https://github.com/yorkie-team/dashboard/assets/150248298/f243ab17-49f1-4d08-834b-72cb0a4ae79d

https://github.com/yorkie-team/dashboard/assets/150248298/df928a92-6ad8-480e-bbc5-8e8eb75446f2

https://github.com/yorkie-team/dashboard/assets/150248298/c6395af5-5f20-4d85-b376-b2809c8d0ed5

https://github.com/yorkie-team/dashboard/assets/150248298/4cfba55d-d34d-4b97-aad6-178ea8c50493

https://github.com/yorkie-team/dashboard/assets/150248298/f004756e-a585-4bed-9ed5-a0d74736a957

Summary by CodeRabbit

• New Features

  • Integrated new UI components from yorkie-ui for improved styling and functionality.
  • Added search functionality using react-json-view.

• Enhancements

  • Updated to React 18 for better performance and new features.
  • Improved theme setting and conditional rendering logic in the main App.
  • Refined layout and design of various components (Footer, Header, Breadcrumb, etc.) using Flex, Box, and Text.

• Bug Fixes

  • Fixed styling inconsistencies and improved responsive design.

• Chores

  • Updated dependencies to the latest versions for improved security and compatibility.

[coderabbitai[bot]]

Walkthrough

This update encompasses substantial enhancements across various components, primarily focusing on modernizing the UI with yorkie-ui, and upgrading key packages such as React, TypeScript, and project dependencies. This overhaul introduces new UI elements, improves the application's efficiency and readability, and ensures compatibility with the latest versions, reinforcing a refined and robust user experience.

Changes

Files	Change Summary
package.json	Updated versions for @types/node, react, react-dom, typescript, @types/eslint, added t, yorkie-ui, and react-json-view.
src/App.tsx	Enhanced theme application logic and streamlined development environment rendering.
src/app.scss	Various style adjustments including font sizes, box shadows, flex properties, and responsive design elements.
src/components/index.ts	Removed export for Button, retained other component exports.
src/components/Breadcrumb/Breadcrumb.tsx	Updated structure to utilize yorkie-ui components for layout and rendering.
src/components/CodeBlock/CodeBlock.tsx	Refactored CodeBlockCode to an arrow function.
src/pages/Footer.tsx	Refined layout using Flex and Link from yorkie-ui.
src/components/Input/InputHelperText.tsx	Utilized yorkie-ui components for flex, text, and icon rendering.
src/components/Input/InputTextBox.tsx	Refactored to use yorkie-ui components, updated props and structure.
src/.../TabList.tsx	Added yorkie-ui Text component and adjusted Texts function implementation.
src/.../DocumentList.tsx	Enhanced layout and styling with yorkie-ui components, updated event handling functions.
src/.../APIKeys.tsx	Restructured component layout with yorkie-ui components, improved copy functionality with tooltips.
src/.../Overview.tsx	Significant restructuring using yorkie-ui, updated layout, replaced classNames, enhanced Tooltip usage.
src/.../ProjectDropdown.tsx	Major overhaul in dropdown structure, introduced icon prop, updated rendering logic using Popover, Button, Box, and Menu from yorkie-ui.
src/.../CommunityPage.tsx	Adjusted component props and structure for better readability and styling.
src/.../ModalView.tsx	Reordered imports, updated button components, and adjusted props.
src/.../test/index.ts	Removed export of ButtonView, retained other exports.
src/components/Icons/Icon.tsx	Changed svgMap from a private to an exported constant.
src/.../SearchBar.tsx	Refactored structure to utilize yorkie-ui components for input handling and styling.
src/.../SignupForm.tsx	Updated form layout using Box, adjusted InputTextBox and Button props for better UI.
src/.../pages/Header.tsx	Comprehensive update to header structure and styling, replacing elements with yorkie-ui components.

A rabbit hopped through code so bright, 🌟
Updating packages in the night,
Yorkie-ui came to light,
Enhancing styles, making things right,
Flex and Box danced in delight,
Buttons gleamed in the UI light.
Developers now can sleep tight! 😌🎉

    /)/)
   ( . .)  
  (”)(_)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

[CLAassistant]

All committers have signed the CLA.