reorder header, center align header, update collapse caret icons (#110)

src/components/Collapsible.tsx

@@ -80,7 +80,7 @@ Styled.TriggerIcon = styled.span`
   width: var(--trigger-icon-width);
 
   display: inline-flex;
-  transition: transform 0.3s var(--ease-out-expo);
+  transition: rotate 0.3s var(--ease-out-expo);
   color: var(--trigger-icon-color);
 
   ${Styled.Trigger}[data-state='open'] & {

src/components/NavigationMenu.tsx

@@ -525,6 +525,9 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
 `;
 
 Styled.Icon = styled(Icon)`
+  height: 0.75em;
+  transition: rotate 0.3s var(--ease-out-expo);
+
   ${Styled.List}[data-orientation="menu"] & {
     rotate: -0.25turn;
   }

src/layout/Header/HeaderDesktop.tsx

@@ -24,6 +24,7 @@ import { openDialog } from '@/state/dialogs';
 
 import { headerMixins } from '@/styles/headerMixins';
 import { layoutMixins } from '@/styles/layoutMixins';
+import breakpoints from '@/styles/breakpoints';
 
 export const HeaderDesktop = () => {
   const stringGetter = useStringGetter();
@@ -34,26 +35,26 @@ export const HeaderDesktop = () => {
     {
       group: 'navigation',
       items: [
-        {
-          value: 'MARKET',
-          label: stringGetter({ key: STRING_KEYS.MARKET }),
-          href: AppRoute.Markets,
-        },
         {
           value: 'TRADE',
           label: stringGetter({ key: STRING_KEYS.TRADE }),
           href: AppRoute.Trade,
         },
-        {
-          value: chainTokenLabel,
-          label: chainTokenLabel,
-          href: `/${chainTokenLabel}`,
-        },
         {
           value: 'PORTFOLIO',
           label: stringGetter({ key: STRING_KEYS.PORTFOLIO }),
           href: AppRoute.Portfolio,
         },
+        {
+          value: 'MARKETS',
+          label: stringGetter({ key: STRING_KEYS.MARKETS }),
+          href: AppRoute.Markets,
+        },
+        {
+          value: chainTokenLabel,
+          label: chainTokenLabel,
+          href: `/${chainTokenLabel}`,
+        },
         {
           value: 'MORE',
           label: stringGetter({ key: STRING_KEYS.MORE }),
@@ -150,6 +151,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Header = styled.header`
   --header-horizontal-padding-mobile: 0.5rem;
+  --trigger-height: 2.25rem;
   --logo-width: 3.5rem;
 
   ${layoutMixins.container}
@@ -157,6 +159,8 @@ Styled.Header = styled.header`
   ${layoutMixins.scrollSnapItem}
   backdrop-filter: none;
 
+  height: var(--page-currentHeaderHeight);
+
   grid-area: Header;
 
   display: grid;
@@ -169,6 +173,14 @@ Styled.Header = styled.header`
     )
     var(--border-width) 1fr var(--border-width) auto;
 
+  @media ${breakpoints.tablet} {
+    --trigger-height: 3rem;
+  }
+
+  @media ${breakpoints.mobile} {
+    --navBefore-width: 7rem;
+  }
+
   font-size: 0.9375rem;
 
   :before {
@@ -179,6 +191,7 @@ Styled.Header = styled.header`
 Styled.NavigationMenu = styled(NavigationMenu)`
   & {
     --navigationMenu-height: var(--stickyArea-topHeight);
+    --navigationMenu-item-height: var(--trigger-height);
   }
 
   ${layoutMixins.scrollArea}

src/views/TransferStatus.tsx

@@ -168,7 +168,7 @@ Styled.TriggerIcon = styled.span`
   width: 0.75em;
 
   display: inline-flex;
-  transition: transform 0.3s var(--ease-out-expo);
+  transition: rotate 0.3s var(--ease-out-expo);
 
   ${Styled.Trigger}[data-state='open'] & {
     rotate: -0.5turn;