Sidebar - fix position of delete button (codesandbox#3474)

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Config.tsx

@@ -1,14 +1,13 @@
 import React, { MouseEvent } from 'react';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import { useOvermind } from 'app/overmind';
-import { css } from '@styled-system/css';
-import { Button, Element, Stack } from '@codesandbox/components';
+import { Button, Element } from '@codesandbox/components';
 
 export const Config = () => {
   const {
     actions: {
       modalOpened,
-      workspace: { addedTemplate, deleteTemplate },
+      workspace: { addedTemplate },
     },
     state: {
       user,
@@ -21,16 +20,6 @@ export const Config = () => {
     },
   } = useOvermind();
 
-  const onDelete = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    if (customTemplate) {
-      deleteTemplate();
-    } else {
-      modalOpened({ modal: 'deleteSandbox' });
-    }
-  };
-
   const onCreateTemplate = (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
@@ -60,26 +49,6 @@ export const Config = () => {
           </Button>
         </Element>
       )}
-
-      <Stack
-        justify="center"
-        css={css({
-          bottom: 3,
-          position: 'absolute',
-          width: '100%',
-        })}
-      >
-        <Button
-          // @ts-ignore
-          onClick={onDelete}
-          variant="link"
-          css={css({
-            ':hover,:focus': { color: 'dangerButton.background' },
-          })}
-        >
-          {`Delete ${customTemplate ? `Template` : `Sandbox`}`}
-        </Button>
-      </Stack>
     </>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx

@@ -0,0 +1,43 @@
+import React, { MouseEvent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { css } from '@styled-system/css';
+import { Button, Stack } from '@codesandbox/components';
+
+export const Delete = () => {
+  const {
+    actions: {
+      modalOpened,
+      workspace: { deleteTemplate },
+    },
+    state: {
+      editor: {
+        currentSandbox: { customTemplate },
+      },
+    },
+  } = useOvermind();
+
+  const onDelete = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (customTemplate) {
+      deleteTemplate();
+    } else {
+      modalOpened({ modal: 'deleteSandbox' });
+    }
+  };
+
+  return (
+    <Stack justify="center" marginBottom={3}>
+      <Button
+        // @ts-ignore
+        onClick={onDelete}
+        variant="link"
+        css={css({
+          ':hover,:focus': { color: 'errorForeground' },
+        })}
+      >
+        {`Delete ${customTemplate ? `Template` : `Sandbox`}`}
+      </Button>
+    </Stack>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/index.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
+import { Stack } from '@codesandbox/components';
 import { Summary } from './Summary';
 import { Privacy } from './Privacy';
 import { Config } from './Config';
+import { Delete } from './Delete';
 
 export const ProjectInfo = () => (
-  <>
-    <Summary />
-    <Privacy />
-    <Config />
-  </>
+  <Stack direction="vertical" justify="space-between" css={{ height: '100%' }}>
+    <div>
+      <Summary />
+      <Privacy />
+      <Config />
+    </div>
+    <Delete />
+  </Stack>
 );