fix: some UI refinements to the Profiles section of the Hello components

1) fixed tile text color in dark themes (not visible)
2) font size in tiles too small
3) maximized content
4) switch to using flex layout for profiles
5) inverse colors for gallery stripe

Author: starpit

plugins/plugin-client-default/notebooks/hello.md

@@ -6,14 +6,19 @@ layout:
         position: default
     2:
         position: default
+        maximized: true
+        inverseColors: true
     3:
         position: default
+        maximized: true
 ---
 
 <img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="200" height="200" align="left" />
 CodeFlare is a framework to simplify the integration, scaling and acceleration of complex multi-step analytics and machine learning pipelines on the cloud.
 
-From your terminal, try running `codeflare` to be guided through running jobs against the Cloud.
+> #### Next Steps
+>
+> From your terminal, try `codeflare` to be guided through running jobs against the Cloud.
 
 ---
 
@@ -27,12 +32,12 @@ codeflare gallery
 
 ---
 
-## Available Appliances
+=== "Your Profiles"
 
-```shell
----
-execute: now
-outputOnly: true
----
-codeflare get profile
-```
+    ```shell
+    ---
+    execute: now
+    outputOnly: true
+    ---
+    codeflare get profile
+    ```

plugins/plugin-codeflare/src/controller/index.ts

@@ -62,8 +62,8 @@ export default function registerCodeflareCommands(registrar: Registrar) {
   registrar.listen("/codeflare/hello", (args) => import("./hello").then((_) => _.default(args)), {
     needsUI: true,
     outputOnly: true,
-    width: 800,
-    height: 600,
+    width: 1000,
+    height: 800,
   })
 
   registrar.listen("/codeflare/gallery", () => import("./hello").then((_) => _.gallery()), {

plugins/plugin-codeflare/src/controller/profile/get.tsx

@@ -16,21 +16,21 @@
 
 import React from "react"
 import { Profiles } from "madwizard"
-import { Grid, GridItem, Tile } from "@patternfly/react-core"
+import { Flex, FlexItem, Tile } from "@patternfly/react-core"
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default async function getProfiles() {
   const profiles = await Profiles.list({})
 
   return {
     react: (
-      <Grid hasGutter className="codeflare--plain-grid" span={3}>
+      <Flex className="flex-fill sans-serif top-pad left-pad right-pad bottom-pad">
         {profiles.map((_) => (
-          <GridItem key={_.profile.name}>
+          <FlexItem key={_.profile.name}>
             <Tile className="codeflare--tile" title={_.profile.name} />
-          </GridItem>
+          </FlexItem>
         ))}
-      </Grid>
+      </Flex>
     ),
   }
 }

plugins/plugin-codeflare/web/scss/components/Hello/_index.scss

@@ -27,7 +27,7 @@
     }
 
     @include Split(3) {
-      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-rows: 1.5fr 1fr 1fr;
       grid-template-columns: 1fr;
       grid-template-areas: "T1" "T2" "T3";
     }
@@ -84,7 +84,6 @@ $cell: 1.5em;
 }
 
 @include Tile {
-  --color-tile-title: var(--color-text-01);
   background-color: var(--color-base00);
 
   &[data-status="SUCCEEDED"] {
@@ -115,5 +114,5 @@ $cell: 1.5em;
 
 .pf-c-tile__title {
   color: var(--color-tile-title);
-  font-size: 0.6875rem;
+  font-size: 1rem;
 }