diff --git a/newStyle.css b/newStyle.css deleted file mode 100644 index e025aeb..0000000 --- a/newStyle.css +++ /dev/null @@ -1,506 +0,0 @@ -.ReactTable { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - border: 1px solid rgba(0, 0, 0, 0.1); -} - -.ReactTable * { - box-sizing: border-box; -} - -.ReactTable .rt-table { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - width: 100%; - border-collapse: collapse; - overflow: auto; -} - -.ReactTable .rt-thead { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ReactTable .rt-thead.-headerGroups { - background: rgba(0, 0, 255, 0.3); - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-thead.-filters { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-thead.-filters .rt-th { - border-right: 1px solid rgba(0, 0, 0, 0.02); -} - -.ReactTable .rt-thead.-header { - box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.15); -} - -.ReactTable .rt-thead .rt-tr { - text-align: center; -} - -.ReactTable .rt-thead .rt-th, -.ReactTable .rt-thead .rt-td { - padding: 5px 5px; - line-height: normal; - position: relative; - border-right: 1px solid rgba(0, 0, 0, 0.05); - -webkit-transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - box-shadow: inset 0 0 0 0 transparent; -} - -.ReactTable .rt-thead .rt-th.-sort-asc, -.ReactTable .rt-thead .rt-td.-sort-asc { - box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.6); -} - -.ReactTable .rt-thead .rt-th.-sort-desc, -.ReactTable .rt-thead .rt-td.-sort-desc { - box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.6); -} - -.ReactTable .rt-thead .rt-th.-cursor-pointer, -.ReactTable .rt-thead .rt-td.-cursor-pointer { - cursor: pointer; -} - -.ReactTable .rt-thead .rt-th:last-child, -.ReactTable .rt-thead .rt-td:last-child { - border-right: 0; -} - -.ReactTable .rt-thead .rt-resizable-header { - overflow: visible; -} - -.ReactTable .rt-thead .rt-resizable-header:last-child { - overflow: hidden; -} - -.ReactTable .rt-thead .rt-resizable-header-content { - overflow: hidden; - text-overflow: ellipsis; -} - -.ReactTable .rt-thead .rt-header-pivot { - border-right-color: #f7f7f7; -} - -.ReactTable .rt-thead .rt-header-pivot:after, -.ReactTable .rt-thead .rt-header-pivot:before { - left: 100%; - top: 50%; - border: solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.ReactTable .rt-thead .rt-header-pivot:after { - border-color: rgba(255, 255, 255, 0); - border-left-color: #fff; - border-width: 8px; - margin-top: -8px; -} - -.ReactTable .rt-thead .rt-header-pivot:before { - border-color: rgba(102, 102, 102, 0); - border-left-color: #f7f7f7; - border-width: 10px; - margin-top: -10px; -} - -.ReactTable .rt-tbody { - -webkit-box-flex: 99999; - -ms-flex: 99999 1 auto; - flex: 99999 1 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - overflow: auto; -} - -.ReactTable .rt-tbody .rt-tr-group { - border-bottom: solid 1px rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-tbody .rt-tr-group:last-child { - border-bottom: 0; -} - -.ReactTable .rt-tbody .rt-td { - border-right: 1px solid rgba(0, 0, 0, 0.02); -} - -.ReactTable .rt-tbody .rt-td:last-child { - border-right: 0; -} - -.ReactTable .rt-tbody .rt-expandable { - cursor: pointer; -} - -.ReactTable .rt-tr-group { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; -} - -.ReactTable .rt-tr { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.ReactTable .rt-th, -.ReactTable .rt-td { - -webkit-box-flex: 1; - -ms-flex: 1 0 0px; - flex: 1 0 0; - white-space: nowrap; - text-overflow: ellipsis; - padding: 7px 5px; - overflow: hidden; - -webkit-transition: 0.3s ease; - transition: 0.3s ease; - -webkit-transition-property: width, min-width, padding, opacity; - transition-property: width, min-width, padding, opacity; -} - -.ReactTable .rt-th.-hidden, -.ReactTable .rt-td.-hidden { - width: 0 !important; - min-width: 0 !important; - padding: 0 !important; - border: 0 !important; - opacity: 0 !important; -} - -.ReactTable .rt-expander { - display: inline-block; - position: relative; - margin: 0; - color: transparent; - margin: 0 10px; -} - -.ReactTable .rt-expander:after { - content: ''; - position: absolute; - width: 0; - height: 0; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%) rotate(-90deg); - transform: translate(-50%, -50%) rotate(-90deg); - border-left: 5.04px solid transparent; - border-right: 5.04px solid transparent; - border-top: 7px solid rgba(0, 0, 0, 0.8); - -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - cursor: pointer; -} - -.ReactTable .rt-expander.-open:after { - -webkit-transform: translate(-50%, -50%) rotate(0); - transform: translate(-50%, -50%) rotate(0); -} - -.ReactTable .rt-resizer { - display: inline-block; - position: absolute; - width: 36px; - top: 0; - bottom: 0; - right: -18px; - cursor: col-resize; - z-index: 10; -} - -.ReactTable .rt-tfoot { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); -} - -.ReactTable .rt-tfoot .rt-td { - border-right: 1px solid rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-tfoot .rt-td:last-child { - border-right: 0; -} - -.ReactTable.-striped .rt-tr.-odd { - background: rgba(0, 0, 0, 0.03); -} - -.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover { - background: rgba(0, 0, 0, 0.05); -} - -.ReactTable .-pagination { - z-index: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: 3px; - box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); - border-top: 2px solid rgba(0, 0, 0, 0.1); -} - -.ReactTable .-pagination .-btn { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: block; - width: 100%; - height: 100%; - border: 0; - border-radius: 3px; - padding: 6px; - font-size: 1em; - color: rgba(0, 0, 0, 0.6); - background: rgba(0, 0, 0, 0.1); - -webkit-transition: all 0.1s ease; - transition: all 0.1s ease; - cursor: pointer; - outline: none; -} - -.ReactTable .-pagination .-btn[disabled] { - opacity: 0.5; - cursor: default; -} - -.ReactTable .-pagination .-btn:not([disabled]):hover { - background: rgba(0, 0, 0, 0.3); - color: #fff; -} - -.ReactTable .-pagination .-previous, -.ReactTable .-pagination .-next { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; -} - -.ReactTable .-pagination .-center { - -webkit-box-flex: 1.5; - -ms-flex: 1.5; - flex: 1.5; - text-align: center; - margin-bottom: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: distribute; - justify-content: space-around; -} - -.ReactTable .-pagination .-pageInfo { - display: inline-block; - margin: 3px 10px; - white-space: nowrap; -} - -.ReactTable .-pagination .-pageJump { - display: inline-block; -} - -.ReactTable .-pagination .-pageJump input { - width: 70px; - text-align: center; -} - -.ReactTable .-pagination .-pageSizeOptions { - margin: 3px 10px; -} - -.ReactTable .rt-noData { - display: block; - position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - background: rgba(255, 255, 255, 0.8); - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; - z-index: 1; - pointer-events: none; - padding: 20px; - color: rgba(0, 0, 0, 0.5); -} - -.ReactTable .-loading { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.8); - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; - z-index: -1; - opacity: 0; - pointer-events: none; -} - -.ReactTable .-loading > div { - position: absolute; - display: block; - text-align: center; - width: 100%; - top: 50%; - left: 0; - font-size: 15px; - color: rgba(0, 0, 0, 0.6); - -webkit-transform: translateY(-52%); - transform: translateY(-52%); - -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -.ReactTable .-loading.-active { - opacity: 1; - z-index: 2; - pointer-events: all; -} - -.ReactTable .-loading.-active > div { - -webkit-transform: translateY(50%); - transform: translateY(50%); -} - -.ReactTable input, -.ReactTable select { - border: 1px solid rgba(0, 0, 0, 0.1); - background: #fff; - padding: 5px 7px; - font-size: inherit; - border-radius: 3px; - font-weight: normal; - outline: none; -} - -.ReactTable input:not([type='checkbox']):not([type='radio']), -.ReactTable select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.ReactTable input:not([type='checkbox']):not([type='radio'])::-ms-expand, -.ReactTable select::-ms-expand { - display: none; -} - -.ReactTable .select-wrap { - position: relative; - display: inline-block; -} - -.ReactTable .select-wrap select { - padding: 5px 15px 5px 7px; - min-width: 100px; -} - -.ReactTable .select-wrap:after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); - border-color: #999 transparent transparent; - border-style: solid; - border-width: 5px 5px 2.5px; -} - -.ReactTable .rt-resizing .rt-th, -.ReactTable .rt-resizing .rt-td { - -webkit-transition: none !important; - transition: none !important; - cursor: col-resize; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} diff --git a/package-lock.json b/package-lock.json index 409ab2e..8995d44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,20 +14,17 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@reduxjs/toolkit": "^2.0.1", "bootstrap": "^5.3.2", - "brown-university-styles": "git+https://github.com/BrownUniversity/brown-university-styles.git", "firebase": "^10.7.2", "formik": "^2.4.5", "lodash": "^4.17.11", "react": "^18.2.0", - "react-bootstrap": "^2.9.2", - "react-bulma-components": "^4.1.0", + "react-bootstrap": "^2.10.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.21.2", "react-scripts": "^5.0.1", "react-spinners": "^0.13.8", "react-table": "^6.10.0", - "reactstrap": "^9.2.1", "redux": "^5.0.1", "sass": "^1.69.7", "seamless-immutable": "^7.1.4", @@ -8056,10 +8053,6 @@ "node": ">=8" } }, - "node_modules/brown-university-styles": { - "version": "0.12.0", - "resolved": "git+ssh://git@github.com/BrownUniversity/brown-university-styles.git#a4267e016ec98027b97a153b2043629a84227882" - }, "node_modules/browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -8141,12 +8134,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/bulma": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", - "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==", - "peer": true - }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -23712,9 +23699,9 @@ } }, "node_modules/react-bootstrap": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.2.tgz", - "integrity": "sha512-a36B+EHsAI/aH+ZhXNILBFnqscE3zr10dWmjBmfhIb2QR7KSXJiGzYd6Faf/25G8G7/CP9TCL2B0WhUBOD2UBQ==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.0.tgz", + "integrity": "sha512-87gRP69VAfeU2yKgp8RI3HvzhPNrnYIV2QNranYXataz3ef+k7OhvKGGdxQLQfUsQ2RTmlY66tn4pdFrZ94hNg==", "dependencies": { "@babel/runtime": "^7.22.5", "@restart/hooks": "^0.4.9", @@ -23745,20 +23732,6 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, - "node_modules/react-bulma-components": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/react-bulma-components/-/react-bulma-components-4.1.0.tgz", - "integrity": "sha512-keETQwNOBidiX1nrwBPsfcQBQbOQHXB9yQvjNpebdZgzqpcU07wKyxDwFQhHAsNK+YrsppSACQPKZSYqIlX0iw==", - "dependencies": { - "classnames": "2.3.1" - }, - "peerDependencies": { - "bulma": ">=0.9.2", - "prop-types": ">=15.6.0", - "react": ">=16.3.0", - "react-dom": ">=16.3.0" - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -23928,11 +23901,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, - "node_modules/react-fast-compare": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -23943,20 +23911,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "node_modules/react-popper": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", - "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-redux": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", @@ -24177,23 +24131,6 @@ "react-dom": ">=16.6.0" } }, - "node_modules/reactstrap": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.1.tgz", - "integrity": "sha512-3d+jo7EEw1GxobrSeTjs+Vq1SNrMnRTcwKp3/t1ufrceTLFHS6LpAck4eLKlzvgQgTpSJpLeJtVQKSqkxbHTiQ==", - "dependencies": { - "@babel/runtime": "^7.12.5", - "@popperjs/core": "^2.6.0", - "classnames": "^2.2.3", - "prop-types": "^15.5.8", - "react-popper": "^2.2.4", - "react-transition-group": "^4.4.2" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -35490,10 +35427,6 @@ "fill-range": "^7.0.1" } }, - "brown-university-styles": { - "version": "git+ssh://git@github.com/BrownUniversity/brown-university-styles.git#a4267e016ec98027b97a153b2043629a84227882", - "from": "brown-university-styles@git+https://github.com/BrownUniversity/brown-university-styles.git" - }, "browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -35546,12 +35479,6 @@ "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==" }, - "bulma": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", - "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==", - "peer": true - }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -46999,9 +46926,9 @@ } }, "react-bootstrap": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.2.tgz", - "integrity": "sha512-a36B+EHsAI/aH+ZhXNILBFnqscE3zr10dWmjBmfhIb2QR7KSXJiGzYd6Faf/25G8G7/CP9TCL2B0WhUBOD2UBQ==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.0.tgz", + "integrity": "sha512-87gRP69VAfeU2yKgp8RI3HvzhPNrnYIV2QNranYXataz3ef+k7OhvKGGdxQLQfUsQ2RTmlY66tn4pdFrZ94hNg==", "requires": { "@babel/runtime": "^7.22.5", "@restart/hooks": "^0.4.9", @@ -47024,14 +46951,6 @@ } } }, - "react-bulma-components": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/react-bulma-components/-/react-bulma-components-4.1.0.tgz", - "integrity": "sha512-keETQwNOBidiX1nrwBPsfcQBQbOQHXB9yQvjNpebdZgzqpcU07wKyxDwFQhHAsNK+YrsppSACQPKZSYqIlX0iw==", - "requires": { - "classnames": "2.3.1" - } - }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -47160,11 +47079,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, - "react-fast-compare": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -47175,15 +47089,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "react-popper": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", - "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", - "requires": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - } - }, "react-redux": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", @@ -47337,19 +47242,6 @@ "prop-types": "^15.6.2" } }, - "reactstrap": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.1.tgz", - "integrity": "sha512-3d+jo7EEw1GxobrSeTjs+Vq1SNrMnRTcwKp3/t1ufrceTLFHS6LpAck4eLKlzvgQgTpSJpLeJtVQKSqkxbHTiQ==", - "requires": { - "@babel/runtime": "^7.12.5", - "@popperjs/core": "^2.6.0", - "classnames": "^2.2.3", - "prop-types": "^15.5.8", - "react-popper": "^2.2.4", - "react-transition-group": "^4.4.2" - } - }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 15fb8f7..e24cdf0 100644 --- a/package.json +++ b/package.json @@ -19,20 +19,17 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@reduxjs/toolkit": "^2.0.1", "bootstrap": "^5.3.2", - "brown-university-styles": "git+https://github.com/BrownUniversity/brown-university-styles.git", "firebase": "^10.7.2", "formik": "^2.4.5", "lodash": "^4.17.11", "react": "^18.2.0", - "react-bootstrap": "^2.9.2", - "react-bulma-components": "^4.1.0", + "react-bootstrap": "^2.10.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.21.2", "react-scripts": "^5.0.1", "react-spinners": "^0.13.8", "react-table": "^6.10.0", - "reactstrap": "^9.2.1", "redux": "^5.0.1", "sass": "^1.69.7", "seamless-immutable": "^7.1.4", diff --git a/src/App.js b/src/App.js index 3d6fe45..f3a207a 100755 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,13 @@ import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; -import Navbar from './components/react-ccv-components/Navbar'; +import { Navbar } from './components/react-ccv-components/Navbar.tsx'; import Footer from './components/react-ccv-components/Footer'; import { ContentPage } from './components/ContentPage'; -import { usePublicationsCollection } from './utils/firebase.ts'; +import { useAuthStateChanged, usePublicationsCollection } from './utils/firebase.ts'; export function App() { + useAuthStateChanged(); usePublicationsCollection(); return ( diff --git a/src/components/ContentPage.jsx b/src/components/ContentPage.jsx index b3ccb86..5898eca 100755 --- a/src/components/ContentPage.jsx +++ b/src/components/ContentPage.jsx @@ -4,19 +4,22 @@ import { faBook } from '@fortawesome/free-solid-svg-icons'; // import YearChart from "./YearChart"; // import WordCloud from "./WordCloud"; import { useSelector } from 'react-redux'; -import { selectPublications } from '../store/slice/appState'; +import { selectPublications, selectUser } from '../store/slice/appState'; import { PubsTable } from './PubsTable'; import Spinner from './Spinner'; import { AddPublicationModal } from './AddPublicationModal.tsx'; export function ContentPage() { const publications = useSelector(selectPublications); + const user = useSelector(selectUser); return (
-
- -
+ {user ? ( +
+ +
+ ) : null}
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx new file mode 100644 index 0000000..073dfd8 --- /dev/null +++ b/src/components/LoginButton.tsx @@ -0,0 +1,12 @@ +import { Button, ButtonProps } from 'react-bootstrap'; +import { handleLogin } from '../utils/firebase.ts'; + +type LoginButtonProps = ButtonProps; + +export const LoginButton = ({ ...buttonProps }: LoginButtonProps) => { + return ( + + ); +}; diff --git a/src/components/react-ccv-components/Navbar.js b/src/components/react-ccv-components/Navbar.js deleted file mode 100644 index fad7a58..0000000 --- a/src/components/react-ccv-components/Navbar.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { ReactComponent as CCVLogo } from './assets/svg/ccv-logo.svg'; -import { ReactComponent as BrownLogo } from './assets/svg/brown-logo.svg'; -import '../../styles/custom.scss'; - -const Navbar = () => ( -
- - - - - - -
-); - -export default Navbar; diff --git a/src/components/react-ccv-components/Navbar.tsx b/src/components/react-ccv-components/Navbar.tsx new file mode 100644 index 0000000..eb885fc --- /dev/null +++ b/src/components/react-ccv-components/Navbar.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import Container from 'react-bootstrap/Container'; +import { Nav, Navbar as DefaultNavbar, NavDropdown } from 'react-bootstrap'; +import { useSelector } from 'react-redux'; +import { faUser } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { handleLogin, handleLogout } from '../../utils/firebase.ts'; +import { selectUser } from '../../store/slice/appState'; +import { ReactComponent as CCVLogo } from './assets/svg/ccv-logo.svg'; +import { ReactComponent as BrownLogo } from './assets/svg/brown-logo.svg'; + +export const Navbar = () => { + const user = useSelector(selectUser); + + return ( + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/react-ccv-components/assets/svg/ccv-logo.svg b/src/components/react-ccv-components/assets/svg/ccv-logo.svg index a2923b8..5ae0d45 100644 --- a/src/components/react-ccv-components/assets/svg/ccv-logo.svg +++ b/src/components/react-ccv-components/assets/svg/ccv-logo.svg @@ -1,48 +1,24 @@ diff --git a/src/store/slice/appState.js b/src/store/slice/appState.js index fdf1e26..8490cb7 100644 --- a/src/store/slice/appState.js +++ b/src/store/slice/appState.js @@ -4,15 +4,20 @@ export const appStateSlice = createSlice({ name: 'appState', initialState: { publications: [], + user: null, }, reducers: { setPublications: (state, action) => { state.publications = action.payload; }, + setUser: (state, action) => { + state.user = action.payload; + }, }, }); -export const { setPublications } = appStateSlice.actions; +export const { setPublications, setUser } = appStateSlice.actions; export const selectPublications = (state) => state.publications; +export const selectUser = (state) => state.user; export default appStateSlice.reducer; diff --git a/src/styles/components/_addPub.scss b/src/styles/components/_addPub.scss index 9ba1400..4b2758f 100644 --- a/src/styles/components/_addPub.scss +++ b/src/styles/components/_addPub.scss @@ -32,34 +32,3 @@ color: white; font-family: Circular-Book, Arial, Helvetica, sans-serif !important; } - -.navbar { - font-family: Circular-Book, Arial, Helvetica, sans-serif !important; - //align-items: center; - //text-align: center !important; - //display: inline-block !important; - width: 100%; -} - -.navbar-brand { - color: white !important; - display: inline-block !important; -} - -.container { - align-items: center !important; - display: inline-block !important; - width: 100%; - margin-left: 95px; -} - -.btn-outline-primary { - border-color: white; - color: white; -} - -.navbar-brand-custom { - width: 100% !important; - text-align: center !important; - margin-left: 92px !important; -} diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss deleted file mode 100755 index f49200e..0000000 --- a/src/styles/components/_navbar.scss +++ /dev/null @@ -1,23 +0,0 @@ -.brown-nav { - box-shadow: 1px 1px 1px $gray-200; - .brown-logo-color { - height: 50px; - margin-right: 1rem; - margin-left: 3rem; - } - .ccv-logo { - height: 40px; - .c1 { - fill: $yellow; - fill-opacity: 1; - } - .c2 { - fill: $green; - fill-opacity: 1; - } - .v { - fill: $yellow; - fill-opacity: 1; - } - } -} diff --git a/src/styles/custom.scss b/src/styles/custom.scss index 7ad42f6..c61470f 100755 --- a/src/styles/custom.scss +++ b/src/styles/custom.scss @@ -1,12 +1,10 @@ // Import Bootstrap @import '~bootstrap/scss/bootstrap.scss'; -@import '~brown-university-styles/dist/styles.css'; // Override Bootstrap Variables @import 'variables'; // Import Custom Components -@import './src/styles/components/_navbar.scss'; @import './src/styles/components/_brown_fonts.scss'; @import './src/styles/components/_brown_icons.scss'; @import './src/styles/components/_brown_footer.scss'; diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts index 88a5c8f..a06d1a4 100644 --- a/src/utils/firebase.ts +++ b/src/utils/firebase.ts @@ -1,3 +1,5 @@ +import { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; import { initializeApp } from 'firebase/app'; import { getFirestore, @@ -9,10 +11,15 @@ import { limit, orderBy, } from 'firebase/firestore'; -import { useDispatch } from 'react-redux'; -import { useEffect } from 'react'; +import { + getAuth, + GoogleAuthProvider, + onAuthStateChanged, + signInWithPopup, + signOut, +} from 'firebase/auth'; -import { setPublications } from '../store/slice/appState'; +import { setPublications, setUser } from '../store/slice/appState'; const firebaseConfig = { apiKey: 'AIzaSyBlu1GzA5jvM6mh6taIcjtNgcSEVxlxa1Q', @@ -26,9 +33,59 @@ const firebaseConfig = { // Initialize Firebase const app = initializeApp(firebaseConfig); const db = getFirestore(app); +const auth = getAuth(); +const provider = new GoogleAuthProvider(); +provider.setCustomParameters({ + hd: 'brown.edu', +}); const collectionName = 'publications'; +export const handleLogin = async () => { + try { + await signInWithPopup(auth, provider); + } catch (error) { + console.log(error); + } +}; + +export const handleLogout = async () => { + try { + await signOut(auth); + } catch (error) { + console.log(error); + } +}; + +/** + * Custom Reach hook to subscribe to Authentication changes + */ +export const useAuthStateChanged = () => { + const dispatch = useDispatch(); + + useEffect(() => { + const unsubscribe = onAuthStateChanged(auth, (user) => { + if (user) { + const { displayName, email, uid } = user; + + dispatch( + setUser({ + displayName, + email, + uid, + }) + ); + } else { + dispatch(setUser(null)); + } + }); + + return () => { + unsubscribe(); + }; + }, [dispatch]); +}; + /** * Custom React hook to subscribe to a Firestore collection and update the Redux store with the fetched data. */