Fixed profile settings style

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -420,7 +420,6 @@
   flex-wrap: wrap;
   font-size: 1.4rem;
   margin-top: 1.5rem;
-  gap: 1rem;
 
   @include media-breakpoint-down(md) {
     justify-content: center;
@@ -431,7 +430,7 @@
   align-items: center;
   cursor: pointer;
   display: inline-flex;
-  margin-right: 3rem;
+  margin: 0 2% 1rem;
   vertical-align: top;
   border-bottom: unset !important;
 

src/components/ProfileSettings/ProfileSettings.tsx

@@ -315,6 +315,7 @@ export const ProfileSettings = () => {
                           <p class="form-message form-message--error">{t('It does not look like url')}</p>
                         </Show>
                       </Show>
+                      <Show when={social()}>
                         <For each={profileSocialLinks(social())}>
                           {(network) => (
                             <SocialNetworkInput
@@ -328,6 +329,7 @@ export const ProfileSettings = () => {
                             />
                           )}
                         </For>
+                      </Show>
                     </div>
                   </form>
                 </div>
@@ -343,7 +345,12 @@ export const ProfileSettings = () => {
                   <div class="row">
                     <div class="col-md-20 col-lg-18 col-xl-16">
                       <div class={styles.content}>
-                        <Button variant="light" value={t('Cancel')} onClick={handleCancel} />
+                        <Button
+                          class={styles.cancel}
+                          variant="light"
+                          value={t('Cancel changes')}
+                          onClick={handleCancel}
+                        />
                         <Button onClick={handleSubmit} variant="primary" value={t('Save settings')} />
                       </div>
                     </div>

src/context/profile.tsx

@@ -24,7 +24,7 @@ export function useProfileForm() {
 }
 
 const userpicUrl = (userpic: string) => {
-  if (userpic.includes('assets.discours.io')) {
+  if (userpic && userpic.includes('assets.discours.io')) {
     return userpic.replace('100x', '500x500')
   }
   return userpic

src/pages/profile/Settings.module.scss

@@ -291,13 +291,18 @@ h5 {
   .content {
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
     flex-direction: row;
     padding: 1rem 0;
     gap: 1rem;
   }
 
   .cancel {
-    margin-right: auto;
+    color: #d00820;
+    padding: 0.8rem 0 !important;
+  }
+
+  :global(.row) > * {
+    margin-bottom: 0;
   }
 }