Skip to content

Commit

Permalink
Merge pull request #240 from troll-org/design_system
Browse files Browse the repository at this point in the history 
Design system
  • Loading branch information
@raymondtju
raymondtju authored Nov 18, 2024
2 parents 80d9ce0 + 92b72cd commit 64836aa
Show file tree
Hide file tree
Showing 42 changed files with 117 additions and 117 deletions.
6 changes: 3 additions & 3 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default async function RootLayout({
return (
<html
lang="en"
className={`${inter.className} ${fontHeading.variable} ${fontSatoshi.variable} text-softGray`}
className={`${inter.className} ${fontHeading.variable} ${fontSatoshi.variable} text-cloud`}
>
<CSPostHogProvider>
{process.env.NODE_ENV === "production" && (
Expand Down Expand Up @@ -95,8 +95,8 @@ export default async function RootLayout({
)}
<body
className={cn(
"relative mx-auto mb-8 mt-24 bg-bgblack text-pwhite selection:bg-navy-400 selection:text-white",
"after:fixed after:inset-x-0 after:top-[-1450px] after:z-[-1] after:mx-auto after:h-[1280px] after:w-[1880px] after:rounded-full after:bg-navy-500 after:blur-[400px]"
"relative mx-auto mb-8 mt-24 bg-deepocean text-cloud"
// "after:fixed after:inset-x-0 after:top-[-1450px] after:z-[-1] after:mx-auto after:h-[1280px] after:w-[1880px] after:rounded-full after:bg-sea after:blur-[400px]"
)}
>
<ToasterProvider />
Expand Down
2 changes: 1 addition & 1 deletion app/profile/[username]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default async function LayoutProfile({
return (
<main className="max-w-[1280px] xl:mx-auto">
<div className="flex flex-1 flex-col gap-1.5 md:flex-row">
<div className="mx-auto flex gap-1.5 text-softGray">
<div className="mx-auto flex gap-1.5 text-cloud">
<ProfileBio
currentUser={currentUser}
user={isExistingUser}
Expand Down
2 changes: 1 addition & 1 deletion app/wiki/heroes/[hero]/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function Loading() {
<div className="flex items-center justify-center pt-32">
<svg
fill="none"
className="h-8 w-8 animate-spin text-pwhite "
className="h-8 w-8 animate-spin text-white "
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down
2 changes: 1 addition & 1 deletion app/wiki/patches/[patch]/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function Loading() {
<div className="flex items-center justify-center pt-32">
<svg
fill="none"
className="h-8 w-8 animate-spin text-pwhite "
className="h-8 w-8 animate-spin text-white "
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down
2 changes: 1 addition & 1 deletion app/wiki/patches/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function Loading() {
<div className="flex items-center justify-center pt-32">
<svg
fill="none"
className="h-8 w-8 animate-spin text-pwhite "
className="h-8 w-8 animate-spin text-white "
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down
4 changes: 2 additions & 2 deletions app/wiki/statistics/[path]/_components/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function StatsDetailContent({
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="border-b border-navy-700">
<TableRow key={headerGroup.id} className="border-b border-ocean">
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id} className="px-0">
Expand All @@ -106,7 +106,7 @@ function StatsDetailContent({
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="border-b border-navy-700"
className="border-b border-ocean"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="px-0 py-2 sm:p-4">
Expand Down
2 changes: 1 addition & 1 deletion app/wiki/statistics/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function Loading() {
<div className="flex items-center justify-center pt-32">
<svg
fill="none"
className="h-8 w-8 animate-spin text-pwhite "
className="h-8 w-8 animate-spin text-white "
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down
2 changes: 1 addition & 1 deletion app/wiki/tier-list/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function Loading() {
<div className="flex items-center justify-center pt-32">
<svg
fill="none"
className="h-8 w-8 animate-spin text-pwhite "
className="h-8 w-8 animate-spin text-white "
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down
12 changes: 6 additions & 6 deletions components/explore/comment/comment-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,16 @@ const CommentBox: React.FC<CommentBoxProps> = ({ comment, postId, userId }) => {
<div className="relative inline-block text-left">
<button
type="button"
className="flex h-5 w-5 items-center justify-center rounded-full transition-all ease-in-out hover:text-navy-300 hover:duration-300 focus:outline-none"
className="flex h-5 w-5 items-center justify-center rounded-full transition-all ease-in-out hover:text-ocean hover:duration-300 focus:outline-none"
onClick={handleClick}
>
<MoreVertical />
</button>
{isOpen && (
<div className="absolute right-0 z-50 mt-2 w-40 origin-top-right">
<div className="rounded-lg bg-lblack py-1" role="none">
<div className="rounded-lg bg-black/80 py-1" role="none">
<button
className="block px-4 py-2 hover:text-navy-300 hover:duration-300"
className="block px-4 py-2 hover:text-ocean hover:duration-300"
onClick={() => {
setEditActive(!editActive);
setIsOpen(!isOpen);
Expand Down Expand Up @@ -184,7 +184,7 @@ const CommentBox: React.FC<CommentBoxProps> = ({ comment, postId, userId }) => {
{expandedable && (
<button
onClick={toggleExpand}
className="font-bold text-navy-300 transition-all ease-in-out hover:underline hover:duration-300"
className="font-bold text-ocean transition-all ease-in-out hover:underline hover:duration-300"
>
{!expanded ? "See more" : "See less"}
</button>
Expand Down Expand Up @@ -342,7 +342,7 @@ const CommentBox: React.FC<CommentBoxProps> = ({ comment, postId, userId }) => {
{comment.replies && comment.replies.length !== 0 && (
<div>
<button
className="flex cursor-pointer flex-row items-center transition-all ease-in-out hover:text-navy-300 hover:duration-300"
className="flex cursor-pointer flex-row items-center transition-all ease-in-out hover:text-ocean hover:duration-300"
onClick={() => setIsEnableReplyList(!isEnableReplyList)}
>
<MessagesSquare className="mr-2 h-5 w-5" />
Expand All @@ -356,7 +356,7 @@ const CommentBox: React.FC<CommentBoxProps> = ({ comment, postId, userId }) => {
)}
<div>
<button
className="flex cursor-pointer flex-row items-center transition-all ease-in-out hover:text-navy-300 hover:duration-300"
className="flex cursor-pointer flex-row items-center transition-all ease-in-out hover:text-ocean hover:duration-300"
onClick={() => setIsAddingReply(!isAddingReply)}
>
<Reply className="mr-2 h-5 w-5" />
Expand Down
2 changes: 1 addition & 1 deletion components/explore/comment/comment-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const NewCommentForm: React.FC<CommentProps> = ({ postId, img }) => {
) : (
<SendIcon
size={20}
className="mb-[6px] rotate-45 hover:text-navy-300 hover:duration-300"
className="mb-[6px] rotate-45 hover:text-ocean hover:duration-300"
/>
)}
</button>
Expand Down
2 changes: 1 addition & 1 deletion components/explore/comment/comment-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const CommentList: React.FC<CommentListProps> = ({
<React.Fragment key={comment.id}>
<CommentBox comment={comment} postId={postId} userId={userId} />
{index !== comments.length - 1 && (
<div className="absolute inset-x-[1px] h-0.5 w-full bg-navy-400/30"></div>
<div className="absolute inset-x-[1px] h-0.5 w-full bg-ocean"></div>
)}
</React.Fragment>
))}
Expand Down
8 changes: 4 additions & 4 deletions components/explore/post/post-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const PostBox: React.FC<PostBoxProps> = ({ post, posts, index, currUser }) => {
<div className="flex min-w-0 flex-col">
<Link
href={`/explore/${post.id}`}
className="text-white-500 mt-0.5 flex text-xl font-semibold leading-6 ease-in-out hover:text-navy-200 hover:duration-300"
className="text-white-500mt-0.5 flex text-xl font-semibold leading-6 ease-in-out hover:text-ocean hover:duration-300"
>
{post.title}
</Link>
Expand All @@ -95,7 +95,7 @@ const PostBox: React.FC<PostBoxProps> = ({ post, posts, index, currUser }) => {
by
</p>
<Link href={`/profile/${post.createdBy}/statistics`}>
<p className="text-xs mt-2 truncate leading-5 text-gray-500 ease-in-out hover:text-navy-300 hover:underline">
<p className="text-xs mt-2 truncate leading-5 text-gray-500 ease-in-out hover:text-ocean hover:underline">
{post.createdBy}
</p>
</Link>
Expand All @@ -105,7 +105,7 @@ const PostBox: React.FC<PostBoxProps> = ({ post, posts, index, currUser }) => {
<ul role="list" className="flex flex-row items-center gap-1">
{post.tags?.map((tag: string) => (
<p
className="text-xs mt-2 truncate leading-5 text-navy-300 ease-in-out"
className="text-xs mt-2 truncate leading-5 text-ocean ease-in-out"
key={tag}
>{`#${tag}`}</p>
))}
Expand Down Expand Up @@ -176,7 +176,7 @@ const PostBox: React.FC<PostBoxProps> = ({ post, posts, index, currUser }) => {
</div>

{index !== posts.length - 1 && (
<div className="absolute inset-x-0 bottom-0 mx-[-23px] h-0.5 bg-navy-400/30"></div>
<div className="absolute inset-x-0 bottom-0 mx-[-23px] h-0.5 bg-ocean"></div>
)}
</div>
);
Expand Down
12 changes: 6 additions & 6 deletions components/explore/post/post-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,19 +179,19 @@ const PostContent: React.FC<PostContentProp> = ({
>
<button
type="button"
className="flex h-5 w-5 items-center justify-center rounded-full transition-all ease-in-out hover:text-navy-300 hover:duration-300 focus:outline-none"
className="flex h-5 w-5 items-center justify-center rounded-full transition-all ease-in-out hover:text-ocean hover:duration-300 focus:outline-none"
onClick={handleClick}
>
<MoreVertical />
</button>
{isOpen && (
<div className="absolute right-0 mt-2 w-40 origin-top-right ">
<div
className="rounded-lg bg-lblack py-1"
className="rounded-lg bg-black/80 py-1"
role="none"
>
<button
className="block px-4 py-2 hover:text-navy-300 hover:duration-300"
className="block px-4 py-2 hover:text-ocean hover:duration-300"
onClick={() => {
setEditActive(!editActive);
setIsOpen(!isOpen);
Expand Down Expand Up @@ -227,7 +227,7 @@ const PostContent: React.FC<PostContentProp> = ({
by
</p>
<Link href={`/profile/${post.createdBy}/statistics`}>
<p className="text-xs mt-2 truncate leading-5 text-gray-500 ease-in-out hover:text-navy-300 hover:underline">
<p className="text-xs mt-2 truncate leading-5 text-gray-500 ease-in-out hover:text-ocean hover:underline">
{post.createdBy}
</p>
</Link>
Expand All @@ -236,7 +236,7 @@ const PostContent: React.FC<PostContentProp> = ({
<ul role="list" className="flex flex-row items-center gap-1">
{post.tags?.map((tag: string) => (
<p
className="text-xs mt-2 truncate leading-5 text-navy-300 ease-in-out"
className="text-xs mt-2 truncate leading-5 text-ocean ease-in-out"
key={tag}
>{`#${tag}`}</p>
))}
Expand All @@ -255,7 +255,7 @@ const PostContent: React.FC<PostContentProp> = ({
{expandedable && (
<button
onClick={toggleExpand}
className="font-bold text-navy-300 transition-all ease-in-out hover:underline hover:duration-300"
className="font-bold text-ocean transition-all ease-in-out hover:underline hover:duration-300"
>
{!expanded ? "See more" : "See less"}
</button>
Expand Down
2 changes: 1 addition & 1 deletion components/explore/post/post-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ const PostForm = ({ currUser }: { currUser?: SafeUser }) => {
<DialogFit
title="Choose image (Max 5 MB)"
triggerChild={
<Paperclip className="mr-2 mt-1 cursor-pointer transition-all ease-in-out hover:text-navy-300 hover:duration-300" />
<Paperclip className="mr-2 mt-1 cursor-pointer transition-all ease-in-out hover:text-ocean hover:duration-300" />
}
>
<div>
Expand Down
12 changes: 6 additions & 6 deletions components/explore/post/post-list-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,15 +127,15 @@ const PostListContainer: React.FC<PostListContainerProps> = ({
setSearchTerm("");
}}
>
<ChevronLeft className="transition-all hover:text-navy-300 hover:duration-300" />
<ChevronLeft className="transition-all hover:text-ocean hover:duration-300" />
</button>
)}
<div className="flex grow flex-row items-center gap-2 rounded-xl border border-navy-300 bg-transparent">
<div className="flex grow flex-row items-center gap-2 rounded-xl border border-ocean bg-transparent">
<div
className={cn(
"flex grow flex-row items-center",
isInputFocused
? "rounded-l-lg border focus:ring-1 focus:ring-navy-200 focus:ring-offset-0"
? "rounded-l-lg border focus:ring-1 focus:ring-ocean focus:ring-offset-0"
: ""
)}
>
Expand All @@ -160,17 +160,17 @@ const PostListContainer: React.FC<PostListContainerProps> = ({
/>
{searchTerm.length !== 0 && (
<button onClick={() => setSearchTerm("")}>
<X className="mr-2 transition-all hover:text-navy-300 hover:duration-300" />
<X className="mr-2 transition-all hover:text-ocean hover:duration-300" />
</button>
)}
</div>
<button>
<Search className="mr-2 transition-all hover:text-navy-300 hover:duration-300" />
<Search className="mr-2 transition-all hover:text-ocean hover:duration-300" />
</button>
</div>
</form>
<select
className="h-[2.45rem] w-24 rounded-xl border border-navy-300/50 bg-black p-2 shadow-sm focus:outline-none"
className="h-[2.45rem] w-24 rounded-xl border border-ocean bg-black p-2 shadow-sm focus:outline-none"
value={selectedOption}
onChange={handleChange}
>
Expand Down
2 changes: 1 addition & 1 deletion components/explore/random-user-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const RandomUser: React.FC<RandomUserProps> = ({ randomUsers }) => {
</>
) : (
<RotateCcw
className="transition-all ease-in-out hover:text-navy-200 hover:duration-300 "
className="transition-all ease-in-out hover:text-ocean hover:duration-300 "
onClick={async (e) => {
handleGenerateRandom(e);
}}
Expand Down
8 changes: 4 additions & 4 deletions components/explore/reply/reply-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,16 +107,16 @@ const ReplyBox: React.FC<ReplyBoxProps> = ({ reply, postId, userId }) => {
<div className="relative inline-block text-left" ref={optionRef}>
<button
type="button"
className="flex h-5 w-5 items-center justify-center rounded-full transition-all ease-in-out hover:text-navy-300 hover:duration-300 focus:outline-none"
className="flex h-5 w-5 items-center justify-center rounded-full transition-all ease-in-out hover:text-ocean hover:duration-300 focus:outline-none"
onClick={handleClick}
>
<MoreVertical />
</button>
{isOpen && (
<div className="absolute right-0 z-50 mt-2 w-40 origin-top-right">
<div className="rounded-lg bg-lblack py-1" role="none">
<div className="rounded-lg bg-black/80 py-1" role="none">
<button
className="block px-4 py-2 hover:text-navy-300 hover:duration-300"
className="block px-4 py-2 hover:text-ocean hover:duration-300"
onClick={() => {
setEditActive(!editActive);
setIsOpen(!isOpen);
Expand Down Expand Up @@ -166,7 +166,7 @@ const ReplyBox: React.FC<ReplyBoxProps> = ({ reply, postId, userId }) => {
{expandedable && (
<button
onClick={toggleExpand}
className="font-bold text-navy-300 transition-all ease-in-out hover:underline hover:duration-300"
className="font-bold text-ocean transition-all ease-in-out hover:underline hover:duration-300"
>
{!expanded ? "See more" : "See less"}
</button>
Expand Down
2 changes: 1 addition & 1 deletion components/explore/reply/reply-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const ReplyForm: React.FC<ReplyProps> = ({ postId, commentId, onReplied }) => {
) : (
<SendIcon
size={20}
className="mb-[6px] rotate-45 hover:text-navy-300 hover:duration-300"
className="mb-[6px] rotate-45 hover:text-ocean hover:duration-300"
/>
)}
</button>
Expand Down
2 changes: 1 addition & 1 deletion components/explore/user-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ const UserList: React.FC<UserListProps> = ({ filter, currentUser }) => {
</div>
</div>
{index !== users.length - 1 && (
<div className="absolute inset-x-0 bottom-0 mx-[-23px] h-0.5 bg-navy-400/30"></div>
<div className="absolute inset-x-0 bottom-0 mx-[-23px] h-0.5 bg-ocean"></div>
)}
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions components/hero-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@ const HeroFilter: React.FC<HeroFilterProps> = ({
className={`flex items-center gap-8 ${
orientation === "horizontal"
? "flex-row"
: "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"
}`}
>
<ul className="flex flex-col gap-2">
<p
className={`text-medium text-sm ${
orientation === "horizontal" ? "mt-1" : "md:mt-4"
orientation === "horizontal" ? "mt-1" : "md:mt-0"
}`}
>
Type
Expand All @@ -81,7 +81,7 @@ const HeroFilter: React.FC<HeroFilterProps> = ({
?.split(",")
.includes(type.toLowerCase())
? "opacity-100"
: "opacity-20"
: "opacity-40"
}`}
onClick={() => handleTypeClick(type)}
>
Expand Down Expand Up @@ -120,7 +120,7 @@ const HeroFilter: React.FC<HeroFilterProps> = ({
?.split(",")
.includes(lane.toLowerCase())
? "opacity-100"
: "opacity-20"
: "opacity-40"
}`}
onClick={() => handleRoleClick(lane)}
>
Expand Down
2 changes: 1 addition & 1 deletion components/hero-search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const HeroSearch: React.FC = () => {
placeholder="Search heroes..."
value={searchTerm}
onChange={handleSearch}
className="rounded-lg border-navy-700 py-4 pr-10"
// className="rounded-lg border-cloud py-4"
/>
{isLoading && (
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
Expand Down
Loading

1 comment on commit 64836aa

@github-actions
Copy link

Choose a reason for hiding this comment

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

Deploy preview for mlbb-fyi ready!

✅ Preview
https://mlbb-luv5cxb1x-jinjays.vercel.app

Built with commit 64836aa.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.