fix(platform): Changed the empty project page UI as per the figma design

[dev-palwar]

User description

Description

changing the empty project page UI

Fixes #485

Screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

enhancement

---

Description

• Updated the empty state UI for the dashboard to align with the new Figma design.
• Introduced an image and updated text to enhance the visual appeal of the empty state.
• Modified the button style for creating new projects to improve user interaction.
• Ensured the new design is integrated seamlessly into the existing codebase.

---

PRDescriptionHeader.CHANGES_WALKTHROUGH

	Relevant files
Enhancement	page.tsx Update empty dashboard state UI to match Figma design        apps/platform/src/app/(main)/page.tsx Updated the empty state UI for the dashboard. Replaced text with new design elements including an image and updated text. Added a new button style for creating projects. Integrated new Figma design for empty state. +89/-77

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 485 - Fully compliant Fully compliant requirements: Update the current empty dashboard state with the new Figma design Modify the part of the codebase specified in the ticket

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Code Duplication The Dialog component for creating a new project is duplicated. Consider extracting it into a separate component to improve code maintainability. Accessibility Concern The Image component is missing an informative alt text. Ensure that all images have descriptive alt text for better accessibility.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Accessibility	Correct input element IDs to match their purpose and improve accessibility The id attribute for the description input is set to "name", which is incorrect. Change it to "description" to match its purpose and improve accessibility. apps/platform/src/app/(main)/page.tsx [148-158] <Input className="col-span-3" - id="name" + id="description" onChange={(e) => { setNewProjectData((prev) => ({ ...prev, description: e.target.value })) }} - placeholder="Enter the name" + placeholder="Enter the description" /> Suggestion importance[1-10]: 10 Why: The suggestion corrects an incorrect ID attribute, which is crucial for accessibility and functionality. This change ensures that the input element is properly identified and used, enhancing both accessibility and code correctness.	10
	Improve accessibility by providing meaningful alt text for images Consider using a more descriptive and semantic alt text for the Image component. Instead of an empty string, provide a meaningful description of what the image represents. apps/platform/src/app/(main)/page.tsx [106] -<Image alt="" height={100} src={fileIcon} width={100} /> +<Image alt="File icon for new project" height={100} src={fileIcon} width={100} /> Apply this suggestion Suggestion importance[1-10]: 8 Why: Providing a meaningful alt text for images enhances accessibility, making the application more user-friendly for visually impaired users. This suggestion directly improves the accessibility of the component.	8
Enhancement	Ensure consistency between input labels and placeholders The placeholder for the description input is "Enter the name", which is inconsistent with the label. Consider changing it to "Enter the description" for clarity and consistency. apps/platform/src/app/(main)/page.tsx [148-158] <Input className="col-span-3" - id="name" + id="description" onChange={(e) => { setNewProjectData((prev) => ({ ...prev, description: e.target.value })) }} - placeholder="Enter the name" + placeholder="Enter the description" /> Suggestion importance[1-10]: 9 Why: The suggestion addresses a clear inconsistency between the input label and its placeholder, which can confuse users. Correcting this improves the user interface and experience significantly.	9
	Remove unnecessary empty string from component children The Button component inside the DialogTrigger has an empty string as its first child, which is unnecessary. Remove the empty string to clean up the code. apps/platform/src/app/(main)/page.tsx [116-119] <Button className="border-2px bg-white text-black hover:text-white"> - {' '} Create project </Button> Apply this suggestion Suggestion importance[1-10]: 6 Why: Removing unnecessary empty strings from component children cleans up the code, improving readability and maintainability. While the impact is minor, it contributes to better code quality.	6

💡 Need additional feedback ? start a PR chat

[kriptonian1]

This is a bad PR @dev-palwar just deleted the add new project feature, I am closing this PR so that someone else can pick this up

[dev-palwar]

I only made changes in the UI. The add new project feature was not working before as well. I even raised the issue on Discord

And after subitting the PR i looked more into it and found the bug

[kriptonian1]

Which we mentioned why it was not working, but it doesn't mean you will just remove a feature

[dev-palwar]

I did not remove anything bro. It is still there. You can check the changed files. The behavior of that feature is still the same as before

before making any change

before.making.changes.mp4

after making changes

after.making.changes.mp4