updates(app detail): ui changes (#351)

eclipse-tractusx · Nov 13, 2023 · b3a48b2 · b3a48b2
1 parent d34d775
commit b3a48b2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
   - Fix - After adding / creating new technical users, list view at bottom "randomly" shows duplicates. Applies to all the views (ALL, MANAGED, OWNED)
 - Registration Process
   - Show contry code info
+- App Detail UI changes
 
 ## 1.7.0-RC2
 

diff --git a/src/components/pages/AppDetail/components/AppDetailHeader/AppDetailHeader.scss b/src/components/pages/AppDetail/components/AppDetailHeader/AppDetailHeader.scss
@@ -34,6 +34,7 @@
     object-fit: cover;
     img {
       width: 100%;
+      height: 270px;
       border-radius: 20px;
     }
   }
@@ -49,6 +50,9 @@
         font-size: 14px;
       }
     }
+    .usecase {
+      display: flex;
+    }
     ul {
       display: flex;
       align-items: center;

diff --git a/src/components/pages/AppDetail/components/AppDetailHeader/index.tsx b/src/components/pages/AppDetail/components/AppDetailHeader/index.tsx
@@ -180,7 +180,7 @@ export default function AppDetailHeader({ item }: AppDetailHeaderProps) {
         <img src={image} alt={item.title} />
       </div>
       <div className="content">
-        <Typography variant="h5" sx={{ pb: '6px', color: '#888888' }}>
+        <Typography variant="caption2" sx={{ pb: '6px' }}>
           {item.provider}
         </Typography>
         <Typography variant="h2" sx={{ pb: '8px', lineHeight: '48px' }}>
@@ -192,21 +192,31 @@ export default function AppDetailHeader({ item }: AppDetailHeaderProps) {
           <span className="rating-number">{item.rating}</span>
           */}
         </div>
-        <Typography variant="body2" sx={{ pb: 1 }}>
+        <Typography variant="caption1" sx={{ mb: 1, display: 'inherit' }}>
           {item.price}
         </Typography>
-        <Typography variant="body2" sx={{ pb: 1 }}>
-          {t('content.appdetail.usecase')}:
-          {item.useCases.map((useCase: UseCaseType) => (
-            <span key={useCase.id}> {useCase.label} </span>
-          ))}
-        </Typography>
-        <Typography variant="body2" sx={{ pb: '18px' }}>
-          {t('content.appdetail.language')}:
-          {item.languages?.map((lang, index) => (
-            <span key={lang}> {(index ? ', ' : '') + lang} </span>
-          ))}
-        </Typography>
+        <div className="usecase">
+          <Typography variant="label2" sx={{ pb: 1 }}>
+            {t('content.appdetail.usecase')}:
+          </Typography>
+          <Typography variant="caption2" sx={{ pb: 1, ml: 1 }}>
+            {item.useCases.map((useCase: UseCaseType) => (
+              <span key={useCase.id}> {useCase.label} </span>
+            ))}
+          </Typography>
+        </div>
+        <div className="usecase">
+          <Typography variant="label2">
+            {t('content.appdetail.language')}:
+          </Typography>
+          <Typography variant="caption2" sx={{ pb: 2, ml: 1 }}>
+            {item.languages?.map((lang, index) => (
+              <span key={lang}>
+                {` ${index ? ', ' : ''}${lang.toUpperCase()} `}
+              </span>
+            ))}
+          </Typography>
+        </div>
         {getSubscribeBtn()}
       </div>
     </div>