Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update colors for Demo Architecture to match website theme #5360 #5467

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update colors for Demo Architecture to match website theme #5360 #5467

wants to merge 1 commit into from

Conversation

olamideTiana
Copy link
Contributor

done

@olamideTiana olamideTiana requested a review from a team as a code owner October 23, 2024 08:48
@opentelemetrybot opentelemetrybot requested review from a team October 23, 2024 08:48
@olamideTiana olamideTiana reopened this Oct 23, 2024
@opentelemetrybot opentelemetrybot requested a review from a team October 23, 2024 10:12
@olamideTiana
Copy link
Contributor Author

@svrnm I have been able to recover the file and replace with the original file by using git log to find the commit hash where the original version of the file exists, restore the file and commit the restoration

@olamideTiana
Copy link
Contributor Author

@svrnm I updated the colors and replaced it to gray in dark mode and different text colour. Please, let me know your feedback boss, thank you

@opentelemetrybot opentelemetrybot requested a review from a team October 24, 2024 07:18
@olamideTiana
Copy link
Contributor Author

@svrnm I updated the colors and replaced it to gray in dark mode and different text colour. Please, let me know your feedback boss, thank you

Please, let me know your thoughts on this, thank you

svrnm
svrnm reviewed Oct 24, 2024
View reviewed changes
content/en/docs/demo/architecture.md Outdated
Comment on lines 62 to 73
classDef dotnet fill:#178600,color:white;
classDef cpp fill:#f34b7d,color:white;
classDef erlang fill:#b83998,color:white;
classDef golang fill:#00add8,color:black;
classDef java fill:#b07219,color:white;
classDef javascript fill:#f1e05a,color:black;
classDef kotlin fill:#560ba1,color:white;
classDef php fill:#4f5d95,color:white;
classDef python fill:#3572A5,color:white;
classDef ruby fill:#701516,color:white;
classDef rust fill:#dea584,color:black;
classDef typescript fill:#e98516,color:black;
classDef dotnet fill:#1E1E1E,color:#61AFEF;
classDef cpp fill:#1E1E1E,color:#C678DD;
classDef erlang fill:#1E1E1E,color:#E06C75;
classDef golang fill:#1E1E1E,color:#98C379;
classDef java fill:#1E1E1E,color:#E5C07B;
classDef javascript fill:#1E1E1E,color:#E5C07B;
classDef kotlin fill:#1E1E1E,color:#C678DD;
classDef php fill:#1E1E1E,color:#61AFEF;
classDef python fill:#1E1E1E,color:#FFB86C;
classDef ruby fill:#1E1E1E,color:#E06C75;
classDef rust fill:#1E1E1E,color:#F8F8F2;
classDef typescript fill:#1E1E1E,color:#61AFEF;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While it is visually much better in that way of having a gray background and a colored text, it's a lot harder to match the boxes at the bottom (that represent the programming language used) with the boxes in the graph, especially also from an accessibility standpoint. So, can you take colors from existing visualizations for the background and then based on the color of the background make the text either black or white.

Here are some other visualizations that we have:

https://deploy-preview-5467--opentelemetry.netlify.app/img/waterfall-trace.svg
https://deploy-preview-5467--opentelemetry.netlify.app/docs/concepts/instrumentation-scope/spans-with-instrumentation-scope.svg
https://deploy-preview-5467--opentelemetry.netlify.app/docs/collector/img/otel-collector.svg

mviitane
mviitane reviewed Oct 24, 2024
View reviewed changes
Copy link
Member

@mviitane mviitane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, I feel the color differences in the arch diagram are now too small. It's very difficult to differentiate for example .NET, PHP and TypeScript from each other.

image

@mviitane
Copy link
Member

What about adding the language to the arch diagram as text?
image

Then we wouldn't even need the "Service legend" pic.

@olamideTiana
Copy link
Contributor Author

What about adding the language to the arch diagram as text? image

Then we wouldn't even need the "Service legend" pic.

Okay, let me try that. Thanks

@svrnm svrnm linked an issue Nov 6, 2024 that may be closed by this pull request
Update colors for Demo Architecture to match website theme #5360
Open
@olamideTiana olamideTiana reopened this Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mviitane mviitane mviitane left review comments

@svrnm svrnm svrnm left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
sig:demo
Projects
SIG Comms: PRs & Issues
Status: Need Docs Review
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Update colors for Demo Architecture to match website theme
3 participants
@olamideTiana @mviitane @svrnm