From ed7ebedb96651dbe3c8a35229594fdd117b6089e Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Thu, 20 Jun 2024 11:34:31 +0200
Subject: [PATCH] fixing logo miss-spacing on quote

---
 src/components/quote/Quote.stories.tsx | 24 +++++++++++++++++++++++-
 src/components/quote/Quote.style.scss  | 17 ++++++++++++++---
 src/components/quote/Quote.tsx         | 18 ++++++++++--------
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/quote/Quote.stories.tsx b/src/components/quote/Quote.stories.tsx
index 034b97b1..021d1b68 100644
--- a/src/components/quote/Quote.stories.tsx
+++ b/src/components/quote/Quote.stories.tsx
@@ -36,7 +36,29 @@ export default meta;
 type QuoteStory = StoryObj<typeof Quote>;
 
 
-export const QuoteSample: QuoteStory = {
+export const QuoteWithLogo: QuoteStory = {
+    render: (args) => {
+        return <Quote {...args} name={"Nico Sammito"}
+                      position={"Co-founder"}
+                      logo={"https://code0.tech/code0_logo.png"}
+                      w={"300px"}>
+            My favorite UX feedback from customers is:
+            "How is the app so fast?"
+            Because we’ve built on Next.js and Vercel since day one, our pages load in an instant,
+            which is important when it comes to mission-critical software.
+        </Quote>
+    },
+    args: {
+        variant: "outlined",
+        color: "secondary",
+        outline: false,
+        gradient: true,
+        gradientPosition: "bottom-left",
+        inlineBorder: true
+    }
+}
+
+export const QuoteWithoutLogo: QuoteStory = {
     render: (args) => {
         return <Quote {...args} name={"Nico Sammito"}
                       position={"Co-founder"}
diff --git a/src/components/quote/Quote.style.scss b/src/components/quote/Quote.style.scss
index bc8013c2..51ea5e0b 100644
--- a/src/components/quote/Quote.style.scss
+++ b/src/components/quote/Quote.style.scss
@@ -9,9 +9,20 @@
     }
   }
 
+  &__footer {
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: .25rem;
+    }
+  }
+
   &__img {
-    width: 20%;
-    max-width: 100px;
-    filter: brightness(0) invert(1);
+    height: 40px;
+    //filter: brightness(0) invert(1);
   }
 }
\ No newline at end of file
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
index f6b0007a..844db034 100644
--- a/src/components/quote/Quote.tsx
+++ b/src/components/quote/Quote.tsx
@@ -21,14 +21,16 @@ const Quote: React.FC<QuoteType> = (props) => {
                     {children}
                 </div>
             </Card.Section>
-            {
-                !!logo ? <Card.Section>
-                    <img className={"quote__img"} src={logo} alt={"logo of quote"}/>
-                </Card.Section> : null
-            }
-            <Card.Section>
-                <Text size={"md"} hierarchy={"primary"}>{name}</Text><br/>
-                <Text size={"sm"}>{position}</Text>
+            <Card.Section className={"quote__footer"}>
+                {
+                    !!logo ? <div>
+                        <img className={"quote__img"} src={logo} alt={"logo of quote"}/>
+                    </div> : null
+                }
+                <div>
+                    <Text size={"md"} hierarchy={"primary"} m={0}>{name}</Text>
+                    <Text size={"sm"}>{position}</Text>
+                </div>
             </Card.Section>
         </div>
     </Card>