Skip to content

Updated UI #39

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

Merged
Twahaaa merged 3 commits into from
Dec 13, 2025
Merged

Updated UI #39

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
7b9dc0d
fix(ui): stop mobile Safari from zooming on input focus
Twahaaa Dec 13, 2025
cafb2e2
fix(ui): remove clear image button from hover
Twahaaa Dec 13, 2025
d16b5d0
ui: improve the prjectcard layouts
Twahaaa Dec 13, 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
6 changes: 6 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@

@custom-variant dark (&:is(.dark *)); /* <-- Added from file 1 */

input,
textarea,
select {
font-size: 16px;
}

/* ============================================
PRIORITY THEME VARIABLES
(From file 2, as requested)
Expand Down
92 changes: 40 additions & 52 deletions src/components/ui/card-7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,10 +212,48 @@ const ProjectCard = React.forwardRef<HTMLDivElement, ProjectCardProps>(
</div>
</div>

{/* Likes and View Project Button */}
<div className="flex items-center justify-between pt-6">
<Button
onClick={(e) => {
if (onViewProject) {
e.preventDefault();
onViewProject(href);
}
}}
asChild={!onViewProject}
className={cn(
"h-11 rounded-md px-8 cursor-pointer",
"bg-primary text-primary-foreground",
"hover:bg-primary/90"
)}
>
{onViewProject ? (
<span className="flex items-center">
View Project <ArrowRight className="ml-2 h-4 w-4" />
</span>
) : (
<Link href={href}>
View Project <ArrowRight className="ml-2 h-4 w-4" />
</Link>
)}
</Button>
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<Heart
className="h-5 w-5 text-destructive fill-destructive" // Use destructive red
/>
<span className="text-lg font-bold text-foreground">
{likes}
</span>
</div>
</div>
</div>

{/* Tech Stack Section (shown on hover for desktop, on click for mobile) */}
{techStack.length > 0 && (
<div className={cn(
"transition-all duration-500 ease-in-out overflow-hidden",
"transition-all duration-300 ease-in-out overflow-hidden",
!isMobile && "opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-96 group-hover:mt-8 group-hover:mb-6",
isMobile && (isExpanded ? "opacity-100 max-h-96 mt-8 mb-6" : "opacity-0 max-h-0")
)}>
Expand Down Expand Up @@ -258,57 +296,7 @@ const ProjectCard = React.forwardRef<HTMLDivElement, ProjectCardProps>(
</div>
)}

{/* Bottom Section: Stats and Button (shown on hover for desktop, on click for mobile) */}
<div className={cn(
"pt-6 border-t border-border transition-all duration-500 ease-in-out overflow-hidden",
!isMobile && "opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-32",
isMobile && (isExpanded ? "opacity-100 max-h-32" : "opacity-0 max-h-0")
)}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<Heart
className="h-5 w-5 text-destructive fill-destructive" // Use destructive red
/>
<span className="text-lg font-bold text-foreground">
{likes}
</span>
<span className="text-muted-foreground text-sm">Likes</span>
</div>
{/* <div className="flex items-center gap-2">
<MessageCircle className="h-5 w-5 text-blue-400" />
<span className="text-lg font-bold text-foreground">
{comments}
</span>
<span className="text-muted-foreground text-sm">Comments</span>
</div> */}
</div>
<Button
onClick={(e) => {
if (onViewProject) {
e.preventDefault();
onViewProject(href);
}
}}
asChild={!onViewProject}
className={cn(
"h-11 rounded-md px-8 cursor-pointer",
"bg-primary text-primary-foreground",
"hover:bg-primary/90"
)}
>
{onViewProject ? (
<span className="flex items-center">
View Project <ArrowRight className="ml-2 h-4 w-4" />
</span>
) : (
<Link href={href}>
View Project <ArrowRight className="ml-2 h-4 w-4" />
</Link>
)}
</Button>
</div>
</div>

</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/imageUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export function ImageUpload({
<button
onClick={handleRemove}
type="button"
className="absolute top-2 right-2 p-1.5 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity hover:scale-110"
className="absolute top-2 right-2 p-1.5 bg-destructive text-destructive-foreground rounded-full opacity-100 transition-opacity hover:scale-110"
>
<X className="h-4 w-4" />
</button>
Expand Down