Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
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
4 changes: 2 additions & 2 deletions components/home/boosted/BoostedDropCardHome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ const BoostedDropCardHome = memo(

<div className={headerClasses}>
<div className="tw-flex tw-items-center tw-rounded-full tw-border tw-border-solid tw-border-white/10 tw-bg-black/40 tw-px-2.5 tw-py-1 tw-shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] tw-backdrop-blur-md tw-transition-colors group-hover:tw-bg-black/60">
<span className="tw-text-[10px] tw-font-semibold tw-leading-4 tw-tracking-wide tw-text-zinc-300">
<span className="tw-text-[10px] tw-font-semibold tw-leading-4 tw-tracking-wide tw-text-iron-300">
{getTimeAgoShort(drop.created_at)}
</span>
</div>
Expand Down Expand Up @@ -293,7 +293,7 @@ const BoostedDropCardHome = memo(
</div>
)}

<div className="tw-relative tw-z-10 tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-gap-2 tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-zinc-900 tw-bg-black/70 tw-px-4 tw-py-3">
<div className="tw-relative tw-z-10 tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-gap-2 tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-900 tw-bg-black/70 tw-px-4 tw-py-3">
<Link
href={author.handle ? `/${author.handle}` : "#"}
onClick={(event) => event.stopPropagation()}
Expand Down
74 changes: 39 additions & 35 deletions components/mobile-wrapper-dialog/MobileWrapperDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Transition,
TransitionChild,
} from "@headlessui/react";
import clsx from "clsx";
import { Fragment } from "react";

export default function MobileWrapperDialog({
Expand Down Expand Up @@ -49,15 +50,34 @@ export default function MobileWrapperDialog({
return `calc(${viewportHeight} - 10rem)`;
};

const panelClassNames = `mobile-wrapper-dialog tw-pointer-events-auto tw-relative tw-w-screen${
tabletModal ? "" : " md:tw-max-w-screen-md"
}${isIos ? "" : " tw-transform-gpu tw-will-change-transform"}${
tabletModal ? ` md:tw-w-full ${maxWidthClass ?? "md:tw-max-w-md"}` : ""
}`;
const panelClassNames = clsx(
"mobile-wrapper-dialog tw-pointer-events-auto tw-relative tw-w-screen",
!tabletModal && "md:tw-max-w-screen-md",
!isIos && "tw-transform-gpu tw-will-change-transform",
tabletModal && ["md:tw-w-full", maxWidthClass ?? "md:tw-max-w-md"]
);

const containerClassNames = clsx(
"tw-pointer-events-none tw-fixed tw-inset-x-0 tw-bottom-0 tw-flex tw-max-w-full tw-justify-center tw-pt-10",
tabletModal && "md:tw-inset-0 md:tw-items-center md:tw-pt-0 md:tw-p-6"
);

const containerClassNames = `tw-pointer-events-none tw-fixed tw-inset-x-0 tw-bottom-0 tw-flex tw-max-w-full tw-justify-center tw-pt-10${
tabletModal ? " md:tw-inset-0 md:tw-items-center md:tw-pt-0 md:tw-p-6" : ""
}`;
const slideTransition = {
enter:
"tw-duration-250 sm:tw-duration-350 tw-transform tw-transition tw-ease-in-out",
enterFrom: clsx(
"tw-translate-y-full",
tabletModal && "md:tw-translate-y-4 md:tw-opacity-0"
),
enterTo: clsx("tw-translate-y-0", tabletModal && "md:tw-opacity-100"),
leave:
"tw-duration-250 sm:tw-duration-350 tw-transform tw-transition tw-ease-in-out",
leaveFrom: clsx("tw-translate-y-0", tabletModal && "md:tw-opacity-100"),
leaveTo: clsx(
"tw-translate-y-full",
tabletModal && "md:tw-translate-y-4 md:tw-opacity-0"
),
};

return (
<Transition appear={true} show={isOpen} as={Fragment}>
Expand Down Expand Up @@ -92,23 +112,7 @@ export default function MobileWrapperDialog({
onClick={(e) => e.stopPropagation()}
>
<div className={containerClassNames}>
<TransitionChild
as={Fragment}
enter="tw-duration-250 sm:tw-duration-350 tw-transform tw-transition tw-ease-in-out"
enterFrom={`tw-translate-y-full${
tabletModal ? " md:tw-translate-y-4 md:tw-opacity-0" : ""
}`}
enterTo={`tw-translate-y-0${
tabletModal ? " md:tw-opacity-100" : ""
}`}
leave="tw-duration-250 sm:tw-duration-350 tw-transform tw-transition tw-ease-in-out"
leaveFrom={`tw-translate-y-0${
tabletModal ? " md:tw-opacity-100" : ""
}`}
leaveTo={`tw-translate-y-full${
tabletModal ? " md:tw-translate-y-4 md:tw-opacity-0" : ""
}`}
>
<TransitionChild as={Fragment} {...slideTransition}>
<DialogPanel
className={panelClassNames}
style={{ touchAction: "manipulation" }}
Expand Down Expand Up @@ -150,23 +154,23 @@ export default function MobileWrapperDialog({
</div>
</TransitionChild>
<div
className={`tw-flex tw-flex-col tw-overflow-hidden tw-rounded-t-xl tw-bg-iron-950${
tabletModal ? " md:tw-rounded-xl" : ""
}`}
className={clsx(
"tw-flex tw-flex-col tw-overflow-hidden tw-rounded-t-xl tw-bg-iron-950",
tabletModal && "md:tw-rounded-xl"
)}
style={{
...(fixedHeight
? { height: getHeight() }
: { maxHeight: getHeight() }),
}}
>
<div
className={`tw-flex tw-scroll-py-3 tw-flex-col tw-overflow-y-auto tw-flex-1 tw-min-h-0 ${
noPadding ? "tw-py-0" : "tw-py-6"
}${
showScrollbar
? " tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300"
: ""
}`}
className={clsx(
"tw-flex tw-scroll-py-3 tw-flex-col tw-overflow-y-auto tw-flex-1 tw-min-h-0",
noPadding ? "tw-py-0" : "tw-py-6",
showScrollbar &&
"tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300"
)}
style={{ paddingBottom: bottomPadding }}
>
<div className="tw-px-4 sm:tw-px-6">
Expand Down
67 changes: 67 additions & 0 deletions components/user/identity/header/RateNicCta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { formatNumberWithCommas } from "@/helpers/Helpers";

export const FingerprintIcon = ({
className,
}: {
readonly className?: string;
}) => (
<svg
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
<path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
<path d="M2 12a10 10 0 0 1 18-6" />
<path d="M2 16h.01" />
<path d="M21.8 16c.2-2 .131-5.354 0-6" />
<path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
<path d="M8.65 22c.21-.66.45-1.32.57-2" />
<path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
</svg>
);

export function RateNicButton({
onRateClick,
}: {
readonly onRateClick: () => void;
}) {
return (
<button
onClick={onRateClick}
className="tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-1.5 tw-rounded-lg tw-border tw-border-solid tw-border-emerald-600 tw-bg-emerald-600 tw-px-3 tw-py-2 tw-text-xs tw-font-bold tw-text-white tw-transition tw-duration-300 tw-ease-out hover:tw-border-emerald-500 hover:tw-bg-emerald-500"
>
Rate NIC
</button>
);
Comment thread
ragnep marked this conversation as resolved.
}

export function RateNicInfo({
userContribution,
}: {
readonly userContribution: number;
}) {
return (
<div className="tw-flex tw-items-center tw-justify-between tw-gap-3 tw-rounded-lg tw-border tw-border-solid tw-border-emerald-500/20 tw-bg-emerald-500/5 tw-px-3 tw-py-2">
<div className="tw-flex tw-items-center tw-gap-2">
<FingerprintIcon className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-text-emerald-400" />
<span className="tw-text-xs tw-font-normal tw-text-iron-400">
Your Rate
</span>
</div>
<span
className={`tw-text-sm tw-font-semibold ${
userContribution >= 0 ? "tw-text-emerald-400" : "tw-text-rose-400"
}`}
>
{formatNumberWithCommas(userContribution)}
</span>
</div>
);
}
8 changes: 7 additions & 1 deletion components/user/identity/header/UserPageIdentityHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import UserPageIdentityHeaderCIC from "./UserPageIdentityHeaderCIC";
export default function UserPageIdentityHeader({
profile,
cicOverview,
onRateClick,
}: {
readonly profile: ApiIdentity;
readonly cicOverview: ApiCicOverview | null;
readonly onRateClick?: () => void;
}) {
return (
<div className="tw-px-6 tw-pt-6">
Expand All @@ -20,7 +22,11 @@ export default function UserPageIdentityHeader({
identity?
</p>
</div>
<UserPageIdentityHeaderCIC profile={profile} cicOverview={cicOverview} />
<UserPageIdentityHeaderCIC
profile={profile}
cicOverview={cicOverview}
{...(onRateClick ? { onRateClick } : {})}
/>
</div>
);
}
27 changes: 25 additions & 2 deletions components/user/identity/header/UserPageIdentityHeaderCIC.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@ import type { ApiIdentity } from "@/generated/models/ApiIdentity";
import { formatNumberWithCommas } from "@/helpers/Helpers";
import { useMemo } from "react";
import OverlappingAvatars from "@/components/common/OverlappingAvatars";
import { RateNicButton } from "./RateNicCta";

const TOP_RATERS_COUNT = 5;

export default function UserPageIdentityHeaderCIC({
profile,
cicOverview,
onRateClick,
}: {
readonly profile: ApiIdentity;
readonly cicOverview: ApiCicOverview | null;
readonly onRateClick?: () => void;
}) {
const cicRating = cicOverview?.total_cic ?? profile.cic;
const raterCount = cicOverview?.contributor_count ?? 0;
Expand Down Expand Up @@ -44,11 +47,11 @@ export default function UserPageIdentityHeaderCIC({
);

return (
<div className="tw-mb-8">
<div className="tw-mb-6">
<div className="tw-mb-2 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500">
NIC
</div>
<div className="tw-mt-1 tw-flex tw-items-start tw-justify-between tw-gap-6">
<div className="tw-flex tw-items-start tw-justify-between tw-gap-6">
<div className="tw-flex tw-flex-col tw-items-start">
<div className="tw-text-3xl tw-font-semibold tw-leading-none tw-tracking-tight tw-text-white">
{formatNumberWithCommas(cicRating)}
Expand All @@ -74,6 +77,26 @@ export default function UserPageIdentityHeaderCIC({
</span>
</div>
</div>
{onRateClick && (
<div className="tw-mt-4 tw-flex tw-items-center tw-gap-3">
<RateNicButton onRateClick={onRateClick} />
{cicOverview !== null &&
cicOverview.authenticated_user_contribution !== null &&
cicOverview.authenticated_user_contribution !== 0 && (
<div className="tw-flex tw-items-center tw-gap-x-1.5">
<span className="tw-text-xs tw-font-normal tw-text-iron-400">
Your Rating:
</span>
<span className="tw-text-xs tw-font-semibold tw-text-iron-300">
{cicOverview.authenticated_user_contribution > 0 && "+"}
{formatNumberWithCommas(
cicOverview.authenticated_user_contribution
)}
</span>
</div>
)}
</div>
)}
</div>
);
}
Loading