Add some styling to the component docs index page
Just to make it look a little nicer!
https://imgur.com/a/uelnn6K
Bug: none
Change-Id: Ie65dc11d7a4047e2c2c6816baa66d47d32259c11
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3347792
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Andres Olivares <andoli@chromium.org>
Commit-Queue: Andres Olivares <andoli@chromium.org>
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index 90aeeb5..4cb1f6f 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -150,20 +150,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>DevTools components</title>
- <style>
- a:link, a:visited {
- color: blue;
- text-transform: capitalize;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- </style>
+ <link rel="stylesheet" href="/front_end/ui/legacy/themeColors.css" />
+ <link rel="stylesheet" href="/front_end/ui/components/docs/component_docs_styles.css" />
</head>
- <body>
+ <body id="index-page">
<h1>DevTools components</h1>
- <ul>
+ <ul class="components-list">
${componentNames.map(name => {
const niceName = name.replace(/_/g, ' ');
return `<li><a href='/front_end/ui/components/docs/${name}'>${niceName}</a></li>`;