From 8cf2f201ac1c64450396fe914aae37e952b7206b Mon Sep 17 00:00:00 2001 From: Grant Hamblin Date: Mon, 30 Oct 2023 19:58:20 -0400 Subject: [PATCH] Completing TCES-9 Finished Navbar --- client/.eslintrc.json | 2 +- client/.prettierignore | 4 +- client/package-lock.json | 69 +++++++++++++++++++++++ client/package.json | 1 + client/src/App.jsx | 26 +-------- client/src/Navbar/Dropdown.css | 64 +++++++++++++++++++++ client/src/Navbar/Dropdown.jsx | 21 +++++++ client/src/Navbar/DropdownItem.jsx | 17 ++++++ client/src/Navbar/Navbar.css | 47 +++++++++++++++ client/src/Navbar/Navbar.jsx | 36 ++++++++++++ client/src/Navbar/NavbarButton.jsx | 9 +++ client/src/Navbar/NavbarProfile.jsx | 11 ++++ client/src/images/ArrowForwardFilled.svg | 7 +++ client/src/images/LogoutFilled.svg | 5 ++ client/src/images/PeopleFilled.svg | 3 + client/src/images/ProfileFilled.svg | 3 + client/src/images/SettingsFilled.svg | 5 ++ client/src/images/tces-logo.png | Bin 0 -> 2144 bytes client/src/logo.svg | 1 - 19 files changed, 304 insertions(+), 27 deletions(-) create mode 100644 client/src/Navbar/Dropdown.css create mode 100644 client/src/Navbar/Dropdown.jsx create mode 100644 client/src/Navbar/DropdownItem.jsx create mode 100644 client/src/Navbar/Navbar.css create mode 100644 client/src/Navbar/Navbar.jsx create mode 100644 client/src/Navbar/NavbarButton.jsx create mode 100644 client/src/Navbar/NavbarProfile.jsx create mode 100644 client/src/images/ArrowForwardFilled.svg create mode 100644 client/src/images/LogoutFilled.svg create mode 100644 client/src/images/PeopleFilled.svg create mode 100644 client/src/images/ProfileFilled.svg create mode 100644 client/src/images/SettingsFilled.svg create mode 100644 client/src/images/tces-logo.png delete mode 100644 client/src/logo.svg diff --git a/client/.eslintrc.json b/client/.eslintrc.json index 5ba83f48..e981b8d5 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -14,6 +14,6 @@ "rules": { "react/react-in-jsx-scope": "off", "react/jsx-uses-react": "off", - "prettier/prettier": "error" + "prettier/prettier": 0 } } \ No newline at end of file diff --git a/client/.prettierignore b/client/.prettierignore index 0cda66eb..e66c8c40 100644 --- a/client/.prettierignore +++ b/client/.prettierignore @@ -2,4 +2,6 @@ node_modules README.md .eslintrc.json package-lock.json -package.json \ No newline at end of file +package.json +Navbar.jsx +App.jsx \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index 09f20447..cd42a253 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -17,6 +17,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.0", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -4922,6 +4923,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/stylis": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.2.tgz", + "integrity": "sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -6372,6 +6378,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6815,6 +6829,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6996,6 +7018,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -16429,6 +16461,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16925,6 +16962,38 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.0.tgz", + "integrity": "sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/client/package.json b/client/package.json index d3391b54..32d716b4 100644 --- a/client/package.json +++ b/client/package.json @@ -12,6 +12,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/client/src/App.jsx b/client/src/App.jsx index 4dd53fec..d326108d 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,28 +1,6 @@ -import logo from "./logo.svg"; -import "./App.css"; +import Navbar from "./Navbar/Navbar"; function App() { - return ( -
-
- logo -

- Edit - src/App.js - and save to reload. - {} -

- - Learn React - -
-
- ); + return } - export default App; diff --git a/client/src/Navbar/Dropdown.css b/client/src/Navbar/Dropdown.css new file mode 100644 index 00000000..2db11467 --- /dev/null +++ b/client/src/Navbar/Dropdown.css @@ -0,0 +1,64 @@ + +.dropdown-container { + margin-top: 10px; + border-radius: 8px; + background: var(--light-background-paper, #FFF); + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); + width: 600px; + position: fixed; + top: 56px; + left: 812px; +} + +.dropdown-title { + color: var(--light-text-primary, rgba(0, 0, 0, 0.87)); + font-feature-settings: 'clig' off, 'liga' off; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 133.4%; /* 32.016px */ + height: 32px; + padding: 16px; + display: flex; + align-items: center; + align-self: stretch; + border-bottom: 1px solid #0000008A; +} + +.dropdown-item-container { + display: flex; + padding: 8px 16px; + align-items: center; + align-self: stretch; + justify-content: space-between; + height: 48px; + background: none; + border: none; +} + +.dropdown-item-container:not(:last-child) { + border-bottom: 1px solid #0000008A; + } + +.dropdown-items { + display: flex; + padding: 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; +} + +.dropdown-item-text { + color: var(--light-text-primary, rgba(0, 0, 0, 0.87)); + font-feature-settings: 'clig' off, 'liga' off; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: 0.15px; +} + +.dropdown-item-left-content { + display: flex; + gap: 22px; +} \ No newline at end of file diff --git a/client/src/Navbar/Dropdown.jsx b/client/src/Navbar/Dropdown.jsx new file mode 100644 index 00000000..59682c22 --- /dev/null +++ b/client/src/Navbar/Dropdown.jsx @@ -0,0 +1,21 @@ +import './Dropdown.css' +import DropdownItem from './DropdownItem' + +import SettingsLogo from '../images/SettingsFilled.svg' +import LogoutLogo from '../images/LogoutFilled.svg' +import PeopleLogo from '../images/PeopleFilled.svg' + +function Dropdown({ isAdmin }) { + return ( +
+
Profile
+
+ {isAdmin && } + + +
+
+ ) +} + +export default Dropdown \ No newline at end of file diff --git a/client/src/Navbar/DropdownItem.jsx b/client/src/Navbar/DropdownItem.jsx new file mode 100644 index 00000000..36db2a5c --- /dev/null +++ b/client/src/Navbar/DropdownItem.jsx @@ -0,0 +1,17 @@ +import './Navbar.css' +import ArrowLogo from '../images/ArrowForwardFilled.svg' + +function DropdownItem({ label, imageUrl }) { + return ( +
+
+ logo +
{label}
+
+ logo +
+ ) +} + + +export default DropdownItem \ No newline at end of file diff --git a/client/src/Navbar/Navbar.css b/client/src/Navbar/Navbar.css new file mode 100644 index 00000000..0d345a12 --- /dev/null +++ b/client/src/Navbar/Navbar.css @@ -0,0 +1,47 @@ + +.nav-container { + display: flex; + justify-content: space-between; + flex: 1; + padding: 8px 16px; + border-bottom: 1px solid #0000008A; + background: var(--light-primary-contrast, #FFF); + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); +} + +.left-content { + display: flex; + align-items: center; + justify-content: space-between; + } + +.right-content { + display: flex; + align-items: center; +} + +.right-content-image { + padding: 12px; + background: none; + border: none; +} +.left-content-buttons { + display: flex; + justify-content: space-between; + width: 342px; + margin-left: 50px; +} + +.nav-left-button { + color: rgba(0, 0, 0, 0.6); + background: none; + border: none; + font-size: 15px; + font-weight: 500; + line-height: 26px; + letter-spacing: 0.46000000834465027px; + text-align: left; +} + + + diff --git a/client/src/Navbar/Navbar.jsx b/client/src/Navbar/Navbar.jsx new file mode 100644 index 00000000..57edf946 --- /dev/null +++ b/client/src/Navbar/Navbar.jsx @@ -0,0 +1,36 @@ +import { useState } from 'react' +import logo from '../images/tces-logo.png' +import Profile from '../images/ProfileFilled.svg' +import Dropdown from './Dropdown' +import NavbarProfile from './NavbarProfile' +import NavbarButton from './NavbarButton' + +function Navbar() { + + const [isDropdownVisible, setIsDropdownVisible] = useState(false); + + const toggleDropdown = () => { + setIsDropdownVisible(!isDropdownVisible); + }; + + return ( +
+
+
+ logo +
+
+ + + +
+
+
+ +
+ {isDropdownVisible && } +
+ ) +} + +export default Navbar \ No newline at end of file diff --git a/client/src/Navbar/NavbarButton.jsx b/client/src/Navbar/NavbarButton.jsx new file mode 100644 index 00000000..e4d067a3 --- /dev/null +++ b/client/src/Navbar/NavbarButton.jsx @@ -0,0 +1,9 @@ +import './Navbar.css' + +function NavbarButton({ title }) { + return ( + + ) +} + +export default NavbarButton \ No newline at end of file diff --git a/client/src/Navbar/NavbarProfile.jsx b/client/src/Navbar/NavbarProfile.jsx new file mode 100644 index 00000000..27695a76 --- /dev/null +++ b/client/src/Navbar/NavbarProfile.jsx @@ -0,0 +1,11 @@ +import './Navbar.css' + +function NavbarProfile({ imageUrl, toggleDropdown}) { + return ( + + ) +} + +export default NavbarProfile \ No newline at end of file diff --git a/client/src/images/ArrowForwardFilled.svg b/client/src/images/ArrowForwardFilled.svg new file mode 100644 index 00000000..1b005de7 --- /dev/null +++ b/client/src/images/ArrowForwardFilled.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/client/src/images/LogoutFilled.svg b/client/src/images/LogoutFilled.svg new file mode 100644 index 00000000..081dea0e --- /dev/null +++ b/client/src/images/LogoutFilled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/src/images/PeopleFilled.svg b/client/src/images/PeopleFilled.svg new file mode 100644 index 00000000..0b33cde6 --- /dev/null +++ b/client/src/images/PeopleFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/images/ProfileFilled.svg b/client/src/images/ProfileFilled.svg new file mode 100644 index 00000000..d6c2f3fe --- /dev/null +++ b/client/src/images/ProfileFilled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/src/images/SettingsFilled.svg b/client/src/images/SettingsFilled.svg new file mode 100644 index 00000000..f1f01e8f --- /dev/null +++ b/client/src/images/SettingsFilled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/src/images/tces-logo.png b/client/src/images/tces-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f7af0208a0593ddc27e170aced207eff53702308 GIT binary patch literal 2144 zcmV-m2%q|Qr z0>J=9#BFvLMyw750~CAQI_^R+KoN1RMin$cu8_DI?)g|%YCrA9^=>nQ0g8x6gzI4p z(<2z5hNJM*}IJ*;?nCq%c1AFf>s zomK~pRs)rad?C5H6`LJ5jZ_px{yjK2hz~#b0F`_9V%dH7;j2IqagAC9|41>LhjHoB zW$5*KO56w{t-@#L&!e-mi{D?dVmVem@Lf7m!C|-K?AbH0PuP*ZI2~UZk^)?~(kJcM z-{3tjDtt_8Y-pHf^Uk3|(vq}vDI+yas{XKg+P(MQJudyI>BN9(9I=rh*nhYM<}n8j zA3Xvkh>eX!)xOs;7myX>f*|4e>2|QZV^u{E+~}YVnwOn0!&dSuJ5m5)6CE9mxqvK> zhv+qkjL`D|Fs)*D3P@TQ9?;gGs`NG1eA!jy)fWqJqUIW|-7ur#=MN(~GBlu_&Kqgs}K_t!>?ayZN<~;*W+K+)mWU7fjKA65Jicpx`!Zl`^UK7@!maqQ1{Wl zak{RSlNPVEQJ`v&os)wt+qc6Q9u6f?M4Wl^UQsIwg3o@^y05nve?58>`S}IBvPh<3 z*vdBp;Rb}i|7UF6xDiUBkT~z=cZEO_fPr<2y z@-CNe$`?>lvhImVwRbmIMn>Qpgl9(}FE5uX#Lnv-P^YEB@a8KJ&$lw|1?|HRLcKT@ zN)eEFOKU&X*l~V5YI9;ibSO&m(>-K_*@;`NRy5W(c+W3hx`_2pZ@`1AR^bO_WvHvI zMQ29`mVECas0|U2XkeO$vM@9>gqG$Os^uk+i-4h`Ciyz`(a@GeZ9_L|&UW(YbWF~~ zo%s8S6DTbz#`X4g*h#{&&pUrPgpxID@b0l=*!A1rAa3D8{Cev)^!N8eowJOSX88Rp zzeD7LNGO4<YjrG13Zk_KvL7vP*6|+xtJE?ZujgpTC4R4AeSKWio=}5?0W~Tyv9%X zg^*6CLuO_sUiif?@$!xxNG4AwB__f&JcR$$)p47K`g&|2jgqr+CDu?Lynpf}nm+ji za^dxOU!M(iv{N-OGJ*RS&75|<&ND`;YG8%MN(+e;lD48<#E}#KLmR2aRXN{5dGS&j zq#DV|$(+>i@G$o<1M8eOy1V&t^vbOrsyGzJ>#TYw8+ef#GQ>Y^+O+uGXDdigRcUwh4aubA|A z&&?ZH_tcLmL_UR5$Zq*MozK)Mh_aq>5^+`rFMR$vT1j{JlNO)CRtk;hHf_SKTetAc zPk(}aRaH;|*;PeHTg+^MlCvb1zj+%N8OH#%(_HlZ9X9>5zjpPEI%(Se9U`K zO}ha*ckLpnn~&{Vw&KA4H;_RKiKoiTAqTQN&g7|1N4r$SuQ+!Rl{GbWMgh$ogJ`AZ+4PXlDXEYr;6g76k}_Oicnd#m)G*<=4Qx+ERQpXvIR5lD3`3Gj`CM4 zGd<3dZh%@lBg$rk>vKA0aXvOShW}r^il1%X%x&*qzMRjFlJ4mxZZztUo)U?|++;); zrtg8Xqzk30Vzw{F4OC!d63;;}Jdcr+#jkLIPI;lH;?JA2e2^JQ3wmUqr+ew`%CgqYEwgCSJQ zKWt{=;^MGl=gzzS;Zq--Mmq^I8!5^I2M@wvFhB`ZQh>}7MYnf_&Zd}olwD(T*KF~W zyK6ViICG%~5k@_Z{ILw*Gy)Qz4I|Vog~=K|HsR#&JT;W4*_m \ No newline at end of file