From 8afe03fc0e9ae065ee64cf3e282da96f78f6ca66 Mon Sep 17 00:00:00 2001 From: raymondtju-locofy Date: Mon, 18 Nov 2024 20:53:48 +0700 Subject: [PATCH 1/2] chore: change all design system and replace classes --- app/layout.tsx | 6 ++--- app/profile/[username]/layout.tsx | 2 +- app/wiki/heroes/[hero]/loading.tsx | 2 +- app/wiki/patches/[patch]/loading.tsx | 2 +- app/wiki/patches/loading.tsx | 2 +- .../statistics/[path]/_components/content.tsx | 4 +-- app/wiki/statistics/loading.tsx | 2 +- app/wiki/tier-list/loading.tsx | 2 +- components/explore/comment/comment-box.tsx | 12 ++++----- components/explore/comment/comment-form.tsx | 2 +- components/explore/comment/comment-list.tsx | 2 +- components/explore/post/post-box.tsx | 8 +++--- components/explore/post/post-content.tsx | 12 ++++----- components/explore/post/post-form.tsx | 2 +- .../explore/post/post-list-container.tsx | 12 ++++----- components/explore/random-user-container.tsx | 2 +- components/explore/reply/reply-box.tsx | 8 +++--- components/explore/reply/reply-form.tsx | 2 +- components/explore/user-list.tsx | 2 +- components/hero-search.tsx | 2 +- .../profile/profile-bio/description.tsx | 2 +- components/shared/button.tsx | 6 ++--- components/shared/checkbox.tsx | 2 +- components/shared/command.tsx | 10 ++++---- components/shared/dialog.tsx | 4 +-- components/shared/gradiant-card.tsx | 4 +-- components/shared/icons/info.tsx | 4 +-- components/shared/input.tsx | 2 +- components/shared/loading.tsx | 2 +- components/shared/navbar/navbar-menu.tsx | 12 ++++----- components/shared/popover.tsx | 2 +- components/shared/progress.tsx | 6 ++--- components/shared/search-box.tsx | 2 +- components/shared/select.tsx | 6 ++--- components/shared/tabs.tsx | 4 +-- components/wiki/heroes/hero-card.tsx | 2 +- components/wiki/heroes/hero-details.tsx | 4 +-- components/wiki/patches/patch-info.tsx | 6 ++--- .../wiki/statistics/tournaments-popover.tsx | 4 +-- tailwind.config.js | 25 ++++--------------- 40 files changed, 91 insertions(+), 106 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 480a66fb..92e539cf 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -61,7 +61,7 @@ export default async function RootLayout({ return ( {process.env.NODE_ENV === "production" && ( @@ -95,8 +95,8 @@ export default async function RootLayout({ )} diff --git a/app/profile/[username]/layout.tsx b/app/profile/[username]/layout.tsx index 8da55502..4c7940a2 100644 --- a/app/profile/[username]/layout.tsx +++ b/app/profile/[username]/layout.tsx @@ -97,7 +97,7 @@ export default async function LayoutProfile({ return (
-
+
diff --git a/app/wiki/patches/[patch]/loading.tsx b/app/wiki/patches/[patch]/loading.tsx index f853b8fd..e8d89fe1 100644 --- a/app/wiki/patches/[patch]/loading.tsx +++ b/app/wiki/patches/[patch]/loading.tsx @@ -3,7 +3,7 @@ function Loading() {
diff --git a/app/wiki/patches/loading.tsx b/app/wiki/patches/loading.tsx index f853b8fd..e8d89fe1 100644 --- a/app/wiki/patches/loading.tsx +++ b/app/wiki/patches/loading.tsx @@ -3,7 +3,7 @@ function Loading() {
diff --git a/app/wiki/statistics/[path]/_components/content.tsx b/app/wiki/statistics/[path]/_components/content.tsx index 43de958a..c40a1294 100644 --- a/app/wiki/statistics/[path]/_components/content.tsx +++ b/app/wiki/statistics/[path]/_components/content.tsx @@ -84,7 +84,7 @@ function StatsDetailContent({ {table.getHeaderGroups().map((headerGroup) => ( - + {headerGroup.headers.map((header) => { return ( @@ -106,7 +106,7 @@ function StatsDetailContent({ {row.getVisibleCells().map((cell) => ( diff --git a/app/wiki/statistics/loading.tsx b/app/wiki/statistics/loading.tsx index f853b8fd..e8d89fe1 100644 --- a/app/wiki/statistics/loading.tsx +++ b/app/wiki/statistics/loading.tsx @@ -3,7 +3,7 @@ function Loading() {
diff --git a/app/wiki/tier-list/loading.tsx b/app/wiki/tier-list/loading.tsx index f853b8fd..e8d89fe1 100644 --- a/app/wiki/tier-list/loading.tsx +++ b/app/wiki/tier-list/loading.tsx @@ -3,7 +3,7 @@ function Loading() {
diff --git a/components/explore/comment/comment-box.tsx b/components/explore/comment/comment-box.tsx index f25543f9..a4ba289e 100644 --- a/components/explore/comment/comment-box.tsx +++ b/components/explore/comment/comment-box.tsx @@ -124,16 +124,16 @@ const CommentBox: React.FC = ({ comment, postId, userId }) => {
{isOpen && (
-
+
@@ -342,7 +342,7 @@ const CommentBox: React.FC = ({ comment, postId, userId }) => { {comment.replies && comment.replies.length !== 0 && (
diff --git a/components/explore/comment/comment-list.tsx b/components/explore/comment/comment-list.tsx index d5d02615..41884c5e 100644 --- a/components/explore/comment/comment-list.tsx +++ b/components/explore/comment/comment-list.tsx @@ -30,7 +30,7 @@ const CommentList: React.FC = ({ {index !== comments.length - 1 && ( -
+
)} ))} diff --git a/components/explore/post/post-box.tsx b/components/explore/post/post-box.tsx index b797e875..ffad5461 100644 --- a/components/explore/post/post-box.tsx +++ b/components/explore/post/post-box.tsx @@ -84,7 +84,7 @@ const PostBox: React.FC = ({ post, posts, index, currUser }) => {
{post.title} @@ -95,7 +95,7 @@ const PostBox: React.FC = ({ post, posts, index, currUser }) => { by

-

+

{post.createdBy}

@@ -105,7 +105,7 @@ const PostBox: React.FC = ({ post, posts, index, currUser }) => {
    {post.tags?.map((tag: string) => (

    {`#${tag}`}

    ))} @@ -176,7 +176,7 @@ const PostBox: React.FC = ({ post, posts, index, currUser }) => {
{index !== posts.length - 1 && ( -
+
)}
); diff --git a/components/explore/post/post-content.tsx b/components/explore/post/post-content.tsx index 3959fd79..fe874bf0 100644 --- a/components/explore/post/post-content.tsx +++ b/components/explore/post/post-content.tsx @@ -179,7 +179,7 @@ const PostContent: React.FC = ({ > diff --git a/components/explore/post/post-form.tsx b/components/explore/post/post-form.tsx index a0562605..2d0116b8 100644 --- a/components/explore/post/post-form.tsx +++ b/components/explore/post/post-form.tsx @@ -206,7 +206,7 @@ const PostForm = ({ currUser }: { currUser?: SafeUser }) => { + } >
diff --git a/components/explore/post/post-list-container.tsx b/components/explore/post/post-list-container.tsx index 721c2883..ea89a0da 100644 --- a/components/explore/post/post-list-container.tsx +++ b/components/explore/post/post-list-container.tsx @@ -127,15 +127,15 @@ const PostListContainer: React.FC = ({ setSearchTerm(""); }} > - + )} -
+
@@ -160,17 +160,17 @@ const PostListContainer: React.FC = ({ /> {searchTerm.length !== 0 && ( )}
diff --git a/components/shared/navbar/navbar-menu.tsx b/components/shared/navbar/navbar-menu.tsx index bff7d547..49d01df1 100644 --- a/components/shared/navbar/navbar-menu.tsx +++ b/components/shared/navbar/navbar-menu.tsx @@ -98,7 +98,7 @@ const NavMenu: React.FC = ({ currentUser }) => { className={cn( "md:static md:flex md:h-auto md:bg-transparent", collapse - ? "fixed inset-0 top-[54px] z-10 h-screen bg-bgblack/80" + ? "fixed inset-0 top-[54px] z-10 h-screen bg-deepocean/80" : "hidden" )} > @@ -147,9 +147,9 @@ const NavMenu: React.FC = ({ currentUser }) => { : menu.href } className={cn( - "cursor-pointer font-medium hover:text-navy-300 hover:transition-all hover:duration-300", + "cursor-pointer font-medium hover:text-ocean hover:transition-all hover:duration-300", active === menu.name.toLowerCase() && - "underline:ease-in-out underline decoration-navy-300 decoration-2 underline-offset-4" + "underline:ease-in-out underline decoration-ocean decoration-2 underline-offset-4" )} > {menu.name} @@ -168,7 +168,7 @@ const NavMenu: React.FC = ({ currentUser }) => { className="flex h-6 w-[72px] rounded-2xl p-2" variant="gradiantNavy" > - + Sign In @@ -183,7 +183,7 @@ const NavMenu: React.FC = ({ currentUser }) => { className="group h-8 w-8 rounded-full p-2" variant="gradiantNavy" > - + )} diff --git a/components/shared/popover.tsx b/components/shared/popover.tsx index 48712f02..6c005c24 100644 --- a/components/shared/popover.tsx +++ b/components/shared/popover.tsx @@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef< align={align} sideOffset={sideOffset} className={cn( - "text-popover-foreground z-50 w-72 rounded-md border bg-bgblack p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "text-popover-foreground z-50 w-72 rounded-md border bg-deepocean p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className )} {...props} diff --git a/components/shared/progress.tsx b/components/shared/progress.tsx index 4c8de34d..6751a15f 100644 --- a/components/shared/progress.tsx +++ b/components/shared/progress.tsx @@ -22,14 +22,14 @@ const Progress = React.forwardRef< {pos == "right" ? ( ) : ( ( return ( span]:line-clamp-1", + "bg-background placeholder:text-muted-foreground flex h-10 w-full items-center justify-between rounded-xl border border-ocean px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props} @@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
-

+

{hero.heroName}

diff --git a/components/wiki/heroes/hero-details.tsx b/components/wiki/heroes/hero-details.tsx index 2ce847d2..32244c74 100644 --- a/components/wiki/heroes/hero-details.tsx +++ b/components/wiki/heroes/hero-details.tsx @@ -436,7 +436,7 @@ function HeroDetails({ hero, heroStats, heroTier }: HeroFyiContainer) { {heroDetails.heroSkill[0].skillTag && heroDetails.heroSkill[0].skillTag.map((tag, i) => (
-
+
{tag.skillTagName.toUpperCase()}
@@ -474,7 +474,7 @@ function HeroDetails({ hero, heroStats, heroTier }: HeroFyiContainer) { {skills.skillTag && skills.skillTag.map((tag, i) => (
-
+
{tag.skillTagName.toUpperCase()}
diff --git a/components/wiki/patches/patch-info.tsx b/components/wiki/patches/patch-info.tsx index a2e5da80..52edd48a 100644 --- a/components/wiki/patches/patch-info.tsx +++ b/components/wiki/patches/patch-info.tsx @@ -40,7 +40,7 @@ export default function PatchFyi({ patch, patches }: IPatch) { className="flex cursor-pointer flex-row items-center" onClick={() => router.push(`${previousPatch?.version}`)} > - +

{previousPatch?.version}

@@ -62,7 +62,7 @@ export default function PatchFyi({ patch, patches }: IPatch) {

{nextPatch?.version}

- +
)}
@@ -128,7 +128,7 @@ export default function PatchFyi({ patch, patches }: IPatch) { {i !== heading.fields.length - 1 && field.name && (
- +
diff --git a/components/wiki/statistics/tournaments-popover.tsx b/components/wiki/statistics/tournaments-popover.tsx index 25dfcbe3..9fb14cac 100644 --- a/components/wiki/statistics/tournaments-popover.tsx +++ b/components/wiki/statistics/tournaments-popover.tsx @@ -42,7 +42,7 @@ export default function StatsContainer({ children, tourNames }: IStats) { - + Date: Mon, 18 Nov 2024 21:52:03 +0700 Subject: [PATCH 2/2] feat: update styling and layout for hero components and shared elements --- app/layout.tsx | 4 ++-- components/hero-filter.tsx | 8 ++++---- components/hero-search.tsx | 2 +- components/shared/button.tsx | 4 ++-- components/shared/input.tsx | 2 +- components/shared/navbar/navbar-menu.tsx | 7 ++++--- components/wiki/heroes/heroes-container.tsx | 12 ++++++++---- 7 files changed, 22 insertions(+), 17 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 92e539cf..62db2985 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -95,8 +95,8 @@ export default async function RootLayout({ )} diff --git a/components/hero-filter.tsx b/components/hero-filter.tsx index 57e59423..0b4c1684 100644 --- a/components/hero-filter.tsx +++ b/components/hero-filter.tsx @@ -56,13 +56,13 @@ const HeroFilter: React.FC = ({ className={`flex items-center gap-8 ${ orientation === "horizontal" ? "flex-row" - : "mt-4 flex-row gap-24 md:mt-1 md:flex-col md:items-start md:gap-4" + : "mt-4 flex-row gap-24 md:mt-0 md:flex-col md:items-start md:gap-4" }`} >

    Type @@ -81,7 +81,7 @@ const HeroFilter: React.FC = ({ ?.split(",") .includes(type.toLowerCase()) ? "opacity-100" - : "opacity-20" + : "opacity-40" }`} onClick={() => handleTypeClick(type)} > @@ -118,7 +118,7 @@ const HeroFilter: React.FC = ({ ?.split(",") .includes(lane.toLowerCase()) ? "opacity-100" - : "opacity-20" + : "opacity-40" }`} onClick={() => handleRoleClick(lane)} > diff --git a/components/hero-search.tsx b/components/hero-search.tsx index 0bbada66..5688a55d 100644 --- a/components/hero-search.tsx +++ b/components/hero-search.tsx @@ -35,7 +35,7 @@ const HeroSearch: React.FC = () => { placeholder="Search heroes..." value={searchTerm} onChange={handleSearch} - className="rounded-lg border-ocean py-4" + // className="rounded-lg border-cloud py-4" /> ); }; diff --git a/components/shared/button.tsx b/components/shared/button.tsx index b8745cad..58fe7e96 100644 --- a/components/shared/button.tsx +++ b/components/shared/button.tsx @@ -13,9 +13,9 @@ const buttonVariants = cva( outline: "bg-transparent border border-slate-200 hover:bg-slate-800", subtle: "bg-slate-100 text-slate-900 hover:bg-slate-200", gradiantNavy: - "bg-gradient-to-tl from-ocean 600 to-oceanhover:shadow-ocean 300/30 hover:shadow-lg hover:opacity-95", + "bg-gradient-to-tl from-ocean to-deepocean hover:shadow-ocean hover:shadow-lg hover:opacity-95", gradiantNavySec: - "bg-transparent border-ocean 600 border-2 shadow-ocean 600/70 hover:shadow-ocean 600/70 hover:shadow-lg hover:opacity-85 shadow-inner hover:bg-gradient-to-tl hover:from-ocean 600 hover:to-ocean 400", + "bg-transparent border-ocean border-2 shadow-ocean hover:shadow-ocean hover:shadow-lg hover:opacity-85 shadow-inner hover:bg-gradient-to-tl hover:from-ocean 600 hover:to-deepocean", ghost: "hover:bg-accent hover:text-accent-foreground", }, size: { diff --git a/components/shared/input.tsx b/components/shared/input.tsx index 8ab1c7c0..a074eac2 100644 --- a/components/shared/input.tsx +++ b/components/shared/input.tsx @@ -10,7 +10,7 @@ const Input = React.forwardRef( return ( = ({ currentUser }) => {

      @@ -147,9 +148,9 @@ const NavMenu: React.FC = ({ currentUser }) => { : menu.href } className={cn( - "cursor-pointer font-medium hover:text-ocean hover:transition-all hover:duration-300", + "px-3 py-2 font-medium text-cloud/50 hover:text-cloud hover:transition-all hover:duration-150", active === menu.name.toLowerCase() && - "underline:ease-in-out underline decoration-ocean decoration-2 underline-offset-4" + "underline:ease-in-out text-cloud underline decoration-2 underline-offset-4" )} > {menu.name} diff --git a/components/wiki/heroes/heroes-container.tsx b/components/wiki/heroes/heroes-container.tsx index ab4a19a8..408bb5ab 100644 --- a/components/wiki/heroes/heroes-container.tsx +++ b/components/wiki/heroes/heroes-container.tsx @@ -8,6 +8,7 @@ import HeroSearch from "@/components/hero-search"; import HeroCard from "./hero-card"; import { GradiantCard } from "@/components/shared/gradiant-card"; import { Query } from "@/lib/types"; +import { cn } from "@/lib/utils"; interface IHeroesContainer { heroes: HeroesDocument[]; @@ -58,11 +59,14 @@ const HeroesContainer = ({ heroes, query }: IHeroesContainer) => { return ( <> - +
      - - - + + + +
      {filteredHeroes.map((hero) => (