From 01a7a12297b54e1941e0a688aa203aa1d60cd317 Mon Sep 17 00:00:00 2001
From: Victor George <vgeorge@appirio.com>
Date: Thu, 10 Nov 2016 10:25:24 -0800
Subject: [PATCH 1/2] post card content overrides

---
 src/components/ActionCard/ActionCard.scss | 260 +++++++++++++++-------
 1 file changed, 175 insertions(+), 85 deletions(-)

diff --git a/src/components/ActionCard/ActionCard.scss b/src/components/ActionCard/ActionCard.scss
index 75e3980c3..e5cff5a8a 100644
--- a/src/components/ActionCard/ActionCard.scss
+++ b/src/components/ActionCard/ActionCard.scss
@@ -1,26 +1,30 @@
 @import "tc-includes";
 
-.action-card{
+.action-card {
   padding: $base-unit*4 0;
-  box-shadow: 0px 1px 3px 0px #C3C3C8;
+  box-shadow: 0px 1px 3px 0px #c3c3c8;
 
   // FIXME: Hide the top border on the new post composer to be better looking
-  .new-post-title + .tc-textarea .textarea-footer {border-top: none;}
+  .new-post-title + .tc-textarea .textarea-footer {
+    border-top: none;
+  }
 
   .panel-row,
-  .modal-row{
+  .modal-row {
     padding: $base-unit*2 $base-unit*6;
   }
 
-  .card-header{
+  .card-header {
     display: flex;
     align-items: center;
     justify-content: center;
-    .buttons{
+
+    .buttons {
       margin-bottom: $base-unit*2;
     }
   }
-  .card-title{
+
+  .card-title {
     @include roboto-medium;
     flex-grow: 1;
     align-items: center;
@@ -28,75 +32,88 @@
     font-size: $base-unit*4;
     margin-bottom: 10px;
   }
-  .card-profile{
+
+  .card-profile {
     @include roboto-medium;
     font-size: $tc-label-md;
     line-height: $base-unit*4;
     margin-bottom: 10px;
-    .card-author{
+
+    .card-author {
       white-space: nowrap;
       display: inline-block;
     }
-    .card-time{
+
+    .card-time {
       white-space: nowrap;
       display: inline-block;
       color: $tc-gray-40;
-      &::before{
+
+      &::before {
         content: " · ";
       }
     }
-    .card-status{
+
+    .card-status {
       display: inline-block;
       margin-left: 20px;
     }
   }
-  .card-body{
+
+  .card-body {
     @include roboto;
     font-size: $tc-label-lg;
     color: $tc-gray-70;
     line-height: $base-unit*5;
     padding: 10px 0;
-    &.comment-section{
+
+    &.comment-section {
       margin-bottom: -50px;
-      .comment-count{
+
+      .comment-count {
         @include roboto;
         font-size: $tc-label-md;
         color: $tc-gray-40;
         line-height: $base-unit*4;
       }
-      hr{
+
+      hr {
         margin: $base-unit 0 $base-unit*2 0;
         background-color: $tc-gray-10;
         height: 1px;
         border: 0;
       }
-      .comment-collapse{
-        text-align:center;
+
+      .comment-collapse {
+        text-align: center;
         height: 20px;
         position: relative;
         margin-bottom: 35px;
-        .comment-collapse-button{
+
+        .comment-collapse-button {
           background: $tc-gray-10;
           border-radius: 176px;
           border: none;
           z-index: 5;
-          position:relative;
+          position: relative;
           padding: 0 15px;
-          display:inline-block;
+          display: inline-block;
           color: $tc-gray-50;
           line-height: $base-unit*4;
           font-size: 12px;
         }
-        &::after{
-          content:"";
-          position:absolute;
-          top:12px;
-          left:0;
-          right:0;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 12px;
+          left: 0;
+          right: 0;
           width: 100%;
-          border-top:solid 1px $tc-gray-10;
+          border-top: solid 1px $tc-gray-10;
           z-index: 1;
         }
+
         &.loading-comments {
           .comment-collapse-button {
             cursor: default;
@@ -105,9 +122,21 @@
       }
     }
   }
-  .comment{
+
+  // Embedded content overrides -- start
+  .onebox-body h3 {
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .comment-body .elided {
+    display: none;
+  }
+  // Embedded content overrides -- end
+
+  .comment {
     background: $tc-gray-neutral-light;
-    box-shadow: 0px 0px 3px 0px rgba(89,167,255,0.00);
+    box-shadow: 0px 0px 3px 0px rgba(89, 167, 255, 0.00);
     border-radius: 4px;
     padding: $base-unit*2;
     margin-bottom: -10px;
@@ -124,203 +153,247 @@
       transform: rotate(-90deg);
     }
 
-    &.self{
+    &.self {
       background: $tc-dark-blue-10;
+
       &:before {
         border-right: 14px solid $tc-dark-blue-10;
       }
     }
-    .comment-body{
+
+    .comment-body {
       @include roboto;
       font-size: 13px;
-      color: #47474F;
+      color: #47474f;
       line-height: $base-unit*4;
     }
-    .comment-read-more{
+
+    .comment-read-more {
       @include roboto;
       font-size: 11px;
-      color: #59A7FF;
+      color: #59a7ff;
       line-height: $base-unit*6;
     }
   }
-  .comment-form{
+
+  .comment-form {
     textarea,
-    input{
+    input {
       @include roboto;
       font-size: $tc-label-md;
 
-      @include placeholder{
+      @include placeholder {
         font-size: $tc-label-md;
         color: $tc-gray-40;
         text-transform: none;
       }
     }
-    .tc-textarea{
+
+    .tc-textarea {
       margin-top: 0;
-      textarea{
+
+      textarea {
         @include roboto;
         font-size: 13px;
-        color: #47474F;
+        color: #47474f;
         line-height: 20px;
         min-height: 80px;
       }
     }
   }
+
   .panel-buttons,
-  .modal-buttons{
+  .modal-buttons {
     padding: 0 0 10px 0;
     text-align: center;
   }
-  .tc-textarea{
+
+  .tc-textarea {
     .public-DraftEditor-content,
-    textarea{
+    textarea {
       @include roboto;
       min-height: 145px;
       color: $tc-gray-70;
       line-height: $base-unit*5;
       font-size: $tc-label-lg;
     }
-    &.has-footer{
-      textarea{
+
+    &.has-footer {
+      textarea {
         margin-bottom: 0;
         border-bottom: none;
       }
     }
-    .textarea-footer{
+
+    .textarea-footer {
       padding: 12px 15px;
       background: $tc-gray-neutral-light;
       border: 1px solid $tc-gray-20;
       border-top: 1px solid $tc-dark-blue-90;
       display: flex;
-      .textarea-buttons{
+
+      .textarea-buttons {
         display: flex;
         align-items: center;
+
         button,
-        .separator{
+        .separator {
           height: 16px;
           width: 16px;
           margin-right: 15px;
           display: inline-block;
           border: none;
         }
-        .button{
+
+        .button {
           cursor: pointer;
         }
-        .separator{
+
+        .separator {
           width: 1px;
           height: 20px;
           background-color: $tc-gray-30;
         }
+
         button {
           &:hover {
             opacity: 0.5;
           }
+
           &.active {
-            opacity: 1
+            opacity: 1;
           }
         }
-        .bold{
+
+        .bold {
           background: url('../../assets/images/tc-text-16-bold.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/tc-text-16-bold-active.svg') no-repeat;
           }
         }
-        .italic{
+
+        .italic {
           background: url('../../assets/images/tc-text-16-italic.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/tc-text-16-italic-active.svg') no-repeat;
           }
         }
-        .underline{
+
+        .underline {
           background: url('../../assets/images/tc-text-16-underline.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/tc-text-16-underline-active.svg') no-repeat;
           }
         }
-        .ordered-list{
+
+        .ordered-list {
           background: url('../../assets/images/text-16px_list-numbers.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/text-16px_list-numbers-active.svg') no-repeat;
           }
         }
-        .unordered-list{
+
+        .unordered-list {
           background: url('../../assets/images/text-16px_list-bullet.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/text-16px_list-bullet-active.svg') no-repeat;
           }
         }
-        .code{
+
+        .code {
           background: url('../../assets/images/design-16px_code.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/design-16px_code-active.svg') no-repeat;
           }
         }
-        .quote{
+
+        .quote {
           background: url('../../assets/images/text-16px_quote.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/text-16px_quote-active.svg') no-repeat;
           }
         }
-        .attach{
+
+        .attach {
           background: url('../../assets/images/media-16px-1_image-02.svg') no-repeat;
+
           &.active {
             background: url('../../assets/images/media-16px-1_image-02-active.svg') no-repeat;
           }
         }
-
       }
-      .tc-btn{
+
+      .tc-btn {
         margin-left: auto;
       }
     }
   }
-  input{
+
+  input {
     @include roboto-medium;
     font-size: $base-unit*4;
 
-    @include placeholder{
+    @include placeholder {
       font-size: $base-unit*4;
       color: $tc-gray-40;
     }
   }
-  input, textarea {
+
+  input,
+  textarea {
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius;
   }
-  a{
+
+  a {
     color: $tc-dark-blue-70;
   }
+
   input {
     @include placeholder {
       text-transform: none;
     }
   }
 }
+
 .panel,
-.modal{
-  .object{
+.modal {
+  .object {
     flex-grow: 1;
     margin-left: $base-unit*2;
   }
-  .panel-body{
+
+  .panel-body {
     display: flex;
   }
+
   .panel-row,
-  .modal-row{
+  .modal-row {
     padding: $base-unit*2 $base-unit*4;
     @include roboto;
     font-size: $tc-label-lg;
     display: flex;
+
     .profile {
       flex-grow: 1;
       margin-left: $base-unit*2;
+
       .name {
         font-weight: bold;
       }
+
       .self {
         color: $tc-gray-30;
         font-weight: bold;
       }
+
       .handle {
         font-size: $tc-label-md;
         color: $tc-gray-50;
@@ -328,7 +401,8 @@
         margin-top: 6px;
       }
     }
-    .title{
+
+    .title {
       margin-left: $base-unit*2;
       color: $tc-gray-50;
       font-size: $tc-label-sm;
@@ -337,35 +411,43 @@
         color: $tc-orange;
       }
     }
+
     .new-post-title {
       max-width: 640px;
       margin-left: 0px;
     }
-    &.add-team-member{
+
+    &.add-team-member {
       cursor: pointer;
       display: flex;
       align-items: center;
     }
+
     &:hover,
-    &.active{
+    &.active {
       background-color: $tc-gray-neutral-light;
     }
   }
+
   .portrait {
     height: 40px;
     width: 40px;
     min-width: 40px;
-    img{
+
+    img {
       width: 40px;
       height: 40px;
       border-radius: 33px;
     }
   }
-  .buttons{
+
+  .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
-    button, a {
+
+    button,
+    a {
       border: none;
       cursor: pointer;
       opacity: 0.4;
@@ -374,31 +456,37 @@
       background-size: 16px;
       display: inline-block;
       margin-left: $base-unit*3;
-      &:hover{
+
+      &:hover {
         opacity: 1.0;
       }
     }
-    .btn-user-remove{
+
+    .btn-user-remove {
       background: url('../../assets/images/user-remove.svg') no-repeat;
     }
-    .btn-promote{
+
+    .btn-promote {
       background: url('../../assets/images/promote.svg') no-repeat;
     }
-    .btn-leave{
+
+    .btn-leave {
       background: url('../../assets/images/exit.svg') no-repeat;
     }
-    .btn-edit{
+
+    .btn-edit {
       background: url('../../assets/images/ui-16px-1_pencil.svg') no-repeat;
     }
-    .btn-remove{
+
+    .btn-remove {
       background: url('../../assets/images/ui-16px-1_trash-simple.svg') no-repeat;
     }
   }
 }
 
-.timeline{
-  &>.panel,
-  &>.modal{
+.timeline {
+  & > .panel,
+  & > .modal {
     margin-bottom: $base-unit*4;
   }
 }
@@ -419,8 +507,10 @@
 
 .panel-body.comment-count-container {
   padding-bottom: 0;
+
   .card-body {
     padding-bottom: 0;
+
     &.comment-section {
       hr.no-margin {
         margin-bottom: 0;

From 5a4ab6c16c6e6f095fc5df73c8508c13022b89b3 Mon Sep 17 00:00:00 2001
From: Victor George <vgeorge@appirio.com>
Date: Thu, 10 Nov 2016 10:27:12 -0800
Subject: [PATCH 2/2] linter formatting fixes

---
 src/projects/detail/components/SidebarNav.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/projects/detail/components/SidebarNav.jsx b/src/projects/detail/components/SidebarNav.jsx
index bc9b3bd15..ffce930a5 100644
--- a/src/projects/detail/components/SidebarNav.jsx
+++ b/src/projects/detail/components/SidebarNav.jsx
@@ -8,7 +8,7 @@ require('./SidebarNav.scss')
 const scrollProps = {
   spy: true,
   smooth: true,
-  offset: -70,// 60px for top bar and 10px for margin from nav bar
+  offset: -70, // 60px for top bar and 10px for margin from nav bar
   duration: 500,
   activeClass: 'active'
 }