From 02e7ab05a7a6c6898ce1570d391fc3818fdda66a Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 2 Jan 2021 16:53:13 -0700
Subject: [PATCH] move title to center when submitting on mobile

---
 hyperglass/ui/components/header/header.tsx |  9 ++++++---
 hyperglass/ui/components/header/title.tsx  | 14 ++++++++++++--
 hyperglass/ui/components/header/types.ts   |  2 ++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/hyperglass/ui/components/header/header.tsx b/hyperglass/ui/components/header/header.tsx
index 1971b2a..feea41d 100644
--- a/hyperglass/ui/components/header/header.tsx
+++ b/hyperglass/ui/components/header/header.tsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { Flex, ScaleFade } from '@chakra-ui/react';
+import { AnimatedDiv } from '~/components';
 import { useColorValue, useBreakpointValue } from '~/context';
 import { useBooleanValue, useLGState } from '~/hooks';
 import { Title } from './title';
@@ -36,15 +37,17 @@ export const Header = (props: THeader) => {
       color="gray.500"
       {...rest}>
       <ScaleFade in initialScale={0.5} style={{ width: '100%' }}>
-        <Flex
+        <AnimatedDiv
+          layout
           height="100%"
+          display="flex"
           ref={titleRef}
           maxW={titleWidth}
           // This is here for the logo
           justifyContent={justify}
-          mx={{ base: 0, lg: 'auto' }}>
+          mx={{ base: isSubmitting.value ? 'auto' : 0, lg: 'auto' }}>
           <Title />
-        </Flex>
+        </AnimatedDiv>
       </ScaleFade>
     </Flex>
   );
diff --git a/hyperglass/ui/components/header/title.tsx b/hyperglass/ui/components/header/title.tsx
index 52f4268..1091dbe 100644
--- a/hyperglass/ui/components/header/title.tsx
+++ b/hyperglass/ui/components/header/title.tsx
@@ -8,14 +8,24 @@ import { TitleOnly } from './titleOnly';
 import { SubtitleOnly } from './subtitleOnly';
 
 import type { StackProps } from '@chakra-ui/react';
-import type { TTitle, TTitleWrapper, TDWrapper } from './types';
+import type { TTitle, TTitleWrapper, TDWrapper, TMWrapper } from './types';
 
 const AnimatedVStack = motion.custom(VStack);
 
 /**
  * Title wrapper for mobile devices, breakpoints sm & md.
  */
-const MWrapper = (props: StackProps) => <VStack spacing={1} alignItems="flex-start" {...props} />;
+const MWrapper = (props: TMWrapper) => {
+  const { isSubmitting } = useLGState();
+  return (
+    <AnimatedVStack
+      layout
+      spacing={1}
+      alignItems={isSubmitting.value ? 'center' : 'flex-start'}
+      {...props}
+    />
+  );
+};
 
 /**
  * Title wrapper for desktop devices, breakpoints lg & xl.
diff --git a/hyperglass/ui/components/header/types.ts b/hyperglass/ui/components/header/types.ts
index fb2b53c..afdcf4c 100644
--- a/hyperglass/ui/components/header/types.ts
+++ b/hyperglass/ui/components/header/types.ts
@@ -13,6 +13,8 @@ export type THeaderLayout = {
 };
 export type TDWrapper = Omit<StackProps, 'transition'> & MotionProps;
 
+export type TMWrapper = Omit<StackProps, 'transition'> & MotionProps;
+
 export interface TTitle extends FlexProps {}
 
 export interface TTitleOnly extends HeadingProps {}