feat: button styles

package-lock.json

@@ -33,6 +33,7 @@
 				"react": "17.0.2",
 				"react-dom": "17.0.2",
 				"react-tabs": "^3.2.3",
+				"sass": "^1.46.0",
 				"styled-components": "^5.3.3",
 				"tailwindcss": "^2.2.19"
 			},
@@ -9144,6 +9145,11 @@
 				"url": "https://opencollective.com/immer"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+			"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+		},
 		"node_modules/import-cwd": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -13686,6 +13692,22 @@
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
 		},
+		"node_modules/sass": {
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
+			"integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=8.9.0"
+			}
+		},
 		"node_modules/scheduler": {
 			"version": "0.20.2",
 			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -16219,6 +16241,7 @@
 				"codemirror": "^5.64.0",
 				"escape-html": "^1.0.3",
 				"markdown-it": "^12.2.0",
+				"nanoid": "^3.1.30",
 				"react": "^17.0.2",
 				"react-dom": "^17.0.2",
 				"react-tabs": "^3.2.3",
@@ -23109,6 +23132,11 @@
 			"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz",
 			"integrity": "sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA=="
 		},
+		"immutable": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+			"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+		},
 		"import-cwd": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -26560,6 +26588,16 @@
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
 		},
+		"sass": {
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
+			"integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
+			"requires": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			}
+		},
 		"scheduler": {
 			"version": "0.20.2",
 			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",

packages/grafnode-run/package-lock.json

@@ -28,6 +28,7 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-tabs": "^3.2.3",
+        "sass": "^1.46.0",
         "styled-components": "^5.3.3",
         "tailwindcss": "^2.2.19"
       },
@@ -5770,6 +5771,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "node_modules/import-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -7768,6 +7774,22 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
+      "integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -13617,6 +13639,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz",
       "integrity": "sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA=="
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
     "import-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -15088,6 +15115,16 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sass": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
+      "integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",

packages/grafnode-run/package.json

@@ -40,6 +40,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-tabs": "^3.2.3",
+    "sass": "^1.46.0",
     "styled-components": "^5.3.3",
     "tailwindcss": "^2.2.19"
   },

packages/grafnode-run/src/pages/_app.js

@@ -6,6 +6,8 @@ import 'react-tabs/style/react-tabs.css';
 import 'codemirror/lib/codemirror.css';
 import 'graphiql/graphiql.min.css';
 
+import '../styles/app.scss';
+
 function SafeHydrate({ children }) {
   return (
     <div suppressHydrationWarning>

packages/grafnode-run/src/styles/_buttons.scss

@@ -0,0 +1,90 @@
+.btn {
+  text-align: center;
+  white-space: nowrap;
+  outline: none;
+  box-shadow: none;
+  border-radius: 3px;
+}
+
+.btn-sm {
+  padding: .215rem .6rem .215rem .6rem;
+}
+
+.btn-md {
+  padding: .4rem 1.1rem;
+  line-height: 1.47;
+}
+
+.btn-default {
+  &:active,
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+.btn-close {
+  color: #212529;
+  background: white;
+  border: solid 1px white;
+  padding: .215rem .6rem .215rem .6rem;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+    border: solid 1px #696969;
+  }
+}
+
+.btn-secondary {
+  color: #212529;
+  background: #e2e6ea;
+  border: solid 1px #dae0e5;
+
+  .btn-icon {
+    color: #3f3f3f;
+  }
+
+  &:hover,
+  &:focus {
+    border-color: #696969;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:disabled {
+    color: #545454;
+    background: #efefef;
+    border: solid 1px rgb(234, 234, 234);
+    cursor: not-allowed;
+  }
+
+  &:disabled.btn-icon {
+    color: #545454;
+  }
+
+  &.btn-gradient {
+    background: linear-gradient(#fff, #e0e0e0);
+    border: solid 1px rgb(191, 191, 191);
+
+    &:hover {
+      border: solid 1px rgb(179, 179, 179);
+      background: linear-gradient(#f6f6f6, #e0e0e0);
+    }
+
+    &:focus,
+    &:active {
+      border: solid 1px rgb(129, 129, 129);
+      outline: none;
+      box-shadow: 0 8px 6px -11px black;
+    }
+
+    &:disabled {
+      color: #545454;
+      background: linear-gradient(#fff, #ececec);
+      border: solid 1px rgb(234, 234, 234);
+    }
+  }
+}

packages/grafnode-run/src/styles/app.scss

@@ -0,0 +1 @@
+@import "buttons";