Skip to content

Fix UI text visibility and enhance color contrast #6

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.

Sign up for GitHub

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix UI text visibility and enhance color contrast #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b76ed53
Fix UI text visibility issues in Home page
RedWilly May 25, 2025
dc1bb7f
text visibility issue
RedWilly May 25, 2025
3432de8
removed duplicate clipjs txt
RedWilly May 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions app/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ export default function Home() {
<div className="space-y-10">
{/* <Header /> */}
<div className="mx-auto bg-surfacePrimary max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
<p className="mx-auto -mt-4 max-w-2xl text-lg tracking-tight text-white-700 sm:mt-6">Welcome to
<span className="border-b border-dotted border-slate-300"></span>
<p className="mx-auto -mt-4 max-w-2xl text-lg tracking-tight text-gray-200 sm:mt-6">Welcome to
{/* <span className="border-b border-dotted border-slate-300 ml-2 text-white">ClipJS</span> */}
</p>

<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white-900 sm:text-7xl">
<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
<span className="inline-block">Clip
<span className="relative whitespace-nowrap text-white-600">
<span className="relative whitespace-nowrap text-yellow-300">
<svg aria-hidden="true" viewBox="0 0 418 42" className="absolute top-2/3 left-0 h-[0.58em] w-full fill-yellow-300/70" preserveAspectRatio="none"><path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path></svg>
<span className="relative">JS</span></span>
</span>
</h1>

<p className="mx-auto mt-9 max-w-2xl text-lg tracking-tight text-white-700 sm:mt-6">
<p className="mx-auto mt-9 max-w-2xl text-lg tracking-tight text-white sm:mt-6">
<span className="inline-block">Edit your videos from your PC or phone no downloads, no registration, no watermarks.</span>
<span className="inline-block">Online, Free and Open Source</span>
</p>
Expand All @@ -44,7 +44,7 @@ export default function Home() {
</Link>
</div>
<Link href="https://github.com/mohyware/clip.js" target="_blank"
className="rounded-full bg-black border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
className="rounded-full bg-black border border-solid border-transparent transition-colors flex items-center justify-center text-white gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
Copy link
Owner

Choose a reason for hiding this comment

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

Suggested change
className="rounded-full bg-black border border-solid border-transparent transition-colors flex items-center justify-center text-white gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
className="rounded-full bg-black border border-solid border-transparent transition-colors flex items-center justify-center text-white gap-2 hover:bg-[#383838] dark:hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"

The old hover color is really better than this all-white one.

The old
image

The current
image

>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -62,7 +62,7 @@ export default function Home() {
</div>
{/* Features Section */}
<div className="space-y-10">
<h2 className="mx-auto max-w-4xl text-center font-display text-5xl font-medium tracking-tight text-white-900 sm:text-4xl">
<h2 className="mx-auto max-w-4xl text-center font-display text-5xl font-medium tracking-tight text-white sm:text-4xl">
<span className="inline-block">What Can it do?</span>
</h2>

Expand All @@ -82,8 +82,8 @@ export default function Home() {
/>
</figure>
<div className="flex flex-col items-start gap-1">
<h5 className="text-base md:text-lg font-medium">{title}</h5>
<p className="text-pretty text-sm md:text-base text-text-secondary dark:text-dark-text-secondary">
<h5 className="text-base md:text-lg font-medium text-white">{title}</h5>
<p className="text-pretty text-sm md:text-base text-gray-300">
{description}
</p>
</div>
Expand Down
6 changes: 6 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ const config: Config = {
colors: {
surfacePrimary: "oklch(.141 .005 285.823)",
darkSurfacePrimary: "oklch(.141 .005 285.823)",
'text-primary': '#ffffff',
'dark-text-primary': '#ffffff',
'text-secondary': '#e2e2e2',
'dark-text-secondary': '#e2e2e2',
'surface-secondary': '#2a2a2a',
'dark-surface-secondary': '#2a2a2a',
Comment on lines +23 to +24
Copy link
Owner

Choose a reason for hiding this comment

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

Suggested change
'surface-secondary': '#2a2a2a',
'dark-surface-secondary': '#2a2a2a',

these two colors are causing a weird background around icons

image

},
border: {
DEFAULT: "rgba(128, 128, 128, 0.5)",
Expand Down