From 3ed7b14f1b4a25ee4ea5dcd594a4c1e53d1abac0 Mon Sep 17 00:00:00 2001 From: Norbert Maciaszek Date: Mon, 25 Aug 2025 22:43:12 +0200 Subject: [PATCH] feat: update Button component styles and themes; introduce new slate theme for consistent UI across Dropdown, SearchInput, and Navbar components, and enhance MovieList display type toggle functionality --- src/components/atoms/Button/index.tsx | 34 ++++-- src/components/atoms/Dropdown/index.tsx | 2 +- src/components/atoms/MovieRow/index.tsx | 2 +- src/components/atoms/SearchInput/index.tsx | 11 +- src/components/molecules/MovieList/index.tsx | 2 +- .../Navbar/components/Search/index.tsx | 18 ++- src/components/organisms/Navbar/index.tsx | 111 ++++++------------ 7 files changed, 73 insertions(+), 107 deletions(-) diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx index 59b44de..dda1fae 100644 --- a/src/components/atoms/Button/index.tsx +++ b/src/components/atoms/Button/index.tsx @@ -29,10 +29,14 @@ export const Button: FC = ({ const buttonColor = gradient ?? colors[theme]; + if (theme === "slate" && !className.includes("shadow-")) { + className += " shadow-cyan-500/20 hover:shadow-cyan-500/40"; + } + return ( @@ -45,7 +49,7 @@ const sizes = { small: "px-4 py-2 text-sm", medium: "px-8 py-4 text-lg", large: "px-12 py-6 text-xl", - icon: "p-3 [&>*]:w-5 [&>*]:h-5", + icon: "w-12 h-12 !rounded-full border border-white/20 hover:scale-105 [&>svg]:w-5 [&>svg]:h-5 shadow-lg ", }; const colors = { @@ -55,30 +59,38 @@ const colors = { }, secondary: { from: "from-purple-600 hover:from-purple-500", - to: "to-pink-600 hover:to-pink-500", + to: "to-cyan-600 hover:to-cyan-500", }, glass: { - from: "from-white/15 via-white/8 to-white/12 border border-white/20", - to: "to-white/15 hover:to-white/10", + from: "from-white/15 border border-white/20", + to: "to-white/5 hover:to-white/10", }, - rose: { + rosePink: { from: "from-rose-600/90 hover:from-rose-500/90", to: "to-pink-600/90 hover:to-pink-500/90", }, - emerald: { + emeraldTeal: { from: "from-emerald-600/90 hover:from-emerald-500/90", to: "to-teal-600/90 hover:to-teal-500/90", }, - purple: { + purplePink: { from: "from-purple-600/90 hover:from-purple-500/90", to: "to-pink-600/90 hover:to-pink-500/90", }, - pink: { + pinkEmerald: { from: "from-pink-600/90 hover:from-pink-500/90", to: "to-emerald-600/90 hover:to-emerald-500/90", }, - teal: { + tealEmerald: { from: "from-teal-600/90 hover:from-teal-500/90", to: "to-emerald-600/90 hover:to-emerald-500/90", }, + cyanPurple: { + from: "from-cyan-600/90 hover:from-cyan-500/90", + to: "to-purple-600/90 hover:to-purple-500/90", + }, + slate: { + from: "from-slate-800/95", + to: "to-slate-900/95", + }, }; diff --git a/src/components/atoms/Dropdown/index.tsx b/src/components/atoms/Dropdown/index.tsx index 5cc0430..9ace957 100644 --- a/src/components/atoms/Dropdown/index.tsx +++ b/src/components/atoms/Dropdown/index.tsx @@ -32,7 +32,7 @@ export const Dropdown: FC = ({ return (
- diff --git a/src/components/atoms/MovieRow/index.tsx b/src/components/atoms/MovieRow/index.tsx index a607713..f8f3bdd 100644 --- a/src/components/atoms/MovieRow/index.tsx +++ b/src/components/atoms/MovieRow/index.tsx @@ -64,7 +64,7 @@ export const MovieRow: FC = ({ }; return ( -
+
{/* Background actions */}
diff --git a/src/components/atoms/SearchInput/index.tsx b/src/components/atoms/SearchInput/index.tsx index 781975f..43dcc8a 100644 --- a/src/components/atoms/SearchInput/index.tsx +++ b/src/components/atoms/SearchInput/index.tsx @@ -1,6 +1,7 @@ "use client"; import { FC, useEffect, useState } from "react"; import { IoSearch } from "react-icons/io5"; +import { Button } from "../Button"; type Props = { className?: string; @@ -30,19 +31,21 @@ export const SearchInput: FC = ({ }, [value]); return ( -
+
setValue(e.target.value)} autoFocus={autoFocus} /> - +
); }; diff --git a/src/components/molecules/MovieList/index.tsx b/src/components/molecules/MovieList/index.tsx index 26cbe7c..945acfe 100644 --- a/src/components/molecules/MovieList/index.tsx +++ b/src/components/molecules/MovieList/index.tsx @@ -211,8 +211,8 @@ export const MovieList: FC = ({ /> {!overrideDisplayType && (
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx index 47e0229..0dfd92a 100644 --- a/src/components/organisms/Navbar/index.tsx +++ b/src/components/organisms/Navbar/index.tsx @@ -4,16 +4,9 @@ import { useState } from "react"; import { HiSearch, HiHome, HiSparkles } from "react-icons/hi"; import { Search } from "./components/Search"; import { usePathname } from "next/navigation"; +import { Button } from "@/components/atoms/Button"; const navigationItems = [ - { - label: "Strona G艂贸wna", - href: "/", - icon: HiHome, - emoji: "馃彔", - color: "from-blue-500 to-purple-600", - description: "Twoja lista film贸w", - }, { label: "Odkrywaj", href: "/odkrywaj", @@ -22,6 +15,14 @@ const navigationItems = [ color: "from-purple-500 to-pink-600", description: "Znajd藕 nowe filmy", }, + { + label: "Strona G艂贸wna", + href: "/", + icon: HiHome, + emoji: "馃彔", + color: "from-blue-500 to-purple-600", + description: "Twoja lista film贸w", + }, ]; export const Navbar = () => { @@ -31,82 +32,36 @@ export const Navbar = () => { return ( <> {/* Elegant Floating Navigation */} -