feat: event page#108
Conversation
…or headline badge usage
…ntos theme, and update section-title background styling
…tyling in 3pontos theme
…ts, and improved card & headline styling
…onent with 2xl size class styling
…g for 3pontos theme
… enhanced card layout and styling
…ns in 3pontos theme
…r variables in 3pontos theme
…on with reusable text component
…ants, and updated schedule-card design
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app-modules/he4rt/resources/css/components/icon.css (1)
9-19: Consider using CSS custom properties or Tailwind's size scale for size variants.The size variants could alternatively be expressed as custom properties or grouped under a Tailwind size scale definition. However, the current approach is perfectly valid and more explicit—no action needed unless you want to reduce repetition across similar component files.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app-modules/he4rt/resources/css/components/icon.css(1 hunks)app-modules/he4rt/resources/views/components/icon.blade.php(1 hunks)app-modules/he4rt/resources/views/components/schedule-card.blade.php(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- app-modules/he4rt/resources/views/components/icon.blade.php
- app-modules/he4rt/resources/views/components/schedule-card.blade.php
🔇 Additional comments (2)
app-modules/he4rt/resources/css/components/icon.css (2)
1-19: Well-structured icon utility classes with appropriate interactivity and sizing variants.The CSS composition is clean and idiomatic for Tailwind:
- The base
.hp-iconclass establishes consistent styling (background, text color, rounding, padding).hp-icon-interactivecorrectly adds pointer cursor and smooth hover/active state transitions- Size variants (sm/md/lg) map to reasonable icon dimensions, enabling flexible sizing without hardcoding values
1-7: ****Verification confirmed that the semantic design tokens are properly defined in the Tailwind configuration. The
@theme inlineblock inapp-modules/he4rt/resources/css/support/index.csscontains--color-icon-highand--color-icon-dark, which auto-generate thebg-icon-highandtext-icon-darkutilities in Tailwind v4. The@applydirectives in icon.css will render correctly.
…improved schedule-card layout
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
app-modules/he4rt/resources/css/components/heading.css (2)
26-28: Responsive scale regression inhp-heading-size-xlnot fixed.The size progression still regresses from
sm:text-3xltomd:text-2xl—this contradicts the responsive design principle where larger breakpoints should maintain or increase size, not decrease it.Apply this diff to fix the regression:
.hp-heading-size-xl { - @apply text-xl sm:text-3xl md:text-2xl lg:text-3xl xl:text-4xl; + @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl; }
38-40: Responsive scale regression inhp-heading-size-4xlnot fixed.Similar to
hp-heading-size-xl, this class regresses fromsm:text-4xltomd:text-3xl, which breaks responsive typography monotonicity.Apply this diff to fix the regression:
.hp-heading-size-4xl { - @apply text-2xl sm:text-4xl md:text-3xl lg:text-4xl xl:text-5xl; + @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl; }app-modules/he4rt/resources/views/components/schedule-card.blade.php (1)
7-25: Previous review already flagged missing default case.A past review identified that the
matchexpression lacks a default case, which would throw anUnhandledMatchErrorfor unexpected status values. Please address that feedback.Additionally, consider using Laravel localization instead of hardcoded Portuguese text. This improves maintainability and enables multi-language support.
Example refactor:
@php $config = match ($status) { 'finished' => [ 'color' => 'text-green-300', - 'text' => 'Finalizado', + 'text' => __('schedule.status.finished'), 'icon' => 'heroicon-s-check-circle', ], 'in_progress' => [ 'color' => 'text-orange-300', - 'text' => 'Em andamento', + 'text' => __('schedule.status.in_progress'), 'icon' => 'heroicon-s-clock', ], 'upcoming' => [ 'color' => 'text-blue-300', - 'text' => 'Em breve', + 'text' => __('schedule.status.upcoming'), 'icon' => 'heroicon-o-calendar', ], + default => [ + 'color' => 'text-gray-300', + 'text' => __('schedule.status.unknown'), + 'icon' => 'heroicon-o-question-mark-circle', + ], }; @endphpThen create a language file at
resources/lang/pt/schedule.php:return [ 'status' => [ 'finished' => 'Finalizado', 'in_progress' => 'Em andamento', 'upcoming' => 'Em breve', 'unknown' => 'Desconhecido', ], ];
🧹 Nitpick comments (1)
app-modules/he4rt/resources/views/components/schedule-card.blade.php (1)
1-5: Consider documenting the expected time format.The
startsAtprop defaults to'14:00'but lacks validation or documentation of the expected format. Consider adding a comment to clarify that the format should beHH:MM.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app-modules/he4rt/resources/css/components/heading.css(1 hunks)app-modules/he4rt/resources/views/components/heading.blade.php(1 hunks)app-modules/he4rt/resources/views/components/schedule-card.blade.php(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app-modules/he4rt/resources/views/components/heading.blade.php
🧰 Additional context used
🧬 Code graph analysis (1)
app-modules/he4rt/resources/views/components/schedule-card.blade.php (1)
app-modules/meeting/src/Models/MeetingType.php (1)
MeetingType(18-52)
🔇 Additional comments (2)
app-modules/he4rt/resources/css/components/heading.css (1)
1-4: Base heading class is well-structured.The base
.hp-headingutility class correctly applies font-weight, letter-spacing, and word-break properties. No issues here.app-modules/he4rt/resources/views/components/schedule-card.blade.php (1)
27-44: LGTM!The rendering logic is clean and properly uses Blade components and Tailwind classes. The template structure is semantic and the use of custom
x-he4rtcomponents maintains consistency.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
app-modules/he4rt/resources/views/components/schedule-card.blade.php (1)
7-24: Add a default arm to thematchto avoidUnhandledMatchErrorIf
Line 8receives any$statusother than'finished','in_progress', or'upcoming', PHP’smatchwill throwUnhandledMatchError, breaking the view at runtime. This is still missing and should be handled defensively.You can add a default config like:
$config = match ($status) { 'finished' => [ 'color' => 'text-green-300', 'text' => 'Finalizado', 'icon' => 'heroicon-s-check-circle', ], 'in_progress' => [ 'color' => 'text-orange-300', 'text' => 'Em andamento', 'icon' => 'heroicon-s-clock', ], 'upcoming' => [ 'color' => 'text-blue-300', 'text' => 'Em breve', 'icon' => 'heroicon-o-calendar', ], + default => [ + 'color' => 'text-gray-300', + 'text' => 'Desconhecido', + 'icon' => 'heroicon-o-question-mark-circle', + ], };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app-modules/he4rt/resources/css/components/heading.css(1 hunks)app-modules/he4rt/resources/views/components/schedule-card.blade.php(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app-modules/he4rt/resources/css/components/heading.css
🔇 Additional comments (1)
app-modules/he4rt/resources/views/components/schedule-card.blade.php (1)
1-5: Props definition looks solidDefaults for
startsAt,title, andstatusare reasonable and make the component safe to use without explicit props. No issues here.
…ntered text in speaker sections
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app-modules/events/resources/views/components/themes/3pontos/components/sections/speakers.blade.php(1 hunks)app-modules/he4rt/resources/css/components/card.css(3 hunks)app-modules/he4rt/resources/css/themes/3pontos/components/card.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- app-modules/events/resources/views/components/themes/3pontos/components/sections/speakers.blade.php
- app-modules/he4rt/resources/css/components/card.css
🔇 Additional comments (1)
app-modules/he4rt/resources/css/themes/3pontos/components/card.css (1)
6-6: All custom color and font tokens are properly defined in theme configuration—no issues found.Verification confirms that all referenced tokens exist:
border-outline-low,outline-medium, andbg-elevation-surfaceare defined as CSS custom properties inapp-modules/he4rt/resources/css/support/themes.csswith fallbacks insupport/index.cssfont-family-secondaryis defined inapp-modules/he4rt/resources/css/support/index.cssand overridden inapp-modules/he4rt/resources/css/themes/3pontos/support/index.css- These tokens are consistently used throughout the codebase in other component files without issues
…nhanced interactivity
… stream, and limited spots
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
app-modules/events/resources/views/components/themes/3pontos/components/sections/hero.blade.php (2)
20-32: Extract hardcoded text to language files for internationalization.All user-facing text is hardcoded in Portuguese. For better maintainability and potential multi-language support, consider extracting strings to Laravel language files.
Apply this pattern to externalize strings:
-<x-he4rt::section-title>3 Pontos Start</x-he4rt::section-title> +<x-he4rt::section-title>{{ __('events.hero.badge') }}</x-he4rt::section-title>-<x-slot:title>Participe do primeiro evento presencial da 3Pontos</x-slot> +<x-slot:title>{{ __('events.hero.title') }}</x-slot>-<x-slot:description> - O Meetup da He4rt é um evento que reúne os nosso membros presencialmente e virtualmente pra trocarmos - conhecimentos, fazer networking e unir cada vez mais nossa comunidade. -</x-slot> +<x-slot:description>{{ __('events.hero.description') }}</x-slot>-<x-he4rt::button>Faça sua inscrição</x-he4rt::button> +<x-he4rt::button>{{ __('events.hero.cta_button') }}</x-he4rt::button>
59-67: Use a more semantically appropriate icon for the limited spots card.The third card uses
heroicon-o-tv(same as the streaming card), but it represents limited event registrations, not streaming. Consider using a more appropriate icon likeheroicon-o-users,heroicon-o-ticket, orheroicon-o-user-group.Apply this diff:
-<x-he4rt::icon icon="heroicon-o-tv" class="text-text-medium bg-transparent p-0" /> +<x-he4rt::icon icon="heroicon-o-ticket" class="text-text-medium bg-transparent p-0" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app-modules/events/resources/views/components/themes/3pontos/components/sections/hero.blade.php(1 hunks)
🔇 Additional comments (1)
app-modules/events/resources/views/components/themes/3pontos/components/sections/hero.blade.php (1)
9-17: LGTM!The decorative logo element is properly configured with appropriate positioning, responsive visibility, and correct accessibility attributes (empty alt for decorative image).
…ed card layouts for improved visuals
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
public/images/3pontos/donut.svgis excluded by!**/*.svgpublic/images/3pontos/wave.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
app-modules/events/resources/views/components/themes/3pontos/components/sections/community.blade.php(1 hunks)app-modules/he4rt/resources/views/components/card.blade.php(2 hunks)
🔇 Additional comments (4)
app-modules/he4rt/resources/views/components/card.blade.php (2)
38-38: LGTM! Variant class integration is consistent.The variant class follows the established pattern and integrates well with the existing density/interactive/disabled class system.
76-77: LGTM! Default slot positioning provides flexibility.Rendering the default slot after the card body but before tags/actions/footer sections allows for flexible content injection while maintaining the structured layout of the card component.
app-modules/events/resources/views/components/themes/3pontos/components/sections/community.blade.php (2)
1-5: LGTM! Section structure is well-organized.The responsive grid layout with appropriate breakpoints provides a clean structure for the community section.
24-24: No issues found — all referenced assets exist.The verification confirms that both
wave.svg(35,937 bytes) anddonut.svg(106,892 bytes) are present in thepublic/images/3pontos/directory. The asset references in the Blade template are valid.
…ensure proper layering of content and visuals
…, and updated section layouts
…links for improved anchor-based navigation
…s in 3pontos theme sections
2 participants
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.