Fix form tab (#4066)

BrunoQuaresma · web-flow · commit b78ab9e02803 · 2022-09-15T09:59:13.000-03:00
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -18,7 +18,9 @@ const useStyles = makeStyles((theme) => ({
   footer: {
     display: "flex",
     flex: "0",
-    flexDirection: "row",
+    // The first button is the submit so it is the first element to be focused
+    // on tab so we use row-reverse to display it on the right
+    flexDirection: "row-reverse",
     gap: theme.spacing(1.5),
     alignItems: "center",
     marginTop: theme.spacing(3),
@@ -36,10 +38,8 @@ export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
   const styles = useStyles()
   return (
     <div className={styles.footer}>
-      <Button type="button" className={styles.button} onClick={onCancel} variant="outlined">
-        {Language.cancelLabel}
-      </Button>
       <LoadingButton
+        tabIndex={0}
         loading={isLoading}
         className={styles.button}
         variant="contained"
@@ -48,6 +48,15 @@ export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
       >
         {submitLabel}
       </LoadingButton>
+      <Button
+        type="button"
+        className={styles.button}
+        onClick={onCancel}
+        variant="outlined"
+        tabIndex={0}
+      >
+        {Language.cancelLabel}
+      </Button>
     </div>
   )
 }
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
@@ -14,7 +14,7 @@ export const darkPalette: PaletteOptions = {
   type: "dark",
   primary: {
     main: colors.blue[7],
-    contrastText: colors.gray[4],
+    contrastText: colors.blue[1],
     light: colors.blue[6],
     dark: colors.blue[9],
   },
