Sistent identity Color update #6610

Namanv0509 · 2025-07-05T17:17:07Z

Description

This PR fixes #
Before

After

This PR updates the Sistent Identity Color code page with the html table .

Notes for Reviewers
Need a review on UI and colors for table

the constant.dark theme doesnt exist for sistent , but was mentioned on website , what should i do for it

Signed commits

Yes, I signed my commits.

Signed-off-by: Namanv0509 <[email protected]>

l5io · 2025-07-05T17:30:51Z

🚀 Preview for commit c0ba21a at: https://686960f0fab5ec85c69c0d54--layer5.netlify.app

vr-varad · 2025-07-05T19:31:37Z

How about using this table on repository overview in https://layer5.io/community/handbook/repository-overview @Namanv0509

Namanv0509 · 2025-07-05T20:28:22Z

How about using this table on repository overview in https://layer5.io/community/handbook/repository-overview @Namanv0509

Okay yes good suggestion , let me see

Ayushmore1214

@Namanv0509 while working on this table https://layer5.io/community/handbook/repository-overview as requested from @vr-varad be sure that there is a problem related to this table while toggling in dark and light mode , here it is : #6581

Namanv0509 · 2025-07-06T09:48:23Z

@Namanv0509 while working on this table https://layer5.io/community/handbook/repository-overview as requested from @vr-varad be sure that there is a problem related to this table while toggling in dark and light mode , here it is : #6581

Yes i was encoutering same , thanks a lot for getting me aware.

If i can find a solution to it , i will ping you on slack.

M-DEV-1 · 2025-07-06T10:34:29Z

How about using this table on repository overview in https://layer5.io/community/handbook/repository-overview @Namanv0509

@vr-varad @Namanv0509

https://github.com/layer5io/layer5/blob/master/src/sections/Community/Handbook/repository.js

this uses simple html, and js to map out the contents.

This is one option, but here you're using Sistent, which is great and much more preferred

M-DEV-1 · 2025-07-06T10:37:54Z

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

+                            {col.token}
+                          </StyledTableCell>
+                          <StyledTableCell align="center">
+                            <PreviewBox bgcolor={col.hex} />


@Namanv0509, could you implement a "copy" feature here for people to directly copy these colors, as they need?

This could be a separate column, or an extension to the preview box, on hover.

@M-DEV-1 Yeah sure , should i keep it "click text to copy" or a button which will be revealed on hover

A separate button is better, in my opinion, but we can take a moment to discuss in today's meeting

M-DEV-1 · 2025-07-06T10:40:21Z

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

+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: "0.875rem",
+  padding: "0.75rem",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+


if you could, it'd be nice to have the alternating theme like in the tables on

https://layer5.io/community/handbook/repository-overview

just a suggestion, but rounded borders would be nice, what do you say?

The problem i faced with alternating theme is that , some preview colors become almost hidden with it .
Any suggestion what color would be best for the even cells .

also yes i think boxes cane a bit more rounded . Thanks @M-DEV-1

Change the header cell to a darker color, like background.default and use the same, OR use background.secondary/tertiary

Namanv0509 · 2025-07-06T10:51:15Z

How about using this table on repository overview in https://layer5.io/community/handbook/repository-overview @Namanv0509

@vr-varad @Namanv0509

https://github.com/layer5io/layer5/blob/master/src/sections/Community/Handbook/repository.js

this uses simple html, and js to map out the contents.

This is one option, but here you're using Sistent, which is great and much more preferred

Yes , also the issue which is with Handbook.style.js i am thinking to use sistent for now .

Signed-off-by: Namanv0509 <[email protected]>

l5io · 2025-07-06T23:07:58Z

🚀 Preview for commit 58c23dd at: https://686b0175d58168eda575b3b1--layer5.netlify.app

leecalcote · 2025-07-07T03:27:14Z

If this work is complete, this is a good item to add to the weekly Websites meeting agenda. You can add this item in the doc, attend, and present it. Meeting details at https://meet.layer5.io.

M-DEV-1 · 2025-07-06T11:10:12Z

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

+}));
+
+const StyledHeaderCell = styled(StyledTableCell)({
+  fontWeight: 600,


Suggested change

fontWeight: 600,

fontWeight: 600,

color: theme.palette.background.default,

this way the header cell is charcoal[100], you can use secondary or tertiary for the alternating cells then

Experiment with these a bit, you'll find the right tones @Namanv0509

M-DEV-1 · 2025-07-06T11:11:19Z

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

+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: "0.875rem",
+  padding: "0.75rem",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+


Change the header cell to a darker color, like background.default and use the same, OR use background.secondary/tertiary

sudhanshutech

it would be good to have copy icon to directly copy the color code @Namanv0509

Signed-off-by: Namanv0509 <[email protected]>

l5io · 2025-07-07T07:47:41Z

🚀 Preview for commit abda639 at: https://686b7b3d1d2a20e06c9f0cdf--layer5.netlify.app

Signed-off-by: Namanv0509 <[email protected]>

…09/layer5 into sistent_identity_update

l5io · 2025-07-07T08:13:40Z

🚀 Preview for commit 1639d96 at: https://686b8171d9eff36a4b8ec7f3--layer5.netlify.app

Signed-off-by: Naman Verma <[email protected]>

l5io · 2025-07-07T08:32:12Z

🚀 Preview for commit 27eb972 at: https://686b85c574ef2709a435a91f--layer5.netlify.app

Namanv0509 · 2025-07-07T10:45:42Z

it would be good to have copy icon to directly copy the color code @Namanv0509

Sure , was thinking to use the Sistent icons for it

Signed-off-by: Naman Verma <[email protected]>

l5io · 2025-07-07T11:39:48Z

🚀 Preview for commit b394226 at: https://686bb16a0e652590838b8c8a--layer5.netlify.app

Signed-off-by: Namanv0509 <[email protected]>

l5io · 2025-07-08T07:18:45Z

🚀 Preview for commit 312afd8 at: https://686cc5ffab1426c62d4caaba--layer5.netlify.app

vr-varad · 2025-07-08T07:33:59Z

Thanks @Namanv0509 for your contribution.

Namanv0509 · 2025-07-08T07:36:33Z

Thanks @vr-varad

Namanv0509 added 3 commits July 5, 2025 22:05

[UI] Sistent Identity Code page update images with the tables html

31695ff

Signed-off-by: Namanv0509 <[email protected]>

[UI] Sistent Identity Code page update images with the tables html

26f9279

Signed-off-by: Namanv0509 <[email protected]>

[UI] Sistent Identity Code page update images with the tables html

c0ba21a

Signed-off-by: Namanv0509 <[email protected]>

github-actions bot added the project/sistent label Jul 5, 2025

Ayushmore1214 reviewed Jul 6, 2025

View reviewed changes

M-DEV-1 suggested changes Jul 6, 2025

View reviewed changes

Copy Colors option for hex codes and token

58c23dd

Signed-off-by: Namanv0509 <[email protected]>

M-DEV-1 reviewed Jul 7, 2025

View reviewed changes

sudhanshutech suggested changes Jul 7, 2025

View reviewed changes

Alternate Colors on Rows

abda639

Signed-off-by: Namanv0509 <[email protected]>

Namanv0509 added 2 commits July 7, 2025 13:26

Alternate Colors on Rows

e2fc84e

Signed-off-by: Namanv0509 <[email protected]>

Merge branch 'sistent_identity_update' of https://github.com/Namanv05…

1639d96

…09/layer5 into sistent_identity_update

Update code.js

27eb972

Signed-off-by: Naman Verma <[email protected]>

Update code.js

b394226

Signed-off-by: Naman Verma <[email protected]>

Increase Text visiblity , Text and Preview Box Size

312afd8

Signed-off-by: Namanv0509 <[email protected]>

vr-varad approved these changes Jul 8, 2025

View reviewed changes

Merge branch 'master' into sistent_identity_update

c15a23e

vr-varad merged commit df4eb6a into layer5io:master Jul 8, 2025
5 checks passed

	fontWeight: 600,
	fontWeight: 600,
	color: theme.palette.background.default,

Sistent identity Color update #6610

Sistent identity Color update #6610

Uh oh!

Conversation

Namanv0509 commented Jul 5, 2025

Uh oh!

l5io commented Jul 5, 2025

Uh oh!

vr-varad commented Jul 5, 2025

Uh oh!

Namanv0509 commented Jul 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ayushmore1214 left a comment

Choose a reason for hiding this comment

Uh oh!

Namanv0509 commented Jul 6, 2025

Uh oh!

M-DEV-1 commented Jul 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Namanv0509 Jul 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Namanv0509 commented Jul 6, 2025

Uh oh!

l5io commented Jul 6, 2025

Uh oh!

leecalcote commented Jul 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sudhanshutech left a comment

Choose a reason for hiding this comment

Uh oh!

l5io commented Jul 7, 2025

Uh oh!

l5io commented Jul 7, 2025

Uh oh!

l5io commented Jul 7, 2025

Uh oh!

Namanv0509 commented Jul 7, 2025

Uh oh!

l5io commented Jul 7, 2025

Uh oh!

l5io commented Jul 8, 2025

Uh oh!

Uh oh!

vr-varad commented Jul 8, 2025

Uh oh!

Namanv0509 commented Jul 8, 2025

Uh oh!

Uh oh!

Namanv0509 commented Jul 5, 2025 •

edited

Loading

Namanv0509 Jul 6, 2025 •

edited

Loading