Bring dependencies up to date

README.md

@@ -59,7 +59,7 @@ scp -r build/* clusty:/srv/www/phoebe-project/
 
 * Icons: [font-awesome (free, v5.5.0)](https://fontawesome.com/icons?d=gallery&m=free) are used throughout the site and should be used by adding the necessary classes (via `className`) to the `<span>` tags (or in some cases passing by passing the classes to the `icon` property of a built-in component).
 
-* Bootstrap Components: [bootstrap (v3.3.5)](https://getbootstrap.com/docs/3.3/) is currently loaded by [index.html](./src/index.html) from [bootstrap.min.paper.css](./public/bootstrap.min.paper.css) and [bootstrap.min.js](./public/bootstrap.min.js) (which in turn requires [jquery](./public/jquery.min.js) to handle the collapsing navigation bar).  For alerts, use the built-in `Alert` class in [common.jsx](./src/common.jsx).  Any style changes should be overridden by [App.css](./src/App.css) (with `!important` if necessary) rather than editing the css of bootstrap directly.
+* Bootstrap Components: [bootstrap (v5.3.3)](https://getbootstrap.com/) is currently loaded by [index.html](./public/index.html) from [bootstrap.min.css](./public/cssjs/bootstrap.min.paper.css) and [bootstrap.bundle.min.js](./public/cssjs/bootstrap.bundle.min.js) For alerts, use the built-in `Alert` class in [common.jsx](./src/common.jsx).  Any style changes should be overridden by [App.css](./src/App.css) (with `!important` if necessary) rather than editing the css of bootstrap directly.
 
 * In general, each tab in the navigation bar has its own .jsx file in the [src](./src/) directory and exports the components required to [App.js](./src/App.js) which handles all routing.  
 

package.json

@@ -1,22 +1,28 @@
 {
   "name": "phoebe-project",
-  "version": "1.0.0",
-  "homepage": "http://phoebe-project.org",
+  "version": "1.1.0",
+  "homepage": "https://phoebe-project.org",
   "private": true,
+  "contributors": ["Kyle Conroy", "Matthias Fabry"],
   "dependencies": {
-    "@nteract/notebook-preview": "^10.0.3",
-    "abortcontroller-polyfill": "^1.3.0",
+    "abortcontroller-polyfill": "^1.7.5",
     "babel-polyfill": "^6.26.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.2.0",
-    "react-event-listener": "^0.6.4",
-    "react-helmet": "^5.2.0",
-    "react-markdown": "^4.0.3",
-    "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.4",
-    "react-select": "^3.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.26.2",
+    "react-bootstrap": "^2.10.5",
+    "react-select": "^5.8.1",
     "smoothscroll": "^0.4.0",
-    "whatwg-fetch": "^3.0.0"
+    "whatwg-fetch": "^3.6.20",
+    "react-ipynb-renderer": "^2.2.4-1"
+  },
+  "devDependencies": {
+    "gh-pages": "^6.1.1",
+    "source-map-explorer": "^2.5.3",
+    "react-scripts": "^5.0.1",
+    "@babel/plugin-proposal-private-property-in-object" : "^7.21.11"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -25,8 +31,16 @@
     "predeploy": "npm run build",
     "deploy": "npm run build && scp -r build/* clusty:/srv/www/phoebe-project-new/"
   },
-  "devDependencies": {
-    "gh-pages": "^2.0.1",
-    "source-map-explorer": "^1.6.0"
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/index.html

@@ -27,16 +27,12 @@
     <meta name="google-site-verification" content="KdbJKcDqw9aRho_5eVeUgBq1FzXVpsI6xgiUB2JA_6s" />
 
 
-    <link href="%PUBLIC_URL%/cssjs/bootstrap.min.paper.css" rel="stylesheet">
-    <script src="https://kit.fontawesome.com/4865405bdb.js" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">    <script src="https://kit.fontawesome.com/4865405bdb.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">
 
     <link href="https://fonts.googleapis.com/css?family=Merriweather:900,400" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
 
-    <script src="%PUBLIC_URL%/cssjs/jquery.min.js"></script>
-    <script src="%PUBLIC_URL%/cssjs/bootstrap.min.js"></script>
-
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-62523357-1"></script>
     <script>

src/App.css

@@ -25,9 +25,6 @@ img {
 }
 
 .img-flip-vert {
-        -moz-transform: scaleY(-1);
-        -o-transform: scaleY(-1);
-        -webkit-transform: scaleY(-1);
         transform: scaleY(-1);
         filter: FlipV;
         -ms-filter: "FlipV";
@@ -111,6 +108,7 @@ summary {
 
 .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
   max-height: 500px;
+  overflow: visible;
 }
 
 .navbar-transparent .navbar-toggle > .icon-bar {
@@ -144,9 +142,6 @@ summary {
 
 .navbar-transparent .dropdown-menu{
   background-color: #2B71B1;
-}
-
-.navbar-transparent .navbar-nav > li > a{
   color: #E6E6E6;
 }
 
@@ -230,15 +225,14 @@ summary {
   color: #D6D6D6 !important;
   border-width: 1px;
   border-color: #D6D6D6 !important;
-  border: 1px solid;
   box-shadow: none;
 }
 
 .btn-transparent:hover {
   text-decoration: none;
   color: #ffffff !important;
   border-color: #ffffff !important;
-  border-width: 1.2px;
+  border-width: 1px;
 }
 
 .btn-transparent-light {
@@ -278,7 +272,7 @@ summary {
 }
 
 .jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron p{
-  align: left;
+  /*align: left;*/
   color: #E6E6E6;
   font-family: 'Merriweather', serif;
 }
@@ -370,7 +364,20 @@ a.news-permalink {
     /* display vertically instead of horizontally */
     display: inline-grid !important;
   }
-
+  .visible-xs {
+    display: block !important;
+  }
+  .hidden-xs {
+    display: none !important;
+  }
 }
 
-/* OTHER */
+@media screen and (min-width: 768px) {
+  .hidden-xs {
+    display: block !important;
+  }
+
+  .visible-xs {
+    display: none !important;
+  }
+}