fix(service-portal): Update notification icon styling #15219
Conversation
WalkthroughThese updates enhance and standardize the presentation and functionality of avatar images across various components like Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Datadog ReportAll test runs ✅ 2 Total Test Services: 0 Failed, 1 Passed Test Services
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- apps/service-portal/src/components/Notifications/NotificationLine.tsx (1 hunks)
- apps/service-portal/src/components/Notifications/Notifications.css.ts (1 hunks)
- libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts (1 hunks)
- libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx (2 hunks)
Additional context used
Path-based instructions (4)
libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/service-portal/src/components/Notifications/Notifications.css.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/service-portal/src/components/Notifications/NotificationLine.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (2)
libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts (1)
34-37: The changes to thecircleImgclass enhance responsiveness and flexibility. Please ensure to verify the styling across various devices and screen resolutions to confirm that the visual integrity is maintained.apps/service-portal/src/components/Notifications/Notifications.css.ts (1)
12-18: The updates to theimgclass improve responsiveness and should better accommodate different image sizes. Please ensure to verify these changes across various screen sizes to maintain consistency in the visual presentation.
| ariaLabel?: string | ||
| imageClass?: string |
There was a problem hiding this comment.
Tip
Codebase Verification
The ariaLabel and imageClass props are not consistently utilized across all instances of the AvatarImage component. Specifically, the ariaLabel prop is only used in NotificationLine.tsx. To ensure accessibility and customization, please review and update the usage of these props in the following files:
libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsxlibs/service-portal/documents/src/components/DocumentHeader/DocumentHeaderV2.tsxlibs/service-portal/documents/src/components/DocumentHeader/DocumentHeader.tsxlibs/service-portal/documents/src/components/DocumentLine/DocumentLine.tsx
Analysis chain
The addition of ariaLabel and imageClass props enhances accessibility and customization options for the AvatarImage component. Please ensure that these props are being utilized effectively wherever this component is used.
Also applies to: 25-26
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the effective use of `ariaLabel` and `imageClass` props in the `AvatarImage` component.
# Test: Search for the usage of `AvatarImage` component and ensure props are used.
rg --type typescript $'AvatarImage'
Length of output: 69
Script:
#!/bin/bash
# Description: Verify the effective use of `ariaLabel` and `imageClass` props in the `AvatarImage` component.
# Test: Search for the usage of `AvatarImage` component and ensure props are used.
rg --type ts 'AvatarImage'
Length of output: 1576
Script:
#!/bin/bash
# Description: Extract lines where `AvatarImage` is used to verify the usage of `ariaLabel` and `imageClass` props.
# Files where `AvatarImage` is used.
files=(
"libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx"
"libs/service-portal/documents/src/components/DocumentHeader/DocumentHeaderV2.tsx"
"libs/service-portal/documents/src/components/DocumentHeader/DocumentHeader.tsx"
"libs/service-portal/documents/src/components/DocumentLine/DocumentLine.tsx"
"apps/service-portal/src/components/Notifications/NotificationLine.tsx"
)
# Extract lines containing `AvatarImage` usage.
for file in "${files[@]}"; do
echo "File: $file"
rg 'AvatarImage' "$file"
echo
done
Length of output: 2390
Script:
#!/bin/bash
# Description: Extract more context around lines where `AvatarImage` is used to verify the usage of `ariaLabel` and `imageClass` props.
# Files where `AvatarImage` is used.
files=(
"libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx"
"libs/service-portal/documents/src/components/DocumentHeader/DocumentHeaderV2.tsx"
"libs/service-portal/documents/src/components/DocumentHeader/DocumentHeader.tsx"
"libs/service-portal/documents/src/components/DocumentLine/DocumentLine.tsx"
"apps/service-portal/src/components/Notifications/NotificationLine.tsx"
)
# Extract lines containing `AvatarImage` usage with more context.
for file in "${files[@]}"; do
echo "File: $file"
rg -C 3 'AvatarImage' "$file"
echo
done
Length of output: 4184
| ariaLabel="Sender" | ||
| imageClass={styles.img} |
There was a problem hiding this comment.
Tip
Codebase Verification
The NotificationLine component in NotificationMenu.tsx does not currently pass the ariaLabel and imageClass props. To ensure consistency and proper utilization of these props, please update the NotificationLine usage to include them.
apps/service-portal/src/components/Notifications/NotificationMenu.tsx: AddariaLabelandimageClassprops toNotificationLine.
Analysis chain
The usage of ariaLabel and imageClass props in the AvatarImage component within the NotificationLine enhances accessibility and customization. Please ensure that these props are being utilized effectively across all instances where this component is used.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the effective use of `ariaLabel` and `imageClass` props in the `AvatarImage` component within `NotificationLine`.
# Test: Search for the usage of `AvatarImage` component within `NotificationLine` and ensure props are used.
rg --type typescript $'NotificationLine'
Length of output: 74
Script:
#!/bin/bash
# Correcting the file type and re-running the search for `NotificationLine` component usage.
rg --type tsx 'NotificationLine'
Length of output: 60
Script:
#!/bin/bash
# Correcting the file types and re-running the search for `NotificationLine` component usage.
rg --type-add 'ts:*.ts' --type-add 'tsx:*.tsx' --type ts,tsx 'NotificationLine'
Length of output: 110
Script:
#!/bin/bash
# Correcting the file type and re-running the search for `NotificationLine` component usage.
rg --glob '**/*.tsx' 'NotificationLine'
Length of output: 505
Script:
#!/bin/bash
# Reviewing the usage of `NotificationLine` in `NotificationMenu.tsx` to ensure `ariaLabel` and `imageClass` props are passed correctly.
rg --glob 'apps/service-portal/src/components/Notifications/NotificationMenu.tsx' 'NotificationLine'
Length of output: 320
Script:
#!/bin/bash
# Displaying relevant lines in `NotificationMenu.tsx` where `NotificationLine` is used to verify the props passed.
rg --glob 'apps/service-portal/src/components/Notifications/NotificationMenu.tsx' -A 5 'NotificationLine'
Length of output: 1325
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- apps/service-portal/src/components/Notifications/NotificationLine.tsx (1 hunks)
- apps/service-portal/src/components/Notifications/Notifications.css.ts (1 hunks)
- libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts (1 hunks)
- libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx (2 hunks)
Additional context used
Path-based instructions (4)
libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/service-portal/src/components/Notifications/Notifications.css.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/service-portal/src/components/Notifications/NotificationLine.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (4)
libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts (1)
34-37: The changes tocircleImgstyle enhance responsiveness. Ensure this doesn't affect the layout wherecircleImgis used elsewhere.apps/service-portal/src/components/Notifications/Notifications.css.ts (1)
12-18: The newimgstyle enhances flexibility and responsiveness. Verify that this change harmonizes with existing styles and doesn't introduce any visual regressions.libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx (1)
16-17: The addition ofasandimageClassprops enhances the flexibility and reusability of theAvatarImagecomponent. Ensure all usages of this component have been updated to accommodate these new props.Also applies to: 25-62
apps/service-portal/src/components/Notifications/NotificationLine.tsx (1)
54-55: The use ofas="div"andimageClass={styles.img}inAvatarImageis correctly implemented here, aligning with the changes inAvatarImage.tsx. Please verify the visual output to ensure it meets the design expectations.
* Update notification icon styling * Add option to remove button docline
* Update notification icon styling * Add option to remove button docline
* Update notification icon styling * Add option to remove button docline
…15255) * fix(documents-v2): Add download URL to detail document v2 (#15194) * fix(service-portal): Update notification icon styling (#15219) * Update notification icon styling * Add option to remove button docline * fix(service-portal): Notifications - locale updates. Add cleanstring (#15239) * Fix locale updates. Add cleanstring * update string clean * Update packagejson * Update query * Update query * Add lang option * Test * Fix * Add locale * Test name update * fix: force generated files * chore: nx format:write update dirty files * Revert test * Remove ff * fix: hash generated files * fix(j-s): Null Service Reference (#15247) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(native-app): Notifications final improvements (#15240) * feat: buttons at top should not be sticky * feat: add empty state for notifications * fix: make sure to update unreadCount in inbox when fetching next page * feat: add fallback icon for notifications --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(consultation-portal): KAM-2522: PowerBI report added (#15251) * fix: hash generated files (#15253) * fix: hash generated files * chore: nx format:write update dirty files --------- Co-authored-by: andes-it <builders@andes.is> * fix: remove file * Update __config.mjs --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: lommi <jonorn@gmail.com> Co-authored-by: andes-it <builders@andes.is> Co-authored-by: Guðjón Guðjónsson <gudjon@kolibri.is> Co-authored-by: Þórey Jóna <thoreyjona@gmail.com> Co-authored-by: Karl Arnar Ægisson <korsbacka@gmail.com> --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: lommi <jonorn@gmail.com> Co-authored-by: andes-it <builders@andes.is> Co-authored-by: Guðjón Guðjónsson <gudjon@kolibri.is> Co-authored-by: Þórey Jóna <thoreyjona@gmail.com> Co-authored-by: Karl Arnar Ægisson <korsbacka@gmail.com>
What
Fix logo styling for notifications
Why
Looks bad now.
Looks good with this PR ✨
Screenshots / Gifs
Currently 😞
Header
Page
This PR 👍
Header
Page
Checklist:
Summary by CodeRabbit
AvatarImagecomponent to support additional props for customization of element type and CSS classes.