Gerardo Ruiz

Introduction

In our recent update of the landing page in the devlog-ist/landing project, we addressed some rendering issues related to the LinkedIn button's HTML structure. The previous implementation relied on Filament's custom classes, which caused conflicts within our Blade component rendering system.

The Challenge

Using the Filament fi-* classes not only complicated the styling but also created inconsistencies with Tailwind CSS, which is our preferred utility-first CSS framework. These conflicts needed resolving to ensure a smooth user experience without compromising the design integrity of the application.

The Solution

We decided to refactor the HTML for the LinkedIn button by directly implementing Tailwind CSS classes. This change simplifies the styling and maximizes compatibility with other components in our application.

Before and After

Here's a look at the changes made in the code:

private function getLinkedInConnectionHtml(): HtmlString
{
    $isConnected = $user !== null && ! empty($user->linkedin_id);

    if ($isConnected) {
        return new HtmlString(sprintf(
            '<div class="flex items-center justify-between gap-4">'
            . '<span class="text-sm text-green-600 dark:text-green-400">%s</span>'
            . '<a href="%s" class="inline-flex items-center justify-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold text-white shadow-sm transition duration-75 bg-red-600 hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400">%s</a>'
            . '</div>',
            e(__('linkedin.connected')),
            e(route('linkedin.disconnect')),
            e(__('linkedin.disconnect'))
        ));
    }

    return new HtmlString(sprintf(
        '<div class="flex items-center justify-between gap-4">'
        . '<span class="text-sm text-gray-500 dark:text-gray-400">%s</span>'
        . '<a href="%s" class="inline-flex items-center justify-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold text-white shadow-sm transition duration-75 bg-blue-600 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">%s</a>'
        . '</div>',
        e(__('linkedin.connect_description')),
        e(route('linkedin.redirect')),
        e(__('linkedin.connect'))
    ));
}

Key Changes

Simplified Button HTML: Removed the Filament fi-btn classes and replaced them with Tailwind CSS classes for better consistency and control.
Adjusted Color Variants: Utilized Tailwind classes for hover effects and background colors, ensuring a consistent look across light and dark modes.

Results

By transitioning to pure Tailwind CSS classes, we've successfully eliminated the rendering conflicts and improved maintainability of the codebase. This change not only enhances the appearance and functionality of the LinkedIn button but also aligns with our long-term goal of leveraging Tailwind CSS across the project.

Conclusion

Adopting Tailwind CSS for button styling in this instance has proved beneficial, leading to cleaner code and a better user interface. This experience reinforces the importance of using a cohesive styling strategy throughout our application. Future improvements will focus on further refining user interactions and exploring other components for similar enhancements.

Lessons Learned

Consistent styling using a singular CSS framework can mitigate potential conflicts and improve code maintainability.
Regular code reviews help identify opportunities for simplification and enhancement, driving better user experiences.

Generated with Devlog.ist

Enhancing LinkedIn Button Functionality with Tailwind CSS