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,19 +315,21 @@ export const ProfileSettings = () => {
                           <p class="form-message form-message--error">{t('It does not look like url')}</p>
                         </Show>
                       </Show>
-                      <For each={profileSocialLinks(social())}>
-                        {(network) => (
-                          <SocialNetworkInput
-                            class={styles.socialInput}
-                            link={network.link}
-                            network={network.name}
-                            handleInput={(value) => handleChangeSocial(value)}
-                            isExist={!network.isPlaceholder}
-                            slug={form.slug}
-                            handleDelete={() => handleDeleteSocialLink(network.link)}
-                          />
-                        )}
-                      </For>
+                      <Show when={social()}>
+                        <For each={profileSocialLinks(social())}>
+                          {(network) => (
+                            <SocialNetworkInput
+                              class={styles.socialInput}
+                              link={network.link}
+                              network={network.name}
+                              handleInput={(value) => handleChangeSocial(value)}
+                              isExist={!network.isPlaceholder}
+                              slug={form.slug}
+                              handleDelete={() => handleDeleteSocialLink(network.link)}
+                            />
+                          )}
+                        </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;
   }
 }