Improve styling of discussions.

src/webview/src/App.vue

@@ -61,3 +61,37 @@ export default {
     </template>
   </div>
 </template>
+
+<style lang="scss">
+body.vscode-light {
+  * {
+    border-color: #333;
+  }
+
+  .idiff.deletion {
+    background: #fac5cd;
+  }
+
+  .idiff.addition {
+    background: #c7f0d2;
+  }
+}
+.capitalize {
+  text-transform: capitalize;
+}
+
+code {
+  padding: 2px 4px;
+  color: #c0341d;
+  background-color: #fbe5e1;
+  border-radius: 4px;
+}
+
+.idiff.deletion {
+  background: #df818f;
+}
+
+.idiff.addition {
+  background: #7cba8d;
+}
+</style>

src/webview/src/components/IssuableDetails.vue

@@ -28,8 +28,10 @@ export default {
         return this.issuable.description;
       }
 
+      const description = this.issuable.description || '';
+
       const path = `${this.issuable.web_url.split('/issues/')[0]}/uploads/`;
-      const normalized = this.issuable.description.replace(/\/uploads/gm, path);
+      const normalized = description.replace(/\/uploads/gm, path);
 
       return md.render(normalized);
     },
@@ -54,19 +56,15 @@ export default {
       <span
         :class="{ [issuable.state]: true }"
         class="state"
-      >
-        {{ stateText }}
-      </span>
-      <span class="capitalize">
-        {{ issuable.state }}
-      </span>
-      <span class="date">
-        {{ createdAgo }}
-      </span>
-      by
-      <user-avatar :user="issuable.author" />
-      <a :href="issuable.web_url">
-        View in GitLab
+      >{{ stateText }}</span>
+      <span class="capitalize"> opened</span>
+      {{ createdAgo }} by
+      <user-avatar
+        :user="issuable.author"
+        :show-handle="false"
+      />
+      <a :href="issuable.web_url" class="view-link">
+        Open in GitLab
       </a>
     </div>
     <div class="title">
@@ -79,8 +77,32 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped>
-.capitalize {
-  text-transform: capitalize;
+<style lang="scss">
+.issuable-details {
+  border-bottom: 1px solid #919191;
+
+  .header {
+    padding: 10px 0 6px;
+    line-height: 36px;
+    margin-bottom: 8px;
+    border-bottom: 1px solid #919191;
+    position: relative;
+
+    .view-link {
+      position: absolute;
+      right: 0;
+    }
+
+    .state {
+      border-radius: 4px;
+      background-color: #2A9D3F;
+      padding: 2px 9px;
+      margin-right: 5px;
+    }
+  }
+
+  .description {
+    margin-bottom: 16px;
+  }
 }
 </style>

src/webview/src/components/IssuableDiscussions.vue

@@ -33,3 +33,19 @@ export default {
     />
   </div>
 </template>
+
+<style lang="scss">
+.issuable-discussions {
+  position: relative;
+
+  &::before {
+    content: '';
+    border-left: 2px solid #919191;
+    position: absolute;
+    left: 35px;
+    top: 16px;
+    bottom: 0;
+    z-index: -1;
+  }
+}
+</style>

src/webview/src/components/Note.vue

@@ -33,9 +33,38 @@ export default {
 <template>
   <div class="note">
     <div class="note-header">
-      <user-avatar :user="author" />
-      {{ createdAgo }}
+      <user-avatar :user="author" :size="40" /> · {{ createdAgo }}
     </div>
     <note-body :note="note" />
   </div>
 </template>
+
+<style lang="scss">
+.note {
+  border: 1px solid #919191;
+  border-radius: 4px;
+  padding: 16px;
+  margin: 16px 0;
+  background: var(--background-color);
+
+  .avatar {
+    margin-right: 10px;
+  }
+
+  &:not(.system-note) {
+    .note-header {
+      position: relative;
+      top: -8px;
+    }
+
+    .avatar {
+      position: relative;
+      top: 8px;
+    }
+
+    .note-body {
+      margin-top: -12px;
+    }
+  }
+}
+</style>

src/webview/src/components/NoteBody.vue

@@ -30,3 +30,27 @@ export default {
     <div class="body" v-html="renderedNoteBody"></div>
   </div>
 </template>
+
+<style lang="scss">
+.note-body {
+  margin-left: 56px;
+
+  .badge {
+    padding: 0 8px;
+    line-height: 16px;
+    border-radius: 36px;
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  .body p {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

src/webview/src/components/SystemNote.vue

 <script>
-import Note from './Note';
+import NoteBody from './NoteBody';
+import UserAvatar from './UserAvatar';
+
+const moment = require('moment');
 
 export default {
   props: {
@@ -9,13 +12,83 @@ export default {
     },
   },
   components: {
-    Note,
+    NoteBody,
+    UserAvatar,
+  },
+  computed: {
+    note() {
+      return this.noteable.notes[0];
+    },
+    author() {
+      return this.note.author;
+    },
+    createdAgo() {
+      return moment(this.note.created_at).fromNow();
+    },
   },
 };
 </script>
 
 <template>
   <div class="note system-note">
-    <note :noteable="noteable" />
+    <span class="avatar">
+      <svg
+        aria-hidden="true"
+        data-prefix="fab"
+        data-icon="gitlab"
+        class="svg-inline--fa fa-gitlab fa-w-16"
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+      >
+        <path
+          fill="currentColor"
+          d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
+        ></path>
+      </svg>
+    </span>
+    <div class="note-body-wrapper">
+      <user-avatar :user="author" :show-avatar="false"/>
+      <note-body :note="note"/>
+      · {{ createdAgo }}
+    </div>
   </div>
 </template>
+
+<style lang="scss">
+.system-note {
+  border: none;
+  padding: 0 16px;
+
+  .avatar {
+    border: 1px solid #919191;
+    border-radius: 100%;
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    margin-left: 4px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+      position: relative;
+      top: 7px;
+      left: 7px;
+    }
+  }
+
+  .note-body-wrapper {
+    display: inline-block;
+    position: relative;
+    top: 3px;
+
+    > * {
+      display: inline-block;
+    }
+
+    .note-body {
+      margin-left: 5px;
+    }
+  }
+}
+</style>

src/webview/src/components/UserAvatar.vue

@@ -5,25 +5,67 @@ export default {
       type: Object,
       required: true,
     },
+    size: {
+      type: Number,
+      required: false,
+      default: 24,
+    },
+    showAvatar: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showHandle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    sizeClass() {
+      return `s${this.size}`;
+    },
   },
 };
 </script>
 
 <template>
   <span>
-    <img :src="user.avatar_url" class="avatar" />
+    <img
+      v-if="showAvatar"
+      :src="user.avatar_url"
+      :class="sizeClass"
+      class="avatar"
+    />
     <span class="author">
-      <a :href="user.web_url" target="_blank">{{ user.name }}</a>
+      {{ user.name }}
+      <a
+        v-if="showHandle"
+        :href="user.web_url"
+        target="_blank"
+      >@{{user.username}}</a>
     </span>
   </span>
 </template>
 
 <style lang="scss" scoped>
 .avatar {
+  border-radius: 100%;
+  max-width: 64px;
+  max-height: 64px;
+  vertical-align: middle;
+}
+
+.s24 {
   width: 24px;
   height: 24px;
-  border-radius: 24px;
 }
+
+.s40 {
+  width: 40px;
+  height: 40px;
+}
+
 .capitalize {
   text-transform: capitalize;
 }