[Platform]: genome location styles (#699)

Author: chinmehta

apps/platform/src/pages/TargetPage/ProfileHeader.jsx

@@ -90,40 +90,56 @@ function ProfileHeader() {
           targetId={data?.target.id}
         />
         {data?.target.genomicLocation && (
-          <Field loading={loading} title="Location">
-            <Box component="span">
-              <Tooltip title="build | chromosome:start-end,strand">
-                <Box
-                  component="span"
-                  sx={{
-                    whiteSpace: "nowrap",
-                    background: theme => theme.palette.grey[600],
-                    border: theme => `1px solid ${theme.palette.grey[600]}`,
-                    p: "1px 5px",
-                    color: "white",
-                    borderRadius: "5px 0 0 5px",
-                  }}
-                >
-                  {/* TODO: check UI and add it to getGenomicLocation function */}
-                  GRCh38
-                </Box>
-                <Box
-                  component="span"
-                  sx={{
-                    whiteSpace: "nowrap",
-                    p: "1px 5px",
-                    color: theme => theme.palette.grey[600],
-                    border: theme => `1px solid ${theme.palette.grey[600]}`,
-                    borderRadius: "0 5px 5px 0",
-                  }}
-                >
-                  {getGenomicLocation(data?.target.genomicLocation)}
-                </Box>
-              </Tooltip>
-            </Box>
-          </Field>
+          <Box sx={{ mt: 1, typography: "body2" }} component="span">
+            <Tooltip title="build | chromosome:start-end,strand">
+              <Box
+                component="span"
+                sx={{
+                  whiteSpace: "nowrap",
+                  background: theme => theme.palette.grey[600],
+                  border: theme => `1px solid ${theme.palette.grey[600]}`,
+                  p: "1px 5px",
+                  color: "white",
+                  borderRadius: "5px 0 0 5px",
+                }}
+              >
+                {/* TODO: check UI and add it to getGenomicLocation function */}
+                GRCh38
+              </Box>
+              <Box
+                component="span"
+                sx={{
+                  whiteSpace: "nowrap",
+                  p: "1px 5px",
+                  color: theme => theme.palette.grey[600],
+                  border: theme => `1px solid ${theme.palette.grey[600]}`,
+                  borderRadius: "0 5px 5px 0",
+                }}
+              >
+                {getGenomicLocation(data?.target.genomicLocation)}
+              </Box>
+            </Tooltip>
+          </Box>
         )}
-        <ProfileChipList>{geneInfo.filter(gi => gi.isVisible)}</ProfileChipList>
+        {geneInfo
+          .filter(gi => gi.isVisible)
+          .map(e => (
+            <Box
+              key={e.label}
+              sx={{
+                whiteSpace: "nowrap",
+                p: "1px 5px",
+                color: theme => theme.palette.grey[600],
+                border: theme => `1px solid ${theme.palette.grey[600]}`,
+                borderRadius: "5px",
+                width: "min-content",
+                mt: 1,
+                typography: "body2",
+              }}
+            >
+              <Tooltip title={e.tooltip}>{e.label}</Tooltip>
+            </Box>
+          ))}
       </>
       <ProfileChipList title="Synonyms" loading={loading}>
         {synonyms}