Merge pull request #1262 from mito-ds/button-alignment

Fix import taskpane button alignment

Author: marthacryan

mitosheet/src/mito/components/elements/TextButton.tsx

@@ -69,7 +69,9 @@ interface TextButtonProps {
     /**
         * @param [disabledTooltip] -- Message to display as tooltip when button is disabled 
     */
-    disabledTooltip?: string
+    disabledTooltip?: string;
+
+    style?: React.CSSProperties;
 }
 
 /**
@@ -127,6 +129,7 @@ const TextButton = (props: TextButtonProps): JSX.Element => {
                 disabled={props.disabled}
                 autoFocus={props.autoFocus}
                 title={tooltip}
+                style={props.style}
             >
                 {props.children}
             </button>

mitosheet/src/mito/components/import/FileBrowser/FileBrowser.tsx

@@ -168,6 +168,7 @@ function FileBrowser(props: FileBrowserProps): JSX.Element {
                             <TextButton
                                 variant='light'
                                 width='hug-contents'
+                                style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', width: 'max-content' }}
                                 onClick={() => {
                                     const openCSVImport = async () => {
                                         const filePath = await getFilePath(props.mitoAPI, props.currPathParts, selectedFile);
@@ -185,19 +186,17 @@ function FileBrowser(props: FileBrowserProps): JSX.Element {
                                 }}
                                 disabled={importButtonStatus.disabled}
                             >
-                                <Row suppressTopBottomMargin justify='space-between' align='center'>
-                                    <ConfigureIcon/>
-                                    <p className='ml-2px'>
-                                        Configure
-                                    </p>
-                                </Row>
-                                
+                                <ConfigureIcon/>
+                                <p className='ml-2px'>
+                                    Configure
+                                </p>
                             </TextButton>
                         </Col>
                     }
                     <Col style={{ width: '100%' }}>
                         <TextButton
                             variant='dark'
+                            width='block'
                             onClick={() => {
                                 if (isExcelFile(selectedFile)) {
                                     const openExcelImport = async () => {

mitosheet/src/mito/components/layout/Row.tsx

@@ -16,7 +16,7 @@ interface RowProps {
     /** 
         * @param [justify] - How to justify the Cols inside this row. Defaults to 'start'
     */
-    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around',
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly',
     /** 
         * @param [align] - How to verticaly align the content. Defaults to 'top'
     */

mitosheet/src/mito/components/taskpanes/DefaultTaskpane/DefaultTaskpaneFooter.tsx

@@ -20,7 +20,7 @@ const DefaultTaskpaneFooter = (
     }): JSX.Element => {
 
     return (    
-        <div style={props.ignoreTaskpanePadding ? {margin: ' 0px -10px -7px -10px'} : undefined}>  {/** Set a negative margin to escape the footer */}
+        <div style={props.ignoreTaskpanePadding ? {margin: ' 0px -10px -7px -14px'} : undefined}>  {/** Set a negative margin to escape the footer */}
             {props.children}
         </div>
     )