Visually distinguish disabled content

with beautiful orange border 😆

cc @appinteractive

assets/styles/main.scss

@@ -4,6 +4,11 @@
 // Transition Easing
 $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
 
+.disabled-content {
+  border-style: solid;
+  border-color: $color-warning;
+}
+
 .layout-enter-active {
   transition: opacity 80ms ease-out;
   transition-delay: 80ms;

components/PostCard.vue

@@ -2,7 +2,7 @@
   <ds-card
     :header="post.title"
     :image="post.image"
-    class="post-card"
+    :class="{'post-card': true, 'disabled-content': post.disabled}"
   >
     <a
       v-router-link
@@ -126,6 +126,7 @@ export default {
     z-index: 1;
   }
 }
+
 .post-link {
   display: block;
   position: absolute;

graphql/UserProfileQuery.js

@@ -14,6 +14,7 @@ export default app => {
           name: name${lang}
         }
         createdAt
+        disabled
         badges {
           id
           key

pages/index.vue

@@ -97,6 +97,7 @@ export default {
               title
               contentExcerpt
               createdAt
+              disabled
               slug
               image
               author {

pages/post/_slug/index.vue

@@ -7,7 +7,7 @@
       v-if="post && ready"
       :image="post.image"
       :header="post.title"
-      class="post-card"
+      :class="{'post-card': true, 'disabled-content': post.disabled}"
     >
       <hc-author :post="post" />
       <no-ssr>
@@ -73,7 +73,7 @@
           <span>
             <ds-icon name="comments" />
             <ds-tag
-              v-if="post.commentsCount"
+              v-if="post.comments"
               style="margin-top: -4px; margin-left: -12px; position: absolute;"
               color="primary"
               size="small"
@@ -85,14 +85,14 @@
         </h3>
         <ds-space margin-bottom="large" />
         <div
-          v-if="post.commentsCount"
+          v-if="post.comments"
           id="comments"
           class="comments"
         >
           <div
             v-for="comment in post.comments"
             :key="comment.id"
-            class="comment"
+            :class="{comment: true, 'disabled-content': comment.disabled}"
           >
             <ds-space margin-bottom="x-small">
               <hc-author :post="comment" />
@@ -176,6 +176,7 @@ export default {
           title
           content
           createdAt
+          disabled
           slug
           image
           author {
@@ -205,6 +206,7 @@ export default {
             id
             contentExcerpt
             createdAt
+            disabled
             deleted
             author {
               id

pages/profile/_slug.vue

@@ -10,7 +10,10 @@
       gutter="base"
     >
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <ds-card style="position: relative; height: auto;">
+        <ds-card
+          :class="{'disabled-content': user.disabled}"
+          style="position: relative; height: auto;"
+        >
           <ds-avatar
             :image="user.avatar"
             :name="user.name || 'Anonymus'"