Remove and adjust jumbotron usage

app/assets/stylesheets/application.sass.scss

@@ -108,7 +108,6 @@ $unicodeRangeValues in Lexend.$unicodeMap {
 "components/icons",
 "components/inbox-actions",
 "components/inbox-entry",
-"components/jumbotron",
 "components/locales",
 "components/mobile-nav",
 "components/notifications",

app/assets/stylesheets/components/_jumbotron.scss

@@ -1,35 +0,0 @@
-.jumbotron {
-  $this: &;
-  display: flex;
-  background-color: var(--primary);
-  color: RGB(var(--primary-text));
-  text-align: center;
-  border-radius: 0;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: RGB(var(--primary-text));
-  }
-
-  a:not(.btn) {
-    color: RGB(var(--primary-text));
-    opacity: 0.6;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    .btn {
-      opacity: 1;
-    }
-  }
-
-  &__content {
-    width: 100%;
-    align-self: center;
-  }
-}

app/assets/stylesheets/overrides/_colors.scss

@@ -10,4 +10,12 @@
 
 .text-muted {
   color: RGB(var(--muted-text)) !important;
-}
+}
+
+.text-bg-primary {
+  color: RGB(var(--primary-text)) !important;
+
+  a:not(.btn) {
+    color: inherit !important;
+  }
+}

app/views/about/about.html.haml

@@ -1,8 +1,8 @@
-.jumbotron
-  .jumbotron__content
-    %h1= APP_CONFIG["site_name"]
-    %p= t(".subtitle")
 .container
+  .card.bg-primary.text-bg-primary.my-3
+    .card-body
+      %h1= APP_CONFIG["site_name"]
+      %p= t(".subtitle")
   .row
     .col-sm-8
       .card.card--fullheight

app/views/about/index.html.haml

@@ -1,7 +1,7 @@
 - provide(:title, APP_CONFIG["site_name"])
-.jumbotron
-  .jumbotron__content
-    .container
+.container
+  .card.bg-primary.my-3.text-bg-primary.text-center
+    .card-body.py-4
       = render "layouts/messages"
       %h1= APP_CONFIG["site_name"]
       %p= t(".subtitle")
@@ -11,7 +11,6 @@
       %small
         = t(".already_member")
         = link_to t("voc.login"), new_user_session_path
-.container
   .row.my-5.my-sm-10
     .col-sm-6.order-12.order-sm-1.text-center.text-sm-right
       %h2.mb-4= t(".questions.header")

app/views/discover/index.html.haml

@@ -1,10 +1,9 @@
 - provide(:title, generate_title(t(".title")))
-
-.jumbotron
-  .jumbotron__content
-    %h1= t(".heading")
-    %p= t(".subheading", app_title: APP_CONFIG["site_name"])
 .container
+  .card.bg-primary.text-bg-primary.my-3
+    .card-body
+      %h1= t(".heading")
+      %p= t(".subheading", app_title: APP_CONFIG["site_name"])
   .row
     .col-md-7.col-sm-6
       %h2= t(".content.heading")

app/views/layouts/feedback.html.haml

@@ -1,8 +1,7 @@
-.jumbotron.jumbotron--particles
-  .jumbotron__particles#particles
-  .jumbotron__content
-    %h1= t(".heading")
 .container
+  .card.bg-primary.text-bg-primary.my-3
+    .card-body
+      %h1= t(".heading")
   - unless params[:action] == "consent"
     .card
       .list-group.list-group-horizontal-sm.text-center