From ed3a71ffdffb8ce4c688d74838438ed89757d9d8 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Thu, 22 Aug 2019 17:30:54 +0200
Subject: [PATCH] feat: make additional task info look better for dark theme

---
 src/_variables.scss                           |  5 +-
 .../github-issue-content.component.scss       |  1 -
 .../task-additional-info.component.html       |  7 +--
 .../task-additional-info.component.scss       | 51 ++++++++++++++-----
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/_variables.scss b/src/_variables.scss
index cb1fee6c7b..1a2f10c3f8 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -8,8 +8,11 @@ $card-border-radius: 4px;
 // ------
 $dark-theme-bg-darker: rgb(39, 39, 39);
 $dark-theme-bg-lighter: rgb(70, 70, 70);
+$dark-theme-bg-lightest:rgb(84, 84, 84);
 $dark-theme-bg: rgb(48, 48, 48);
 $light-theme-bg: #fafafa;
+$light-theme-bg-darker: #f1f1f1;
+
 $dark-theme-text-color: #bdbdbd;
 $light-theme-text-color: #333333;
 $light-theme-extra-border-color: #dddddd;
@@ -37,7 +40,7 @@ $component-max-width: 800px;
 // ----------
 $standard-note-bg-light: #ffffff;
 $standard-note-fg-light: $light-theme-text-color;
-$standard-note-bg-dark: $dark-theme-bg-darker;
+$standard-note-bg-dark: $dark-theme-bg-lightest;
 $standard-note-fg-dark: #eeeeee;
 
 
diff --git a/src/app/features/issue/github/github-issue/github-issue-content/github-issue-content.component.scss b/src/app/features/issue/github/github-issue/github-issue-content/github-issue-content.component.scss
index 1057686352..53e16faa99 100644
--- a/src/app/features/issue/github/github-issue/github-issue-content/github-issue-content.component.scss
+++ b/src/app/features/issue/github/github-issue/github-issue-content/github-issue-content.component.scss
@@ -5,7 +5,6 @@
 .table-wrapper {
   margin: $s*2;
   margin-bottom: $s;
-  @include standardThemeTextColor();
 }
 
 .comment {
diff --git a/src/app/features/tasks/task-additional-info/task-additional-info.component.html b/src/app/features/tasks/task-additional-info/task-additional-info.component.html
index cac60eaaec..971708c95f 100644
--- a/src/app/features/tasks/task-additional-info/task-additional-info.component.html
+++ b/src/app/features/tasks/task-additional-info/task-additional-info.component.html
@@ -7,7 +7,8 @@
       <ng-template mat-tab-label>
         <issue-header [task]="taskData"></issue-header>
       </ng-template>
-      <issue-content [task]="taskData"></issue-content>
+      <issue-content [task]="taskData"
+                     class="tab-wrapper issue-content-wrapper"></issue-content>
     </mat-tab>
 
     <mat-tab>
@@ -16,7 +17,7 @@
         <span class="tab-label-text">{{T.F.TASK.ADDITIONAL_INFO.NOTES|translate}}</span>
       </ng-template>
 
-      <div class="mat-elevation-z1 notes-tab">
+      <div class="tab-wrapper note-wrapper">
         <inline-markdown (changed)="changeTaskNotes($event)"
                          [model]="taskData.notes"></inline-markdown>
       </div>
@@ -28,7 +29,7 @@
         <span class="tab-label-text">{{T.F.TASK.ADDITIONAL_INFO.ATTACHMENTS|translate:{nr: issueAttachments?.length + (localAttachments$|async)?.length} }}</span>
       </ng-template>
 
-      <div class="attachment-list-tab">
+      <div class="tab-wrapper attachment-list-tab-wrapper">
         <ng-container *ngIf="taskData.issueType">
           <h3 class="mat-h3"
               style="margin-bottom: 0;">{{T.F.TASK.ADDITIONAL_INFO.ISSUE_TYPE_ATTACHMENTS|translate:{issueType: taskData.issueType} }}</h3>
diff --git a/src/app/features/tasks/task-additional-info/task-additional-info.component.scss b/src/app/features/tasks/task-additional-info/task-additional-info.component.scss
index c2e2c80c05..46b64f2335 100644
--- a/src/app/features/tasks/task-additional-info/task-additional-info.component.scss
+++ b/src/app/features/tasks/task-additional-info/task-additional-info.component.scss
@@ -89,25 +89,48 @@
   white-space: nowrap;
 }
 
-.attachment-list-tab {
-  padding: $s $s*2;
 
-  h3 {
-    margin-bottom: $s;
-  }
-}
-
-.attachment-list-tab,
+.attachment-list-tab-wrapper,
 .mat-tab-body {
   // needed to overstyle current task
   @include standardThemeTextColor();
 }
 
 
-.notes-tab {
-  margin: $s/2;
-  margin-bottom: 2px;
+.tab-wrapper {
   border-radius: $card-border-radius;
+  overflow: hidden;
+
+  &.issue-content-wrapper {
+    @include darkTheme {
+      //padding: $s 0;
+    }
+  }
+
+  &.attachment-list-tab-wrapper {
+    padding: $s $s*2;
+
+    h3 {
+      margin-bottom: $s;
+    }
+  }
+
+  &.note-wrapper {
+    margin: $s $s;
+    display: block;
+    box-shadow: $whiteframe-shadow-4dp;
+  }
+
+  @include darkTheme {
+    background: $standard-note-bg-dark;
+    color: #fff;
+    margin: $s $s;
+    display: block;
+    box-shadow: $whiteframe-shadow-4dp;
+
+    //color: $standard-note-fg-light;
+    //background: #f1f1f1;
+  }
 
   ::ng-deep {
     .markdown-wrapper {
@@ -117,17 +140,17 @@
 
     .markdown-unparsed,
     .markdown-parsed {
-      border: 1px solid #dddddd;
+      //border: 1px solid #dddddd;
       @include standardThemeTextColor();
       @include lightTheme {
         //background: $standard-note-bg-light;
-        background: #f1f1f1;
+        background: $light-theme-bg-darker;
         color: $standard-note-fg-light;
       }
 
       @include darkTheme {
         background: $standard-note-bg-dark;
-        color: $standard-note-fg-dark;
+        color: #fff;
         border-color: #333333;
       }
     }