⬆️(project) upgrade to richie 2.0.0-beta.5

We want to upgrade to the last richie version which contain new
integration for Program glimpse and some minor fixes.

This update the Python requirements, the frontend requirements and
color theme.

CHANGELOG.md

@@ -10,7 +10,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Changed
 
-- Upgrade richie to 2.0.0-beta.4.
+- Upgrade richie to 2.0.0-beta.5.
 - Update "main.scss" file to import richie Sass sources to be able to
   override settings.
 - Update project settings to add styleguide and missing new settings.

requirements/base.txt

@@ -7,7 +7,7 @@ django-storages==1.8
 dockerflow==2019.10.0
 gunicorn==20.0.4
 psycopg2-binary==2.8.5
-richie==2.0.0-beta.4
+richie==2.0.0-beta.5
 sentry-sdk==0.14.3
 
 # Google sheet importer

src/backend/funmooc/settings.py

@@ -69,7 +69,7 @@ class StyleguideMixin:
         ],
         # Available gradient background
         "gradient_colors": [
-            "robin-gradient",
+            "neutral-gradient",
             "light-gradient",
             "middle-gradient",
             "dark-gradient",
@@ -84,7 +84,7 @@ class StyleguideMixin:
             "light",
             "lightest",
             "indianred3",
-            "robin-gradient",
+            "neutral-gradient",
             "light-gradient",
             "middle-gradient",
             "dark-gradient",

src/frontend/package.json

@@ -31,6 +31,6 @@
     "node-sass": "4.13.1",
     "nodemon": "2.0.3",
     "prettier": "2.0.4",
-    "richie-education": "2.0.0-beta.2"
+    "richie-education": "2.0.0-beta.5"
   }
 }

src/frontend/scss/settings/_colors.scss

@@ -28,14 +28,14 @@ $palette: (
 
 // Named gradients
 // ---------
-$light-gradient: linear-gradient(
+$neutral-gradient: linear-gradient(
   to top,
   r-color('silver') 0,
   r-color('white-three') 13rem,
   r-color('white') 14rem,
   r-color('white')
 );
-$robin-gradient: linear-gradient(
+$light-gradient: linear-gradient(
   79deg,
   r-color('robin-egg-blue') 0%,
   r-color('robin-egg-blue') 10%,
@@ -160,15 +160,15 @@ $transparent-darkest-scheme: (
   hover-svg-color: r-color('lipstick'),
   hover-border-color: r-color('lipstick'),
 );
-$light-gradient-scheme: (
+$neutral-gradient-scheme: (
   font-color: r-color('black-two'),
   svg-color: r-color('black-two'),
-  background: $light-gradient,
+  background: $neutral-gradient,
 );
-$robin-gradient-scheme: (
+$light-gradient-scheme: (
   font-color: r-color('navy-blue'),
   svg-color: r-color('navy-blue'),
-  background: $robin-gradient,
+  background: $light-gradient,
 );
 $middle-gradient-scheme: (
   font-color: r-color('white'),
@@ -201,8 +201,8 @@ $r-theme: (
     light: $light-scheme,
     lightest: $lightest-scheme,
     indianred3: $indianred3-scheme,
+    neutral-gradient: $neutral-gradient-scheme,
     light-gradient: $light-gradient-scheme,
-    robin-gradient: $robin-gradient-scheme,
     middle-gradient: $middle-gradient-scheme,
     dark-gradient: $dark-gradient-scheme,
     white-mask-gradient: $white-mask-gradient-scheme,
@@ -211,8 +211,8 @@ $r-theme: (
     transparent-darkest: $transparent-darkest-scheme,
   ),
   base-gradients: (
+    neutral-gradient: $neutral-gradient,
     light-gradient: $light-gradient,
-    robin-gradient: $robin-gradient,
     middle-gradient: $middle-gradient,
     dark-gradient: $dark-gradient,
     white-mask-gradient: $white-mask-gradient,
@@ -234,6 +234,7 @@ $r-theme: (
     item-divider-border: r-color('light-grey'),
   ),
   body-content: (
+    base-color: r-color('black'),
     base-background: r-color('white'),
     insert-background-image: url('../../richie/images/components/wave-dark.svg'),
     base-link-color: r-color('lipstick'),
@@ -275,9 +276,9 @@ $r-theme: (
       clear: $light-scheme,
       light: $middle-gradient-scheme,
       lightest: $lightest-scheme,
-      gradient-light: $light-gradient-scheme,
+      gradient-neutral: $neutral-gradient-scheme,
       gradient-dark: $dark-gradient-scheme,
-      quinary: $robin-gradient-scheme,
+      quinary: $light-gradient-scheme,
     ),
     alt-arc: url('../../richie/images/components/arc-white.svg'),
     alt-curve: url('../../richie/images/components/curve-white.svg'),
@@ -300,6 +301,7 @@ $r-theme: (
   hero-intro: (
     insert-background-image: null,
     inner-background: $white-mask-gradient,
+    title-color: r-color('lipstick'),
     content-color: r-color('black'),
     search-input-background: r-color('white'),
     search-btn-background: r-color('lipstick'),
@@ -415,23 +417,23 @@ $r-theme: (
   person-glimpse: (
     card-background: r-color('white'),
     base-shadow: 0 1px 2px rgba(r-color('battleship-grey'), 0.4),
+    title-color: r-color('lipstick'),
     empty-background: r-color('white-three'),
     category: $lipstick-scheme,
     category-title: transparent,
     bio-color: r-color('brownish-grey'),
   ),
   program-glimpse: (
     card-background: r-color('white'),
-    card-border: r-color('light-grey'),
+    card-border: null,
+    card-hover-border: null,
     content-color: r-color('brownish-grey'),
     title-color: r-color('ocean-blue'),
+    media-decoration: url('../../richie/images/components/arc-white.svg'),
     empty-background: r-color('white-three'),
-    footer-border: r-color('light-grey'),
-    date-color: r-color('brownish-grey'),
-    cta-color: r-color('white'),
-    cta-background: r-color('lipstick'),
-    cta-hover-background: r-color('lipstick'),
-    hover-border: bar,
+    footer: $indianred3-scheme,
+    base-shadow: 0 0 6px r-color('light-grey'),
+    base-hover-shadow: 0 0 6px r-color('battleship-grey'),
   ),
   program-glimpse-empty: (
     card-color: r-color('brownish-grey'),

src/frontend/scss/settings/_variables.scss

@@ -35,8 +35,10 @@ $container-max-widths: (
 // More space between columns
 $grid-gutter-width: 20px;
 
-// Base body background
+// Base body
+$body-color: r-theme-val(body-content, base-color);
 $body-bg: r-theme-val(body-content, base-background);
+$body-padding-fix: true;
 
 // Typography
 //