Merge pull request #128 from bitlogic/SBIT-616-Corregir-componente-BannerTop

fix banner top

Author: brunoportesio

src/components/Banners/BannerTop.js

@@ -1,26 +1,36 @@
 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 }) => {
   const { image, imagePage, title, variant = "" } = banner
-  const imageBanner = getImage(image?.localFile) || getImage(imagePage?.localFile)
+
+  const imageBanner =
+    getImage(image?.localFile) || getImage(imagePage?.localFile)
 
   return (
     <div className={`BannerTop ${variant}`}>
-      <h1 className={`BannerTop__title ${variant && "background container"}`}>
-        {title}
-      </h1>
-      {imageBanner && (
-        <GatsbyImage
+      {imageBanner ? (
+        <BgImage
           image={imageBanner}
-          alt={title}
           className="BannerTop__bgImage"
           loading="eager"
           fetchpriority="high"
-        />
+        >
+          <div className="BannerTop__titleContainer">
+            <h1 className={`BannerTop__title ${variant && "background container"}`}>
+              {title}
+            </h1>
+          </div>
+        </BgImage>
+      ) : (
+        <div className="BannerTop__titleContainer">
+          <h1 className={`BannerTop__title ${variant && "background container"}`}>
+            {title}
+          </h1>
+        </div>
       )}
     </div>
   )

src/components/Banners/BannerTop.scss

@@ -1,36 +1,38 @@
 @import "../../styles/global.scss";
 
 .BannerTop {
-  position: relative;
-
   &__bgImage {
     min-height: 40vh;
     width: 100%;
-    object-fit: cover;
+    display: flex;
+    align-items: flex-end;
   }
 
-  &__title {
+  &__titleContainer {
     position: absolute;
     bottom: 0;
-    width: 100%;
-    padding: 24px 8px;
     background-color: rgba(36, 39, 42, 0.4);
+    padding: 24px 8px;
+    width: 100%;
+  }
+
+  &__title {
+    text-wrap: pretty;
     color: $white;
+    font-weight: $max-bold;
     margin-bottom: 0;
     text-transform: uppercase;
-    z-index: 2;
-    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;
+    }
   }
 }
 
@@ -40,13 +42,18 @@
       min-height: 55vh;
     }
 
-    &__title {
+    &__titleContainer {
       padding: 30px;
+    }
+
+    &__title:not(.background) {
       font-size: $extra-large;
     }
 
-    &.background &__title {
-      padding: 30px 0;
+    &.background {
+      &__titleContainer {
+        padding: 30px 0;
+      }
     }
   }
-}
+}