Start the profile improvement

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";