feat(settings-profile): account link component/markup

assets/styles/framework/animations.less

@@ -192,3 +192,30 @@
       20px 0px 0px 0px rgba(255, 255, 255, 1);
   }
 }
+
+@-webkit-keyframes fadeinout {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeinout {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.transition(@property, @duration, @function) {
+  transition: @property @duration @function;
+  -o-transition: @property @duration @function;
+  -moz-transition: @property @duration @function;
+  -webkit-transition: @property @duration @function;
+}

components/views/settings/pages/profile/Profile.html

@@ -105,12 +105,9 @@
                 :text="$t('pages.settings.profile.about.subtitle')"
               />
               <div>
-                <TypographySubtitle
-                  class="about-button"
-                  :size="6"
-                  :text="$t('pages.settings.profile.about.edit')"
-                  :action="() => {}"
-                />
+                <button class="edit-button" @click="() => {}">
+                  {{$t('global.edit')}}
+                </button>
               </div>
             </div>
             <TypographySubtitle :size="6" :text="sampleProfileInfo.about" />
@@ -158,21 +155,11 @@
                   :text="$t('pages.settings.profile.accounts.subtitle_accounts')"
                 />
               </div>
-              <InteractablesInputGroup
-                class="status"
-                size="small"
-                input-kind="text"
-                type="primary"
-                :placeholder="$t('pages.settings.profile.accounts.accounts_placeholder')"
-                :action="() => {}"
-              >
-                <edit-icon size="1x" />
-              </InteractablesInputGroup>
+
+              <SettingsProfileAccounts />
             </div>
           </div>
         </div>
-
-        <UiSpacer :height="isSmallScreen ? 10 : 24" />
       </div>
     </div>
   </div>

components/views/settings/pages/profile/Profile.less

@@ -29,7 +29,7 @@
 
       .profile-section {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: auto 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr 1fr;
         gap: 0px 0px;
         grid-template-areas:
@@ -40,17 +40,11 @@
 
       .photo {
         align-self: center;
-        grid-area: photo;
-      }
-
-      .username {
-        align-self: center;
-        grid-area: username;
+        margin: 0 @normal-spacing @xlight-spacing 0;
       }
 
       .status-input {
         align-self: center;
-        grid-area: status-input;
       }
 
       .profile-photo-column {
@@ -138,6 +132,7 @@
   }
 
   .username {
+    align-self: center;
     grid-area: username;
   }
 
@@ -190,12 +185,12 @@
     }
   }
 
-  .about-button {
+  .edit-button {
     font-style: italic;
     white-space: nowrap;
+    color: @text-muted;
 
     &:hover {
-      cursor: pointer;
       opacity: 0.8;
     }
   }

components/views/settings/profile/Banner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="img-container">
     <img
-      :v-if="url"
+      v-if="url"
       :src="url"
       :class="`${!bannerUrlExists ? 'img-default' : ''}`"
     />

components/views/settings/profile/accounts/Accounts.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="list">
+    <SettingsProfileAccountsItem
+      v-for="account in accounts"
+      :key="account.name"
+      :account="account"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { TwitchIcon, YoutubeIcon, TwitterIcon } from 'satellite-lucide-icons'
+
+type Account = {
+  name: string
+  icon: string
+  isVerified: boolean
+  displayOnProfile: boolean
+}
+export default Vue.extend({
+  data() {
+    return {
+      accounts: {
+        reddit: {
+          name: 'Reddit',
+          // TODO: Add icon
+          icon: 'reddit',
+          username: '',
+          isVerified: false,
+          displayOnProfile: true,
+          verifyUrl: 'https://www.reddit.com/',
+        },
+        twitch: {
+          name: 'Twitch',
+          icon: TwitchIcon,
+          username: 'Sophia_Kalindi',
+          isVerified: true,
+          displayOnProfile: true,
+          verifyUrl: 'https://www.twitch.com/',
+        },
+        youtube: {
+          name: 'Youtube',
+          icon: YoutubeIcon,
+          username: 'Sophia_Kalindi94',
+          isVerified: false,
+          displayMusic: false,
+          displayOnProfile: true,
+          verifyUrl: 'https://www.youtube.com/',
+        },
+        twitter: {
+          name: 'Twitter',
+          icon: TwitterIcon,
+          username: 'Sophia_Kalindi94',
+          isVerified: true,
+          displayOnProfile: true,
+          verifyUrl: 'https://www.twitter.com/',
+        },
+        spotify: {
+          name: 'Spotify',
+          // TODO: Add icon
+          icon: 'spotify',
+          username: '',
+          isVerified: false,
+          displayMusic: true,
+          displayOnProfile: true,
+          verifyUrl: 'https://www.spotify.com/',
+        },
+      },
+    }
+  },
+  methods: {
+    toggleAccount(account: Account) {
+      account.displayOnProfile = !account.displayOnProfile
+    },
+  },
+})
+</script>
+
+<style scoped lang="less">
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: @large-spacing;
+}
+</style>

components/views/settings/profile/accounts/Item/Item.html

@@ -0,0 +1,47 @@
+<div class="list-item">
+  <div class="header" :class="{'no-bottom-radius': account.isVerified}">
+    <component class="icon" :is="account.icon" size="1.3x" />
+    <div class="titles">
+      <TypographyTitle :size="6" :text="account.name" />
+      <TypographySubtitle
+        v-if="account.username"
+        :size="6"
+        :text="account.username"
+        class="username"
+      />
+    </div>
+    <InteractablesButton
+      v-if="!account.isVerified"
+      type="primary"
+      size="small"
+      :action="() => {}"
+      :text="$t('pages.settings.profile.accounts.verify')"
+    />
+    <div v-else class="controls">
+      <button class="edit-button" @click="() => {}">
+        {{$t('global.edit')}}
+      </button>
+      <button class="edit-button" @click="() => {}">
+        <x-icon size="1x" />
+      </button>
+    </div>
+  </div>
+  <div v-if="account.isVerified" class="display-details">
+    <div class="display-row">
+      <TypographyText
+        :size="6"
+        :text="$t('pages.settings.profile.accounts.displayMusic')"
+        class="music-label"
+      />
+      <InteractablesSwitch v-model="account.displayMusic" />
+    </div>
+    <div class="display-row">
+      <TypographyText
+        :size="6"
+        :text="$t('pages.settings.profile.accounts.displayOnProfile')"
+        class="music-label"
+      />
+      <InteractablesSwitch v-model="account.displayOnProfile" />
+    </div>
+  </div>
+</div>

components/views/settings/profile/accounts/Item/Item.less

@@ -0,0 +1,92 @@
+.list-item {
+  &:hover,
+  &:focus-within {
+    .header {
+      background: @foreground;
+      .transition(background, @animation-speed, ease-in-out);
+
+      .controls {
+        opacity: 1;
+        .transition(opacity, @animation-speed, ease-in-out);
+      }
+    }
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: @normal-spacing;
+    padding: @normal-spacing;
+    background: @midground-alt;
+    &:extend(.round-corners);
+    .transition(background, @animation-speed, ease-in-out);
+
+    &.no-bottom-radius {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .titles {
+      flex: 1;
+      &:extend(.ellipsis);
+      .username {
+        &:extend(.ellipsis);
+        margin-top: @light-spacing;
+      }
+    }
+
+    .button,
+    .controls {
+      flex-shrink: 0;
+    }
+
+    .controls {
+      display: flex;
+      gap: @normal-spacing;
+      opacity: 0;
+      .transition(opacity, @animation-speed, ease-in-out);
+
+      .edit-button {
+        display: flex;
+        align-items: center;
+        font-style: italic;
+        white-space: nowrap;
+        color: @satellite-color;
+
+        &:hover,
+        &:focus {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  .display-details {
+    display: flex;
+    flex-direction: column;
+    padding: @normal-spacing;
+    gap: @light-spacing;
+    &:extend(.bordered);
+    border-width: 2px;
+    border-top: none;
+    &:extend(.round-corners);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    .display-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}
+
+@media only screen and (max-width: @mobile-breakpoint) {
+  .list-item {
+    .header {
+      .controls {
+        opacity: 1;
+      }
+    }
+  }
+}

components/views/settings/profile/accounts/Item/Item.vue

@@ -0,0 +1,29 @@
+<template src="./Item.html"></template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { XIcon } from 'satellite-lucide-icons'
+
+type Account = {
+  name: string
+  icon: string
+  username: string
+  isVerified: boolean
+  displayOnProfile: boolean
+  verifyUrl: string
+}
+
+export default Vue.extend({
+  components: {
+    XIcon,
+  },
+  props: {
+    account: {
+      type: Object as PropType<Account>,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./Item.less"></style>