wip genericitem styling

MutinyWallet · Feb 5, 2024 · 49aeffc · 49aeffc
1 parent 053c0e3
commit 49aeffc
Show file tree

Hide file tree

Showing 9 changed files with 497 additions and 107 deletions.
diff --git a/src/assets/icons/globe.svg b/src/assets/icons/globe.svg
diff --git a/src/assets/icons/mini-clock.svg b/src/assets/icons/mini-clock.svg
diff --git a/src/assets/svg/Clock.tsx b/src/assets/svg/Clock.tsx
@@ -0,0 +1,16 @@
+export function Clock() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6 10.8078C7.27304 10.8078 8.49394 10.3021 9.39411 9.40193C10.2943 8.50175 10.8 7.28085 10.8 6.00781C10.8 4.73477 10.2943 3.51387 9.39411 2.6137C8.49394 1.71353 7.27304 1.20781 6 1.20781C4.72696 1.20781 3.50606 1.71353 2.60589 2.6137C1.70571 3.51387 1.2 4.73477 1.2 6.00781C1.2 7.28085 1.70571 8.50175 2.60589 9.40193C3.50606 10.3021 4.72696 10.8078 6 10.8078ZM6 0.0078125C6.78793 0.0078125 7.56815 0.163007 8.2961 0.464535C9.02405 0.766064 9.68549 1.20802 10.2426 1.76517C10.7998 2.32232 11.2417 2.98376 11.5433 3.71171C11.8448 4.43967 12 5.21988 12 6.00781C12 7.59911 11.3679 9.12524 10.2426 10.2505C9.11742 11.3757 7.5913 12.0078 6 12.0078C2.682 12.0078 0 9.30781 0 6.00781C0 4.41651 0.632141 2.89039 1.75736 1.76517C2.88258 0.639954 4.4087 0.0078125 6 0.0078125ZM6.3 3.00781V6.15781L9 7.75981L8.55 8.49781L5.4 6.60781V3.00781H6.3Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
diff --git a/src/assets/svg/Globe.tsx b/src/assets/svg/Globe.tsx
@@ -0,0 +1,29 @@
+export function Globe() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clip-path="url(#clip0_3286_42492)">
+                <path
+                    d="M5.97254 0.429688C4.4974 0.437252 3.08547 1.02953 2.0464 2.07663C1.00732 3.12373 0.425923 4.54017 0.429706 6.01533C0.433488 7.49048 1.02214 8.90393 2.06658 9.94569C3.11101 10.9874 4.52596 11.5725 6.00112 11.5725C7.47628 11.5725 8.89122 10.9874 9.93566 9.94569C10.9801 8.90393 11.5687 7.49048 11.5725 6.01533C11.5763 4.54017 10.9949 3.12373 9.95583 2.07663C8.91676 1.02953 7.50483 0.437252 6.02969 0.429688H5.97254Z"
+                    stroke="currentColor"
+                    stroke-width="0.742857"
+                />
+                <path
+                    d="M6.00112 0.429688V11.5725M11.5725 6.00112H0.429688M1.68683 2.57254C2.94605 3.47089 4.45429 3.95375 6.00112 3.95375C7.54794 3.95375 9.05618 3.47089 10.3154 2.57254M10.3154 9.42969C9.05618 8.53134 7.54794 8.04848 6.00112 8.04848C4.45429 8.04848 2.94605 8.53134 1.68683 9.42969M5.57254 0.572545C4.77859 1.24305 4.14051 2.07873 3.70282 3.02127C3.26513 3.9638 3.03837 4.99049 3.03837 6.02969C3.03837 7.06889 3.26513 8.09558 3.70282 9.03811C4.14051 9.98064 4.77859 10.8163 5.57254 11.4868M6.42969 11.4868C7.22364 10.8163 7.86172 9.98064 8.29941 9.03811C8.7371 8.09558 8.96386 7.06889 8.96386 6.02969C8.96386 4.99049 8.7371 3.9638 8.29941 3.02127C7.86172 2.07873 7.22364 1.24305 6.42969 0.572545"
+                    stroke="currentColor"
+                    stroke-width="0.514286"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_3286_42492">
+                    <rect width="12" height="12" fill="currentColor" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
diff --git a/src/assets/svg/Private.tsx b/src/assets/svg/Private.tsx
@@ -0,0 +1,16 @@
+export function PrivateEye() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 20 20"
+            fill="none"
+        >
+            <path
+                d="M9.8585 7.5L12.5002 10.1333V10C12.5002 9.33696 12.2368 8.70107 11.7679 8.23223C11.2991 7.76339 10.6632 7.5 10.0002 7.5H9.8585ZM6.27516 8.16667L7.56683 9.45833C7.52516 9.63333 7.50016 9.80833 7.50016 10C7.50016 10.663 7.76356 11.2989 8.2324 11.7678C8.70124 12.2366 9.33712 12.5 10.0002 12.5C10.1835 12.5 10.3668 12.475 10.5418 12.4333L11.8335 13.725C11.2752 14 10.6585 14.1667 10.0002 14.1667C8.89509 14.1667 7.83529 13.7277 7.05388 12.9463C6.27248 12.1649 5.8335 11.1051 5.8335 10C5.8335 9.34167 6.00016 8.725 6.27516 8.16667ZM1.66683 3.55833L3.56683 5.45833L3.94183 5.83333C2.56683 6.91667 1.4835 8.33333 0.833496 10C2.27516 13.6583 5.8335 16.25 10.0002 16.25C11.2918 16.25 12.5252 16 13.6502 15.55L14.0085 15.9L16.4418 18.3333L17.5002 17.275L2.72516 2.5M10.0002 5.83333C11.1052 5.83333 12.165 6.27232 12.9464 7.05372C13.7278 7.83512 14.1668 8.89493 14.1668 10C14.1668 10.5333 14.0585 11.05 13.8668 11.5167L16.3085 13.9583C17.5585 12.9167 18.5585 11.55 19.1668 10C17.7252 6.34167 14.1668 3.75 10.0002 3.75C8.8335 3.75 7.71683 3.95833 6.66683 4.33333L8.47516 6.125C8.95016 5.94167 9.4585 5.83333 10.0002 5.83333Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
diff --git a/src/components/GenericItem.tsx b/src/components/GenericItem.tsx
@@ -0,0 +1,137 @@
+import { Show } from "solid-js";
+
+import bolt from "~/assets/icons/bolt.svg";
+import { Clock } from "~/assets/svg/Clock";
+import { Globe } from "~/assets/svg/Globe";
+import { PrivateEye } from "~/assets/svg/Private";
+import { LabelCircle } from "~/components";
+
+export function GenericItem(props: {
+    primaryAvatarUrl: string;
+    secondaryAvatarUrl?: string;
+    primaryName: string;
+    secondaryName?: string;
+    verb: string;
+    amount: bigint;
+    date: string;
+    due?: string;
+    message?: string;
+    accent?: "green";
+    public?: boolean;
+    showFiat?: boolean;
+    genericAvatar?: boolean;
+    forceSecondary?: boolean;
+}) {
+    return (
+        <div
+            class="grid w-full py-3"
+            classList={{
+                "grid-cols-[auto_1fr_auto]": true
+            }}
+        >
+            <div class="self-center">
+                <LabelCircle
+                    label={false}
+                    name={props.primaryName}
+                    contact
+                    image_url={props.primaryAvatarUrl}
+                    generic={props.genericAvatar}
+                />
+            </div>
+            <div class="flex flex-col items-start gap-1 px-2">
+                {/* TITLE TEXT */}
+                <h2 class="text-sm">
+                    <strong
+                        classList={{
+                            "text-m-grey-400": props.genericAvatar
+                        }}
+                    >
+                        {props.primaryName}
+                    </strong>
+                    <span class="font-light">{` ${props.verb} `}</span>
+                    <Show when={props.secondaryName}>
+                        <strong>{props.secondaryName}</strong>
+                    </Show>
+                </h2>
+                <div class="flex flex-wrap gap-1">
+                    {/* AMOUNT */}
+                    <div
+                        class="flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold text-white"
+                        classList={{
+                            "bg-m-grey-800": !props.accent,
+                            "bg-m-green/40 ": props.accent === "green"
+                        }}
+                    >
+                        <img src={bolt} width={8} height={8} />
+                        {`${props.amount.toLocaleString()} sats`}
+                    </div>
+                    {/* FIAT AMOUNT */}
+                    <Show when={props.showFiat}>
+                        <div class="flex items-center gap-1 rounded-full py-1 text-xs font-semibold text-m-grey-400">
+                            {`~$42.00 USD`}
+                        </div>
+                    </Show>
+                    {/* OPTIONAL MESSAGE */}
+                    <Show when={props.message}>
+                        <div class="font-regular line-clamp-1 min-w-0 flex-1 break-all rounded-full bg-m-grey-800 px-2 text-xs leading-6">
+                            {props.message}
+                        </div>
+                    </Show>
+                </div>
+                {/* DATE WITH SECOND AVATAR */}
+                <Show when={props.secondaryAvatarUrl || props.forceSecondary}>
+                    <div class="flex items-center gap-1 text-m-grey-400">
+                        <Show when={props.public}>
+                            {/* <img src={globe} width={12} height={12} /> */}
+                            <Globe />
+                        </Show>
+                        <Show when={!props.public}>
+                            <PrivateEye />
+                            {/* <img src={privateEye} width={12} height={12} /> */}
+                        </Show>
+                        <span class="text-xs text-m-grey-400">
+                            {props.date}
+                        </span>
+                    </div>
+                </Show>
+            </div>
+            <Show when={props.secondaryAvatarUrl || props.forceSecondary}>
+                <div class="self-center">
+                    <LabelCircle
+                        label={false}
+                        name={props.secondaryName}
+                        contact
+                        image_url={props.secondaryAvatarUrl}
+                    />
+                </div>
+            </Show>
+            <Show when={!props.secondaryAvatarUrl && !props.forceSecondary}>
+                <div class="self-center">
+                    {/* DATE */}
+                    <div class="flex items-center gap-1 text-m-grey-400">
+                        <Show when={props.public}>
+                            {/* <img src={globe} width={12} height={12} /> */}
+                            <Globe />
+                        </Show>
+                        <Show when={!props.public}>
+                            <PrivateEye />
+                            {/* <img src={privateEye} width={12} height={12} /> */}
+                        </Show>
+                        <span class="text-xs text-m-grey-400">
+                            {props.date}
+                        </span>
+                    </div>
+                    {/* DUE */}
+                    <Show when={props.due}>
+                        <div class="flex items-center gap-1 text-m-grey-400">
+                            <Clock />
+                            <span class="text-xs text-m-grey-400">
+                                {props.due}
+                            </span>
+                        </div>
+                    </Show>
+                </div>
+            </Show>
+        </div>
+    );
+}
diff --git a/src/components/LabelCircle.tsx b/src/components/LabelCircle.tsx
@@ -42,6 +42,7 @@ export function LabelCircle(props: {
     image_url?: string;
     contact: boolean;
     label: boolean;
+    generic?: boolean;
     channel?: HackActivityType;
     size?: "small" | "large" | "xl";
     onClick?: () => void;
@@ -89,7 +90,7 @@ export function LabelCircle(props: {
                 <Match when={props.channel === "ChannelClose"}>
                     <img src={off} alt="channel close" />
                 </Match>
-                <Match when={text() === "?"}>
+                <Match when={text() === "?" || props.generic}>
                     <img src={avatar} alt="avatar" />
                 </Match>
                 <Match when={true}>{text()}</Match>