React components missing after deploying MERN app to Heroku - node.js

Question

I deployed a MERN app to Heroku (using MongoDB Atlas for database) and the home page is not rendering the login or register forms. I checked the Heroku logs for any errors and there are no errors. Also, when I inspect the elements I see the elements are there but the React components are not rendering. Only the CSS background image is rendering. Is there something off with my heroku-postbuild script? Thanks.enter image description here
Heroku app hosted at "https://glacial-gorge-15530.herokuapp.com/login". Below are my server.js and package.json files. I also added images of development vs production screenshots of the login page.
server.js
const express = require('express');
const connectDB = require('./config/db');
const path = require('path');
const app = express();
//Connect Database
connectDB();
//Init middleware
app.use(express.json({ extended: false }));
//Define routes
app.use('/api/users', require('./routes/users'));
app.use('/api/auth', require('./routes/auth'));
app.use('/api/recipes', require('./routes/recipes'));
//Serve static assets in production
if(process.env.NODE_ENV === 'production') {
//Set static folder
app.use(express.static('client/build'));
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname,'client', 'build', 'index.html')));
}
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
package.json
{
"name": "favorite-recipes-2",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"client": "0.0.1",
"config": "^3.3.1",
"create-react-app": "^3.4.1",
"express": "^4.17.1",
"express-validator": "^6.6.0",
"jsonwebtoken": "^8.5.1",
"materialize-css": "^1.0.0-rc.2",
"mongoose": "^5.9.20",
"react-transition-group": "^4.4.1"
},
"devDependencies": {
"concurrently": "^5.2.0",
"nodemon": "^2.0.4"
}
}
Screenshots of login page in production environment
Screenshots of login page in development environment

Answer 1

Your .form-container element has an opacity of 1%, which is why the elements are invisible.
.form-container {
background-color: #e7e3e3;
opacity: 1%;
}
Remove opacity: 1%.