Switch from Bootstrap 3 to Bootstrap 4

.babelrc

@@ -8,7 +8,7 @@
     [
       "babel-plugin-transform-require-ignore",
       {
-        "extensions": [".less", ".css"]
+        "extensions": [".scss", ".css"]
       }
     ]
   ],

.github/workflows/ci.yml

@@ -52,9 +52,6 @@ jobs:
 
       - name: Checkout code
         uses: actions/checkout@v2
-        with:
-          # Also check out Lobes bootstrap theme submodule
-          submodules: true
 
       # Set up the test dabatase
       - name: Set up test database in PostgreSQL

.github/workflows/jsdoc-gh-pages.yml

@@ -11,9 +11,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
-        with:
-          # Also check out Lobes bootstrap theme submodule
-          submodules: true
 
       - name: NPM install
         uses: bahmutov/npm-install@v1

.github/workflows/lint-pull-requests.yml

@@ -29,8 +29,6 @@ jobs:
         uses: actions/checkout@v2
         with:
           ref: ${{ github.event.pull_request.head.sha }}
-          # Also check out Lobes bootstrap theme submodule
-          submodules: true
 
       - name: NPM install
         uses: bahmutov/npm-install@v1

.github/workflows/lint.yml

@@ -20,9 +20,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
-        with:
-          # Also check out Lobes bootstrap theme submodule
-          submodules: true
 
       - name: NPM install
         uses: bahmutov/npm-install@v1

package.json

@@ -8,7 +8,7 @@
     "postinstall": "npm run prepublishOnly",
     "build-server-js": "babel src --out-dir lib --ignore src/api --extensions .js,.jsx,.ts,.tsx",
     "build-api-js": "babel src --out-dir lib --ignore 'src/server','src/client' --extensions .js,.jsx,.ts,.tsx",
-    "build-less": "./scripts/build-less.sh",
+    "build-scss": "./scripts/build-scss.sh",
     "build": "npm run build-client && npm run build-server-js",
     "build-client": "cross-env NODE_ENV=production webpack --progress --config webpack.client.js",
     "prestart": "npm run build",
@@ -54,17 +54,17 @@
     "influx": "^5.5.3",
     "isomorphic-dompurify": "^0.13.0",
     "jsesc": "^2.5.2",
+    "lobes4": "^4.0.0",
     "lodash": "^4.17.21",
     "log": "^6.0.0",
-    "log-node": "^8.0.2",
     "log-node": "^8.0.3",
     "morgan": "^1.10.0",
     "nodemailer": "^6.5.0",
     "passport": "^0.5.2",
     "passport-musicbrainz-oauth2": "git+https://git@github.com/LordSputnik/passport-musicbrainz-oauth2.git",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-bootstrap": "^0.33.1",
+    "react-bootstrap": "^1.6.4",
     "react-chartjs-2": "^2.11.2",
     "react-datepicker": "^2.16.0",
     "react-dom": "^16.13.1",
@@ -105,7 +105,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-require-ignore": "^0.1.1",
-    "bootstrap": "^3.4.1",
+    "bootstrap": "^4.6.1",
     "chai": "^4.0.2",
     "chai-arrays": "^2.2.0",
     "chai-as-promised": "^7.0.0",
@@ -122,12 +122,13 @@
     "eslint-webpack-plugin": "^2.4.1",
     "faker": "^4.1.0",
     "file-loader": "^6.2.0",
-    "less": "^4.1.1",
-    "less-loader": "^10.0.1",
     "mini-css-extract-plugin": "^2.5.3",
     "mocha": "^9.1.3",
     "nodemon": "^2.0.2",
+    "resolve-url-loader": "^5.0.0",
     "rewire": "^5.0.0",
+    "sass": "^1.49.0",
+    "sass-loader": "^12.4.0",
     "typescript": "^4.0.5",
     "uuid": "^8.3.2",
     "webpack": "^5.64.4",

scripts/build-scss.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+
+# specify paths for production
+if [ "$DEPLOY_ENV" == "prod" ] || [ "$DEPLOY_ENV" == "test" ]; then
+   node /home/bookbrainz/bookbrainz-site/node_modules/.bin/sass -I /home/bookbrainz/bookbrainz-site/node_modules ./src/client/stylesheets/style.scss > /home/bookbrainz/bookbrainz-site/static/stylesheets/style.css
+   exit 0
+fi
+
+mkdir -p static/stylesheets
+sass -I node_modules src/client/stylesheets/style.scss > static/stylesheets/style.css

src/client/components/footer.js

@@ -24,14 +24,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 
-const {Col, Grid, Row} = bootstrap;
+const {Col, Container, Row} = bootstrap;
 
 function Footer(props) {
 	const {repositoryUrl, siteRevision} = props;
 
 	return (
 		<footer className="footer">
-			<Grid fluid>
+			<Container fluid>
 				<Row>
 					<Col xs={4}>
 						<small>{'Tested with '}
@@ -77,7 +77,7 @@ function Footer(props) {
 						</a>
 					</small>
 				</div>
-			</Grid>
+			</Container>
 		</footer>
 	);
 }

src/client/components/forms/deletion.js

@@ -28,7 +28,7 @@ import {kebabCase as _kebabCase} from 'lodash';
 import request from 'superagent';
 
 
-const {Alert, Button, Col, Row, Panel} = bootstrap;
+const {Alert, Button, Col, Row, Card} = bootstrap;
 
 class EntityDeletionForm extends React.Component {
 	constructor(props) {
@@ -89,7 +89,7 @@ class EntityDeletionForm extends React.Component {
 		let errorComponent = null;
 		if (this.state.error) {
 			errorComponent =
-				<Alert bsStyle="danger">{this.state.error}</Alert>;
+				<Alert variant="danger">{this.state.error}</Alert>;
 		}
 
 		const loadingComponent = this.state.waiting ? <LoadingSpinner/> : null;
@@ -98,16 +98,17 @@ class EntityDeletionForm extends React.Component {
 		const footerComponent = (
 			<span className="clearfix">
 				<Button
-					bsStyle="danger"
-					className="pull-right"
+					className="float-right"
 					disabled={!hasNote}
 					type="submit"
+					variant="danger"
 				>
 					<FontAwesomeIcon icon={faTrashAlt}/> Delete
 				</Button>
 				<Button
-					className="pull-right"
+					className="float-right"
 					href={this.entityUrl}
+					variant="secondary"
 				>
 					<FontAwesomeIcon icon={faTimesCircle}/> Cancel
 				</Button>
@@ -128,19 +129,15 @@ class EntityDeletionForm extends React.Component {
 				<h1>Delete Entity</h1>
 				<Row className="margin-top-2">
 					{loadingComponent}
-					<Col md={6} mdOffset={3}>
+					<Col lg={{offset: 3, span: 6}}>
 						<form onSubmit={this.handleSubmit}>
-							<Panel
-								bsStyle="danger"
-							>
-								<Panel.Heading>
-									<Panel.Title componentClass="h3">
-										Confirm Deletion
-									</Panel.Title>
-								</Panel.Heading>
-								<Panel.Body>
-
-									<Alert bsStyle="warning">
+							<Card bg="danger">
+								<Card.Header as="h4">
+									Confirm Deletion
+								</Card.Header>
+								<Card.Body>
+
+									<Alert variant="warning">
 										<h4>
 											<FontAwesomeIcon icon={faExclamationTriangle}/>&nbsp;
 											You’re about to delete the {entity.type} {entityName}.
@@ -188,11 +185,11 @@ class EntityDeletionForm extends React.Component {
 										onChange={this.handleNoteChange}
 									/>
 									{errorComponent}
-								</Panel.Body>
-								<Panel.Footer>
+								</Card.Body>
+								<Card.Footer>
 									{footerComponent}
-								</Panel.Footer>
-							</Panel>
+								</Card.Footer>
+							</Card>
 						</form>
 					</Col>
 				</Row>

src/client/components/forms/parts/achievement.js

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 
-const {Col} = bootstrap;
+const {Card, Col, Container, Row} = bootstrap;
 
 class Achievement extends React.Component {
 	constructor(props) {
@@ -57,17 +57,21 @@ class Achievement extends React.Component {
 			);
 		}
 		return (
-			<div className="row well">
-				<Col sm={2}>
-					{imgElement}
-				</Col>
-				<Col sm={8}>
-					<div className="h2">
-						{this.state.achievement.name}
-					</div>
-					<p>{this.state.achievement.description}</p>
-				</Col>
-			</div>
+			<Card bg="light">
+				<Container fluid>
+					<Row>
+						<Col md={2}>
+							{imgElement}
+						</Col>
+						<Col md={8}>
+							<div className="h2">
+								{this.state.achievement.name}
+							</div>
+							<p>{this.state.achievement.description}</p>
+						</Col>
+					</Row>
+				</Container>
+			</Card>
 		);
 	}
 }

src/client/components/forms/profile.js

@@ -30,7 +30,7 @@ import SelectWrapper from '../input/select-wrapper';
 import ValidationLabel from '../../entity-editor/common/validation-label';
 
 
-const {Alert, Button, Col, Panel, Row} = bootstrap;
+const {Alert, Button, Col, Card, Row} = bootstrap;
 const {injectDefaultAliasName} = utilsHelper;
 
 class ProfileForm extends React.Component {
@@ -140,7 +140,7 @@ class ProfileForm extends React.Component {
 		let errorComponent = null;
 		if (this.state.error) {
 			errorComponent =
-				<Alert bsStyle="danger">{this.state.error.message}</Alert>;
+				<Alert variant="danger">{this.state.error.message}</Alert>;
 		}
 
 		const hasChanged = this.hasChanged();
@@ -155,15 +155,13 @@ class ProfileForm extends React.Component {
 			<div>
 				<Row className="margin-top-2">
 					{loadingElement}
-					<Col md={8} mdOffset={2}>
+					<Col lg={{offset: 2, span: 8}}>
 						<form onSubmit={this.handleSubmit}>
-							<Panel>
-								<Panel.Heading>
-									<Panel.Title>
-										<span className="h3">Edit your public profile</span>
-									</Panel.Title>
-								</Panel.Heading>
-								<Panel.Body>
+							<Card>
+								<Card.Header as="h3">
+									Edit your public profile
+								</Card.Header>
+								<Card.Body>
 									<CustomInput
 										defaultValue={name}
 										help="required"
@@ -213,17 +211,17 @@ class ProfileForm extends React.Component {
 										onChange={this.handleSelectChange}
 									/>
 									{errorComponent}
-								</Panel.Body>
-								<Panel.Footer>
+								</Card.Body>
+								<Card.Footer>
 									<Button
-										bsStyle="success"
 										disabled={!hasChanged}
 										type="submit"
+										variant="success"
 									>
 										Save changes
 									</Button>
-								</Panel.Footer>
-							</Panel>
+								</Card.Footer>
+							</Card>
 						</form>
 					</Col>
 				</Row>