Merge pull request #3446 from JoinColony/fix/3056-user-hub-error-styles

fix: update UserHub transactions to have correct styles for 720-768px screen
JoinColony · Oct 30, 2024 · 5fbfbf9 · 5fbfbf9
2 parents e39ba6e + 3e17b4b
commit 5fbfbf9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/...common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionContent.tsx b/...common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionContent.tsx
@@ -99,6 +99,7 @@ const GroupedTransactionContent: FC<GroupedTransactionContentProps> = ({
           <NotificationBanner
             status="error"
             callToActionClassName="w-full no-underline"
+            contentClassName="@[600px]/notificationBanner:flex-col"
             callToAction={
               <div className="flex justify-between">
                 <button

diff --git a/src/components/v5/shared/NotificationBanner/NotificationBanner.tsx b/src/components/v5/shared/NotificationBanner/NotificationBanner.tsx
@@ -14,6 +14,7 @@ const NotificationBanner: FC<NotificationBannerProps> = ({
   callToAction,
   descriptionClassName,
   callToActionClassName,
+  contentClassName,
 }) => {
   return (
     <div
@@ -40,7 +41,12 @@ const NotificationBanner: FC<NotificationBannerProps> = ({
           })}
         />
       ) : null}
-      <div className="flex flex-1 flex-col items-start gap-2 @[600px]/notificationBanner:flex-row @[600px]/notificationBanner:items-center">
+      <div
+        className={clsx(
+          'flex flex-1 flex-col items-start gap-2 @[600px]/notificationBanner:flex-row @[600px]/notificationBanner:items-center',
+          contentClassName,
+        )}
+      >
         <div className="flex flex-1 flex-col items-start gap-2 text-md break-word">
           {children}
           {description ? (

diff --git a/src/components/v5/shared/NotificationBanner/types.ts b/src/components/v5/shared/NotificationBanner/types.ts
@@ -10,4 +10,5 @@ export type NotificationBannerProps = PropsWithChildren<{
   callToAction?: ReactNode;
   descriptionClassName?: string;
   callToActionClassName?: string;
+  contentClassName?: string;
 }>;