Merge pull request #815 from Tatsinnit/fix/ux-cluster-propperties

Azure · Jul 25, 2024 · 4753298 · 4753298
2 parents 6a58e16 + 64c853c
commit 4753298
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx b/webview-ui/src/ClusterProperties/ClusterDisplayToolTip.tsx
@@ -16,15 +16,15 @@ export function ClusterDisplayToolTip(props: ClusterDisplayToolTipProps) {
             </span>
             <span className={styles.tooltiptext}>
                 <table>
-                    <caption style={{ fontWeight: "bold", textAlign: "left" }}>Current Versions Available</caption>
+                    <caption className={styles.tableHeader}>Current Versions Available</caption>
                     <tr>
                         <th>Version</th>
                         <th>Patch Versions</th>
                         <th>Support Plan</th>
                         <th>Preview</th>
                     </tr>
                     {props.clusterInfo.supportedVersions.map((v) => (
-                        <tr key={v.version}>
+                        <tr key={v.version} className={styles.separator}>
                             <td>{v.version}</td>
                             <td>
                                 {v.patchVersions.map((patchVersion, index) => (
@@ -41,7 +41,7 @@ export function ClusterDisplayToolTip(props: ClusterDisplayToolTipProps) {
                     ))}
                     <tfoot>
                         <tr>
-                            <td colSpan={3} style={{ textAlign: "left" }}>
+                            <td colSpan={3} className={styles.textLeftAlign}>
                                 <VSCodeLink href="https://learn.microsoft.com/en-us/azure/aks/supported-kubernetes-versions?tabs=azure-cli#aks-kubernetes-release-calendar">
                                     Learn more
                                 </VSCodeLink>

diff --git a/webview-ui/src/ClusterProperties/ClusterProperties.module.css b/webview-ui/src/ClusterProperties/ClusterProperties.module.css
@@ -57,3 +57,17 @@ td:not(:last-child) {
 .buttonDiv {
     margin: 0.3125rem 0 0.625rem 7.875rem;
 }
+
+.separator {
+    outline: solid thin;
+}
+
+.textLeftAlign {
+    text-align: left;
+}
+
+.tableHeader {
+    font-weight: bold;
+    text-align: left;
+    margin-bottom: 0.375rem;
+}