UX improvements

Author: kevinwang5658

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codifycli/ink-form",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Complex user-friendly form component for Codify",
   "main": "lib/index.js",
   "exports": "./lib/index.js",

src/Form.tsx

@@ -135,7 +135,7 @@ export const Form: React.FC<FormProps> = props => {
 
     setSections(newTabs);
     setValue([...value]);
-    onChangeTab(Math.min(currentTab, sections.length - 2));
+    onChangeTab(Math.max(currentTab - 1, 0));
   }
 
   const upperFirstLetter = (s?: string): string | undefined => {
@@ -198,7 +198,7 @@ export const Form: React.FC<FormProps> = props => {
           {!editingField && (
             <Box flexDirection='column' marginTop={1}>
               <Box flexDirection="row">
-                <Button label="[D]uplicate resource" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
+                <Button label="[A]dd resource" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
                 <Button label="[R]emove resource" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()}/>
                 <SubmitButton canSubmit={canSubmitForm} onSubmit={onSubmitForm}/>
               </Box>

src/FormHeader.tsx

@@ -29,8 +29,12 @@ export const FormHeader: React.FC<
   );
 
   return (
-    <Box borderStyle="double" width="100%" flexDirection="column" ref={props.headerRef}>
-      <Box width="100%">
+    <Box
+      borderStyle="single"
+      width="100%"
+      flexDirection="column"
+      ref={props.headerRef}>
+      <Box width="100%" marginBottom={1}>
         <Box flexGrow={1}>
           <Text>
             <Text bold>{props.form.title}</Text>
@@ -40,7 +44,7 @@ export const FormHeader: React.FC<
           </Text>
         </Box>
       </Box>
-      <Box width="100%">
+      <Box width="100%" marginBottom={0}>
         <Box flexWrap='wrap'>
           {!props.editingField ? (
             sections.map((section, id) => (

src/demo/Test.tsx

@@ -41,7 +41,7 @@ export function Test() {
         }}
         form={{
           title: "Need more info to identify resources for import",
-          description: 'multiples could exist',
+          description: 'multiples could exist on the system',
           sections: [
             {
               title: "asdf-global",