Style Fixes

opendatadiscovery · Nov 1, 2021 · 4139466 · 4139466
1 parent 7bd63f5
commit 4139466
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 21 deletions.
diff --git a/...i/src/components/DataEntityDetails/QualityTestRunsHistory/QualityTestRunsHistoryStyles.ts b/...i/src/components/DataEntityDetails/QualityTestRunsHistory/QualityTestRunsHistoryStyles.ts
@@ -27,7 +27,7 @@ export const colWidthStyles = {
 
 export const styles = (theme: Theme) =>
   createStyles({
-    container: {},
+    container: { marginTop: theme.spacing(2) },
     resultsTable: {},
     runsTableHeader: {
       color: '#B3BAC5',

diff --git a/odd-platform-ui/src/components/Overview/DataEntityList/DataEntityList.tsx b/odd-platform-ui/src/components/Overview/DataEntityList/DataEntityList.tsx
@@ -46,7 +46,11 @@ const DataEntityList: React.FC<OverviewDataEntityProps> = ({
               </Typography>
             </Link>
             {item.types?.map(type => (
-              <EntityTypeItem key={type.id} typeName={type.name} />
+              <EntityTypeItem
+                sx={{ ml: 0.5 }}
+                key={type.id}
+                typeName={type.name}
+              />
             ))}
           </Grid>
         </li>

diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTab/AppLinkTab.tsx b/odd-platform-ui/src/components/shared/AppTabs/AppTab/AppLinkTab.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabProps } from '@mui/material';
+import { TabProps, TabsProps } from '@mui/material';
 import { TabType } from 'components/shared/AppTabs/interfaces';
 import { LinkProps } from 'react-router-dom';
 import { LinkTabContainer } from 'components/shared/AppTabs/AppTab/TabStyles';
@@ -8,18 +8,21 @@ interface AppLinkTabProps
   extends Pick<LinkProps, 'to' | 'component'>,
     Pick<TabProps, 'key' | 'label' | 'hidden'> {
   type: TabType;
+  $orientation?: TabsProps['orientation'];
 }
 
 const AppLinkTab: React.FC<AppLinkTabProps> = ({
   type,
   hidden,
+  $orientation,
   ...props
 }) => (
   <LinkTabContainer
     // eslint-disable-next-line react/jsx-props-no-spreading
     {...props}
     $type={type}
     $hidden={hidden}
+    $orientation={$orientation}
   />
 );
 

diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTab/AppTab.tsx b/odd-platform-ui/src/components/shared/AppTabs/AppTab/AppTab.tsx
@@ -1,18 +1,25 @@
 import React from 'react';
-import { TabProps } from '@mui/material';
+import { TabProps, TabsProps } from '@mui/material';
 import { TabType } from 'components/shared/AppTabs/interfaces';
 import { TabContainer } from 'components/shared/AppTabs/AppTab/TabStyles';
 
 export interface AppTabProps extends TabProps {
   type: TabType;
+  $orientation?: TabsProps['orientation'];
 }
 
-const AppTab: React.FC<AppTabProps> = ({ type, hidden, ...props }) => (
+const AppTab: React.FC<AppTabProps> = ({
+  type,
+  hidden,
+  $orientation,
+  ...props
+}) => (
   <TabContainer
     // eslint-disable-next-line react/jsx-props-no-spreading
     {...props}
     $type={type}
     $hidden={hidden}
+    $orientation={$orientation}
   />
 );
 

diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTab/TabStyles.ts b/odd-platform-ui/src/components/shared/AppTabs/AppTab/TabStyles.ts
@@ -4,6 +4,7 @@ import {
   Tab,
   tabClasses,
   TabProps,
+  TabsProps,
 } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { propsChecker } from 'lib/helpers';
@@ -109,11 +110,12 @@ const getSelectedTabStylesByType = (
 const tabStyles = (
   theme: Theme,
   type: TabType,
-  $hidden?: boolean
+  $hidden?: boolean,
+  $orientation?: TabsProps['orientation']
 ): CSSObject => ({
   [`&.${buttonBaseClasses.root}`]: {
     [`&.${tabClasses.root}`]: {
-      alignItems: 'center',
+      alignItems: $orientation === 'vertical' ? 'flex-start' : 'center',
     },
   },
   [`&.${tabClasses.selected}`]: {
@@ -131,12 +133,20 @@ const tabStyles = (
 
 export const TabContainer = styled(Tab, {
   shouldForwardProp: propsChecker,
-})<{ $type: TabType; $hidden?: boolean }>(({ theme, $type, $hidden }) =>
-  tabStyles(theme, $type, $hidden)
+})<{
+  $type: TabType;
+  $hidden?: boolean;
+  $orientation?: TabsProps['orientation'];
+}>(({ theme, $type, $hidden, $orientation }) =>
+  tabStyles(theme, $type, $hidden, $orientation)
 );
 
 export const LinkTabContainer = styled(LinkTab, {
   shouldForwardProp: propsChecker,
-})<{ $type: TabType; $hidden?: boolean }>(({ theme, $type, $hidden }) =>
-  tabStyles(theme, $type, $hidden)
+})<{
+  $type: TabType;
+  $hidden?: boolean;
+  $orientation?: TabsProps['orientation'];
+}>(({ theme, $type, $hidden, $orientation }) =>
+  tabStyles(theme, $type, $hidden, $orientation)
 );
diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTabLabel/AppTabLabel.tsx b/odd-platform-ui/src/components/shared/AppTabs/AppTabLabel/AppTabLabel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Skeleton } from '@mui/material';
+import { Skeleton, Typography } from '@mui/material';
 import NumberFormatted from 'components/shared/NumberFormatted/NumberFormatted';
 import * as S from './AppTabLabelStyles';
 
@@ -23,7 +23,9 @@ const AppTabLabel: React.FC<AppTabLabelProps> = ({
       </S.HintContainer>
     ) : (
       <S.HintContainer>
-        <NumberFormatted value={hint} precision={0} />
+        <Typography variant="h6" component="span">
+          <NumberFormatted value={hint} precision={0} />
+        </Typography>
       </S.HintContainer>
     );
 

diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTabLabel/AppTabLabelStyles.ts b/odd-platform-ui/src/components/shared/AppTabs/AppTabLabel/AppTabLabelStyles.ts
@@ -5,7 +5,6 @@ export const Container = styled(Typography)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   '& span': {
-    marginLeft: '4px',
     backgroundColor: theme.palette.backgrounds.primary,
     borderRadius: '4px',
     lineHeight: '1.1rem',
@@ -17,5 +16,6 @@ export const HintContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   height: '16px',
+  marginLeft: theme.spacing(0.5),
   '& > span': { minWidth: '28px' },
 }));
diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTabs.tsx b/odd-platform-ui/src/components/shared/AppTabs/AppTabs.tsx
@@ -59,6 +59,7 @@ const AppTabs: React.FC<AppTabsProps> = ({
       {items.map(item =>
         item.link ? (
           <AppLinkTab
+            $orientation={orientation}
             type={type}
             hidden={item.hidden}
             key={item.name}
@@ -75,6 +76,7 @@ const AppTabs: React.FC<AppTabsProps> = ({
           />
         ) : (
           <AppTab
+            $orientation={orientation}
             type={type}
             hidden={item.hidden}
             key={item.name}

diff --git a/odd-platform-ui/src/components/shared/NumberFormatted/NumberFormatted.tsx b/odd-platform-ui/src/components/shared/NumberFormatted/NumberFormatted.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Typography } from '@mui/material';
 
 interface Props {
   value: string | number | undefined;
@@ -19,13 +18,9 @@ const NumberFormatted: React.FC<Props> = ({ value, precision = 0 }) => {
     );
   }, [value]);
   return (
-    <Typography
-      component="span"
-      variant="h6"
-      title={numVal && numVal > 1000 ? numVal.toLocaleString() : ''}
-    >
+    <span title={numVal && numVal > 1000 ? numVal.toLocaleString() : ''}>
       {formatNumber()}
-    </Typography>
+    </span>
   );
 };