small adjustments to quiz and login page

src/features/auth/components/LoginForm.tsx

@@ -26,7 +26,6 @@ function LoginForm({ isLoading, onLogin, onForgotPasswordClick }: Props) {
 
       <div style={styles.passwordResetContainer}>
         <CmTypography variant="body">Forgot your password?</CmTypography>
-
         <CmButton variant="text" text="Send reset link" onClick={onForgotPasswordClick} style={{ textTransform: 'none' }} />
       </div>
 
@@ -42,7 +41,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    width: '100%',
+    width: '80vw',
+    maxWidth: 320,
   },
   textInput: {
     marginTop: 20,

src/features/quiz/components/QuizProgress.tsx

@@ -1,4 +1,3 @@
-import { useMediaQuery } from '@mui/material';
 import { CmBackButton, CmTypography } from 'shared/components';
 
 interface Props {
@@ -9,11 +8,9 @@ interface Props {
 }
 
 function QuizProgress({ onBack, currentQuestionIndex, maxQuestionIndex, alternativeText }: Props) {
-  const isSmall = useMediaQuery('(max-width: 960px)');
-
   // We only show the back button on the top for small screens. For larger screens it is beneath the question.
   // And of course we don't show it on the first question, because there's no question to go back to.
-  const showBackButtonTop = isSmall && (maxQuestionIndex - currentQuestionIndex) !== 9;
+  const showBackButtonTop =  (maxQuestionIndex - currentQuestionIndex) !== 9;
 
   // Calculate the current value of the progress bar.
   let progress = currentQuestionIndex / 10 - 0.1;

src/pages/UserAUnauthorizedPages/LoginPage.tsx

@@ -9,6 +9,7 @@ import { useMobileView } from 'shared/hooks';
 
 function LoginPage() {
   const devMode = localStorage.getItem('devMode') === 'true';
+
   const navigate = useNavigate();
   const location = useLocation();
   const isMobile = useMobileView();
@@ -50,7 +51,7 @@ function LoginPage() {
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <LoginForm isLoading={isLoading} onLogin={handleSubmit} onForgotPasswordClick={() => setShowPasswordResetModal(true)} />
-          <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
+          {devMode && <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>}
           {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />}
         </div>
 

src/pages/UserBPages/UserBLoginPage.tsx

@@ -8,6 +8,8 @@ import { useMobileView } from 'shared/hooks';
 import GoogleLogin from 'features/auth/components/GoogleLogin';
 
 function UserBLoginPage() {
+  const devMode = localStorage.getItem('devMode') === 'true';
+
   const navigate = useNavigate();
   const { conversationId } = useParams();
   const isMobile = useMobileView();
@@ -50,8 +52,8 @@ function UserBLoginPage() {
         <img src="/logos/slogan.png" alt="Climate Mind Logo" style={styles.slogan} />
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <LoginForm isLoading={isLoading} onLogin={handleSubmit} onForgotPasswordClick={() => setShowPasswordResetModal(true)} />
-          <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
-          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />
+          {devMode && <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>}
+          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />}
         </div>
         <RequestPasswordResetModal isOpen={showPasswordResetModal} onClose={() => setShowPasswordResetModal(false)} onSubmit={handlePasswordReset} />
       </PageContent>