FIX-1848 UI design changes #1850
Conversation
![llamapreview[bot]](https://avatars.githubusercontent.com/in/1023541?s=60&v=4){kind=small}
There was a problem hiding this comment.
Auto Pull Request Review from LlamaPReview
1. Overview
1.1 PR Summary
- Business value and requirements alignment: The PR aims to fix UI alignment issues in the contents tab of the status page, as reported in issue Small UI fixes #1848. It also refactors common code into a new component to promote code reuse and modularity.
- Key components modified:
Contentfunction insrc/Pages/StatusPage/Create/Components/Tabs/Content.jsxand the newSectionStackcomponent insrc/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx. - Impact assessment: The changes primarily affect the UI of the contents tab in the status page. They could also have implications for future UI updates and consistency across the application if not handled correctly.
- System dependencies and integration impacts: The changes interact with several components and utilities, including
Stack,Typography,ConfigBox,MonitorList,Search, andCheckbox. These interactions could potentially impact the behavior and appearance of these components across the application if not handled correctly.
1.2 Architecture Changes
- System design modifications: The introduction of the new
SectionStackcomponent promotes code reuse and modularity, making the codebase easier to maintain and update. - Component interactions: The new
SectionStackcomponent interacts with several other components, includingConfigBox,Stack, andTypography. It is used in theContentfunction, but it is not clear if it is used consistently across other components. - Integration points: The changes in this PR do not seem to introduce any new integration points. However, if the
SectionStackcomponent is not used consistently, it could lead to a less cohesive UI, which could negatively impact the user experience.
2. Detailed Technical Analysis
2.1 Code Logic Deep-Dive
Core Logic Changes
- src/Pages/StatusPage/Create/Components/Tabs/Content.jsx -
Contentfunction- Submitted PR Code:
// ...
return (
<TabPanel value={tabValue}>
<Stack gap={theme.spacing(10)}>
<SectionStack
title="Status page servers"
description="You can add any number of servers that you monitor to your status page. You can also reorder them for the best viewing experience."
>
<Stack>
{/* ... */}
</Stack>
</SectionStack>
{/* ... */}
</Stack>
</TabPanel>
);
// ...- Analysis:
- The
Contentfunction now uses the newSectionStackcomponent to wrap the "Status page servers" section. This is a good refactoring as it promotes code reuse and modularity. - However, the
SectionStackcomponent is not used for the "Features" section. This inconsistency could lead to a less cohesive UI if theSectionStackcomponent is not used consistently across the application. - Edge cases and error handling: The current implementation does not handle any edge cases or errors related to the
SectionStackcomponent. For example, if theSectionStackcomponent is not used correctly, it could lead to layout issues or unexpected behavior. - Cross-component impact: The
SectionStackcomponent is used in theContentfunction, but it is not clear if it is used consistently across other components. If not, this could lead to a less cohesive UI. - Business logic considerations: The refactoring does not seem to have any direct impact on the business logic of the application. However, if the
SectionStackcomponent is not used consistently, it could lead to a less cohesive user experience.
- The
- LlamaPReview Suggested Improvements:
// ...
<SectionStack
title="Features"
description="Show more details on the status page"
>
{/* ... */}
</SectionStack>
// ...-
Improvement rationale:
- Technical benefits: Using the
SectionStackcomponent consistently across the application promotes code reuse and modularity, making the codebase easier to maintain and update. - Business value: A consistent UI improves the user experience and makes the application feel more polished and professional.
- Risk assessment: If the
SectionStackcomponent is not used consistently, it could lead to a less cohesive UI, which could negatively impact the user experience.
- Technical benefits: Using the
-
src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx -
SectionStackcomponent- Submitted PR Code:
// ...
const SectionStack = ({ title, description, children }) => (
<ConfigBox>
<Stack gap={2}>
<Typography component="h2">{title}</Typography>
<Typography component="p">{description}</Typography>
</Stack>
{children}
</ConfigBox>
);
// ...- Analysis:
- The
SectionStackcomponent is a good refactoring as it promotes code reuse and modularity. However, it does not seem to handle any edge cases or errors. For example, it does not validate that thetitleanddescriptionprops are strings, or that thechildrenprop is a node. - Edge cases and error handling: The current implementation does not handle any edge cases or errors related to the props passed to the
SectionStackcomponent. This could lead to unexpected behavior or layout issues if the props are not used correctly. - Cross-component impact: The
SectionStackcomponent is used in theContentfunction, but it is not clear if it is used consistently across other components. If not, this could lead to a less cohesive UI. - Business logic considerations: The
SectionStackcomponent does not seem to have any direct impact on the business logic of the application. However, if it is not used consistently, it could lead to a less cohesive user experience.
- The
- LlamaPReview Suggested Improvements:
// ...
const SectionStack = ({ title, description, children }) => {
if (typeof title !== 'string' || typeof description !== 'string') {
throw new Error('Title and description must be strings');
}
if (!React.isValidElement(children)) {
throw new Error('Children must be a valid React element');
}
// ...
};
// ...- Improvement rationale:
- Technical benefits: Adding prop validation to the
SectionStackcomponent helps prevent unexpected behavior and layout issues. - Business value: A consistent UI improves the user experience and makes the application feel more polished and professional.
- Risk assessment: If the
SectionStackcomponent is not used consistently or if its props are not used correctly, it could lead to a less cohesive UI, which could negatively impact the user experience.
- Technical benefits: Adding prop validation to the
2.2 Implementation Quality
- Code organization and structure: The code is well-organized and structured, with clear separation of concerns. The introduction of the new
SectionStackcomponent promotes code reuse and modularity. - Design patterns usage: The use of the
SectionStackcomponent to wrap related sections is a good design pattern that promotes code reuse and modularity. - Error handling approach: The current implementation does not handle any edge cases or errors related to the
SectionStackcomponent. This should be addressed to prevent unexpected behavior or layout issues. - Resource management: The current implementation does not seem to have any resource management issues. However, if the
SectionStackcomponent is not used consistently, it could lead to a less cohesive UI, which could negatively impact the user experience.
3. Critical Findings
3.1 Potential Issues
-
🔴 Critical Issues
- Inconsistent usage of SectionStack component: The
SectionStackcomponent is not used consistently across the application. This could lead to a less cohesive UI if not addressed.- Impact: A less cohesive UI could negatively impact the user experience and make the application feel less polished and professional.
- Recommendation: Use the
SectionStackcomponent consistently across the application to promote code reuse and modularity, and to maintain a cohesive UI.
- Lack of prop validation in SectionStack component: The
SectionStackcomponent does not validate that thetitleanddescriptionprops are strings, or that thechildrenprop is a node. This could lead to unexpected behavior or layout issues if the props are not used correctly.- Impact: Unexpected behavior or layout issues could negatively impact the user experience and make the application feel less reliable.
- Recommendation: Add prop validation to the
SectionStackcomponent to prevent unexpected behavior and layout issues.
- Inconsistent usage of SectionStack component: The
-
🟡 Warnings
- Hardcoded values in SectionStack component: The
SectionStackcomponent uses hardcoded values for thegapprop in theStackcomponent. This could make it difficult to maintain consistency across the application if the theme is not updated accordingly.- Potential risks: Layout issues or inconsistent UI if the theme is not updated accordingly.
- Suggested improvements: Reference the theme for the
gapprop in theStackcomponent to maintain consistency across the application.
- Hardcoded values in SectionStack component: The
3.2 Code Quality Concerns
- Maintainability aspects: The code is well-organized and structured, with clear separation of concerns. However, the lack of error handling and edge case consideration in the
SectionStackcomponent could make it difficult to maintain in the future. - Readability issues: The code is generally readable, but the lack of comments in the
SectionStackcomponent could make it difficult to understand its purpose and usage. - Performance bottlenecks: The current implementation does not seem to have any performance bottlenecks. However, if the
SectionStackcomponent is not used consistently, it could lead to a less cohesive UI, which could negatively impact the user experience.
4. Security Assessment
- Authentication/Authorization impacts: The changes in this PR do not seem to have any direct impact on authentication or authorization.
- Data handling concerns: The changes in this PR do not seem to involve any data handling, so there are no data handling concerns.
- Input validation: The current implementation does not seem to have any input validation issues. However, if the
SectionStackcomponent is not used consistently, it could lead to unexpected behavior or layout issues if the props are not used correctly. - Security best practices: The use of the
SectionStackcomponent to wrap related sections promotes code reuse and modularity, which is a good security practice as it reduces the attack surface of the application. - Potential security risks: The lack of error handling and edge case consideration in the
SectionStackcomponent could potentially lead to unexpected behavior or layout issues, which could be exploited by an attacker. - Mitigation strategies: Add error handling and edge case consideration to the
SectionStackcomponent to prevent unexpected behavior or layout issues. - Security testing requirements: The changes in this PR should be tested to ensure they do not introduce any new vulnerabilities.
5. Testing Strategy
5.1 Test Coverage
- Unit test analysis: There are no unit tests for the
SectionStackcomponent. Unit tests should be added to ensure the component behaves as expected in different scenarios. - Integration test requirements: Integration tests should be added to ensure the
SectionStackcomponent is used consistently across the application. - Edge cases coverage: Edge cases and error handling should be considered in the
SectionStackcomponent to ensure it behaves as expected in different scenarios.
5.2 Test Recommendations
Suggested Test Cases
// Test case for SectionStack component
test('SectionStack component renders correctly', () => {
const { getByText } = render(
<SectionStack title="Test title" description="Test description">
<div>Test children</div>
</SectionStack>
);
expect(getByText('Test title')).toBeInTheDocument();
expect(getByText('Test description')).toBeInTheDocument();
expect(getByText('Test children')).toBeInTheDocument();
});
// Test case for inconsistent usage of SectionStack component
test('SectionStack component is used consistently', () => {
// Add test cases to ensure the SectionStack component is used consistently across the application
});- Coverage improvements: Add unit tests for the
SectionStackcomponent to ensure it behaves as expected in different scenarios. Also, add integration tests to ensure theSectionStackcomponent is used consistently across the application. - Performance testing needs: The changes in this PR do not seem to have any performance implications. However, if the
SectionStackcomponent is not used consistently, it could lead to a less cohesive UI, which could negatively impact the user experience.
6. Documentation & Maintenance
- Documentation updates needed: The
SectionStackcomponent should be documented to ensure it is used correctly and consistently across the application. - Long-term maintenance considerations: The
SectionStackcomponent should be maintained to ensure it continues to behave as expected in different scenarios. Also, it should be used consistently across the application to maintain a cohesive UI.
7. Deployment & Operations
- Deployment impact and strategy: The changes in this PR do not seem to have any deployment impact. However, if the
SectionStackcomponent is not used consistently, it could lead to a less cohesive UI, which could negatively impact the user experience. - Key operational considerations: The
SectionStackcomponent should be monitored to ensure it continues to behave as expected in different scenarios. Also, it should be used consistently across the application to maintain a cohesive UI.
8. Summary & Recommendations
8.1 Key Action Items
- Use the SectionStack component consistently: Use the
SectionStackcomponent consistently across the application to promote code reuse and modularity, and to maintain a cohesive UI. - Add prop validation to the SectionStack component: Add prop validation to the
SectionStackcomponent to prevent unexpected behavior and layout issues. - Add error handling and edge case consideration to the SectionStack component: Add error handling and edge case consideration to the
SectionStackcomponent to prevent unexpected behavior or layout issues. - Update the theme for the SectionStack component: Update the theme for the
SectionStackcomponent to maintain consistency across the application. - Add unit tests for the SectionStack component: Add unit tests for the
SectionStackcomponent to ensure it behaves as expected in different scenarios. - Add integration tests for the SectionStack component: Add integration tests for the
SectionStackcomponent to ensure it is used consistently across the application.
8.2 Future Considerations
- Technical evolution path: The
SectionStackcomponent should be maintained and updated as needed to ensure it continues to behave as expected in different scenarios. Also, it should be used consistently across the application to maintain a cohesive UI. - Business capability evolution: The
SectionStackcomponent promotes code reuse and modularity, which could be useful for future UI updates and consistency across the application. - System integration impacts: The
SectionStackcomponent should be used consistently across the application to maintain a cohesive UI. Also, it should be monitored to ensure it continues to behave as expected in different scenarios.
💡 Help Shape LlamaPReview
How's this review format working for you? Vote in our Github Discussion Polls to help us improve your review experience!
WalkthroughThe changes primarily refactor how configuration information is displayed on the Status Page. The Changes
Sequence Diagram(s)sequenceDiagram
participant User as End-User
participant Content as Content.jsx
participant ConfigStack as ConfigStack.jsx
User->>Content: Load status page
Content->>ConfigStack: Render with title, description, and children
ConfigStack-->>Content: Return composed UI layout
Content-->>User: Display updated configuration sections
Suggested reviewers
✨ Finishing Touches
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/Pages/StatusPage/Create/Components/Tabs/Content.jsx (1)
94-94: Remove this empty Stack elementMom's spaghetti... I mean, this empty Stack with just a gap styling doesn't seem to serve any purpose. It should be removed to keep the code clean.
- <Stack gap={theme.spacing(6)}></Stack>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/Pages/StatusPage/Create/Components/Tabs/Content.jsx(4 hunks)src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx(1 hunks)
🔇 Additional comments (4)
src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx (1)
1-23: Clean, reusable component implementation!This new
SectionStackcomponent looks solid and follows good React practices. It's well-structured to abstract away the repeated pattern we saw in the other file. The PropTypes validation is also properly implemented.I'm noticing that we're using semantic HTML with Typography components (
h2for title,pfor description), which is great for accessibility.However, I'm a bit nervous about one thing - there's no explicit spacing between the Stack containing the title/description and the children elements. This might be handled by the ConfigBox, but it could be worth adding a marginBottom to the Stack to ensure consistent spacing.
- <Stack gap={2}> + <Stack gap={2} sx={{ marginBottom: 2 }}>src/Pages/StatusPage/Create/Components/Tabs/Content.jsx (3)
2-2: Good cleanup of imports!Removed the unused Button import and added the new SectionStack component. Clean imports help maintain a tidy codebase.
Also applies to: 10-10
37-71: Great refactoring of the Status page servers section!The implementation using SectionStack makes the code much cleaner and more maintainable. This matches perfectly with the PR objective of removing common code and introducing a reusable component.
🧰 Tools
🪛 ESLint
[error] 64-64: 'errors.monitors' is missing in props validation
(react/prop-types)
72-92: Nice clean implementation for the Features section too!The refactoring here follows the same pattern, which maintains consistency throughout the codebase. Good job!
🧰 Tools
🪛 ESLint
[error] 81-81: 'form.showCharts' is missing in props validation
(react/prop-types)
[error] 88-88: 'form.showUptimePercentage' is missing in props validation
(react/prop-types)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/Utils/Theme/constants.js (1)
293-302: Nice addition of the alert semantic colors to theme constantsThe new alert colors addition looks good, creating specific styling for alerts in both light and dark themes. This helps with consistency across the application.
Just a small suggestion - instead of hardcoding the dark theme hex values, consider defining these as variables in the newColors object for better maintainability and consistency with the rest of the codebase.
+ // Add to newColors object + darkAlert: "#1c1c1c", + darkAlertBorder: "#515151", alert: { background: { light: newColors.gray200, - dark: "#1c1c1c", + dark: newColors.darkAlert, }, border: { light: newColors.blueGray600, - dark: "#515151", + dark: newColors.darkAlertBorder, }, },src/Components/Alert/index.jsx (1)
39-40: Good migration to the new alert-specific theme propertiesThe change to use dedicated alert styling properties instead of secondary ones improves semantic clarity in the codebase.
However, I noticed that the text color (line 38) is still using the secondary palette's contrastText. For complete consistency, consider adding a text color property to the alert semantic colors.
// In src/Utils/Theme/constants.js alert: { background: { ... }, border: { ... }, + text: { + light: newColors.blueGray600, + dark: newColors.gray200, + }, }, // Then in this file -const text = theme.palette.secondary.contrastText; +const text = theme.palette.alert.text;
Owaiseimdad
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/Utils/Theme/constants.js (1)
18-18: Suggestion: Update the TODO commentThere's an existing TODO about reviewing the color palette. Since you're adding new semantic colors for alerts, consider updating or removing this TODO if it's been addressed.
-/* TODO Review color palette and semantic colors */ +/* TODO Review remaining color palette and semantic colors (alerts addressed in PR #1850) */
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/Utils/Theme/constants.js(2 hunks)
🔇 Additional comments (3)
src/Utils/Theme/constants.js (3)
91-91: New color addition looks good!The addition of
gray900provides a nice dark shade for the alert background in dark mode. Fits well with the existing color palette.
294-303: Alert semantic colors look good!Adding these new semantic colors for alerts provides better consistency and follows the theme structure. Knees weak, arms heavy - but this implementation is steady! This will make the Alert component styling more maintainable.
Just ensure the Alert component properly uses these new theme values:
#!/bin/bash # Check how the Alert component uses these new theme values rg -A 5 -B 5 "palette\.alert" --type jsx
96-96:❓ Verification inconclusive
Verify the impact of changing blueGray900
Mom's spaghetti moment here - changing
blueGray900from what appears to be a dark blue-gray to a medium gray (#515151) could impact other components using this color. Make sure this won't break existing UI elements.
🏁 Script executed:
#!/bin/bash # Search for uses of blueGray900 in the codebase rg "blueGray900" --type js --type jsxLength of output: 65
Action Required: Re-verify the BlueGray900 Usage Impact
The change from a dark blue-gray to a medium gray (#515151) may affect any UI elements relying on blueGray900. However, our initial grep check for "blueGray900" encountered an error due to unrecognized file type "jsx." Please re-run the search using the following adjusted command to include JSX files properly:
Once you have confirmed whether blueGray900 is referenced elsewhere (in JS, JSX, or even non-JS files), ensure that the change does not inadvertently break any components expecting the original darker hue.
His palms are sweaty, knees weak, arms are heavy—there’s vomit on his sweater already, mom’s spaghetti.
🏁 Script executed:
[run_scripts] #!/bin/bash # Add JSX as a recognised file type and search for blueGray900 in JS and JSX files. rg --type-add 'jsx:*.jsx' "blueGray900" --type js --type jsxLength of output: 297
Attention: Re-verify the UI Impact of
blueGray900The updated search confirms that
blueGray900is defined insrc/Utils/Theme/constants.jsand used within the theme object (as seen in thedark: newColors.blueGray900assignment). Although no external references were found in JS/JSX files, this constant may still be injected into UI components via the theme.
- Action: Manually verify any UI elements that use the theme’s
darkproperty or directly referenceblueGray900(including CSS/Sass or styled components) to ensure the medium gray (#515151) does not unintentionally affect the design.His palms are sweaty, knees weak, arms are heavy—there’s vomit on his sweater already, mom’s spaghetti.
| light: newColors.blueGray600, | ||
| dark: newColors.blueGray900, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
These values will not work with MUI components which is the purpose of the theme.
Please see theme docs and be familiar with how the theme works before modifying the theme.
There was a problem hiding this comment.
@ajhollid , yep thanks for providing reference here.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx (2)
1-5: Make sure to clean up unused importsLooks like you're importing
useThemeon line 4 but you're also usinguseThemefrom line 8. Let's clean this up.-import { useTheme } from "@emotion/react";
6-18: Good abstraction but I'm sweatin' about the nested component usageThe component structure makes sense for reusability, but I notice you're wrapping ConfigBox inside this new ConfigStack, which seems like it could be redundant nesting. This might be exactly what you want, but worth checking if ConfigBox already has similar functionality that could be extended instead.
If ConfigBox is just a simple wrapper, consider:
-const ConfigStack = ({ title, description, children }) => { - const theme = useTheme(); - return ( - <ConfigBox> - <Stack gap={theme.spacing(6)}> - <Typography component="h2">{title}</Typography> - <Typography component="p">{description}</Typography> - </Stack> - {children} - </ConfigBox> - ); -}; +const ConfigStack = ({ title, description, children }) => { + const theme = useTheme(); + return ( + <Stack gap={theme.spacing(6)}> + <Stack gap={theme.spacing(6)}> + <Typography component="h2">{title}</Typography> + <Typography component="p">{description}</Typography> + </Stack> + {children} + </Stack> + ); +};
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/Components/Alert/index.jsx(1 hunks)src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx(1 hunks)src/Pages/StatusPage/Create/Components/Tabs/Content.jsx(4 hunks)src/Utils/Theme/constants.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/Components/Alert/index.jsx
🔇 Additional comments (8)
src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx (1)
20-24: Props validation looks solid - good job!Your PropTypes are well defined with clear requirements - knees weak, arms are heavy, but the code is ready!
src/Utils/Theme/constants.js (3)
91-91: Good addition of gray900 colorAdding this semantic color helps maintain consistency. Nice work!
294-303: Verify alert colors work with MUI componentsThere's vomit on his sweater already... I mean, there's a previous comment about MUI theme compatibility. Please double-check that these alert colors work properly with Material UI components that use them.
How to properly set up custom alert colors in Material UI theme?
96-96:❓ Verification inconclusive
Make sure this blueGray900 change is intentional
You've changed blueGray900 from the old value that was removed. Confirm this won't break existing UI that might be using this color.
🏁 Script executed:
#!/bin/bash # Find usages of blueGray900 in the codebase to ensure we're not breaking anything echo "Searching for usages of blueGray900 to verify impact of color change" rg "blueGray900" --type js --type jsxLength of output: 212
Action Required: Verify the BlueGray900 Change
The change to
blueGray900(now set to"#515151") appears intentional at line 96 insrc/Utils/Theme/constants.js. However, our initial search for the usage ofblueGray900raised an error because thergcommand didn't recognise thejsxfile type. To ensure we’re not inadvertently breaking any UI components that might rely on the old value, please re-run the search using a revised script that handles both JavaScript and JSX files. For example:#!/bin/bash # Re-run search for blueGray900 in .js and .jsx files using proper file glob patterns echo "Searching for usages of blueGray900 in .js and .jsx files" rg "blueGray900" -g "*.js" -g "*.jsx"Once you confirm that no unintended usages exist—meaning the updated value won’t affect the UI—please proceed with confidence. Thanks for taking a moment to double-check this change!
src/Pages/StatusPage/Create/Components/Tabs/Content.jsx (4)
2-2: Nice cleanup of importsYou've removed the unused Button import - good cleanup!
10-10: Good component importAdding the ConfigStack import is correctly done.
37-41: This is exactly what the PR aimed to do - nice work!You've successfully refactored the common UI pattern into a reusable component, making the code cleaner and more maintainable. Mom's spaghetti level code organization improvement!
72-76: Great consistent use of ConfigStackUsing the same pattern for both sections creates consistency and reduces code duplication. This matches the PR objectives perfectly.
Describe your changes
Briefly describe the changes you made and their purpose.
-> The alignment of divider line for the left and right box in the contents tab in status page.
-> Made changes in order to avoid any repeated code in the main code file. Ideally, even each section should be in different file but that will be abundance of files and we don’t need to increase it now. But atleast the developer should not worry about title and description component.
Issue number
Small UI fixes #1848
Please ensure all items are checked off before requesting a review. "Checked off" means you need to add an "x" character between brackets so they turn into checkmarks.