style description and cron job components

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -16,6 +16,12 @@ import { readableDate } from "shared/string_utils";
 import { Tooltip, Zoom } from "@material-ui/core";
 import CronParser from "cron-parser";
 
+import {
+  createTheme,
+  MuiThemeProvider,
+  withStyles,
+} from "@material-ui/core/styles";
+
 type Props = {
   chart: ChartType;
   controllers: Record<string, any>;
@@ -24,6 +30,17 @@ type Props = {
   closeChartRedirectUrl?: string;
 };
 
+const theme = createTheme({
+  overrides: {
+    MuiTooltip: {
+      tooltip: {
+        backgroundColor: "#3E3F44",
+        border: "1px solid #ffffff33",
+      },
+    },
+  },
+});
+
 const Chart: React.FunctionComponent<Props> = ({
   chart,
   controllers,
@@ -122,25 +139,28 @@ const Chart: React.FunctionComponent<Props> = ({
         {chart?.config?.description && (
           <>
             <Dot style={{ marginLeft: "9px", color: "#ffffff88" }}>•</Dot>
-
-            <Tooltip
-              TransitionComponent={Zoom}
-              placement={"bottom-start"}
-              title={
-                <div
-                  style={{
-                    fontFamily: "Work Sans, sans-serif",
-                    fontSize: "14px",
-                    fontWeight: "normal",
-                    padding: "5px 6px",
-                  }}
-                >
-                  {chart.config.description as string}
-                </div>
-              }
-            >
-              <Description>{chart.config.description}</Description>
-            </Tooltip>
+            <MuiThemeProvider theme={theme}>
+              <Tooltip
+                TransitionComponent={Zoom}
+                placement={"bottom-start"}
+                title={
+                  <div
+                    style={{
+                      fontFamily: "Work Sans, sans-serif",
+                      fontSize: "12px",
+                      fontWeight: "normal",
+                      padding: "5px 6px",
+                      color: "#ffffffdd",
+                      lineHeight: "16px",
+                    }}
+                  >
+                    {chart.config.description as string}
+                  </div>
+                }
+              >
+                <Description>{chart.config.description}</Description>
+              </Tooltip>
+            </MuiThemeProvider>
           </>
         )}
       </Title>
@@ -201,9 +221,11 @@ const Description = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: 200px;
+  max-width: 80%;
   color: #ffffff88;
   position: relative;
+  font-size: 13px;
+  padding-top: 1px;
 `;
 
 const BottomWrapper = styled.div`

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -180,6 +180,7 @@ export const ExpandedJobChartFC: React.FC<{
 
           {chart?.config?.schedule?.enabled ? (
             <RunsDescription>
+              <i className="material-icons">access_time</i>
               Runs{" "}
               {CronPrettifier.toString(
                 chart?.config?.schedule.value
@@ -422,19 +423,32 @@ const ExpandedJobHeader: React.FC<{
 
 const RunsDescription = styled.div`
   color: #ffffff;
-  font-size: 14px;
-  margin-top: 15px;
-  margin-bottom: 35px;
+  font-size: 13px;
+  margin-top: 20px;
+  margin-bottom: 20px;
   display: flex;
+  align-items: center;
+  padding: 14px 20px;
+  background: #2b2e36;
+  border: 1px solid #ffffff22;
+  color: #ffffffdd;
+  border-radius: 4px;
+
+  > i {
+    font-size: 16px;
+    color: #ffffffdd;
+    margin-right: 10px;
+  }
 `;
 
 const Description = styled.div`
-  color: #ffffff88;
-  position: relative;
-  line-height: 16px;
-  font-size: 14px;
-  padding-left: 10px;
-  user-select: all;
+  user-select: text;
+  font-size: 13px;
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+  color: #ffffffdd;
+  line-height: 150%;
 `;
 
 const CLIModalIconWrapper = styled.div`