explorer landing page update (MystenLabs#3217)

* explorer landing page update

* rm the temp pagination code from RecentTxCard component

* comment update

* fixed pagination, added pag cont number and rm unnessary var

* style update

* lint

* error msg display added on tx result page

* rm background from module code view

* update rm codeview background offwhite color

explorer/client/src/components/longtext/Longtext.module.css

@@ -8,5 +8,5 @@
 
 .longtext,
 .longtext > a {
-    @apply no-underline text-sky-600 hover:text-sky-900 cursor-pointer break-all;
+    @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all;
 }

explorer/client/src/components/pagination/Pagination.module.css

@@ -1,22 +1,35 @@
 .pagination {
-    @apply flex flex-row items-center justify-center list-none;
+    @apply flex flex-row items-center justify-start list-none w-full;
 }
 
 .pagination ul {
-    @apply flex flex-row items-center justify-center list-none pl-0;
+    @apply flex flex-row items-center justify-center list-none  p-0 m-0;
 }
 
 .pagination ul li {
-    @apply mr-2;
+    @apply mr-2 hidden md:block;
 }
 
 .pagination ul li button {
-    @apply bg-gray-200 hover:bg-gray-300 focus:bg-gray-300 text-gray-800 hover:text-gray-800 focus:text-gray-800 font-medium py-2 px-4 rounded-none border-0 cursor-pointer 
-     md:pr-3  md:pl-3  pr-1.5  pl-1.5;
+    @apply text-gray-600 hover:text-gray-800 focus:text-gray-800 font-medium py-2 px-4 cursor-pointer 
+     md:pr-3  md:pl-3  pr-3  pl-3 border-[1px] rounded-[6px] border-white bg-[#FFFFFF] hover:bg-[#F4FBFF];
 
+    border: 1px solid #e9eaeb;
     transition: all 0.4s ease;
 }
 
+.arrow {
+    @apply block !important;
+}
+
 .activepag {
-    @apply bg-sui text-white !important;
+    @apply bg-[#F4FBFF] text-sui-dark border-sui-dark !important;
+}
+
+.paginationleft svg {
+    transform: rotate(180deg);
+}
+
+.paginationdot:hover {
+    @apply bg-[#FFFFFF] hover:bg-[#FFFFFF];
 }

explorer/client/src/components/pagination/Pagination.tsx

@@ -1,16 +1,20 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
 import { useState, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import { ReactComponent as ContentForwardArrowDark } from '../../assets/SVGIcons/forward-arrow-dark.svg';
+
 import styles from './Pagination.module.css';
 function generatePaginationArr(
     startAt: number,
     itemsPerPage: number,
     totalItems: number
 ) {
     // number of list items to show before truncating
-    const range: number = 4;
+    const range: number = 2;
     const max = Math.ceil((totalItems - 1) / itemsPerPage);
     const maxRange = (Math.floor(startAt / range) + 1) * range;
     // set the min range to be the max range minus the range if it is less than the max - range
@@ -56,26 +60,35 @@ function Pagination({
             <nav className={styles.pagination}>
                 <ul>
                     {pageIndex > 1 && (
-                        <li className="page-item">
+                        <li className={styles.arrow}>
                             <button
-                                className={
-                                    pageIndex === 1 ? styles.activepag : ''
-                                }
+                                className={cl([
+                                    pageIndex === 1 ? styles.activepag : '',
+                                    styles.paginationleft,
+                                ])}
                                 onClick={changePage(pageIndex - 1)}
                             >
-                                &larr;
+                                <ContentForwardArrowDark />
                             </button>
                         </li>
                     )}
                     {pageIndex > pagiData.range - 1 && (
+                        <>
+                            <li className="page-item">
+                                <button
+                                    className="page-link"
+                                    onClick={changePage(1)}
+                                >
+                                    1
+                                </button>
+                            </li>
+                        </>
+                    )}
+                    {pageIndex > pagiData.range && (
                         <li className="page-item">
-                            <button
-                                className="page-link"
-                                onClick={changePage(1)}
-                            >
-                                1
+                            <button className={styles.paginationdot}>
+                                ...
                             </button>
-                            {' ... '}
                         </li>
                     )}
                     {pagiData.listItems.map((itm: any, index: number) => (
@@ -92,27 +105,41 @@ function Pagination({
                     ))}
 
                     {pageIndex < pagiData.max - 1 && (
-                        <li className="page-item">
-                            {' ... '}
-                            <button
-                                className={
-                                    pageIndex === pagiData.max
-                                        ? styles.activepag
-                                        : ''
-                                }
-                                onClick={changePage(pagiData.max)}
-                            >
-                                {pagiData.max}
-                            </button>
-                        </li>
+                        <>
+                            <li className="page-item">
+                                <button
+                                    className={cl(
+                                        pageIndex === pagiData.max
+                                            ? styles.activepag
+                                            : '',
+                                        styles.paginationdot
+                                    )}
+                                >
+                                    ...
+                                </button>
+                            </li>
+
+                            <li className="page-item">
+                                <button
+                                    className={
+                                        pageIndex === pagiData.max
+                                            ? styles.activepag
+                                            : ''
+                                    }
+                                    onClick={changePage(pagiData.max)}
+                                >
+                                    {pagiData.max}
+                                </button>
+                            </li>
+                        </>
                     )}
                     {pageIndex < pagiData.max && (
-                        <li className="page-item">
+                        <li className={styles.arrow}>
                             <button
                                 className="page-link"
                                 onClick={changePage(pageIndex + 1)}
                             >
-                                →
+                                <ContentForwardArrowDark />
                             </button>
                         </li>
                     )}

explorer/client/src/components/table/TableCard.module.css

@@ -9,15 +9,23 @@
 }
 
 .table th {
-    @apply text-left font-normal uppercase text-[#767A81] text-xs;
+    @apply text-left font-semibold uppercase text-[#767A81] text-xs;
 }
 
 .table td {
-    @apply pr-5 text-[#4E555D];
+    @apply pr-5 text-[#767A81] text-sm;
 }
 
 .table tbody tr {
-    @apply space-y-10 mt-10;
+    @apply space-y-10 mt-10 hover:bg-[#6fbcf014];
+}
+
+td:nth-child(1) {
+    @apply text-xs;
+}
+
+.table tbody tr:hover td {
+    @apply text-black;
 }
 
 .addresses {
@@ -29,5 +37,9 @@
 }
 
 .tablespacing {
-    @apply pb-1 pt-1;
+    @apply pb-2 pt-2;
+}
+
+td a {
+    @apply font-mono text-[#4E555D];
 }

explorer/client/src/components/tabs/Tabs.module.css

@@ -22,13 +22,17 @@
 }
 
 .tabsfooter {
-    @apply flex justify-between text-xs text-gray-500 capitalize items-center p-1;
+    @apply flex justify-between text-xs text-gray-500 capitalize items-center p-0;
 }
 
 .tabsfooter a {
     @apply text-gray-700 font-semibold;
 }
 
 .stats {
-    @apply ml-auto;
+    @apply ml-auto w-full text-right;
+}
+
+.tabsfooter nav {
+    @apply flex flex-row items-center;
 }

explorer/client/src/components/transaction-card/RecentTxCard.module.css

@@ -75,5 +75,15 @@ div.txadd {
 }
 
 .moretxbtn {
-    @apply text-left bg-transparent cursor-pointer border-0 pl-0 pr-0 text-[#636870]  hover:text-gray-400 transition-colors duration-200 ease-in-out font-normal text-sm;
+    @apply text-left bg-transparent cursor-pointer border-0 pl-0 pr-0 text-sui-grey-90  hover:text-gray-400 transition-colors duration-200 ease-in-out font-normal text-sm w-full;
+
+    text-decoration: none;
+}
+
+.txlatestresults td a {
+    @apply font-mono text-[#4E555D];
+}
+
+.txlatestresults td:nth-child(1) {
+    @apply text-xs;
 }