fix page footer styles

Former-commit-id: 8b6c9ea

frontend/app/src/components/button.tsx

@@ -26,7 +26,7 @@ export const buttonStyles = css({
         '$$outlined-border-size': '1px',
         fontSize: '$2',
         lineHeight: '$1',
-        paddingHorizontal: '$3',
+        paddingHorizontal: '$4',
         paddingVertical: '$2',
       },
       2: {
@@ -58,7 +58,8 @@ export const buttonStyles = css({
       },
       outlined: {
         backgroundColor: 'transparent',
-        boxShadow: 'inset 0px 0px 0px $$outlined-border-size $$outlined-border-color',
+        boxShadow:
+          'inset 0px 0px 0px $$outlined-border-size $$outlined-border-color',
         color: '$$outlined-text-color',
         '&:hover': {
           backgroundColor: '$$outlined-hovered-background-color',
@@ -80,7 +81,7 @@ export const buttonStyles = css({
     },
     shape: {
       rounded: {
-        borderRadius: '$2',
+        borderRadius: '$1',
       },
       pill: {
         borderRadius: '$pill',
@@ -150,11 +151,13 @@ export const buttonStyles = css({
       muted: {
         '$$solid-background-color': '$colors$background-contrast',
         '$$solid-text-color': '$colors$text-opposite',
-        '$$solid-hovered-background-color': '$colors$background-contrast-strong',
+        '$$solid-hovered-background-color':
+          '$colors$background-contrast-strong',
         '$$solid-active-background-color': '$colors$background-opposite',
         '$$outlined-border-color': '$colors$background-contrast',
         '$$outlined-text-color': '$colors$background-contrast',
-        '$$outlined-hovered-background-color': '$colors$background-neutral-soft',
+        '$$outlined-hovered-background-color':
+          '$colors$background-neutral-soft',
         '$$outlined-active-background-color': '$colors$background-neutral',
       },
     },

frontend/app/src/components/page-footer.tsx

@@ -0,0 +1,44 @@
+import {css, styled} from '@app/stitches.config'
+
+export const footerStyles = css({
+  background: '$background-alt',
+  width: '$full',
+  position: 'absolute',
+  bottom: 0,
+  zIndex: '$max',
+  display: 'flex',
+  justifyContent: 'space-between',
+  '&:after': {
+    content: '',
+    position: 'absolute',
+    width: '$full',
+    height: 20,
+    background:
+      'linear-gradient(0deg, $colors$background-alt 0%, rgba(255,255,255,0) 100%)',
+    top: -20,
+    left: 0,
+  },
+})
+export const footerMetadataStyles = css({
+  flex: 'none',
+  background: '$background-alt',
+  padding: '$5',
+  display: 'flex',
+  alignItems: 'center',
+})
+
+export const footerButtonsStyles = css({
+  display: 'flex',
+  gap: '$5',
+  padding: '$5',
+  paddingRight: 0,
+  alignItems: 'center',
+})
+
+export const PageFooterSeparator = styled('div', {
+  width: 1,
+  height: '80%',
+  marginLeft: '$4',
+  marginRight: '$4',
+  background: '$background-neutral-strong',
+})

frontend/app/src/components/topbar.tsx

@@ -60,6 +60,7 @@ export function Topbar() {
   }
 
   let title = getDocumentTitle(mainState.context.currentDocument)
+  console.log('Current Location: ', window.location.pathname)
 
   return (
     <TopbarStyled data-tauri-drag-region>

frontend/app/src/editor/use-editor-draft.ts

@@ -301,6 +301,6 @@ export function useEditorDraft({ documentId, mainPageService, editor, shouldAuto
   return [state, send] as const
 }
 
-export function getTitleFromContent(entry: Editor): string {
+export function getTitleFromContent(entry: { children: Array<EditorDocument['children']> }): string {
   return Node.string(Node.get(entry, [0, 0, 0])) || ''
 }

frontend/app/src/pages/editor.tsx

@@ -19,6 +19,12 @@ import {useMainPage, useParams} from '@app/main-page-context'
 import {getDateFormat} from '@app/utils/get-format-date'
 import {Box} from '@components/box'
 import {Button} from '@components/button'
+import {
+  footerButtonsStyles,
+  footerMetadataStyles,
+  footerStyles,
+  PageFooterSeparator,
+} from '@components/page-footer'
 import {Text} from '@components/text'
 import {ChildrenOf} from '@mintter/mttast'
 import {useMemo, useRef, useState} from 'react'
@@ -200,7 +206,7 @@ export default function EditorPage({
       >
         <Box data-testid="editor-wrapper">
           {context.localDraft?.content && (
-            <Box css={{}}>
+            <Box>
               <Editor
                 editor={editor}
                 value={context.localDraft.content}
@@ -216,95 +222,27 @@ export default function EditorPage({
                   toggle Value
                 </button>
                 {visible && (
-                  <Box as="pre" css={{}}>
+                  <Box as="pre">
                     {JSON.stringify(context.localDraft.content, null, 2)}
                   </Box>
                 )}
               </Box>
             </Box>
           )}
         </Box>
-        <Box
-          css={{
-            background: '$background-alt',
-            width: '$full',
-            position: 'absolute',
-            bottom: 0,
-            zIndex: '$max',
-            display: 'flex',
-            justifyContent: 'space-between',
-            '&:after': {
-              content: '',
-              position: 'absolute',
-              width: '$full',
-              height: 20,
-              background:
-                'linear-gradient(0deg, $colors$background-alt 0%, rgba(255,255,255,0) 100%)',
-              top: -20,
-              left: 0,
-            },
-          }}
-        >
-          <Box
-            css={{
-              flex: 1,
-              background: '$background-alt',
-              padding: '$5',
-              $$gap: '24px',
-              display: 'flex',
-              gap: '$$gap',
-              alignItems: 'center',
-              '& > span': {
-                position: 'relative',
-              },
-              '& > span:before': {
-                content: `"|"`,
-                color: '$text-muted',
-                position: 'absolute',
-                right: -15,
-                top: 0,
-              },
-            }}
-          >
+        <Box className={footerStyles()}>
+          <Box className={footerMetadataStyles()}>
             <Text size="1" color="muted">
               Created on: {getDateFormat(context.localDraft!, 'createTime')}
             </Text>
+            <PageFooterSeparator />
             <Text size="1" color="muted">
               Last modified: {getDateFormat(context.localDraft!, 'updateTime')}
             </Text>
+            <PageFooterSeparator />
             <EditorStatus state={state} />
           </Box>
-          <Box
-            css={{
-              display: 'flex',
-              gap: '$5',
-              padding: '$5',
-              paddingRight: 0,
-              alignItems: 'center',
-            }}
-          >
-            <Button
-              size="1"
-              variant="outlined"
-              disabled={!state.hasTag('canPublish')}
-              data-testid="submit-review"
-              onClick={() => {
-                console.log('Review: IMPLEMENT ME!')
-              }}
-            >
-              Review
-            </Button>
-            <Button
-              variant="outlined"
-              size="1"
-              disabled={!state.hasTag('canPublish')}
-              data-testid="submit-reply"
-              onClick={() => {
-                console.log('Reply: IMPLEMENT ME!')
-              }}
-            >
-              Reply
-            </Button>
+          <Box className={footerButtonsStyles()}>
             <Button
               color="success"
               size="1"