fix(styles): fix logo text alignment issues

Teradata · Sep 23, 2024 · fa7cf3b · fa7cf3b
1 parent 6750f0e
commit fa7cf3b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/libs/react-components/src/lib/components/Header/Header.stories.tsx b/libs/react-components/src/lib/components/Header/Header.stories.tsx
@@ -83,13 +83,15 @@ const meta = {
       {
         actionElement: (
           <div>
-            <Icon className="fa fa-search" />
+            <Icon className="fa fa-search" style={{ fontSize: 16 }} />
           </div>
         ),
         type: 'search',
       },
       {
-        actionElement: <Button icon="fa fa-home" label="Start free demo" />,
+        actionElement: (
+          <Button icon="fa fa-home" label="Start free demo" variant={'text'} />
+        ),
         type: 'button',
       },
     ],

diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -110,7 +110,7 @@ body {
   color: var(--td-web-gray-700);
   letter-spacing: -0.44px;
   margin-left: 16px;
-  line-height: 20px;
+  line-height: 28px;
   font-style: normal;
   font-weight: 400;
 }
@@ -119,7 +119,7 @@ body {
   padding: 0;
   margin: 0;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   padding: 0 20px;
   width: 100%;
   height: 1.875rem;
@@ -137,7 +137,10 @@ body {
 
 .headerNavLogo {
   display: flex;
-  align-items: flex-end;
+}
+
+.headerNavMobile .headerNavLogo a {
+  line-height: 20px;
 }
 
 .headerNavMobile {
@@ -174,21 +177,22 @@ body {
 }
 
 .headerNav .teradataLogo {
-  width: 9.25rem;
-  height: 1.75rem;
+  width: 110px;
+  height: 21px;
+  margin-top: 2px;
 }
 
 .headerNavMobile .teradataLogo {
-  width: 5.5rem;
-  height: 1rem;
-  margin-right: 1rem;
+  width: 88px;
+  height: 16.8px;
+  margin-right: 16px;
 }
 
 .headerNavMobileLogoText {
   color: var(--td-web-gray-700);
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 1rem;
+  line-height: 20px;
   white-space: nowrap;
 }