✨ feat: spaced out text evenly in hero

Ayngie · Jan 21, 2024 · 3b9b287 · 3b9b287
1 parent f227c77
commit 3b9b287
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -1,12 +1,15 @@
 import { StyledHero } from "./styles/StyledHero";
 import { StyledHeading, Paragraph, BoldText, ItalicText } from "./styles/StyledTexts";
+import { ParagraphWrapper } from "./styles/StyledWrappers";
 
 
 export const Hero = () => {
     return (
     <StyledHero>
-        <StyledHeading>Välkommen!</StyledHeading>
-        <Paragraph>Graviditetsdiabetesappen - din naturliga guide för att hantera och förebygga <BoldText>graviditetsdiabetes (GDM)</BoldText>. &#129328;</Paragraph>
+        <ParagraphWrapper>
+            <StyledHeading>Välkommen!</StyledHeading>
+            <Paragraph>Graviditetsdiabetesappen - din naturliga guide för att hantera och förebygga <BoldText>graviditetsdiabetes (GDM)</BoldText>. &#129328;</Paragraph>
+        </ParagraphWrapper>
         <Paragraph><ItalicText>Läs mer nedan!</ItalicText></Paragraph>
     </StyledHero>
     );

diff --git a/src/components/styles/StyledHero.ts b/src/components/styles/StyledHero.ts
@@ -5,7 +5,7 @@ import flowers from "/flowers.jpg";
 export const StyledHero = styled.section `
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
 
     background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255, 255, 255, 0.8)), url(${flowers});