Untitled

import { useRef } from "react";
import {HiOutlineLockClosed} from "react-icons/hi";
import "./styles/BankLogin.css";

export default function BankLogin({ bank }) {
    
    

    const passLabelRef = useRef()
    const inputLabelRef = useRef()
    return <div style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column"
    }}>
        <div className="InstitutionContainer" >
            <div style={{
                backgroundImage: `url(${bank.logo})`
            }}
                className="Logo"></div>

            <div className="ThreadsInstitutionResult_text">
                <p className="ThreadsInstitutionResult_name">{bank.name}</p>
                <p className="ThreadsInstitutionResult_url">{bank.url}</p>
            </div>
        </div>
        <div className="FormContainer">
            <form>
                <fieldset>
                    <legend>
                        <h1 class="EnterYourCredentialsText">Enter Your Credentials</h1>
                        <p class="CredentialsReadMe">
                            By providing your
                            <b> {bank.name} </b> 
                             credentials to Plaid, you’re enabling Plaid to retrieve your financial data.
                        </p>
                    </legend>
                </fieldset>

                <fieldset className="inputFieldset">
                    <label ref={inputLabelRef}>User ID</label>
                    <input onFocus={() => {
                        console.log(inputLabelRef)
                        inputLabelRef.current.className = "labelclickedUser"
                    }}  className="inputAfterLabel" name="username" id="username" type="text"  />
                    <div className="padlockDiv">
                        <i><HiOutlineLockClosed/></i>
                    </div>
                </fieldset>

                <fieldset className="inputFieldset2">
                    <label ref={passLabelRef}>Password</label>
                    <input onFocus={() => {
                        console.log(passLabelRef)
                        passLabelRef.current.className = "labelclickedPassword"
                    }}  className="inputAfterLabel" name="password" id="password" type="password" />
                    <div className="padlockDiv">
                        <i><HiOutlineLockClosed/></i>
                    </div>
                </fieldset>

                <button className="ButtonAfterAction" type="submit" onClick={addFormData}>
                    <span>Submit</span>
                </button>
                
                <a></a>
            </form> 
        </div>
    </div>
}