feat: temp widget text (#22)

Author: IlitA

src/components/button/styles.css

@@ -6,6 +6,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
+    margin-top: 8px;
 }
 
 .grover-button,

src/components/container/styles.css

@@ -7,4 +7,6 @@
     flex-direction: column;
     justify-content: stretch;
     align-items: flex-start;
+    font-family: 'Poppins', sans-serif;
+    color: #333333;
 }

src/components/productPrice/styles.css

@@ -5,10 +5,12 @@
     all: inherit;
     display: inline;
     margin-right: 9px;
+    font-weight: 700;
 }
 
 .grover-product-price__periodicity-text {
     all: inherit;
     display: inline;
     margin-left: 9px;
+    font-weight: 700;
 }

src/components/widget/widget.jsx

@@ -68,7 +68,16 @@ const Widget = ({
                     )}
                 >
                     <HeaderText className={classNames.headerText}>
-                        <FormattedMessage translationKey="RENT_NOW_HEADER" />
+                        <ProductPrice
+                            className={cn(
+                                'grover-widget__product-price',
+                                classNames.priceContainer
+                            )}
+                            classNames={priceClassNames}
+                            originalPriceInCents={price.originalPriceInCents}
+                            discountPriceInCents={price.discountPriceInCents}
+                            minimalPrice={price.minimalPrice}
+                        />
                     </HeaderText>
 
                     <Link
@@ -84,16 +93,7 @@ const Widget = ({
                     </Link>
                 </HeaderSection>
 
-                <ProductPrice
-                    className={cn(
-                        'grover-widget__product-price',
-                        classNames.priceContainer
-                    )}
-                    classNames={priceClassNames}
-                    originalPriceInCents={price.originalPriceInCents}
-                    discountPriceInCents={price.discountPriceInCents}
-                    minimalPrice={price.minimalPrice}
-                />
+                <FormattedMessage translationKey="RENT_NOW_HEADER" />
 
                 <LinkButton
                     icon={GroverIcon}

src/translations/dictionaries/de.js

@@ -1,10 +1,10 @@
 const de = {
-    RENT_NOW_HEADER: 'Jetzt mieten statt kaufen',
-    RENT_WITH_GROVER_BUTTON: 'Mieten mit Grover',
+    RENT_NOW_HEADER: 'Zusätzlich 99 % im 1. Monat sparen',
+    RENT_WITH_GROVER_BUTTON: 'Weiter mit Grover',
     MORE_INFO_LINK: 'Mehr Infos',
     UNAVAILABLE_BUTTON: 'Bei Grover derzeit nicht verfügbar',
     STARTING_PRICE: 'ab',
-    PERIODICITY: 'pro Monat',
+    PERIODICITY: '/ Monat flexibel mieten',
 };
 
 export default de;