11import React , { useState } from "react" ;
22import { navigate } from "gatsby" ;
33import { useLocation } from "@reach/router" ;
4-
5-
64import { SistentLayout } from "../../sistent-layout" ;
75import { Col , Row } from "../../../../../reusecore/Layout" ;
86import Button from "../../../../../reusecore/Button" ;
@@ -447,8 +445,8 @@ const CopyColor = ({ hex , token }) => {
447445
448446const PreviewBox = styled ( "div" ) ( ( { theme, bgcolor } ) => ( {
449447 backgroundColor : bgcolor ,
450- width : "1 .6rem" ,
451- height : "1 .6rem" ,
448+ width : "2 .6rem" ,
449+ height : "2 .6rem" ,
452450 borderRadius : "6px" ,
453451 border : `1px solid ${ theme . palette . divider } ` ,
454452 boxShadow : "inset 0 0 3px rgba(0,0,0,0.15)" ,
@@ -486,6 +484,7 @@ const PreviewTextBox = styled("p")(({ theme, tokenName }) => {
486484 justifyContent : "center" ,
487485 fontSize : "1rem" ,
488486 fontWeight : "bold" ,
487+ backgroundColor : theme . palette . background . tertiary ,
489488 } ;
490489} ) ;
491490
@@ -501,8 +500,8 @@ const PreviewBorderBox = styled("div")(({ theme , tokenName }) => {
501500
502501 return {
503502 backgroundColor : "transparent" ,
504- width : "1 .6rem" ,
505- height : "1 .6rem" ,
503+ width : "2 .6rem" ,
504+ height : "2 .6rem" ,
506505 borderRadius : "6px" ,
507506 border : `1px solid ${ resolvedColors } ` ,
508507 boxShadow : "inset 0 0 3px rgba(0,0,0,0.15)" ,
@@ -535,7 +534,7 @@ const StyledTableContainer = styled(TableContainer)(() => ({
535534
536535const StyledTableCell = styled ( TableCell ) ( ( { theme } ) => ( {
537536 color : theme . palette . text . secondary ,
538- fontSize : "0.875rem " ,
537+ fontSize : "0.975rem " ,
539538 padding : "0.75rem" ,
540539 borderBottom : `1px solid ${ theme . palette . divider } ` ,
541540 borderRadius : "4px" ,
@@ -631,7 +630,7 @@ const ColorCode = () => {
631630 < StyledTableRow key = { col . tokenName } >
632631 < StyledTableCell > { col . tokenName } </ StyledTableCell >
633632 < StyledTableCell > { col . name } </ StyledTableCell >
634- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
633+ < StyledTableCell > { col . hex } </ StyledTableCell >
635634 < StyledTableCell sx = { { fontFamily : "monospace" } } >
636635 < CopyColor hex = { col . token } />
637636 </ StyledTableCell >
@@ -668,7 +667,7 @@ const ColorCode = () => {
668667 < StyledTableRow key = { col . tokenName } >
669668 < StyledTableCell > { col . tokenName } </ StyledTableCell >
670669 < StyledTableCell > { col . name } </ StyledTableCell >
671- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
670+ < StyledTableCell > { col . hex } </ StyledTableCell >
672671 < StyledTableCell sx = { { fontFamily : "monospace" } } >
673672 < CopyColor hex = { col . token } />
674673 </ StyledTableCell >
@@ -706,7 +705,7 @@ const ColorCode = () => {
706705 < StyledTableRow key = { col . tokenName } >
707706 < StyledTableCell > { col . tokenName } </ StyledTableCell >
708707 < StyledTableCell > { col . name } </ StyledTableCell >
709- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
708+ < StyledTableCell > { col . hex } </ StyledTableCell >
710709 < StyledTableCell sx = { { fontFamily : "monospace" } } >
711710 < CopyColor hex = { col . token } />
712711 </ StyledTableCell >
@@ -753,7 +752,7 @@ const ColorCode = () => {
753752 < StyledTableRow key = { col . tokenName } >
754753 < StyledTableCell > { col . tokenName } </ StyledTableCell >
755754 < StyledTableCell > { col . Alias_of } </ StyledTableCell >
756- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
755+ < StyledTableCell > { col . hex } </ StyledTableCell >
757756 < StyledTableCell sx = { { fontFamily : "monospace" } } >
758757 < CopyColor hex = { col . token } />
759758 </ StyledTableCell >
@@ -793,7 +792,7 @@ const ColorCode = () => {
793792 < StyledTableRow key = { col . tokenName } >
794793 < StyledTableCell > { col . tokenName } </ StyledTableCell >
795794 < StyledTableCell > { col . Alias_of } </ StyledTableCell >
796- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
795+ < StyledTableCell > { col . hex } </ StyledTableCell >
797796 < StyledTableCell sx = { { fontFamily : "monospace" } } >
798797 < CopyColor hex = { col . token } />
799798 </ StyledTableCell >
@@ -833,7 +832,7 @@ const ColorCode = () => {
833832 < StyledTableRow key = { col . tokenName } >
834833 < StyledTableCell > { col . tokenName } </ StyledTableCell >
835834 < StyledTableCell > { col . Alias_of } </ StyledTableCell >
836- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
835+ < StyledTableCell > { col . hex } </ StyledTableCell >
837836 < StyledTableCell sx = { { fontFamily : "monospace" } } >
838837 < CopyColor hex = { col . token } />
839838 </ StyledTableCell >
@@ -878,7 +877,7 @@ const ColorCode = () => {
878877 < StyledTableRow key = { col . tokenName } >
879878 < StyledTableCell > { col . tokenName } </ StyledTableCell >
880879 < StyledTableCell > { col . Alias_of } </ StyledTableCell >
881- < StyledTableCell > < CopyColor hex = { col . hex } /> </ StyledTableCell >
880+ < StyledTableCell > { col . hex } </ StyledTableCell >
882881 < StyledTableCell sx = { { fontFamily : "monospace" } } >
883882 < CopyColor hex = { col . token } />
884883 </ StyledTableCell >
0 commit comments