Text color of "Explore All Apps" button changes on mobile view, rendering it unreadable.

[ryavee]

Issue Summary

The text color of the "Explore All Apps" button changes on mobile view, making the text almost invisible.

Steps to Reproduce

1. Open the website on a mobile device.
2. Navigate to the home page.
3. Observe the "Explore All Apps" button.

Actual Results

The text color of the "Explore All Apps" button changes on mobile view, making it almost invisible.

Expected Results

The text color of the "Explore All Apps" button should remain consistent across all views, ensuring readability.

Evidence

https://github.com/calcom/cal.com/assets/46756880/343841b1-9dc4-44da-b1d8-12a61f2b2283

[dosubot]

To address the readability issue of the "Explore All Apps" button on mobile devices, it's likely due to CSS styles that need adjustment for mobile views. Here's a focused approach to ensure the button's text remains visible and consistent across all devices:

1. Adjust Text Color for High Contrast: Use CSS variables like --cal-text-inverted for white text on a dark background or --cal-text-emphasis for dark text on a light background to ensure the text stands out against the button's background.

2. Responsive Design with Media Queries: Apply media queries to target mobile devices specifically, adjusting styles as necessary to maintain readability and appearance on smaller screens.

3. Consistent Styling Across Themes: If your site supports themes (e.g., light and dark modes), ensure the button's style is consistent across them. You might need to adjust the button's text and background colors based on the active theme.

Here's an example CSS snippet that demonstrates these principles:

.explore-all-apps-btn {
  background-color: var(--cal-brand); /* Adjust background color */
  color: var(--cal-text-inverted); /* White text for contrast */
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .explore-all-apps-btn {
    /* Mobile-specific adjustments */
  }
}

.dark .explore-all-apps-btn {
  background-color: var(--cal-bg-inverted); /* Dark mode background */
  color: var(--cal-text-emphasis); /* Dark mode text color */
}

This approach ensures that the button is easily readable on all devices and under different theme settings. Remember to check the contrast of your chosen colors to meet accessibility standards, ensuring that all users can comfortably read the button text under any condition.

Details

Sources

• "Explore all Apps" text is not visibile due to white text color in cal.com home page
• packages/config/theme/colors.css
• packages/ui/components/apps/AppCard.tsx
• packages/features/ee/components/BrandColorsForm.tsx
• apps/web/public/site.webmanifest
• apps/storybook/.storybook/YourTheme.js
• apps/web/styles/globals.css

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[Sarthakagg31]

@dosu where is the file which contains the homepage

[utkershrajvenshi]

https://github.com/calcom/cal.com/assets/46756880/31934db6-b983-4e54-b30e-63e2d7a6d432

@ryavee This link is not of a relevant evidence.

[ryavee]

@utkershrajvenshi

Avoid the above links .
here is the screenshots!

[qkrwoghd04]

now i am working on it