From e0a66b989d8f30f6475bc04064c8c36f9f876539 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 02:32:23 -0500
Subject: [PATCH 1/7] Re-do UserCardContent css

---
 .../basic_user_card/basic_user_card.vue       | 21 +----
 src/components/notification/notification.vue  |  4 +-
 .../notifications/notifications.scss          |  4 -
 src/components/side_drawer/side_drawer.vue    | 11 +--
 src/components/status/status.vue              |  7 +-
 .../user_card_content/user_card_content.js    | 11 ++-
 .../user_card_content/user_card_content.vue   | 79 ++++++++++---------
 src/components/user_panel/user_panel.vue      | 12 +--
 src/components/user_profile/user_profile.vue  | 11 +--
 9 files changed, 58 insertions(+), 102 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 77fb0aa0..a358c971 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -4,7 +4,7 @@
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
     <div class="user-card-expanded-content" v-if="userExpanded">
-      <user-card-content :user="user" :switcher="false"></user-card-content>
+      <UserCardContent :user="user" :rounded="true" :bordered="true"/>
     </div>
     <div class="user-card-collapsed-content" v-else>
       <div :title="user.name" class="user-card-user-name">
@@ -29,12 +29,12 @@
 .user-card {
   display: flex;
   flex: 1 0;
+  margin: 0;
   padding-top: 0.6em;
   padding-right: 1em;
   padding-bottom: 0.6em;
   padding-left: 1em;
   border-bottom: 1px solid;
-  margin: 0;
   border-bottom-color: $fallback--border;
   border-bottom-color: var(--border, $fallback--border);
 
@@ -57,23 +57,6 @@
   &-expanded-content {
     flex: 1;
     margin-left: 0.7em;
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-    border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-width: 1px;
-    overflow: hidden;
-
-    .panel-heading {
-      background: transparent;
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    p {
-      margin-bottom: 0;
-    }
   }
 }
 </style>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 87925cfc..6583570e 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,9 +5,7 @@
       <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <div class="usercard notification-usercard" v-if="userExpanded">
-        <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
-      </div>
+      <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2240c10a..c0b458cc 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -45,10 +45,6 @@
     }
   }
 
-  .notification-usercard {
-    margin: 0;
-  }
-
   .non-mention {
     display: flex;
     flex: 1;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 6996380d..f346b440 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,7 +8,7 @@
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/>
+        <UserCardContent :user="currentUser" :hideBio="true" v-if="currentUser"/>
         <div class="side-drawer-logo-wrapper" v-else>
           <img :src="logo"/>
           <span>{{sitename}}</span>
@@ -181,15 +181,6 @@
   display: flex;
   padding: 0;
   margin: 0;
-
-  .profile-panel-background {
-    border-radius: 0;
-    .panel-heading {
-      background: transparent;
-      flex-direction: column;
-      align-items: stretch;
-    }
-  }
 }
 
 .side-drawer ul {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ee6ef7da..0c110c90 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,9 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <div class="usercard" v-if="userExpanded">
-            <user-card-content :user="status.user" :switcher="false"></user-card-content>
-          </div>
+          <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
@@ -248,8 +246,7 @@ $status-margin: 0.75em;
     padding: 0;
   }
 
-  .usercard {
-    margin: 0;
+  .status-usercard-content {
     margin-bottom: $status-margin;
   }
 
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 7a7b89d4..78c7eb6b 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -4,7 +4,7 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
   data () {
     return {
       followRequestInProgress: false,
@@ -16,7 +16,14 @@ export default {
     }
   },
   computed: {
-    headingStyle () {
+    classes () {
+      return [{
+        'user-card-content-rounded': this.rounded === true,
+        'user-card-content-rounded-t': this.rounded === 'top',  // top only
+        'user-card-content-bordered': this.bordered
+      }]
+    },
+    style () {
       const color = this.$store.state.config.customTheme.colors
             ? this.$store.state.config.customTheme.colors.bg  // v2
             : this.$store.state.config.colors.bg // v1
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 702c3385..f06a0a45 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,6 +1,6 @@
 <template>
-<div id="heading" class="profile-panel-background" :style="headingStyle">
-  <div class="panel-heading text-center">
+<div class="user-card-content" :class="classes" :style="style">
+  <div class="panel-heading">
     <div class='user-info'>
       <div class='container'>
         <router-link :to="userProfileLink(user)">
@@ -108,7 +108,7 @@
       </div>
     </div>
   </div>
-  <div class="panel-body profile-panel-body" v-if="!hideBio">
+  <div class="panel-body" v-if="!hideBio">
     <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
       <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
         <h5>{{ $t('user_card.statuses') }}</h5>
@@ -123,8 +123,8 @@
         <span>{{user.followers_count}}</span>
       </div>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p>
   </div>
 </div>
 </template>
@@ -134,30 +134,54 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.profile-panel-background {
+.user-card-content {
   background-size: cover;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
   overflow: hidden;
 
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
   .panel-heading {
     padding: .5em 0;
     text-align: center;
     box-shadow: none;
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
   }
-}
 
-.profile-panel-body {
-  word-wrap: break-word;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+  .panel-body {
+    word-wrap: break-word;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+  }
 
-  .profile-bio {
+  p {
+    margin-bottom: 0;
+  }
+
+  &-bio {
     text-align: center;
   }
+
+  //
+  // Modifiers
+
+  &-rounded {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-rounded-t {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &-bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
 }
 
 .user-info {
@@ -393,25 +417,4 @@
     text-decoration: none;
   }
 }
-
-.usercard {
-  width: fill-available;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  border-style: solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-width: 1px;
-  overflow: hidden;
-
-  .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-}
 </style>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 2d5cb500..4b3d8971 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content>
+      <UserCardContent :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>
@@ -11,13 +11,3 @@
 </template>
 
 <script src="./user_panel.js"></script>
-
-<style lang="scss">
-.user-panel {
-  .profile-panel-background .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-</style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 8090efa5..c57d3409 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,11 +1,7 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <user-card-content
-      :user="user"
-      :switcher="true"
-      :selected="timeline.viewing"
-    />
+    <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
     <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
       <Timeline
         :label="$t('user_card.statuses')"
@@ -64,11 +60,6 @@
   flex: 2;
   flex-basis: 500px;
 
-  .profile-panel-background .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
   .userlist-placeholder {
     display: flex;
     justify-content: center;

From 43c52cb95054d3de43a3a7a5ab46836c84013d1b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 13:25:31 -0500
Subject: [PATCH 2/7] Update modifier class notation

---
 .../user_card_content/user_card_content.js     |  6 +++---
 .../user_card_content/user_card_content.vue    | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 78c7eb6b..96c6036c 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-content-rounded': this.rounded === true,
-        'user-card-content-rounded-t': this.rounded === 'top',  // top only
-        'user-card-content-bordered': this.bordered
+        'user-card-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-content-r': this.rounded === true,   // set border-radius for all sides
+        'user-card-content-b': this.bordered === true   // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index f06a0a45..e003e850 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -164,19 +164,19 @@
   //
   // Modifiers
 
-  &-rounded {
+  &-rt {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-r {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-rounded-t {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &-bordered {
+  &-b {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;

From baf603a506529cfacdd4bf0b98f248cd3ed35b34 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 13:54:49 -0500
Subject: [PATCH 3/7] Update block class name of BasicUserCard component

---
 src/components/basic_user_card/basic_user_card.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index a358c971..f72620a3 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="user-card">
+  <div class="basic-user-card">
     <router-link :to="userProfileLink(user)">
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
-    <div class="user-card-expanded-content" v-if="userExpanded">
+    <div class="basic-user-card-expanded-content" v-if="userExpanded">
       <UserCardContent :user="user" :rounded="true" :bordered="true"/>
     </div>
-    <div class="user-card-collapsed-content" v-else>
-      <div :title="user.name" class="user-card-user-name">
+    <div class="basic-user-card-collapsed-content" v-else>
+      <div :title="user.name" class="basic-user-card-user-name">
         <span v-if="user.name_html" v-html="user.name_html"></span>
         <span v-else>{{ user.name }}</span>
       </div>
       <div>
-        <router-link class="user-card-screen-name" :to="userProfileLink(user)">
+        <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
           @{{user.screen_name}}
         </router-link>
       </div>
@@ -26,7 +26,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-card {
+.basic-user-card {
   display: flex;
   flex: 1 0;
   margin: 0;

From 7bceabb5bda1f7d0737f8f51e0aa07879b7ce72e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 14:01:49 -0500
Subject: [PATCH 4/7] Rename UserCardContent to UserCard

---
 src/components/basic_user_card/basic_user_card.js      |  4 ++--
 src/components/basic_user_card/basic_user_card.vue     |  2 +-
 src/components/notification/notification.js            |  4 ++--
 src/components/notification/notification.vue           |  2 +-
 src/components/side_drawer/side_drawer.js              |  4 ++--
 src/components/side_drawer/side_drawer.vue             |  2 +-
 src/components/status/status.js                        |  4 ++--
 src/components/status/status.vue                       |  2 +-
 .../user_card_content.js => user_card/user_card.js}    |  6 +++---
 .../user_card_content.vue => user_card/user_card.vue}  | 10 +++++-----
 src/components/user_panel/user_panel.js                |  4 ++--
 src/components/user_panel/user_panel.vue               |  2 +-
 src/components/user_profile/user_profile.js            |  4 ++--
 src/components/user_profile/user_profile.vue           |  2 +-
 14 files changed, 26 insertions(+), 26 deletions(-)
 rename src/components/{user_card_content/user_card_content.js => user_card/user_card.js} (94%)
 rename src/components/{user_card_content/user_card_content.vue => user_card/user_card.vue} (97%)

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index a8441446..87085a28 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -12,7 +12,7 @@ const BasicUserCard = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     UserAvatar
   },
   methods: {
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index f72620a3..9b80c72b 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -4,7 +4,7 @@
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
     <div class="basic-user-card-expanded-content" v-if="userExpanded">
-      <UserCardContent :user="user" :rounded="true" :bordered="true"/>
+      <UserCard :user="user" :rounded="true" :bordered="true"/>
     </div>
     <div class="basic-user-card-collapsed-content" v-else>
       <div :title="user.name" class="basic-user-card-user-name">
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 7d9807de..fe5b7018 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,6 +1,6 @@
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -13,7 +13,7 @@ const Notification = {
   },
   props: [ 'notification' ],
   components: {
-    Status, UserAvatar, UserCardContent
+    Status, UserAvatar, UserCard
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 6583570e..5e9cef97 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,7 +5,7 @@
       <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
+      <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index b5c49059..ad3738d1 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 
 // TODO: separate touch gesture stuff into their own utils if more components want them
@@ -12,7 +12,7 @@ const SideDrawer = {
     closed: true,
     touchCoord: [0, 0]
   }),
-  components: { UserCardContent },
+  components: { UserCard },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index f346b440..b608b008 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,7 +8,7 @@
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <UserCardContent :user="currentUser" :hideBio="true" v-if="currentUser"/>
+        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
         <div class="side-drawer-logo-wrapper" v-else>
           <img :src="logo"/>
           <span>{{sitename}}</span>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fbbca6c4..9e18fe15 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -3,7 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
@@ -259,7 +259,7 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    UserCardContent,
+    UserCard,
     UserAvatar,
     Gallery,
     LinkPreview
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0c110c90..8fda68f5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,7 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card/user_card.js
similarity index 94%
rename from src/components/user_card_content/user_card_content.js
rename to src/components/user_card/user_card.js
index 96c6036c..0cb616f4 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card/user_card.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-content-r': this.rounded === true,   // set border-radius for all sides
-        'user-card-content-b': this.bordered === true   // set border for all sides
+        'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-r': this.rounded === true,   // set border-radius for all sides
+        'user-card-b': this.bordered === true   // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card/user_card.vue
similarity index 97%
rename from src/components/user_card_content/user_card_content.vue
rename to src/components/user_card/user_card.vue
index e003e850..b90f57a1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="user-card-content" :class="classes" :style="style">
+<div class="user-card" :class="classes" :style="style">
   <div class="panel-heading">
     <div class='user-info'>
       <div class='container'>
@@ -123,18 +123,18 @@
         <span>{{user.followers_count}}</span>
       </div>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
   </div>
 </div>
 </template>
 
-<script src="./user_card_content.js"></script>
+<script src="./user_card.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-card-content {
+.user-card {
   background-size: cover;
   overflow: hidden;
 
diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index 15804b88..d4478290 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -1,6 +1,6 @@
 import LoginForm from '../login_form/login_form.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 
 const UserPanel = {
   computed: {
@@ -9,7 +9,7 @@ const UserPanel = {
   components: {
     LoginForm,
     PostStatusForm,
-    UserCardContent
+    UserCard
   }
 }
 
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 4b3d8971..8310f30e 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <UserCardContent :user="user" :hideBio="true" rounded="top"/>
+      <UserCard :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index cdf1cee9..54126514 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,6 +1,6 @@
 import { compose } from 'vue-compose'
 import get from 'lodash/get'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
@@ -147,7 +147,7 @@ const UserProfile = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     Timeline,
     FollowerList,
     FriendList
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index c57d3409..7d4a8b1f 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
+    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
     <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
       <Timeline
         :label="$t('user_card.statuses')"

From 7cb13df8adcd9ad24b017a3399137a53acb3eb4c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 14:13:22 -0500
Subject: [PATCH 5/7] Update tests

---
 test/unit/specs/boot/routes.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
index 383ba90f..a415aeaf 100644
--- a/test/unit/specs/boot/routes.spec.js
+++ b/test/unit/specs/boot/routes.spec.js
@@ -24,7 +24,7 @@ describe('routes', () => {
 
     const matchedComponents = router.getMatchedComponents()
 
-    expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
+    expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
   })
 
   it('user\'s profile at /users', () => {
@@ -32,6 +32,6 @@ describe('routes', () => {
 
     const matchedComponents = router.getMatchedComponents()
 
-    expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
+    expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
   })
 })

From 37acb51df416a2475f467c0402a5e18821c5934d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 21:48:07 -0500
Subject: [PATCH 6/7] Update classname

---
 src/components/status/status.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8fda68f5..c234bc03 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,7 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
@@ -246,7 +246,7 @@ $status-margin: 0.75em;
     padding: 0;
   }
 
-  .status-usercard-content {
+  .status-usercard {
     margin-bottom: $status-margin;
   }
 

From 5f51fe897dcd7d32c46a67a8d31c8b4ffc8858b2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 21:52:04 -0500
Subject: [PATCH 7/7] Revert modifier class notation

---
 src/components/user_card/user_card.js  | 6 +++---
 src/components/user_card/user_card.vue | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 0cb616f4..81c938c0 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-r': this.rounded === true,   // set border-radius for all sides
-        'user-card-b': this.bordered === true   // set border for all sides
+        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
+        'user-card-bordered': this.bordered === true    // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index b90f57a1..cc2ce6b8 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -161,22 +161,21 @@
     text-align: center;
   }
 
-  //
   // Modifiers
 
-  &-rt {
+  &-rounded-t {
     border-top-left-radius: $fallback--panelRadius;
     border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     border-top-right-radius: $fallback--panelRadius;
     border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-r {
+  &-rounded {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-b {
+  &-bordered {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;