Enhance the Visual Style of the "Organization Setting" Page

[Ali-Sdg90]

We aim to refine the visual style of the "Organization Setting Page," which will act as a central hub for managing organizations within the CS System. This page will feature a primary table that displays the organizations connected to the CS System, with options to sync data, edit information, delete organizations, and add new organizations.

This task focuses solely on enhancing the page's visual design. While some button functionalities are not yet implemented, we need the buttons placed; future issues will address adding functionality.

You can access this page by clicking the "Organization" button located in the top-left corner of the main navigation bar, then selecting "Organization Setting" from the dropdown menu.

The "Sync" and "Delete" buttons must include a loading state when clicked, indicating that an asynchronous operation is in progress. Use the "Bootstrap Spinner" component as the loading indicator.

Additional Notes

• Ensure consistency with Bootstrap framework guidelines, as the project utilizes Bootstrap as its style framework.
• Avoid adjusting default Bootstrap values as much as possible.
• Ensure the style is responsive to adapt to various screen sizes.

Steps to Participate

1. Comment on this issue with your estimated timeframe for completing the task.
2. The administrators will review your proposed timeline.
3. If approved, the issue will be assigned to you.
4. you'll receive the issue reward upon completing the agreed timeframe.

Contribution Guidelines

• Please refer to the Contribution Guidelines for detailed instructions on contributing to the project.

Deliverables

• The PR for this issue should be approved by @mehrandvd. He will announce his approval on this issue.

Reward

• The reward will be $5, which will be paid in $USDC (ERC20).

[hootanht]

0$?
@Ali-Sdg90

[mehrandvd]

@Ali-Sdg90 The "Add new organization" should align right, and the text should be like this: "Add new organization" (Not upper-first for all the words).
The title "Manage Organization" should align left with this text: "Manage organizations"

[Ali-Sdg90]

0$? @Ali-Sdg90

When the issue's content is finalized, the reward will be added.

[Ali-Sdg90]

Thanks @mehrandvd for your feedback! I've updated the issue image design. Please check it out.

I think aligning the title of the page to the left might be better. What do you think?

Previous image	New image

Align left	Align right

[mehrandvd]

@Ali-Sdg90 The "Add new organization" should align right, and the text should be like this: "Add new organization" (Not upper-first for all the words).

@Ali-Sdg90 You've done it in reverse! The 'title' should go left, and the 'add button' goes right. I think that's the reason you have started suggesting the other different options.

[Ali-Sdg90]

@Ali-Sdg90 The "Add new organization" should align right, and the text should be like this: "Add new organization" (Not upper-first for all the words).

@Ali-Sdg90 You've done it in reverse! The 'title' should go left, and the 'add button' goes right. I think that's the reason you have started suggesting the other different options.

Oh... yes XD
I've updated the issue image. Is it okay now? :D

[mehrandvd]

@mehrandvd Yes, it's ok now.
Another point to mention, for each action (add, edit, delete, sync), there should be a toast after the operation is completed, whether it is done successfully or failed for a reason.

[Ali-Sdg90]

@mehrandvd Yes, I agree that we need to implement toast notifications for this page’s actions. However, I recommend addressing this in a separate issue since toast notifications should be managed globally across the project. Implementing toasts will require functionality, whereas this issue is primarily focused on styling. Additionally, another issue will be needed to cover full functionality, such as the edit, delete, and add buttons. In that issue, we can specify that toast notifications should be displayed after each action, indicating whether it was successful or not, along with relevant details.

[Ali-Sdg90]

@mehrandvd Yes, I agree that we need to implement toast notifications for this page’s actions. However, I recommend addressing this in a separate issue since toast notifications should be managed globally across the project. Implementing toasts will require functionality, whereas this issue is primarily focused on styling. Additionally, another issue will be needed to cover full functionality, such as the edit, delete, and add buttons. In that issue, we can specify that toast notifications should be displayed after each action, indicating whether it was successful or not, along with relevant details.

If you agree with me, I will go ahead and create an issue for the global toast notification.

[mehrandvd]

@Ali-Sdg90 If the task is only about styling, it is OK, but it will be a tiny task.

[Ali-Sdg90]

@mehrandvd Yes, it's not a big task. Please specify the reward for completing the issue so that work can begin.
I'll create another issue for the global notification tomorrow.