improved style of subscription page titles

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Updated the dependencies of: webpack, lodash, eslint, webpack-dev-server, react2angular, auto-ngtemplate-loader, angular-bootstrap-switch, react-refresh-webpack-plugin and eslint-plugin-react
 - Improved error handling in upgrade script
 - Improved the development and production documentations
+- Improved the style of the titles of the subscription page
 - Fix a bug: build status badge is not working
 - Fix a bug: unable to set date formats during installation
 - Fix a bug: unable to cancel the upgrade before it begins

app/frontend/src/stylesheets/app.components.scss

@@ -269,10 +269,27 @@
 
 .list-of-plans {
   .group-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 2em;
     width: 83.33%;
-    border-bottom: 1px solid;
-    padding-bottom: 2em;
-    margin: auto auto 1em;
+    box-sizing: border-box;
+    margin: 3em auto 1em;
+    $border: 5px;
+    background: #FFF;
+    background-clip: padding-box;
+    border: solid $border transparent;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0; right: 0; bottom: 0; left: 0;
+      z-index: -1;
+      margin: -$border;
+      border-radius: inherit;
+    }
   }
 
   .plans-per-group {

app/themes/casemate/style.scss.erb

@@ -306,6 +306,12 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept {
   color: $secondary-text-color;
 }
 
+.list-of-plans {
+  .group-title:before {
+    background: linear-gradient(to left, white, $primary, white);
+  }
+}
+
 .plan-card  {
   .card-footer {
     .cta-button {