From fe1e3bc768afa017618d7b5f20c56edf203bb72a Mon Sep 17 00:00:00 2001 From: Utsavladia Date: Thu, 30 May 2024 11:26:42 +0530 Subject: [PATCH] fixed chatbot for mobile screen and fixed Navbar at top --- frontend/package-lock.json | 112 +++++++++++++++++++ frontend/src/ChatAssistant/ChatAssistant.css | 64 +++++++---- frontend/src/index.css | 54 +++++---- frontend/src/style/Navbar.css | 76 ++++++------- 4 files changed, 220 insertions(+), 86 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ef995b54..0cc271a3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3355,6 +3355,16 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rc-component/color-picker": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.2.0.tgz", @@ -3817,6 +3827,95 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz", + "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.16.5", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz", @@ -18094,6 +18193,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css index 13557819..11d154ac 100644 --- a/frontend/src/ChatAssistant/ChatAssistant.css +++ b/frontend/src/ChatAssistant/ChatAssistant.css @@ -1,13 +1,13 @@ .chatbot { - position: fixed; - bottom: 0; - right:0; - margin-right:20px; - margin-bottom: 12px; + position: fixed; + bottom: 0; + right: 0; + margin-right: 20px; + margin-bottom: 12px; } .react-chatbot-kit-chat-input { - outline:none; + outline: none; } .react-chatbot-kit-chat-inner-container { @@ -37,24 +37,50 @@ .react-chatbot-kit-chat-btn-send { background-color: #55a0ea; - height:45px; + height: 45px; } -.Logo{ - height:50px; - width:50px; +.Logo { + height: 50px; + width: 50px; border-radius: 50px; - right:12px; + right: 12px; } -.Avatar{ - height:50px; - width:50px; +.Avatar { + height: 50px; + width: 50px; border-radius: 50px; } -.userAvatar{ - height:50px; - width:50px; - border-radius:50px; -} \ No newline at end of file +.userAvatar { + height: 50px; + width: 50px; + border-radius: 50px; +} + +@media only screen and (max-width: 425px) { + .chatbot { + margin-right: 5px; + margin-bottom: 5px; + } + + .react-chatbot-kit-chat-container { + width: 300px; + height: 400px; + padding-bottom: 30px; + } + .react-chatbot-kit-chat-message-container { + height: 350px; + } + .Avatar { + height: 36px; + width: 36px; + border-radius: 50px; + } + .userAvatar { + height: 36px; + width: 36px; + border-radius: 50px; + } +} diff --git a/frontend/src/index.css b/frontend/src/index.css index c503c267..ddc397fa 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,30 +1,31 @@ :root, body, html { - overflow-x: hidden; - height: 100%; + overflow-x: hidden; + height: 100%; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - min-height: 100vh; - display: grid; - grid-template-rows: 1fr auto; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - background: linear-gradient(to left, #04121e, rgb(39, 2, 13), #021f23); - color: #8758f6; - position:relative; + min-height: 100vh; + display: grid; + grid-template-rows: 1fr auto; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + background: linear-gradient(to left, #04121e, rgb(39, 2, 13), #021f23); + color: #8758f6; + position: relative; + padding-top: 32px; } .darkmode-layer, @@ -32,23 +33,20 @@ body { z-index: 35; position: absolute; bottom: 18px !important; - } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; } img { - background: #ffffff; - padding: 3px; - margin: 5px; - border-radius: 40px; - + background: #ffffff; + padding: 3px; + margin: 5px; + border-radius: 40px; } .darkmode--activated img { - - filter: invert(1); + filter: invert(1); } diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css index ac84536a..0f533316 100644 --- a/frontend/src/style/Navbar.css +++ b/frontend/src/style/Navbar.css @@ -2,14 +2,16 @@ .navbar { background-color: #8b5cf6; padding: 8px 10px; - position: sticky; + position: fixed; width: 100%; + top: 0px; + left: 0px; align-items: center; justify-content: space-between; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; /* border-bottom: 3px solid rgb(28, 174, 184); */ - z-index:4; + z-index: 4; isolation: isolate; mix-blend-mode: normal; padding-left: 30px; @@ -22,7 +24,6 @@ .card-body img { background: transparent; - } .navbar-brand { @@ -112,10 +113,10 @@ -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); - -webkit-transition: .5s ease-in-out; - -moz-transition: .5s ease-in-out; - -o-transition: .5s ease-in-out; - transition: .5s ease-in-out; + -webkit-transition: 0.5s ease-in-out; + -moz-transition: 0.5s ease-in-out; + -o-transition: 0.5s ease-in-out; + transition: 0.5s ease-in-out; cursor: pointer; } @@ -132,10 +133,10 @@ -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); - -webkit-transition: .25s ease-in-out; - -moz-transition: .25s ease-in-out; - -o-transition: .25s ease-in-out; - transition: .25s ease-in-out; + -webkit-transition: 0.25s ease-in-out; + -moz-transition: 0.25s ease-in-out; + -o-transition: 0.25s ease-in-out; + transition: 0.25s ease-in-out; } #nav-icon1 span:nth-child(1) { @@ -208,7 +209,6 @@ width: 100%; } - .sidebar { width: 0; height: 92%; @@ -301,7 +301,6 @@ /* display: none; */ width: 100%; justify-content: center; - } .logo-img { @@ -384,9 +383,8 @@ flex-wrap: wrap; border: none; } -.box:hover{ +.box:hover { border: 2.5px solid black; - } .input { border: none !important; @@ -413,35 +411,35 @@ } .span { - /* background: transparent !important; */ - border: none !important; - border-radius: 2px 100px 100px 2px; - margin:1.5px ; - display: flex; - align-items: center; - padding: 0.375rem 0.75rem; - font-size: 1.5rem; - font-weight: b; - line-height: 1.5; - color: #495057; - text-align: center; - white-space: nowrap; - background-color: #e9ecef; - border: 1px solid #ced4da; - /* border-radius: 0.25rem; */ - font-weight: bold !important; - cursor: pointer; -} -.false{ + /* background: transparent !important; */ + border: none !important; + border-radius: 2px 100px 100px 2px; + margin: 1.5px; + display: flex; + align-items: center; + padding: 0.375rem 0.75rem; + font-size: 1.5rem; + font-weight: b; + line-height: 1.5; + color: #495057; + text-align: center; + white-space: nowrap; + background-color: #e9ecef; + border: 1px solid #ced4da; + /* border-radius: 0.25rem; */ + font-weight: bold !important; + cursor: pointer; +} +.false { background-color: #ffffff; } -.span:hover{ +.span:hover { background-color: #000; - color:#fff; + color: #fff; } -.false:hover{ +.false:hover { background-color: #ffffff; - color:#000; + color: #000; background: transparent !important; border: none !important;