refactor: cleanup reactions modal

packages/app/src/Components/Event/Note/ReactionsModal.tsx

@@ -1,11 +1,8 @@
-import "./ReactionsModal.css";
-
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
 import { useEventReactions, useReactions } from "@snort/system-react";
-import { useMemo, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
 
-import CloseButton from "@/Components/Button/CloseButton";
 import Icon from "@/Components/Icons/Icon";
 import Modal from "@/Components/Modal/Modal";
 import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors";
@@ -58,45 +55,42 @@ const ReactionsModal = ({ onClose, event, initialTab = 0 }: ReactionsModalProps)
   const [tab, setTab] = useState(tabs[initialTab]);
 
   const renderReactionItem = (ev: TaggedNostrEvent, icon: string, iconClass?: string, size?: number) => (
-    <div key={ev.id} className="reactions-item">
-      <div className="reaction-icon">
+    <Fragment key={ev.id}>
+      <div className="mx-auto">
         <Icon name={icon} size={size} className={iconClass} />
       </div>
       <ProfileImage pubkey={ev.pubkey} showProfileCard={true} />
-    </div>
+    </Fragment>
   );
 
   return (
-    <Modal id="reactions" className="reactions-modal" onClose={onClose}>
-      <CloseButton onClick={onClose} className="absolute right-4 top-3" />
-      <div className="reactions-header">
-        <h2>
-          <FormattedMessage {...messages.ReactionsCount} values={{ n: total }} />
-        </h2>
+    <Modal id="reactions" onClose={onClose}>
+      <div className="text-lg font-semibold mb-2">
+        <FormattedMessage defaultMessage="Reactions ({n})" values={{ n: total }} />
       </div>
       <TabSelectors tabs={tabs} tab={tab} setTab={setTab} />
-      <div className="reactions-body" key={tab.value}>
-        {tab.value === 0 && likes.map(ev => renderReactionItem(ev, "heart-solid", "text-heart"))}
-        {tab.value === 1 &&
-          zaps.map(
-            z =>
-              z.sender && (
-                <div key={z.id} className="reactions-item">
-                  <ZapAmount n={z.amount} />
-                  <ProfileImage
-                    showProfileCard={true}
-                    pubkey={z.anonZap ? "" : z.sender}
-                    subHeader={<div title={z.content}>{z.content}</div>}
-                    link={z.anonZap ? "" : undefined}
-                    overrideUsername={
-                      z.anonZap ? formatMessage({ defaultMessage: "Anonymous", id: "LXxsbk" }) : undefined
-                    }
-                  />
-                </div>
-              ),
-          )}
-        {tab.value === 2 && sortedReposts.map(ev => renderReactionItem(ev, "repost", "text-repost", 16))}
-        {tab.value === 3 && dislikes.map(ev => renderReactionItem(ev, "dislike"))}
+      <div className="h-[30vh] overflow-y-auto">
+        <div className="grid grid-cols-[100px_auto] gap-y-2 items-center py-2" key={tab.value}>
+          {tab.value === 0 && likes.map(ev => renderReactionItem(ev, "heart-solid", "text-heart"))}
+          {tab.value === 1 &&
+            zaps.map(
+              z =>
+                z.sender && (
+                  <Fragment key={z.id}>
+                    <ZapAmount n={z.amount} />
+                    <ProfileImage
+                      showProfileCard={true}
+                      pubkey={z.anonZap ? "" : z.sender}
+                      subHeader={<div title={z.content}>{z.content}</div>}
+                      link={z.anonZap ? "" : undefined}
+                      overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
+                    />
+                  </Fragment>
+                ),
+            )}
+          {tab.value === 2 && sortedReposts.map(ev => renderReactionItem(ev, "repost", "text-repost", 16))}
+          {tab.value === 3 && dislikes.map(ev => renderReactionItem(ev, "dislike"))}
+        </div>
       </div>
     </Modal>
   );

packages/app/src/Components/Event/ZapsSummary.tsx

@@ -26,13 +26,9 @@ export const ZapsSummary = ({ zaps, onClick }: ZapsSummaryProps) => {
   };
 
   return (
-    <div className="zaps-summary" onClick={myOnClick}>
-      <div className={`top-zap`}>
-        <div className="summary">
-          <AvatarGroup ids={sortedZappers} onClick={() => {}} />
-          {zaps.length > 3 && <div className="hidden md:flex -ml-2">+{zaps.length - 3}</div>}
-        </div>
-      </div>
+    <div className="flex items-center cursor-pointer" onClick={myOnClick}>
+      <AvatarGroup ids={sortedZappers} onClick={() => {}} />
+      {zaps.length > 3 && <div className="hidden md:inline-flex">+{zaps.length - 3}</div>}
     </div>
   );
 };

packages/app/src/Components/TabSelectors/TabSelectors.css

@@ -1,60 +0,0 @@
-.tabs {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  overflow-x: scroll;
-  -ms-overflow-style: none;
-  /* for Internet Explorer, Edge */
-  scrollbar-width: none;
-  /* Firefox */
-  white-space: nowrap;
-  gap: 8px;
-}
-
-.tabs::-webkit-scrollbar {
-  display: none;
-}
-
-.light .tab {
-  border: 1px solid var(--border-color);
-}
-
-.tab.active {
-  background: var(--gray-superdark);
-}
-
-.light .tab.active {
-  background: #fff;
-  border-color: #bfc6d6;
-}
-
-.tab {
-  background: var(--gray-ultradark);
-  color: var(--font-secondary-color);
-  border-radius: 100px;
-  font-weight: 600;
-  font-size: 16px;
-  padding: 6px 12px;
-  display: flex;
-  align-items: center;
-  justify-items: center;
-  gap: 6px;
-}
-
-.tab.active {
-  color: var(--font-color);
-}
-
-.tabs > div {
-  cursor: pointer;
-}
-
-.tab.disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.tab:hover {
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
-}

packages/app/src/Components/TabSelectors/TabSelectors.tsx

@@ -1,5 +1,4 @@
-import "./TabSelectors.css";
-
+import classNames from "classnames";
 import { ReactNode } from "react";
 
 import useHorizontalScroll from "@/Hooks/useHorizontalScroll";
@@ -23,7 +22,14 @@ interface TabElementProps extends Omit<TabsProps, "tabs"> {
 export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
   return (
     <div
-      className={`tab${tab.value === t.value ? " active" : ""}${t.disabled ? " disabled" : ""}`}
+      className={classNames(
+        "px-4 py-2 my-1 border border-border-color rounded-full cursor-pointer font-semibold bg-gray-dark",
+        "hover:drop-shadow-sm hover:bg-gray",
+        {
+          "": tab.value === t.value,
+          disabled: t.disabled,
+        },
+      )}
       onClick={() => !t.disabled && setTab(t)}>
       {t.text}
     </div>
@@ -33,7 +39,7 @@ export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
 const TabSelectors = ({ tabs, tab, setTab }: TabsProps) => {
   const horizontalScroll = useHorizontalScroll();
   return (
-    <div className="tabs" ref={horizontalScroll}>
+    <div className="flex gap-2 overflow-y-auto hide-scrollbar" ref={horizontalScroll}>
       {tabs.map((t, index) => (
         <TabSelector key={index} tab={tab} setTab={setTab} t={t} />
       ))}

packages/app/src/Components/User/AvatarGroup.tsx

@@ -5,7 +5,7 @@ import ProfileImage from "@/Components/User/ProfileImage";
 
 export function AvatarGroup({ ids, onClick }: { ids: HexKey[]; onClick?: () => void }) {
   return ids.map((a, index) => (
-    <div className={`inline-block ${index > 0 ? "-ml-5" : ""}`} key={a} style={{ zIndex: ids.length - index }}>
+    <div className={`inline-block ${index > 0 ? "-ml-4" : ""}`} key={a} style={{ zIndex: ids.length - index }}>
       <ProfileImage link="" onClick={onClick} showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
     </div>
   ));