fixing logo miss-spacing on quote

code0-tech · Jun 20, 2024 · ed7ebed · ed7ebed
1 parent 98a66f4
commit ed7ebed
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git 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
@@ -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);
   }
 }
diff --git 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>