Feedbacks | fixes on styling and margins

OpenConceptLab · Nov 12, 2024 · a32032a · a32032a
1 parent db64f2d
commit a32032a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
diff --git a/src/components/concepts/Associations.jsx b/src/components/concepts/Associations.jsx
@@ -144,7 +144,7 @@ const Associations = ({concept, mappings, reverseMappings}) => {
       </Typography>
       {
         count > 0 &&
-          <TableContainer sx={{ maxHeight: 400 }}>
+          <TableContainer sx={{ maxHeight: 400, borderRadius: '10px' }}>
             <Table stickyHeader size='small'>
               <TableHead>
                 <TableRow>

diff --git a/src/components/concepts/ConceptDetails.jsx b/src/components/concepts/ConceptDetails.jsx
@@ -15,7 +15,7 @@ const ConceptDetails = ({ concept, repo, mappings, reverseMappings, loading }) =
   const { t } = useTranslation()
   const updatedBy = concept?.version_updated_by || concept?.updated_by
   return (
-    <div className='col-xs-12' style={{padding: '16px 0', height: 'calc(100vh - 330px)', overflow: 'auto'}}>
+    <div className='col-xs-12' style={{padding: '16px 0', height: 'calc(100vh - 245px)', overflow: 'auto'}}>
       {
         loading ?
           <Skeleton variant="rounded" width='100%' height={120} sx={{borderRadius: '10px'}} /> :
@@ -64,7 +64,7 @@ const ConceptDetails = ({ concept, repo, mappings, reverseMappings, loading }) =
           concept?.checksums?.standard
         }
       </Typography>
-      <Typography component='span' sx={{display: 'inline-block', padding: 0, fontSize: '12px', color: 'surface.contrastText', width: '100%'}}>
+      <Typography component='span' sx={{display: 'inline-block', padding: 0, fontSize: '12px', color: 'surface.contrastText', width: '100%', marginBottom: '12px'}}>
         {t('checksums.smart')} {
           loading ?
             <Skeleton variant='text' width='40%' sx={{marginLeft: '8px', fontSize: '12px', display: 'inline-block'}} />:

diff --git a/src/components/concepts/ConceptHeader.jsx b/src/components/concepts/ConceptHeader.jsx
@@ -56,27 +56,27 @@ const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested, loading
           <CloseIconButton color='secondary' onClick={onClose} />
         </span>
       </div>
-      <div className='col-xs-12' style={{padding: '8px 0 16px 0'}}>
-        {
-          loading ?
-            <Skeleton variant='text' sx={{fontSize: '22px', width: '150px'}} />:
-          <Typography sx={{fontSize: '22px', color: BLACK}} className='searchable'>
-            {concept.display_name}
-          </Typography>
-        }
-      </div>
+    <div className='col-xs-12' style={{padding: '0px'}}>
+    {
+      loading ?
+        <Skeleton variant='text' sx={{fontSize: '22px', width: '150px'}} />:
+      <Typography sx={{fontSize: '22px', color: BLACK}} className='searchable'>
+      {concept.display_name}
+      </Typography>
+    }
+    </div>
+    {
+          currentUserHasAccess() && repo?.version === 'HEAD' && has(repo, 'source_type') && !loading &&
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
         <span style={{display: 'flex', alignItems: 'center'}} />
-        {
-          currentUserHasAccess() && repo?.version === 'HEAD' && has(repo, 'source_type') && !loading &&
             <span>
               <Button endIcon={<DownIcon fontSize='inherit' />} variant='text' sx={{textTransform: 'none', color: 'surface.contrastText'}} onClick={onMenuOpen} id='concept-actions'>
                 {t('common.actions')}
               </Button>
               <ConceptManagementList anchorEl={menuAnchorEl} open={menu} onClose={onMenuClose} id='concept-actions' onClick={onManageOptionClick} />
             </span>
-        }
       </div>
+        }
     </React.Fragment>
   )
 }

diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -126,7 +126,7 @@ const ConceptHome = props => {
           {
             !edit &&
               <>
-                <div className='col-xs-12 padding-0' style={{marginBottom: '12px'}}>
+                <div className='col-xs-12 padding-0'>
                   <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={onEdit} repo={repo} nested={props.nested} loading={loading} />
                 </div>
                 <ConceptTabs tab={tab} onTabChange={(event, newTab) => setTab(newTab)} loading={loading} />
@@ -139,7 +139,7 @@ const ConceptHome = props => {
         </div>
       </Fade>
     </>
-  ) : <Skeleton variant="rounded" width={'100%'} height={'100%'} />
+  ) : <Skeleton variant="rounded" width='100%' height='100%' />
 }
 
 

diff --git a/src/components/repos/RepoHome.jsx b/src/components/repos/RepoHome.jsx
@@ -157,7 +157,7 @@ const RepoHome = () => {
           !loading && status && <Error40X status={status} />
         }
       </Paper>
-      <div className={'col-xs-5 padding-0' + (isSplitView ? ' split-appear' : '')} style={{marginLeft: '16px', width: isSplitView ? 'calc(41.66666667% - 16px)' : 0, backgroundColor: WHITE, borderRadius: '10px', height: isSplitView ? 'calc(100vh - 100px)' : 0, opacity: isSplitView ? 1 : 0}}>
+      <div className={'col-xs-5 padding-0' + (isSplitView ? ' split-appear' : '')} style={{marginLeft: '16px', width: isSplitView ? 'calc(41.66666667% - 16px)' : 0, backgroundColor: WHITE, borderRadius: '10px', height: isSplitView ? 'calc(100vh - 95px)' : 0, opacity: isSplitView ? 1 : 0}}>
         {
           Boolean(showConceptURL && !conceptForm) &&
             <ConceptHome repoSummary={repoSummary} source={repo} repo={repo} url={showConceptURL} concept={showItem} onClose={() => setShowItem(false)} nested />