Main bkp 8 march neumorphic

[sumansaurabh]

Description

• This PR introduces a comprehensive neumorphic design overhaul across various components.
• Enhancements include the addition of progress indicators, improved button styles, and refined modal presentations.
• The dashboard and tutorial components have been updated for a more cohesive user experience.

---

Changes walkthrough 📝

Relevant files

Enhancement

DocumentationCard.tsx Enhanced DocumentationCard with Neumorphic Design and Progress Indicator src/components/dashboard/DashboardTerminal/DocumentationCard.tsx Added a ProgressIndicator component for visual progress representation. Enhanced StyledBaseCard with neumorphic design and hover effects. Improved styles for buttons and modal components. +293/-44 PlanCheckoutModal.tsx Refactored PlanCheckoutModal for Improved UI                          src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/planCheckoutModal/PlanCheckoutModal.tsx Updated modal title to "Complete Your Purchase". Refactored layout to use styled components for better styling. Improved the presentation of pricing information. +46/-74  DashboardContent.tsx Improved DashboardContent with Neumorphic Styles                  src/components/dashboard/DashboardContent/DashboardContent.tsx Updated PremiumContainer styles for a neumorphic effect. Integrated DashboardTerminal for enhanced dashboard functionality. +25/-19  BaseButton.styles.ts Redesigned BaseButton with Neumorphic Styles                          src/components/common/BaseButton/BaseButton.styles.ts Redesigned button styles for a neumorphic effect. Added hover and active states for better user interaction. +50/-103 Tutorial.styles.tsx Added Neumorphic Styles to Tutorial Components                      src/components/tutorials/Tutorial.styles.tsx Created styled components for tutorial tooltips and content. Enhanced the appearance of tutorial elements. +170/-0

---

💡 Penify usage:
Comment /help on the PR to get a list of all available Penify tools and their descriptions

[penify-dev]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	4, because the PR introduces a significant design overhaul with numerous style changes across multiple components, requiring careful review to ensure consistency and functionality.
🧪 Relevant tests	No
⚡ Possible issues	Potential UI Inconsistencies: With extensive style changes, there may be inconsistencies in the UI across different components that need to be checked.
	Performance Impact: The addition of multiple styled components and animations may impact performance, especially on lower-end devices.
🔒 Security concerns	No

[penify-dev]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Clamp the progress value to ensure it stays within valid bounds Ensure that the progress prop passed to the ProgressOverlay component is clamped between 0 and 100 to avoid unexpected behavior or rendering issues. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [547] -<ProgressOverlay progress={isStarted.percentage} /> +<ProgressOverlay progress={Math.min(Math.max(isStarted.percentage, 0), 100)} /> Suggestion importance[1-10]: 7 Why:	7
	Remove or define the fetch dependency in the useEffect hook The fetch dependency in the useEffect hook is not defined; ensure that it is either defined or removed to avoid potential issues. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [38] -}, [fetch]); +}, []); Suggestion importance[1-10]: 7 Why:	7
Enhancement	Improve button labels for better clarity Consider using a more descriptive label for the buttons in the modal footer to improve clarity and user experience. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [586-588] <Button key="pro" type="primary" onClick={handleBuyPro} style={{ fontSize: '0.85rem' }}> - Buy Pro(25$) + Buy Pro Subscription ($25) </Button> Suggestion importance[1-10]: 7 Why:	7
Security	Remove or replace console logging with a proper logging mechanism Ensure that the console.log statement is removed or replaced with a proper logging mechanism before deploying to production to avoid exposing sensitive information. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [428] -console.log('triggerDocStringGen', requiresPremiumAccess); +// Replace with proper logging mechanism Suggestion importance[1-10]: 7 Why:	7
Possible bug	Add a check for undefined to prevent potential runtime errors Consider adding a check to ensure that requiresPremiumAccess is defined before using it in the triggerDocStringGen function to prevent potential runtime errors. src/components/dashboard/DashboardTerminal/DocumentationCard.tsx [429] -if (requiresPremiumAccess) { +if (typeof requiresPremiumAccess !== 'undefined' && requiresPremiumAccess) { Suggestion importance[1-10]: 7 Why:	7
	Add a check for empty repoList to prevent runtime errors Ensure that the filteredRepoList correctly handles cases where repoList is empty to avoid potential runtime errors. src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/planCheckoutModal/selectReposDropdown/SelectReposDropdown.tsx [182-186] -const filteredRepoList = repoList.filter(option => +const filteredRepoList = repoList.length > 0 ? repoList.filter(option => `${option.organization_name}/${option.repo_name}` .toLowerCase() .includes(searchText.toLowerCase()) -); +) : []; Suggestion importance[1-10]: 7 Why:	7
	Ensure the onCheckboxChange function is defined before usage to prevent errors Ensure that the onCheckboxChange function is defined to avoid reference errors when the checkbox is interacted with. src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricingContent/planCheckoutModal/selectReposDropdown/SelectReposDropdown.tsx [211-213] <StyledCheckbox - onChange={(e) => onCheckboxChange(e, option.id?.toString() || '')} + onChange={(e) => onCheckboxChange ? onCheckboxChange(e, option.id?.toString() || '') : null} checked={checkedItems.includes(option.id?.toString() || '')} > Suggestion importance[1-10]: 7 Why:	7
	Add a null check for searchText to prevent potential runtime errors Consider adding a check to ensure that searchText is not null or undefined before using it in the filter function. src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricingContent/planCheckoutModal/selectReposDropdown/SelectReposDropdown.tsx [185] -.includes(searchText.toLowerCase()) +.includes(searchText?.toLowerCase() || '') Suggestion importance[1-10]: 7 Why:	7
	Add error handling for the API data fetching process Ensure that the fetchData function handles errors from the API call to prevent unhandled promise rejections and to provide feedback to the user in case of failure. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [29-33] -getApiTableData().then((res) => { - if (isMounted.current) { - setTableData({ data: res.data, loading: false }); - } -}); +getApiTableData() + .then((res) => { + if (isMounted.current) { + setTableData({ data: res.data, loading: false }); + } + }) + .catch((error) => { + notification.error({ message: t('apiTable.fetchError'), description: error.message }); + setTableData((prev) => ({ ...prev, loading: false })); + }); Suggestion importance[1-10]: 7 Why:	7
User experience	Improve visual feedback for hover and active states of cards for better user experience Ensure that the hover and active states for the cards are visually distinct to improve user experience. src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.Styles.ts [98-109] &:hover { opacity: 1; + box-shadow: + 12px 12px 28px rgba(0, 0, 0, 0.65), + -12px -12px 28px rgba(60, 60, 60, 0.06); } &:active { - transform: scale(0.98); + transform: scale(0.95); box-shadow: - inset 10px 10px 20px rgba(0, 0, 0, 0.5), - inset -10px -10px 20px rgba(60, 60, 60, 0.05); + inset 8px 8px 16px rgba(0, 0, 0, 0.5), + inset -8px -8px 16px rgba(60, 60, 60, 0.05); } Suggestion importance[1-10]: 7 Why:	7
	Add hover styles to input fields for improved user interaction Consider adding hover styles for the input fields to enhance user experience and interactivity. src/components/common/forms/components/BaseFormItem/BaseFormItem.ts [39-41] +&:hover { + box-shadow: 0 0 5px ${({ theme }) => theme.hoverShadow}; +} &:focus { outline: none; box-shadow: inset 2px 2px 5px #1c1c1c, inset -3px -3px 5px #444444, 0 0 2px 1px #00509a; /* or your brand’s primary color */ } Suggestion importance[1-10]: 7 Why:	7
Best practice	Validate the rowId in the handleToggleRow function before proceeding The handleToggleRow function should validate the rowId before calling toggleApiToken to ensure it is a valid ID. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [60-64] -if (rowId === -1) { +if (rowId === -1 || typeof rowId !== 'number') { handleCreateRow(); return; } toggleApiToken(rowId) .then((resp) => { Suggestion importance[1-10]: 7 Why:	7
Maintainability	Rename the fetchData function to improve clarity Consider using a more descriptive name for the fetchData function to better convey its purpose, such as fetchApiTableData. src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx [26] -const fetchData = useCallback(() => { +const fetchApiTableData = useCallback(() => { Suggestion importance[1-10]: 7 Why:	7
	Use theme colors for better consistency in styling Consider using theme colors for the background and text instead of hardcoded values to maintain consistency across your application. src/components/common/forms/components/BaseFormItem/BaseFormItem.ts [13-30] -background: #2f2f2f; -color: #ffffff; +background: ${({ theme }) => theme.background}; +color: ${({ theme }) => theme.textColor}; Suggestion importance[1-10]: 7 Why:	7
	Define box-shadow values in the theme for consistency and easier adjustments Ensure that the box-shadow values are defined in the theme to allow for easier adjustments and consistency. src/components/common/forms/components/BaseFormItem/BaseFormItem.ts [34-36] box-shadow: - inset 2px 2px 5px #1c1c1c, - inset -3px -3px 5px #444444; + inset 2px 2px 5px ${({ theme }) => theme.shadowDark}, + inset -3px -3px 5px ${({ theme }) => theme.shadowLight}; Suggestion importance[1-10]: 7 Why:	7
Accessibility	Improve accessibility for the success indicator by adding an aria-label Ensure that the success indicator is accessible by providing an aria-label or role attribute. src/components/common/forms/components/BaseFormItem/BaseFormItem.ts [77-78] content: '✓'; +aria-label: 'Success'; Suggestion importance[1-10]: 7 Why:	7