Update chains cards css

skalenetwork · Dec 20, 2023 · aac4be6 · aac4be6
1 parent 9ff32ac
commit aac4be6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 28 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -240,7 +240,7 @@ body::-webkit-scrollbar {
 }
 
 .br__tile {
-  height: 140px;
+  height: 150px;
   border-radius: 25px !important;
   border: 1px solid #171616 !important
 }
@@ -257,7 +257,7 @@ body::-webkit-scrollbar {
 }
 
 .br__tileLogo {
-  height: 95px;
+  height: 105px;
 
   img {
     max-height: 100%;
@@ -369,9 +369,13 @@ body::-webkit-scrollbar {
   text-transform: none !important;
   color: #ffffffe6 !important;
   padding: 6px 10px 6px 12px !important;
-  font-size: 0.6rem !important;
+  font-size: 0.75rem !important;
   min-width: 55px;
 
+  width: 100%;
+
+  font-weight: 700 !important;
+
   svg {
     width: 8pt;
     height: 8pt;

diff --git a/src/components/ChainCard.tsx b/src/components/ChainCard.tsx
@@ -27,22 +27,17 @@ import {
   cls,
   chainBg,
   getChainAlias,
-  BASE_EXPLORER_URLS,
   CHAINS_META,
   type interfaces
 } from '@skalenetwork/metaport'
 
 import Button from '@mui/material/Button'
-import WidgetsOutlinedIcon from '@mui/icons-material/WidgetsOutlined'
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-
 import ChainLogo from './ChainLogo'
-import { getExplorerUrl } from '../core/chain'
 
 import { MAINNET_CHAIN_LOGOS } from '../core/constants'
 
 export default function ChainCard(props: { skaleNetwork: interfaces.SkaleNetwork; schain: any[] }) {
-  const explorerUrl = getExplorerUrl(BASE_EXPLORER_URLS[props.skaleNetwork], props.schain[0])
+  // const explorerUrl = getExplorerUrl(BASE_EXPLORER_URLS[props.skaleNetwork], props.schain[0])
 
   function getChainShortAlias(meta: interfaces.ChainsMetadataMap, name: string): string {
     return meta[name] && meta[name].shortAlias !== undefined ? meta[name].shortAlias! : name
@@ -71,32 +66,33 @@ export default function ChainCard(props: { skaleNetwork: interfaces.SkaleNetwork
               cmn.flex,
               cmn.flexcv,
               cmn.mbott10,
-              cmn.mleft10,
+
               'br__tileBott',
               'fullWidth'
             )}
           >
-            <div className={cls(cmn.fflex, cmn.flexg)}>
-              <a target="_blank" rel="noreferrer" href={explorerUrl} className="undec">
-                <Button startIcon={<WidgetsOutlinedIcon />} size="small" className="cardBtn">
-                  Explorer
-                </Button>
-              </a>
-              <Link to={'/chains/' + shortAlias}>
-                <Button
-                  startIcon={<InfoOutlinedIcon />}
-                  size="small"
-                  className={cls(cmn.mleft5, 'cardBtn')}
+            <Link
+              to={'/chains/' + shortAlias}
+              style={{
+                width: '100%',
+                padding: '20px 10px 0'
+              }}
+            >
+              <Button size="small" className={'cardBtn'}>
+                <span
+                  style={{
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    display: 'block',
+                    textOverflow: 'ellipsis'
+                  }}
                 >
-                  Info
-                </Button>
-              </Link>
-            </div>
+                  {getChainAlias(props.skaleNetwork, props.schain[0], undefined, true)}
+                </span>
+              </Button>
+            </Link>
           </div>
         </div>
-        <p className={cls(cmn.p, cmn.pCent, cmn.p3, cmn.pPrim, cmn.mtop10, cmn.p600)}>
-          {getChainAlias(props.skaleNetwork, props.schain[0], undefined, true)}
-        </p>
       </div>
     </div>
   )