Users nic rate

components/home/boosted/BoostedDropCardHome.tsx

@@ -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>
@@ -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()}

components/mobile-wrapper-dialog/MobileWrapperDialog.tsx

@@ -6,6 +6,7 @@ import {
   Transition,
   TransitionChild,
 } from "@headlessui/react";
+import clsx from "clsx";
 import { Fragment } from "react";
 
 export default function MobileWrapperDialog({
@@ -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}>
@@ -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" }}
@@ -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">

components/user/identity/header/RateNicCta.tsx

@@ -0,0 +1,42 @@
+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
+      type="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>
+  );
+}

components/user/identity/header/UserPageIdentityHeader.tsx

@@ -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">
@@ -20,7 +22,11 @@ export default function UserPageIdentityHeader({
           identity?
         </p>
       </div>
-      <UserPageIdentityHeaderCIC profile={profile} cicOverview={cicOverview} />
+      <UserPageIdentityHeaderCIC
+        profile={profile}
+        cicOverview={cicOverview}
+        {...(onRateClick ? { onRateClick } : {})}
+      />
     </div>
   );
 }

components/user/identity/header/UserPageIdentityHeaderCIC.tsx

@@ -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;
@@ -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)}
@@ -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>
   );
 }