From 7065c1044950e011ef0c34c5f773362f7ddad549 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 24 Dec 2020 00:50:35 +0100 Subject: [PATCH 01/17] introducing styled components --- package.json | 2 + src/App.tsx | 41 +++++++------- yarn.lock | 150 +++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 171 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 7d7cf1a..46dcad0 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-scripts": "3.4.3", "rxjs": "^6.6.3", "socket.io-client": "^2.3.1", + "styled-components": "^5.2.1", "xterm": "^4.9.0", "xterm-addon-fit": "^0.4.0" }, @@ -40,6 +41,7 @@ "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", "@types/socket.io-client": "^1.4.34", + "@types/styled-components": "^5.1.7", "@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "cross-env": "^7.0.2", diff --git a/src/App.tsx b/src/App.tsx index a3b9b39..b3a686b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import CssBaseline from "@material-ui/core/CssBaseline"; import { createMuiTheme, Theme, withStyles } from "@material-ui/core/styles"; -import { ThemeProvider } from "@material-ui/styles"; +import { ThemeProvider as ThemeProviderM } from "@material-ui/styles"; +import { ThemeProvider } from 'styled-components'; import React, { ReactElement } from "react"; import { BrowserRouter as Router, @@ -45,24 +46,26 @@ const GlobalCss = withStyles((theme: Theme) => { function App(): ReactElement { return ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ); } diff --git a/yarn.lock b/yarn.lock index b8a74eb..35da39a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -74,6 +74,22 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.12.10": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af" + integrity sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA== + dependencies: + "@babel/types" "^7.12.11" + jsesc "^2.5.1" + source-map "^0.5.0" + +"@babel/helper-annotate-as-pure@^7.0.0": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d" + integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ== + dependencies: + "@babel/types" "^7.12.10" + "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -182,7 +198,7 @@ dependencies: "@babel/types" "^7.12.1" -"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb" integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA== @@ -268,6 +284,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== +"@babel/helper-validator-identifier@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" + integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw== + "@babel/helper-validator-option@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9" @@ -306,6 +327,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0" integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ== +"@babel/parser@^7.12.10": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79" + integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg== + "@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.8.3": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e" @@ -1133,6 +1159,21 @@ globals "^11.1.0" lodash "^4.17.19" +"@babel/traverse@^7.4.5": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a" + integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.12.10" + "@babel/helper-function-name" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.11.0" + "@babel/parser" "^7.12.10" + "@babel/types" "^7.12.10" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.19" + "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.12.5", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.9.0": version "7.12.6" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.6.tgz#ae0e55ef1cce1fbc881cd26f8234eb3e657edc96" @@ -1142,6 +1183,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.10", "@babel/types@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.11.tgz#a86e4d71e30a9b6ee102590446c98662589283ce" + integrity sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -1165,6 +1215,28 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/is-prop-valid@^0.8.8": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + "@fortawesome/fontawesome-common-types@^0.2.32": version "0.2.32" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259" @@ -1689,6 +1761,14 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762" @@ -1822,6 +1902,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/styled-components@^5.1.7": + version "5.1.7" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710" + integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/testing-library__jest-dom@^5.9.1": version "5.9.5" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0" @@ -2608,6 +2697,21 @@ babel-plugin-named-asset-import@^0.3.6: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd" integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw== +"babel-plugin-styled-components@>= 1": + version "1.12.0" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9" + integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -3085,6 +3189,11 @@ camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -3657,6 +3766,11 @@ css-blank-pseudo@^0.1.4: dependencies: postcss "^7.0.5" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -3728,6 +3842,15 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -5567,7 +5690,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -10108,6 +10231,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -10629,6 +10757,22 @@ style-loader@0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" +styled-components@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" + integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -10643,7 +10787,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From aac5b0319f8ea8d8911432a1febe89600840fd9a Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 24 Dec 2020 00:51:08 +0100 Subject: [PATCH 02/17] updated sortingOptions with styled components --- .../index.tsx} | 84 ++++++------------- src/common/sorting/sortingOptions/styles.ts | 79 +++++++++++++++++ 2 files changed, 105 insertions(+), 58 deletions(-) rename src/common/sorting/{SortingOptions.tsx => sortingOptions/index.tsx} (64%) create mode 100644 src/common/sorting/sortingOptions/styles.ts diff --git a/src/common/sorting/SortingOptions.tsx b/src/common/sorting/sortingOptions/index.tsx similarity index 64% rename from src/common/sorting/SortingOptions.tsx rename to src/common/sorting/sortingOptions/index.tsx index e9def72..db2fa00 100644 --- a/src/common/sorting/SortingOptions.tsx +++ b/src/common/sorting/sortingOptions/index.tsx @@ -1,23 +1,27 @@ import { - Button, ClickAwayListener, - createStyles, Fade, Grid, IconButton, - makeStyles, - Paper, Popper, - Theme, Tooltip, - Typography, + Typography } from "@material-ui/core"; -import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward"; -import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; import CloseIcon from "@material-ui/icons/Close"; import SortIcon from "@material-ui/icons/Sort"; import React, { ReactElement, useState } from "react"; -import { SortingOrder } from "./SortingUtil"; +import { SortingOrder } from "../SortingUtil"; + +//styles +import { + SortIconContainer, + SortOptionsMenu, + SortOptionButton, + SortOptionActiveGrid, + SortDirIconContainer, + StyledArrowDownwardIcon, + StyledArrowUpwardIcon +} from './styles'; export type SortingOptionsProps = { sortOpts: SortOption[]; @@ -33,36 +37,7 @@ export type SortOption = { sortingOrder?: SortingOrder; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - sortIconContainer: { - paddingRight: theme.spacing(2), - paddingTop: theme.spacing(2), - }, - sortOptionsMenu: { - backgroundColor: theme.palette.background.default, - }, - sortOption: { - padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`, - textTransform: "none", - borderRadius: 0, - color: theme.palette.text.secondary, - }, - sortOptionActive: { - fontWeight: theme.typography.fontWeightBold, - color: theme.palette.text.primary, - }, - sortDirIconContainer: { - width: "15px", - }, - sortDirIcon: { - fontSize: theme.typography.body2.fontSize, - }, - }) -); - function SortingOptions(props: SortingOptionsProps): ReactElement { - const classes = useStyles(); const { sortOpts, orderBy, sortingOrder, onOptionSelected } = props; const [sortOptsOpen, setSortOptsOpen] = useState(false); const [sortOptsAnchorEl, setSortOptsAnchorEl] = useState( @@ -88,18 +63,17 @@ function SortingOptions(props: SortingOptionsProps): ReactElement { return null; } return sortingOrder === "desc" ? ( - + ) : ( - + ); }; return ( -
@@ -116,10 +90,10 @@ function SortingOptions(props: SortingOptionsProps): ReactElement { > {({ TransitionProps }) => ( - + {sortOpts.map((opt) => ( - + + ))} - + )}
- + ); } diff --git a/src/common/sorting/sortingOptions/styles.ts b/src/common/sorting/sortingOptions/styles.ts new file mode 100644 index 0000000..cb01e4f --- /dev/null +++ b/src/common/sorting/sortingOptions/styles.ts @@ -0,0 +1,79 @@ +import styled from 'styled-components'; +import { + Button, + Grid, + Paper, + Typography +} from "@material-ui/core"; +import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward"; +import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; + +//types +type SortIconContainerType = { + item: any; + container: boolean; + justify: string; +} + +type SortOptionButtonType = { + fullWidth: boolean; + disableRipple: boolean; + size: string; + onClick: any; + key: string; +} + +type SortOptionActiveGridType = { + item: any; + container: boolean; + alignItems: string; + spacing: number; + wrap: string; + sortOptionActive: boolean; +} + +type SortDirIconContainerType = { + component: string; +} + +//styled +export const SortIconContainer = styled(Grid)` + padding-right: ${p => p.theme.spacing(2)}px; + padding-top: ${p => p.theme.spacing(2)}px; +`; + +export const SortOptionsMenu = styled(Paper)` + background-color: ${p => p.theme.palette.background.default}; +`; + +export const SortOptionButton = styled(Button)` + padding: ${p => `${p.theme.spacing(1)}px ${p.theme.spacing(3)}px`}; + text-transform: none; + border-radius: 0px; + color: ${p => p.theme.palette.text.secondary}; +`; + +export const SortOptionActiveGrid = styled(Grid)` + ${p => p.sortOptionActive && ` + font-weight: ${p.theme.typography.fontWeightBold}; + color: ${p.theme.palette.text.primary}; + `} +`; + +export const SortDirIconContainer = styled(Typography)` + width: 15px; +`; + +export const StyledArrowDownwardIcon = styled(ArrowDownwardIcon)` + ${p => getArrowIconStyles(p)} +`; + +export const StyledArrowUpwardIcon = styled(ArrowUpwardIcon)` + ${p => getArrowIconStyles(p)} +`; + +const getArrowIconStyles = (p: any) => { + return ` + font-size: ${p.theme.typography.body2.fontSize}px; + `; +} \ No newline at end of file From 6a1567515a995fce11144a23e9c507703d57635f Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 24 Dec 2020 00:51:34 +0100 Subject: [PATCH 03/17] updated console component with styled --- .../console/{Console.tsx => index.tsx} | 62 +++++-------------- src/dashboard/console/styles.ts | 31 ++++++++++ 2 files changed, 48 insertions(+), 45 deletions(-) rename src/dashboard/console/{Console.tsx => index.tsx} (78%) create mode 100644 src/dashboard/console/styles.ts diff --git a/src/dashboard/console/Console.tsx b/src/dashboard/console/index.tsx similarity index 78% rename from src/dashboard/console/Console.tsx rename to src/dashboard/console/index.tsx index 72964b4..3dde336 100644 --- a/src/dashboard/console/Console.tsx +++ b/src/dashboard/console/index.tsx @@ -6,19 +6,16 @@ import "xterm/css/xterm.css"; import api from "../../api"; import { combineLatest, fromEvent, Observable, Subscription } from "rxjs"; import { mergeMap, shareReplay, switchMap, take } from "rxjs/operators"; -import { - createStyles, - Theme, - Typography, - withStyles, - WithStyles, -} from "@material-ui/core"; - -type PropsType = RouteComponentProps<{ param1: string }> & - WithStyles & { - previousTerminal?: Terminal; - setTerminal: (terminal: Terminal) => void; - }; + +//styles +import { + Wrapper, + Title, + Code, + TerminalContainer +} from './styles'; + +type PropsType = RouteComponentProps<{ param1: string }> type StateType = { connected: boolean; @@ -27,29 +24,6 @@ type StateType = { error?: string; }; -const styles = (theme: Theme) => { - return createStyles({ - wrapper: { - height: "90%", - }, - title: { - marginBottom: theme.spacing(2), - }, - code: { - backgroundColor: theme.palette.background.paper, - padding: `0px ${theme.spacing(1)}px`, - borderRadius: 5, - letterSpacing: 2, - fontFamily: "monospace", - }, - terminalContainer: { - height: "100%", - width: "100%", - overflowY: "auto", - }, - }); -}; - const consoleCreated$ = (api.sio.io$.pipe( mergeMap((io) => fromEvent(io, "created")), shareReplay({ refCount: true, bufferSize: 1 }) @@ -208,21 +182,19 @@ class Console extends Component { } render(): ReactElement { - const { classes } = this.props; - return ( -
- - Type {help} to show a list of + + + Type {<Code>help</Code>} to show a list of available commands - </Typography> + {this.state.error && (
Error: {JSON.stringify(this.state.error)}
)} -
-
+ + ); } } -export default withRouter(withStyles(styles, { withTheme: true })(Console)); +export default withRouter(Console); diff --git a/src/dashboard/console/styles.ts b/src/dashboard/console/styles.ts new file mode 100644 index 0000000..6e9c791 --- /dev/null +++ b/src/dashboard/console/styles.ts @@ -0,0 +1,31 @@ +import styled from 'styled-components'; +import { Typography } from "@material-ui/core"; + +// types +type TitleType = { + component: string; + variant: string; +} + +//styled +export const Wrapper = styled.div` + height: 90%; +`; + +export const Title = styled(Typography)` + margin-bottom: ${p => p.theme.spacing(2)}px; +`; + +export const Code = styled.span` + background-color: ${p => p.theme.palette.background.paper}; + padding: ${p => `0px ${p.theme.spacing(1)}px`}; + border-radius: 5px; + letter-spacing: 2px; + font-family: monospace; +`; + +export const TerminalContainer = styled.div` + height: 100%; + width: 100%; + overflowY: auto; +`; \ No newline at end of file From c1992b620908ac7e4729e230690c5dab4af16c22 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 24 Dec 2020 00:52:05 +0100 Subject: [PATCH 04/17] updated dashboard components with styled --- src/dashboard/Dashboard.tsx | 6 +- .../menu/{MenuItem.tsx => menuItem/index.tsx} | 22 +- src/dashboard/menu/menuItem/styles.ts | 17 ++ src/dashboard/overview/OverviewItem.tsx | 202 ------------------ src/dashboard/overview/ServiceDetails.tsx | 74 ------- .../overview/ServiceDetailsContent.tsx | 197 ----------------- .../overview/{Overview.tsx => index.tsx} | 2 +- 7 files changed, 27 insertions(+), 493 deletions(-) rename src/dashboard/menu/{MenuItem.tsx => menuItem/index.tsx} (79%) create mode 100644 src/dashboard/menu/menuItem/styles.ts delete mode 100644 src/dashboard/overview/OverviewItem.tsx delete mode 100644 src/dashboard/overview/ServiceDetails.tsx delete mode 100644 src/dashboard/overview/ServiceDetailsContent.tsx rename src/dashboard/overview/{Overview.tsx => index.tsx} (97%) diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx index 99a6d48..efb40a1 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/Dashboard.tsx @@ -24,9 +24,9 @@ import NotFound from "../common/NotFound"; import { SetupStatusResponse } from "../models/SetupStatusResponse"; import { Status } from "../models/Status"; import { Path } from "../router/Path"; -import Console from "./console/Console"; -import MenuItem, { MenuItemProps } from "./menu/MenuItem"; -import Overview from "./overview/Overview"; +import Console from "./console"; +import MenuItem, { MenuItemProps } from "./menu/menuItem"; +import Overview from "./overview"; import Tradehistory from "./tradehistory/Tradehistory"; import Wallets from "./wallet/Wallets"; diff --git a/src/dashboard/menu/MenuItem.tsx b/src/dashboard/menu/menuItem/index.tsx similarity index 79% rename from src/dashboard/menu/MenuItem.tsx rename to src/dashboard/menu/menuItem/index.tsx index 97acccb..2a4ee41 100644 --- a/src/dashboard/menu/MenuItem.tsx +++ b/src/dashboard/menu/menuItem/index.tsx @@ -1,15 +1,14 @@ import { ListItemIcon, - Tooltip, - Theme, - createStyles, - makeStyles, + Tooltip } from "@material-ui/core"; -import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import React, { ComponentClass, ElementType, ReactElement } from "react"; import { NavLink, useLocation, useRouteMatch } from "react-router-dom"; -import { Path } from "../../router/Path"; +import { Path } from "../../../router/Path"; + +//styles +import { ListItem } from './styles'; export type MenuItemProps = { path: Path; @@ -21,18 +20,9 @@ export type MenuItemProps = { tooltipTextRows?: string[]; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - disabled: { - color: theme.palette.text.disabled, - }, - }) -); - function MenuItem(props: MenuItemProps): ReactElement { const { url } = useRouteMatch(); const { pathname } = useLocation(); - const classes = useStyles(); const navigateTo = `${url}${props.path}`; const isCurrentLocation = (): boolean => { @@ -49,7 +39,7 @@ function MenuItem(props: MenuItemProps): ReactElement { } > ` + ${p => p.isDisabled && ` + color: ${p.theme.palette.text.disabled}; + `} +`; \ No newline at end of file diff --git a/src/dashboard/overview/OverviewItem.tsx b/src/dashboard/overview/OverviewItem.tsx deleted file mode 100644 index fa28e89..0000000 --- a/src/dashboard/overview/OverviewItem.tsx +++ /dev/null @@ -1,202 +0,0 @@ -import { - Button, - createStyles, - Divider, - Icon, - IconButton, - makeStyles, - Snackbar, - SnackbarContent, - Theme, - Tooltip, -} from "@material-ui/core"; -import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; -import Grid from "@material-ui/core/Grid"; -import Typography from "@material-ui/core/Typography"; -import CloseIcon from "@material-ui/icons/Close"; -import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined"; -import React, { ReactElement, useState } from "react"; -import api from "../../api"; -import { formatDateTimeForFilename } from "../../common/dateUtil"; -import { isServiceReady } from "../../common/serviceUtil"; -import { SERVICES_WITH_ADDITIONAL_INFO } from "../../constants"; -import { Status } from "../../models/Status"; -import ServiceDetails from "./ServiceDetails"; - -export type OverviewItemProps = { - status: Status; - xudLocked?: boolean; - xudNotReady?: boolean; -}; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - cardHeader: { - padding: theme.spacing(3), - }, - cardContent: { - padding: 0, - "&:last-child": { - paddingBottom: 0, - }, - }, - cardCell: { - padding: theme.spacing(4), - textAlign: "center", - }, - statusDot: { - height: 10, - width: 10, - borderRadius: "50%", - display: "inline-block", - marginRight: 10, - }, - active: { - backgroundColor: theme.palette.success.light, - }, - inactive: { - backgroundColor: theme.palette.error.light, - }, - snackbar: { - bottom: theme.spacing(3) * 2, - right: theme.spacing(3) * 2, - }, - snackbarMessage: { - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText, - }, - }) -); - -const downloadLogs = (serviceName: string, handleError: () => void): void => { - api.logs$(serviceName).subscribe({ - next: (resp: string) => { - const blob = new Blob([resp]); - const url = URL.createObjectURL(blob); - const anchor = Object.assign(document.createElement("a"), { - href: url, - download: `${serviceName}_${formatDateTimeForFilename(new Date())}.log`, - style: { display: "none" }, - }); - anchor.click(); - }, - error: handleError, - }); -}; - -const OverviewItem = (props: OverviewItemProps): ReactElement => { - const { status, xudLocked, xudNotReady } = props; - const [detailsOpen, setDetailsOpen] = useState(false); - const [errorMsgOpen, setErrorMsgOpen] = useState(false); - const classes = useStyles(); - - const statusDotClass = `${classes.statusDot} ${ - isServiceReady(status) ? classes.active : classes.inactive - }`; - - const isDetailsIconVisible = (status: Status): boolean => { - return ( - !xudLocked && - !xudNotReady && - SERVICES_WITH_ADDITIONAL_INFO.includes(status.service) && - isServiceReady(status) - ); - }; - - const isDownloadLogsEnabled = (status: Status): boolean => { - return ( - !status.status.includes("light mode") && status.status !== "Disabled" - ); - }; - - return ( - - - - - {isDetailsIconVisible(status) && ( - - setDetailsOpen(true)}> - open_in_full - - - )} - - - - - {props.status.service} info - - - - {isDownloadLogsEnabled(status) && ( - - - - )} - - - - - - - Status - - - - {props.status.status} - - - - - - {detailsOpen && ( - setDetailsOpen(false)} - /> - )} - - setErrorMsgOpen(false)} - anchorOrigin={{ vertical: "bottom", horizontal: "right" }} - > - setErrorMsgOpen(false)}> - - - } - /> - - - ); -}; - -export default OverviewItem; diff --git a/src/dashboard/overview/ServiceDetails.tsx b/src/dashboard/overview/ServiceDetails.tsx deleted file mode 100644 index 56f0429..0000000 --- a/src/dashboard/overview/ServiceDetails.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { - createStyles, - Dialog, - DialogTitle, - Divider, - Grid, - makeStyles, - Theme, -} from "@material-ui/core"; -import IconButton from "@material-ui/core/IconButton"; -import Typography from "@material-ui/core/Typography"; -import CloseIcon from "@material-ui/icons/Close"; -import React, { ReactElement } from "react"; -import { Status } from "../../models/Status"; -import { drawerWidth } from "../Dashboard"; -import ServiceDetailsContent from "./ServiceDetailsContent"; - -export type ServiceDetailsProps = { - status: Status; - handleClose: () => void; -}; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - dialog: { - position: "absolute", - left: drawerWidth, - top: 0, - margin: theme.spacing(3), - width: "100%", - maxWidth: `calc(100% - ${drawerWidth + theme.spacing(3) * 2}px)`, - backgroundColor: theme.palette.background.default, - }, - }) -); - -const ServiceDetails = (props: ServiceDetailsProps): ReactElement => { - const { status, handleClose } = props; - const classes = useStyles(); - - return ( - - - - - - - - - - - General {status.service} info - - - - - - - - ); -}; - -export default ServiceDetails; diff --git a/src/dashboard/overview/ServiceDetailsContent.tsx b/src/dashboard/overview/ServiceDetailsContent.tsx deleted file mode 100644 index af2f2e6..0000000 --- a/src/dashboard/overview/ServiceDetailsContent.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { - CircularProgress, - createStyles, - DialogContent, - Divider, - Grid, - makeStyles, - Theme, - Typography, -} from "@material-ui/core"; -import IconButton from "@material-ui/core/IconButton"; -import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; -import React, { ReactElement, useEffect, useState } from "react"; -import { Subscription } from "rxjs"; -import api from "../../api"; -import { SERVICES_WITH_ADDITIONAL_INFO } from "../../constants"; -import { Info } from "../../models/Info"; -import { LndInfo } from "../../models/LndInfo"; -import { Status } from "../../models/Status"; -import { copyToClipboard } from "../../common/appUtil"; - -export type ServiceDetailsContentProps = { - status: Status; - closeDetails: () => void; -}; - -type InfoRow = { - label: string; - value: string | number; - copyIcon?: boolean; -}; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - content: { - padding: 0, - }, - contentCell: { - padding: theme.spacing(2), - textAlign: "center", - wordWrap: "break-word", - whiteSpace: "pre-wrap", - }, - textRow: { - padding: theme.spacing(3), - textAlign: "center", - }, - loaderContainer: { - height: "100px", - justifyContent: "center", - alignItems: "center", - }, - }) -); - -const fetchInfo = ( - onNext: (value: Info) => void, - closeDetails: () => void -): Subscription => { - return api.getinfo$().subscribe({ - next: onNext, - error: closeDetails, - }); -}; - -const createRows = (info: Info, status: Status): InfoRow[] => { - if (status.service === "xud") { - return createXudRows(status, info); - } - if (status.service === "connext") { - return createConnextRows(info); - } - if (status.service.startsWith("lnd")) { - const currency = status.service === "lndbtc" ? "BTC" : "LTC"; - const lndInfo: LndInfo = info.lnd[currency]; - return createLndRows(lndInfo); - } - return []; -}; - -const createXudRows = (status: Status, info: Info): InfoRow[] => [ - { label: "Status", value: status.status }, - { label: "Alias", value: info.alias }, - { - label: "NodeKey", - value: info.node_pub_key, - copyIcon: !!info.node_pub_key, - }, - { - label: "Address", - value: info.uris?.length ? info.uris[0] : "", - copyIcon: !!info.uris?.length, - }, - { label: "Network", value: info.network }, - { label: "Peers", value: info.num_peers }, - { label: "Pairs", value: info.num_pairs }, - { label: "Own orders", value: info.orders.own }, - { label: "Peers' orders", value: info.orders.peer }, - { label: "Pending swaps", value: info.pending_swap_hashes?.join("\n") }, -]; - -const createConnextRows = (info: Info): InfoRow[] => [ - { label: "Status", value: info.connext.status }, - { - label: "Address", - value: info.connext.address, - copyIcon: !!info.connext.address, - }, - { label: "Version", value: info.connext.version }, - { label: "Chain", value: info.connext.chain }, -]; - -const createLndRows = (lndInfo: LndInfo): InfoRow[] => [ - { label: "Status", value: lndInfo.status }, - { label: "Alias", value: lndInfo.alias }, - { - label: "Address", - value: lndInfo.uris?.length ? lndInfo.uris[0] : "", - copyIcon: !!lndInfo.uris?.length, - }, - { - label: "Chains", - value: (lndInfo.chains || []) - .map((chain) => `${chain.chain} ${chain.network}`) - .join("\n"), - }, - { label: "Blockheight", value: lndInfo.blockheight }, - { label: "Active channels", value: lndInfo.channels?.active }, - { label: "Inactive channels", value: lndInfo.channels?.inactive }, - { label: "Pending channels", value: lndInfo.channels?.pending }, - { label: "Closed channels", value: lndInfo.channels?.closed }, - { label: "Version", value: lndInfo.version }, -]; - -const ServiceDetailsContent = ( - props: ServiceDetailsContentProps -): ReactElement => { - const { status, closeDetails } = props; - const classes = useStyles(); - const [rows, setRows] = useState([]); - const [initialLoadComplete, setInitialLoadComplete] = useState(false); - - useEffect(() => { - if (!SERVICES_WITH_ADDITIONAL_INFO.includes(status.service)) { - return; - } - const onNextValue = (value: Info): void => { - setRows(createRows(value, status)); - setInitialLoadComplete(true); - }; - const subscription = fetchInfo(onNextValue, closeDetails); - return () => subscription.unsubscribe(); - }, [closeDetails, status]); - - return ( - - {initialLoadComplete ? ( - rows?.map((row) => ( - - - {row.label} - - - - {row.value} - - - {row.copyIcon && ( - copyToClipboard(row.value)}> - - - )} - - - )) - ) : ( - - - - )} - {!rows?.length && - !SERVICES_WITH_ADDITIONAL_INFO.includes(status.service) && ( - - No additional information to display - - )} - - ); -}; - -export default ServiceDetailsContent; diff --git a/src/dashboard/overview/Overview.tsx b/src/dashboard/overview/index.tsx similarity index 97% rename from src/dashboard/overview/Overview.tsx rename to src/dashboard/overview/index.tsx index 2f6f54b..9c54f67 100644 --- a/src/dashboard/overview/Overview.tsx +++ b/src/dashboard/overview/index.tsx @@ -5,7 +5,7 @@ import api from "../../api"; import PageCircularProgress from "../../common/PageCircularProgress"; import { Status } from "../../models/Status"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import OverviewItem from "./OverviewItem"; +import OverviewItem from "./overviewItem"; type PropsType = RouteComponentProps<{ param1: string }>; From d88a0d966b5e48861215bbe9dce4532aa9e56896 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 24 Dec 2020 00:52:47 +0100 Subject: [PATCH 05/17] updated dashboard overview components with styled --- src/dashboard/overview/overviewItem/index.tsx | 159 ++++++++++++++++ src/dashboard/overview/overviewItem/styles.ts | 72 +++++++ .../overview/serviceDetails/index.tsx | 56 ++++++ .../overview/serviceDetails/styles.ts | 15 ++ .../overview/serviceDetailsContent/index.tsx | 176 ++++++++++++++++++ .../overview/serviceDetailsContent/styles.ts | 45 +++++ 6 files changed, 523 insertions(+) create mode 100644 src/dashboard/overview/overviewItem/index.tsx create mode 100644 src/dashboard/overview/overviewItem/styles.ts create mode 100644 src/dashboard/overview/serviceDetails/index.tsx create mode 100644 src/dashboard/overview/serviceDetails/styles.ts create mode 100644 src/dashboard/overview/serviceDetailsContent/index.tsx create mode 100644 src/dashboard/overview/serviceDetailsContent/styles.ts diff --git a/src/dashboard/overview/overviewItem/index.tsx b/src/dashboard/overview/overviewItem/index.tsx new file mode 100644 index 0000000..380ad0e --- /dev/null +++ b/src/dashboard/overview/overviewItem/index.tsx @@ -0,0 +1,159 @@ +import { + Button, + Divider, + Icon, + IconButton, + Tooltip, +} from "@material-ui/core"; +import Card from "@material-ui/core/Card"; +import Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; +import CloseIcon from "@material-ui/icons/Close"; +import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined"; +import React, { ReactElement, useState } from "react"; +import api from "../../../api"; +import { formatDateTimeForFilename } from "../../../common/dateUtil"; +import { isServiceReady } from "../../../common/serviceUtil"; +import { SERVICES_WITH_ADDITIONAL_INFO } from "../../../constants"; +import { Status } from "../../../models/Status"; +import ServiceDetails from "../serviceDetails"; + +//styles +import { + StyledGrid, + CardContent, + CardCellGrid, + StatusDot, + Snackbar, + SnackbarContent +} from './styles'; + +export type OverviewItemProps = { + status: Status; + xudLocked?: boolean; + xudNotReady?: boolean; +}; + +const downloadLogs = (serviceName: string, handleError: () => void): void => { + api.logs$(serviceName).subscribe({ + next: (resp: string) => { + const blob = new Blob([resp]); + const url = URL.createObjectURL(blob); + const anchor = Object.assign(document.createElement("a"), { + href: url, + download: `${serviceName}_${formatDateTimeForFilename(new Date())}.log`, + style: { display: "none" }, + }); + anchor.click(); + }, + error: handleError, + }); +}; + +const OverviewItem = (props: OverviewItemProps): ReactElement => { + const { status, xudLocked, xudNotReady } = props; + const [detailsOpen, setDetailsOpen] = useState(false); + const [errorMsgOpen, setErrorMsgOpen] = useState(false); + + const isDetailsIconVisible = (status: Status): boolean => { + return ( + !xudLocked && + !xudNotReady && + SERVICES_WITH_ADDITIONAL_INFO.includes(status.service) && + isServiceReady(status) + ); + }; + + const isDownloadLogsEnabled = (status: Status): boolean => { + return ( + !status.status.includes("light mode") && status.status !== "Disabled" + ); + }; + + return ( + + + + + {isDetailsIconVisible(status) && ( + + setDetailsOpen(true)}> + open_in_full + + + )} + + + + + {props.status.service} info + + + + {isDownloadLogsEnabled(status) && ( + + + + )} + + + + + + + Status + + + + {props.status.status} + + + + + + {detailsOpen && ( + setDetailsOpen(false)} + /> + )} + + setErrorMsgOpen(false)} + anchorOrigin={{ vertical: "bottom", horizontal: "right" }} + > + setErrorMsgOpen(false)}> + + + } + /> + + + ); +}; + +export default OverviewItem; diff --git a/src/dashboard/overview/overviewItem/styles.ts b/src/dashboard/overview/overviewItem/styles.ts new file mode 100644 index 0000000..e2607e8 --- /dev/null +++ b/src/dashboard/overview/overviewItem/styles.ts @@ -0,0 +1,72 @@ +import styled from 'styled-components'; +import { + Grid, + CardContent as $CardContent, + Snackbar as $Snackbar, + SnackbarContent as $SnackbarContent, +} from "@material-ui/core"; + +//type +type StyledGridType = { + container: any; + justify: string; + alignItems: string; + wrap: string; +}; + +type CardCellGridType = { + item: boolean; + xs: number +}; + +type StatusDotType = { + isServiceReady: boolean; +} + +type SnackbarType = { + open: boolean; + autoHideDuration: number; + onClose: any; + anchorOrigin: object; +} + +type SnackbarContentType = { + message: string; + action: any; +} + +//styled +export const StyledGrid = styled(Grid)` + padding: ${p => p.theme.spacing(3)}px; +`; + +export const CardContent = styled($CardContent)` + padding: 0px; + &:last-child { + padding-bottom: 0px; + } +`; + +export const CardCellGrid = styled(Grid)` + padding: ${p => p.theme.spacing(4)}px; + text-align: center; +`; + +export const StatusDot = styled.span` + height: 10px; + width: 10px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + background-color: ${p => p.isServiceReady ? p.theme.palette.success.light : p.theme.palette.error.light}; +`; + +export const Snackbar = styled($Snackbar)` + bottom: ${p => p.theme.spacing(3) * 2}px; + right: ${p => p.theme.spacing(3) * 2}px; +`; + +export const SnackbarContent = styled($SnackbarContent)` + background-color: ${p => p.theme.palette.error.main}; + color: ${p => p.theme.palette.error.contrastText}; +`; \ No newline at end of file diff --git a/src/dashboard/overview/serviceDetails/index.tsx b/src/dashboard/overview/serviceDetails/index.tsx new file mode 100644 index 0000000..f5de979 --- /dev/null +++ b/src/dashboard/overview/serviceDetails/index.tsx @@ -0,0 +1,56 @@ +import { + DialogTitle, + Divider, + Grid +} from "@material-ui/core"; +import IconButton from "@material-ui/core/IconButton"; +import Typography from "@material-ui/core/Typography"; +import CloseIcon from "@material-ui/icons/Close"; +import React, { ReactElement } from "react"; +import { Status } from "../../../models/Status"; +import ServiceDetailsContent from "../serviceDetailsContent"; + +//styles +import { + Dialog +} from './styles'; + +export type ServiceDetailsProps = { + status: Status; + handleClose: () => void; +}; + +const ServiceDetails = (props: ServiceDetailsProps): ReactElement => { + const { status, handleClose } = props; + + return ( + + + + + + + + + + + General {status.service} info + + + + + + + + ); +}; + +export default ServiceDetails; diff --git a/src/dashboard/overview/serviceDetails/styles.ts b/src/dashboard/overview/serviceDetails/styles.ts new file mode 100644 index 0000000..596c50d --- /dev/null +++ b/src/dashboard/overview/serviceDetails/styles.ts @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { Dialog as $Dialog} from "@material-ui/core"; +const drawerWidth = 200; + +export const Dialog = styled($Dialog)` + & > .MuiDialog-container > .MuiPaper-root { + position: absolute; + left: ${drawerWidth}px; + top: 0px; + margin: ${p => p.theme.spacing(3)}px; + width: 100%; + max-width: calc(100% - ${p => (drawerWidth + p.theme.spacing(3) * 2)}px); + background-color: ${p => p.theme.palette.background.default}; + } +`; \ No newline at end of file diff --git a/src/dashboard/overview/serviceDetailsContent/index.tsx b/src/dashboard/overview/serviceDetailsContent/index.tsx new file mode 100644 index 0000000..1aa8792 --- /dev/null +++ b/src/dashboard/overview/serviceDetailsContent/index.tsx @@ -0,0 +1,176 @@ +import { + CircularProgress, + Divider, + Grid +} from "@material-ui/core"; +import IconButton from "@material-ui/core/IconButton"; +import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; +import React, { ReactElement, useEffect, useState } from "react"; +import { Subscription } from "rxjs"; +import api from "../../../api"; +import { SERVICES_WITH_ADDITIONAL_INFO } from "../../../constants"; +import { Info } from "../../../models/Info"; +import { LndInfo } from "../../../models/LndInfo"; +import { Status } from "../../../models/Status"; +import { copyToClipboard } from "../../../common/appUtil"; + +//styles +import { + DialogContent, + GridCell, + TextRow, + LoadedContainer +} from './styles'; + +export type ServiceDetailsContentProps = { + status: Status; + closeDetails: () => void; +}; + +type InfoRow = { + label: string; + value: string | number; + copyIcon?: boolean; +}; + +const fetchInfo = ( + onNext: (value: Info) => void, + closeDetails: () => void +): Subscription => { + return api.getinfo$().subscribe({ + next: onNext, + error: closeDetails, + }); +}; + +const createRows = (info: Info, status: Status): InfoRow[] => { + if (status.service === "xud") { + return createXudRows(status, info); + } + if (status.service === "connext") { + return createConnextRows(info); + } + if (status.service.startsWith("lnd")) { + const currency = status.service === "lndbtc" ? "BTC" : "LTC"; + const lndInfo: LndInfo = info.lnd[currency]; + return createLndRows(lndInfo); + } + return []; +}; + +const createXudRows = (status: Status, info: Info): InfoRow[] => [ + { label: "Status", value: status.status }, + { label: "Alias", value: info.alias }, + { + label: "NodeKey", + value: info.node_pub_key, + copyIcon: !!info.node_pub_key, + }, + { + label: "Address", + value: info.uris?.length ? info.uris[0] : "", + copyIcon: !!info.uris?.length, + }, + { label: "Network", value: info.network }, + { label: "Peers", value: info.num_peers }, + { label: "Pairs", value: info.num_pairs }, + { label: "Own orders", value: info.orders.own }, + { label: "Peers' orders", value: info.orders.peer }, + { label: "Pending swaps", value: info.pending_swap_hashes?.join("\n") }, +]; + +const createConnextRows = (info: Info): InfoRow[] => [ + { label: "Status", value: info.connext.status }, + { + label: "Address", + value: info.connext.address, + copyIcon: !!info.connext.address, + }, + { label: "Version", value: info.connext.version }, + { label: "Chain", value: info.connext.chain }, +]; + +const createLndRows = (lndInfo: LndInfo): InfoRow[] => [ + { label: "Status", value: lndInfo.status }, + { label: "Alias", value: lndInfo.alias }, + { + label: "Address", + value: lndInfo.uris?.length ? lndInfo.uris[0] : "", + copyIcon: !!lndInfo.uris?.length, + }, + { + label: "Chains", + value: (lndInfo.chains || []) + .map((chain) => `${chain.chain} ${chain.network}`) + .join("\n"), + }, + { label: "Blockheight", value: lndInfo.blockheight }, + { label: "Active channels", value: lndInfo.channels?.active }, + { label: "Inactive channels", value: lndInfo.channels?.inactive }, + { label: "Pending channels", value: lndInfo.channels?.pending }, + { label: "Closed channels", value: lndInfo.channels?.closed }, + { label: "Version", value: lndInfo.version }, +]; + +const ServiceDetailsContent = ( + props: ServiceDetailsContentProps +): ReactElement => { + const { status, closeDetails } = props; + const [rows, setRows] = useState([]); + const [initialLoadComplete, setInitialLoadComplete] = useState(false); + + useEffect(() => { + if (!SERVICES_WITH_ADDITIONAL_INFO.includes(status.service)) { + return; + } + const onNextValue = (value: Info): void => { + setRows(createRows(value, status)); + setInitialLoadComplete(true); + }; + const subscription = fetchInfo(onNextValue, closeDetails); + return () => subscription.unsubscribe(); + }, [closeDetails, status]); + + return ( + + {initialLoadComplete ? ( + rows?.map((row) => ( + + + {row.label} + + + + {row.value} + + + {row.copyIcon && ( + copyToClipboard(row.value)}> + + + )} + + + )) + ) : ( + + + + )} + {!rows?.length && + !SERVICES_WITH_ADDITIONAL_INFO.includes(status.service) && ( + + No additional information to display + + )} + + ); +}; + +export default ServiceDetailsContent; diff --git a/src/dashboard/overview/serviceDetailsContent/styles.ts b/src/dashboard/overview/serviceDetailsContent/styles.ts new file mode 100644 index 0000000..8cf21d6 --- /dev/null +++ b/src/dashboard/overview/serviceDetailsContent/styles.ts @@ -0,0 +1,45 @@ +import styled from 'styled-components'; +import { + DialogContent as $DialogContent, + Grid, + Typography +} from "@material-ui/core"; + +//types +type GridCellType = { + item: boolean; + xs: number; + md: number; +}; + +type TextRowType = { + variant: string; + component: string; +} + +type LoadedContainerType = { + container: boolean; +} + +//styled +export const DialogContent = styled($DialogContent)` + padding: 0px; +`; + +export const GridCell = styled(Grid)` + padding: ${p => p.theme.spacing(2)}px; + text-align: center; + word-wrap: break-word; + white-space: pre-wrap; +`; + +export const TextRow = styled(Typography)` + padding: ${p => p.theme.spacing(3)}px; + text-align: center; +`; + +export const LoadedContainer = styled(Grid)` + height: 100px; + justify-content: center; + align-items: center; +`; \ No newline at end of file From 45e69e9d7428792539fe838d77ed3573da7d52f6 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 24 Dec 2020 00:53:11 +0100 Subject: [PATCH 06/17] updated tradehistory component imports --- src/dashboard/tradehistory/Tradehistory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dashboard/tradehistory/Tradehistory.tsx b/src/dashboard/tradehistory/Tradehistory.tsx index 6581c03..155ac45 100644 --- a/src/dashboard/tradehistory/Tradehistory.tsx +++ b/src/dashboard/tradehistory/Tradehistory.tsx @@ -19,7 +19,7 @@ import { satsToCoins } from "../../common/currencyUtil"; import PageCircularProgress from "../../common/PageCircularProgress"; import SortingOptions, { SortOption, -} from "../../common/sorting/SortingOptions"; +} from "../../common/sorting/sortingOptions"; import { getComparator, SortingOrder, From 934102aad257ccda28068f778b93255260ee99f1 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 5 Jan 2021 13:59:44 +0100 Subject: [PATCH 07/17] updated common components with styled-components --- src/common/CenterEllipsis.tsx | 42 ------------------- src/common/Loader.tsx | 29 ------------- src/common/NotFound.tsx | 30 ------------- src/common/PageCircularProgress.tsx | 29 ------------- .../index.tsx} | 35 +++++----------- src/common/buttonWithLoading/styles.ts | 20 +++++++++ src/common/centerEllipsis/index.tsx | 29 +++++++++++++ src/common/centerEllipsis/styles.ts | 15 +++++++ .../index.tsx} | 40 +++++++----------- src/common/connectionFailed/styles.ts | 21 ++++++++++ src/common/loader/index.tsx | 16 +++++++ src/common/loader/styles.ts | 14 +++++++ src/common/notFound/index.tsx | 21 ++++++++++ src/common/notFound/styles.ts | 17 ++++++++ src/common/pageCircularProgress/index.tsx | 15 +++++++ src/common/pageCircularProgress/styles.ts | 10 +++++ src/common/{QrCode.tsx => qrCode/index.tsx} | 30 +++---------- src/common/qrCode/styles.ts | 11 +++++ 18 files changed, 219 insertions(+), 205 deletions(-) delete mode 100644 src/common/CenterEllipsis.tsx delete mode 100644 src/common/Loader.tsx delete mode 100644 src/common/NotFound.tsx delete mode 100644 src/common/PageCircularProgress.tsx rename src/common/{ButtonWithLoading.tsx => buttonWithLoading/index.tsx} (56%) create mode 100644 src/common/buttonWithLoading/styles.ts create mode 100644 src/common/centerEllipsis/index.tsx create mode 100644 src/common/centerEllipsis/styles.ts rename src/common/{ConnectionFailed.tsx => connectionFailed/index.tsx} (55%) create mode 100644 src/common/connectionFailed/styles.ts create mode 100644 src/common/loader/index.tsx create mode 100644 src/common/loader/styles.ts create mode 100644 src/common/notFound/index.tsx create mode 100644 src/common/notFound/styles.ts create mode 100644 src/common/pageCircularProgress/index.tsx create mode 100644 src/common/pageCircularProgress/styles.ts rename src/common/{QrCode.tsx => qrCode/index.tsx} (62%) create mode 100644 src/common/qrCode/styles.ts diff --git a/src/common/CenterEllipsis.tsx b/src/common/CenterEllipsis.tsx deleted file mode 100644 index 0293c14..0000000 --- a/src/common/CenterEllipsis.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { createStyles, makeStyles } from "@material-ui/core"; -import React, { ReactElement } from "react"; - -type PropsType = { - text: string; -}; - -const useStyles = makeStyles(() => - createStyles({ - left: { - flex: "0 1 auto", - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "pre", - }, - right: { - flex: "1 0 auto", - overflow: "hidden", - whiteSpace: "pre", - maxWidth: "40px", - }, - }) -); - -function CenterEllipsis(props: PropsType): ReactElement { - const { text } = props; - const splitIndex = - text.length > 4 ? text.length - 4 : Math.round(text.length * 0.75); - const classes = useStyles(); - - const shrinkableText = text.slice(0, splitIndex); - const endText = text.slice(splitIndex); - - return ( - <> - {shrinkableText} - {endText} - - ); -} - -export default CenterEllipsis; diff --git a/src/common/Loader.tsx b/src/common/Loader.tsx deleted file mode 100644 index ca6be5e..0000000 --- a/src/common/Loader.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - CircularProgress, - createStyles, - Grid, - makeStyles, -} from "@material-ui/core"; -import React, { ReactElement } from "react"; - -const useStyles = makeStyles(() => - createStyles({ - loaderContainer: { - height: "100px", - justifyContent: "center", - alignItems: "center", - }, - }) -); - -const Loader = (): ReactElement => { - const classes = useStyles(); - - return ( - - - - ); -}; - -export default Loader; diff --git a/src/common/NotFound.tsx b/src/common/NotFound.tsx deleted file mode 100644 index b97ffcb..0000000 --- a/src/common/NotFound.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createStyles, Grid, makeStyles, Theme } from "@material-ui/core"; -import React, { ReactElement } from "react"; -import notFoundImg from "../assets/404.png"; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - height: "100vh", - padding: theme.spacing(3), - }, - }) -); -const NotFound = (): ReactElement => { - const classes = useStyles(); - - return ( - - Page not found - - ); -}; - -export default NotFound; diff --git a/src/common/PageCircularProgress.tsx b/src/common/PageCircularProgress.tsx deleted file mode 100644 index 84d8112..0000000 --- a/src/common/PageCircularProgress.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Box, - CircularProgress, - createStyles, - makeStyles, -} from "@material-ui/core"; -import React, { ReactElement } from "react"; - -const useStyles = makeStyles(() => - createStyles({ - container: { - height: "100vh", - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "center", - }, - }) -); -const PageCircularProgress = (): ReactElement => { - const classes = useStyles(); - return ( - - - - ); -}; - -export default PageCircularProgress; diff --git a/src/common/ButtonWithLoading.tsx b/src/common/buttonWithLoading/index.tsx similarity index 56% rename from src/common/ButtonWithLoading.tsx rename to src/common/buttonWithLoading/index.tsx index 090d79e..4734782 100644 --- a/src/common/ButtonWithLoading.tsx +++ b/src/common/buttonWithLoading/index.tsx @@ -1,11 +1,12 @@ -import { - Button, - CircularProgress, - createStyles, - makeStyles, -} from "@material-ui/core"; +import { Button } from "@material-ui/core"; import React, { ReactElement } from "react"; +//styles +import { + ButtonWrapper, + ButtonProgress +} from './styles'; + type ButtonWithLoadingProps = { onClick: () => void; text: string; @@ -14,27 +15,11 @@ type ButtonWithLoadingProps = { submitButton?: boolean; }; -const useStyles = makeStyles(() => - createStyles({ - buttonWrapper: { - position: "relative", - }, - buttonProgress: { - position: "absolute", - top: "50%", - left: "50%", - marginTop: -12, - marginLeft: -12, - }, - }) -); - const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => { - const classes = useStyles(); const { onClick, text, disabled, loading, submitButton } = props; return ( -
+ {loading && ( - + )} -
+ ); }; diff --git a/src/common/buttonWithLoading/styles.ts b/src/common/buttonWithLoading/styles.ts new file mode 100644 index 0000000..554b9c3 --- /dev/null +++ b/src/common/buttonWithLoading/styles.ts @@ -0,0 +1,20 @@ +import styled from 'styled-components'; +import { CircularProgress } from "@material-ui/core"; + +//types +type ButtonProgressType = { + size: number; +} + +//styled +export const ButtonWrapper = styled.div` + position: relative; +`; + +export const ButtonProgress = styled(CircularProgress)` + position: absolute; + top: 50%; + left: 50%; + margin-top: -12px; + margin-left: -12; +`; \ No newline at end of file diff --git a/src/common/centerEllipsis/index.tsx b/src/common/centerEllipsis/index.tsx new file mode 100644 index 0000000..ab823da --- /dev/null +++ b/src/common/centerEllipsis/index.tsx @@ -0,0 +1,29 @@ +import React, { ReactElement } from "react"; + +//styles +import { + Left, + Right +} from './styles'; + +type PropsType = { + text: string; +}; + +function CenterEllipsis(props: PropsType): ReactElement { + const { text } = props; + const splitIndex = + text.length > 4 ? text.length - 4 : Math.round(text.length * 0.75); + + const shrinkableText = text.slice(0, splitIndex); + const endText = text.slice(splitIndex); + + return ( + <> + {shrinkableText} + {endText} + + ); +} + +export default CenterEllipsis; diff --git a/src/common/centerEllipsis/styles.ts b/src/common/centerEllipsis/styles.ts new file mode 100644 index 0000000..df36c4e --- /dev/null +++ b/src/common/centerEllipsis/styles.ts @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const Left = styled.span` + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; +`; + +export const Right = styled.span` + flex: 1 0 auto; + overflow: hidden; + white-space: pre; + max-width: 40px; +`; \ No newline at end of file diff --git a/src/common/ConnectionFailed.tsx b/src/common/connectionFailed/index.tsx similarity index 55% rename from src/common/ConnectionFailed.tsx rename to src/common/connectionFailed/index.tsx index fd392c5..289e67c 100644 --- a/src/common/ConnectionFailed.tsx +++ b/src/common/connectionFailed/index.tsx @@ -1,31 +1,20 @@ import { Button, - createStyles, - Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import React, { ReactElement, useEffect } from "react"; import { useHistory } from "react-router-dom"; -import { Path } from "../router/Path"; -import { isElectron, sendMessageToParent } from "./appUtil"; +import { Path } from "../../router/Path"; +import { isElectron, sendMessageToParent } from "../appUtil"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - height: "100vh", - padding: theme.spacing(3), - }, - row: { - padding: theme.spacing(3), - }, - }) -); +//styles +import { + Container, + Row +} from './styles'; const ConnectionFailed = (): ReactElement => { const history = useHistory(); - const classes = useStyles(); useEffect(() => { if (isElectron()) { @@ -34,25 +23,24 @@ const ConnectionFailed = (): ReactElement => { }, []); return ( - - + Failed to get data - - + + - - + + ); }; diff --git a/src/common/connectionFailed/styles.ts b/src/common/connectionFailed/styles.ts new file mode 100644 index 0000000..1dc995c --- /dev/null +++ b/src/common/connectionFailed/styles.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components'; +import { Grid } from "@material-ui/core"; + +//types +type ContainerType = { + item: any; + container: any; + direction: string; + alignItems: string; + justify: string; +} + +//styled +export const Container = styled(Grid)` + height: 100vh; + padding: ${p => p.theme.spacing(3)}px; +`; + +export const Row = styled(Grid)` + padding: ${p => p.theme.spacing(3)}px; +`; \ No newline at end of file diff --git a/src/common/loader/index.tsx b/src/common/loader/index.tsx new file mode 100644 index 0000000..8cc551e --- /dev/null +++ b/src/common/loader/index.tsx @@ -0,0 +1,16 @@ +import { CircularProgress } from "@material-ui/core"; +import React, { ReactElement } from "react"; + +//styles +import { LoaderContainer } from './styles'; + +const Loader = (): ReactElement => { + + return ( + + + + ); +}; + +export default Loader; diff --git a/src/common/loader/styles.ts b/src/common/loader/styles.ts new file mode 100644 index 0000000..f4bca7d --- /dev/null +++ b/src/common/loader/styles.ts @@ -0,0 +1,14 @@ +import styled from 'styled-components'; +import { Grid } from "@material-ui/core"; + +//types +type LoaderContainerType = { + container: any; +} + +//styled +export const LoaderContainer = styled(Grid)` + height: 100px; + justify-content: center; + align-items: center; +`; \ No newline at end of file diff --git a/src/common/notFound/index.tsx b/src/common/notFound/index.tsx new file mode 100644 index 0000000..460e2ce --- /dev/null +++ b/src/common/notFound/index.tsx @@ -0,0 +1,21 @@ +import React, { ReactElement } from "react"; +import notFoundImg from "../../assets/404.png"; + +//styles +import { Container } from './styles'; + +const NotFound = (): ReactElement => { + return ( + + Page not found + + ); +}; + +export default NotFound; diff --git a/src/common/notFound/styles.ts b/src/common/notFound/styles.ts new file mode 100644 index 0000000..b153b81 --- /dev/null +++ b/src/common/notFound/styles.ts @@ -0,0 +1,17 @@ +import styled from 'styled-components'; +import { Grid } from "@material-ui/core"; + +//types +type ContainerType = { + item: any; + container: any; + direction: string; + alignItems: string; + justify: string; +} + +//styled +export const Container = styled(Grid)` + height: 100vh; + padding: ${p => p.theme.spacing(3)}px; +`; \ No newline at end of file diff --git a/src/common/pageCircularProgress/index.tsx b/src/common/pageCircularProgress/index.tsx new file mode 100644 index 0000000..1bfeb78 --- /dev/null +++ b/src/common/pageCircularProgress/index.tsx @@ -0,0 +1,15 @@ +import { CircularProgress } from "@material-ui/core"; +import React, { ReactElement } from "react"; + +//styles +import { Container } from './styles'; + +const PageCircularProgress = (): ReactElement => { + return ( + + + + ); +}; + +export default PageCircularProgress; diff --git a/src/common/pageCircularProgress/styles.ts b/src/common/pageCircularProgress/styles.ts new file mode 100644 index 0000000..a2cb0ce --- /dev/null +++ b/src/common/pageCircularProgress/styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; +import { Box } from "@material-ui/core"; + +export const Container = styled(Box)` + height: 100vh; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +`; \ No newline at end of file diff --git a/src/common/QrCode.tsx b/src/common/qrCode/index.tsx similarity index 62% rename from src/common/QrCode.tsx rename to src/common/qrCode/index.tsx index 4fa2be6..f4ef71e 100644 --- a/src/common/QrCode.tsx +++ b/src/common/qrCode/index.tsx @@ -1,43 +1,25 @@ import { - createStyles, Grid, IconButton, - makeStyles, - Paper, - Theme, - Typography, + Typography } from "@material-ui/core"; import CloseIcon from "@material-ui/icons/Close"; import QRCode from "qrcode.react"; import React, { ReactElement } from "react"; +//styles +import { Container } from './styles'; + type QrCodeProps = { value: string; handleClose: () => void; size?: number; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - display: "flex", - flexDirection: "column", - width: "100%", - height: "100%", - backgroundColor: theme.palette.background.default, - padding: theme.spacing(2), - }, - content: { - height: "100%", - }, - }) -); - const QrCode = (props: QrCodeProps): ReactElement => { - const classes = useStyles(); const { value, handleClose, size } = props; return ( - + @@ -48,7 +30,7 @@ const QrCode = (props: QrCodeProps): ReactElement => { - + ); }; diff --git a/src/common/qrCode/styles.ts b/src/common/qrCode/styles.ts new file mode 100644 index 0000000..d493870 --- /dev/null +++ b/src/common/qrCode/styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; +import { Paper } from "@material-ui/core"; + +export const Container = styled(Paper)` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background-color: ${p => p.theme.palette.background.default}; + padding: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file From 9b7fc8b5517bdd500db4999e8c4647052d22e80c Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 5 Jan 2021 14:00:09 +0100 Subject: [PATCH 08/17] updated dashboard components with styled-components --- src/dashboard/Dashboard.tsx | 4 +- src/dashboard/UnlockXud.tsx | 2 +- src/dashboard/overview/index.tsx | 2 +- .../{Tradehistory.tsx => index.tsx} | 51 ++++------- src/dashboard/tradehistory/styles.ts | 25 ++++++ .../index.tsx} | 41 +++------ .../tradehistoryDownload/styles.ts | 25 ++++++ src/dashboard/wallet/InfoMessage.tsx | 39 --------- src/dashboard/wallet/Wallets.tsx | 4 +- src/dashboard/wallet/Withdraw.tsx | 4 +- src/dashboard/wallet/WithdrawAddress.tsx | 10 +-- src/dashboard/wallet/WithdrawalComplete.tsx | 2 +- .../wallet/{Address.tsx => address/index.tsx} | 50 +++-------- src/dashboard/wallet/address/styles.ts | 38 ++++++++ .../index.tsx} | 6 +- .../index.tsx} | 32 ++----- src/dashboard/wallet/boltzFeeInfo/styles.ts | 13 +++ .../index.tsx} | 52 ++++------- .../wallet/checkBoltzStatus/styles.ts | 39 +++++++++ .../wallet/{Deposit.tsx => deposit/index.tsx} | 45 ++++------ src/dashboard/wallet/deposit/styles.ts | 5 ++ .../index.tsx} | 0 src/dashboard/wallet/infoMessage/index.tsx | 23 +++++ src/dashboard/wallet/infoMessage/styles.ts | 16 ++++ .../index.tsx} | 6 +- .../{WalletItem.tsx => walletItem/index.tsx} | 87 +++++++------------ src/dashboard/wallet/walletItem/styles.ts | 55 ++++++++++++ .../index.tsx} | 2 +- .../wallet/walletItemHeader/styles.ts | 10 +++ .../{WalletRow.tsx => walletRow/index.tsx} | 17 ++-- src/dashboard/wallet/walletRow/styles.ts | 13 +++ 31 files changed, 402 insertions(+), 316 deletions(-) rename src/dashboard/tradehistory/{Tradehistory.tsx => index.tsx} (88%) create mode 100644 src/dashboard/tradehistory/styles.ts rename src/dashboard/tradehistory/{TradehistoryDownload.tsx => tradehistoryDownload/index.tsx} (52%) create mode 100644 src/dashboard/tradehistory/tradehistoryDownload/styles.ts delete mode 100644 src/dashboard/wallet/InfoMessage.tsx rename src/dashboard/wallet/{Address.tsx => address/index.tsx} (59%) create mode 100644 src/dashboard/wallet/address/styles.ts rename src/dashboard/wallet/{BalanceSummary.tsx => balanceSummary/index.tsx} (90%) rename src/dashboard/wallet/{BoltzFeeInfo.tsx => boltzFeeInfo/index.tsx} (72%) create mode 100644 src/dashboard/wallet/boltzFeeInfo/styles.ts rename src/dashboard/wallet/{CheckBoltzTransactionStatus.tsx => checkBoltzStatus/index.tsx} (59%) create mode 100644 src/dashboard/wallet/checkBoltzStatus/styles.ts rename src/dashboard/wallet/{Deposit.tsx => deposit/index.tsx} (82%) create mode 100644 src/dashboard/wallet/deposit/styles.ts rename src/dashboard/wallet/{ErrorMessage.tsx => errorMessage/index.tsx} (100%) create mode 100644 src/dashboard/wallet/infoMessage/index.tsx create mode 100644 src/dashboard/wallet/infoMessage/styles.ts rename src/dashboard/wallet/{LimitsSummary.tsx => limitsSummary/index.tsx} (88%) rename src/dashboard/wallet/{WalletItem.tsx => walletItem/index.tsx} (75%) create mode 100644 src/dashboard/wallet/walletItem/styles.ts rename src/dashboard/wallet/{WalletItemHeader.tsx => walletItemHeader/index.tsx} (97%) create mode 100644 src/dashboard/wallet/walletItemHeader/styles.ts rename src/dashboard/wallet/{WalletRow.tsx => walletRow/index.tsx} (85%) create mode 100644 src/dashboard/wallet/walletRow/styles.ts diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx index efb40a1..83019d4 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/Dashboard.tsx @@ -20,14 +20,14 @@ import { interval } from "rxjs"; import { filter, map, mergeMap, takeUntil } from "rxjs/operators"; import api from "../api"; import { isElectron, sendMessageToParent } from "../common/appUtil"; -import NotFound from "../common/NotFound"; +import NotFound from "../common/notFound"; import { SetupStatusResponse } from "../models/SetupStatusResponse"; import { Status } from "../models/Status"; import { Path } from "../router/Path"; import Console from "./console"; import MenuItem, { MenuItemProps } from "./menu/menuItem"; import Overview from "./overview"; -import Tradehistory from "./tradehistory/Tradehistory"; +import Tradehistory from "./tradehistory"; import Wallets from "./wallet/Wallets"; export const drawerWidth = 200; diff --git a/src/dashboard/UnlockXud.tsx b/src/dashboard/UnlockXud.tsx index deb0f8e..945448e 100644 --- a/src/dashboard/UnlockXud.tsx +++ b/src/dashboard/UnlockXud.tsx @@ -13,7 +13,7 @@ import { import React, { ReactElement, useState } from "react"; import Visibility from "@material-ui/icons/Visibility"; import VisibilityOff from "@material-ui/icons/VisibilityOff"; -import ButtonWithLoading from "../common/ButtonWithLoading"; +import ButtonWithLoading from "../common/buttonWithLoading"; import api from "../api"; import { getErrorMsg, XUD_ERROR_MESSAGES } from "../common/errorUtil"; diff --git a/src/dashboard/overview/index.tsx b/src/dashboard/overview/index.tsx index 9c54f67..35da428 100644 --- a/src/dashboard/overview/index.tsx +++ b/src/dashboard/overview/index.tsx @@ -2,7 +2,7 @@ import Grid from "@material-ui/core/Grid"; import React, { ReactElement } from "react"; import { RouteComponentProps, withRouter } from "react-router-dom"; import api from "../../api"; -import PageCircularProgress from "../../common/PageCircularProgress"; +import PageCircularProgress from "../../common/pageCircularProgress"; import { Status } from "../../models/Status"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; import OverviewItem from "./overviewItem"; diff --git a/src/dashboard/tradehistory/Tradehistory.tsx b/src/dashboard/tradehistory/index.tsx similarity index 88% rename from src/dashboard/tradehistory/Tradehistory.tsx rename to src/dashboard/tradehistory/index.tsx index 155ac45..35099a5 100644 --- a/src/dashboard/tradehistory/Tradehistory.tsx +++ b/src/dashboard/tradehistory/index.tsx @@ -1,22 +1,17 @@ import { - createStyles, Divider, Grid, - IconButton, Paper, - Theme, - Typography, - withStyles, - WithStyles, + Typography } from "@material-ui/core"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement } from "react"; import { RouteComponentProps, withRouter } from "react-router-dom"; import api from "../../api"; import { copyToClipboard } from "../../common/appUtil"; -import CenterEllipsis from "../../common/CenterEllipsis"; +import CenterEllipsis from "../../common/centerEllipsis"; import { satsToCoins } from "../../common/currencyUtil"; -import PageCircularProgress from "../../common/PageCircularProgress"; +import PageCircularProgress from "../../common/pageCircularProgress"; import SortingOptions, { SortOption, } from "../../common/sorting/sortingOptions"; @@ -30,7 +25,10 @@ import { Trade } from "../../models/Trade"; import { TradehistoryResponse } from "../../models/TradehistoryResponse"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; import ViewDisabled from "../ViewDisabled"; -import TradehistoryDownload from "./TradehistoryDownload"; +import TradehistoryDownload from "./tradehistoryDownload"; + +//styles +import { TableCell, TableCellIcon} from './styles'; export type TradeRow = { swapHash: string; @@ -54,8 +52,7 @@ export type TradeHeader = { gridsXl?: 1 | 2 | 3 | 4; }; -type PropsType = RouteComponentProps<{ param1: string }> & - WithStyles; +type PropsType = RouteComponentProps<{ param1: string }>; type StateType = DashboardContentState & { trades?: TradehistoryResponse; @@ -64,17 +61,6 @@ type StateType = DashboardContentState & { sortingOrder: SortingOrder; }; -const styles = (theme: Theme) => { - return createStyles({ - tableCell: { - padding: theme.spacing(2), - }, - tableCellIcon: { - marginLeft: theme.spacing(1), - }, - }); -}; - const getDisplayValue = ( row: TradeRow, prop: keyof TradeRow @@ -169,8 +155,6 @@ class Tradehistory extends DashboardContent { }; render(): ReactElement { - const { classes } = this.props; - return ( {this.state.xudLocked || this.state.xudNotReady ? ( @@ -189,18 +173,17 @@ class Tradehistory extends DashboardContent { > {this.tableHeaders.map((header) => ( - {header.label} - + ))} @@ -223,12 +206,11 @@ class Tradehistory extends DashboardContent { key={getRowId(row)} > {this.tableHeaders.map((column) => ( - {column.copyIcon && row[column.key] ? ( @@ -239,9 +221,8 @@ class Tradehistory extends DashboardContent { alignItems="flex-start" > - copyToClipboard( getDisplayValue(row, column.key) @@ -249,14 +230,14 @@ class Tradehistory extends DashboardContent { } > - + ) : ( {getDisplayValue(row, column.key)} )} - + ))} ))} @@ -279,6 +260,4 @@ class Tradehistory extends DashboardContent { } } -export default withRouter( - withStyles(styles, { withTheme: true })(Tradehistory) -); +export default withRouter(Tradehistory); diff --git a/src/dashboard/tradehistory/styles.ts b/src/dashboard/tradehistory/styles.ts new file mode 100644 index 0000000..e062c8a --- /dev/null +++ b/src/dashboard/tradehistory/styles.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components'; +import { Grid, IconButton } from "@material-ui/core"; + +//types +type TableCellType = { + key: any; + item: any; + container: any; + xs: number; + xl: number; +} + +type TableCellIconType = { + size: string; + onClick: any; +} + +//styled +export const TableCell = styled(Grid)` + padding: ${p => p.theme.spacing(2)}px; +`; + +export const TableCellIcon = styled(IconButton)` + margin-left: ${p => p.theme.spacing(1)}px; +`; \ No newline at end of file diff --git a/src/dashboard/tradehistory/TradehistoryDownload.tsx b/src/dashboard/tradehistory/tradehistoryDownload/index.tsx similarity index 52% rename from src/dashboard/tradehistory/TradehistoryDownload.tsx rename to src/dashboard/tradehistory/tradehistoryDownload/index.tsx index 948522b..9d597ae 100644 --- a/src/dashboard/tradehistory/TradehistoryDownload.tsx +++ b/src/dashboard/tradehistory/tradehistoryDownload/index.tsx @@ -1,56 +1,41 @@ -import { - Button, - createStyles, - Grid, - makeStyles, - Theme, -} from "@material-ui/core"; +import { Button } from "@material-ui/core"; import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined"; import React, { ReactElement } from "react"; -import CSVLink from "../../common/csv/CsvLink"; -import { formatDateTimeForFilename } from "../../common/dateUtil"; -import { TradeHeader, TradeRow } from "./Tradehistory"; +import { formatDateTimeForFilename } from "../../../common/dateUtil"; +import { TradeHeader, TradeRow } from ".."; + +//styles +import { + DownloadButtonContainer, + DownloadLink +} from './styles'; export type TradehistoryDownloadProps = { rows: TradeRow[]; headers: TradeHeader[]; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - downloadButtonContainer: { - paddingTop: theme.spacing(3), - }, - downloadLink: { - textDecoration: "none", - }, - }) -); - const TradehistoryDownload = ( props: TradehistoryDownloadProps ): ReactElement => { - const classes = useStyles(); const { headers, rows } = props; return ( - - - - + + ); }; diff --git a/src/dashboard/tradehistory/tradehistoryDownload/styles.ts b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts new file mode 100644 index 0000000..59aae24 --- /dev/null +++ b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components'; +import { Grid } from "@material-ui/core"; +import CSVLink from "../../../common/csv/CsvLink"; + +//types +type DownloadButtonContainerType = { + item: any; + container: any; + justify: string; +} + +type DownloadLinkType = { + data: any; + headers: any; + filename: string; +} + +//styled +export const DownloadButtonContainer = styled(Grid)` + padding-top: ${p => p.theme.spacing(3)}px; +`; + +export const DownloadLink = styled(CSVLink)` + text-decoration: none; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/InfoMessage.tsx b/src/dashboard/wallet/InfoMessage.tsx deleted file mode 100644 index e33db9b..0000000 --- a/src/dashboard/wallet/InfoMessage.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { - Card, - createStyles, - makeStyles, - Theme, - Typography, -} from "@material-ui/core"; -import React, { ReactElement } from "react"; - -type InfoMessageProps = { - message: string; -}; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - card: { - backgroundColor: theme.palette.info.main, - color: theme.palette.info.contrastText, - marginTop: theme.spacing(3), - padding: theme.spacing(1), - width: "100%", - }, - }) -); - -const InfoMessage = (props: InfoMessageProps): ReactElement => { - const { message } = props; - const classes = useStyles(); - - return ( - - - {message} - - - ); -}; - -export default InfoMessage; diff --git a/src/dashboard/wallet/Wallets.tsx b/src/dashboard/wallet/Wallets.tsx index fb3b14b..58cf144 100644 --- a/src/dashboard/wallet/Wallets.tsx +++ b/src/dashboard/wallet/Wallets.tsx @@ -6,12 +6,12 @@ import { RouteComponentProps, withRouter } from "react-router-dom"; import { timer } from "rxjs"; import { exhaustMap, shareReplay } from "rxjs/operators"; import api from "../../api"; -import PageCircularProgress from "../../common/PageCircularProgress"; +import PageCircularProgress from "../../common/pageCircularProgress"; import { GetbalanceResponse } from "../../models/GetbalanceResponse"; import { TradinglimitsResponse } from "../../models/TradinglimitsResponse"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; import ViewDisabled from "../ViewDisabled"; -import WalletItem from "./WalletItem"; +import WalletItem from "./walletItem"; type PropsType = RouteComponentProps<{ param1: string }> & WithStyles; diff --git a/src/dashboard/wallet/Withdraw.tsx b/src/dashboard/wallet/Withdraw.tsx index e35186e..c0b7082 100644 --- a/src/dashboard/wallet/Withdraw.tsx +++ b/src/dashboard/wallet/Withdraw.tsx @@ -3,9 +3,9 @@ import React, { ReactElement, useEffect, useState } from "react"; import api from "../../api"; import { getCurrencyFullName } from "../../common/currencyUtil"; import { getErrorMsg } from "../../common/errorUtil"; -import Loader from "../../common/Loader"; +import Loader from "../../common/loader"; import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import ErrorMessage from "./ErrorMessage"; +import ErrorMessage from "./errorMessage"; import WithdrawAddress from "./WithdrawAddress"; import WithdrawalComplete from "./WithdrawalComplete"; import WithdrawAmount from "./WithdrawAmount"; diff --git a/src/dashboard/wallet/WithdrawAddress.tsx b/src/dashboard/wallet/WithdrawAddress.tsx index 4b51afb..5349684 100644 --- a/src/dashboard/wallet/WithdrawAddress.tsx +++ b/src/dashboard/wallet/WithdrawAddress.tsx @@ -10,14 +10,14 @@ import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import React, { ReactElement, useState } from "react"; import { satsToCoinsStr } from "../../common/currencyUtil"; import { BOLTZ_ERROR_MESSAGES, getErrorMsg } from "../../common/errorUtil"; -import ButtonWithLoading from "../../common/ButtonWithLoading"; -import QrCode from "../../common/QrCode"; +import ButtonWithLoading from "../../common/buttonWithLoading"; +import QrCode from "../../common/qrCode"; import { Fees } from "../../models/BoltzFees"; import { CreateReverseSwapResponse } from "../../models/CreateReverseSwapResponse"; import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import Address from "./Address"; -import BoltzFeeInfo from "./BoltzFeeInfo"; -import ErrorMessage from "./ErrorMessage"; +import Address from "./address"; +import BoltzFeeInfo from "./boltzFeeInfo"; +import ErrorMessage from "./errorMessage"; import { withdraw } from "./walletUtil"; import WarningMessage from "./WarningMessage"; diff --git a/src/dashboard/wallet/WithdrawalComplete.tsx b/src/dashboard/wallet/WithdrawalComplete.tsx index 4952502..6b9329f 100644 --- a/src/dashboard/wallet/WithdrawalComplete.tsx +++ b/src/dashboard/wallet/WithdrawalComplete.tsx @@ -8,7 +8,7 @@ import { } from "@material-ui/core"; import React, { ReactElement } from "react"; import { satsToCoinsStr } from "../../common/currencyUtil"; -import CheckBoltzTransactionStatus from "./CheckBoltzTransactionStatus"; +import CheckBoltzTransactionStatus from "./checkBoltzStatus"; type WithdrawalCompleteProps = { amount: number; diff --git a/src/dashboard/wallet/Address.tsx b/src/dashboard/wallet/address/index.tsx similarity index 59% rename from src/dashboard/wallet/Address.tsx rename to src/dashboard/wallet/address/index.tsx index dcbca23..0ac234f 100644 --- a/src/dashboard/wallet/Address.tsx +++ b/src/dashboard/wallet/address/index.tsx @@ -1,17 +1,18 @@ import { - createStyles, - Grid, Icon, IconButton, InputAdornment, - makeStyles, - OutlinedInput, - Theme, Tooltip, } from "@material-ui/core"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement } from "react"; -import { copyToClipboard } from "../../common/appUtil"; +import { copyToClipboard } from "../../../common/appUtil"; + +//styles +import { + AddressContainer, + AddressField +} from './styles'; type AddressProps = { address: string; @@ -21,50 +22,21 @@ type AddressProps = { readOnly: boolean; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - addressContainer: { - margin: `${theme.spacing(2)}px 0px`, - }, - addressField: { - marginBottom: theme.spacing(2), - }, - addressFieldReadOnly: { - color: theme.palette.text.primary, - marginBottom: theme.spacing(2), - "&.MuiOutlinedInput-root.Mui-focused fieldset": { - borderColor: theme.palette.common.white, - borderWidth: 1, - }, - }, - qrButton: { - textTransform: "none", - }, - }) -); - const Address = (props: AddressProps): ReactElement => { const { address, setAddress, showQr, openQr, readOnly } = props; - const classes = useStyles(); - - const addressFieldClass = readOnly - ? `${classes.addressField} ${classes.addressFieldReadOnly}` - : classes.addressField; return ( - - + onChange={(event: any) => setAddress ? setAddress(event.target.value) : void 0 } endAdornment={ @@ -86,7 +58,7 @@ const Address = (props: AddressProps): ReactElement => { } /> - + ); }; diff --git a/src/dashboard/wallet/address/styles.ts b/src/dashboard/wallet/address/styles.ts new file mode 100644 index 0000000..d7e4f02 --- /dev/null +++ b/src/dashboard/wallet/address/styles.ts @@ -0,0 +1,38 @@ +import styled from 'styled-components'; +import { + Grid, + OutlinedInput +} from "@material-ui/core"; + +//types +type AddressContainerType = { + item: any; + container: any; + direction: string; +} + +type AddressFieldType = { + fullWidth: any; + color: string; + readOnly: boolean + value: any; + onChange: any; + endAdornment: any; +} + +//styled +export const AddressContainer = styled(Grid)` + margin: ${p => p.theme.spacing(2)}px 0px; +`; + +export const AddressField = styled(OutlinedInput)` + margin: ${p => p.theme.spacing(2)}px 0px; + ${p => p.readOnly && ` + color: ${p.theme.palette.text.primary}; + margin-bottom: ${p.theme.spacing(2)}px; + &.MuiOutlinedInput-root.Mui-focused fieldset { + border-color: ${p.theme.palette.common.white}; + border-width: 1px; + } + `} +`; \ No newline at end of file diff --git a/src/dashboard/wallet/BalanceSummary.tsx b/src/dashboard/wallet/balanceSummary/index.tsx similarity index 90% rename from src/dashboard/wallet/BalanceSummary.tsx rename to src/dashboard/wallet/balanceSummary/index.tsx index afb00ca..ffe6891 100644 --- a/src/dashboard/wallet/BalanceSummary.tsx +++ b/src/dashboard/wallet/balanceSummary/index.tsx @@ -1,9 +1,9 @@ import { Tooltip } from "@material-ui/core"; import InfoIcon from "@material-ui/icons/InfoOutlined"; import React, { ReactElement } from "react"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import Balance from "../../models/Balance"; -import WalletRow, { WalletSubrow } from "./WalletRow"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import Balance from "../../../models/Balance"; +import WalletRow, { WalletSubrow } from "../walletRow"; type BalanceSummaryProps = { balance: Balance; diff --git a/src/dashboard/wallet/BoltzFeeInfo.tsx b/src/dashboard/wallet/boltzFeeInfo/index.tsx similarity index 72% rename from src/dashboard/wallet/BoltzFeeInfo.tsx rename to src/dashboard/wallet/boltzFeeInfo/index.tsx index 916eb40..a5f6f11 100644 --- a/src/dashboard/wallet/BoltzFeeInfo.tsx +++ b/src/dashboard/wallet/boltzFeeInfo/index.tsx @@ -1,17 +1,17 @@ import { - createStyles, Grid, - makeStyles, - Theme, Tooltip, Typography, } from "@material-ui/core"; import Link from "@material-ui/core/Link"; import InfoIcon from "@material-ui/icons/InfoOutlined"; import React, { ReactElement } from "react"; -import { openLink } from "../../common/appUtil"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import { Fees } from "../../models/BoltzFees"; +import { openLink } from "../../../common/appUtil"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { Fees } from "../../../models/BoltzFees"; + +//styles +import { IconContainer } from './styles'; type BoltzFeeInfoProps = { fees: Fees; @@ -21,24 +21,8 @@ type BoltzFeeInfoProps = { const BOLTZ_URL = "https://boltz.exchange"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - iconContainer: { - display: "flex", - alignItems: "center", - }, - link: { - color: theme.palette.text.primary, - "a:hover": { - color: theme.palette.text.primary, - }, - }, - }) -); - const BoltzFeeInfo = (props: BoltzFeeInfoProps): ReactElement => { const { fees, currency, amount } = props; - const classes = useStyles(); const swapFee = amount ? `${satsToCoinsStr((amount * fees.percentage) / 100, currency)} (${ @@ -55,7 +39,7 @@ const BoltzFeeInfo = (props: BoltzFeeInfoProps): ReactElement => { wrap="nowrap" spacing={1} > - + @@ -73,7 +57,7 @@ const BoltzFeeInfo = (props: BoltzFeeInfoProps): ReactElement => { > - + Boltz swap fee: {swapFee} | Miner fee:{" "} diff --git a/src/dashboard/wallet/boltzFeeInfo/styles.ts b/src/dashboard/wallet/boltzFeeInfo/styles.ts new file mode 100644 index 0000000..a2c253c --- /dev/null +++ b/src/dashboard/wallet/boltzFeeInfo/styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; +import { Grid } from "@material-ui/core"; + +//types +type IconContainerType = { + item: any; +} + +//styled +export const IconContainer = styled(Grid)` + display: flex; + align-items: center; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/CheckBoltzTransactionStatus.tsx b/src/dashboard/wallet/checkBoltzStatus/index.tsx similarity index 59% rename from src/dashboard/wallet/CheckBoltzTransactionStatus.tsx rename to src/dashboard/wallet/checkBoltzStatus/index.tsx index 8a80246..ad8dc04 100644 --- a/src/dashboard/wallet/CheckBoltzTransactionStatus.tsx +++ b/src/dashboard/wallet/checkBoltzStatus/index.tsx @@ -1,81 +1,63 @@ import { - createStyles, Divider, Grid, IconButton, - makeStyles, - Theme, Tooltip, - Typography, + Typography } from "@material-ui/core"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement } from "react"; -import { copyToClipboard } from "../../common/appUtil"; +import { copyToClipboard } from "../../../common/appUtil"; + +//styles +import { + Row, + Code, + IconContainer +} from './styles'; type CheckBoltzTransactionStatusProps = { currency: string; id: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - paddingTop: theme.spacing(1), - }, - code: { - backgroundColor: theme.palette.background.default, - padding: theme.spacing(1), - borderRadius: 5, - letterSpacing: 2, - fontFamily: "monospace", - }, - iconContainer: { - display: "flex", - alignItems: "center", - }, - }) -); - const CheckBoltzTransactionStatus = ( props: CheckBoltzTransactionStatusProps ): ReactElement => { const { currency, id } = props; - const classes = useStyles(); const command = `boltzcli ${currency} swapinfo ${id}`; return ( - + To check status, open the Console tab and run - - + - {command} - + - + copyToClipboard(command)}> - - + + ); }; diff --git a/src/dashboard/wallet/checkBoltzStatus/styles.ts b/src/dashboard/wallet/checkBoltzStatus/styles.ts new file mode 100644 index 0000000..ec55178 --- /dev/null +++ b/src/dashboard/wallet/checkBoltzStatus/styles.ts @@ -0,0 +1,39 @@ +import styled from 'styled-components'; +import { + Grid, + Typography +} from "@material-ui/core"; + +//types +type RowType = { + item: any; + container: any; + justify: string; +} + +type CodeType = { + component: string; + variant: string; +} + +type IconContainterType = { + item: any; +} + +//styled +export const Row = styled(Grid)` + padding-top: ${p => p.theme.spacing(1)}px; +`; + +export const Code = styled(Typography)` + background-color: ${p => p.theme.palette.background.default}; + padding: ${p => p.theme.spacing(1)}px; + border-radius: 5px; + letter-spacing: 2px; + font-family: monospace; +`; + +export const IconContainer = styled(Grid)` + display: flex; + align-items: center; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/Deposit.tsx b/src/dashboard/wallet/deposit/index.tsx similarity index 82% rename from src/dashboard/wallet/Deposit.tsx rename to src/dashboard/wallet/deposit/index.tsx index 02b19aa..edcfcac 100644 --- a/src/dashboard/wallet/Deposit.tsx +++ b/src/dashboard/wallet/deposit/index.tsx @@ -1,24 +1,24 @@ import { - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import React, { ReactElement, useEffect, useState } from "react"; import { Observable, Subject } from "rxjs"; -import api from "../../api"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import { getErrorMsg } from "../../common/errorUtil"; -import Loader from "../../common/Loader"; -import QrCode from "../../common/QrCode"; -import { DepositResponse } from "../../models/DepositResponse"; -import { Info } from "../../models/Info"; -import Address from "./Address"; -import BoltzFeeInfo from "./BoltzFeeInfo"; -import CheckBoltzTransactionStatus from "./CheckBoltzTransactionStatus"; -import ErrorMessage from "./ErrorMessage"; -import WarningMessage from "./WarningMessage"; +import api from "../../../api"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { getErrorMsg } from "../../../common/errorUtil"; +import Loader from "../../../common/loader"; +import QrCode from "../../../common/qrCode"; +import { DepositResponse } from "../../../models/DepositResponse"; +import { Info } from "../../../models/Info"; +import Address from "../address"; +import BoltzFeeInfo from "../boltzFeeInfo"; +import CheckBoltzTransactionStatus from "../checkBoltzStatus"; +import ErrorMessage from "../errorMessage"; +import WarningMessage from "../WarningMessage"; + +//styles +import { Row } from './styles'; type DepositProps = { currency: string; @@ -26,14 +26,6 @@ type DepositProps = { getInfo$: Observable; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - paddingTop: theme.spacing(2), - }, - }) -); - const getAvgMinutesBetweenBlocks = ( start: number, end: number, @@ -59,7 +51,6 @@ const getTimeString = (minutes: number): string => { const Deposit = (props: DepositProps): ReactElement => { const { currency, refreshSubject, getInfo$ } = props; - const classes = useStyles(); const [depositData, setDepositData] = useState( undefined @@ -137,12 +128,12 @@ const Deposit = (props: DepositProps): ReactElement => { readOnly={true} /> -
+ -
+ ) : ( diff --git a/src/dashboard/wallet/deposit/styles.ts b/src/dashboard/wallet/deposit/styles.ts new file mode 100644 index 0000000..5ea1c0a --- /dev/null +++ b/src/dashboard/wallet/deposit/styles.ts @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const Row = styled.div` + padding-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/ErrorMessage.tsx b/src/dashboard/wallet/errorMessage/index.tsx similarity index 100% rename from src/dashboard/wallet/ErrorMessage.tsx rename to src/dashboard/wallet/errorMessage/index.tsx diff --git a/src/dashboard/wallet/infoMessage/index.tsx b/src/dashboard/wallet/infoMessage/index.tsx new file mode 100644 index 0000000..35bf2b9 --- /dev/null +++ b/src/dashboard/wallet/infoMessage/index.tsx @@ -0,0 +1,23 @@ +import { Typography } from "@material-ui/core"; +import React, { ReactElement } from "react"; + +//styles +import { Card } from './styles'; + +type InfoMessageProps = { + message: string; +}; + +const InfoMessage = (props: InfoMessageProps): ReactElement => { + const { message } = props; + + return ( + + + {message} + + + ); +}; + +export default InfoMessage; diff --git a/src/dashboard/wallet/infoMessage/styles.ts b/src/dashboard/wallet/infoMessage/styles.ts new file mode 100644 index 0000000..f0eae56 --- /dev/null +++ b/src/dashboard/wallet/infoMessage/styles.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; +import { Card as $Card } from "@material-ui/core"; + +//types +type CardType = { + elevation: number; +} + +//styled +export const Card = styled($Card)` + background-color: ${p => p.theme.palette.info.main}; + color: ${p => p.theme.palette.info.contrastText}; + margin-top: ${p => p.theme.spacing(3)}px; + padding: ${p => p.theme.spacing(1)}px; + width: 100%; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/LimitsSummary.tsx b/src/dashboard/wallet/limitsSummary/index.tsx similarity index 88% rename from src/dashboard/wallet/LimitsSummary.tsx rename to src/dashboard/wallet/limitsSummary/index.tsx index 812b766..f590d6b 100644 --- a/src/dashboard/wallet/LimitsSummary.tsx +++ b/src/dashboard/wallet/limitsSummary/index.tsx @@ -1,9 +1,9 @@ import { Tooltip } from "@material-ui/core"; import InfoIcon from "@material-ui/icons/InfoOutlined"; import React, { ReactElement } from "react"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import { TradingLimits } from "../../models/TradingLimits"; -import WalletRow from "./WalletRow"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { TradingLimits } from "../../../models/TradingLimits"; +import WalletRow from "../walletRow"; type LimitsSummaryProps = { limits: TradingLimits; diff --git a/src/dashboard/wallet/WalletItem.tsx b/src/dashboard/wallet/walletItem/index.tsx similarity index 75% rename from src/dashboard/wallet/WalletItem.tsx rename to src/dashboard/wallet/walletItem/index.tsx index 4540ddd..c40dbd3 100644 --- a/src/dashboard/wallet/WalletItem.tsx +++ b/src/dashboard/wallet/walletItem/index.tsx @@ -1,22 +1,29 @@ -import { createStyles, makeStyles, Theme, Typography } from "@material-ui/core"; -import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; +import { Typography } from "@material-ui/core"; import Grid from "@material-ui/core/Grid"; import React, { ReactElement, useEffect, useState } from "react"; import { Observable, Subject } from "rxjs"; import { filter, mergeMap, pluck, take } from "rxjs/operators"; -import { getErrorMsg } from "../../common/errorUtil"; -import { isServiceReady } from "../../common/serviceUtil"; -import Balance from "../../models/Balance"; -import { Info } from "../../models/Info"; -import { Status } from "../../models/Status"; -import { TradingLimits } from "../../models/TradingLimits"; -import BalanceSummary from "./BalanceSummary"; -import Deposit from "./Deposit"; -import LimitsSummary from "./LimitsSummary"; -import WalletItemHeader from "./WalletItemHeader"; -import WalletTransactionButton from "./WalletTransactionButton"; -import Withdraw from "./Withdraw"; +import { getErrorMsg } from "../../../common/errorUtil"; +import { isServiceReady } from "../../../common/serviceUtil"; +import Balance from "../../../models/Balance"; +import { Info } from "../../../models/Info"; +import { Status } from "../../../models/Status"; +import { TradingLimits } from "../../../models/TradingLimits"; +import BalanceSummary from "../balanceSummary"; +import Deposit from "../deposit"; +import LimitsSummary from "../limitsSummary"; +import WalletItemHeader from "../walletItemHeader"; +import WalletTransactionButton from "../WalletTransactionButton"; +import Withdraw from "../Withdraw"; + +//styles +import { + Card, + CardContent, + CardBody, + ViewContent, + RowsGroup +} from './styles'; export type WalletItemProps = { currency: string; @@ -39,36 +46,10 @@ type WalletItemView = { title?: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - card: { - height: "100%", - minHeight: 446, - minWidth: 514, - }, - cardContent: { - padding: theme.spacing(3), - height: "100%", - display: "flex", - flexDirection: "column", - }, - cardBody: { - height: "100%", - }, - viewContent: { - paddingTop: theme.spacing(3), - }, - rowsGroup: { - paddingTop: theme.spacing(2), - }, - }) -); - const transactionButtonsVisible = (currency: string): boolean => ["BTC", "LTC"].includes(currency); const WalletItem = (props: WalletItemProps): ReactElement => { - const classes = useStyles(); const { balance, currency, limits, getInfo$, getBoltzStatus$ } = props; const [activeViewType, setActiveViewType] = useState( WalletItemViewType.BALANCE @@ -155,30 +136,28 @@ const WalletItem = (props: WalletItemProps): ReactElement => { return ( - - + + - {views.map( (view) => isActive(view.type) && ( - {!!view.title && ( @@ -191,25 +170,23 @@ const WalletItem = (props: WalletItemProps): ReactElement => { )} - {view.component} - - + + ) )} {isActive(WalletItemViewType.BALANCE, WalletItemViewType.LIMITS) && transactionButtonsVisible(currency) && ( - { setActiveViewType(WalletItemViewType.WITHDRAW) } /> - + )} - + diff --git a/src/dashboard/wallet/walletItem/styles.ts b/src/dashboard/wallet/walletItem/styles.ts new file mode 100644 index 0000000..d9f05b7 --- /dev/null +++ b/src/dashboard/wallet/walletItem/styles.ts @@ -0,0 +1,55 @@ +import styled from 'styled-components'; +import { + Card as $Card, + CardContent as $CardContent, + Grid +} from "@material-ui/core"; + +//types +type CardBodyType = { + item: any; + container: any; + direction: string; + justify: string; +} + +type ViewContentType = { + item: any; + container: any; + direction: string; +} + +type RowsGroupType = { + key?: any; + item: any; + container: any; + direction?: string; + justify?: string; + spacing?: number; +} + +//styled +export const Card = styled($Card)` + height: 100%; + min-height: 446px; + min-width: 514px; +`; + +export const CardContent = styled($CardContent)` + padding: ${p => p.theme.spacing(3)}px; + height: 100%; + display: flex; + flex-direction: column; +`; + +export const CardBody = styled(Grid)` + height: 100%; +`; + +export const ViewContent = styled(Grid)` + padding-top: ${p => p.theme.spacing(3)}px; +`; + +export const RowsGroup = styled(Grid)` + padding-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/WalletItemHeader.tsx b/src/dashboard/wallet/walletItemHeader/index.tsx similarity index 97% rename from src/dashboard/wallet/WalletItemHeader.tsx rename to src/dashboard/wallet/walletItemHeader/index.tsx index 5b3d335..c2ac86b 100644 --- a/src/dashboard/wallet/WalletItemHeader.tsx +++ b/src/dashboard/wallet/walletItemHeader/index.tsx @@ -12,7 +12,7 @@ import ArrowForwardIcon from "@material-ui/icons/ArrowForward"; import RefreshIcon from "@material-ui/icons/Refresh"; import React, { ReactElement } from "react"; import { Subject } from "rxjs"; -import { WalletItemViewType } from "./WalletItem"; +import { WalletItemViewType } from "../walletItem"; type WalletItemHeaderProps = { currency: string; diff --git a/src/dashboard/wallet/walletItemHeader/styles.ts b/src/dashboard/wallet/walletItemHeader/styles.ts new file mode 100644 index 0000000..611b636 --- /dev/null +++ b/src/dashboard/wallet/walletItemHeader/styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; +import { + Grid, + Button +} from "@material-ui/core"; + +export const Header = styled(Grid)` +`; + +export const HeaderButton = styled(Button)``; \ No newline at end of file diff --git a/src/dashboard/wallet/WalletRow.tsx b/src/dashboard/wallet/walletRow/index.tsx similarity index 85% rename from src/dashboard/wallet/WalletRow.tsx rename to src/dashboard/wallet/walletRow/index.tsx index d4166aa..2fb1887 100644 --- a/src/dashboard/wallet/WalletRow.tsx +++ b/src/dashboard/wallet/walletRow/index.tsx @@ -1,8 +1,10 @@ -import { createStyles, makeStyles, Theme } from "@material-ui/core"; import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import React, { ReactElement } from "react"; +//styled +import { Row } from './styles'; + export type WalletRowProps = { label: string; value?: string; @@ -13,19 +15,10 @@ export type WalletRowProps = { export type WalletSubrow = Omit; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - paddingTop: theme.spacing(1), - }, - }) -); - function WalletRow(props: WalletRowProps): ReactElement { - const classes = useStyles(); return ( - + ))} - + ); } diff --git a/src/dashboard/wallet/walletRow/styles.ts b/src/dashboard/wallet/walletRow/styles.ts new file mode 100644 index 0000000..d9120d1 --- /dev/null +++ b/src/dashboard/wallet/walletRow/styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; +import { Grid } from '@material-ui/core'; + +//types +type RowType = { + item: any; + container: any; +} + +//styled +export const Row = styled(Grid)` + padding-top: ${p => p.theme.spacing(1)}px; +`; \ No newline at end of file From d1d40c6c9c066d07ebb76c0cb8abd2a150f3b981 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 5 Jan 2021 14:00:23 +0100 Subject: [PATCH 09/17] updated references --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b3a686b..bf8ca41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,8 +9,8 @@ import { Route, Switch, } from "react-router-dom"; -import ConnectionFailed from "./common/ConnectionFailed"; -import NotFound from "./common/NotFound"; +import ConnectionFailed from "./common/connectionFailed"; +import NotFound from "./common/notFound"; import Dashboard from "./dashboard/Dashboard"; import { Path } from "./router/Path"; From c790a2957642e3c69b9cc9762371a80f396917a7 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 5 Jan 2021 14:03:58 +0100 Subject: [PATCH 10/17] fixed styles to margin-left on btn progress --- src/common/buttonWithLoading/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/buttonWithLoading/styles.ts b/src/common/buttonWithLoading/styles.ts index 554b9c3..6a5eed2 100644 --- a/src/common/buttonWithLoading/styles.ts +++ b/src/common/buttonWithLoading/styles.ts @@ -16,5 +16,5 @@ export const ButtonProgress = styled(CircularProgress)` top: 50%; left: 50%; margin-top: -12px; - margin-left: -12; + margin-left: -12px; `; \ No newline at end of file From 67de8f4941bbe2113a57f82490291d4a5ece6f8e Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 7 Jan 2021 08:37:26 +0100 Subject: [PATCH 11/17] replace single with double quotes --- src/App.tsx | 2 +- src/common/buttonWithLoading/index.tsx | 2 +- src/common/buttonWithLoading/styles.ts | 2 +- src/common/centerEllipsis/index.tsx | 2 +- src/common/centerEllipsis/styles.ts | 2 +- src/common/connectionFailed/index.tsx | 2 +- src/common/connectionFailed/styles.ts | 2 +- src/common/loader/index.tsx | 2 +- src/common/loader/styles.ts | 2 +- src/common/notFound/index.tsx | 2 +- src/common/notFound/styles.ts | 2 +- src/common/pageCircularProgress/index.tsx | 2 +- src/common/pageCircularProgress/styles.ts | 2 +- src/common/qrCode/index.tsx | 2 +- src/common/qrCode/styles.ts | 2 +- src/common/sorting/sortingOptions/index.tsx | 2 +- src/common/sorting/sortingOptions/styles.ts | 2 +- src/dashboard/console/index.tsx | 2 +- src/dashboard/console/styles.ts | 2 +- src/dashboard/menu/menuItem/index.tsx | 2 +- src/dashboard/menu/menuItem/styles.ts | 4 ++-- src/dashboard/overview/overviewItem/index.tsx | 2 +- src/dashboard/overview/overviewItem/styles.ts | 2 +- src/dashboard/overview/serviceDetails/index.tsx | 2 +- src/dashboard/overview/serviceDetails/styles.ts | 2 +- src/dashboard/overview/serviceDetailsContent/index.tsx | 2 +- src/dashboard/overview/serviceDetailsContent/styles.ts | 2 +- src/dashboard/tradehistory/index.tsx | 2 +- src/dashboard/tradehistory/styles.ts | 2 +- src/dashboard/tradehistory/tradehistoryDownload/index.tsx | 2 +- src/dashboard/tradehistory/tradehistoryDownload/styles.ts | 2 +- src/dashboard/wallet/address/index.tsx | 2 +- src/dashboard/wallet/address/styles.ts | 2 +- src/dashboard/wallet/boltzFeeInfo/index.tsx | 2 +- src/dashboard/wallet/boltzFeeInfo/styles.ts | 2 +- src/dashboard/wallet/checkBoltzStatus/index.tsx | 2 +- src/dashboard/wallet/checkBoltzStatus/styles.ts | 2 +- src/dashboard/wallet/deposit/index.tsx | 2 +- src/dashboard/wallet/deposit/styles.ts | 2 +- src/dashboard/wallet/infoMessage/index.tsx | 2 +- src/dashboard/wallet/infoMessage/styles.ts | 2 +- src/dashboard/wallet/walletItem/index.tsx | 2 +- src/dashboard/wallet/walletItem/styles.ts | 2 +- src/dashboard/wallet/walletItemHeader/styles.ts | 2 +- src/dashboard/wallet/walletRow/index.tsx | 2 +- src/dashboard/wallet/walletRow/styles.ts | 4 ++-- 46 files changed, 48 insertions(+), 48 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bf8ca41..3816c64 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import CssBaseline from "@material-ui/core/CssBaseline"; import { createMuiTheme, Theme, withStyles } from "@material-ui/core/styles"; import { ThemeProvider as ThemeProviderM } from "@material-ui/styles"; -import { ThemeProvider } from 'styled-components'; +import { ThemeProvider } from "styled-components"; import React, { ReactElement } from "react"; import { BrowserRouter as Router, diff --git a/src/common/buttonWithLoading/index.tsx b/src/common/buttonWithLoading/index.tsx index 4734782..5add655 100644 --- a/src/common/buttonWithLoading/index.tsx +++ b/src/common/buttonWithLoading/index.tsx @@ -5,7 +5,7 @@ import React, { ReactElement } from "react"; import { ButtonWrapper, ButtonProgress -} from './styles'; +} from "./styles"; type ButtonWithLoadingProps = { onClick: () => void; diff --git a/src/common/buttonWithLoading/styles.ts b/src/common/buttonWithLoading/styles.ts index 6a5eed2..3b0438c 100644 --- a/src/common/buttonWithLoading/styles.ts +++ b/src/common/buttonWithLoading/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { CircularProgress } from "@material-ui/core"; //types diff --git a/src/common/centerEllipsis/index.tsx b/src/common/centerEllipsis/index.tsx index ab823da..3d9ae09 100644 --- a/src/common/centerEllipsis/index.tsx +++ b/src/common/centerEllipsis/index.tsx @@ -4,7 +4,7 @@ import React, { ReactElement } from "react"; import { Left, Right -} from './styles'; +} from "./styles"; type PropsType = { text: string; diff --git a/src/common/centerEllipsis/styles.ts b/src/common/centerEllipsis/styles.ts index df36c4e..a0bcce9 100644 --- a/src/common/centerEllipsis/styles.ts +++ b/src/common/centerEllipsis/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; export const Left = styled.span` flex: 0 1 auto; diff --git a/src/common/connectionFailed/index.tsx b/src/common/connectionFailed/index.tsx index 289e67c..ab343e1 100644 --- a/src/common/connectionFailed/index.tsx +++ b/src/common/connectionFailed/index.tsx @@ -11,7 +11,7 @@ import { isElectron, sendMessageToParent } from "../appUtil"; import { Container, Row -} from './styles'; +} from "./styles"; const ConnectionFailed = (): ReactElement => { const history = useHistory(); diff --git a/src/common/connectionFailed/styles.ts b/src/common/connectionFailed/styles.ts index 1dc995c..1273d62 100644 --- a/src/common/connectionFailed/styles.ts +++ b/src/common/connectionFailed/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid } from "@material-ui/core"; //types diff --git a/src/common/loader/index.tsx b/src/common/loader/index.tsx index 8cc551e..cb1978a 100644 --- a/src/common/loader/index.tsx +++ b/src/common/loader/index.tsx @@ -2,7 +2,7 @@ import { CircularProgress } from "@material-ui/core"; import React, { ReactElement } from "react"; //styles -import { LoaderContainer } from './styles'; +import { LoaderContainer } from "./styles"; const Loader = (): ReactElement => { diff --git a/src/common/loader/styles.ts b/src/common/loader/styles.ts index f4bca7d..158d0da 100644 --- a/src/common/loader/styles.ts +++ b/src/common/loader/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid } from "@material-ui/core"; //types diff --git a/src/common/notFound/index.tsx b/src/common/notFound/index.tsx index 460e2ce..64ab825 100644 --- a/src/common/notFound/index.tsx +++ b/src/common/notFound/index.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from "react"; import notFoundImg from "../../assets/404.png"; //styles -import { Container } from './styles'; +import { Container } from "./styles"; const NotFound = (): ReactElement => { return ( diff --git a/src/common/notFound/styles.ts b/src/common/notFound/styles.ts index b153b81..784fc04 100644 --- a/src/common/notFound/styles.ts +++ b/src/common/notFound/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid } from "@material-ui/core"; //types diff --git a/src/common/pageCircularProgress/index.tsx b/src/common/pageCircularProgress/index.tsx index 1bfeb78..9394e1d 100644 --- a/src/common/pageCircularProgress/index.tsx +++ b/src/common/pageCircularProgress/index.tsx @@ -2,7 +2,7 @@ import { CircularProgress } from "@material-ui/core"; import React, { ReactElement } from "react"; //styles -import { Container } from './styles'; +import { Container } from "./styles"; const PageCircularProgress = (): ReactElement => { return ( diff --git a/src/common/pageCircularProgress/styles.ts b/src/common/pageCircularProgress/styles.ts index a2cb0ce..128619b 100644 --- a/src/common/pageCircularProgress/styles.ts +++ b/src/common/pageCircularProgress/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Box } from "@material-ui/core"; export const Container = styled(Box)` diff --git a/src/common/qrCode/index.tsx b/src/common/qrCode/index.tsx index f4ef71e..2388a6c 100644 --- a/src/common/qrCode/index.tsx +++ b/src/common/qrCode/index.tsx @@ -8,7 +8,7 @@ import QRCode from "qrcode.react"; import React, { ReactElement } from "react"; //styles -import { Container } from './styles'; +import { Container } from "./styles"; type QrCodeProps = { value: string; diff --git a/src/common/qrCode/styles.ts b/src/common/qrCode/styles.ts index d493870..5266ca9 100644 --- a/src/common/qrCode/styles.ts +++ b/src/common/qrCode/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Paper } from "@material-ui/core"; export const Container = styled(Paper)` diff --git a/src/common/sorting/sortingOptions/index.tsx b/src/common/sorting/sortingOptions/index.tsx index db2fa00..8a0b95c 100644 --- a/src/common/sorting/sortingOptions/index.tsx +++ b/src/common/sorting/sortingOptions/index.tsx @@ -21,7 +21,7 @@ import { SortDirIconContainer, StyledArrowDownwardIcon, StyledArrowUpwardIcon -} from './styles'; +} from "./styles"; export type SortingOptionsProps = { sortOpts: SortOption[]; diff --git a/src/common/sorting/sortingOptions/styles.ts b/src/common/sorting/sortingOptions/styles.ts index cb01e4f..e9867c6 100644 --- a/src/common/sorting/sortingOptions/styles.ts +++ b/src/common/sorting/sortingOptions/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Button, Grid, diff --git a/src/dashboard/console/index.tsx b/src/dashboard/console/index.tsx index 3dde336..6d6004d 100644 --- a/src/dashboard/console/index.tsx +++ b/src/dashboard/console/index.tsx @@ -13,7 +13,7 @@ import { Title, Code, TerminalContainer -} from './styles'; +} from "./styles"; type PropsType = RouteComponentProps<{ param1: string }> diff --git a/src/dashboard/console/styles.ts b/src/dashboard/console/styles.ts index 6e9c791..1c4abfc 100644 --- a/src/dashboard/console/styles.ts +++ b/src/dashboard/console/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Typography } from "@material-ui/core"; // types diff --git a/src/dashboard/menu/menuItem/index.tsx b/src/dashboard/menu/menuItem/index.tsx index 2a4ee41..1f010cb 100644 --- a/src/dashboard/menu/menuItem/index.tsx +++ b/src/dashboard/menu/menuItem/index.tsx @@ -8,7 +8,7 @@ import { NavLink, useLocation, useRouteMatch } from "react-router-dom"; import { Path } from "../../../router/Path"; //styles -import { ListItem } from './styles'; +import { ListItem } from "./styles"; export type MenuItemProps = { path: Path; diff --git a/src/dashboard/menu/menuItem/styles.ts b/src/dashboard/menu/menuItem/styles.ts index 26db714..70f88be 100644 --- a/src/dashboard/menu/menuItem/styles.ts +++ b/src/dashboard/menu/menuItem/styles.ts @@ -1,6 +1,6 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import $ListItem from "@material-ui/core/ListItem"; -import { ElementType } from 'react'; +import { ElementType } from "react"; type ListItemType = { isDisabled?: boolean; diff --git a/src/dashboard/overview/overviewItem/index.tsx b/src/dashboard/overview/overviewItem/index.tsx index 380ad0e..b36add9 100644 --- a/src/dashboard/overview/overviewItem/index.tsx +++ b/src/dashboard/overview/overviewItem/index.tsx @@ -26,7 +26,7 @@ import { StatusDot, Snackbar, SnackbarContent -} from './styles'; +} from "./styles"; export type OverviewItemProps = { status: Status; diff --git a/src/dashboard/overview/overviewItem/styles.ts b/src/dashboard/overview/overviewItem/styles.ts index e2607e8..546e5e4 100644 --- a/src/dashboard/overview/overviewItem/styles.ts +++ b/src/dashboard/overview/overviewItem/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid, CardContent as $CardContent, diff --git a/src/dashboard/overview/serviceDetails/index.tsx b/src/dashboard/overview/serviceDetails/index.tsx index f5de979..3f5db4f 100644 --- a/src/dashboard/overview/serviceDetails/index.tsx +++ b/src/dashboard/overview/serviceDetails/index.tsx @@ -13,7 +13,7 @@ import ServiceDetailsContent from "../serviceDetailsContent"; //styles import { Dialog -} from './styles'; +} from "./styles"; export type ServiceDetailsProps = { status: Status; diff --git a/src/dashboard/overview/serviceDetails/styles.ts b/src/dashboard/overview/serviceDetails/styles.ts index 596c50d..67ad232 100644 --- a/src/dashboard/overview/serviceDetails/styles.ts +++ b/src/dashboard/overview/serviceDetails/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Dialog as $Dialog} from "@material-ui/core"; const drawerWidth = 200; diff --git a/src/dashboard/overview/serviceDetailsContent/index.tsx b/src/dashboard/overview/serviceDetailsContent/index.tsx index 1aa8792..6c5f176 100644 --- a/src/dashboard/overview/serviceDetailsContent/index.tsx +++ b/src/dashboard/overview/serviceDetailsContent/index.tsx @@ -20,7 +20,7 @@ import { GridCell, TextRow, LoadedContainer -} from './styles'; +} from "./styles"; export type ServiceDetailsContentProps = { status: Status; diff --git a/src/dashboard/overview/serviceDetailsContent/styles.ts b/src/dashboard/overview/serviceDetailsContent/styles.ts index 8cf21d6..a508b24 100644 --- a/src/dashboard/overview/serviceDetailsContent/styles.ts +++ b/src/dashboard/overview/serviceDetailsContent/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { DialogContent as $DialogContent, Grid, diff --git a/src/dashboard/tradehistory/index.tsx b/src/dashboard/tradehistory/index.tsx index 35099a5..6d5c944 100644 --- a/src/dashboard/tradehistory/index.tsx +++ b/src/dashboard/tradehistory/index.tsx @@ -28,7 +28,7 @@ import ViewDisabled from "../ViewDisabled"; import TradehistoryDownload from "./tradehistoryDownload"; //styles -import { TableCell, TableCellIcon} from './styles'; +import { TableCell, TableCellIcon} from "./styles"; export type TradeRow = { swapHash: string; diff --git a/src/dashboard/tradehistory/styles.ts b/src/dashboard/tradehistory/styles.ts index e062c8a..67ddeae 100644 --- a/src/dashboard/tradehistory/styles.ts +++ b/src/dashboard/tradehistory/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid, IconButton } from "@material-ui/core"; //types diff --git a/src/dashboard/tradehistory/tradehistoryDownload/index.tsx b/src/dashboard/tradehistory/tradehistoryDownload/index.tsx index 9d597ae..ea0839a 100644 --- a/src/dashboard/tradehistory/tradehistoryDownload/index.tsx +++ b/src/dashboard/tradehistory/tradehistoryDownload/index.tsx @@ -8,7 +8,7 @@ import { TradeHeader, TradeRow } from ".."; import { DownloadButtonContainer, DownloadLink -} from './styles'; +} from "./styles"; export type TradehistoryDownloadProps = { rows: TradeRow[]; diff --git a/src/dashboard/tradehistory/tradehistoryDownload/styles.ts b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts index 59aae24..1395432 100644 --- a/src/dashboard/tradehistory/tradehistoryDownload/styles.ts +++ b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid } from "@material-ui/core"; import CSVLink from "../../../common/csv/CsvLink"; diff --git a/src/dashboard/wallet/address/index.tsx b/src/dashboard/wallet/address/index.tsx index 0ac234f..7775d80 100644 --- a/src/dashboard/wallet/address/index.tsx +++ b/src/dashboard/wallet/address/index.tsx @@ -12,7 +12,7 @@ import { copyToClipboard } from "../../../common/appUtil"; import { AddressContainer, AddressField -} from './styles'; +} from "./styles"; type AddressProps = { address: string; diff --git a/src/dashboard/wallet/address/styles.ts b/src/dashboard/wallet/address/styles.ts index d7e4f02..7476718 100644 --- a/src/dashboard/wallet/address/styles.ts +++ b/src/dashboard/wallet/address/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid, OutlinedInput diff --git a/src/dashboard/wallet/boltzFeeInfo/index.tsx b/src/dashboard/wallet/boltzFeeInfo/index.tsx index a5f6f11..ff8e654 100644 --- a/src/dashboard/wallet/boltzFeeInfo/index.tsx +++ b/src/dashboard/wallet/boltzFeeInfo/index.tsx @@ -11,7 +11,7 @@ import { satsToCoinsStr } from "../../../common/currencyUtil"; import { Fees } from "../../../models/BoltzFees"; //styles -import { IconContainer } from './styles'; +import { IconContainer } from "./styles"; type BoltzFeeInfoProps = { fees: Fees; diff --git a/src/dashboard/wallet/boltzFeeInfo/styles.ts b/src/dashboard/wallet/boltzFeeInfo/styles.ts index a2c253c..6bec236 100644 --- a/src/dashboard/wallet/boltzFeeInfo/styles.ts +++ b/src/dashboard/wallet/boltzFeeInfo/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid } from "@material-ui/core"; //types diff --git a/src/dashboard/wallet/checkBoltzStatus/index.tsx b/src/dashboard/wallet/checkBoltzStatus/index.tsx index ad8dc04..8d8de85 100644 --- a/src/dashboard/wallet/checkBoltzStatus/index.tsx +++ b/src/dashboard/wallet/checkBoltzStatus/index.tsx @@ -14,7 +14,7 @@ import { Row, Code, IconContainer -} from './styles'; +} from "./styles"; type CheckBoltzTransactionStatusProps = { currency: string; diff --git a/src/dashboard/wallet/checkBoltzStatus/styles.ts b/src/dashboard/wallet/checkBoltzStatus/styles.ts index ec55178..5a08bc0 100644 --- a/src/dashboard/wallet/checkBoltzStatus/styles.ts +++ b/src/dashboard/wallet/checkBoltzStatus/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid, Typography diff --git a/src/dashboard/wallet/deposit/index.tsx b/src/dashboard/wallet/deposit/index.tsx index edcfcac..e59d131 100644 --- a/src/dashboard/wallet/deposit/index.tsx +++ b/src/dashboard/wallet/deposit/index.tsx @@ -18,7 +18,7 @@ import ErrorMessage from "../errorMessage"; import WarningMessage from "../WarningMessage"; //styles -import { Row } from './styles'; +import { Row } from "./styles"; type DepositProps = { currency: string; diff --git a/src/dashboard/wallet/deposit/styles.ts b/src/dashboard/wallet/deposit/styles.ts index 5ea1c0a..0501ca5 100644 --- a/src/dashboard/wallet/deposit/styles.ts +++ b/src/dashboard/wallet/deposit/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; export const Row = styled.div` padding-top: ${p => p.theme.spacing(2)}px; diff --git a/src/dashboard/wallet/infoMessage/index.tsx b/src/dashboard/wallet/infoMessage/index.tsx index 35bf2b9..9170668 100644 --- a/src/dashboard/wallet/infoMessage/index.tsx +++ b/src/dashboard/wallet/infoMessage/index.tsx @@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core"; import React, { ReactElement } from "react"; //styles -import { Card } from './styles'; +import { Card } from "./styles"; type InfoMessageProps = { message: string; diff --git a/src/dashboard/wallet/infoMessage/styles.ts b/src/dashboard/wallet/infoMessage/styles.ts index f0eae56..a2665b0 100644 --- a/src/dashboard/wallet/infoMessage/styles.ts +++ b/src/dashboard/wallet/infoMessage/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Card as $Card } from "@material-ui/core"; //types diff --git a/src/dashboard/wallet/walletItem/index.tsx b/src/dashboard/wallet/walletItem/index.tsx index c40dbd3..ceb4e84 100644 --- a/src/dashboard/wallet/walletItem/index.tsx +++ b/src/dashboard/wallet/walletItem/index.tsx @@ -23,7 +23,7 @@ import { CardBody, ViewContent, RowsGroup -} from './styles'; +} from "./styles"; export type WalletItemProps = { currency: string; diff --git a/src/dashboard/wallet/walletItem/styles.ts b/src/dashboard/wallet/walletItem/styles.ts index d9f05b7..036b8c8 100644 --- a/src/dashboard/wallet/walletItem/styles.ts +++ b/src/dashboard/wallet/walletItem/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Card as $Card, CardContent as $CardContent, diff --git a/src/dashboard/wallet/walletItemHeader/styles.ts b/src/dashboard/wallet/walletItemHeader/styles.ts index 611b636..c2a8458 100644 --- a/src/dashboard/wallet/walletItemHeader/styles.ts +++ b/src/dashboard/wallet/walletItemHeader/styles.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; import { Grid, Button diff --git a/src/dashboard/wallet/walletRow/index.tsx b/src/dashboard/wallet/walletRow/index.tsx index 2fb1887..96d8012 100644 --- a/src/dashboard/wallet/walletRow/index.tsx +++ b/src/dashboard/wallet/walletRow/index.tsx @@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography"; import React, { ReactElement } from "react"; //styled -import { Row } from './styles'; +import { Row } from "./styles"; export type WalletRowProps = { label: string; diff --git a/src/dashboard/wallet/walletRow/styles.ts b/src/dashboard/wallet/walletRow/styles.ts index d9120d1..8253296 100644 --- a/src/dashboard/wallet/walletRow/styles.ts +++ b/src/dashboard/wallet/walletRow/styles.ts @@ -1,5 +1,5 @@ -import styled from 'styled-components'; -import { Grid } from '@material-ui/core'; +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; //types type RowType = { From 8ce6e3a5fbbb5ee6b9a55cd865ed5cfc1733f37c Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Thu, 7 Jan 2021 08:42:09 +0100 Subject: [PATCH 12/17] change item and container type --- src/common/connectionFailed/styles.ts | 4 ++-- src/common/loader/styles.ts | 2 +- src/common/notFound/styles.ts | 4 ++-- src/common/sorting/sortingOptions/styles.ts | 6 +++--- src/dashboard/overview/overviewItem/styles.ts | 2 +- src/dashboard/tradehistory/styles.ts | 4 ++-- .../tradehistory/tradehistoryDownload/styles.ts | 4 ++-- src/dashboard/wallet/address/styles.ts | 4 ++-- src/dashboard/wallet/boltzFeeInfo/styles.ts | 2 +- src/dashboard/wallet/checkBoltzStatus/styles.ts | 6 +++--- src/dashboard/wallet/walletItem/styles.ts | 12 ++++++------ src/dashboard/wallet/walletRow/styles.ts | 4 ++-- 12 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/common/connectionFailed/styles.ts b/src/common/connectionFailed/styles.ts index 1273d62..48beb5b 100644 --- a/src/common/connectionFailed/styles.ts +++ b/src/common/connectionFailed/styles.ts @@ -3,8 +3,8 @@ import { Grid } from "@material-ui/core"; //types type ContainerType = { - item: any; - container: any; + item: boolean; + container: boolean; direction: string; alignItems: string; justify: string; diff --git a/src/common/loader/styles.ts b/src/common/loader/styles.ts index 158d0da..5b9a9b1 100644 --- a/src/common/loader/styles.ts +++ b/src/common/loader/styles.ts @@ -3,7 +3,7 @@ import { Grid } from "@material-ui/core"; //types type LoaderContainerType = { - container: any; + container: boolean; } //styled diff --git a/src/common/notFound/styles.ts b/src/common/notFound/styles.ts index 784fc04..b80f421 100644 --- a/src/common/notFound/styles.ts +++ b/src/common/notFound/styles.ts @@ -3,8 +3,8 @@ import { Grid } from "@material-ui/core"; //types type ContainerType = { - item: any; - container: any; + item: boolean; + container: boolean; direction: string; alignItems: string; justify: string; diff --git a/src/common/sorting/sortingOptions/styles.ts b/src/common/sorting/sortingOptions/styles.ts index e9867c6..c262bbc 100644 --- a/src/common/sorting/sortingOptions/styles.ts +++ b/src/common/sorting/sortingOptions/styles.ts @@ -10,7 +10,7 @@ import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; //types type SortIconContainerType = { - item: any; + item: boolean; container: boolean; justify: string; } @@ -24,7 +24,7 @@ type SortOptionButtonType = { } type SortOptionActiveGridType = { - item: any; + item: boolean; container: boolean; alignItems: string; spacing: number; @@ -74,6 +74,6 @@ export const StyledArrowUpwardIcon = styled(ArrowUpwardIcon)` const getArrowIconStyles = (p: any) => { return ` - font-size: ${p.theme.typography.body2.fontSize}px; + font-size: ${p.theme.typography.body2.fontSize}; `; } \ No newline at end of file diff --git a/src/dashboard/overview/overviewItem/styles.ts b/src/dashboard/overview/overviewItem/styles.ts index 546e5e4..ddcabef 100644 --- a/src/dashboard/overview/overviewItem/styles.ts +++ b/src/dashboard/overview/overviewItem/styles.ts @@ -8,7 +8,7 @@ import { //type type StyledGridType = { - container: any; + container: boolean; justify: string; alignItems: string; wrap: string; diff --git a/src/dashboard/tradehistory/styles.ts b/src/dashboard/tradehistory/styles.ts index 67ddeae..69b2558 100644 --- a/src/dashboard/tradehistory/styles.ts +++ b/src/dashboard/tradehistory/styles.ts @@ -4,8 +4,8 @@ import { Grid, IconButton } from "@material-ui/core"; //types type TableCellType = { key: any; - item: any; - container: any; + item: boolean; + container: boolean; xs: number; xl: number; } diff --git a/src/dashboard/tradehistory/tradehistoryDownload/styles.ts b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts index 1395432..6348c7c 100644 --- a/src/dashboard/tradehistory/tradehistoryDownload/styles.ts +++ b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts @@ -4,8 +4,8 @@ import CSVLink from "../../../common/csv/CsvLink"; //types type DownloadButtonContainerType = { - item: any; - container: any; + item: boolean; + container: boolean; justify: string; } diff --git a/src/dashboard/wallet/address/styles.ts b/src/dashboard/wallet/address/styles.ts index 7476718..1b08b95 100644 --- a/src/dashboard/wallet/address/styles.ts +++ b/src/dashboard/wallet/address/styles.ts @@ -6,8 +6,8 @@ import { //types type AddressContainerType = { - item: any; - container: any; + item: boolean; + container: boolean; direction: string; } diff --git a/src/dashboard/wallet/boltzFeeInfo/styles.ts b/src/dashboard/wallet/boltzFeeInfo/styles.ts index 6bec236..2a679d3 100644 --- a/src/dashboard/wallet/boltzFeeInfo/styles.ts +++ b/src/dashboard/wallet/boltzFeeInfo/styles.ts @@ -3,7 +3,7 @@ import { Grid } from "@material-ui/core"; //types type IconContainerType = { - item: any; + item: boolean; } //styled diff --git a/src/dashboard/wallet/checkBoltzStatus/styles.ts b/src/dashboard/wallet/checkBoltzStatus/styles.ts index 5a08bc0..14ecea9 100644 --- a/src/dashboard/wallet/checkBoltzStatus/styles.ts +++ b/src/dashboard/wallet/checkBoltzStatus/styles.ts @@ -6,8 +6,8 @@ import { //types type RowType = { - item: any; - container: any; + item: boolean; + container: boolean; justify: string; } @@ -17,7 +17,7 @@ type CodeType = { } type IconContainterType = { - item: any; + item: boolean; } //styled diff --git a/src/dashboard/wallet/walletItem/styles.ts b/src/dashboard/wallet/walletItem/styles.ts index 036b8c8..f3d30dc 100644 --- a/src/dashboard/wallet/walletItem/styles.ts +++ b/src/dashboard/wallet/walletItem/styles.ts @@ -7,22 +7,22 @@ import { //types type CardBodyType = { - item: any; - container: any; + item: boolean; + container: boolean; direction: string; justify: string; } type ViewContentType = { - item: any; - container: any; + item: boolean; + container: boolean; direction: string; } type RowsGroupType = { key?: any; - item: any; - container: any; + item: boolean; + container: boolean; direction?: string; justify?: string; spacing?: number; diff --git a/src/dashboard/wallet/walletRow/styles.ts b/src/dashboard/wallet/walletRow/styles.ts index 8253296..8c852c0 100644 --- a/src/dashboard/wallet/walletRow/styles.ts +++ b/src/dashboard/wallet/walletRow/styles.ts @@ -3,8 +3,8 @@ import { Grid } from "@material-ui/core"; //types type RowType = { - item: any; - container: any; + item: boolean; + container: boolean; } //styled From 14d39eb2a9597a5ab2b4864318a4508977d2e145 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Fri, 8 Jan 2021 15:42:38 +0100 Subject: [PATCH 13/17] transferred wallet components to styled components --- src/dashboard/Dashboard.tsx | 2 +- src/dashboard/wallet/deposit/index.tsx | 2 +- src/dashboard/wallet/walletItem/index.tsx | 4 +- .../index.tsx} | 0 .../wallet/{Wallets.tsx => wallets/index.tsx} | 37 ++++++-------- src/dashboard/wallet/wallets/styles.ts | 13 +++++ .../index.tsx} | 35 +++++-------- src/dashboard/wallet/warningMessage/styles.ts | 25 ++++++++++ .../{Withdraw.tsx => withdraw/index.tsx} | 18 +++---- .../index.tsx} | 49 +++++++------------ .../wallet/withdrawAddress/styles.ts | 15 ++++++ .../index.tsx} | 35 +++++-------- src/dashboard/wallet/withdrawAmount/styles.ts | 14 ++++++ .../index.tsx} | 28 ++++------- .../wallet/withdrawalComplete/styles.ts | 15 ++++++ 15 files changed, 159 insertions(+), 133 deletions(-) rename src/dashboard/wallet/{WalletTransactionButton.tsx => walletTransactionButton/index.tsx} (100%) rename src/dashboard/wallet/{Wallets.tsx => wallets/index.tsx} (69%) create mode 100644 src/dashboard/wallet/wallets/styles.ts rename src/dashboard/wallet/{WarningMessage.tsx => warningMessage/index.tsx} (56%) create mode 100644 src/dashboard/wallet/warningMessage/styles.ts rename src/dashboard/wallet/{Withdraw.tsx => withdraw/index.tsx} (86%) rename src/dashboard/wallet/{WithdrawAddress.tsx => withdrawAddress/index.tsx} (78%) create mode 100644 src/dashboard/wallet/withdrawAddress/styles.ts rename src/dashboard/wallet/{WithdrawAmount.tsx => withdrawAmount/index.tsx} (80%) create mode 100644 src/dashboard/wallet/withdrawAmount/styles.ts rename src/dashboard/wallet/{WithdrawalComplete.tsx => withdrawalComplete/index.tsx} (70%) create mode 100644 src/dashboard/wallet/withdrawalComplete/styles.ts diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx index 83019d4..c07adc9 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/Dashboard.tsx @@ -28,7 +28,7 @@ import Console from "./console"; import MenuItem, { MenuItemProps } from "./menu/menuItem"; import Overview from "./overview"; import Tradehistory from "./tradehistory"; -import Wallets from "./wallet/Wallets"; +import Wallets from "./wallet/wallets"; export const drawerWidth = 200; diff --git a/src/dashboard/wallet/deposit/index.tsx b/src/dashboard/wallet/deposit/index.tsx index e59d131..f0c27c0 100644 --- a/src/dashboard/wallet/deposit/index.tsx +++ b/src/dashboard/wallet/deposit/index.tsx @@ -15,7 +15,7 @@ import Address from "../address"; import BoltzFeeInfo from "../boltzFeeInfo"; import CheckBoltzTransactionStatus from "../checkBoltzStatus"; import ErrorMessage from "../errorMessage"; -import WarningMessage from "../WarningMessage"; +import WarningMessage from "../warningMessage"; //styles import { Row } from "./styles"; diff --git a/src/dashboard/wallet/walletItem/index.tsx b/src/dashboard/wallet/walletItem/index.tsx index ceb4e84..ac9961a 100644 --- a/src/dashboard/wallet/walletItem/index.tsx +++ b/src/dashboard/wallet/walletItem/index.tsx @@ -13,8 +13,8 @@ import BalanceSummary from "../balanceSummary"; import Deposit from "../deposit"; import LimitsSummary from "../limitsSummary"; import WalletItemHeader from "../walletItemHeader"; -import WalletTransactionButton from "../WalletTransactionButton"; -import Withdraw from "../Withdraw"; +import WalletTransactionButton from "../walletTransactionButton"; +import Withdraw from "../withdraw"; //styles import { diff --git a/src/dashboard/wallet/WalletTransactionButton.tsx b/src/dashboard/wallet/walletTransactionButton/index.tsx similarity index 100% rename from src/dashboard/wallet/WalletTransactionButton.tsx rename to src/dashboard/wallet/walletTransactionButton/index.tsx diff --git a/src/dashboard/wallet/Wallets.tsx b/src/dashboard/wallet/wallets/index.tsx similarity index 69% rename from src/dashboard/wallet/Wallets.tsx rename to src/dashboard/wallet/wallets/index.tsx index 58cf144..83b85ce 100644 --- a/src/dashboard/wallet/Wallets.tsx +++ b/src/dashboard/wallet/wallets/index.tsx @@ -1,34 +1,26 @@ -import { createStyles, WithStyles } from "@material-ui/core"; import Grid from "@material-ui/core/Grid"; -import { withStyles } from "@material-ui/core/styles"; import React, { ReactElement } from "react"; import { RouteComponentProps, withRouter } from "react-router-dom"; import { timer } from "rxjs"; import { exhaustMap, shareReplay } from "rxjs/operators"; -import api from "../../api"; -import PageCircularProgress from "../../common/pageCircularProgress"; -import { GetbalanceResponse } from "../../models/GetbalanceResponse"; -import { TradinglimitsResponse } from "../../models/TradinglimitsResponse"; -import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import ViewDisabled from "../ViewDisabled"; -import WalletItem from "./walletItem"; +import api from "../../../api"; +import PageCircularProgress from "../../../common/pageCircularProgress"; +import { GetbalanceResponse } from "../../../models/GetbalanceResponse"; +import { TradinglimitsResponse } from "../../../models/TradinglimitsResponse"; +import DashboardContent, { DashboardContentState } from "../../DashboardContent"; +import ViewDisabled from "../../ViewDisabled"; +import WalletItem from "../walletItem"; -type PropsType = RouteComponentProps<{ param1: string }> & - WithStyles; +//styles +import { ItemsContainer } from "./styles"; + +type PropsType = RouteComponentProps<{ param1: string }> type StateType = DashboardContentState & { balances: GetbalanceResponse | undefined; limits: TradinglimitsResponse | undefined; }; -const styles = () => { - return createStyles({ - itemsContainer: { - paddingBottom: "45px", - }, - }); -}; - class Wallets extends DashboardContent { getInfo$ = timer(0, 60000).pipe( exhaustMap(() => api.getinfo$()), @@ -58,7 +50,6 @@ class Wallets extends DashboardContent { render(): ReactElement { const balances = this.state.balances?.balances; - const { classes } = this.props; return ( <> @@ -68,7 +59,7 @@ class Wallets extends DashboardContent { xudStatus={this.state.xudStatus} /> ) : ( - + {balances && Object.keys(balances).length ? ( Object.keys(balances).map((currency) => ( { ) : ( )} - + )} ); } } -export default withRouter(withStyles(styles, { withTheme: true })(Wallets)); +export default withRouter(Wallets); diff --git a/src/dashboard/wallet/wallets/styles.ts b/src/dashboard/wallet/wallets/styles.ts new file mode 100644 index 0000000..dd3d417 --- /dev/null +++ b/src/dashboard/wallet/wallets/styles.ts @@ -0,0 +1,13 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ItemsContainerType = { + container: boolean; + spacing: number; +} + +//styled +export const ItemsContainer = styled(Grid)` + padding-bottom: 45px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/WarningMessage.tsx b/src/dashboard/wallet/warningMessage/index.tsx similarity index 56% rename from src/dashboard/wallet/WarningMessage.tsx rename to src/dashboard/wallet/warningMessage/index.tsx index ffc2dd9..6a287a1 100644 --- a/src/dashboard/wallet/WarningMessage.tsx +++ b/src/dashboard/wallet/warningMessage/index.tsx @@ -1,39 +1,26 @@ import { - Card, - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import WarningIcon from "@material-ui/icons/Warning"; import React, { ReactElement } from "react"; +//styles +import { + StyledWarningMessage, + IconContainer +} from "./styles"; + type WarningMessageProps = { message: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - warningMessage: { - backgroundColor: theme.palette.warning.dark, - color: theme.palette.warning.contrastText, - marginBottom: theme.spacing(2), - padding: theme.spacing(1), - }, - iconContainer: { - display: "flex", - }, - }) -); - const WarningMessage = (props: WarningMessageProps): ReactElement => { const { message } = props; - const classes = useStyles(); return ( - + { alignItems="center" wrap="nowrap" > - + - + {message} - + ); }; diff --git a/src/dashboard/wallet/warningMessage/styles.ts b/src/dashboard/wallet/warningMessage/styles.ts new file mode 100644 index 0000000..8c40344 --- /dev/null +++ b/src/dashboard/wallet/warningMessage/styles.ts @@ -0,0 +1,25 @@ +import styled from "styled-components"; +import { + Card, + Grid +} from "@material-ui/core"; + +//types +type StyledWarningMessageType = { + elevation: number; +} + +type IconContainerType = { + item: boolean; +} + +export const StyledWarningMessage = styled(Card)` + background-color: ${p => p.theme.palette.warning.dark} + color: ${p => p.theme.palette.warning.contrastText} + margin-bottom: ${p => p.theme.spacing(2)}px; + padding: ${p => p.theme.spacing(1)}px; +`; + +export const IconContainer = styled(Grid)` + display: flex; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/Withdraw.tsx b/src/dashboard/wallet/withdraw/index.tsx similarity index 86% rename from src/dashboard/wallet/Withdraw.tsx rename to src/dashboard/wallet/withdraw/index.tsx index c0b7082..160ebea 100644 --- a/src/dashboard/wallet/Withdraw.tsx +++ b/src/dashboard/wallet/withdraw/index.tsx @@ -1,14 +1,14 @@ import { Grid } from "@material-ui/core"; import React, { ReactElement, useEffect, useState } from "react"; -import api from "../../api"; -import { getCurrencyFullName } from "../../common/currencyUtil"; -import { getErrorMsg } from "../../common/errorUtil"; -import Loader from "../../common/loader"; -import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import ErrorMessage from "./errorMessage"; -import WithdrawAddress from "./WithdrawAddress"; -import WithdrawalComplete from "./WithdrawalComplete"; -import WithdrawAmount from "./WithdrawAmount"; +import api from "../../../api"; +import { getCurrencyFullName } from "../../../common/currencyUtil"; +import { getErrorMsg } from "../../../common/errorUtil"; +import Loader from "../../../common/loader"; +import { GetServiceInfoResponse } from "../../../models/GetServiceInfoResponse"; +import ErrorMessage from "../errorMessage"; +import WithdrawAddress from "../withdrawAddress"; +import WithdrawalComplete from "../withdrawalComplete"; +import WithdrawAmount from "../withdrawAmount"; type WithdrawProps = { currency: string; diff --git a/src/dashboard/wallet/WithdrawAddress.tsx b/src/dashboard/wallet/withdrawAddress/index.tsx similarity index 78% rename from src/dashboard/wallet/WithdrawAddress.tsx rename to src/dashboard/wallet/withdrawAddress/index.tsx index 5349684..3823637 100644 --- a/src/dashboard/wallet/WithdrawAddress.tsx +++ b/src/dashboard/wallet/withdrawAddress/index.tsx @@ -1,25 +1,25 @@ import { Button, - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import React, { ReactElement, useState } from "react"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import { BOLTZ_ERROR_MESSAGES, getErrorMsg } from "../../common/errorUtil"; -import ButtonWithLoading from "../../common/buttonWithLoading"; -import QrCode from "../../common/qrCode"; -import { Fees } from "../../models/BoltzFees"; -import { CreateReverseSwapResponse } from "../../models/CreateReverseSwapResponse"; -import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import Address from "./address"; -import BoltzFeeInfo from "./boltzFeeInfo"; -import ErrorMessage from "./errorMessage"; -import { withdraw } from "./walletUtil"; -import WarningMessage from "./WarningMessage"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { BOLTZ_ERROR_MESSAGES, getErrorMsg } from "../../../common/errorUtil"; +import ButtonWithLoading from "../../../common/buttonWithLoading"; +import QrCode from "../../../common/qrCode"; +import { Fees } from "../../../models/BoltzFees"; +import { CreateReverseSwapResponse } from "../../../models/CreateReverseSwapResponse"; +import { GetServiceInfoResponse } from "../../../models/GetServiceInfoResponse"; +import Address from "../address"; +import BoltzFeeInfo from "../boltzFeeInfo"; +import ErrorMessage from "../errorMessage"; +import { withdraw } from "../walletUtil"; +import WarningMessage from "../warningMessage"; + +//styles +import { ButtonContainer } from "./styles"; type WithdrawAddressProps = { currency: string; @@ -31,17 +31,6 @@ type WithdrawAddressProps = { initialAddress?: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - padding: `${theme.spacing(2)}px 0px`, - }, - buttonContainer: { - marginTop: 1, - }, - }) -); - const WithdrawAddress = (props: WithdrawAddressProps): ReactElement => { const { currency, @@ -58,7 +47,6 @@ const WithdrawAddress = (props: WithdrawAddressProps): ReactElement => { const [withdrawing, setWithdrawing] = useState(false); const [error, setError] = useState(""); const [warning, setWarning] = useState(""); - const classes = useStyles(); const errorHandler = (err: any) => { setWithdrawing(false); @@ -127,12 +115,11 @@ const WithdrawAddress = (props: WithdrawAddressProps): ReactElement => { setAddress={setAddress} /> - - + ); }; diff --git a/src/dashboard/wallet/withdrawalComplete/styles.ts b/src/dashboard/wallet/withdrawalComplete/styles.ts new file mode 100644 index 0000000..164babb --- /dev/null +++ b/src/dashboard/wallet/withdrawalComplete/styles.ts @@ -0,0 +1,15 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type RowType = { + item: boolean; + container: boolean; + justify: string; + alignItems?: string; +} + +//styled +export const Row = styled(Grid)` + margin-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file From 1af1992a1ceda4d6d9f91aaa45fdacf0a984f5fe Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Mon, 11 Jan 2021 02:02:50 +0100 Subject: [PATCH 14/17] transfer dashboard components to styled --- src/App.tsx | 41 ++++++------ src/dashboard/{Dashboard.tsx => index.tsx} | 65 ++++++------------- src/dashboard/styles.ts | 55 ++++++++++++++++ src/dashboard/tradehistory/index.tsx | 2 +- .../{UnlockXud.tsx => unlockXud/index.tsx} | 36 ++++------ src/dashboard/unlockXud/styles.ts | 26 ++++++++ .../index.tsx} | 28 +++----- src/dashboard/viewDisabled/styles.ts | 16 +++++ src/dashboard/wallet/wallets/index.tsx | 2 +- 9 files changed, 158 insertions(+), 113 deletions(-) rename src/dashboard/{Dashboard.tsx => index.tsx} (79%) create mode 100644 src/dashboard/styles.ts rename src/dashboard/{UnlockXud.tsx => unlockXud/index.tsx} (83%) create mode 100644 src/dashboard/unlockXud/styles.ts rename src/dashboard/{ViewDisabled.tsx => viewDisabled/index.tsx} (71%) create mode 100644 src/dashboard/viewDisabled/styles.ts diff --git a/src/App.tsx b/src/App.tsx index 3816c64..1747e28 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,5 @@ import CssBaseline from "@material-ui/core/CssBaseline"; import { createMuiTheme, Theme, withStyles } from "@material-ui/core/styles"; -import { ThemeProvider as ThemeProviderM } from "@material-ui/styles"; import { ThemeProvider } from "styled-components"; import React, { ReactElement } from "react"; import { @@ -11,7 +10,7 @@ import { } from "react-router-dom"; import ConnectionFailed from "./common/connectionFailed"; import NotFound from "./common/notFound"; -import Dashboard from "./dashboard/Dashboard"; +import Dashboard from "./dashboard"; import { Path } from "./router/Path"; const darkTheme = createMuiTheme({ @@ -46,26 +45,24 @@ const GlobalCss = withStyles((theme: Theme) => { function App(): ReactElement { return ( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + ); } diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/index.tsx similarity index 79% rename from src/dashboard/Dashboard.tsx rename to src/dashboard/index.tsx index c07adc9..9dd16f7 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/index.tsx @@ -1,8 +1,4 @@ -import { Button, Grid, Tooltip, Typography } from "@material-ui/core"; -import Box from "@material-ui/core/Box"; -import Drawer from "@material-ui/core/Drawer"; -import List from "@material-ui/core/List"; -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import { Box, Grid, Tooltip } from "@material-ui/core"; import AccountBalanceWalletOutlinedIcon from "@material-ui/icons/AccountBalanceWalletOutlined"; import CachedIcon from "@material-ui/icons/Cached"; import HistoryIcon from "@material-ui/icons/History"; @@ -30,34 +26,16 @@ import Overview from "./overview"; import Tradehistory from "./tradehistory"; import Wallets from "./wallet/wallets"; -export const drawerWidth = 200; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - drawerPaper: { - width: drawerWidth, - justifyContent: "space-between", - }, - menuContainer: { - width: "100%", - }, - header: { - padding: "16px", - }, - drawerButton: { - margin: theme.spacing(2), - }, - content: { - marginLeft: drawerWidth, - backgroundColor: theme.palette.background.default, - padding: theme.spacing(3), - height: "100vh", - }, - }) -); +//styles +import { + DrawerPaper, + MenuContainer, + Header, + DrawerButton, + Content +} from "./styles"; const Dashboard = (): ReactElement => { - const classes = useStyles(); const history = useHistory(); const { path } = useRouteMatch(); const [syncInProgress, setSyncInProgress] = useState(false); @@ -138,23 +116,19 @@ const Dashboard = (): ReactElement => { return ( - - XUD UI - - + + {menuItems.map((item) => ( { tooltipTextRows={menuItemTooltipMsg} /> ))} - + {isElectron() && ( - + )} - -
+ + {menuItems.map((item) => ( @@ -197,7 +170,7 @@ const Dashboard = (): ReactElement => { -
+ ); }; diff --git a/src/dashboard/styles.ts b/src/dashboard/styles.ts new file mode 100644 index 0000000..6482469 --- /dev/null +++ b/src/dashboard/styles.ts @@ -0,0 +1,55 @@ +import styled from "styled-components"; +import { + Drawer, + List, + Typography, + Button +} from "@material-ui/core"; +import { ReactElement } from "react"; +const drawerWidth = 200; + +//types +type DrawerPaperType = { + variant: string; + anchor: string; +} + +type HeaderType = { + variant: string; + component: string; + color: string; +} + +type DrawerButtonType = { + size: string; + startIcon: ReactElement; + variant: string; + onClick: any; +} + +//styled +export const DrawerPaper = styled(Drawer)` + & > .MuiDialog-container > .MuiPaper-root { + width: ${drawerWidth}px; + justify-content: space-between; + } +`; + +export const MenuContainer = styled(List)` + width: 100%; +`; + +export const Header = styled(Typography)` + padding: 16px; +`; + +export const DrawerButton = styled(Button)` + margin: ${p => p.theme.spacing(2)}px; +`; + +export const Content = styled.main` + margin-left: ${drawerWidth}px; + background-color: ${p => p.theme.palette.background.default}; + padding: ${p => p.theme.spacing(3)}px; + height: 100vh; +`; \ No newline at end of file diff --git a/src/dashboard/tradehistory/index.tsx b/src/dashboard/tradehistory/index.tsx index 6d5c944..ebe5eeb 100644 --- a/src/dashboard/tradehistory/index.tsx +++ b/src/dashboard/tradehistory/index.tsx @@ -24,7 +24,7 @@ import { OrderRole } from "../../enums"; import { Trade } from "../../models/Trade"; import { TradehistoryResponse } from "../../models/TradehistoryResponse"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import ViewDisabled from "../ViewDisabled"; +import ViewDisabled from "../viewDisabled"; import TradehistoryDownload from "./tradehistoryDownload"; //styles diff --git a/src/dashboard/UnlockXud.tsx b/src/dashboard/unlockXud/index.tsx similarity index 83% rename from src/dashboard/UnlockXud.tsx rename to src/dashboard/unlockXud/index.tsx index 945448e..27cc5ff 100644 --- a/src/dashboard/UnlockXud.tsx +++ b/src/dashboard/unlockXud/index.tsx @@ -1,37 +1,26 @@ import { - createStyles, FormControl, Grid, IconButton, InputAdornment, InputLabel, - makeStyles, OutlinedInput, - Theme, Typography, } from "@material-ui/core"; import React, { ReactElement, useState } from "react"; import Visibility from "@material-ui/icons/Visibility"; import VisibilityOff from "@material-ui/icons/VisibilityOff"; -import ButtonWithLoading from "../common/buttonWithLoading"; -import api from "../api"; -import { getErrorMsg, XUD_ERROR_MESSAGES } from "../common/errorUtil"; +import ButtonWithLoading from "../../common/buttonWithLoading"; +import api from "../../api"; +import { getErrorMsg, XUD_ERROR_MESSAGES } from "../../common/errorUtil"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - height: "50vh", - maxHeight: 500, - }, - errorMessageContainer: { - minHeight: 50, - marginTop: theme.spacing(2), - }, - }) -); +//styles +import { + Container, + ErrorMessageContainer +} from "./styles"; const UnlockXud = (): ReactElement => { - const classes = useStyles(); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [showPassword, setShowPassword] = useState(false); @@ -63,7 +52,7 @@ const UnlockXud = (): ReactElement => { } }} > - + Password @@ -105,12 +94,11 @@ const UnlockXud = (): ReactElement => { onClick={unlock} /> - {!!error && ( <> @@ -126,9 +114,9 @@ const UnlockXud = (): ReactElement => { )} - + - + ); }; diff --git a/src/dashboard/unlockXud/styles.ts b/src/dashboard/unlockXud/styles.ts new file mode 100644 index 0000000..322152c --- /dev/null +++ b/src/dashboard/unlockXud/styles.ts @@ -0,0 +1,26 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ContainerType = { + container: boolean; + justify: string; +} + +type ErrorMessageContainerType = { + item: boolean; + container: boolean; + direction: string; + alignItems: string; +} + +//styled +export const Container = styled(Grid)` + height: 50vh; + max-height: 500px; +`; + +export const ErrorMessageContainer = styled(Grid)` + min-height: 50px; + margin-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/dashboard/ViewDisabled.tsx b/src/dashboard/viewDisabled/index.tsx similarity index 71% rename from src/dashboard/ViewDisabled.tsx rename to src/dashboard/viewDisabled/index.tsx index bc72c39..1454269 100644 --- a/src/dashboard/ViewDisabled.tsx +++ b/src/dashboard/viewDisabled/index.tsx @@ -1,35 +1,25 @@ import { - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"; import React, { ReactElement } from "react"; -import { DashboardContentState } from "./DashboardContent"; -import UnlockXud from "./UnlockXud"; +import { DashboardContentState } from "../DashboardContent"; +import UnlockXud from "../unlockXud"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - padding: theme.spacing(3), - }, - }) -); +//styles +import { Row } from "./styles"; function ViewDisabled(props: DashboardContentState): ReactElement { - const classes = useStyles(); const { xudLocked, xudStatus } = props; return ( - @@ -41,8 +31,8 @@ function ViewDisabled(props: DashboardContentState): ReactElement { {xudLocked ? "XUD is locked" : "XUD is not ready"} - - + + {xudLocked ? ( ) : ( @@ -52,7 +42,7 @@ function ViewDisabled(props: DashboardContentState): ReactElement { )} - + ); } diff --git a/src/dashboard/viewDisabled/styles.ts b/src/dashboard/viewDisabled/styles.ts new file mode 100644 index 0000000..d300e7e --- /dev/null +++ b/src/dashboard/viewDisabled/styles.ts @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type RowType = { + container: boolean; + item: boolean; + alignItems?: string; + justify: string; + spacing?: number; +} + +//styled +export const Row = styled(Grid)` + padding: ${p => p.theme.spacing(3)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/wallets/index.tsx b/src/dashboard/wallet/wallets/index.tsx index 83b85ce..75d093f 100644 --- a/src/dashboard/wallet/wallets/index.tsx +++ b/src/dashboard/wallet/wallets/index.tsx @@ -8,7 +8,7 @@ import PageCircularProgress from "../../../common/pageCircularProgress"; import { GetbalanceResponse } from "../../../models/GetbalanceResponse"; import { TradinglimitsResponse } from "../../../models/TradinglimitsResponse"; import DashboardContent, { DashboardContentState } from "../../DashboardContent"; -import ViewDisabled from "../../ViewDisabled"; +import ViewDisabled from "../../viewDisabled"; import WalletItem from "../walletItem"; //styles From a95f0a7f7f65a774b5664311527b42f15d8fb00b Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 2 Feb 2021 12:35:05 +0100 Subject: [PATCH 15/17] update any types on function props --- src/common/sorting/sortingOptions/styles.ts | 2 +- src/dashboard/overview/overviewItem/styles.ts | 2 +- src/dashboard/styles.ts | 2 +- src/dashboard/tradehistory/styles.ts | 2 +- src/dashboard/wallet/address/styles.ts | 4 ++-- src/dashboard/wallet/walletItem/styles.ts | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/common/sorting/sortingOptions/styles.ts b/src/common/sorting/sortingOptions/styles.ts index c262bbc..a889a70 100644 --- a/src/common/sorting/sortingOptions/styles.ts +++ b/src/common/sorting/sortingOptions/styles.ts @@ -19,7 +19,7 @@ type SortOptionButtonType = { fullWidth: boolean; disableRipple: boolean; size: string; - onClick: any; + onClick: () => void; key: string; } diff --git a/src/dashboard/overview/overviewItem/styles.ts b/src/dashboard/overview/overviewItem/styles.ts index ddcabef..a818109 100644 --- a/src/dashboard/overview/overviewItem/styles.ts +++ b/src/dashboard/overview/overviewItem/styles.ts @@ -26,7 +26,7 @@ type StatusDotType = { type SnackbarType = { open: boolean; autoHideDuration: number; - onClose: any; + onClose: () => void; anchorOrigin: object; } diff --git a/src/dashboard/styles.ts b/src/dashboard/styles.ts index 6482469..51b2364 100644 --- a/src/dashboard/styles.ts +++ b/src/dashboard/styles.ts @@ -24,7 +24,7 @@ type DrawerButtonType = { size: string; startIcon: ReactElement; variant: string; - onClick: any; + onClick: () => void; } //styled diff --git a/src/dashboard/tradehistory/styles.ts b/src/dashboard/tradehistory/styles.ts index 69b2558..651aad2 100644 --- a/src/dashboard/tradehistory/styles.ts +++ b/src/dashboard/tradehistory/styles.ts @@ -12,7 +12,7 @@ type TableCellType = { type TableCellIconType = { size: string; - onClick: any; + onClick: () => void; } //styled diff --git a/src/dashboard/wallet/address/styles.ts b/src/dashboard/wallet/address/styles.ts index 1b08b95..d29cc0f 100644 --- a/src/dashboard/wallet/address/styles.ts +++ b/src/dashboard/wallet/address/styles.ts @@ -12,10 +12,10 @@ type AddressContainerType = { } type AddressFieldType = { - fullWidth: any; + fullWidth: boolean; color: string; readOnly: boolean - value: any; + value: string; onChange: any; endAdornment: any; } diff --git a/src/dashboard/wallet/walletItem/styles.ts b/src/dashboard/wallet/walletItem/styles.ts index f3d30dc..6abba60 100644 --- a/src/dashboard/wallet/walletItem/styles.ts +++ b/src/dashboard/wallet/walletItem/styles.ts @@ -20,7 +20,7 @@ type ViewContentType = { } type RowsGroupType = { - key?: any; + key?: string; item: boolean; container: boolean; direction?: string; From 834b6e987deb52abb4ec7212df6e7756784bb069 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 2 Feb 2021 12:54:47 +0100 Subject: [PATCH 16/17] bring back material theme provider --- src/App.tsx | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1747e28..9c8f852 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import CssBaseline from "@material-ui/core/CssBaseline"; import { createMuiTheme, Theme, withStyles } from "@material-ui/core/styles"; import { ThemeProvider } from "styled-components"; +import { ThemeProvider as MaterialThemeProvider } from "@material-ui/styles"; import React, { ReactElement } from "react"; import { BrowserRouter as Router, @@ -45,24 +46,26 @@ const GlobalCss = withStyles((theme: Theme) => { function App(): ReactElement { return ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ); } From 7d2e115b4aa57e7daa839eb2d9478c018c4058f2 Mon Sep 17 00:00:00 2001 From: Dejan Kocev Date: Tue, 2 Feb 2021 12:55:00 +0100 Subject: [PATCH 17/17] fix DrawerPaper class --- src/dashboard/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dashboard/styles.ts b/src/dashboard/styles.ts index 51b2364..3d628ca 100644 --- a/src/dashboard/styles.ts +++ b/src/dashboard/styles.ts @@ -29,7 +29,7 @@ type DrawerButtonType = { //styled export const DrawerPaper = styled(Drawer)` - & > .MuiDialog-container > .MuiPaper-root { + & > .MuiPaper-root { width: ${drawerWidth}px; justify-content: space-between; }