1 files changed, 49 insertions, 27 deletions

diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 322363d7f4b..0c9d151e3cd 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -48,7 +48,7 @@
 
 .common-note-form {
   .md-area {
-    border: 1px solid $border-color;
+    border: 1px solid $gray-400;
     border-radius: $border-radius-large;
     transition: border-color ease-in-out 0.15s,
       box-shadow ease-in-out 0.15s;
@@ -65,19 +65,41 @@
       }
     }
 
-    // Disable inner focus
-    textarea:focus {
-      @include gl-shadow-none;
+    &:hover,
+    &:focus-within {
+      @include gl-shadow-md;
     }
-  }
 
-  .comment-warning-wrapper:focus-within {
-    @include gl-focus;
-  }
-}
+    &:hover {
+      border: 1px solid $gray-500;
+    }
 
-.md-area:focus-within {
-  @include gl-focus;
+    &:focus-within {
+      border: 1px solid $gray-900;
+    }
+
+    // Add focus
+    .zen-backdrop:not(.fullscreen) textarea {
+      width: calc(100% - 4px);
+      margin: 2px;
+      padding-left: calc(#{$gl-spacing-scale-5} - 2px);
+
+      .gl-dark & {
+        width: calc(100% - 6px);
+        margin: 2px 3px;
+        padding-left: calc(#{$gl-spacing-scale-5} - 3px);
+      }
+
+      &:focus {
+        @include gl-focus;
+      }
+    }
+
+    .note-textarea-rounded-bottom {
+      border-bottom-left-radius: calc(#{$border-radius-large} - 1px);
+      border-bottom-right-radius: calc(#{$border-radius-large} - 1px);
+    }
+  }
 }
 
 .md-header {
@@ -217,6 +239,7 @@ table {
 
   .md-area {
     background-color: $white;
+    @include gl-rounded-base;
   }
 }
 
@@ -245,24 +268,21 @@ table {
 .diff-file,
 .commit-diff {
   .discussion-reply-holder {
-    background-color: $gray-light;
     border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base;
-    padding: $gl-padding;
+    padding: 0 $gl-padding $gl-padding-12 $gl-padding;
     border-top: 1px solid $gray-50;
 
     + .new-note {
-      background-color: $gray-light;
       border-top: 1px solid $gray-50;
     }
 
     &.is-replying {
-      padding-bottom: $gl-padding;
-      background-color: $white;
+      padding-top: $gl-padding-12;
     }
 
     &.internal-note,
     &.internal-note.is-replying {
-      background-color: $orange-50;
+      padding-top: $gl-padding-12 !important;
     }
 
     .user-avatar-link {
@@ -273,6 +293,11 @@ table {
   }
 }
 
+.diff-td > .content > .discussion-reply-holder {
+  padding-top: $gl-padding-12;
+  @include gl-bg-gray-10;
+}
+
 .discussion-with-resolve-btn {
   @include media-breakpoint-up(sm) {
     display: flex;
@@ -307,13 +332,19 @@ table {
     resize: none;
     padding: $gl-padding-8 $gl-padding-12;
     line-height: 1;
-    border: 1px solid $border-color;
+    border: 1px solid $gray-200;
     background-color: $white;
     overflow: hidden;
+    transition: border-color ease-in-out 0.15s,
+      box-shadow ease-in-out 0.15s;
 
     @include media-breakpoint-down(xs) {
       margin-bottom: $gl-padding-8;
     }
+
+    &:hover {
+      border: 1px solid $gray-500;
+    }
   }
 }
 
@@ -348,10 +379,6 @@ table {
 .toolbar-text {
   font-size: 14px;
   line-height: $gl-spacing-scale-7;
-
-  @include media-breakpoint-up(md) {
-    float: left;
-  }
 }
 
 .note-form-actions {
@@ -438,9 +465,4 @@ table {
 .comment-warning-wrapper {
   transition: border-color ease-in-out 0.15s,
     box-shadow ease-in-out 0.15s;
-
-  .md-area {
-    border: 0;
-    box-shadow: none;
-  }
 }