Uniformity for MaterialUI

[MorganBergen]

I originally just used raw CSS for styling.

Is there any way to design the following modules to resemble the Main Dashboard (regarding typography) and use materialUI, yet maintaining somewhat of the same essence as the current front end version?

ForgotPassword.js, Login.js, Register.js + Login.css

Dashboard.js, Dashboard.css

Questionnaire.js + Questionnaire.css

[MorganBergen]

[MorganBergen]

here are some example templates that just have the raw default styling but maintains the same structure for the Login main page.

Login.js

```Javascript import React, { useState } from 'react'; import { useNavigate, Link } from 'react-router-dom'; import { Container, Row, Col, Form, Button, Alert } from 'react-bootstrap'; import { signIn } from '../pocketbaseService'; // Adjust the path as necessary const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [isClicked, setIsClicked] = useState(false); const navigate = useNavigate(); const handleSubmit = async (event) => { event.preventDefault(); setIsClicked(true); setError(''); if (!email || !password) { setError('Please enter both email and password.'); return; } try { const { token } = await signIn(email, password); // Destructure token from response console.log('Generated token:', token); // Log the token localStorage.setItem('token', token); // Store token in localStorage navigate('/WelcomeDashboard'); } catch (err) { setError('Login failed. Please check your credentials and try again.'); } }; return (

Clarity

Nutritional Analysis at your Fingertips

Welcome

{error && {error}}

Email address setEmail(e.target.value)} /> Password setPassword(e.target.value)} /> Login

Create an account Forgot your password?

); }; export default Login; ```

Login.css

```css .login-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; background-color: rgb(255, 255, 255); /* background: url('../../public/background.heic') no-repeat center center fixed; */ background-size: cover; } .form-column { display: flex; justify-content: center; /* Center the form container */ align-items: center; } .text-column { display: flex; justify-content: center; /* Center the text */ align-items: center; flex-direction: column; text-align: center; } .login-form-container { width: 100%; max-width: 450px; /* Slightly bigger than the original */ padding: 20px; border-radius: 15px; /* Rounded corners */ background: rgba(56, 56, 56, 0.09); /* Semi-transparent background */ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.155); /* Subtle shadow */ backdrop-filter: blur(10px); /* Blur effect */ -webkit-backdrop-filter: blur(10px); /* Safari support */ border: 1px solid rgba(255, 255, 255, 0.3); /* Border to enhance glass effect */ position: relative; /* Ensure it is above the background */ z-index: 1; /* Ensure it is above the background */ } .login-title { text-align: center; margin-bottom: 20px; color: rgb(130, 130, 130); /* Make the h2 element white */ } .login-form { margin-bottom: 15px; } .login-form-container .alert { background-color: rgba(255, 167, 167, 0.339); /* Red background with 20% opacity */ border: none; /* Red border with 30% opacity */ backdrop-filter: blur(5px); /* Blur effect */ box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2); /* Subtle shadow */ color: rgb(255, 71, 71); /* Red text color */ } .login-form-container .login-button { width: 100%; background: rgba(0, 0, 0, 0.5); color: white; /* White text */ border: none; /* Remove border */ border-radius: 5px; /* Rounded corners */ backdrop-filter: blur(5px); /* Blur effect */ -webkit-backdrop-filter: blur(5px); /* Safari support */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */ transition: background 0.3s ease; /* Smooth transition */ } .login-form-container .login-button:hover { background: rgb(75, 75, 75); } .login-form-container .form-label { color: rgb(160, 160, 160); } .login-form-container .form-control { background: rgba(255, 255, 255, 0.05); /* Semi-transparent background */ color: rgba(46, 46, 46, 0.7); /* Lighter grey placeholder text */ border: none; /* Remove border */ border-radius: 5px; /* Rounded corners */ backdrop-filter: blur(15px); /* More blur effect */ -webkit-backdrop-filter: blur(15px); /* Safari support */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */ } /* Style the placeholder text color */ .login-form-container .form-control::placeholder { color: rgba(129, 129, 129, 0.7); /* Lighter grey placeholder text */ opacity: 1; /* Ensure full opacity for Firefox */ } .login-form-container .form-control:focus { color: rgb(55, 55, 55); /* White text when focused */ } .login-form-container .small-link { font-size: 0.875em; /* Smaller font size */ color: rgb(156, 156, 156); text-decoration: none; /* Remove underline */ } .login-form-container .small-link:hover { text-decoration: underline; /* Underline on hover */ } .link-container { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; /* Add some space above the links */ } .text-container { text-align: center; } .site-title { font-size: 96px; color: rgb(65, 65, 65); } .site-subtitle { font-size: 20px; color: rgb(156, 156, 156); } ```