Skip to content

Commit e2fc84e

Browse files
Namanv0509Namanv0509
committed
Alternate Colors on Rows
Signed-off-by: Namanv0509 <namanverma00260@gmail.com>
1 parent 58c23dd commit e2fc84e

1 file changed

Lines changed: 22 additions & 36 deletions

File tree

  • src/sections/Projects/Sistent/identity/color

‎src/sections/Projects/Sistent/identity/color/code.js‎

Lines changed: 22 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,14 @@ const PreviewBorderBox = styled("div")(({ theme , tokenName }) => {
516516
};
517517
});
518518

519-
519+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
520+
"&:nth-child(odd)": {
521+
backgroundColor: theme.palette.background.default,
522+
},
523+
"&:nth-child(even)": {
524+
backgroundColor: theme.palette.background.secondary,
525+
},
526+
}));
520527

521528

522529
const StyledTableContainer = styled(TableContainer)(() => ({
@@ -620,10 +627,7 @@ const ColorCode = () => {
620627
</TableHead>
621628
<TableBody>
622629
{brandColors.map((col) => (
623-
<TableRow
624-
key={col.tokenName}
625-
626-
>
630+
<StyledTableRow key={col.tokenName}>
627631
<StyledTableCell>{col.tokenName}</StyledTableCell>
628632
<StyledTableCell>{col.name}</StyledTableCell>
629633
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -633,7 +637,7 @@ const ColorCode = () => {
633637
<StyledTableCell align="center">
634638
<PreviewBox bgcolor={col.hex} />
635639
</StyledTableCell>
636-
</TableRow>
640+
</StyledTableRow>
637641
))}
638642
</TableBody>
639643
</Table>
@@ -660,10 +664,7 @@ const ColorCode = () => {
660664
</TableHead>
661665
<TableBody>
662666
{greyscaleColors.map((col) => (
663-
<TableRow
664-
key={col.tokenName}
665-
666-
>
667+
<StyledTableRow key={col.tokenName}>
667668
<StyledTableCell>{col.tokenName}</StyledTableCell>
668669
<StyledTableCell>{col.name}</StyledTableCell>
669670
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -673,7 +674,7 @@ const ColorCode = () => {
673674
<StyledTableCell align="center">
674675
<PreviewBox bgcolor={col.hex} />
675676
</StyledTableCell>
676-
</TableRow>
677+
</StyledTableRow>
677678
))}
678679
</TableBody>
679680
</Table>
@@ -701,10 +702,7 @@ const ColorCode = () => {
701702
</TableHead>
702703
<TableBody>
703704
{functionColors.map((col) => (
704-
<TableRow
705-
key={col.tokenName}
706-
707-
>
705+
<StyledTableRow key={col.tokenName}>
708706
<StyledTableCell>{col.tokenName}</StyledTableCell>
709707
<StyledTableCell>{col.name}</StyledTableCell>
710708
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -714,7 +712,7 @@ const ColorCode = () => {
714712
<StyledTableCell align="center">
715713
<PreviewBox bgcolor={col.hex} />
716714
</StyledTableCell>
717-
</TableRow>
715+
</StyledTableRow>
718716
))}
719717
</TableBody>
720718
</Table>
@@ -751,10 +749,7 @@ const ColorCode = () => {
751749
</TableHead>
752750
<TableBody>
753751
{backgroundColors.map((col) => (
754-
<TableRow
755-
key={col.tokenName}
756-
757-
>
752+
<StyledTableRow key={col.tokenName}>
758753
<StyledTableCell>{col.tokenName}</StyledTableCell>
759754
<StyledTableCell>{col.Alias_of}</StyledTableCell>
760755
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -767,7 +762,7 @@ const ColorCode = () => {
767762
<StyledTableCell >
768763
{col.role}
769764
</StyledTableCell>
770-
</TableRow>
765+
</StyledTableRow>
771766
))}
772767
</TableBody>
773768
</Table>
@@ -794,10 +789,7 @@ const ColorCode = () => {
794789
</TableHead>
795790
<TableBody>
796791
{textColors.map((col) => (
797-
<TableRow
798-
key={col.tokenName}
799-
800-
>
792+
<StyledTableRow key={col.tokenName}>
801793
<StyledTableCell>{col.tokenName}</StyledTableCell>
802794
<StyledTableCell>{col.Alias_of}</StyledTableCell>
803795
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -810,7 +802,7 @@ const ColorCode = () => {
810802
<StyledTableCell>
811803
{col.role}
812804
</StyledTableCell>
813-
</TableRow>
805+
</StyledTableRow>
814806
))}
815807
</TableBody>
816808
</Table>
@@ -837,10 +829,7 @@ const ColorCode = () => {
837829
</TableHead>
838830
<TableBody>
839831
{borderColors.map((col) => (
840-
<TableRow
841-
key={col.tokenName}
842-
843-
>
832+
<StyledTableRow key={col.tokenName}>
844833
<StyledTableCell>{col.tokenName}</StyledTableCell>
845834
<StyledTableCell>{col.Alias_of}</StyledTableCell>
846835
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -853,7 +842,7 @@ const ColorCode = () => {
853842
<StyledTableCell>
854843
{col.role}
855844
</StyledTableCell>
856-
</TableRow>
845+
</StyledTableRow>
857846
))}
858847
</TableBody>
859848
</Table>
@@ -885,10 +874,7 @@ const ColorCode = () => {
885874
</TableHead>
886875
<TableBody>
887876
{componentColors.map((col) => (
888-
<TableRow
889-
key={col.tokenName}
890-
891-
>
877+
<StyledTableRow key={col.tokenName}>
892878
<StyledTableCell>{col.tokenName}</StyledTableCell>
893879
<StyledTableCell>{col.Alias_of}</StyledTableCell>
894880
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
@@ -901,7 +887,7 @@ const ColorCode = () => {
901887
<StyledTableCell >
902888
{col.role}
903889
</StyledTableCell>
904-
</TableRow>
890+
</StyledTableRow>
905891
))}
906892
</TableBody>
907893
</Table>

0 commit comments

Comments
 (0)