launchpad-reviewers team mailing list archive

[Peter Makowski <mp+447200@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/launchpad:update-diff-view-ui into launchpad:master.

Commit message:
feat: improved diff view styles
- increase base font-size to 0.9375rem (15px)
- update diff bg colors for improved contrast


Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~petermakowski/launchpad/+git/launchpad/+merge/447200

## Screenshots
### Before
https://share.cleanshot.com/Mt1hRNg1
### After
https://share.cleanshot.com/5vxZHXRT
-- 
Your team Launchpad code reviewers is requested to review the proposed merge of ~petermakowski/launchpad:update-diff-view-ui into launchpad:master.

diff --git a/lib/canonical/launchpad/icing/css/base.scss b/lib/canonical/launchpad/icing/css/base.scss
index 970fce5..e1f76e0 100644
--- a/lib/canonical/launchpad/icing/css/base.scss
+++ b/lib/canonical/launchpad/icing/css/base.scss
@@ -4,8 +4,8 @@ body {
     /* line-height is the same as the sprite height. */
     font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma,
                  sans-serif;
-    font-size: 0.8rem;
-    line-height: 1.2rem;
+    font-size: 0.9375rem; /* 15px */
+    line-height: 1.5;
     color: #000;
 
     &.private, &.public {
diff --git a/lib/canonical/launchpad/icing/css/layout.scss b/lib/canonical/launchpad/icing/css/layout.scss
index f0def2f..cf82975 100644
--- a/lib/canonical/launchpad/icing/css/layout.scss
+++ b/lib/canonical/launchpad/icing/css/layout.scss
@@ -144,7 +144,7 @@
       left: 0;
       position: absolute;
       right: 0;
-      bottom: 2px;
+      bottom: 4px;
     }
 
     li {
diff --git a/lib/canonical/launchpad/icing/css/modifiers.scss b/lib/canonical/launchpad/icing/css/modifiers.scss
index 8e69d67..6a29448 100644
--- a/lib/canonical/launchpad/icing/css/modifiers.scss
+++ b/lib/canonical/launchpad/icing/css/modifiers.scss
@@ -288,6 +288,15 @@ div {
     margin: 0 auto;
   }
 
+  /**
+    font-size overwrite for timeline graphs
+    to fit in fixed size containers
+  **/
+  .yui3-timelinegraph {
+      font-size: 0.8rem;
+      line-height: 1rem;
+  }
+
   /* Hidden must be the last rule because it overides all other rules. */
 
   .inline {
diff --git a/lib/canonical/launchpad/icing/style.css b/lib/canonical/launchpad/icing/style.css
index 125f723..04dd339 100644
--- a/lib/canonical/launchpad/icing/style.css
+++ b/lib/canonical/launchpad/icing/style.css
@@ -28,8 +28,8 @@
 div#edit-description,
 div#edit-commit_message {
     font-family: "Ubuntu Mono variable", "Ubuntu Mono", Consolas, Monaco, Courier, monospace;
-    font-size: 0.8rem;
-    line-height: 1.2rem;
+    font-size: 0.9375rem; /* 15px */
+    line-height: 1.5;
     margin: 1em 0;
     }
 
@@ -241,7 +241,7 @@ a.bg-image {
 * html .boardComment {float: left; clear: both; width: 99%;} /* IE float bug */
 
 .boardCommentDetails {
-  background-color: #eee;
+  background-color: #f4f6f9;
   border-bottom: 1px solid #ddd;
   padding: 0.5em 12px;
 }
@@ -275,14 +275,16 @@ a.bg-image {
 }
 .boardCommentContent { line-height: 1.4em;}
 .boardCommentFooter {
-  background-color: #F8F8F8;
+  background: #FFF;
   color: #666;
   padding: 0.15em 12px;
   border-top: 1px solid #ddd;
   text-align: right;
 }
 .boardCommentFooter a {
+  display: block;
   margin-left: 1.5em;
+  padding: 0.625rem; /* 10px */
 }
 .from-superseded {background-color: #ffffcc;}
 .adminHiddenComment {background-color:gray;}
@@ -630,13 +632,31 @@ div.diff .horizontal {
   margin: 0;
 }
 
-#proposal-summary td, #proposal-summary th { padding-bottom: 2px; }
+#proposal-summary td, #proposal-summary th {
+  padding-bottom: 2px;
+  color: #656d76;
+}
+
+#summary-row-3-approved-revision td,
+#summary-row-merge-instruction-git td {
+    font-family: "Ubuntu Mono variable", "Ubuntu Mono", Consolas, Monaco, Courier, monospace;
+    font-size: 0.8125rem; /* 14px */
+}
+
+table#proposal-summary td,
+table.diff tr:not(.inline-comments) {
+    line-height: 1.5;
+    font-weight: 440;
+    padding-left: 0.625rem; /* 10px */
+}
 table.diff {
    white-space: pre-wrap;
    width: 100%;
    background-color: white;
    margin-bottom: 0.5em;
    overflow-wrap: break-word;
+    /* negative margin to break out of the parent `.yui-t4 .yui-main .yui-b` */
+    margin-right: -25%;
 }
 table.unidiff {
    table-layout: fixed;
@@ -649,12 +669,21 @@ table.diff .nav-cursor:before {
    float: left;
    margin-left: 1.25em;
 }
-table.diff .text { padding-left: 0.5em; }
+
+table.diff .text, table.diff .line-no, table.diff .ss-line-no {
+  font-size: 0.8750rem; /* 14px */
+  line-height: 1.5;
+}
+
+table.diff .text {
+  padding-left: 0.625rem; /* 10px */
+}
 table.diff .line-no, table.diff .ss-line-no {
   text-align: right;
   background-color: #f6f6f6;
-  color: #999;
-  border-right: solid 4px white;
+  padding-right: 0.625rem; /* 10px */
+  color: #6e7781;
+  border-right: 0;
   width: 4em;
   cursor: pointer;
 }
@@ -663,12 +692,18 @@ table.diff .line-no.active, table.diff .ss-line-no.active {
   background: url(/@@/add) #f6f6f6 center left no-repeat;
 }
 table.diff .diff-chunk, table.diff .diff-file, table.diff .diff-header {
- font-weight: bold;
+  background: #f4f6f9;
+  font-weight: 600;
 }
-table.diff .diff-added { background-color: #92ED92; }
-table.diff .diff-removed { background-color: #FF7F7F; }
+table.diff .diff-added { background-color: #e1ffe7; }
+table.diff .diff-removed { background-color: #ffe6e4; }
 table.diff .inline-comments > td > div {
-  margin: 0 1em 1.5em 1em;
+  margin: 0;
+}
+
+table.diff .inline-comment {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
 }
 table.diff .inline-comments .yui3-ieditor { padding-right:0!important; }
 table.diff .inline-comments .yui3-ieditor-multiline .yui3-ieditor-btns
@@ -676,7 +711,8 @@ table.diff .inline-comments .yui3-ieditor-multiline .yui3-ieditor-btns
   word-wrap: normal;
 }
 table.diff .inline-comments .boardComment {
-  margin: 1em 0;
+  margin: 0.5rem;
+  max-width: 43.75rem; /* 700px */
 }
 table.diff .inline-comments .boardCommentBody {
   word-wrap: break-word;