🔨 Refactored, Hacktober | Refactor app/src/app/pages/common/Mo… (codesandbox#2830)

* rename file ext to .tsx

* fix type error - refactor to use style

* change file ext to ts

* fix type error - add optional prop

* remove the unnecessary interface definition

Author: christineoo

…odals/MoveSandboxFolderModal/elements.js …odals/MoveSandboxFolderModal/elements.tspackages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.js renamed to packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.js renamed to packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const Block = styled.div`
+export const Block = styled.div<{ right?: boolean }>`
   background-color: ${props => props.theme.background2};
   color: rgba(255, 255, 255, 0.9);
   padding: 1rem 1.5rem;

…n/Modals/MoveSandboxFolderModal/index.js …/Modals/MoveSandboxFolderModal/index.tsxpackages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.js renamed to packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.js renamed to packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx

@@ -57,7 +57,7 @@ const MoveSandboxFolderModal = () => {
   return (
     <div>
       <Block>Move to Folder</Block>
-      <Container css={{ maxHeight: 400, overflow: 'auto' }}>
+      <Container style={{ maxHeight: 400, overflow: 'auto' }}>
         <DirectoryPicker
           onSelect={onSelect}
           currentTeamId={teamId}
@@ -72,7 +72,7 @@ const MoveSandboxFolderModal = () => {
 
         <Button
           onClick={handleMove}
-          css={{ display: 'inline-flex', alignItems: 'center' }}
+          style={{ display: 'inline-flex', alignItems: 'center' }}
           small
           disabled={loading}
         >
@@ -85,7 +85,7 @@ const MoveSandboxFolderModal = () => {
                 ? basename(path)
                 : `${teamId ? 'Our' : 'My'} Sandboxes`}
               <ChevronRight
-                css={{ marginRight: '-.25rem', marginLeft: '.25rem' }}
+                style={{ marginRight: '-.25rem', marginLeft: '.25rem' }}
               />
             </>
           )}
@@ -95,4 +95,5 @@ const MoveSandboxFolderModal = () => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default MoveSandboxFolderModal;