btn variants changed to link in viewlets

invana · May 29, 2021 · b83c4e9 · b83c4e9
1 parent b0cf312
commit b83c4e9
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 19 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -71,3 +71,7 @@ button {
   background: transparent !important;
   color: inherit !important;
 }
+
+.btn-link{
+  color: #212121;
+}
diff --git a/src/web/viewlets/canvas/lambda-settings.js b/src/web/viewlets/canvas/lambda-settings.js
@@ -102,14 +102,14 @@ export default class LambdaSettingsView extends React.Component {
                                             {lambdaDataToShow.length > 0
                                                 ?
                                                 <React.Fragment>
-                                                    <Button variant={"outline-secondary"} type={"button"}
+                                                    <Button variant={"link"} type={"button"}
                                                             className={"pr-2 pl-2 mr-2 rounded-0 border-0"}
                                                             disabled={!(this.state.showStartCount > 0)}
                                                             onClick={() => this.showPrev()}>
                                                         <FontAwesomeIcon icon={faChevronLeft}/>
                                                     </Button>
 
-                                                    <Button variant={"outline-secondary"} type={"button"}
+                                                    <Button variant={"link"} type={"button"}
                                                             className={"pr-2 pl-2 mr-2 rounded-0 border-0"}
                                                             disabled={!(lambdaData.length > this.state.showEndCount)}
                                                             onClick={() => this.showNext()}>
@@ -119,7 +119,7 @@ export default class LambdaSettingsView extends React.Component {
                                                 : <React.Fragment/>
                                             }
 
-                                            <Button variant={"outline-secondary"} type={"button"}
+                                            <Button variant={"link"} type={"button"}
                                                     className={"pr-2 pl-2 button-hover-bg-disable rounded-0 border-0"}
                                                     onClick={() => this.props.onClose()}>
                                                 <FontAwesomeIcon icon={faWindowClose}/>

diff --git a/src/web/viewlets/canvas/query-console.js b/src/web/viewlets/canvas/query-console.js
@@ -67,7 +67,8 @@ export default class QueryConsole extends React.Component {
             alert("Query cannot be null")
         }
     }
-    saveQueryToLambda(){
+
+    saveQueryToLambda() {
         addQueryToLambda(this.state.canvasQueryString);
     }
 
@@ -85,17 +86,24 @@ export default class QueryConsole extends React.Component {
                             canvasQueryString={this.state.canvasQueryString || ''}
                         />
                         <div className={"pl-2  pt-2 pb-2 pr-3 bg-white border-top"}>
-                            <Button variant={"outline-primary position-relative pt-0 pb-0 mr-2"} size="sm"
-                                    type={"submit"}>Submit Query</Button>
-                            <Button variant={"outline-secondary position-relative pt-0 pb-0"} size="sm"
-                                    onClick={()=> this.saveQueryToLambda()}
-                                    type={"button"}>save as lambda</Button>
-
-                            <Button variant={"outline-secondary position-relative ml-2 pt-0 pb-0"}
-                                    onClick={() => this.props.setLeftContentName(null)}
-                                    size="sm">
-                                <FontAwesomeIcon icon={faWindowClose}/>
-                            </Button>
+                            <div className="row">
+                                <div className="col col-10">
+                                    <Button variant={"outline-primary position-relative pt-0 pb-0 mr-2"} size="sm"
+                                            type={"submit"}>Submit Query</Button>
+                                    <Button variant={"outline-secondary position-relative pt-0 pb-0"} size="sm"
+                                            onClick={() => this.saveQueryToLambda()}
+                                            type={"button"}>save as lambda</Button>
+
+                                </div>
+                                <div className="col col-2">
+                                    <Button variant={"outline-secondary float-right border-0" +
+                                    " position-relative ml-2 pt-0 pb-0 mr-0 button-hover-bg-disable"}
+                                            onClick={() => this.props.setLeftContentName(null)}
+                                            size="sm">
+                                        <FontAwesomeIcon icon={faWindowClose}/>
+                                    </Button>
+                                </div>
+                            </div>
                         </div>
                     </form>
                     <div className="clearfix"/>

diff --git a/src/web/viewlets/canvas/query-history.js b/src/web/viewlets/canvas/query-history.js
@@ -88,22 +88,22 @@ export default class RequestHistoryView extends React.Component {
                             <div className="col col-5">
 
                                 <div className="float-right">
-                                    <Button variant={"outline-secondary"} type={"button"}
+                                    <Button variant={"link"} type={"button"}
                                             className={"pr-2 pl-2 mr-2 rounded-0 border-0"}
                                             disabled={!(this.state.showStartCount > 0)}
                                             onClick={() => this.showPrev()}>
                                         <FontAwesomeIcon icon={faChevronLeft}/>
                                     </Button>
 
 
-                                    <Button variant={"outline-secondary"} type={"button"}
+                                    <Button variant={"link"} type={"button"}
                                             className={"pr-2 pl-2 mr-2 rounded-0 border-0"}
                                             disabled={!(existingHistory.length > this.state.showEndCount)}
 
                                             onClick={() => this.showNext()}>
                                         <FontAwesomeIcon icon={faChevronRight}/>
                                     </Button>
-                                    <Button variant={"outline-secondary "} type={"button"}
+                                    <Button variant={"link "} type={"button"}
                                             className={"pr-2 pl-2 button-hover-bg-disable rounded-0 border-0"}
                                             onClick={() => this.props.onClose()}>
                                         <FontAwesomeIcon icon={faWindowClose}/>

diff --git a/src/web/viewlets/welcome/welcome.js b/src/web/viewlets/welcome/welcome.js
@@ -25,7 +25,10 @@ export default class Welcome extends DefaultRemoteComponent {
         const historyToShow = existingHistory.filter(item => item.source === "console").slice(0, 2);
 
         return (
-            <Card className={"ml-4"} style={{width: '820px', "borderRadius": 0, "top": "58px", }}>
+            <Card className={"ml-4 mr-4"} style={{
+                "maxWidth": '820px',
+                "minWidth": "420px",
+                "borderRadius": 0, "top": "58px", }}>
                 <Card.Body style={{"padding": "5rem 3rem 3rem 3rem"}}>
                     <Row>
                         <Col md={"6"}>