Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cu 86bwch6u6 view weekly schedules page alonzo #1840

Merged
merged 11 commits into from
Jun 15, 2024

Conversation

Al11o
Copy link
Contributor

@Al11o Al11o commented May 25, 2024

First step of the page.
Waiting for :

  • devs instruction about my file structures
  • designers reviews about my integration

Copy link

vercel bot commented May 25, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
organized-app ✅ Ready (Inspect) Visit Preview Jun 6, 2024 9:43am

@rhahao
Copy link
Member

rhahao commented May 25, 2024

Task linked: CU-86bwch6u6 View weekly schedules page

Copy link
Contributor

coderabbitai bot commented May 25, 2024

Walkthrough

The changes introduce new React components for rendering various SVG icons and managing meeting schedules. New icon components like IconFemale, IconLivingPart, and IconTreasuresPart are added with customizable properties. Additionally, several components for managing midweek meeting schedules, including grid layout, headers, and member-related components, are introduced. The index.ts file is updated to export these new icons.

Changes

Files Change Summary
src/v3/components/icons/IconFemale.tsx Added IconFemale component for rendering a female icon with customizable properties.
src/v3/components/icons/IconLivingPart.tsx Added IconLivingPart component for rendering an SVG icon with customizable properties.
src/v3/components/icons/IconTreasuresPart.tsx Added IconTreasuresPart component for rendering an SVG icon representing treasures.
src/v3/components/icons/index.ts Added exports for new icons: IconFemale, IconLivingPart, IconMinistry, IconOutgoindSpeaker, IconService, IconTalker, IconTreasuresPart, IconWatchtowerStudy, and IconWavingHand.
src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx Introduced various components for managing meeting schedules, such as ScheduleGrid, ScheduleHeader, ScheduleItem, ScheduleItemTitle, ScheduleWeekTitle, ScheduleTitle, CopyButton, ScheduleSubtitle, ScheduleDescription, ScheduleMemberClassRoom, ScheduleMembers, and ScheduleMemberRow.
src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx Added MidweekMeeting component for displaying a midweek meeting schedule with sections for songs, prayers, discussions, and associated members and topics.

Sequence Diagram(s) (Beta)

sequenceDiagram
    participant User
    participant MidweekMeeting
    participant ScheduleComponents
    participant IconComponents

    User->>MidweekMeeting: Load midweekMeeting component
    MidweekMeeting->>ScheduleComponents: Render schedule grid, headers, items, etc.
    ScheduleComponents->>IconComponents: Render icons (e.g., IconFemale, IconLivingPart)
    IconComponents-->>ScheduleComponents: Icons rendered
    ScheduleComponents-->>MidweekMeeting: Schedule components rendered
    MidweekMeeting-->>User: Display midweek meeting schedule
Loading

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?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 18

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between b547c7e and 1992678.
Files ignored due to path filters (8)
  • converter/svg/sources/name=icon.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=living.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=ministry.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=outgoind-speaker.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=service.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=talker.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=treasures.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=watchtower-study.svg is excluded by !**/*.svg, !**/*.svg
Files selected for processing (18)
  • src/v3/App.tsx (2 hunks)
  • src/v3/components/icons/IconIcon.tsx (1 hunks)
  • src/v3/components/icons/IconLiving.tsx (1 hunks)
  • src/v3/components/icons/IconMinistry.tsx (1 hunks)
  • src/v3/components/icons/IconOutgoindSpeaker.tsx (1 hunks)
  • src/v3/components/icons/IconService.tsx (1 hunks)
  • src/v3/components/icons/IconTalker.tsx (1 hunks)
  • src/v3/components/icons/IconTreasures.tsx (1 hunks)
  • src/v3/components/icons/IconWatchtowerStudy.tsx (1 hunks)
  • src/v3/components/icons/index.ts (7 hunks)
  • src/v3/pages/meetings/schedules/FemaleCard.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/MaleCard.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/ScheduleComponents.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/SchedulePickerHeader.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/index.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/midweekMeeting.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/outgoingTalks.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/weekendMeeting.tsx (1 hunks)
Files not reviewed due to errors (1)
  • src/v3/pages/meetings/schedules/SchedulePickerHeader.tsx (no review received)
Files skipped from review due to trivial changes (2)
  • src/v3/components/icons/index.ts
  • src/v3/pages/meetings/schedules/ScheduleComponents.tsx
Additional Context Used
Biome (36)
src/v3/components/icons/IconIcon.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconLiving.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconMinistry.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconOutgoindSpeaker.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconService.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconTalker.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconTreasures.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/components/icons/IconWatchtowerStudy.tsx (2)

13-13: Alternative text title element cannot be empty


1-1: Some named imports are only used as types.

src/v3/pages/meetings/schedules/FemaleCard.tsx (1)

3-3: Alternative text title element cannot be empty

src/v3/pages/meetings/schedules/MaleCard.tsx (1)

3-3: Alternative text title element cannot be empty

src/v3/pages/meetings/schedules/SchedulePickerHeader.tsx (2)

34-34: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.


37-37: Template literals are preferred over string concatenation.

src/v3/pages/meetings/schedules/midweekMeeting.tsx (5)

67-67: Template literals are preferred over string concatenation.


87-87: Template literals are preferred over string concatenation.


91-91: Template literals are preferred over string concatenation.


105-105: Template literals are preferred over string concatenation.


115-116: Template literals are preferred over string concatenation.

src/v3/pages/meetings/schedules/outgoingTalks.tsx (7)

53-53: Template literals are preferred over string concatenation.


66-66: Template literals are preferred over string concatenation.


78-78: Template literals are preferred over string concatenation.


91-91: Template literals are preferred over string concatenation.


104-105: Template literals are preferred over string concatenation.


116-117: Template literals are preferred over string concatenation.


128-129: Template literals are preferred over string concatenation.

src/v3/pages/meetings/schedules/weekendMeeting.tsx (4)

39-39: Template literals are preferred over string concatenation.


48-48: Template literals are preferred over string concatenation.


77-78: Template literals are preferred over string concatenation.


87-88: Template literals are preferred over string concatenation.

Additional comments not posted (3)
src/v3/pages/meetings/schedules/index.tsx (1)

11-53: The implementation of WeeklySchedules using lazy-loaded components and tabs is well-done. Good use of translation hooks and responsive styling.

src/v3/components/icons/IconWatchtowerStudy.tsx (1)

1-1: Optimize imports by using type-only imports for types used solely in type annotations.
[REFACTOR_SUGGESTion]

- import { SvgIcon, SxProps, Theme } from '@mui/material';
+ import { SvgIcon } from '@mui/material';
+ import type { SxProps, Theme } from '@mui/material';
src/v3/App.tsx (1)

19-19: The lazy loading and routing setup for WeeklySchedules looks correct and well-implemented.

Also applies to: 39-41

const IconTreasures = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-treasures" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG for better accessibility.

+      <title>Treasures Icon</title>

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <title>Treasures Icon</title>

@@ -0,0 +1,25 @@
import { SvgIcon, SxProps, Theme } from '@mui/material';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optimize imports by using type-only imports for types used solely in type annotations.

- import { SvgIcon, SxProps, Theme } from '@mui/material';
+ import { SvgIcon } from '@mui/material';
+ import type { SxProps, Theme } from '@mui/material';

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
import { SvgIcon, SxProps, Theme } from '@mui/material';
import { SvgIcon } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

<ScheduleDescription>(3 Min.) Job 9:20-35 (th study 11)</ScheduleDescription>
</Box>
<ScheduleMembers>
<ScheduleMemberRow type={t('tr_student') + ':'} name="Jeremiah Green" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use template literals for string concatenation to improve readability and consistency.

- <ScheduleMemberRow type={t('tr_student') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_student')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow female type={t('tr_student') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow female type={`${t('tr_student')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow female type={t('tr_student') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow female type={`${t('tr_student')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow type={t('tr_student') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_student')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow active type={t('tr_prayer') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow active type={`${t('tr_prayer')}:`} name="Jeremiah Green" />

Also applies to: 87-87, 91-91, 105-105, 115-116


Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<ScheduleMemberRow type={t('tr_student') + ':'} name="Jeremiah Green" />
<ScheduleMemberRow type={`${t('tr_student')}:`} name="Jeremiah Green" />

const IconWatchtowerStudy = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-watchtower-study" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG for better accessibility.

+      <title>Watchtower Study Icon</title>

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Watchtower Study Icon</title>

{t('tr_infoOutgoingTalk')}
</span>
</Box>
<Badge text={t('tr_lastUpdated') + ' ' + lastUpdated} color="grey" size="small" filled={false} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use template literals for string concatenation to improve readability and consistency.

- <Badge text={t('tr_lastUpdated') + ' ' + lastUpdated} color="grey" size="small" filled={false} />
+ <Badge text={`${t('tr_lastUpdated')} ${lastUpdated}`} color="grey" size="small" filled={false} />

- <ScheduleMemberRow type={t('tr_speaker') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_speaker')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow type={t('tr_speaker') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_speaker')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow type={t('tr_speaker') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_speaker')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow type={t('tr_speaker') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_speaker')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow type={t('tr_speaker') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_speaker')}:`} name="Jeremiah Green" />

- <ScheduleMemberRow type={t('tr_speaker') + ':'} name="Jeremiah Green" />
+ <ScheduleMemberRow type={`${t('tr_speaker')}:`} name="Jeremiah Green" />

Also applies to: 66-66, 78-78, 91-91, 104-105, 116-117, 128-129


Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<Badge text={t('tr_lastUpdated') + ' ' + lastUpdated} color="grey" size="small" filled={false} />
<Badge text={`${t('tr_lastUpdated')} ${lastUpdated}`} color="grey" size="small" filled={false} />

@@ -0,0 +1,25 @@
import { SvgIcon, SxProps, Theme } from '@mui/material';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optimize imports by using type-only imports for TypeScript types.

- import { SvgIcon, SxProps, Theme } from '@mui/material';
+ import { SvgIcon } from '@mui/material';
+ import type { SxProps, Theme } from '@mui/material';

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
import { SvgIcon, SxProps, Theme } from '@mui/material';
import { SvgIcon } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const IconLiving = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-living" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG for better accessibility.

+ <title>Living Icon</title>
    <SvgIcon id="organized-icon-living" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Living Icon</title>

@@ -0,0 +1,37 @@
import { SvgIcon, SxProps, Theme } from '@mui/material';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optimize imports by using type-only imports for TypeScript types.

- import { SvgIcon, SxProps, Theme } from '@mui/material';
+ import { SvgIcon } from '@mui/material';
+ import type { SxProps, Theme } from '@mui/material;

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
import { SvgIcon, SxProps, Theme } from '@mui/material';
import { SvgIcon } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const IconService = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-service" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG for better accessibility.

+ <title>Service Icon</title>
    <SvgIcon id="organized-icon-service" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Service Icon</title>

const IconMinistry = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-ministry" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG for better accessibility.

+ <title>Ministry Icon</title>
    <SvgIcon id="organized-icon-ministry" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>

Committable suggestion was skipped due low confidence.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 1992678 and d468a83.
Files selected for processing (4)
  • src/v3/App.tsx (2 hunks)
  • src/v3/pages/dashboard/meetings/index.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/ScheduleComponents.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/SchedulePickerHeader.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • src/v3/App.tsx
  • src/v3/pages/meetings/schedules/ScheduleComponents.tsx
Additional Context Used
Biome (2)
src/v3/pages/meetings/schedules/SchedulePickerHeader.tsx (2)

43-43: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.


46-46: Template literals are preferred over string concatenation.

Additional comments not posted (1)
src/v3/pages/dashboard/meetings/index.tsx (1)

23-27: The addition of the path prop to the DashboardMenu component correctly links to the new weekly schedules page.

Verification successful

The new route /weekly-schedules is properly integrated into the application, as evidenced by its presence in both index.tsx and App.tsx.

  • src/v3/pages/dashboard/meetings/index.tsx: The path prop is correctly set to /weekly-schedules.
  • src/v3/App.tsx: The route is defined with { path: '/weekly-schedules', element: <WeeklySchedules /> }.
Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the integration of the new route with the application.

# Test: Search for the usage of the new path in the application. Expect: Proper integration and no broken links.
rg --type typescript $'/weekly-schedules'

Length of output: 75



Script:

#!/bin/bash
# Description: Verify the integration of the new route with the application.

# Test: Search for the usage of the new path in the application. Expect: Proper integration and no broken links.
rg --type ts '/weekly-schedules'

Length of output: 197

},
}}
>
<ScrollableTabs tabs={days}></ScrollableTabs>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSX elements without children should be self-closing.

- <ScrollableTabs tabs={days}></ScrollableTabs>
+ <ScrollableTabs tabs={days} />

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<ScrollableTabs tabs={days}></ScrollableTabs>
<ScrollableTabs tabs={days} />

<ScrollableTabs tabs={days}></ScrollableTabs>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'row', gap: '8px', marginTop: '16px', position: 'relative' }}>
<Badge text={t('tr_lastUpdated') + ' ' + lastUpdated} color="grey" size="small" filled={false} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use template literals for better readability and maintainability.

- <Badge text={t('tr_lastUpdated') + ' ' + lastUpdated} color="grey" size="small" filled={false} />
+ <Badge text={`${t('tr_lastUpdated')} ${lastUpdated}`} color="grey" size="small" filled={false} />

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<Badge text={t('tr_lastUpdated') + ' ' + lastUpdated} color="grey" size="small" filled={false} />
<Badge text={`${t('tr_lastUpdated')} ${lastUpdated}`} color="grey" size="small" filled={false} />

@ux-git
Copy link
Member

ux-git commented May 29, 2024

Design-vice everything looks great so far. Any code comments, @rhahao?

Copy link
Member

@rhahao rhahao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Al11o: thanks for working on this one. About the folder&file structure, could you please move most of the files in pages/meeting/schedules to features/meetings? Generally in the pages folder, we try to keep only the index.tsx file for the page. Other components will be imported from the features folder. Feel free to create folders in the features/meetings folder to move your files.

@rhahao
Copy link
Member

rhahao commented May 29, 2024

@Al11o: additionally, I’ve now included the icon for male and female in the codebase so these icons can be imported like any other icons, so you don’t need to recreate them anymore in this PR. Thanks.

Al11o added 3 commits June 5, 2024 20:24
- Fixed titles and icons
- Added ScheduleItemHeader to midweek meeting
- add multiline props to <Badge /> component to adapt height
- add waving hand icon
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d468a83 and c07b5c3.

Files ignored due to path filters (1)
  • converter/svg/sources/name=waving-hand.svg is excluded by !**/*.svg, !**/*.svg
Files selected for processing (12)
  • src/v3/components/badge/index.tsx (3 hunks)
  • src/v3/components/badge/index.types.ts (1 hunks)
  • src/v3/components/icons/IconWavingHand.tsx (1 hunks)
  • src/v3/components/icons/index.ts (7 hunks)
  • src/v3/features/meetings/weekly_schedules/FemaleCard.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/MaleCard.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/SchedulePickerHeader.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/outgoingTalks.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/weekendMeeting.tsx (1 hunks)
  • src/v3/pages/meetings/schedules/index.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
  • src/v3/components/badge/index.types.ts
Additional context used
Biome
src/v3/components/icons/IconWavingHand.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/features/meetings/weekly_schedules/MaleCard.tsx

[error] 3-3: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/features/meetings/weekly_schedules/FemaleCard.tsx

[error] 3-3: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx

[error] 89-89: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.

Additional comments not posted (29)
src/v3/pages/meetings/schedules/index.tsx (3)

1-9: Imports and lazy loading are correctly implemented.


11-53: The WeeklySchedules component is well-structured with appropriate use of hooks and lazy loading for optimal performance and localization.


29-53: The JSX structure is clean and uses Material-UI components effectively, adhering to best practices for styling and layout in React.

src/v3/features/meetings/weekly_schedules/SchedulePickerHeader.tsx (3)

1-15: Imports and constant array initialization are correctly implemented.


17-87: The SchedulePickerHeader component is well-structured with appropriate use of hooks for localization and a responsive design.


19-87: The JSX structure is clean and effectively uses Material-UI components, with a focus on responsive design.

src/v3/components/icons/IconWavingHand.tsx (1)

1-8: Imports and type definitions are correctly implemented.

src/v3/features/meetings/weekly_schedules/weekendMeeting.tsx (3)

1-16: Imports are correctly implemented.


18-95: The WeekendMeeting component is well-structured with appropriate use of hooks for localization and a complex JSX structure.


26-95: The JSX structure is clean and uses Material-UI components effectively, adhering to best practices for styling and layout in React.

src/v3/features/meetings/weekly_schedules/outgoingTalks.tsx (3)

1-14: Imports are correctly implemented.


16-136: The OutgoingTalks component is well-structured with appropriate use of hooks for localization and a complex JSX structure.


24-136: The JSX structure is clean and uses Material-UI components effectively, adhering to best practices for styling and layout in React.

src/v3/components/badge/index.tsx (3)

Line range hint 1-1: Imports and type definitions are correctly implemented.


Line range hint 1-1: The functional components for displaying badges are well-implemented with customizable properties and conditional rendering.


Line range hint 1-1: The JSX structures for the badge components are clean and effectively use Material-UI components, adhering to best practices for customization and conditional rendering.

src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx (12)

9-22: The ScheduleGrid component is well-implemented with clear structure and appropriate use of grid layout.


24-47: The ScheduleHeader component is effectively structured and utilizes the Material-UI Box component efficiently.


49-69: The ScheduleItem component is correctly implemented with conditional styling and grid layout.


71-83: The ScheduleItemTitle component is simple and effective for its purpose.


85-105: The ScheduleWeekTitle component is responsive and adapts well to different screen sizes.

Tools
Biome

[error] 89-89: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.


107-139: The ScheduleTitle component is well-designed, making good use of CSS counters for optional numbering.


141-164: The CopyButton component is functional and user-friendly, providing immediate feedback through a SnackBar.


166-173: The ScheduleSubtitle component is effectively designed, with an optional feature to copy content.


175-181: The ScheduleDescription component is straightforward and serves its purpose well.


183-213: The ScheduleMemberClassRoom component is well-structured, effectively displaying classroom names and associated members.


215-230: The ScheduleMembers component is well-implemented, managing the layout for multiple members efficiently.


232-292: The ScheduleMemberRow component is versatile, displaying member details effectively with responsive features based on the active state.

src/v3/components/icons/index.ts (1)

Line range hint 1-267: The icon exports in index.ts are correctly implemented and cover a wide range of functionalities.

Comment on lines 19 to 160
</ScheduleItemTitle>
<ScheduleItem>
<ScheduleTitle color="black">
<IconSong />
Song 109 – “Jehovah’s Warm Appeal: “Be Wise, My Son”
</ScheduleTitle>
<ScheduleMembers>
<ScheduleMemberRow type={t('tr_prayer') + ':'} name="Jeremiah Green" />
</ScheduleMembers>
</ScheduleItem>
<ScheduleHeader text={t('tr_treasuresPart')} color="var(--treasures-from-gods-word)" icon={<IconDiamond />} />
<ScheduleItem>
<Box>
<ScheduleTitle color="black">
<IconSong />
Song 109 – “Jehovah’s Warm Appeal: “Be Wise, My Son”
</ScheduleTitle>
</Box>
</ScheduleItem>
<ScheduleItem>
<ScheduleTitle cssCounter color="var(--text-treasures-from-gods-word)">
“God’s Loyal Love Protects Us From Satan’s Lies”
</ScheduleTitle>
<ScheduleMembers>
<ScheduleMemberRow name="Jeremiah Green" />
</ScheduleMembers>
</ScheduleItem>
<ScheduleItem>
<ScheduleTitle cssCounter color="var(--text-treasures-from-gods-word)">
{t('tr_tgwGems')}
</ScheduleTitle>
<ScheduleMembers>
<ScheduleMemberRow name="Jeremiah Green" />
</ScheduleMembers>
</ScheduleItem>
<ScheduleItem>
<Box>
<ScheduleTitle cssCounter color="var(--text-treasures-from-gods-word)">
{t('tr_bibleReading')}
</ScheduleTitle>
<ScheduleDescription>(3 Min.) Job 9:20-35 (th study 11)</ScheduleDescription>
</Box>
<ScheduleMembers>
<ScheduleMemberRow type={t('tr_student') + ':'} name="Jeremiah Green" />
</ScheduleMembers>
</ScheduleItem>
<ScheduleHeader
text={t('tr_applyFieldMinistryPart')}
color="var(--apply-yourself-to-the-field-ministry)"
icon={<IconMinistry />}
/>
<ScheduleItem>
<Box>
<ScheduleTitle cssCounter color="var(--text-apply-yourself-to-the-field-ministry)">
{t('tr_initialCall')}
</ScheduleTitle>
<ScheduleDescription>
(3 Min.) Begin with the sample conversation topic. Offer a publication from the Teaching Toolbox. (th
study 17)
</ScheduleDescription>
</Box>
<ScheduleMembers>
<ScheduleMemberClassRoom classRoomName={t('tr_mainHall')}>
<ScheduleMemberRow female type={t('tr_student') + ':'} name="Jeremiah Green" />
<ScheduleMemberRow female type={t('tr_assistantS89')} name="Jeremiah Green" />
</ScheduleMemberClassRoom>
<ScheduleMemberClassRoom classRoomName={t('tr_auxClassroom')}>
<ScheduleMemberRow female type={t('tr_student') + ':'} name="Jeremiah Green" />
<ScheduleMemberRow female type={t('tr_assistantS89')} name="Jeremiah Green" />
</ScheduleMemberClassRoom>
</ScheduleMembers>
</ScheduleItem>
<ScheduleHeader text={t('tr_livingPart')} color="var(--living-as-christians)" icon={<IconLiving />} />
<ScheduleItem>
<Box>
<ScheduleTitle cssCounter color="var(--text_living-as-christians)">
“Help Nonreligious People Come to Know Their Creator”
</ScheduleTitle>
<ScheduleDescription>(3 Min.) Job 9:20-35 (th study 11)</ScheduleDescription>
</Box>
<ScheduleMembers>
<ScheduleMemberRow type={t('tr_student') + ':'} name="Jeremiah Green" />
</ScheduleMembers>
</ScheduleItem>
<ScheduleItem>
<ScheduleTitle color="black">
<IconSong />
Song 109 – “Jehovah’s Warm Appeal: “Be Wise, My Son”
</ScheduleTitle>

<ScheduleMembers>
<ScheduleMemberRow active type={t('tr_prayer') + ':'} name="Jeremiah Green" />
</ScheduleMembers>
</ScheduleItem>
</ScheduleGrid>
</Box>
);
};

export default MidweekMeeting;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The implementation of MidweekMeeting appears comprehensive and well-structured. However, consider adding PropTypes or TypeScript interfaces to ensure type safety and better maintainability.

return (
<Box
sx={(theme) => ({
['&, & > *']: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simplify the computed expression for better readability.

- ['&, & > *']: {
+ '&, & > *': {
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
['&, & > *']: {
'&, & > *': {
Tools
Biome

[error] 89-89: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.

Comment on lines 1 to 42
const MaleCardSVG = () => {
return (
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_2601_22242)">
<g clipPath="url(#clip1_2601_22242)">
<path
d="M15.5005 37.0997C12.6205 37.5797 10.3005 40.4997 9.50049 41.8997C11.7005 43.6997 17.7805 47.2996 24.5005 47.2996C32.9005 47.2996 38.9005 42.4996 38.9005 41.2996C38.9005 40.0996 35.3005 38.2996 33.5005 37.0997C32.0605 36.1398 28.9005 36.2998 27.5005 36.4997V34.6996C27.3005 34.2997 27.2605 33.3797 28.7005 32.8996C30.1405 32.4195 31.3005 29.0996 31.7005 27.4997L32.9005 26.2996C33.1005 25.8996 33.5005 24.7396 33.5005 23.2996C33.5005 21.8596 32.3005 21.4996 31.7005 21.4996L32.9005 20.2996C33.3005 19.0996 33.9805 16.2196 33.5005 14.2996C33.0205 12.3796 29.3005 12.2996 27.5005 12.4996C26.7005 11.6996 24.6205 9.97973 22.7005 9.49973C20.3005 8.89973 16.7005 10.6997 14.9005 13.6997C13.4605 16.0997 14.3005 19.4997 14.9005 20.8997C15.3005 21.0997 15.9805 21.7397 15.5005 22.6997C14.9005 23.8997 15.5005 26.2997 16.1005 27.4997C16.5805 28.4597 19.5005 31.8997 20.9005 33.4997V36.4997C20.3005 36.4997 18.3805 36.6197 15.5005 37.0997Z"
fill="#FEFEFE"
/>
<path
d="M20.3008 20.8995C18.8608 20.8995 16.5008 21.6995 15.5008 22.0995C15.1008 20.2995 14.3008 16.3395 14.3008 14.8995C14.3008 13.0995 17.9008 9.49951 22.1008 9.49951C25.4608 9.49951 27.1008 11.4995 27.5008 12.4995C27.5008 12.2995 27.7408 11.8995 28.7008 11.8995C29.9008 11.8995 31.1008 11.8995 33.5008 14.8995C35.4208 17.2995 33.5008 19.8995 32.3008 20.8995C32.1008 20.8995 31.5808 20.6595 31.1008 19.6995C30.6208 18.7395 28.5008 17.2995 27.5008 16.6995C25.7008 18.0995 21.7408 20.8995 20.3008 20.8995Z"
fill="#A5B3DD"
/>
<path d="M23.3006 39.4995L22.1006 47.2996H26.9006L25.7006 39.4995H23.3006Z" fill="#566BD0" />
<path
d="M30.1121 35.7874H28.1934V33.7407C29.3053 33.0354 30.2603 32.109 30.999 31.019C31.7378 29.9291 32.2446 28.6989 32.4879 27.4048C33.7995 27.0253 34.589 25.0773 34.589 23.6358C34.6905 22.5528 34.0212 21.5461 32.9835 21.2203C34.7061 19.4315 35.0855 16.739 33.9247 14.5437C32.7639 12.3484 30.3248 11.1463 27.8767 11.5629C24.8766 8.32483 19.8688 7.9961 16.4709 10.8134C13.0729 13.6312 12.469 18.6134 15.0958 22.1609C14.7697 22.4038 14.5097 22.7247 14.3398 23.0941C14.1699 23.4635 14.0954 23.8697 14.1231 24.2754C14.1231 25.7725 14.9722 27.8192 16.3763 28.0834C16.9924 30.425 18.4725 32.4463 20.5187 33.7407V35.7874H18.6C17.1717 35.7857 15.757 36.0657 14.4371 36.6115C13.1171 37.1573 11.9178 37.9581 10.9078 38.968C9.89793 39.978 9.09719 41.1773 8.55147 42.4972C8.00574 43.8171 7.72576 45.2317 7.72755 46.6599C7.72755 47.0131 8.01359 47.2995 8.36711 47.2995H40.345C40.5146 47.2995 40.6773 47.2321 40.7972 47.1121C40.9172 46.9922 40.9845 46.8295 40.9845 46.6599C40.9777 40.6581 36.1138 35.7943 30.1121 35.7874ZM21.7978 36.8536V34.4343C21.8553 34.459 21.9159 34.4746 21.9743 34.498C22.2232 34.6015 22.4765 34.6943 22.7334 34.7762C22.8299 34.8068 22.9252 34.8403 23.0238 34.8659C23.3644 34.965 23.7099 35.0457 24.0591 35.1076L24.2511 35.1388C24.3204 35.151 24.3914 35.151 24.4607 35.1388L24.6527 35.1076C25.0022 35.047 25.3478 34.9677 25.6888 34.8697C25.7867 34.8415 25.8807 34.8103 25.9796 34.7793C26.2379 34.6978 26.4923 34.6047 26.7422 34.5005C26.7984 34.4777 26.8584 34.4624 26.9149 34.4369V36.8517L25.3095 38.9852H23.3967L21.7978 36.8536ZM32.6703 25.7022V22.4551C33.1082 22.6216 33.3099 23.0041 33.3099 23.6358C33.2992 24.3717 33.0772 25.089 32.6703 25.7022ZM21.7978 10.2051C22.8169 10.2047 23.8239 10.4257 24.7492 10.8529C25.6745 11.28 26.4959 11.9031 27.1566 12.679C27.2327 12.7682 27.3319 12.8348 27.4434 12.8714C27.5548 12.9081 27.6742 12.9134 27.7884 12.8867C29.6848 12.4308 31.6585 13.2549 32.6672 14.9247C33.6758 16.5942 33.4872 18.7245 32.2013 20.1914C32.1841 20.1617 32.159 20.1273 32.1413 20.1004C32.0528 19.9536 31.9583 19.8105 31.8581 19.6714C31.8258 19.6265 31.794 19.5824 31.7619 19.5362C31.6145 19.3413 31.4595 19.1523 31.2972 18.9697C31.2619 18.9301 31.2223 18.8891 31.1863 18.8495C31.0322 18.6813 30.8739 18.5171 30.7114 18.357C30.6548 18.3014 30.598 18.2459 30.5393 18.1893C30.3154 17.9735 30.0857 17.7639 29.8504 17.5607C29.231 17.0285 28.583 16.5306 27.9092 16.0692C27.7987 15.9953 27.6678 15.9576 27.5349 15.9615C27.4019 15.9654 27.2735 16.0107 27.1675 16.0911L23.6927 18.7274C22.2641 19.8139 20.5226 20.4095 18.7278 20.4253H18.5775C18.4489 20.4269 18.3209 20.4381 18.1937 20.4587C18.1754 20.4587 18.1578 20.4662 18.1394 20.4699C18.0276 20.4899 17.9171 20.517 17.8087 20.5514L17.7768 20.5626C17.6607 20.6013 17.5475 20.6486 17.4384 20.7041H17.4328C16.9858 20.929 16.6158 21.2816 16.3697 21.7172C14.6365 19.6161 14.2717 16.7034 15.4332 14.2402C16.5948 11.7765 19.0741 10.2048 21.7978 10.2051ZM15.4022 24.2754C15.3707 24.0529 15.4064 23.8261 15.5047 23.6241C15.603 23.422 15.7595 23.2539 15.954 23.1415C15.9834 23.1702 16.0116 23.2002 16.0418 23.2283V25.6442C16.0418 25.893 16.0512 26.1407 16.0706 26.3874C15.6453 25.7642 15.4129 25.0297 15.4022 24.2754ZM17.498 27.3254C17.3793 26.7729 17.32 26.2093 17.3209 25.6442V22.9516C17.324 22.8342 17.3443 22.7183 17.3809 22.6069C17.3874 22.5856 17.3937 22.5641 17.4015 22.5429C17.4412 22.4307 17.4967 22.3247 17.5663 22.2281C17.5735 22.2187 17.5817 22.2103 17.5889 22.2012C17.6621 22.1062 17.7481 22.0219 17.8446 21.9508L17.8521 21.9442C17.9507 21.8754 18.0583 21.8205 18.1719 21.7811C18.19 21.7746 18.2078 21.7696 18.2265 21.764C18.3428 21.7269 18.4639 21.7068 18.586 21.7044H18.7309C20.8174 21.6853 22.8413 20.9896 24.4984 19.7217L27.5685 17.3939C27.9099 17.6406 28.4479 18.0441 29.0163 18.5322C29.177 18.6699 29.3348 18.8109 29.4897 18.9551C30.3145 19.6113 30.9565 20.4687 31.354 21.4449C31.3774 21.5336 31.39 21.6251 31.3912 21.7172V25.6441C31.3925 26.0122 31.3664 26.3798 31.3131 26.744C31.1435 28.0052 30.6875 29.2108 29.9798 30.2684C29.2722 31.326 28.3317 32.2075 27.2306 32.8454C26.3706 33.3476 25.4257 33.6876 24.4429 33.8485L24.356 33.8596L24.2714 33.8463C23.288 33.6799 22.3421 33.3397 21.478 32.8416C20.4635 32.2545 19.5844 31.4595 18.8985 30.5089C18.2126 29.5583 17.7353 28.4734 17.498 27.3254ZM11.8115 39.873C12.7021 38.9807 13.7604 38.2734 14.9255 37.7917C16.0905 37.3101 17.3393 37.0636 18.6 37.0666H20.5187C20.5187 37.2049 20.5634 37.3395 20.6465 37.4503L22.3977 39.7847L21.2573 46.6599L9.02761 46.0204C9.17632 43.7007 10.1661 41.5149 11.8115 39.873ZM22.559 46.6599L23.6116 40.2643H25.103L26.1405 46.6599H22.559ZM27.4434 46.6599L26.3156 39.7847L27.9683 37.578L28.0648 37.4504C28.148 37.3397 28.1932 37.205 28.1934 37.0666H30.1121C35.1595 37.0728 39.3413 40.9845 39.6842 46.0204L27.4434 46.6599Z"
fill="#3B4CA3"
/>
</g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.5 46.5005C36.6503 46.5005 46.5 36.6508 46.5 24.5005C46.5 12.3502 36.6503 2.50049 24.5 2.50049C12.3497 2.50049 2.5 12.3502 2.5 24.5005C2.5 36.6508 12.3497 46.5005 24.5 46.5005ZM24.5 48.5005C37.7549 48.5005 48.5 37.7553 48.5 24.5005C48.5 11.2457 37.7549 0.500488 24.5 0.500488C11.2452 0.500488 0.5 11.2457 0.5 24.5005C0.5 37.7553 11.2452 48.5005 24.5 48.5005Z"
fill="#3B4CA3"
/>
</g>
<defs>
<clipPath id="clip0_2601_22242">
<path
d="M0.5 24.5005C0.5 11.2457 11.2452 0.500488 24.5 0.500488C37.7548 0.500488 48.5 11.2457 48.5 24.5005C48.5 37.7553 37.7548 48.5005 24.5 48.5005C11.2452 48.5005 0.5 37.7553 0.5 24.5005Z"
fill="white"
/>
</clipPath>
<clipPath id="clip1_2601_22242">
<rect width="38.4" height="38.4" fill="white" transform="translate(7.7002 8.90039)" />
</clipPath>
</defs>
</svg>
);
};

export default MaleCardSVG;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG for better accessibility compliance.

3a4,5
>   <title>Male Icon</title>
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
const MaleCardSVG = () => {
return (
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_2601_22242)">
<g clipPath="url(#clip1_2601_22242)">
<path
d="M15.5005 37.0997C12.6205 37.5797 10.3005 40.4997 9.50049 41.8997C11.7005 43.6997 17.7805 47.2996 24.5005 47.2996C32.9005 47.2996 38.9005 42.4996 38.9005 41.2996C38.9005 40.0996 35.3005 38.2996 33.5005 37.0997C32.0605 36.1398 28.9005 36.2998 27.5005 36.4997V34.6996C27.3005 34.2997 27.2605 33.3797 28.7005 32.8996C30.1405 32.4195 31.3005 29.0996 31.7005 27.4997L32.9005 26.2996C33.1005 25.8996 33.5005 24.7396 33.5005 23.2996C33.5005 21.8596 32.3005 21.4996 31.7005 21.4996L32.9005 20.2996C33.3005 19.0996 33.9805 16.2196 33.5005 14.2996C33.0205 12.3796 29.3005 12.2996 27.5005 12.4996C26.7005 11.6996 24.6205 9.97973 22.7005 9.49973C20.3005 8.89973 16.7005 10.6997 14.9005 13.6997C13.4605 16.0997 14.3005 19.4997 14.9005 20.8997C15.3005 21.0997 15.9805 21.7397 15.5005 22.6997C14.9005 23.8997 15.5005 26.2997 16.1005 27.4997C16.5805 28.4597 19.5005 31.8997 20.9005 33.4997V36.4997C20.3005 36.4997 18.3805 36.6197 15.5005 37.0997Z"
fill="#FEFEFE"
/>
<path
d="M20.3008 20.8995C18.8608 20.8995 16.5008 21.6995 15.5008 22.0995C15.1008 20.2995 14.3008 16.3395 14.3008 14.8995C14.3008 13.0995 17.9008 9.49951 22.1008 9.49951C25.4608 9.49951 27.1008 11.4995 27.5008 12.4995C27.5008 12.2995 27.7408 11.8995 28.7008 11.8995C29.9008 11.8995 31.1008 11.8995 33.5008 14.8995C35.4208 17.2995 33.5008 19.8995 32.3008 20.8995C32.1008 20.8995 31.5808 20.6595 31.1008 19.6995C30.6208 18.7395 28.5008 17.2995 27.5008 16.6995C25.7008 18.0995 21.7408 20.8995 20.3008 20.8995Z"
fill="#A5B3DD"
/>
<path d="M23.3006 39.4995L22.1006 47.2996H26.9006L25.7006 39.4995H23.3006Z" fill="#566BD0" />
<path
d="M30.1121 35.7874H28.1934V33.7407C29.3053 33.0354 30.2603 32.109 30.999 31.019C31.7378 29.9291 32.2446 28.6989 32.4879 27.4048C33.7995 27.0253 34.589 25.0773 34.589 23.6358C34.6905 22.5528 34.0212 21.5461 32.9835 21.2203C34.7061 19.4315 35.0855 16.739 33.9247 14.5437C32.7639 12.3484 30.3248 11.1463 27.8767 11.5629C24.8766 8.32483 19.8688 7.9961 16.4709 10.8134C13.0729 13.6312 12.469 18.6134 15.0958 22.1609C14.7697 22.4038 14.5097 22.7247 14.3398 23.0941C14.1699 23.4635 14.0954 23.8697 14.1231 24.2754C14.1231 25.7725 14.9722 27.8192 16.3763 28.0834C16.9924 30.425 18.4725 32.4463 20.5187 33.7407V35.7874H18.6C17.1717 35.7857 15.757 36.0657 14.4371 36.6115C13.1171 37.1573 11.9178 37.9581 10.9078 38.968C9.89793 39.978 9.09719 41.1773 8.55147 42.4972C8.00574 43.8171 7.72576 45.2317 7.72755 46.6599C7.72755 47.0131 8.01359 47.2995 8.36711 47.2995H40.345C40.5146 47.2995 40.6773 47.2321 40.7972 47.1121C40.9172 46.9922 40.9845 46.8295 40.9845 46.6599C40.9777 40.6581 36.1138 35.7943 30.1121 35.7874ZM21.7978 36.8536V34.4343C21.8553 34.459 21.9159 34.4746 21.9743 34.498C22.2232 34.6015 22.4765 34.6943 22.7334 34.7762C22.8299 34.8068 22.9252 34.8403 23.0238 34.8659C23.3644 34.965 23.7099 35.0457 24.0591 35.1076L24.2511 35.1388C24.3204 35.151 24.3914 35.151 24.4607 35.1388L24.6527 35.1076C25.0022 35.047 25.3478 34.9677 25.6888 34.8697C25.7867 34.8415 25.8807 34.8103 25.9796 34.7793C26.2379 34.6978 26.4923 34.6047 26.7422 34.5005C26.7984 34.4777 26.8584 34.4624 26.9149 34.4369V36.8517L25.3095 38.9852H23.3967L21.7978 36.8536ZM32.6703 25.7022V22.4551C33.1082 22.6216 33.3099 23.0041 33.3099 23.6358C33.2992 24.3717 33.0772 25.089 32.6703 25.7022ZM21.7978 10.2051C22.8169 10.2047 23.8239 10.4257 24.7492 10.8529C25.6745 11.28 26.4959 11.9031 27.1566 12.679C27.2327 12.7682 27.3319 12.8348 27.4434 12.8714C27.5548 12.9081 27.6742 12.9134 27.7884 12.8867C29.6848 12.4308 31.6585 13.2549 32.6672 14.9247C33.6758 16.5942 33.4872 18.7245 32.2013 20.1914C32.1841 20.1617 32.159 20.1273 32.1413 20.1004C32.0528 19.9536 31.9583 19.8105 31.8581 19.6714C31.8258 19.6265 31.794 19.5824 31.7619 19.5362C31.6145 19.3413 31.4595 19.1523 31.2972 18.9697C31.2619 18.9301 31.2223 18.8891 31.1863 18.8495C31.0322 18.6813 30.8739 18.5171 30.7114 18.357C30.6548 18.3014 30.598 18.2459 30.5393 18.1893C30.3154 17.9735 30.0857 17.7639 29.8504 17.5607C29.231 17.0285 28.583 16.5306 27.9092 16.0692C27.7987 15.9953 27.6678 15.9576 27.5349 15.9615C27.4019 15.9654 27.2735 16.0107 27.1675 16.0911L23.6927 18.7274C22.2641 19.8139 20.5226 20.4095 18.7278 20.4253H18.5775C18.4489 20.4269 18.3209 20.4381 18.1937 20.4587C18.1754 20.4587 18.1578 20.4662 18.1394 20.4699C18.0276 20.4899 17.9171 20.517 17.8087 20.5514L17.7768 20.5626C17.6607 20.6013 17.5475 20.6486 17.4384 20.7041H17.4328C16.9858 20.929 16.6158 21.2816 16.3697 21.7172C14.6365 19.6161 14.2717 16.7034 15.4332 14.2402C16.5948 11.7765 19.0741 10.2048 21.7978 10.2051ZM15.4022 24.2754C15.3707 24.0529 15.4064 23.8261 15.5047 23.6241C15.603 23.422 15.7595 23.2539 15.954 23.1415C15.9834 23.1702 16.0116 23.2002 16.0418 23.2283V25.6442C16.0418 25.893 16.0512 26.1407 16.0706 26.3874C15.6453 25.7642 15.4129 25.0297 15.4022 24.2754ZM17.498 27.3254C17.3793 26.7729 17.32 26.2093 17.3209 25.6442V22.9516C17.324 22.8342 17.3443 22.7183 17.3809 22.6069C17.3874 22.5856 17.3937 22.5641 17.4015 22.5429C17.4412 22.4307 17.4967 22.3247 17.5663 22.2281C17.5735 22.2187 17.5817 22.2103 17.5889 22.2012C17.6621 22.1062 17.7481 22.0219 17.8446 21.9508L17.8521 21.9442C17.9507 21.8754 18.0583 21.8205 18.1719 21.7811C18.19 21.7746 18.2078 21.7696 18.2265 21.764C18.3428 21.7269 18.4639 21.7068 18.586 21.7044H18.7309C20.8174 21.6853 22.8413 20.9896 24.4984 19.7217L27.5685 17.3939C27.9099 17.6406 28.4479 18.0441 29.0163 18.5322C29.177 18.6699 29.3348 18.8109 29.4897 18.9551C30.3145 19.6113 30.9565 20.4687 31.354 21.4449C31.3774 21.5336 31.39 21.6251 31.3912 21.7172V25.6441C31.3925 26.0122 31.3664 26.3798 31.3131 26.744C31.1435 28.0052 30.6875 29.2108 29.9798 30.2684C29.2722 31.326 28.3317 32.2075 27.2306 32.8454C26.3706 33.3476 25.4257 33.6876 24.4429 33.8485L24.356 33.8596L24.2714 33.8463C23.288 33.6799 22.3421 33.3397 21.478 32.8416C20.4635 32.2545 19.5844 31.4595 18.8985 30.5089C18.2126 29.5583 17.7353 28.4734 17.498 27.3254ZM11.8115 39.873C12.7021 38.9807 13.7604 38.2734 14.9255 37.7917C16.0905 37.3101 17.3393 37.0636 18.6 37.0666H20.5187C20.5187 37.2049 20.5634 37.3395 20.6465 37.4503L22.3977 39.7847L21.2573 46.6599L9.02761 46.0204C9.17632 43.7007 10.1661 41.5149 11.8115 39.873ZM22.559 46.6599L23.6116 40.2643H25.103L26.1405 46.6599H22.559ZM27.4434 46.6599L26.3156 39.7847L27.9683 37.578L28.0648 37.4504C28.148 37.3397 28.1932 37.205 28.1934 37.0666H30.1121C35.1595 37.0728 39.3413 40.9845 39.6842 46.0204L27.4434 46.6599Z"
fill="#3B4CA3"
/>
</g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.5 46.5005C36.6503 46.5005 46.5 36.6508 46.5 24.5005C46.5 12.3502 36.6503 2.50049 24.5 2.50049C12.3497 2.50049 2.5 12.3502 2.5 24.5005C2.5 36.6508 12.3497 46.5005 24.5 46.5005ZM24.5 48.5005C37.7549 48.5005 48.5 37.7553 48.5 24.5005C48.5 11.2457 37.7549 0.500488 24.5 0.500488C11.2452 0.500488 0.5 11.2457 0.5 24.5005C0.5 37.7553 11.2452 48.5005 24.5 48.5005Z"
fill="#3B4CA3"
/>
</g>
<defs>
<clipPath id="clip0_2601_22242">
<path
d="M0.5 24.5005C0.5 11.2457 11.2452 0.500488 24.5 0.500488C37.7548 0.500488 48.5 11.2457 48.5 24.5005C48.5 37.7553 37.7548 48.5005 24.5 48.5005C11.2452 48.5005 0.5 37.7553 0.5 24.5005Z"
fill="white"
/>
</clipPath>
<clipPath id="clip1_2601_22242">
<rect width="38.4" height="38.4" fill="white" transform="translate(7.7002 8.90039)" />
</clipPath>
</defs>
</svg>
);
};
export default MaleCardSVG;
Tools
Biome

[error] 3-3: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

Comment on lines +10 to +36
const IconWavingHand = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-waving-hand" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask
id="mask0_11367_211115"
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="16"
height="17"
>
<rect y="0.6875" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_11367_211115)">
<path
d="M7.31407 8.43081L11.7871 3.95134C11.8905 3.84792 12.0076 3.79621 12.1384 3.79621C12.2692 3.79621 12.3863 3.84792 12.4897 3.95134C12.5931 4.05475 12.6448 4.17184 12.6448 4.30261C12.6448 4.43337 12.5931 4.55046 12.4897 4.65387L8.02687 9.12694L7.31407 8.43081ZM8.91278 10.0231L12.9089 6.01671C13.0123 5.9133 13.1311 5.86159 13.2653 5.86159C13.3995 5.86159 13.5183 5.9133 13.6217 6.01671C13.7251 6.12013 13.7769 6.23893 13.7769 6.37311C13.7769 6.5073 13.7251 6.6261 13.6217 6.72952L9.61917 10.7257L8.91278 10.0231ZM3.65765 13.0167C2.70637 12.0654 2.2318 10.9235 2.23393 9.59106C2.23608 8.25859 2.71492 7.11458 3.67047 6.15902L5.6256 4.20389L6.44867 5.03337C6.54781 5.13252 6.6273 5.23872 6.68713 5.35197C6.74696 5.46522 6.7961 5.58552 6.83457 5.71287L9.27558 3.26159C9.37901 3.15818 9.49781 3.10647 9.63198 3.10647C9.76617 3.10647 9.88497 3.15818 9.98838 3.26159C10.0918 3.36501 10.1435 3.48381 10.1435 3.61799C10.1435 3.75218 10.0918 3.87098 9.98838 3.97439L7.09865 6.86414L5.86788 8.09106L6.19097 8.41412C6.65934 8.8825 6.8867 9.44447 6.87302 10.1C6.85934 10.7556 6.6149 11.3209 6.13968 11.7962L6.07558 11.8603L5.36918 11.1577L5.42688 11.0936C5.70381 10.8167 5.85082 10.4872 5.86792 10.1051C5.88501 9.72308 5.75509 9.3936 5.47817 9.11667L4.87433 8.52311C4.75382 8.40258 4.69357 8.25921 4.69357 8.09297C4.69357 7.92674 4.75382 7.78337 4.87433 7.66286L5.72177 6.83209C5.87647 6.67739 5.95382 6.49128 5.95382 6.27376C5.95382 6.05622 5.87647 5.87011 5.72177 5.71541L5.6256 5.61924L4.37302 6.86542C3.6132 7.62524 3.23008 8.53336 3.22367 9.58977C3.21726 10.6462 3.59396 11.5543 4.35378 12.3141C5.11362 13.074 6.02666 13.4539 7.0929 13.4539C8.15913 13.4539 9.07217 13.074 9.832 12.3141L13.5974 8.53851C13.7008 8.4351 13.8196 8.38339 13.9538 8.38339C14.088 8.38339 14.2068 8.4351 14.3102 8.53851C14.4136 8.64193 14.4653 8.76073 14.4653 8.89491C14.4653 9.0291 14.4136 9.1479 14.3102 9.25131L10.5281 13.0167C9.57258 13.9722 8.4275 14.45 7.0929 14.45C5.75829 14.45 4.61321 13.9722 3.65765 13.0167ZM11.0897 15.6205L11.0833 14.6103C11.8679 14.6103 12.5373 14.3331 13.0916 13.7789C13.6459 13.2246 13.923 12.5551 13.923 11.7705L14.9333 11.7769C14.9333 12.841 14.5587 13.7476 13.8095 14.4968C13.0604 15.2459 12.1538 15.6205 11.0897 15.6205ZM1.06665 5.59747C1.06665 4.53338 1.44122 3.62677 2.19037 2.87762C2.93951 2.12848 3.84613 1.75391 4.91022 1.75391L4.91663 2.76414C4.13201 2.76414 3.46257 3.04128 2.9083 3.59556C2.35402 4.14982 2.07688 4.81927 2.07688 5.60389L1.06665 5.59747Z"
fill={color}
/>
</g>
</svg>
</SvgIcon>
);
};

export default IconWavingHand;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a title element to the SVG for accessibility.

+ <title>Waving Hand Icon</title>
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
const IconWavingHand = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-waving-hand" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask
id="mask0_11367_211115"
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="16"
height="17"
>
<rect y="0.6875" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_11367_211115)">
<path
d="M7.31407 8.43081L11.7871 3.95134C11.8905 3.84792 12.0076 3.79621 12.1384 3.79621C12.2692 3.79621 12.3863 3.84792 12.4897 3.95134C12.5931 4.05475 12.6448 4.17184 12.6448 4.30261C12.6448 4.43337 12.5931 4.55046 12.4897 4.65387L8.02687 9.12694L7.31407 8.43081ZM8.91278 10.0231L12.9089 6.01671C13.0123 5.9133 13.1311 5.86159 13.2653 5.86159C13.3995 5.86159 13.5183 5.9133 13.6217 6.01671C13.7251 6.12013 13.7769 6.23893 13.7769 6.37311C13.7769 6.5073 13.7251 6.6261 13.6217 6.72952L9.61917 10.7257L8.91278 10.0231ZM3.65765 13.0167C2.70637 12.0654 2.2318 10.9235 2.23393 9.59106C2.23608 8.25859 2.71492 7.11458 3.67047 6.15902L5.6256 4.20389L6.44867 5.03337C6.54781 5.13252 6.6273 5.23872 6.68713 5.35197C6.74696 5.46522 6.7961 5.58552 6.83457 5.71287L9.27558 3.26159C9.37901 3.15818 9.49781 3.10647 9.63198 3.10647C9.76617 3.10647 9.88497 3.15818 9.98838 3.26159C10.0918 3.36501 10.1435 3.48381 10.1435 3.61799C10.1435 3.75218 10.0918 3.87098 9.98838 3.97439L7.09865 6.86414L5.86788 8.09106L6.19097 8.41412C6.65934 8.8825 6.8867 9.44447 6.87302 10.1C6.85934 10.7556 6.6149 11.3209 6.13968 11.7962L6.07558 11.8603L5.36918 11.1577L5.42688 11.0936C5.70381 10.8167 5.85082 10.4872 5.86792 10.1051C5.88501 9.72308 5.75509 9.3936 5.47817 9.11667L4.87433 8.52311C4.75382 8.40258 4.69357 8.25921 4.69357 8.09297C4.69357 7.92674 4.75382 7.78337 4.87433 7.66286L5.72177 6.83209C5.87647 6.67739 5.95382 6.49128 5.95382 6.27376C5.95382 6.05622 5.87647 5.87011 5.72177 5.71541L5.6256 5.61924L4.37302 6.86542C3.6132 7.62524 3.23008 8.53336 3.22367 9.58977C3.21726 10.6462 3.59396 11.5543 4.35378 12.3141C5.11362 13.074 6.02666 13.4539 7.0929 13.4539C8.15913 13.4539 9.07217 13.074 9.832 12.3141L13.5974 8.53851C13.7008 8.4351 13.8196 8.38339 13.9538 8.38339C14.088 8.38339 14.2068 8.4351 14.3102 8.53851C14.4136 8.64193 14.4653 8.76073 14.4653 8.89491C14.4653 9.0291 14.4136 9.1479 14.3102 9.25131L10.5281 13.0167C9.57258 13.9722 8.4275 14.45 7.0929 14.45C5.75829 14.45 4.61321 13.9722 3.65765 13.0167ZM11.0897 15.6205L11.0833 14.6103C11.8679 14.6103 12.5373 14.3331 13.0916 13.7789C13.6459 13.2246 13.923 12.5551 13.923 11.7705L14.9333 11.7769C14.9333 12.841 14.5587 13.7476 13.8095 14.4968C13.0604 15.2459 12.1538 15.6205 11.0897 15.6205ZM1.06665 5.59747C1.06665 4.53338 1.44122 3.62677 2.19037 2.87762C2.93951 2.12848 3.84613 1.75391 4.91022 1.75391L4.91663 2.76414C4.13201 2.76414 3.46257 3.04128 2.9083 3.59556C2.35402 4.14982 2.07688 4.81927 2.07688 5.60389L1.06665 5.59747Z"
fill={color}
/>
</g>
</svg>
</SvgIcon>
);
};
export default IconWavingHand;
const IconWavingHand = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-waving-hand" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Waving Hand Icon</title>
<mask
id="mask0_11367_211115"
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="16"
height="17"
>
<rect y="0.6875" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_11367_211115)">
<path
d="M7.31407 8.43081L11.7871 3.95134C11.8905 3.84792 12.0076 3.79621 12.1384 3.79621C12.2692 3.79621 12.3863 3.84792 12.4897 3.95134C12.5931 4.05475 12.6448 4.17184 12.6448 4.30261C12.6448 4.43337 12.5931 4.55046 12.4897 4.65387L8.02687 9.12694L7.31407 8.43081ZM8.91278 10.0231L12.9089 6.01671C13.0123 5.9133 13.1311 5.86159 13.2653 5.86159C13.3995 5.86159 13.5183 5.9133 13.6217 6.01671C13.7251 6.12013 13.7769 6.23893 13.7769 6.37311C13.7769 6.5073 13.7251 6.6261 13.6217 6.72952L9.61917 10.7257L8.91278 10.0231ZM3.65765 13.0167C2.70637 12.0654 2.2318 10.9235 2.23393 9.59106C2.23608 8.25859 2.71492 7.11458 3.67047 6.15902L5.6256 4.20389L6.44867 5.03337C6.54781 5.13252 6.6273 5.23872 6.68713 5.35197C6.74696 5.46522 6.7961 5.58552 6.83457 5.71287L9.27558 3.26159C9.37901 3.15818 9.49781 3.10647 9.63198 3.10647C9.76617 3.10647 9.88497 3.15818 9.98838 3.26159C10.0918 3.36501 10.1435 3.48381 10.1435 3.61799C10.1435 3.75218 10.0918 3.87098 9.98838 3.97439L7.09865 6.86414L5.86788 8.09106L6.19097 8.41412C6.65934 8.8825 6.8867 9.44447 6.87302 10.1C6.85934 10.7556 6.6149 11.3209 6.13968 11.7962L6.07558 11.8603L5.36918 11.1577L5.42688 11.0936C5.70381 10.8167 5.85082 10.4872 5.86792 10.1051C5.88501 9.72308 5.75509 9.3936 5.47817 9.11667L4.87433 8.52311C4.75382 8.40258 4.69357 8.25921 4.69357 8.09297C4.69357 7.92674 4.75382 7.78337 4.87433 7.66286L5.72177 6.83209C5.87647 6.67739 5.95382 6.49128 5.95382 6.27376C5.95382 6.05622 5.87647 5.87011 5.72177 5.71541L5.6256 5.61924L4.37302 6.86542C3.6132 7.62524 3.23008 8.53336 3.22367 9.58977C3.21726 10.6462 3.59396 11.5543 4.35378 12.3141C5.11362 13.074 6.02666 13.4539 7.0929 13.4539C8.15913 13.4539 9.07217 13.074 9.832 12.3141L13.5974 8.53851C13.7008 8.4351 13.8196 8.38339 13.9538 8.38339C14.088 8.38339 14.2068 8.4351 14.3102 8.53851C14.4136 8.64193 14.4653 8.76073 14.4653 8.89491C14.4653 9.0291 14.4136 9.1479 14.3102 9.25131L10.5281 13.0167C9.57258 13.9722 8.4275 14.45 7.0929 14.45C5.75829 14.45 4.61321 13.9722 3.65765 13.0167ZM11.0897 15.6205L11.0833 14.6103C11.8679 14.6103 12.5373 14.3331 13.0916 13.7789C13.6459 13.2246 13.923 12.5551 13.923 11.7705L14.9333 11.7769C14.9333 12.841 14.5587 13.7476 13.8095 14.4968C13.0604 15.2459 12.1538 15.6205 11.0897 15.6205ZM1.06665 5.59747C1.06665 4.53338 1.44122 3.62677 2.19037 2.87762C2.93951 2.12848 3.84613 1.75391 4.91022 1.75391L4.91663 2.76414C4.13201 2.76414 3.46257 3.04128 2.9083 3.59556C2.35402 4.14982 2.07688 4.81927 2.07688 5.60389L1.06665 5.59747Z"
fill={color}
/>
</g>
</svg>
</SvgIcon>
);
};
export default IconWavingHand;
Tools
Biome

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

Comment on lines 1 to 48
const FemaleCardSVG = () => {
return (
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_2601_22257)">
<path
d="M14.8992 34.7011C10.5792 35.6611 9.89921 40.3011 10.0992 42.5011C12.6991 43.9012 19.3388 46.8213 25.0988 47.3013C30.8588 47.7813 36.2988 44.7013 38.2988 43.1013V39.5013C38.2988 37.1013 35.2988 35.9013 34.0988 34.7011C33.1388 33.741 29.6988 33.1012 28.0988 32.9013C27.6988 32.1013 27.1388 30.2613 28.0988 29.3013C29.0588 28.3413 30.0988 26.5013 30.4988 25.7013V19.1011C29.8988 18.3012 28.6988 16.8213 28.6988 17.3013C28.6988 17.7813 27.0988 19.1013 26.2988 19.7013C26.0988 19.5013 25.8188 18.8613 26.2988 17.9013C26.7788 16.9413 26.0988 15.9012 25.6988 15.5012C25.6988 15.1012 25.4588 14.6612 24.4988 16.1012C23.5388 17.5412 20.0988 18.7011 18.4988 19.1011V23.3011C18.4988 27.1411 20.0988 29.3011 20.8988 29.9011V32.3011C20.699 32.7011 19.2192 33.7411 14.8992 34.7011Z"
fill="#FEFEFE"
/>
<path
d="M14.2988 28.1014C14.2988 30.5014 15.8988 32.7014 16.6988 33.5014C19.5788 33.0216 20.6988 32.5013 20.8988 32.3012V29.9012C20.2988 29.3012 18.9788 27.6212 18.4988 25.7012C18.0188 23.7812 18.2988 20.5012 18.4988 19.1012C19.4988 18.7012 21.8588 17.7812 23.2988 17.3012C25.0988 16.7012 25.0988 14.9012 25.6988 16.1012C26.2988 17.3012 25.6988 19.7012 26.2988 19.7012C26.7788 19.7012 28.0988 18.1012 28.6988 17.3012L29.8988 18.5012C30.0988 18.5012 30.4988 19.4612 30.4988 23.3012C30.4988 27.1412 28.8988 28.9012 28.0988 29.3012V32.9012L32.2988 33.5012C32.8988 32.7012 34.2188 30.7412 34.6988 29.3012C35.1788 27.8612 34.8988 21.1012 34.6988 17.9012C34.4988 14.9013 32.2988 8.78141 25.0988 8.30141C17.8988 7.82141 14.8988 14.1014 14.2988 17.3014V28.1014Z"
fill="#FAA4BE"
/>
<path
d="M20.8989 39.5009L22.6989 46.7009H26.8989L28.0989 38.9009C27.4989 39.3009 25.8189 40.1009 23.8989 40.1009C21.9789 40.1009 21.0989 39.7009 20.8989 39.5009Z"
fill="#FFB7D9"
/>
<path
d="M29.2988 32.9009L26.2988 47.3009C30.6188 46.8209 36.4988 43.9009 38.8988 42.5009C38.4988 40.9009 37.4588 37.3409 36.4988 35.9009C35.5388 34.4609 31.2988 33.3009 29.2988 32.9009Z"
fill="#F0B0C7"
/>
<path
d="M19.6987 32.9009L22.6987 47.3009C18.3787 46.8209 12.4987 43.9009 10.0987 42.5009C10.4987 40.9009 11.5387 37.3409 12.4987 35.9009C13.4587 34.4609 17.6987 33.3009 19.6987 32.9009Z"
fill="#F0B0C7"
/>
<path
d="M33.0242 33.4336C33.7427 32.7436 34.3145 31.9156 34.7054 30.9993C35.0963 30.083 35.2981 29.0973 35.2989 28.1011V18.6511C35.2989 15.7867 34.1611 13.0397 32.1357 11.0143C30.1103 8.98893 27.3633 7.85107 24.4989 7.85107C21.6346 7.85107 18.8876 8.98893 16.8622 11.0143C14.8368 13.0397 13.6989 15.7867 13.6989 18.6511V28.1011C13.6997 29.0973 13.9016 30.083 14.2925 30.9993C14.6833 31.9156 15.2552 32.7436 15.9737 33.4336C14.1491 33.9606 12.5453 35.0667 11.4045 36.5851C10.2636 38.1034 9.64741 39.9516 9.64893 41.8508V47.6761C9.64893 47.8551 9.72004 48.0268 9.84663 48.1534C9.97322 48.28 10.1449 48.3511 10.3239 48.3511H38.6739C38.8529 48.3511 39.0246 48.28 39.1512 48.1534C39.2778 48.0268 39.3489 47.8551 39.3489 47.6761V41.8508C39.3504 39.9516 38.7343 38.1034 37.5934 36.5851C36.4525 35.0667 34.8488 33.9606 33.0242 33.4336ZM15.0489 28.1011V18.6511C15.0516 16.1456 16.0481 13.7435 17.8197 11.9719C19.5914 10.2002 21.9935 9.20375 24.4989 9.20107C27.0034 9.20696 29.4036 10.2045 31.1746 11.9754C32.9455 13.7464 33.943 16.1466 33.9489 18.6511V28.1011C33.9481 29.0617 33.7188 30.0083 33.2798 30.8628C32.8408 31.7172 32.2049 32.455 31.4244 33.0151L28.5489 32.2996V30.1126C29.3925 29.416 30.0718 28.5417 30.5386 27.5523C31.0053 26.5628 31.2478 25.4826 31.2489 24.3886V18.6511C31.2489 18.4721 31.1778 18.3004 31.0512 18.1738C30.9246 18.0472 30.753 17.9761 30.5739 17.9761C30.2167 17.9734 29.8749 17.8303 29.6223 17.5777C29.3697 17.3251 29.2266 16.9833 29.2239 16.6261C29.2239 16.4471 29.1528 16.2754 29.0262 16.1488C28.8996 16.0222 28.7279 15.9511 28.5489 15.9511C28.3699 15.9511 28.1982 16.0222 28.0716 16.1488C27.945 16.2754 27.8739 16.4471 27.8739 16.6261C27.8765 17.0017 27.7734 17.3704 27.5765 17.6903C27.3795 18.0101 27.0967 18.2682 26.7602 18.4351C26.9444 17.3164 26.8541 16.1698 26.4969 15.0938C26.4654 14.9802 26.4046 14.8769 26.3207 14.794C26.2367 14.7112 26.1326 14.6518 26.0185 14.6218C25.9045 14.5918 25.7846 14.5921 25.6708 14.6228C25.5569 14.6535 25.4531 14.7135 25.3697 14.7968C23.3177 16.8488 21.4344 17.3281 18.2822 17.9896C18.131 18.0221 17.9955 18.1055 17.8984 18.2259C17.8013 18.3463 17.7486 18.4964 17.7489 18.6511V24.3886C17.75 25.4826 17.9926 26.5628 18.4593 27.5523C18.926 28.5417 19.6054 29.416 20.4489 30.1126V32.2996L17.5734 33.0151C16.793 32.455 16.157 31.7172 15.7181 30.8628C15.2791 30.0083 15.0497 29.0617 15.0489 28.1011ZM28.2249 33.6091L28.3802 33.6496L27.4487 38.7931C26.5443 39.2882 25.5299 39.5477 24.4989 39.5477C23.4679 39.5477 22.4535 39.2882 21.5492 38.7931L20.6177 33.6496L20.7729 33.6091C21.0662 33.5378 21.3269 33.3698 21.513 33.1323C21.6992 32.8947 21.7999 32.6014 21.7989 32.2996V30.9968C21.9204 31.0576 22.0352 31.1183 22.1567 31.1723L22.5819 31.3613C23.1857 31.6284 23.8387 31.7663 24.4989 31.7663C25.1592 31.7663 25.8121 31.6284 26.4159 31.3613L26.8412 31.1723C26.9627 31.1183 27.0774 31.0576 27.1989 30.9968V32.2996C27.198 32.6014 27.2987 32.8947 27.4848 33.1323C27.671 33.3698 27.9317 33.5378 28.2249 33.6091ZM26.2944 29.9438L25.8692 30.1261C25.4383 30.3196 24.9713 30.4197 24.4989 30.4197C24.0266 30.4197 23.5596 30.3196 23.1287 30.1261L22.7034 29.9438C21.6313 29.4635 20.7207 28.6837 20.0813 27.6982C19.4418 26.7127 19.1007 25.5634 19.0989 24.3886V19.1978C21.4007 18.7051 23.4527 18.1853 25.4507 16.5451C25.5663 17.4074 25.4832 18.2848 25.2077 19.1101C25.1742 19.2116 25.1653 19.3196 25.1817 19.4252C25.1982 19.5308 25.2395 19.631 25.3022 19.7176C25.3636 19.8055 25.4454 19.8772 25.5407 19.9266C25.6359 19.976 25.7417 20.0015 25.8489 20.0011C26.7454 19.9999 27.6048 19.6431 28.2384 19.0088C28.3901 18.859 28.5258 18.6939 28.6434 18.5161L28.6637 18.5363C29.0056 18.8761 29.432 19.1184 29.8989 19.2383V24.3886C29.8972 25.5634 29.556 26.7127 28.9166 27.6982C28.2771 28.6837 27.3666 29.4635 26.2944 29.9438ZM10.9989 47.0011V41.8508C10.9966 40.1947 11.5491 38.5855 12.5683 37.28C13.5874 35.9746 15.0145 35.0482 16.6217 34.6486L18.0729 34.2841L15.8252 37.8683C15.7642 37.967 15.7297 38.0797 15.725 38.1955C15.7203 38.3114 15.7455 38.4265 15.7982 38.5298L20.0304 47.0011H10.9989ZM21.5424 47.0011L17.1752 38.2666L19.4297 34.6621L21.6639 47.0011H21.5424ZM25.9569 47.0011H23.0409L21.8462 40.4198C23.5503 41.0948 25.4476 41.0948 27.1517 40.4198L25.9569 47.0011ZM27.3339 47.0011L29.5682 34.6621L31.8227 38.2666L27.4554 47.0011H27.3339ZM37.9989 47.0011H28.9674L33.1997 38.5298C33.2524 38.4265 33.2776 38.3114 33.2729 38.1955C33.2681 38.0797 33.2336 37.967 33.1727 37.8683L30.9249 34.2841L32.3762 34.6486C33.9834 35.0482 35.4105 35.9746 36.4296 37.28C37.4487 38.5855 38.0012 40.1947 37.9989 41.8508V47.0011Z"
fill="#DC688B"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.5 46.5005C36.6503 46.5005 46.5 36.6508 46.5 24.5005C46.5 12.3502 36.6503 2.50049 24.5 2.50049C12.3497 2.50049 2.5 12.3502 2.5 24.5005C2.5 36.6508 12.3497 46.5005 24.5 46.5005ZM24.5 48.5005C37.7549 48.5005 48.5 37.7553 48.5 24.5005C48.5 11.2457 37.7549 0.500488 24.5 0.500488C11.2452 0.500488 0.5 11.2457 0.5 24.5005C0.5 37.7553 11.2452 48.5005 24.5 48.5005Z"
fill="#DA72B0"
/>
</g>
<defs>
<clipPath id="clip0_2601_22257">
<path
d="M0.5 24.5005C0.5 11.2457 11.2452 0.500488 24.5 0.500488C37.7548 0.500488 48.5 11.2457 48.5 24.5005C48.5 37.7553 37.7548 48.5005 24.5 48.5005C11.2452 48.5005 0.5 37.7553 0.5 24.5005Z"
fill="white"
/>
</clipPath>
</defs>
</svg>
);
};

export default FemaleCardSVG;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible title to the SVG to enhance accessibility.

3a4,5
>   <title>Female Icon</title>
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
const FemaleCardSVG = () => {
return (
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_2601_22257)">
<path
d="M14.8992 34.7011C10.5792 35.6611 9.89921 40.3011 10.0992 42.5011C12.6991 43.9012 19.3388 46.8213 25.0988 47.3013C30.8588 47.7813 36.2988 44.7013 38.2988 43.1013V39.5013C38.2988 37.1013 35.2988 35.9013 34.0988 34.7011C33.1388 33.741 29.6988 33.1012 28.0988 32.9013C27.6988 32.1013 27.1388 30.2613 28.0988 29.3013C29.0588 28.3413 30.0988 26.5013 30.4988 25.7013V19.1011C29.8988 18.3012 28.6988 16.8213 28.6988 17.3013C28.6988 17.7813 27.0988 19.1013 26.2988 19.7013C26.0988 19.5013 25.8188 18.8613 26.2988 17.9013C26.7788 16.9413 26.0988 15.9012 25.6988 15.5012C25.6988 15.1012 25.4588 14.6612 24.4988 16.1012C23.5388 17.5412 20.0988 18.7011 18.4988 19.1011V23.3011C18.4988 27.1411 20.0988 29.3011 20.8988 29.9011V32.3011C20.699 32.7011 19.2192 33.7411 14.8992 34.7011Z"
fill="#FEFEFE"
/>
<path
d="M14.2988 28.1014C14.2988 30.5014 15.8988 32.7014 16.6988 33.5014C19.5788 33.0216 20.6988 32.5013 20.8988 32.3012V29.9012C20.2988 29.3012 18.9788 27.6212 18.4988 25.7012C18.0188 23.7812 18.2988 20.5012 18.4988 19.1012C19.4988 18.7012 21.8588 17.7812 23.2988 17.3012C25.0988 16.7012 25.0988 14.9012 25.6988 16.1012C26.2988 17.3012 25.6988 19.7012 26.2988 19.7012C26.7788 19.7012 28.0988 18.1012 28.6988 17.3012L29.8988 18.5012C30.0988 18.5012 30.4988 19.4612 30.4988 23.3012C30.4988 27.1412 28.8988 28.9012 28.0988 29.3012V32.9012L32.2988 33.5012C32.8988 32.7012 34.2188 30.7412 34.6988 29.3012C35.1788 27.8612 34.8988 21.1012 34.6988 17.9012C34.4988 14.9013 32.2988 8.78141 25.0988 8.30141C17.8988 7.82141 14.8988 14.1014 14.2988 17.3014V28.1014Z"
fill="#FAA4BE"
/>
<path
d="M20.8989 39.5009L22.6989 46.7009H26.8989L28.0989 38.9009C27.4989 39.3009 25.8189 40.1009 23.8989 40.1009C21.9789 40.1009 21.0989 39.7009 20.8989 39.5009Z"
fill="#FFB7D9"
/>
<path
d="M29.2988 32.9009L26.2988 47.3009C30.6188 46.8209 36.4988 43.9009 38.8988 42.5009C38.4988 40.9009 37.4588 37.3409 36.4988 35.9009C35.5388 34.4609 31.2988 33.3009 29.2988 32.9009Z"
fill="#F0B0C7"
/>
<path
d="M19.6987 32.9009L22.6987 47.3009C18.3787 46.8209 12.4987 43.9009 10.0987 42.5009C10.4987 40.9009 11.5387 37.3409 12.4987 35.9009C13.4587 34.4609 17.6987 33.3009 19.6987 32.9009Z"
fill="#F0B0C7"
/>
<path
d="M33.0242 33.4336C33.7427 32.7436 34.3145 31.9156 34.7054 30.9993C35.0963 30.083 35.2981 29.0973 35.2989 28.1011V18.6511C35.2989 15.7867 34.1611 13.0397 32.1357 11.0143C30.1103 8.98893 27.3633 7.85107 24.4989 7.85107C21.6346 7.85107 18.8876 8.98893 16.8622 11.0143C14.8368 13.0397 13.6989 15.7867 13.6989 18.6511V28.1011C13.6997 29.0973 13.9016 30.083 14.2925 30.9993C14.6833 31.9156 15.2552 32.7436 15.9737 33.4336C14.1491 33.9606 12.5453 35.0667 11.4045 36.5851C10.2636 38.1034 9.64741 39.9516 9.64893 41.8508V47.6761C9.64893 47.8551 9.72004 48.0268 9.84663 48.1534C9.97322 48.28 10.1449 48.3511 10.3239 48.3511H38.6739C38.8529 48.3511 39.0246 48.28 39.1512 48.1534C39.2778 48.0268 39.3489 47.8551 39.3489 47.6761V41.8508C39.3504 39.9516 38.7343 38.1034 37.5934 36.5851C36.4525 35.0667 34.8488 33.9606 33.0242 33.4336ZM15.0489 28.1011V18.6511C15.0516 16.1456 16.0481 13.7435 17.8197 11.9719C19.5914 10.2002 21.9935 9.20375 24.4989 9.20107C27.0034 9.20696 29.4036 10.2045 31.1746 11.9754C32.9455 13.7464 33.943 16.1466 33.9489 18.6511V28.1011C33.9481 29.0617 33.7188 30.0083 33.2798 30.8628C32.8408 31.7172 32.2049 32.455 31.4244 33.0151L28.5489 32.2996V30.1126C29.3925 29.416 30.0718 28.5417 30.5386 27.5523C31.0053 26.5628 31.2478 25.4826 31.2489 24.3886V18.6511C31.2489 18.4721 31.1778 18.3004 31.0512 18.1738C30.9246 18.0472 30.753 17.9761 30.5739 17.9761C30.2167 17.9734 29.8749 17.8303 29.6223 17.5777C29.3697 17.3251 29.2266 16.9833 29.2239 16.6261C29.2239 16.4471 29.1528 16.2754 29.0262 16.1488C28.8996 16.0222 28.7279 15.9511 28.5489 15.9511C28.3699 15.9511 28.1982 16.0222 28.0716 16.1488C27.945 16.2754 27.8739 16.4471 27.8739 16.6261C27.8765 17.0017 27.7734 17.3704 27.5765 17.6903C27.3795 18.0101 27.0967 18.2682 26.7602 18.4351C26.9444 17.3164 26.8541 16.1698 26.4969 15.0938C26.4654 14.9802 26.4046 14.8769 26.3207 14.794C26.2367 14.7112 26.1326 14.6518 26.0185 14.6218C25.9045 14.5918 25.7846 14.5921 25.6708 14.6228C25.5569 14.6535 25.4531 14.7135 25.3697 14.7968C23.3177 16.8488 21.4344 17.3281 18.2822 17.9896C18.131 18.0221 17.9955 18.1055 17.8984 18.2259C17.8013 18.3463 17.7486 18.4964 17.7489 18.6511V24.3886C17.75 25.4826 17.9926 26.5628 18.4593 27.5523C18.926 28.5417 19.6054 29.416 20.4489 30.1126V32.2996L17.5734 33.0151C16.793 32.455 16.157 31.7172 15.7181 30.8628C15.2791 30.0083 15.0497 29.0617 15.0489 28.1011ZM28.2249 33.6091L28.3802 33.6496L27.4487 38.7931C26.5443 39.2882 25.5299 39.5477 24.4989 39.5477C23.4679 39.5477 22.4535 39.2882 21.5492 38.7931L20.6177 33.6496L20.7729 33.6091C21.0662 33.5378 21.3269 33.3698 21.513 33.1323C21.6992 32.8947 21.7999 32.6014 21.7989 32.2996V30.9968C21.9204 31.0576 22.0352 31.1183 22.1567 31.1723L22.5819 31.3613C23.1857 31.6284 23.8387 31.7663 24.4989 31.7663C25.1592 31.7663 25.8121 31.6284 26.4159 31.3613L26.8412 31.1723C26.9627 31.1183 27.0774 31.0576 27.1989 30.9968V32.2996C27.198 32.6014 27.2987 32.8947 27.4848 33.1323C27.671 33.3698 27.9317 33.5378 28.2249 33.6091ZM26.2944 29.9438L25.8692 30.1261C25.4383 30.3196 24.9713 30.4197 24.4989 30.4197C24.0266 30.4197 23.5596 30.3196 23.1287 30.1261L22.7034 29.9438C21.6313 29.4635 20.7207 28.6837 20.0813 27.6982C19.4418 26.7127 19.1007 25.5634 19.0989 24.3886V19.1978C21.4007 18.7051 23.4527 18.1853 25.4507 16.5451C25.5663 17.4074 25.4832 18.2848 25.2077 19.1101C25.1742 19.2116 25.1653 19.3196 25.1817 19.4252C25.1982 19.5308 25.2395 19.631 25.3022 19.7176C25.3636 19.8055 25.4454 19.8772 25.5407 19.9266C25.6359 19.976 25.7417 20.0015 25.8489 20.0011C26.7454 19.9999 27.6048 19.6431 28.2384 19.0088C28.3901 18.859 28.5258 18.6939 28.6434 18.5161L28.6637 18.5363C29.0056 18.8761 29.432 19.1184 29.8989 19.2383V24.3886C29.8972 25.5634 29.556 26.7127 28.9166 27.6982C28.2771 28.6837 27.3666 29.4635 26.2944 29.9438ZM10.9989 47.0011V41.8508C10.9966 40.1947 11.5491 38.5855 12.5683 37.28C13.5874 35.9746 15.0145 35.0482 16.6217 34.6486L18.0729 34.2841L15.8252 37.8683C15.7642 37.967 15.7297 38.0797 15.725 38.1955C15.7203 38.3114 15.7455 38.4265 15.7982 38.5298L20.0304 47.0011H10.9989ZM21.5424 47.0011L17.1752 38.2666L19.4297 34.6621L21.6639 47.0011H21.5424ZM25.9569 47.0011H23.0409L21.8462 40.4198C23.5503 41.0948 25.4476 41.0948 27.1517 40.4198L25.9569 47.0011ZM27.3339 47.0011L29.5682 34.6621L31.8227 38.2666L27.4554 47.0011H27.3339ZM37.9989 47.0011H28.9674L33.1997 38.5298C33.2524 38.4265 33.2776 38.3114 33.2729 38.1955C33.2681 38.0797 33.2336 37.967 33.1727 37.8683L30.9249 34.2841L32.3762 34.6486C33.9834 35.0482 35.4105 35.9746 36.4296 37.28C37.4487 38.5855 38.0012 40.1947 37.9989 41.8508V47.0011Z"
fill="#DC688B"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.5 46.5005C36.6503 46.5005 46.5 36.6508 46.5 24.5005C46.5 12.3502 36.6503 2.50049 24.5 2.50049C12.3497 2.50049 2.5 12.3502 2.5 24.5005C2.5 36.6508 12.3497 46.5005 24.5 46.5005ZM24.5 48.5005C37.7549 48.5005 48.5 37.7553 48.5 24.5005C48.5 11.2457 37.7549 0.500488 24.5 0.500488C11.2452 0.500488 0.5 11.2457 0.5 24.5005C0.5 37.7553 11.2452 48.5005 24.5 48.5005Z"
fill="#DA72B0"
/>
</g>
<defs>
<clipPath id="clip0_2601_22257">
<path
d="M0.5 24.5005C0.5 11.2457 11.2452 0.500488 24.5 0.500488C37.7548 0.500488 48.5 11.2457 48.5 24.5005C48.5 37.7553 37.7548 48.5005 24.5 48.5005C11.2452 48.5005 0.5 37.7553 0.5 24.5005Z"
fill="white"
/>
</clipPath>
</defs>
</svg>
);
};
export default FemaleCardSVG;
Tools
Biome

[error] 3-3: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c07b5c3 and d5c34ed.

Files ignored due to path filters (3)
  • converter/svg/sources/name=female.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=living-part.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=treasures-part.svg is excluded by !**/*.svg, !**/*.svg
Files selected for processing (6)
  • src/v3/components/icons/IconFemale.tsx (1 hunks)
  • src/v3/components/icons/IconLivingPart.tsx (1 hunks)
  • src/v3/components/icons/IconTreasuresPart.tsx (1 hunks)
  • src/v3/components/icons/index.ts (8 hunks)
  • src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • src/v3/components/icons/index.ts
  • src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx
Additional context used
Biome
src/v3/components/icons/IconTreasuresPart.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/components/icons/IconLivingPart.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx

[error] 87-87: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.

src/v3/components/icons/IconFemale.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

Additional comments not posted (1)
src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx (1)

87-87: Simplify the computed expression for better readability.

- ['&, & > *']: {
+ '&, & > *': {
Tools
Biome

[error] 87-87: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.

const IconTreasuresPart = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-treasures" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible name to the SVG for better accessibility.

- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Treasures Part Icon">
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Treasures Part Icon">
Tools
Biome

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

const IconLivingPart = ({ color = '#222222', width = 24, height = 24, sx = {} }: IconProps) => {
return (
<SvgIcon id="organized-icon-living" sx={{ width: `${width}px`, height: `${height}px`, ...sx }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an accessible name to the SVG for better accessibility.

- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Living Part Icon">
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Living Part Icon">
Tools
Biome

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

@Al11o Al11o force-pushed the CU-86bwch6u6_View-weekly-schedules-page_Alonzo branch from d5c34ed to b3e47d0 Compare June 6, 2024 09:34
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d5c34ed and b3e47d0.

Files ignored due to path filters (3)
  • converter/svg/sources/name=female.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=living-part.svg is excluded by !**/*.svg, !**/*.svg
  • converter/svg/sources/name=treasures-part.svg is excluded by !**/*.svg, !**/*.svg
Files selected for processing (6)
  • src/v3/components/icons/IconFemale.tsx (1 hunks)
  • src/v3/components/icons/IconLivingPart.tsx (1 hunks)
  • src/v3/components/icons/IconTreasuresPart.tsx (1 hunks)
  • src/v3/components/icons/index.ts (8 hunks)
  • src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx (1 hunks)
  • src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • src/v3/components/icons/index.ts
  • src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx
Additional context used
Biome
src/v3/components/icons/IconTreasuresPart.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/components/icons/IconLivingPart.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx

[error] 87-87: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.

src/v3/components/icons/IconFemale.tsx

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

Additional comments not posted (3)
src/v3/components/icons/IconTreasuresPart.tsx (1)

13-13: Add an accessible name to the SVG for better accessibility.

- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Treasures Part Icon">

Likely invalid or redundant comment.

Tools
Biome

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/components/icons/IconLivingPart.tsx (1)

13-13: Add an accessible name to the SVG for better accessibility.

- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Living Part Icon">

Likely invalid or redundant comment.

Tools
Biome

[error] 13-13: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

src/v3/features/meetings/weekly_schedules/ScheduleComponents.tsx (1)

1-304: All new components in ScheduleComponents.tsx are well-structured and follow best practices.

Tools
Biome

[error] 87-87: The computed expression can be simplified without the use of a string literal. (lint/complexity/useLiteralKeys)

Unsafe fix: Use a literal key instead.

Copy link

sonarqubecloud bot commented Jun 6, 2024

Quality Gate Passed Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d5c34ed and 985e6bb.

Files selected for processing (1)
  • src/v3/components/icons/index.ts (6 hunks)
Additional comments not posted (5)
src/v3/components/icons/index.ts (5)

252-252: Ensure the new icon IconTalker is correctly imported and used in the application.

Verification successful

The new icon IconTalker is correctly imported and used in the application.

  • src/v3/features/meetings/weekly_schedules/weekendMeeting.tsx:

    • Imported as IconTalker from @components/icons.
    • Used in the ScheduleHeader component.
  • src/v3/components/icons/index.ts:

    • Exported as IconTalker.
  • src/v3/components/icons/IconTalker.tsx:

    • Defined and exported as IconTalker.
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the usage of `IconTalker` in the application.

# Test: Search for the usage of `IconTalker`. Expect: Usage in relevant components.
rg --type typescript $'IconTalker'

Length of output: 68



Script:

#!/bin/bash
# Description: Verify the usage of `IconTalker` in the application.

# Test: Search for the usage of `IconTalker`. Expect: Usage in relevant components.
rg --type ts 'IconTalker'

Length of output: 617


268-268: Ensure the new icon IconWatchtowerStudy is correctly imported and used in the application.

Verification successful

The new icon IconWatchtowerStudy is correctly imported and used in the application.

  • src/v3/features/meetings/weekly_schedules/outgoingTalks.tsx: Imported.
  • src/v3/features/meetings/weekly_schedules/weekendMeeting.tsx: Imported and used in a component.
  • src/v3/components/icons/index.ts: Exported.
  • src/v3/components/icons/IconWatchtowerStudy.tsx: Defined and exported.
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the usage of `IconWatchtowerStudy` in the application.

# Test: Search for the usage of `IconWatchtowerStudy`. Expect: Usage in relevant components.
rg --type typescript $'IconWatchtowerStudy'

Length of output: 77



Script:

#!/bin/bash
# Description: Verify the usage of `IconWatchtowerStudy` in the application.

# Test: Search for the usage of `IconWatchtowerStudy`. Expect: Usage in relevant components.
rg --type ts 'IconWatchtowerStudy'

Length of output: 840


148-148: Ensure the new icon IconMinistry is correctly imported and used in the application.


269-269: Ensure the new icon IconWavingHand is correctly imported and used in the application.

Verification successful

The new icon IconWavingHand is correctly imported and used in the application.

  • Import Statement: src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx
  • Usage: src/v3/features/meetings/weekly_schedules/midweekMeeting.tsx
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the usage of `IconWavingHand` in the application.

# Test: Search for the usage of `IconWavingHand`. Expect: Usage in relevant components.
rg --type typescript $'IconWavingHand'

Length of output: 72



Script:

#!/bin/bash
# Description: Verify the usage of `IconWavingHand` in the application.

# Test: Search for the usage of `IconWavingHand`. Expect: Usage in relevant components.
rg --type ts 'IconWavingHand'

Length of output: 605


227-227: Ensure the new icon IconService is correctly imported and used in the application.

@@ -161,6 +163,7 @@ export { default as IconNormalPin } from './IconNormalPin';
export { default as IconNotifications } from './IconNotifications';
export { default as IconOffCircle } from './IconOffCircle';
export { default as IconOnCircle } from './IconOnCircle';
export { default as IconOutgoindSpeaker } from './IconOutgoindSpeaker';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

The search results indicate that IconOutgoindSpeaker is defined and exported but not used elsewhere in the application. Additionally, there are no occurrences of IconOutgoingSpeaker, suggesting that the name IconOutgoindSpeaker might indeed be a typo.

  • Location to review:
    • src/v3/components/icons/index.ts
    • src/v3/components/icons/IconOutgoindSpeaker.tsx

Please verify the spelling of IconOutgoindSpeaker and ensure it is correctly used in the application.

Analysis chain

Ensure the new icon IconOutgoindSpeaker is correctly imported and used in the application. Also, verify the spelling of the icon name; it seems to be a typo ("Outgoind" should be "Outgoing").

Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the usage of `IconOutgoindSpeaker` in the application and check for typo.

# Test: Search for the usage of `IconOutgoindSpeaker`. Expect: Usage in relevant components.
rg --type typescript $'IconOutgoindSpeaker'

Length of output: 77



Script:

#!/bin/bash
# Description: Verify the usage of `IconOutgoindSpeaker` in the application and check for typo.

# Test: Search for the usage of `IconOutgoindSpeaker`. Expect: Usage in relevant components.
rg --type ts 'IconOutgoindSpeaker'

Length of output: 373



Script:

#!/bin/bash
# Description: Verify if `IconOutgoingSpeaker` is used in the application to check for a typo.

# Test: Search for the usage of `IconOutgoingSpeaker`. Expect: No results if `IconOutgoindSpeaker` is correct.
rg --type ts 'IconOutgoingSpeaker'

Length of output: 34

@rhahao rhahao merged commit c768815 into main-next Jun 15, 2024
10 checks passed
@rhahao rhahao deleted the CU-86bwch6u6_View-weekly-schedules-page_Alonzo branch July 27, 2024 21:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants