Skip to content

Commit 01ea359

Browse files
marino-martinmarino-martin
authored
Merge pull request #259 from bitlogic/SBIT-306
SBIT-306: fix components
2 parents 96f8b64 + 60e8e4e commit 01ea359

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1085
-595
lines changed

‎src/components/Banner/Banner.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useTheme } from "../../context/themeContext"
55
import "./Banner.scss"
66
import PropTypes from 'prop-types'
77
import CustomLink from "../CustomLink/CustomLink"
8+
import CustomImage from "../CustomImage/CustomImage"
89

910
const Banner = ({ data }) => {
1011
const { theme } = useTheme()
@@ -21,23 +22,21 @@ const Banner = ({ data }) => {
2122
const showTitle = () => {
2223
if (variant === "diagonal" || variant === "diagonalReverse") {
2324
return <h2>{title}</h2>
24-
} else {
25-
return <h1>{title}</h1>
2625
}
26+
27+
return <h1>{title}</h1>
2728
}
2829

2930
return (
3031
<div className={`banner ${variant}`}>
3132
<div className="container banner__wrapper">
3233
{variant === "background" ?
33-
<div
34-
className="bgImage"
34+
<div className="bgImage"
3535
style={{
36-
backgroundImage: `url(${image?.url})`,
36+
backgroundImage: image ? `url(${image?.url})` : '',
3737
backgroundPosition: 'center',
38-
// backgroundSize: 'cover',
3938
}}>
40-
<div className="title-background ">
39+
<div className="title-background">
4140
<h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
4241
{summary && (
4342
<MarkdownView
@@ -77,19 +76,18 @@ const Banner = ({ data }) => {
7776
</div>
7877

7978
<div className="imagen">
80-
{image?.url ? (
81-
<img
82-
src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
79+
{image ? (
80+
<CustomImage image={theme === 'dark' && imageDark ? imageDark : image}
81+
alt={image?.alternativeText || title}
82+
className={''}
8383
width={290}
8484
height={200}
85-
alt={image?.alternativeText || title}
86-
/>) : (
85+
/>
86+
) : (
8787
<div className="cont-lottie">
88-
{animation && <Lottie options={{
89-
...defaultOptions,
90-
animationData: animation,
91-
}}
92-
/>}
88+
{animation && (
89+
<Lottie options={{ ...defaultOptions, animationData: animation }} />
90+
)}
9391
</div>
9492
)}
9593
</div>

‎src/components/Banner/Banner.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
-webkit-box-align: center;
2424
-ms-flex-align: center;
2525
align-items: center;
26+
27+
.imagen {
28+
min-height: 450px;
29+
}
2630
}
2731

2832
.cont-lottie {

‎src/components/BannerList/Banner.scss‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,43 @@
22

33
.bannerList {
44
color: $primary;
5+
56
.card_item {
7+
align-items: center;
8+
69
h4 {
710
margin: 0;
811
}
12+
13+
p {
14+
margin: 0;
15+
}
16+
917
a {
1018
color: inherit;
19+
1120
&:hover {
1221
color: $secondary;
1322
}
1423
}
24+
1525
img {
1626
margin: 0;
1727
width: 80px;
28+
object-fit: cover;
1829
}
1930
}
31+
2032
button {
2133
margin-top: 10px;
2234
@include primaryBtn;
2335
align-self: baseline;
36+
2437
a {
2538
color: inherit;
2639
}
2740
}
41+
2842
&__title {
2943
display: flex;
3044
flex-direction: column;
@@ -36,12 +50,7 @@
3650

3751
@media screen and (min-width: $breakpoint-xl) {
3852
.bannerList {
39-
.card_item {
40-
img {
41-
width: 80px;
42-
}
43-
}
44-
&__buttonMobile{
53+
&__buttonMobile {
4554
display: none;
4655
}
4756
}
@@ -59,13 +68,8 @@
5968

6069
@media screen and (min-width: $breakpoint-md) {
6170
.bannerList {
62-
.card_item {
63-
img {
64-
width: 80px;
65-
}
66-
}
67-
&__buttonMobile{
71+
&__buttonMobile {
6872
display: none;
6973
}
7074
}
71-
}
75+
}

‎src/components/BannerList/BannerList.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@ import React from "react"
33
import "./Banner.scss"
44
import useLandingUrl from "../../hooks/useLandingUrl"
55
import PropTypes from "prop-types"
6+
import CustomImage from "../CustomImage/CustomImage"
67

78
export default function BannerList({ data }) {
89
const { title, Card, contactForm, concactFormAnchor, callToAction } = data
910
const getUrl = useLandingUrl()
1011
const cards = Card.map(item => {
1112
return (
12-
<div className="card_item d-flex mb-2">
13+
<div className="card_item d-flex mb-2 gap-2" key={item.id}>
1314
{item?.icon && (
1415
<div className="card_item">
15-
<img className="d-block"
16-
alt={item?.icon?.alternativeText || 'card-icon'}
17-
src={item.icon.url}
18-
placeholder="blurred"
16+
<CustomImage image={item?.icon}
17+
className={'d-block'}
18+
alt={item?.icon?.alternativeText || 'Card icon'}
19+
width={60}
20+
height={60}
1921
/>
2022
</div>
2123
)}
@@ -37,17 +39,17 @@ export default function BannerList({ data }) {
3739
})
3840

3941
return (
40-
<div className="container pt-5">
42+
<div className="container py-5">
4143
<div className="bannerList d-md-flex flex-row">
42-
<h1 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
44+
<h2 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
4345
{title}
4446
{contactForm && concactFormAnchor && callToAction && (
4547
<button>
4648
<a href={concactFormAnchor}>{callToAction}</a>
4749
</button>
4850
)}
49-
</h1>
50-
<div className="bannerList__cards col-md-6 col-xl-6">
51+
</h2>
52+
<div className="bannerList__cards d-flex flex-column col-md-6 col-xl-6 gap-4">
5153
{cards}
5254
</div>
5355
{contactForm && concactFormAnchor && callToAction && (

‎src/components/BlogPage/BlogArticle/BlogArticle.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@ const BlogArticle = ({ title, summary, image, slug, text }) => {
1010

1111
return (
1212
<div className="article__container">
13-
<CustomImage
14-
image={image}
13+
<CustomImage image={image}
1514
alt={image?.alternativeText || title}
1615
className="article__image"
16+
width={140}
17+
height={170}
1718
/>
1819
<div className="article__description">
19-
<h6>{`${title}`}</h6>
20-
<div>
21-
<MarkdownView markdown={`${summary}`}
22-
dangerouslySetInnerHTML={{ __html: summary }}
23-
/>
24-
</div>
20+
<h4>{title}</h4>
21+
<MarkdownView markdown={`${summary}`}
22+
dangerouslySetInnerHTML={{ __html: summary }}
23+
/>
2524
<div className="article__link">
2625
<Link to={slug}>
2726
<small>{text || 'Ver más'}</small>

‎src/components/BlogPage/BlogArticle/BlogArticle.scss‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,67 @@
11
@import "../../../styles/global.scss";
2+
23
.article {
34
color: $primary;
5+
46
&__container {
57
display: flex;
68
justify-content: center;
79
align-items: center;
810
width: 100%;
11+
height: 100%;
912
padding: 0.5em;
1013
color: $primary;
1114
}
15+
1216
&__image {
1317
width: 100%;
1418
height: 170px;
1519
transition: opacity 3s ease-in;
1620
border-radius: 8px;
1721
}
22+
1823
&__description {
19-
// display: flex;
20-
// flex-direction: column;
21-
// justify-content: flex-start;
2224
position: relative;
2325
width: 100%;
2426
height: 170px;
2527
padding: 0 0 0 15px;
28+
2629
h1,
2730
h2,
2831
h3,
2932
h4,
3033
h5,
3134
h6 {
3235
padding-left: 0;
33-
// font-size: 15px !important;
34-
margin-bottom: 15px;
35-
// line-height: 1rem;
36+
margin-bottom: 8px;
3637
display: -webkit-box;
3738
-webkit-box-orient: vertical;
3839
-webkit-line-clamp: 3;
3940
overflow: hidden;
4041
}
42+
43+
h4 {
44+
text-wrap: pretty;
45+
line-height: 1.3rem;
46+
margin-bottom: 10px;
47+
font-size: $medium;
48+
}
49+
4150
p {
4251
margin-bottom: 15px;
43-
line-height: 24px;
52+
line-height: 28px;
53+
font-weight: $standard;
4454
display: -webkit-box;
4555
-webkit-box-orient: vertical;
4656
-webkit-line-clamp: 2;
4757
overflow: hidden;
4858
}
4959
}
60+
5061
&__link {
5162
position: absolute;
5263
bottom: 15px;
64+
5365
a {
5466
margin-right: 0;
5567
font-weight: $max_bold;
@@ -60,19 +72,16 @@
6072
}
6173
}
6274
}
75+
6376
@media (min-width: $breakpoint-md) {
6477
.article {
65-
&__description {
66-
h6 {
67-
margin-bottom: 2px;
68-
line-height: 1.3rem;
69-
}
70-
}
78+
7179
&__link {
7280
bottom: 0;
7381
}
7482
}
7583
}
84+
7685
@media (min-width: $breakpoint-lg) {
7786
.article {
7887
&__container {
@@ -90,14 +99,14 @@
9099
width: 100%;
91100
height: 190px;
92101
padding: 0;
102+
93103
p {
94104
font-size: 18px;
95-
line-height: 30px;
96105

97106
em {
98107
font-size: 18px;
99108
}
100109
}
101110
}
102111
}
103-
}
112+
}

‎src/components/BlogPage/BlogContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Blog = () => {
3232
{category.map((item, idx) => (
3333
<BlogArticle
3434
key={idx}
35-
image={item.image}
35+
image={item?.image || item?.imagePage}
3636
title={item.title}
3737
summary={item.summary}
3838
slug={"/blog/" + item.slug}

‎src/components/CasesSection/CasesList.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const CasesList = ({ data }) => {
2121
/>
2222
</div>
2323
<div className="col-12 col-md-7">
24-
<h5 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h5>
24+
<h4 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h4>
2525
{caso.description && (
2626
<div className="caseExpanded__descr">
2727
<MarkdownView markdown={caso.description}
@@ -32,9 +32,9 @@ const CasesList = ({ data }) => {
3232
</div>
3333
<div className="col-12 col-md-5 row caseQuote">
3434
{caso?.quote?.title && (
35-
<h5 className="caseQuote__title col-12 pt-md-3 pb-2">
35+
<h4 className="caseQuote__title col-12 pt-md-3 pb-2">
3636
{caso.quote.title}
37-
</h5>
37+
</h4>
3838
)}
3939
{caso?.quote?.description && (
4040
<div className="caseQuote__descr col-9 col-md-12">

0 commit comments

Comments
 (0)