Merge pull request #367 from bitlogic/SBIT-617-Corregir-componente-BannerTop

Sbit 617 corregir componente banner top

Author: brunoportesio

src/components/Banners/BannerTop.js

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { getImage } from "gatsby-plugin-image"
+import { BgImage } from "gbimage-bridge"
 import "./BannerTop.scss"
 
 const BannerTop = ({ banner }) => {
@@ -18,14 +19,14 @@ const BannerTop = ({ banner }) => {
           loading="eager"
           fetchpriority="high"
         >
-          <div className={`BannerTop__titleContainer ${variant}`}>
+          <div className="BannerTop__titleContainer">
             <h1 className={`BannerTop__title ${variant && "background container"}`}>
               {title}
             </h1>
           </div>
         </BgImage>
       ) : (
-        <div className={`BannerTop__titleContainer ${variant}`}>
+        <div className="BannerTop__titleContainer">
           <h1 className={`BannerTop__title ${variant && "background container"}`}>
             {title}
           </h1>
@@ -48,4 +49,4 @@ BannerTop.propTypes = {
   }).isRequired,
 }
 
-export default BannerTop
+export default BannerTop

src/components/Banners/BannerTop.scss

@@ -1,51 +1,43 @@
 @import "../../styles/global.scss";
 
 .BannerTop {
-  position: relative;
-  position: relative;
-
   &__bgImage {
     min-height: 40vh;
     width: 100%;
     display: flex;
     align-items: flex-end;
-    object-fit: cover;
   }
 
   &__titleContainer {
     position: absolute;
     bottom: 0;
-    width: 100%;
-    width: 100%;
-    padding: 24px 8px;
-    background-color: rgba(36, 39, 42, 0.4);
-    z-index: 2;
     background-color: rgba(36, 39, 42, 0.4);
-    z-index: 2;
+    padding: 24px 8px;
+    width: 100%;
   }
 
   &__title {
+    text-wrap: pretty;
     color: $white;
+    font-weight: $max-bold;
     margin-bottom: 0;
     text-transform: uppercase;
-    font-family: "Plain", sans-serif;
-    font-weight: 900;
-    font-size: $large;
-    font-family: "Plain", sans-serif;
-    font-weight: 900;
-    font-size: $large;
 
     &:not(.background) {
       text-transform: none;
       font-size: $medium;
     }
   }
 
-  &.background &__title {
-    padding: 24px 8px;
+  &.background {
+    &__titleContainer {
+      padding: 24px 8px;
+    }
   }
+}
 
-  @media (min-width: $breakpoint-md) {
+@media (min-width: $breakpoint-md) {
+  .BannerTop {
     &__bgImage {
       min-height: 55vh;
     }
@@ -54,20 +46,14 @@
       padding: 30px;
     }
 
-    &__title {
-      padding: 30px;
+    &__title:not(.background) {
       font-size: $extra-large;
     }
 
-    &.background &__title {
-      padding: 30px 0;
-    }
-  }
-
-  @media (max-width: $breakpoint-md) {
-    &__titleContainer {
-      background-color: transparent;
-      backdrop-filter: none;
+    &.background {
+      &__titleContainer {
+        padding: 30px 0;
+      }
     }
   }
-}
+}