Start the profile improvement

frontend/index.html

@@ -193,31 +193,12 @@
         </div>
 
         <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
-            <div class="name-and-img">
+            <div class="header-top">
-                <div id="icon-profile">    
+                <div class="left">
-                    <img id="preview" src="./src/images/default-avatar.png" alt="Ваше фото" />
+                    <img id="profile-picture" src="./src/images/default-avatar.png" alt="Ваше фото" />
-                    <button id="uploadButton">Выбрать фото</button>
-                    <input type="file" id="fileInput" accept="image/*" />
                 </div>
-                <div class="name-and-discription">
+                <div class="right">
-                    <div class="name">
+                    <div id="profile-username">Loading...</div>
-                        <div id="name-title">
-                            <p id="text-nik">Ваш ник</p>
-                            <input type="text" id="nik" style="display: none;" />
-                        </div>
-                        <div id="change-name"> 
-                            <img src="./src/images/pesel.svg" alt="" />
-                        </div>
-                    </div>
-                    <div class="discription">
-                        <div id="discription-title">
-                            <p id="text-discr">Ваше описание</p>
-                            <input type="text" id="discr" style="display: none;" />
-                        </div>
-                        <div id="change-discription">
-                            <img src="./src/images/pesel.svg" alt="">
-                        </div>
-                    </div>
                 </div>
             </div>
 

frontend/src/css/_prifole.scss

@@ -1,104 +0,0 @@
-@use "common/colors" as *;
-@use "common/material" as *;
-
-.name-and-img{
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-    
-    #icon-profile{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        #preview {
-            width: 200px;
-                height: auto;
-                display: flex;
-                img{
-                    width: 96px;
-                    height: 95px;
-                }
-            }
-        #uploadButton {
-                background-color: rgba(0,0,0,0.5);
-                color: #fff;
-                border: none;
-                padding: 8px 16px;
-                cursor: pointer;
-                border-radius: 4px;
-                font-size: 16px;
-                opacity: 0.8;
-            }
-        #uploadButton:hover {
-                opacity: 1;
-            }
-            /* скрываем чекбокс, чтобы он был только триггером */
-            #fileInput {
-                display: none;
-            }
-    }
-    .name-and-discription{
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-        .name{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 10px;
-            justify-content: center;
-            #name-title{
-                display: flex;
-                margin: 0;
-                #text-nik{
-                    display: flex;
-                }
-                p{
-                    display: flex;
-                    color: $color-dark-surface;
-                    align-items: center;
-                    font-size: 24px;
-                }
-            }
-            #change-name{
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                img{
-                    align-items: center;
-                    width: 30px;
-                    height: 30px;
-                    
-                }
-            }
-        }
-        .discription{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 10px;
-            justify-content: center;
-            #discription-title{
-                display: flex;
-                margin: 0;
-                p{
-                    display: flex;
-                    color: $color-dark-surface;
-                    align-items: center;
-                    font-size: 18px;
-                }
-            }
-            #change-discription{
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                img{
-                    align-items: center;
-                    width: 30px;
-                    height: 30px;
-                    
-                }
-            }
-        }
-    }
-}

frontend/src/css/_profile.scss

@@ -0,0 +1,34 @@
+@use "common/colors" as *;
+@use "common/material" as *;
+
+#profile-dialog {
+    .header-top {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        position: relative;
+
+        .left {
+            $size: 70px;
+
+            width: $size;
+            height: $size;
+
+            #profile-picture {
+                width: $size;
+                height: $size;
+                border-radius: 50%;
+            }
+        }
+
+        .right {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            #profile-username {
+                font-size: larger;
+            }
+        }
+    }
+}

frontend/src/css/style.scss

@@ -1,6 +1,6 @@
 @use "auth";
 @use "chat";
-@use "prifole";
+@use "profile";
 @use "panelchat";
 @use "common/animations";
 @use "common/components";