fix: styling of notebooks buttons (#3052)

* fix: styling of notebooks buttons

* fix: node upgrade issue

Author: Gene Hynson

docker/Dockerfile.chronograf.prod

@@ -1,5 +1,5 @@
-# from node latest alpine 3.12
-FROM node:alpine3.12 AS repo
+# from node lts alpine 3.12
+FROM node:lts-alpine3.12 AS repo
 
 # env vars to configure the system
 

src/flows/components/header/SaveState.tsx

@@ -34,7 +34,7 @@ const SaveState: FC = () => {
     return (
       <Button
         text="Save Notebook"
-        color={ComponentColor.Success}
+        color={ComponentColor.Default}
         type={ButtonType.Submit}
         onClick={addFlow}
         status={ComponentStatus.Default}

src/flows/components/header/Submit.scss

@@ -1,6 +1,10 @@
 @import '@influxdata/clockface/dist/variables.scss';
 @import '~src/flows/FlowVariables.scss';
 
+.submit-btn {
+  width: 170px;
+}
+
 .submit-btn--item {
   align-items: flex-start;
 }

src/flows/components/header/Submit.tsx

@@ -46,6 +46,7 @@ export const Submit: FC = () => {
     return (
       <ButtonGroup>
         <SubmitQueryButton
+          className="submit-btn"
           text={runMode}
           icon={IconFont.Play}
           submitButtonDisabled={hasQueries === false}

src/flows/components/header/index.tsx

@@ -205,7 +205,7 @@ const FlowHeader: FC = () => {
                   icon={IconFont.Share}
                   onClick={showShare}
                   color={
-                    !share ? ComponentColor.Default : ComponentColor.Secondary
+                    !share ? ComponentColor.Primary : ComponentColor.Secondary
                   }
                   titleText="Share Notebook"
                 />