changing fields in account is done and upd chats retrieval

src/components/account/AccountButtons.jsx

@@ -1,15 +1,46 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { URLs } from "../../__data__/urls";
 import ActionButton from "./ActionButton.jsx";
+import InputField from "../reg/InputField.jsx";
 
 const AccountButtons = (props) => {
+    const [chName, setChName] = useState(false);
+    const [chPassword, setChPassword] = useState(false);
+
+    const [nickname, setNickname] = useState("");
+    const [password, setPassword] = useState("");
+
   return (
       <div className="account-buttons">
           {props.registered ? (
               <>
                   <ActionButton title={"Exit"} action={props.exitHandler}/>
-                  <ActionButton title={"Change Name"} action={props.changeNameHandler}/>
-                  <ActionButton title={"Change Pass"} action={props.changePassHandler}/>
+                  <ActionButton title={"Change Name"} action={() => setChName(true)}/>
+                  {chName ? (
+                      <InputField
+                          title={""}
+                          value={nickname}
+                          setValue={setNickname}
+                          placeholder='Enter your new nickname'
+
+                          submit={nickname}
+                          enter={props.changeNameHandler}
+                      />
+                  ) : null}
+                  <ActionButton title={"Change Pass"} action={() => setChPassword(true)}/>
+                  {chPassword ? (
+                      <div>
+                          <InputField
+                              title={""}
+                              value={password}
+                              setValue={setPassword}
+                              placeholder='Enter your new password'
+
+                              submit={password}
+                              enter={props.changePassHandler}
+                          />
+                      </div>
+                  ) : null}
               </>
           ) : null}
           <a className="MyButton mclaren-regular" href={URLs.home.url}>Back</a>

src/components/home/css/homeTitle.css

@@ -20,6 +20,13 @@
     align-items: center;
 }
 
+.search-input div input {
+    background-color: white;
+    color: black;
+
+    border: 3px solid black;
+}
+
 
 @media only screen and (max-width: 800px) {
     .homeTitle {

src/components/reg/InputField.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const InputField = (props) => {
+    console.log('class:', props.className)
   return (
       <div>
           <p>{props.title}</p>
@@ -9,6 +10,13 @@ const InputField = (props) => {
               value={props.value}
               className="Input"
               placeholder={(props.placeholder) ? props.placeholder : ''}
+              onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                      if (props.submit) {
+                          props.enter(props.submit);
+                      }
+                  }
+              }}
           />
       </div>
   );