LIL-144 Fix user profile styles

web/build/css/app.css

@@ -1119,21 +1119,21 @@ a.grey-link:hover { color: #000; border-bottom: 1px #545454 solid; }
 
 .lock__btn { width: 220px; }
 
-.profile { padding-bottom: 20px; }
+.profile { position: relative; padding-bottom: 20px; text-align: center; }
 
-.profile__head { display: -ms-flexbox; display: flex; margin-bottom: 30px; -ms-flex-align: start; align-items: flex-start; }
+.profile__btn { padding: 10px 15px; background: transparent; border: 1px solid #A7A7A7; color: #A7A7A7; }
 
-.profile__title { margin: 0 20px 0 0; }
-
-.profile__btn { margin-left: auto; padding: 10px 15px; background: transparent; border: 1px solid #A7A7A7; color: #A7A7A7; }
+.profile__btn_edit { position: absolute; top: 0; right: 0; }
 
 .profile__row { display: -ms-flexbox; display: flex; margin-bottom: 25px; -ms-flex-align: center; align-items: center; }
 
-.profile__ava { height: 120px; margin-right: 25px; -ms-flex: 0 0 120px; flex: 0 0 120px; }
+.profile__ava { width: 120px; height: 120px; margin: 0 auto 20px; }
+
+.profile__name { margin-bottom: 15px; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
 
-.profile__wrap { -ms-flex: 0 0 calc(100% - 145px); flex: 0 0 calc(100% - 145px); }
+.profile__share { margin-bottom: 35px; }
 
-.profile__name { margin-bottom: 25px; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
+.profile__content { max-width: 760px; margin: 0 auto; }
 
 .profile__foot { display: none; margin-top: 30px; text-align: center; }
 
@@ -1861,13 +1861,13 @@ a.grey-link:hover { color: #000; border-bottom: 1px #545454 solid; }
 
  .lock__content { margin-bottom: 40px; }
 
- .profile { padding: 0; text-align: center; }
+ .profile { padding: 0; }
 
- .profile__head { display: none; }
+ .profile__btn_edit { display: none; }
 
  .profile__row { display: block; margin-bottom: 30px; }
 
- .profile__ava { width: 140px; height: 140px; margin: 0 auto 20px; }
+ .profile__ava { width: 140px; height: 140px; }
 
  .profile__name { margin-bottom: 10px; font-family: 'ProximaNova-Bold', serif; font-size: 24px; letter-spacing: 0; text-transform: none; }
 

web/src/sass/_common.sass

@@ -2618,24 +2618,22 @@ a.grey-link
     width: 220px
 
 .profile
+  position: relative
   padding-bottom: 20px
+  text-align: center
   +m
     padding: 0
-    text-align: center
-  &__head
-    display: flex
-    margin-bottom: 30px 
-    align-items: flex-start
-    +m
-      display: none
-  &__title
-    margin: 0 20px 0 0
   &__btn
-    margin-left: auto
     padding: 10px 15px
     background: transparent 
     border: 1px solid $gray
     color: $gray
+    &_edit
+      position: absolute
+      top: 0
+      right: 0
+      +m
+        display: none
   &__row
     display: flex
     margin-bottom: 25px
@@ -2644,17 +2642,14 @@ a.grey-link
       display: block
       margin-bottom: 30px
   &__ava
+    width: 120px
     height: 120px
-    margin-right: 25px
-    flex: 0 0 120px
+    margin: 0 auto 20px
     +m
       width: 140px
       height: 140px
-      margin: 0 auto 20px
-  &__wrap
-    flex: 0 0 calc(100% - 145px)
   &__name
-    margin-bottom: 25px
+    margin-bottom: 15px
     font-size: 20px
     letter-spacing: 3px
     text-transform: uppercase
@@ -2664,6 +2659,11 @@ a.grey-link
       font-size: 24px
       letter-spacing: 0
       text-transform: none 
+  &__share
+    margin-bottom: 35px
+  &__content
+    max-width: 760px
+    margin: 0 auto 
   &__foot
     display: none
     margin-top: 30px