put styles for ProfilePage in a separate file

src/features/editUser/ui/EditUserForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import styles from "./styles.module.css";
 import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
 import { useAuth0 } from "@auth0/auth0-react";
 import avatarDefault from "../../../../public/icons/avatar.svg";
@@ -32,78 +33,6 @@ const Form = styled.form`
   }
 `;
 
-const User = styled.div`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 20px;
-`;
-
-const Avatar = styled.div`
-  width: 86px;
-  height: 86px;
-  border-radius: 10px;
-  border: 2px dashed #175ef1;
-  position: relative;
-`;
-
-const InputAvatar = styled.input`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: transparent;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &::file-selector-button {
-    display: none;
-  }
-`;
-
-const Info = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-`;
-
-const Name = styled.input`
-  width: 100%;
-  font-size: 22px;
-  font-weight: 500;
-`;
-
-const Email = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`;
-
-const EmailText = styled.div`
-  font-size: 20px;
-  font-weight: 300;
-  line-height: normal;
-`;
-
-const AccessEmail = styled.a`
-  font-size: 20px;
-  font-weight: 300;
-  line-height: normal;
-`;
-
-const AccessText = styled.a`
-  color: var(--red, #f95a39);
-
-  &:hover {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-`;
-
 export const EditUserForm: React.FC = observer(() => {
   const { user } = useAuth0();
   const [avatar, setAvatar] = useState(user?.picture || avatarDefault);
@@ -132,44 +61,50 @@ export const EditUserForm: React.FC = observer(() => {
         encType="multipart/form-data"
         onSubmit={saveChanges}
       >
-        <User>
-          <Avatar>
+        <div className={styles.user}>
+          <div className={styles.avatar}>
             <img
               src={avatar}
               alt=""
               style={{ width: "100%", height: "100%", borderRadius: "7px" }}
             />
-            <InputAvatar type="file" title=" " onChange={onImageChange} />
-          </Avatar>
-          <Info>
-            <Name
+            <input
+              className={styles.inputAvatar}
+              type="file"
+              title=" "
+              onChange={onImageChange}
+            />
+          </div>
+          <div className={styles.info}>
+            <input
+              className={styles.name}
               type="text"
               value={name}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setName(e.target.value)
               }
               autoFocus
             />
-            <Email>
-              <EmailText>{user?.email}</EmailText>
+            <div className={styles.email}>
+              <div className={styles.emailText}>{user?.email}</div>
               {!user?.email_verified ? (
-                <AccessEmail>
+                <a className={styles.accessEmail}>
                   {profileFormState.isEmailConfirmed ? (
                     <div style={{ color: "var(--green, #5bc259)" }}>
                       На вашу почту выслано письмо с подтверждением
                     </div>
                   ) : (
-                    <AccessText onClick={sendAccess}>
+                    <a className={styles.accessText} onClick={sendAccess}>
                       Подтвердите почту
-                    </AccessText>
+                    </a>
                   )}
-                </AccessEmail>
+                </a>
               ) : (
                 ""
               )}
-            </Email>
-          </Info>
-        </User>
+            </div>
+          </div>
+        </div>
         <FormButton>Сохранить</FormButton>
       </Form>
     </ProfileFormLayout>

src/features/editUser/ui/styles.module.css

@@ -0,0 +1,71 @@
+.user {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.avatar {
+  width: 86px;
+  height: 86px;
+  border-radius: 10px;
+  border: 2px dashed #175ef1;
+  position: relative;
+}
+
+.inputAvatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::file-selector-button {
+    display: none;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.name {
+  width: 100%;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.emailText {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.accessEmail {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.accessText {
+  color: var(--red, #f95a39);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}