Fix usability

webapp/src/components/AddUser/AddUser.js

@@ -108,20 +108,16 @@ const AddUser = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField password={password} setPassword={setPassword} />
+        <PasswordField id="password" name="password" placeholder={t("register.password_placeholder")} password={password} setPassword={setPassword} />
 
         <PasswordStrengthBar password={password} shortScoreWord={t("register.strength.very_week")} scoreWords={strengthWords} minLength={8} />
 
         <p className="form-error">{formErrors.password}</p>
-        <input
-          type="password"
-          name="repeatPassword"
-          id="repeatPassword"
-          placeholder={t("register.password_confirm_placeholder")}
-          onChange={e => setRepeatPassword(e.target.value)}
-          value={repeatPassword}
-        />
+
+        <PasswordField id="repeatPassword" name="repeatPassword" placeholder={t("register.password_confirm_placeholder")} password={repeatPassword} setPassword={setRepeatPassword} />
+
         <p className="form-error">{formErrors.repeatPassword}</p>
+
         <button className="button-common">{t("register.button")}</button>
       </form>
       <Link to="/login">{t("register.go_login")}</Link>

webapp/src/components/Login/Login.js

@@ -87,7 +87,7 @@ const Login = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField password={password} setPassword={setPassword} />
+        <PasswordField id="password" name="password" placeholder={t("login.password_placeholder")} password={password} setPassword={setPassword} />
 
         <p className="form-error">{formErrors.password}</p>
         <button className="button-common" onClick={loginHandler}>

webapp/src/components/PasswordField/PasswordField.js

@@ -5,19 +5,17 @@ import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 
 import './PasswordField.css'
 
-import { useTranslation } from "react-i18next";
-const PasswordField = ({ password, setPassword }) => {
+const PasswordField = ({ id, name, placeholder, password, setPassword }) => {
 
     const [showPassword, setShowPassword] = useState(false);
-    const { t } = useTranslation();
 
     return (
         <div className="input-box">
             <input
                 type={showPassword ? "text" : "password"}
-                name="password"
-                id="password"
-                placeholder={t("register.password_placeholder")}
+                name={name}
+                id={id}
+                placeholder={placeholder}
                 onChange={e => setPassword(e.target.value)}
                 value={password}
             />

webapp/src/components/Quiz/Question.css

@@ -39,15 +39,29 @@
     padding: 60px;
     font-size: 20px;
   }
+
+
+}
+
+@media (min-width: 400px) {
+  .quiz-image img {
+    width: 250px;
+  }
 }
 
+@media (max-width: 400px) {
+  .quiz-image img {
+    width: 195px;
+  }
+}
+
+
+
 .question-text {
   margin-bottom: 20px;
 }
 
 .quiz-image img {
-  max-width: 100%;
-  width: 20%;
   border-radius: 10px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

webapp/src/components/test/Login.test.js

@@ -22,7 +22,7 @@ i18n.init({
     en: {
       translation: {
         'login.username_placeholder': 'Username',
-        'register.password_placeholder': 'Password',
+        'login.password_placeholder': 'Password',
         'login.button': 'Login',
         'login.welcome':
           'Welcome to Know and Win App, please login to procceed',

webapp/src/components/test/PasswordField.test.js

@@ -26,24 +26,24 @@ const renderPasswordField = _ =>
     render(
         <MemoryRouter>
             <I18nextProvider i18n={i18n}>
-                <PasswordField password="12345678" setPassword={() => {}} />
+                <PasswordField id="password" name="password" placeholder={"placeholder"} password="12345678" setPassword={() => { }} />
             </I18nextProvider>
         </MemoryRouter>
     )
 
 
 describe('password field tests', () => {
-   
+
     test('hide password', () => {
         renderPasswordField()
-        const inputElement = screen.getByPlaceholderText('Password')
+        const inputElement = screen.getByPlaceholderText('placeholder')
         expect(inputElement).toHaveAttribute('type', 'password')
     })
 
     test('show password', () => {
         renderPasswordField()
         fireEvent.click(screen.getByRole('button'))
-        const inputElement = screen.getByPlaceholderText('Password')
+        const inputElement = screen.getByPlaceholderText('placeholder')
         expect(inputElement).toHaveAttribute('type', 'text')
     })
 })

webapp/src/pages/Home/Home.js

@@ -23,7 +23,7 @@ function Home() {
         <>
           <img className="App-logo" src="KaW.png" alt="Logo of Know and Win APP" />
           <div className="welcome-message">
-            {t("home.welcome")}<span className="username">{user.username}</span>!
+            {t("home.welcome")} <strong>{user.username}</strong>
           </div>
         </>
       ) : (