[vtadmin-web] Add icons + focus state to NavRail

web/vtadmin/src/components/App.module.scss

@@ -17,7 +17,7 @@
   display: grid;
   grid-template-areas: 'nav content';
   grid-template-rows: auto;
-  grid-template-columns: 240px auto;
+  grid-template-columns: 260px auto;
   height: 100vh;
   overflow: hidden;
   position: relative;

web/vtadmin/src/components/NavRail.module.scss

@@ -47,7 +47,7 @@ $navRailHoverTransition: background-color 0.1s ease-in-out;
 
   &::after {
     content: '';
-    background-color: var(--colorScaffolding);
+    background-color: var(--colorScaffoldingHighlight);
     display: block;
     height: 1px;
     margin: 20px 24px;
@@ -65,8 +65,10 @@ a.navLink {
   color: var(--textColorPrimary);
   display: flex;
   flex-wrap: nowrap;
+  font-size: 1.6rem;
   font-weight: 500;
-  padding: 12px 24px 12px 20px;
+  outline: none;
+  padding: 13px 24px;
   text-decoration: none;
   transition: $navRailHoverTransition;
 
@@ -75,6 +77,7 @@ a.navLink {
     color: var(--colorPrimary);
   }
 
+  &:focus,
   &:hover {
     background: var(--backgroundSecondaryHighlight);
     color: var(--colorPrimary);
@@ -86,14 +89,29 @@ a.navLink {
   border-radius: 20px;
   color: var(--textColorSecondary);
   display: inline-block;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
+  line-height: 1.9rem;
   margin-left: auto;
   padding: 2px 8px;
   transition: $navRailHoverTransition;
 }
 
 a.navLinkActive .badge,
+a.navLink:focus .badge,
 a.navLink:hover .badge {
   background-color: var(--backgroundPrimaryHighlight);
   color: var(--colorPrimary);
 }
+
+.icon {
+  fill: var(--colorScaffoldingForeground);
+  height: 2rem;
+  margin-right: 1.2rem;
+  transition: $navRailHoverTransition;
+}
+
+a.navLinkActive .icon,
+a.navLink:focus .icon,
+a.navLink:hover .icon {
+  fill: var(--colorPrimary);
+}

web/vtadmin/src/components/NavRail.tsx

@@ -19,6 +19,7 @@ import { Link, NavLink } from 'react-router-dom';
 import style from './NavRail.module.scss';
 import logo from '../img/vitess-icon-color.svg';
 import { useTablets } from '../hooks/api';
+import { Icon, Icons } from './Icon';
 
 export const NavRail = () => {
     const { data: tabletData } = useTablets();
@@ -32,58 +33,60 @@ export const NavRail = () => {
             <div className={style.navLinks}>
                 <ul className={style.navList}>
                     <li>
-                        <NavRailLink text="Dashboard" to="/dashboard" count={0} />
+                        <NavRailLink icon={Icons.chart} text="Dashboard" to="/dashboard" count={0} />
                     </li>
                     <li>
-                        <NavRailLink text="Workflows" to="/workflows" count={0} />
+                        <NavRailLink icon={Icons.wrench} text="Workflows" to="/workflows" count={0} />
                     </li>
                 </ul>
 
                 <ul className={style.navList}>
                     <li>
-                        <NavRailLink text="Clusters" to="/clusters" count={0} />
+                        {/* FIXME replace this with a C when we have one */}
+                        <NavRailLink icon={Icons.keyR} text="Clusters" to="/clusters" count={0} />
                     </li>
                     <li>
-                        <NavRailLink text="Gates" to="/gates" count={0} />
+                        <NavRailLink icon={Icons.keyG} text="Gates" to="/gates" count={0} />
                     </li>
                     <li>
-                        <NavRailLink text="Keyspaces" to="/keyspaces" count={0} />
+                        <NavRailLink icon={Icons.keyK} text="Keyspaces" to="/keyspaces" count={0} />
                     </li>
                     <li>
-                        <NavRailLink text="Schemas" to="/schemas" count={0} />
+                        <NavRailLink icon={Icons.keyS} text="Schemas" to="/schemas" count={0} />
                     </li>
                     <li>
-                        <NavRailLink text="Tablets" to="/tablets" count={(tabletData || []).length} />
+                        <NavRailLink icon={Icons.keyT} text="Tablets" to="/tablets" count={(tabletData || []).length} />
                     </li>
                 </ul>
 
                 <ul className={style.navList}>
                     <li>
-                        <NavRailLink text="VTExplain" to="/vtexplain" />
+                        <NavRailLink icon={Icons.runQuery} text="VTExplain" to="/vtexplain" />
                     </li>
                     <li>
-                        <NavRailLink text="Settings" to="/settings" />
+                        <NavRailLink icon={Icons.gear} text="Settings" to="/settings" />
                     </li>
                 </ul>
             </div>
 
             <div className={style.footerContainer}>
                 <ul className={style.navList}>
                     <li>
-                        <NavRailLink text="Debug" to="/debug" />
+                        <NavRailLink icon={Icons.bug} text="Debug" to="/debug" />
                     </li>
                     <li>
-                        <NavRailLink text="Shortcuts" to="/shortcuts" />
+                        <NavRailLink icon={Icons.keyboard} text="Shortcuts" to="/shortcuts" />
                     </li>
                 </ul>
             </div>
         </div>
     );
 };
 
-const NavRailLink = ({ count, text, to }: { count?: number; text: string; to: string }) => {
+const NavRailLink = ({ count, icon, text, to }: { count?: number; icon: Icons; text: string; to: string }) => {
     return (
         <NavLink activeClassName={style.navLinkActive} className={style.navLink} to={to}>
+            <Icon className={style.icon} icon={icon} />
             <span>{text}</span>
             {typeof count === 'number' && <div className={style.badge}>{count}</div>}
         </NavLink>

web/vtadmin/src/index.css

@@ -73,7 +73,8 @@
   --colorPrimary: #3d5afe;
   --colorPrimary50: #8187ff;
   --colorPrimary200: #0031ca;
-  --colorScaffolding: var(--grey400);
+  --colorScaffoldingHighlight: var(--grey400);
+  --colorScaffoldingForeground: var(--grey600);
   --tableBorderColor: var(--grey400);
   --textColorPrimary: #17171b;
   --textColorInverted: #fff;
@@ -92,7 +93,8 @@
   --colorPrimary: #8187ff;
   --colorPrimary50: #b6b7ff;
   --colorPrimary200: #4a5acb;
-  --colorScaffolding: var(--grey600);
+  --colorScaffoldingHighlight: var(--grey600);
+  --colorScaffoldingForeground: var(--grey400);
   --tableBorderColor: var(--grey800);
   --textColorPrimary: #fff;
   --textColorInverted: #17171b;