Merge branch 'gm-update' into 'staging'

update: CSS refactoring

See merge request startinblox/applications/sib-app!52

src/styles/layout/job-offers/job-offers.scss

@@ -176,7 +176,7 @@ sib-action[name='edit'] {
   color: $color-215-6-63;
 
   &>sib-link {
-    @include icon('options-vertical');
+    @include icon('pencil');
     font-size: 2rem;
   }
 }

src/styles/layout/members/member-profile.scss

@@ -13,6 +13,7 @@
 
       div[name='member-profile__bio'] {
         display: grid;
+        grid-gap: 1rem;
         grid-template-areas: "avatar name status"
           "avatar pseudo status"
           "avatar bio status"
@@ -26,8 +27,11 @@
 
           img {
             border-radius: 50%;
+            height: 250px;
             object-fit: cover;
-            max-width: 90% !important;
+            object-position: center;
+            overflow: hidden;
+            width: 250px;
           }
         }
 
@@ -37,26 +41,12 @@
           display: flex;
           grid-area: name;
 
-          >sib-display-value[name='name'] {
-            color: $color-216-4-22;
-            font-weight: bold;
-            @extend h1;
-          }
-
           >sib-multiple[name$='groups'] {
             display: flex;
             padding-left: 1.4rem;
           }
         }
 
-        sib-display-value[name='username'] {
-          grid-area: pseudo;
-
-          &::before {
-            content: '@';
-          }
-        }
-
         sib-display-value[name='profile.bio'] {
           grid-area: bio;
         }

src/styles/layout/members/members.scss

@@ -178,8 +178,7 @@ member-info-groups {
           }
 
           [name='name'] {
-            font-weight: bold;
+            margin: 0.67em 0;
-            @extend h1;
           }
 
           sib-display-value[name$='bio'] {

src/styles/layout/user/user-profile.scss

@@ -13,13 +13,12 @@
       position: relative;
 
       img {
-        width: 300px;
+        border-radius: 50%;
         height: 300px;
         object-fit: cover;
-        border-radius: 50%;
         overflow: hidden;
         object-position: center;
-        
+        width: 300px;
       }
     }