Merge pull request #225 from nowcommunity/style-changes

Style changes

frontend/src/components/DetailView/DetailBrowser.tsx

@@ -16,7 +16,7 @@ export const DetailBrowser = <T extends object>() => {
   const previousIndex = currentIndex - 1
   const style = {
     width: '18em',
-    marginLeft: '1em',
+    marginLeft: '0em',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
@@ -45,8 +45,8 @@ export const DetailBrowser = <T extends object>() => {
   return (
     <Box
       sx={{
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: 'left',
+        justifyContent: 'space-between',
         height: '100%',
         display: 'flex',
         gap: '1em',

frontend/src/components/DetailView/DetailView.tsx

@@ -144,14 +144,18 @@ export const DetailView = <T extends object>({
   return (
     <Stack rowGap={2}>
       <DetailContextProvider contextState={initialState}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center', marginTop: 'auto' }}>
+        {!isUserPage && (
+          <Box>
+            <DetailBrowser<T> />
+          </Box>
+        )}
+        <Box
+          sx={{ display: 'flex', justifyContent: 'space-between', alignContent: 'space-between', marginTop: 'auto' }}
+        >
           <Box sx={{ display: 'flex' }} gap={3}>
             {!isUserPage && <ReturnButton />}
-            {editRights.delete && !isNew && (
-              <Button onClick={onDelete} variant="contained" style={{ width: '8em' }}>
-                Delete
-              </Button>
-            )}
+          </Box>
+          <Box sx={{ display: 'flex' }} gap={1}>
             {editRights.edit && !mode.staging && !initialState.mode.new && (
               <Button
                 id="edit-button"
@@ -162,15 +166,15 @@ export const DetailView = <T extends object>({
                 <EditIcon style={{ marginRight: '0.5em' }} /> {mode.read ? 'Edit' : 'Cancel edit'}
               </Button>
             )}
+            {editRights.delete && !isNew && (
+              <Button onClick={onDelete} variant="contained" sx={{ width: '8em', color: 'white' }} color="error">
+                Delete
+              </Button>
+            )}
             {(!mode.read || initialState.mode.new) && onWrite && (
               <WriteButton onWrite={onWrite} hasStagingMode={hasStagingMode} />
             )}
           </Box>
-          {!isUserPage && (
-            <Box sx={{ marginRight: '3em' }}>
-              <DetailBrowser<T> />
-            </Box>
-          )}
         </Box>
         {mode.staging ? stagingView : tabView}
       </DetailContextProvider>