From 82c98a5e21d3c40f101abf33ee9e7c6a02885696 Mon Sep 17 00:00:00 2001 From: nadyasav Date: Wed, 11 Oct 2023 03:02:54 +0300 Subject: [PATCH] changed button-toggle to text box for version and date info #8 --- frontend/src/App.tsx | 19 ++---------- .../devModeToggle/DevModeToggle.module.scss | 14 --------- .../devModeToggle/DevModeToggle.tsx | 22 -------------- .../versionInfo/VersionInfo.module.scss | 24 +++++++++++++++ .../components/versionInfo/VersionInfo.tsx | 23 ++++++++++++++ frontend/yarn.lock | 30 +++++++++---------- 6 files changed, 64 insertions(+), 68 deletions(-) delete mode 100644 frontend/src/components/devModeToggle/DevModeToggle.module.scss delete mode 100644 frontend/src/components/devModeToggle/DevModeToggle.tsx create mode 100644 frontend/src/components/versionInfo/VersionInfo.module.scss create mode 100644 frontend/src/components/versionInfo/VersionInfo.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 97ffbf2..275d314 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,34 +5,18 @@ import './index.scss'; import './App.css'; import '@rainbow-me/rainbowkit/styles.css'; import { ConnectButton } from '@rainbow-me/rainbowkit'; -import DevModeToggle from './components/devModeToggle/DevModeToggle'; +import VersionInfo from './components/versionInfo/VersionInfo'; function App() { const [count, setCount] = useState(0); - const [devModeState, setDevModeState] = useState(false); const versionGitTag = import.meta.env.VITE_REACT_APP_GIT_TAG; const gitDate = import.meta.env.VITE_REACT_APP_GIT_DATE; console.log('VITE_REACT_APP_GIT_TAG - ', versionGitTag); console.log('VITE_REACT_APP_GIT_DATE - ', gitDate); - const handleToggleDevMode = (value: boolean) => { - setDevModeState(value); - }; - return (
- {versionGitTag && gitDate && ( -
- - {devModeState && ( -
-

Version: {versionGitTag}

-

Date: {gitDate}

-
- )} -
- )}
Vite logo @@ -50,6 +34,7 @@ function App() {

Click on the Vite and React logos to learn more

+ {versionGitTag && gitDate && }
); } diff --git a/frontend/src/components/devModeToggle/DevModeToggle.module.scss b/frontend/src/components/devModeToggle/DevModeToggle.module.scss deleted file mode 100644 index 2954bd2..0000000 --- a/frontend/src/components/devModeToggle/DevModeToggle.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -.devModeToggle { - border: none; - outline: none; - cursor: pointer; - padding: 5px 10px; - min-width: 80px; - display: block; - border-radius: 10px; - font-size: 12px; - background-color: var(--blue); - position: absolute; - top: 0; - left: 0; -} diff --git a/frontend/src/components/devModeToggle/DevModeToggle.tsx b/frontend/src/components/devModeToggle/DevModeToggle.tsx deleted file mode 100644 index d4acee3..0000000 --- a/frontend/src/components/devModeToggle/DevModeToggle.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styles from './DevModeToggle.module.scss'; - -interface IDevModeToggle { - isDevMode: boolean; - handleToggleDevMode: (value: boolean) => void; -} - -function DevModeToggle(props: IDevModeToggle) { - const { isDevMode = false, handleToggleDevMode } = props; - - const handleClick = () => { - handleToggleDevMode(!isDevMode); - }; - - return ( - - ); -} - -export default DevModeToggle; diff --git a/frontend/src/components/versionInfo/VersionInfo.module.scss b/frontend/src/components/versionInfo/VersionInfo.module.scss new file mode 100644 index 0000000..09b73a5 --- /dev/null +++ b/frontend/src/components/versionInfo/VersionInfo.module.scss @@ -0,0 +1,24 @@ +.versionInfoBox { + position: absolute; + bottom: 5px; + right: 5px; + color: #ffffff; + padding: 10px; + font-size: 14px; + border-radius: 10px; + max-width: 250px; + background: rgba(0, 0, 0, 0.8); +} + +.versionInfoItem { + word-break: break-all; + margin-top: 10px; + + &:first-child { + margin-top: 0; + } +} + +.versionInfoName { + padding-right: 5px; +} \ No newline at end of file diff --git a/frontend/src/components/versionInfo/VersionInfo.tsx b/frontend/src/components/versionInfo/VersionInfo.tsx new file mode 100644 index 0000000..d67c28b --- /dev/null +++ b/frontend/src/components/versionInfo/VersionInfo.tsx @@ -0,0 +1,23 @@ +import styles from './VersionInfo.module.scss'; + +interface IVersionInfo { + version: string; + versionDate: string; +} + +function VersionInfo(props: IVersionInfo) { + return ( +
+

+ Version: + {props.version} +

+

+ Date: + {props.versionDate} +

+
+ ); +} + +export default VersionInfo; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 18231e0..4eadb3e 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -908,9 +908,9 @@ "@types/ms" "*" "@types/eslint@^8.4.2": - version "8.44.3" - resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.3.tgz#96614fae4875ea6328f56de38666f582d911d962" - integrity sha512-iM/WfkwAhwmPff3wZuPLYiHX18HI24jU8k1ZSH7P8FHwxTjZ2P6CoX2wnF43oprR+YXJM6UUxATkNvyv/JHd+g== + version "8.44.4" + resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.4.tgz#28eaff82e1ca0a96554ec5bb0188f10ae1a74c2f" + integrity sha512-lOzjyfY/D9QR4hY9oblZ76B90MYTB3RrQ4z2vBIJKj9ROCRqdkYl2gSUx1x1a4IWPjKJZLL4Aw1Zfay7eMnmnA== dependencies: "@types/estree" "*" "@types/json-schema" "*" @@ -953,16 +953,16 @@ integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ== "@types/react-dom@^18.2.7": - version "18.2.12" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.12.tgz#58479c463d1e0b7f1ee7cd80e09186189f9ec32d" - integrity sha512-QWZuiA/7J/hPIGocXreCRbx7wyoeet9ooxfbSA+zbIWqyQEE7GMtRn4A37BdYyksnN+/NDnWgfxZH9UVGDw1hg== + version "18.2.13" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.13.tgz#89cd7f9ec8b28c8b6f0392b9591671fb4a9e96b7" + integrity sha512-eJIUv7rPP+EC45uNYp/ThhSpE16k22VJUknt5OLoH9tbXoi8bMhwLf5xRuWMywamNbWzhrSmU7IBJfPup1+3fw== dependencies: "@types/react" "*" "@types/react@*", "@types/react@^18.2.15": - version "18.2.27" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.27.tgz#746e52b06f3ccd5d7a724fd53769b70792601440" - integrity sha512-Wfv7B7FZiR2r3MIqbAlXoY1+tXm4bOqfz4oRr+nyXdBqapDBZ0l/IGcSlAfvxIHEEJjkPU0MYAc/BlFPOcrgLw== + version "18.2.28" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.28.tgz#86877465c0fcf751659a36c769ecedfcfacee332" + integrity sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -2126,9 +2126,9 @@ eastasianwidth@^0.2.0: integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== electron-to-chromium@^1.4.535: - version "1.4.548" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.548.tgz#e695d769e0e801fa6d438b63f6bc9b80372000d6" - integrity sha512-R77KD6mXv37DOyKLN/eW1rGS61N6yHOfapNSX9w+y9DdPG83l9Gkuv7qkCFZ4Ta4JPhrjgQfYbv4Y3TnM1Hi2Q== + version "1.4.549" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.549.tgz#ab223f5d85c55a9def358db163bc8cacba72df69" + integrity sha512-gpXfJslSi4hYDkA0mTLEpYKRv9siAgSUgZ+UWyk+J5Cttpd1ThCVwdclzIwQSclz3hYn049+M2fgrP1WpvF8xg== emoji-regex@^8.0.0: version "8.0.0" @@ -3765,9 +3765,9 @@ safe-stable-stringify@^2.1.0: integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g== sass@^1.69.1: - version "1.69.1" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.1.tgz#659b3b04452245dcf82f731684831e990ddb0c89" - integrity sha512-nc969GvTVz38oqKgYYVHM/Iq7Yl33IILy5uqaH2CWSiSUmRCvw+UR7tA3845Sp4BD5ykCUimvrT3k1EjTwpVUA== + version "1.69.2" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.2.tgz#8aeaeb6c1dcdbeaa26bbfeddece67c9fcd4b1d93" + integrity sha512-48lDtG/9OuSQZ9oNmJMUXI2QdCakAWrAGjpX/Fy6j4Og8dEAyE598x5GqCqnHkwV7+I5w8DJpqjm581q5HNh3w== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0"