Merge branch 'emmanuel2'

pwrlabs · Oct 3, 2024 · f246a8e · f246a8e
2 parents 32bc557 + a4f8516
commit f246a8e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx b/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx
@@ -44,7 +44,7 @@ export default function SingleBlock({ params }: BlockTransactionsProps) {
 	if (block_error || (!block_loading && !block_data)) return <ErrorComponent />;
 
 	return (
-		<div className="container-2 mx-auto dark:text-white text-abrandc-dark-grey">
+		<div className="container-2 mx-auto dark:text-white text-abrandc-dark-grey pb-6">
 			{/* Title */}
 			<div className="flex items-center gap-x-2">
 				<h1 className=" py-1 text-[36px] font-bold leading-[44px]">Blocks Details</h1>
@@ -245,7 +245,7 @@ export default function SingleBlock({ params }: BlockTransactionsProps) {
 
 				{/* Disclaimer */}
 				<div className="flex  gap-x-2 ">
-					<i className="far fa-info-circle text-agrey-500 dark:text-agrey-600 " />
+					<i className="far fa-info-circle text-agrey-500 dark:text-agrey-600 align-middle mt-2 " />
 					<p className="text-sm text-agrey-500 dark:text-agrey-600 leading-[24px] break-all">
 						Blocks are batches of transactions linked via cryptographic hashes. Any
 						tampering of a block would invalidate all following blocks as all subsequent

diff --git a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
@@ -52,7 +52,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 	if (txnError || (!txnLoading && !txnData)) return <ErrorComponent />;
 
 	return (
-		<div className="container-2 mx-auto dark:text-white text-abrandc-dark-grey">
+		<div className="container-2 mx-auto dark:text-white text-abrandc-dark-grey pb-6">
 			{/* Title */}
 			<div className="flex xl:flex-row flex-col justify-between xl:items-center">
 				<div className="flex flex-1 items-center xl:gap-x-2 gap-x-8 ">
@@ -464,7 +464,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 
 			{/* Disclaimer */}
 			<div className="flex  gap-x-2 ">
-				<i className="far fa-info-circle text-agrey-500 dark:text-agrey-600 " />
+				<i className="far fa-info-circle text-agrey-500 dark:text-agrey-600 mt-2 md:mt-1" />
 				<p className="text-sm text-agrey-500 dark:text-agrey-600 leading-[24px] break-all">
 					A transaction is a cryptographically signed instruction that changes the
 					blockchain state. Block explorers trach the details of all transactions in

diff --git a/src/components/internal/pagination/pagination.component.tsx b/src/components/internal/pagination/pagination.component.tsx
@@ -139,7 +139,7 @@ export default function Pagination({ metadata, onPageChange }: PaginationProps)
 					<i className="far fa-angle-left fa-lg"></i>
 				</button>
 
-				<div className="w-[220px] sm:w-full sm:overflow-visible overflow-hidden">
+				<div className="w-[238px] sm:w-full sm:overflow-visible overflow-hidden hide-scrollbar">
 					<ul className="flex gap-x-1 sm:overflow-visible overflow-x-auto hide-scrollbar">
 						{pageButtons.map((btn, idx) => (
 							<li key={idx} className="shrink-0">

diff --git a/src/components/internal/pagination/pagination.scss b/src/components/internal/pagination/pagination.scss
@@ -90,3 +90,12 @@ input::-webkit-inner-spin-button {
 .next-button[disabled] {
 	cursor: not-allowed;
 }
+
+// for the scroll bar in the pagination
+.hide-scrollbar {
+	scrollbar-width: none; /* For Firefox */
+	-ms-overflow-style: none; /* For Internet Explorer and Edge */
+}
+.hide-scrollbar::-webkit-scrollbar {
+	display: none; /* For Chrome, Safari, and Opera */
+}
diff --git a/src/components/internal/transaction-tooltip-details/transaction-tooltip-details.tsx b/src/components/internal/transaction-tooltip-details/transaction-tooltip-details.tsx
@@ -12,7 +12,7 @@ type TransactionTooltipDetailsProps = {
 
 const TransactionTooltipDetails = ({ fee, nonce }: TransactionTooltipDetailsProps) => {
 	return (
-		<div className="flex flex-col  p-3 dark:bg-abrandc-dark-blackish bg-white text-agrey-900 dark:text-white rounded-2xl   w-60 z-index-3">
+		<div className="flex flex-col  p-3 dark:bg-abrandc-dark-blackish bg-white text-agrey-900 dark:text-white rounded-2xl   w-64 z-index-3">
 			<div className="text-left p-1">
 				<h1>Additional Info</h1>
 			</div>
@@ -28,7 +28,7 @@ const TransactionTooltipDetails = ({ fee, nonce }: TransactionTooltipDetailsProp
 					/>
 
 					<p className="text-abrandc-dark-green">success</p>
-					<h6 className="text-sm font-normal  w-full text-agrey-500">
+					<h6 className="text-sm font-normal  w-full text-agrey-500 text-nowrap">
 						(1 block confirmation)
 					</h6>
 				</div>