Merge pull request #105 from catenax-ng/fix/sub-navigation-style

fix(sub navigation): update header and button styles
eclipse-tractusx · Mar 4, 2024 · 1758fd1 · 1758fd1
2 parents 499e954 + 532e665
commit 1758fd1
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.35
+
+- Update sub savigation header title and button styles
+
 ## 2.1.34
 
 - Fix incomplete string escaping and encoding in DropPreview

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.34",
+  "version": "2.1.35",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

diff --git a/src/components/basic/NewSubNavigation/index.tsx b/src/components/basic/NewSubNavigation/index.tsx
@@ -68,11 +68,11 @@ export const NewSubNavigation = ({
                   marginLeft: '10px',
                   fontSize: '14px',
                   color: '#0f71cb',
+                  textTransform: 'lowercase'
                 }}
               >
                 {header}
               </Typography>
-              {show && (
                 <Box className="navigationOverlay">
                   {navigationArray?.map((link: NavigationItem) => {
                     return (
@@ -115,6 +115,7 @@ export const NewSubNavigation = ({
                                 ? '#111111'
                                 : '#888888',
                             fontSize: '14px',
+                            textTransform: 'lowercase'
                           }}
                         >
                           {link.title}
@@ -145,14 +146,14 @@ export const NewSubNavigation = ({
                           size="small"
                           sx={{
                             marginTop: '10px',
+                            textTransform: 'lowercase'
                           }}
                         >
                           {btn.buttonLabel}
                         </Button>
                       )
                     })}
                 </Box>
-              )}
             </Box>
             {buttonArray?.length === 1 && (
               <Button
@@ -165,6 +166,7 @@ export const NewSubNavigation = ({
                 size="small"
                 sx={{
                   marginTop: '10px',
+                  textTransform: 'lowercase'
                 }}
               >
                 {buttonArray[0].buttonLabel}

diff --git a/src/components/basic/SubNavigation/ParentSubNavigation.tsx b/src/components/basic/SubNavigation/ParentSubNavigation.tsx
@@ -48,6 +48,7 @@ export const ParentSubNavigation = ({
             size="medium"
             sx={{
               fontSize: '16px',
+              textTransform: 'lowercase'
             }}
           >
             <EastIcon sx={{ marginRight: '16px', fontSize: '15px' }} />

diff --git a/src/components/basic/SubNavigation/SubNavigationButton.tsx b/src/components/basic/SubNavigation/SubNavigationButton.tsx
@@ -40,7 +40,7 @@ export const SubNavigationButton = ({
           color="secondary"
           variant="outlined"
           size="medium"
-          sx={{ float: 'right' }}
+          sx={{ float: 'right', textTransform: 'lowercase' }}
         >
           {buttonLabel}
         </Button>

diff --git a/src/components/basic/SubNavigation/SubNavigationLink.tsx b/src/components/basic/SubNavigation/SubNavigationLink.tsx
@@ -48,6 +48,7 @@ export const SubNavigationLink = ({
               size="medium"
               sx={{
                 fontSize: '16px',
+                textTransform: 'lowercase'
               }}
             >
               <EastIcon sx={{ marginRight: '16px', fontSize: '15px' }} />
@@ -66,6 +67,7 @@ export const SubNavigationLink = ({
             size="medium"
             sx={{
               fontSize: '16px',
+              textTransform: 'lowercase'
             }}
           >
             <EastIcon sx={{ marginRight: '16px', fontSize: '15px' }} />