feat(ui): standardize button styles and sizes across components

[youngbeom-shin]

Implements consistent button styling system with sm/md/lg/xl/2xl sizes, adds flex layout and gaps for icons, updates button classes in AddToCollections, EmptyCommunity, NewCommunityDiscussion, TheNavbar and RepoClone components

What this PR does:

Which issue(s) this PR fixes:

Fixes #

Type of changes
Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Feature/Issue validation/testing:

Please describe the tests that you ran to verify your changes and relevant result summary.

• Test A

• Test B

• Logs

Special notes for your reviewer:

Checklist:

• I have added unit/e2e tests that prove your fix is effective or that this feature works.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• I have reviewed my own code and ensured that it follows the project's style guidelines.

Release note:

MR Summary:

The summary is added by @codegpt.

This Merge Request introduces a standardized button styling system across various components in the UI, implementing a consistent look and feel with predefined sizes (sm, md, lg, xl, 2xl). It also incorporates flex layout and gaps for icons, enhancing the UI's overall usability and aesthetics. Key updates include:

1. Standardized button styles and sizes across AddToCollections, EmptyCommunity, NewCommunityDiscussion, TheNavbar, and RepoClone components.
2. Replaced custom button classes with a unified btn class, along with modifiers for size (btn-sm, btn-md) and color themes (btn-primary, btn-secondary-gray).
3. Introduced flex layout for better alignment and spacing of elements within buttons, improving visual consistency across the platform.

[starship-github]

MR Evaluation:

This feature is still under test, evaluation are given by AI and might be inaccurate.

After evaluation, the code changes in the Merge Request get score: 81-83.

Analysis for the evaluation score:

• The code change may not include corresponding unit tests.
• The code change may not include corresponding integration testing.
• The code change may not include the corresponding user manual.
• The code change may not include the corresponding development documentation.

Tips

CodeReview Commands (invoked as MR or PR comments)

• @codegpt /review to trigger an code review.
• @codegpt /evaluate to trigger code evaluation process.
• @codegpt /describe to regenerate the summary of the MR.
• @codegpt /secscan to scan security vulnerabilities for the MR or the Repository.
• @codegpt /help to get help.

CodeReview Discussion Chat

There are 2 ways to chat with Starship CodeReview:

• Review comments: Directly reply to a review comment made by StarShip.
  Example:
  • @codegpt How to fix this bug?
• Files and specific lines of code (under the "Files changed" tab):
  Tag @codegpt in a new review comment at the desired location with your query.
  Examples:
  • @codegpt generate unit testing code for this code snippet.

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 MR/PR comments.

CodeReview Documentation and Community

• Visit our Documentation
  for detailed information on how to use Starship CodeReview.

About Us:

Visit the OpenCSG StarShip website for the Dashboard and detailed information on CodeReview, CodeGen, and other StarShip modules.

[zhendi]

LGTM

[starship-github]

The StarShip CodeReviewer was triggered but terminated because it encountered an issue: The MR state is not opened.

Tips

CodeReview Commands (invoked as MR or PR comments)

• @codegpt /review to trigger an code review.
• @codegpt /evaluate to trigger code evaluation process.
• @codegpt /describe to regenerate the summary of the MR.
• @codegpt /secscan to scan security vulnerabilities for the MR or the Repository.
• @codegpt /help to get help.

CodeReview Discussion Chat

There are 2 ways to chat with Starship CodeReview:

• Review comments: Directly reply to a review comment made by StarShip.
  Example:
  • @codegpt How to fix this bug?
• Files and specific lines of code (under the "Files changed" tab):
  Tag @codegpt in a new review comment at the desired location with your query.
  Examples:
  • @codegpt generate unit testing code for this code snippet.

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 MR/PR comments.

CodeReview Documentation and Community

• Visit our Documentation
  for detailed information on how to use Starship CodeReview.