Merge pull request #2592 from getAlby/feat/publisher-card-design

feat: publisher card ui
getAlby · Jul 28, 2023 · 7591f9c · 7591f9c
2 parents a7613b1 + 739175c
commit 7591f9c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/app/components/PaymentSummary/index.tsx b/src/app/components/PaymentSummary/index.tsx
@@ -20,11 +20,16 @@ const PaymentSummary: FC<Props> = ({
 
   return (
     <dl className="mb-0">
-      <dt className="font-medium dark:text-white">{tCommon("amount")}</dt>
-      <dd className="text-gray-500 dark:text-neutral-400">
-        {getFormattedSats(amount)}
+      <dt className="text-sm text-gray-500 dark:text-neutral-500">
+        {tCommon("amount")}
+      </dt>
+      <dd className="text-lg text-gray-700 dark:text-neutral-200 flex flex-row justify-between">
+        <div>{getFormattedSats(amount)}</div>
         {!!fiatAmount && (
-          <span className="text-gray-400" data-testid="fiat_amount">
+          <span
+            className="text-gray-500 dark:text-neutral-500"
+            data-testid="fiat_amount"
+          >
             {" "}
             (~{fiatAmount})
           </span>

diff --git a/src/app/components/PublisherCard/index.tsx b/src/app/components/PublisherCard/index.tsx
@@ -37,7 +37,7 @@ export default function PublisherCard({
     >
       {image && (
         <img
-          className={`ml-1 mr-2 shrink-0 object-cover rounded-md ${
+          className={`shrink-0 object-cover rounded-md ${
             isSmall ? "w-10 h-10 mr-3" : "w-20 h-20"
           }`}
           src={image || DEFAULT_IMAGE}
@@ -50,17 +50,17 @@ export default function PublisherCard({
         />
       )}
       <div
-        className={
-          "flex flex-col overflow-hidden w-full " +
-          (isSmall ? "" : "text-center ") +
-          (isSmall && !image && "ml-1")
-        }
+        className={classNames(
+          "flex flex-col overflow-hidden w-full",
+          !isSmall && "text-center",
+          isSmall && !image && "ml-1"
+        )}
       >
         <h2
           title={title}
           className={
-            "font-semibold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap leading-1" +
-            (isSmall ? " text-l" : " my-2 text-xl")
+            "font-semibold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap" +
+            (isSmall ? "" : " mt-2 text-xl")
           }
         >
           {title}
@@ -70,7 +70,10 @@ export default function PublisherCard({
             href={`https://${url}`}
             title={url}
             target="_blank"
-            className="text-gray-500 dark:text-gray-400 overflow-hidden mb-2 text-ellipsis whitespace-nowrap leading-1"
+            className={classNames(
+              "text-gray-500 dark:text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap",
+              isSmall && "text-xs"
+            )}
             rel="noreferrer noopener"
           >
             {url}
@@ -79,10 +82,10 @@ export default function PublisherCard({
         {!url && description && (
           <p
             title={description}
-            className={
-              "text-gray-500 dark:text-gray-400 line-clamp-2" +
-              (isSmall ? " -mt-1" : " mb-2")
-            }
+            className={classNames(
+              "text-gray-500 dark:text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap",
+              isSmall && "text-xs"
+            )}
           >
             {description}
           </p>