diff --git a/package-lock.json b/package-lock.json index 7a2ef6071..56b5a2392 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/grafnode-run/package-lock.json b/packages/grafnode-run/package-lock.json index c896734ea..4347a8985 100644 --- a/packages/grafnode-run/package-lock.json +++ b/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", diff --git a/packages/grafnode-run/package.json b/packages/grafnode-run/package.json index acbbdda8e..dc1c67b02 100644 --- a/packages/grafnode-run/package.json +++ b/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" }, diff --git a/packages/grafnode-run/src/pages/_app.js b/packages/grafnode-run/src/pages/_app.js index 30ee12fd6..1e4e5fb06 100644 --- a/packages/grafnode-run/src/pages/_app.js +++ b/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 (
diff --git a/packages/grafnode-run/src/styles/_buttons.scss b/packages/grafnode-run/src/styles/_buttons.scss new file mode 100644 index 000000000..4fe5a3215 --- /dev/null +++ b/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); + } + } +} diff --git a/packages/grafnode-run/src/styles/app.scss b/packages/grafnode-run/src/styles/app.scss new file mode 100644 index 000000000..64423a4bb --- /dev/null +++ b/packages/grafnode-run/src/styles/app.scss @@ -0,0 +1 @@ +@import "buttons";