enhance(curriculum): improve design (#11064)

* enhance(curriculum): add margin above "Resources:"

* enhance(curriculum): use grey border on module hover

* enhance(curriculum): update notes background-color in dark theme

* enhance(curriculum): use same padding around notes

* enhance(curriculum): adjust ul/ol/p spacing in notes

* enhance(curricullum): reduce margin below list

* chore(curriculum): update background color

* chore(curriculum): use bg color from label bg

* chore(curriculum): sync notes hue with bg-color

* fixup! chore(curriculum): use bg color from label bg

* fix(curriculum): revert --curiculum-bg-color in light theme

Author: caugner

Diff for: client/src/curriculum/index.scss

@@ -228,7 +228,27 @@
         border: 0;
         border-radius: var(--elem-radius);
         margin: 1rem;
-        padding: 0.5rem 2rem;
+        padding: 1rem;
+
+        ol,
+        ul {
+          padding-left: 1rem;
+
+          li:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        ol,
+        ul,
+        p {
+          margin-top: 0.5rem;
+        }
+
+        > p:first-child {
+          // The "Notes:" paragraph.
+          margin-top: 0;
+        }
 
         > :last-child {
           margin-bottom: 0;
@@ -251,7 +271,7 @@
 
       ol,
       ul {
-        margin: 1rem 0 2rem;
+        margin: 1rem 0;
         padding-left: 2rem;
 
         ol,

Diff for: client/src/curriculum/module.scss

@@ -53,6 +53,7 @@
 
     p.curriculum-resources {
       margin-bottom: 0.5rem;
+      margin-top: 2rem;
 
       + ul {
         padding-left: 2rem;

Diff for: client/src/ui/base/_themes.scss

@@ -264,7 +264,7 @@
   --curriculum-color-topic-practices: #{$mdn-color-light-theme-violet-60};
   --curriculum-color-landing-laptop: #e3642a;
   --curriculum-border-color-list-item: #f2f1f1;
-  --curriculum-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
+  --curriculum-border-color-list-item-hover: var(--text-inactive);
   --curriculum-bg-color-list-item-body: #fff;
   --curriculum-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60};
   --curriculum-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60};
@@ -555,8 +555,8 @@
   --curriculum-color-topic-scripting: #f2cf8f;
   --curriculum-color-topic-tooling: #8ff2a4;
   --curriculum-color-topic-practices: #c891f2;
-  --curriculum-bg-color: #664b33;
-  --curriculum-bg-color-note: #321d13;
+  --curriculum-bg-color: #321d13;
+  --curriculum-bg-color-note: #332c29;
   --curriculum-bg-large-color: #343434;
   --curriculum-bg-color-topic-standards: #994b53;
   --curriculum-bg-color-topic-styling: #4e609e;
@@ -573,7 +573,7 @@
   --curriculum-color-landing-laptop: #b25c35;
   --curriculum-bg-color-list-item-body: #000;
   --curriculum-border-color-list-item: #4e4e4e;
-  --curriculum-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
+  --curriculum-border-color-list-item-hover: var(--text-inactive);
   --curriculum-module-label-color: #e3642a;
   --curriculum-module-label-bg-color: #321d13;
   --curriculum-bg-color-list-item-topic-standards: #343434;