Skip to content

Neuomorpic-design UI improve#163

Merged
sumansaurabh merged 48 commits into
mainfrom
ui-improve
Feb 19, 2025
Merged

Neuomorpic-design UI improve#163
sumansaurabh merged 48 commits into
mainfrom
ui-improve

Conversation

@sumansaurabh
Copy link
Copy Markdown
Contributor

@sumansaurabh sumansaurabh commented Feb 19, 2025

Description

  • This PR introduces a comprehensive update to the UI with a focus on neumorphic design.
  • Enhanced various components including buttons, forms, tables, and layout elements.
  • Improved user experience with subtle hover effects and dark themes.

Changes walkthrough 📝

Relevant files
Enhancement
11 files
ListAllRepos.Styles.ts
Enhanced Neumorphic Styles for ListAllRepos                           

src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.Styles.ts

  • Implemented neumorphic design for OuterBaseCard and InnerBaseCard.
  • Enhanced hover effects with shadows and transitions.
  • Adjusted padding and margin for better layout.
  • +146/-17
    BaseFormItem.ts
    Updated BaseFormItem Styles for Dark Theme                             

    src/components/common/forms/components/BaseFormItem/BaseFormItem.ts

  • Updated styles for BaseFormItem to have a dark background.
  • Enhanced input styles for a neumorphic effect.
  • Improved label color for better contrast.
  • +49/-108
    ProfileInfo.styles.ts
    Enhanced ProfileInfo Styles with Neumorphism                         

    src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts

  • Added neumorphic styles for avatar and title.
  • Enhanced layout with shadows and gradients.
  • +68/-17 
    ConnectAccountItem.styles.ts
    Neumorphic Styles for ConnectAccountItem                                 

    src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/ConnectAccountItem/accounts/ConnectAccountItem.styles.ts

  • Implemented neumorphic design for ConnectAccountItem.
  • Adjusted hover effects and layout for better user experience.
  • +64/-109
    BaseTable.styles.ts
    Dark Neumorphic Styles for BaseTable                                         

    src/components/common/BaseTable/BaseTable.styles.ts

  • Updated table styles to have a dark neumorphic design.
  • Enhanced hover effects for table rows.
  • +74/-64 
    DashboardContent.tsx
    Refactored DashboardContent with Neumorphic Styles             

    src/components/dashboard/DashboardContent/DashboardContent.tsx

  • Refactored PremiumContainer with neumorphic styles.
  • Enhanced layout and hover effects.
  • +25/-19 
    ProfileLayout.tsx
    Updated Profile Layout with Neumorphic Design                       

    src/components/profile/ProfileLayout.tsx

  • Added a new container for profile layout with a dark gradient.
  • Enhanced layout with neumorphic styles.
  • +50/-14 
    SearchDropdown.styles.ts
    Neumorphic Styles for SearchDropdown                                         

    src/components/dashboard/common/SearchDropdown/SearchDropdown.styles.ts

  • Updated dropdown styles to have a dark neumorphic design.
  • Enhanced item hover effects.
  • +54/-76 
    BaseButton.styles.ts
    Neumorphic Styles for BaseButton                                                 

    src/components/common/BaseButton/BaseButton.styles.ts

  • Updated button styles to have a dark neumorphic design.
  • Enhanced hover and active states.
  • +51/-103
    MainLayout.styles.ts
    Neumorphic Styles for MainLayout                                                 

    src/components/layouts/main/MainLayout/MainLayout.styles.ts

  • Updated main layout styles to have a dark neumorphic design.
  • Enhanced shadows and background.
  • +40/-5   
    MainNavs.tsx
    Neumorphic Styles for MainNav                                                       

    src/components/layouts/main/MainNav/MainNavs.tsx

  • Updated breadcrumb styles to match the dark neumorphic theme.
  • Enhanced item hover effects.
  • +19/-1   

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

    … improved backgrounds, shadows, and hover effects
    …and text shadow; adjust MainLayout background and height
    … with new gradients, shadows, and hover effects
    …dow, and hover effects; update DashboardTerminal to handle null repoDetails; adjust SearchDropdown styles for better usability
    …ocumentationCard with neumorphic styles and hover effects; modify translation for documentation button
    …d on premium type; refactor DashboardTerminal to conditionally require premium access
    …, shadows, and hover effects; adjust Ant Design overrides for consistency
    …nt background and soft shadows; remove double borders from AntD table
    …action column with button; adjust BaseTable styles to eliminate double borders
    …ling; enhance button styles and layout for better user experience
    …tionRowContainer; add gradient background for last column in BaseTable
    … better visibility; adjust BaseTable text color for consistency
    …n; adjust label and input colors for better contrast
    …sponsiveness; reduce image size and adjust padding for better UI
    …eness; reduce image size and padding for better UI
    …d responsiveness; enhance Neumorphic design and simplify component structure
    …readability; update box shadow for enhanced visual depth
    …default padding removal in card body for improved layout
    …proved aesthetics; add new login background image
    …ed shadows, and hover effects for a more modern look
    @sumansaurabh sumansaurabh merged commit ab55877 into main Feb 19, 2025
    @sumansaurabh sumansaurabh deleted the ui-improve branch February 19, 2025 14:24
    @penify-dev penify-dev Bot added enhancement New feature or request Review effort [1-5]: 4 labels Feb 19, 2025
    @penify-dev
    Copy link
    Copy Markdown

    penify-dev Bot commented Feb 19, 2025

    PR Review 🔍

    ⏱️ Estimated effort to review [1-5]

    4, because the PR introduces significant changes across multiple files with a focus on UI enhancements and neumorphic design. The complexity of the styles and the number of components affected require careful review to ensure consistency and functionality.

    🧪 Relevant tests

    No

    ⚡ Possible issues

    UI Consistency: Ensure that the neumorphic design is consistently applied across all components to avoid a disjointed user experience.

    Performance: The addition of multiple shadows and gradients may impact rendering performance on lower-end devices.

    🔒 Security concerns

    No

    @penify-dev
    Copy link
    Copy Markdown

    penify-dev Bot commented Feb 19, 2025

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Score
    Maintainability
    Consolidate multiple background properties into one

    Consider consolidating the multiple background properties into a single property to avoid
    redundancy and potential confusion.

    src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.Styles.ts [7-9]

    -background: #2a2a2a;
     background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
     
    Suggestion importance[1-10]: 8

    Why: Consolidating the background properties improves maintainability and clarity in the code, as it avoids confusion over which property takes precedence.

    8
    Use CSS variables for colors to improve maintainability and theming flexibility

    Consider using CSS variables for colors to enhance maintainability and allow for easier
    theme changes.

    src/components/common/BaseButton/BaseButton.styles.ts [11]

    -background: #2a2a2a;
    +background: var(--button-background, #2a2a2a);
     
    Suggestion importance[1-10]: 8

    Why: Using CSS variables for colors significantly improves maintainability and flexibility for theming, making it a strong suggestion for future-proofing the code.

    8
    Replace hardcoded colors with theme colors for consistency

    Consider using theme colors instead of hardcoded color values for the background and
    shadows to maintain consistency across the application.

    src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts [30-33]

    -background: linear-gradient(145deg, #2d2d2d, #1a1a1a);
    +background: linear-gradient(145deg, ${({ theme }) => theme.colors.darkBackground}, ${({ theme }) => theme.colors.lightBackground});
     box-shadow:
    -  8px 8px 16px rgba(0, 0, 0, 0.3),
    -  -8px -8px 16px rgba(255, 255, 255, 0.02);
    +  8px 8px 16px rgba(0, 0, 0, ${({ theme }) => theme.shadows.medium}),
    +  -8px -8px 16px rgba(255, 255, 255, ${({ theme }) => theme.shadows.light});
     
    Suggestion importance[1-10]: 7

    Why: While using theme colors improves maintainability, the suggestion does not address a critical issue, as the hardcoded values may still work in the current context.

    7
    Rename the PremiumContainer styled component for better clarity

    Consider using a more descriptive name for the PremiumContainer styled component to better
    reflect its purpose and styling.

    src/components/dashboard/DashboardContent/DashboardContent.tsx [16-35]

    -export const PremiumContainer = styled.div`
    +export const StyledNeumorphicContainer = styled.div`
       background: #2a2a2a;
       border-radius: 16px;
       padding: 1.5rem;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       &:hover {
         transform: translateY(-3px);
         box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.25), -12px -12px 30px rgba(255, 255, 255, 0.12);
       }
     `;
     
    Suggestion importance[1-10]: 6

    Why: While renaming the component can improve clarity, the current name is not misleading and does not significantly impact functionality.

    6
    Rename the ProfileCard styled component for better context

    The ProfileCard styled component could benefit from a more specific name to indicate its
    purpose within the profile layout.

    src/components/profile/ProfileLayout.tsx [19-39]

    -const ProfileCard = styled(BaseCard)`
    +const NeumorphicProfileCard = styled(BaseCard)`
       background: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 0%, rgba(30, 30, 30, 0.6) 100%);
       border-radius: 16px;
       border: none;
       box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4), -8px -8px 20px rgba(255, 255, 255, 0.04);
     `;
     
    Suggestion importance[1-10]: 6

    Why: Similar to the first suggestion, while a more descriptive name can enhance clarity, the existing name is not confusing or misleading.

    6
    Use theme colors for the text to enhance readability across devices

    Consider using a media query for the color property in the Title styled component to
    ensure better readability on different screen sizes.

    src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts [91]

    -color: #e2e2e2; /* Slightly lighter than pure white */
    +color: ${({ theme }) => theme.colors.titleColor}; /* Use theme color for better readability */
     
    Suggestion importance[1-10]: 5

    Why: While using theme colors enhances maintainability, the suggestion lacks urgency as the current color is already readable, making it a minor improvement.

    5
    Design
    Make the hover effect on table rows more subtle to align with neumorphic design

    Ensure that the hover effect on the table rows is subtle enough to maintain the neumorphic
    design aesthetic without being too distracting.

    src/components/common/BaseTable/BaseTable.styles.ts [90]

    -background: rgba(255, 255, 255, 0.05);
    +background: rgba(255, 255, 255, 0.03); /* More subtle hover effect */
     
    Suggestion importance[1-10]: 8

    Why: This suggestion addresses a design concern that aligns with the neumorphic aesthetic, making it a valuable improvement to the user interface.

    8
    Ensure box-shadow values for input focus state align with neumorphic design

    Ensure that the box-shadow values for the input focus state are consistent with the
    overall neumorphic design approach.

    src/components/common/forms/components/BaseFormItem/BaseFormItem.ts [41-44]

     box-shadow:
       inset 2px 2px 5px #1c1c1c,
       inset -3px -3px 5px #444444,
    -  0 0 2px 1px #00509a; /* or your brand’s primary color */
    +  inset 0 0 2px rgba(0, 80, 154, 0.5); /* or your brand’s primary color */
     
    Suggestion importance[1-10]: 7

    Why: Aligning the box-shadow values with the neumorphic design enhances the visual coherence of the UI, which is important for user experience.

    7
    Adjust box-shadow values for consistency in hover and active states

    The box-shadow values in the hover and active states could be adjusted for consistency in
    shadow depth and color.

    src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.Styles.ts [100-103]

     box-shadow:
       12px 12px 28px rgba(0, 0, 0, 0.65),
    -  -12px -12px 28px rgba(60, 60, 60, 0.06);
    +  -12px -12px 28px rgba(60, 60, 60, 0.06),
    +  inset 0 0 12px rgba(0, 0, 0, 0.35);
     
    Suggestion importance[1-10]: 6

    Why: While adjusting box-shadow values can enhance visual consistency, the current implementation is already functional, making this a minor improvement.

    6
    Adjust box-shadow values for a more subtle neumorphic effect

    Ensure that the box-shadow values are consistent with the neumorphic design principles by
    adjusting the opacity and spread to avoid overly harsh shadows.

    src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts [122-139]

     box-shadow:
    -  inset 3px 3px 6px rgba(0, 0, 0, 0.5),
    -  inset -3px -3px 6px rgba(255, 255, 255, 0.02);
    +  inset 3px 3px 8px rgba(0, 0, 0, 0.3),
    +  inset -3px -3px 8px rgba(255, 255, 255, 0.1);
     
    Suggestion importance[1-10]: 6

    Why: This suggestion improves the design consistency, but the original box-shadow values are not overly harsh, making this a minor enhancement.

    6
    Standardize the box-shadow values for consistency in design

    Ensure that the box-shadow values are consistent in terms of color and opacity for a more
    cohesive design.

    src/components/common/BaseButton/BaseButton.styles.ts [35-36]

    -box-shadow: 8px 8px 16px #1a1a1a,
    -             -8px -8px 16px #2a2a2a;
    +box-shadow: 8px 8px 16px rgba(26, 26, 26, 0.5),
    +             -8px -8px 16px rgba(42, 42, 42, 0.5);
     
    Suggestion importance[1-10]: 6

    Why: Standardizing the box-shadow values can improve the design consistency, but the current implementation is already visually appealing. This suggestion is beneficial but not crucial.

    6
    Standardize border-radius values for a unified design language

    Consider using a consistent approach for the border-radius values across different
    components for a unified design language.

    src/components/common/forms/components/BaseFormItem/BaseFormItem.ts [14]

    -border-radius: 10px;
    +border-radius: 8px; /* or another consistent value */
     
    Suggestion importance[1-10]: 5

    Why: Standardizing border-radius values contributes to a cohesive design, but this change is more about aesthetics than functionality, resulting in a lower score.

    5
    Usability
    Make the max-height of the SearchResultsWrapper responsive for better usability

    The max-height property in SearchResultsWrapper could be made responsive by using media
    queries to enhance usability on smaller screens.

    src/components/dashboard/common/SearchDropdown/SearchDropdown.styles.ts [7]

     max-height: 60vh;
    +@media (max-width: 768px) {
    +  max-height: 40vh;
    +}
     
    Suggestion importance[1-10]: 8

    Why: Making the max-height responsive is a significant usability improvement, especially for mobile users, addressing a potential issue in the current design.

    8
    Best practice
    Extract the inline style for boxShadow to improve code clarity

    The inline style for boxShadow in the PremiumContainer could be extracted to a styled
    component or a constant to enhance readability and maintainability.

    src/components/dashboard/DashboardContent/DashboardContent.tsx [121]

    -<PremiumContainer style={{ "boxShadow": premiumType ? "8px 8px 20px rgb(192 160 14 / 20%)": "8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.08)"}}>
    +<PremiumContainer boxShadow={premiumType ? "8px 8px 20px rgb(192 160 14 / 20%)" : "8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.08)"}>
     
    Suggestion importance[1-10]: 7

    Why: Extracting inline styles can improve readability, but the current implementation is still understandable, making this a minor improvement.

    7
    Enhancement
    Include a transition for the color property during hover for smoother visual effects

    The hover effect should also include a transition for the color property to ensure a
    smooth visual experience.

    src/components/common/BaseButton/BaseButton.styles.ts [37]

     color: #ffffff;
    +transition: color 0.3s ease;
     
    Suggestion importance[1-10]: 7

    Why: Including a transition for the color property enhances the visual experience during hover, making it a valuable improvement for user interaction.

    7
    Compatibility
    Add a fallback for the background property for better browser compatibility

    Consider adding a fallback for the background property to ensure better compatibility
    across different browsers.

    src/components/common/BaseButton/BaseButton.styles.ts [11]

    -background: #2a2a2a;
    +background: #2a2a2a; /* Fallback */
    +background: rgba(42, 42, 42, 1);
     
    Suggestion importance[1-10]: 5

    Why: While adding a fallback for the background property can improve compatibility, the original code already uses a solid color which is widely supported. This suggestion is useful but not critical.

    5

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    1 participant