Fixes #2986 - Multiple UI Updates #3165
Conversation
WalkthroughThis pull request introduces various UI and styling enhancements across multiple components in the Talawa Admin application. Key changes include improved hover effects for buttons, the addition of a text truncation component, refined displays for organization and user lists, and enhancements to responsive design. The updates aim to create a more cohesive and visually appealing user interface by modifying CSS variables, implementing responsive image sizing, and improving text and layout handling in various components. Changes
Assessment against linked issues
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
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
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (8)
src/components/OrgListCard/TruncatedText.tsx (2)
25-25: **Evaluate the truncation coefficient more carefully **The coefficient
charPerPx = 0.065 + fontSize * 0.002can be brittle across various fonts and screen sizes. Consider making the logic customizable or use a more robust text measurement approach (e.g., canvas-based measuring).🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] No TSDoc comment found in file. Documentation is required.
36-38: **Consider debouncing resize events **Repeated truncation checks on every resize event can lead to unnecessary re-renders. You can optimize performance by debouncing or throttling this event handler.
-window.addEventListener('resize', truncateText); +window.addEventListener('resize', debounce(truncateText, 200));🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] No TSDoc comment found in file. Documentation is required.
src/components/OrgListCard/OrgListCard.tsx (1)
3-3: **Remove commented-out import if not needed **The commented-out
useStateimport could be removed if there's no plan to use it soon, to keep imports clean.-// import {useState} from 'react';src/screens/OrgList/OrgList.tsx (1)
490-490: **Optional: Extract shimmer loading placeholder into its own component **Consider extracting this repeated placeholder code into a single reusable loader component, which can be easily maintained and customized in the future.
src/style/app.module.css (2)
1011-1011: Clarify commented-out display declaration
Line 1011 comments outdisplay: flex;. If this is intentional and no longer required, consider removing it. Otherwise, re-enable or document its usage for future reference.
1493-1513: Consider unified approach for responsive button styling
These changes introduce vertical stacking for.btnand its container in screens undermax-width: 1020px. Double-check consistency with other breakpoints and confirm it meets desired design patterns (e.g., matching the approach in lines 1455-1460 and 1586-1591).src/assets/css/app.css (2)
Line range hint
14070-14087: Effective hover implementation for button accessibility.The new hover effect implementation using box-shadow and background-blend-mode provides good visual feedback while maintaining accessibility. The consistent white text color ensures readability across all states.
Consider adding a CSS comment documenting the accessibility benefits of this implementation for future maintainers:
.btn-primary:hover, .btn-primary:active, .btn-secondary:hover, .btn-secondary:active, .btn-success:hover, .btn-success:active, .btn-warning:hover, .btn-warning:active, .btn-info:hover, .btn-info:active { + /* Enhanced hover effect using box-shadow and blend mode for better visibility, + * especially for users with color vision deficiencies */ color: #fff !important; box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); background-blend-mode: multiply; }
14090-14103: Remove commented experimental code.The commented code contains experimental HSL-based hover styles that are no longer needed since a better solution has been implemented.
Remove these unused style experiments to keep the codebase clean:
-/* .btn-primary{ - --hover-bg: #6c757d !important; -} - - -.btn-primary:hover, -.btn-primary:active{ - --hover-bg: hsl(var(--button-hue, 0), 100%, 60%) !important; -} - -.btn-primary:hover, -.btn-primary:active{ - --hover-bg: hsl(var(--button-hue, 0), 100%, 0%) !important; -} */
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/assets/css/app.css(3 hunks)src/components/EventCalendar/EventHeader.tsx(2 hunks)src/components/OrgListCard/OrgListCard.tsx(2 hunks)src/components/OrgListCard/TruncatedText.tsx(1 hunks)src/components/UsersTableItem/UsersTableItem.tsx(1 hunks)src/screens/OrgList/OrgList.tsx(2 hunks)src/screens/OrganizationPeople/OrganizationPeople.tsx(1 hunks)src/style/app.module.css(8 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/components/EventCalendar/EventHeader.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/OrgListCard/OrgListCard.tsx
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Actions: PR Workflow
src/components/OrgListCard/TruncatedText.tsx
[error] No TSDoc comment found in file. Documentation is required.
🔇 Additional comments (14)
src/components/OrgListCard/OrgListCard.tsx (4)
2-2: **Import statement is clear **The new import statement for
TruncatedTextis consistent with the project's conventions. No changes needed.
100-100: **Consider re-enablingTruncatedText**It looks like you are reverting to a
<span>that displays the entire description. If truncation is required, uncommenting theTruncatedTextusage would be essential. Please confirm whether this fallback is intentional.
103-103: **No changes at this line **
107-109: **Great usage of theTruncatedTextcomponent **Using
TruncatedTextfor the address fields ensures consistent styling and avoids layout breaks. Good job!src/screens/OrganizationPeople/OrganizationPeople.tsx (2)
187-187: **Confirm column flex settings **The column has
flex: 1andminWidth: 50. Ensure this doesn't truncate or distort images at smaller screen sizes.
189-232: **Responsive image logic looks good **Your approach to dynamically sizing the image within the computed column width, capping it at 60px, aligns well with responsive design guidelines. The fallback
Avatarusage is also well-structured.src/screens/OrgList/OrgList.tsx (2)
401-401: **Expandable comment blocks **
403-403: **Graceful handling of “no organizations found” **Displaying a dedicated message when no organizations match the search criteria significantly improves the user experience.
src/components/UsersTableItem/UsersTableItem.tsx (1)
164-164: Ensure consistent visual hierarchy for success buttons
This new “btn btn-success” button interacts well with the existing UI, but consider verifying that “success” (green) is reserved for positive, non-destructive actions to maintain a clear visual hierarchy.src/style/app.module.css (5)
94-97: Double-check table header color contrast
By switching to white for both the background and text color variables (--table-head-bgand--table-header-color), there is a risk of reduced accessibility if these values blend. Verify sufficient contrast per WCAG guidelines.
Line range hint
1455-1460: Check layout shift for wide screens
Here,.btnsContainer .btnsBlockis changed to usedisplay: block;. Ensure the new block display doesn’t unintentionally break the container’s layout when there are multiple buttons or elements side by side.
1586-1591: Maintain consistent margin reset
You resetmargin-left: 0for.btnsContainer .btnsBlock buttonat this breakpoint. Confirm whether this style aligns with the changes at lines 1493-1513 for uniform spacing.
5446-5446: Validate layout impact of reduced flex-grow
Reducing flex-grow from 1 to 0.5 may improve spacing, but ensure it does not cause layout truncation in smaller containers. Consider whether more granular media queries are needed.
5475-5501: Test phone-size responsiveness
This block modifies layout formax-width: 520px. Verify any forms or button sets displayed on phone screens remain readable and clickable without overflow. It might be beneficial to take UI snapshots on smaller devices to confirm.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/OrgListCard/TruncatedText.tsx (3)
30-35: Consider optimizing initial state.Initialize
truncatedTextwith the inputtextto avoid an unnecessary re-render on mount.- const [truncatedText, setTruncatedText] = useState<string>(''); + const [truncatedText, setTruncatedText] = useState<string>(text);
49-50: Document or extract magic numbers used in character width calculation.The values
0.065and0.002used in the character width calculation are magic numbers. Consider extracting these as named constants with documentation explaining their derivation.+const BASE_CHAR_WIDTH_RATIO = 0.065; +const FONT_SIZE_MULTIPLIER = 0.002; - const charPerPx = 0.065 + fontSize * 0.002; + const charPerPx = BASE_CHAR_WIDTH_RATIO + fontSize * FONT_SIZE_MULTIPLIER;
65-69: Consider making the heading level configurable.Using
h6might not be semantically correct for all use cases. Consider adding a prop to specify the heading level or allowing a different element type.interface InterfaceTruncatedTextProps { text: string; maxWidthOverride?: number; + as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'; } const TruncatedText: React.FC<InterfaceTruncatedTextProps> = ({ text, maxWidthOverride, + as: Component = 'h6', }) => { // ... return ( - <h6 ref={textRef} className="text-secondary"> + <Component ref={textRef} className="text-secondary"> {truncatedText} - </h6> + </Component> ); };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/OrgListCard/TruncatedText.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test Application
- GitHub Check: Analyse Code With CodeQL (javascript)
🔇 Additional comments (3)
src/components/OrgListCard/TruncatedText.tsx (3)
1-13: LGTM! Well-structured interface with clear documentation.The interface is properly typed and documented with clear TSDoc comments.
15-29: Excellent documentation!The component documentation is comprehensive and includes a clear example. This successfully addresses the previous review comment about missing TSDoc.
1-72: Verify the component's behavior with organization cards.The implementation looks solid and aligns with the PR objectives. Please ensure that the truncation behavior works correctly with various organization card widths and text lengths.
✅ Verification successful
TruncatedText component is properly integrated and used in OrgListCard
The verification shows that the TruncatedText component is correctly used in OrgListCard.tsx for truncating the organization's address. The implementation is solid with:
- A commented-out usage for description (indicating intentional removal)
- Active usage for formatting and truncating the address line
The component's behavior will work as expected since:
- It's used within a card layout where space constraints are predictable
- The address string combines multiple fields which could be lengthy
- The component handles dynamic resizing through the resize event listener
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for usage of TruncatedText in organization cards and related components rg -l "TruncatedText" src/components/OrgListCard/Length of output: 137
Script:
#!/bin/bash # Check how TruncatedText is used in OrgListCard rg -A 5 "TruncatedText" src/components/OrgListCard/OrgListCard.tsxLength of output: 864
|
@palisadoes I also want to get your opinion on some more such more styled CSS changes that we can made in the dashboard... like we can introduce smooth scrolling like Lenis Smooth scrolling for better UX and also slim and customised scrolling bar for like fuller view of content? Reference for smooth scrolling : https://lenis.darkroom.engineering/ |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #3165 +/- ##
=====================================================
+ Coverage 19.97% 89.69% +69.71%
=====================================================
Files 302 325 +23
Lines 7694 8487 +793
Branches 1678 1906 +228
=====================================================
+ Hits 1537 7612 +6075
+ Misses 6061 648 -5413
- Partials 96 227 +131 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/OrgListCard/useDebounce.tsx (1)
26-33: Add optional TSDoc for returned object.
The hook returns two methods,debouncedCallbackandcancel. Briefly describing their usage via TSDoc will enhance readability and maintainability./** * A custom React hook for debouncing a callback function. * ... + * @returns An object containing: + * - debouncedCallback: the debounced function + * - cancel: method to cancel a pending timeout */src/components/OrgListCard/TruncatedText.tsx (2)
53-54: Validate the character width approximation.
The logic at line 53-54 calculates an approximate ratio of characters per pixel based on font size. This may cause inaccuracies with variable-width fonts or special characters. Consider measuring text in a hidden element for more consistent truncation across different fonts.
73-76: Consider accessibility and semantic heading usage.
A<h6>tag is semantically a heading. If it’s purely stylistic or repeated as a label, consider using a<div>or<span>. Additionally, for truncated text, providing a tooltip or aria-label with the full text can help screen readers.-<h6 ref={textRef} className="text-secondary"> +<div ref={textRef} className="text-secondary" aria-label={text}>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/OrgListCard/TruncatedText.tsx(1 hunks)src/components/OrgListCard/useDebounce.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test Application
- GitHub Check: Analyse Code With CodeQL (javascript)
🔇 Additional comments (3)
src/components/OrgListCard/useDebounce.tsx (1)
16-16: Double-check the timeout type in TypeScript.
Although usinguseRef<number | undefined>is valid in a DOM environment, some configurations might interpretsetTimeoutas returning aNodeJS.Timeout. Ensure your TS config targets the DOM definitions or consider explicitly typing it if you run into conflicts.src/components/OrgListCard/TruncatedText.tsx (2)
1-2: Confirm SSR or static rendering usage.
This approach relies on browser APIs (window,resizeevent). If server-side rendering (SSR) is in play, consider conditionally using these APIs or guarding them to prevent reference errors.
64-71: Ensure multiple event listeners are not attached.
Your useEffect properly removes the event listener and cancels the debounce on unmount. This looks correct. Just make sure re-renders won't attach multiple listeners. Since you’re memoizing the callback with[debouncedCallback], you’re safe.
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
src/assets/css/app.css (1)
Line range hint
14070-14087: Review button hover styles for WCAG contrast compliance.The current hover effect implementation:
.btn-primary:hover, .btn-secondary:hover, /* ... other button types ... */ { color: #fff !important; box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); background-blend-mode: multiply; }While the inset shadow provides visual feedback, consider:
- Testing the contrast ratios with the darkened background to ensure WCAG 2.1 compliance
- Adding
transitionproperty for smoother hover effectsConsider this enhancement:
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover { color: #fff !important; + transition: all 0.2s ease-in-out; box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); background-blend-mode: multiply; + outline: 2px solid currentColor; + outline-offset: 2px; }
🧹 Nitpick comments (5)
src/screens/OrganizationPeople/OrganizationPeople.tsx (1)
191-191: Correct the comment to match the actual max size of 60px.The inline comment says “Max size 40px,” but the code enforces a maximum of 60px (
Math.min(columnWidth * 0.6, 60)). Update the comment to prevent confusion.- const imageSize = Math.min(columnWidth * 0.6, 60); // Max size 40px, responsive scaling + const imageSize = Math.min(columnWidth * 0.6, 60); // Max size 60px, responsive scalingsrc/screens/OrgList/OrgList.tsx (2)
401-403: Consider extracting the conditional logic into a helper function.Lines 401–403 handle multiple conditions for displaying a “no organizations found” message. Combining them into a small helper function or variable could improve readability and maintainability.
490-490: Explore using a built-in skeleton loader.The shimmer effect in line 490 is visually helpful, but consider leveraging Material UI’s Skeleton or another built-in skeleton loader for consistency and maintainability. This can simplify styling and reduce custom class usage.
src/style/app.module.css (1)
5493-5501: Remove commented code.The commented code block should be removed as it's not providing any value and may cause confusion.
- /* .input { - width: 100%; - } - - .createButton { - margin: 0 auto; - width: 100%; - } */src/assets/css/app.css (1)
14090-14103: Remove commented code.The commented code block contains experimental button styles that are no longer needed. This adds unnecessary complexity and maintenance overhead.
Remove the unused code block to improve maintainability:
-/* .btn-primary{ - --hover-bg: #6c757d !important; -} - - -.btn-primary:hover, -.btn-primary:active{ - --hover-bg: hsl(var(--button-hue, 0), 100%, 60%) !important; -} - -.btn-primary:hover, -.btn-primary:active{ - --hover-bg: hsl(var(--button-hue, 0), 100%, 0%) !important; -} */
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/assets/css/app.css(3 hunks)src/components/EventCalendar/EventHeader.tsx(2 hunks)src/components/OrgListCard/OrgListCard.tsx(2 hunks)src/components/OrgListCard/TruncatedText.tsx(1 hunks)src/components/OrgListCard/useDebounce.tsx(1 hunks)src/components/UsersTableItem/UsersTableItem.tsx(1 hunks)src/screens/OrgList/OrgList.tsx(2 hunks)src/screens/OrganizationPeople/OrganizationPeople.tsx(1 hunks)src/style/app.module.css(8 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/components/OrgListCard/TruncatedText.tsx
[warning] 39-39: src/components/OrgListCard/TruncatedText.tsx#L39
Added line #L39 was not covered by tests
src/components/OrgListCard/useDebounce.tsx
[warning] 28-29: src/components/OrgListCard/useDebounce.tsx#L28-L29
Added lines #L28 - L29 were not covered by tests
🪛 Biome (1.9.4)
src/components/OrgListCard/OrgListCard.tsx
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (7)
src/components/OrgListCard/useDebounce.tsx (1)
28-29: Increase test coverage for the debounced callback.Lines 28–29 are not covered by tests (per static analysis). These lines invoke
callbackafter the specified delay. Adding a test that ensures the callback is called after the delay expires would guard against regressions.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 28-29: src/components/OrgListCard/useDebounce.tsx#L28-L29
Added lines #L28 - L29 were not covered by testssrc/components/OrgListCard/TruncatedText.tsx (1)
39-39: Add a test to cover the delayed truncation scenario.Static analysis indicates that line 39 (the delayed callback invocation) lacks test coverage. Consider adding a test that asserts the callback is triggered only after 100ms to confirm that debouncing is functioning correctly.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 39-39: src/components/OrgListCard/TruncatedText.tsx#L39
Added line #L39 was not covered by testssrc/components/EventCalendar/EventHeader.tsx (1)
75-75: LGTM! Consistent dropdown widths improve UI alignment.The addition of
width: 100%to both dropdown toggles ensures consistent width and better alignment in the header.Also applies to: 104-104
src/components/UsersTableItem/UsersTableItem.tsx (1)
Line range hint
164-169: LGTM! Well-implemented button with proper testing and translation support.The new button follows best practices with:
- Proper class naming
- Data test ID for testing
- Internationalization support
- Clear click handler implementation
src/style/app.module.css (3)
93-96: Improved table header contrast with subtle blue background and white text.The color changes enhance readability and accessibility by providing better contrast between the table header background and text.
5446-5446: Improved flex item proportions with reduced flex-grow.The change from
flex-grow: 1toflex-grow: 0.5helps maintain better spacing and proportions between flex items.
5475-5492: Improved mobile responsiveness for calendar header.The media query effectively handles small screens by:
- Switching to a column layout
- Making elements full width
- Improving spacing between elements
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/OrgListCard/OrgListCard.tsx (1)
2-3: Remove unnecessary commented-out code.The commented-out
useStateimport seems unused. Removing it helps keep the codebase clean.import React from 'react'; import TruncatedText from './TruncatedText'; -// import {useState} from 'react'; import FlaskIcon from 'assets/svgs/flask.svg?react';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/OrgListCard/OrgListCard.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test Application
- GitHub Check: Analyse Code With CodeQL (javascript)
🔇 Additional comments (2)
src/components/OrgListCard/OrgListCard.tsx (2)
99-103: Good job using the TruncatedText component for the organization description.By wrapping the description in
TruncatedText, you ensure it doesn't overflow or break the layout. This is consistent with previous suggestions and improves the UI.
106-106: Consistent use of optional chaining.This addresses previous feedback for safer property access. By using
address?.cityandaddress?.line1, you mitigate potential runtime errors.Also applies to: 108-110
|
Would it be possible to get some reviews on this, @palisadoes?... Actually the changes I made are in certain files that are currently being refactored as the new issues being assigned that's why I was saying to avoid the conflicts |
palisadoes
merged commit ef5a206
into
PalisadoesFoundation:develop-postgres
…dation#3165) * UI fixes on organisation pages * Added TSDoc for Truncated Text * Added Debouncer * Update src/components/OrgListCard/OrgListCard.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Added code rabbit suggestions * Fixed test error --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* prevented unnecessary page reload with complementary test * Update jest.config.js * Fixes #2986 - Multiple UI Updates (#3165) * UI fixes on organisation pages * Added TSDoc for Truncated Text * Added Debouncer * Update src/components/OrgListCard/OrgListCard.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Added code rabbit suggestions * Fixed test error --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * refactore src/screens/OrgList from jest to vitest (#3200) * Improved Code Coverage in src/components/Venues/VenueModal.tsx (#3203) * Improved Code Coverage in src/components/Venues/VenueModal.tsx * removed the ignore statements from VenueModal.tsx * Removed istanbul ignore lines. Code coverage remians 100% (#3207) * refactored src/screens/FundCampaignPledge from jest to vitest (#3208) * prettier formatting and disabled ts-specific rules for js in eslint (#3186) * Improve Code Coverage in src/screens/UserPortal/Settings/Settings.tsx (#3189) * Preventing Overflow of images in Advertisement and Venue Post modals (#3204) * improve code coverage of src/screens/EventManagement (#3149) * code coverage * jest global coverage decreased * global jest coverage * rename file problem solved * changes requested resolved * fix: update Chat section title to 'Chats' (#3216) * removed stale comment line * Revert "removed stale comment line" This reverts commit e0fa894. * removed stale comment line --------- Co-authored-by: Peter Harrison <[email protected]> Co-authored-by: Mehul Aggarwal <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Syed Ali Ul Hasan <[email protected]> Co-authored-by: harshk-89 <[email protected]> Co-authored-by: Amaan ali <[email protected]> Co-authored-by: Yugal Sadhwani <[email protected]> Co-authored-by: Pranav Nathe <[email protected]> Co-authored-by: prathmesh703 <[email protected]> Co-authored-by: Nivedita <[email protected]>
What kind of change does this PR introduce?
BugFix
Issue Number:
Fixes #2986
Did you add tests for your changes?
No
If relevant, did you update the documentation?
No
Summary
Made changes in the UI that created certain bugs in the Talawa Admin also included some general css changes for the repository:
Before
Solution:
Introduced a new component for truncating text according to the width of the cardOverlapping.button.fixed.mp4
Before
Solution:
Used dynamic width allocation for the profile images and changed display property from flex to block for the fields for smaller screens to make the UI cleanerpeoplePageCorrected.mp4
Before
Solution:
Reduced the flex grow to 0.5 for better spacing amongst the components and did similar like above by changing display property from flex to block for smaller screens:The main issue here was to solve for the disapperance of screen when clicked on Year view is due to the fact that Year View is not yet completed in the
src\screens\OrganizationEvents\OrganizationEvents.tsxas far I could understand the code... correct me if I'm wrong here or missed out something... maybe we can have another issue to complete the year view.Before
5.mp4
Solution:
The major problem that arose here was the custom styles was that were given to multiple buttons and therefore a unified hover style is difficult to make... for instance there were buttons ( .btn-primary ) with white or light greyish background and white hover would look very uneasy... and if we were to change their background contrasting then there were certain buttons whose color would completely change on hover which would look too flashy and unesscary styled.So I came up with a solution using the inset box shadow and darkening the inside of button which could be applied to our generic .btn-primary etc. buttons and white hover which would look decent.
hoverFinal.mp4
Also in the context for modifying our css for color blind users as well, we ought to move towards non-specific colors like green,blue, red so this hover effect can also enhance the hover experience for them as it darkens and lightens the shade in noticeable amount than our previous version of hover(Also with a subtle animation)
subtleAnimation.mp4
Other information
There are few changes like the hover one that would affect the entire CSS of the admin dashboard... If required I can share more snapshots or videos of the changes being taken place.
Have you read the contributing guide?
Yes
Summary by CodeRabbit
Style
New Features
TruncatedTextcomponent for text truncation.Improvements