Feature/heatmap lightmode styling

Issue Summary

The Patient Profile page UI currently lacks consistency, proper alignment, and a user-friendly layout. Several elements such as patient details, labels, input fields, and action buttons are not visually structured, leading to a poor user experience.

The expected behavior is to redesign and enhance the Patient Profile UI to be clean, responsive, and consistent with the overall application design system.

---

Problem Statement

The Patient Profile page has the following issues:

• UI components are misaligned and not visually consistent
• Poor spacing and layout affecting readability
• Inconsistent font sizes, colors, and styling
• Lack of responsiveness across different screen sizes
• Action buttons (Edit/Save/Cancel) are not properly positioned
• Some fields are not clearly distinguishable (labels vs values)

Who is affected:

• Patients viewing their profile
• Doctors/admins accessing patient information

Impact:

• Poor user experience
• Difficulty in reading and updating patient data
• Reduced usability on mobile and tablet devices

Steps to Reproduce:

1. Navigate to Patient Profile page
2. Observe layout and alignment issues
3. Resize screen to mobile/tablet view
4. Notice broken or inconsistent UI behavior

---

Proposed Solution

• Redesign the Patient Profile layout using a structured component-based approach
• Use consistent spacing, typography, and color scheme
• Implement responsive design using Flexbox/Grid or Tailwind CSS
• Clearly separate sections (Personal Info, Medical Info, Contact Info)
• Improve button placement and styling (Edit, Save, Cancel)
• Add proper labels and field alignment

Components/Files to Update:

• PatientProfile page component
• Reusable Input/Form components
• CSS/Tailwind styling files

Dependencies:

• Design guidelines (if available)
• Existing component library

---

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Proper UI Layout Rendering

Given the user navigates to the Patient Profile page
 When the page loads
 Then all UI components should be properly aligned
  And sections should be clearly separated

Scenario 2: Responsive Design

Given the user accesses the Patient Profile page on different devices
 When the screen size changes
 Then the layout should adjust responsively

Scenario 3: Button Functionality Visibility

Given the user is on the Patient Profile page
 When the page is displayed
 Then Edit, Save, and Cancel buttons should be clearly visible and properly aligned

Scenario 4: Readable Form Fields

Given the patient details are displayed
 When the user views the profile
 Then all labels and values should be clearly readable

---

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Verify UI alignment	User logged in	1. Open profile page 2. Observe layout	Elements aligned properly	High
TC-002	Verify responsiveness	Page loaded	1. Resize screen 2. Check layout	Layout adapts correctly	High
TC-003	Verify button visibility	Page loaded	1. Locate buttons	Buttons clearly visible	Medium
TC-004	Verify readability	Page loaded	1. Check text fields	Labels & values readable	High

---

Test Assertions Required:

• Renders correctly with initial state
• Handles user input correctly
• Validates input and shows errors
• Updates UI state appropriately

---

Implementation Details

Files to Change

File Path	Action	Purpose
src/components/studentgrid.jsx	Modify	Improve layout and structure

---

Technical Considerations

• Use Tailwind CSS or CSS modules for styling
• Ensure reusable components for scalability
• Maintain consistency with existing design system
• Avoid hardcoded styles

---

UI/UX Requirements

• Clean and structured layout
• Proper spacing and alignment
• Responsive design (mobile, tablet, desktop)
• Accessible labels and inputs
• Consistent button styles

---

Manual Test Steps:

1. Open Patient Profile page
2. Verify layout and alignment
3. Resize screen for responsiveness
4. Check readability and button placement

---

Automated Testing

Unit Tests:

• Component render tests
• UI alignment tests
• Interaction tests

Integration Tests:

• Profile page rendering with API data

---

Test Data Requirements

const mockTestData = {
  name: "John Doe",
  age: 30,
  gender: "Male",
  contact: "9876543210",
  address: "Hyderabad"
}

---

Related Issues / References #268 (closed)

Screenshots or Screen Recordings before After

Definition of Done

• Acceptance criteria met
• UI properly aligned and responsive
• All test cases passed
• Unit tests added and passing
• Manual testing completed
• Code reviewed and approved
• No console errors
• ESLint/Prettier checks passed

---

Additional Context

Notes

• Focus on improving user experience and readability
• Ensure consistency with other pages in the application
• Future enhancements may include profile image and edit mode improvements