fix(ui): improve UI on sidebar and settings

frontend/packages/app/components/sidebar.tsx

@@ -58,6 +58,11 @@ function FullAppSidebar() {
   const triggerFocusedWindow = useTriggerWindowEvent()
   const {platform} = useAppContext()
   const isVisible = isLocked || isHoverVisible
+  let top = platform === 'darwin' ? 40 : 72
+  if (!isLocked) {
+    top += 8
+  }
+  let bottom = isLocked ? 24 : 32
   return (
     <YStack
       backgroundColor={'$color1'}
@@ -68,8 +73,11 @@ function FullAppSidebar() {
       x={isVisible ? 0 : -(SidebarWidth - 50)}
       width="100%"
       maxWidth={SidebarWidth}
-      top={platform === 'darwin' ? 40 : 72}
-      bottom={24}
+      elevation={!isLocked ? '$4' : undefined}
+      top={top}
+      bottom={bottom}
+      borderTopRightRadius={!isLocked ? '$3' : undefined}
+      borderBottomRightRadius={!isLocked ? '$3' : undefined}
       onMouseEnter={ctx.onMenuHover}
       onMouseLeave={ctx.onMenuHoverLeave}
       opacity={isVisible ? 1 : 0}

frontend/packages/app/components/titlebar-common.tsx

@@ -27,6 +27,7 @@ import {
   View,
   XGroup,
   XStack,
+  XStackProps,
   useStream,
 } from '@mintter/ui'
 import {
@@ -549,14 +550,14 @@ export function NavMenuButton({left}: {left?: ReactNode}) {
   if (!isLocked && isHoverVisible) {
     icon = ArrowRightFromLine
   }
+
   return (
     <XStack
       marginLeft="$2"
       // intention here is to hide the "close sidebar" button when the sidebar is locked, but the group="item" causes layout issues
       // group="item"
-      jc="space-between"
-      width="100%"
-      maxWidth={
+      justifyContent="space-between"
+      width={
         isLocked
           ? SidebarWidth - 9 // not sure why this -9 is needed, but it makes the "close sidebar" button properly aligned with the sidebar width
           : 'auto'

frontend/packages/app/pages/settings.tsx

@@ -192,6 +192,7 @@ export function DeveloperSettings() {
         <XStack jc="space-between">
           {enabledDevTools ? <EnabledTag /> : <View />}
           <Button
+            size="$2"
             theme={enabledDevTools ? 'red' : 'green'}
             onPress={() => {
               writeExperiments.mutate({developerTools: !enabledDevTools})
@@ -208,6 +209,7 @@ export function DeveloperSettings() {
         <XStack jc="space-between">
           {enabledPubContentDevMenu ? <EnabledTag /> : <View />}
           <Button
+            size="$2"
             theme={enabledPubContentDevMenu ? 'red' : 'green'}
             onPress={() => {
               writeExperiments.mutate({
@@ -224,6 +226,7 @@ export function DeveloperSettings() {
       <SettingsSection title="Draft Logs">
         <XStack space>
           <Button
+            size="$2"
             icon={ExternalLink}
             onPress={() => {
               openDraftLogs.mutate()
@@ -239,29 +242,6 @@ export function DeveloperSettings() {
   )
 }
 
-function TestFileUpload() {
-  const upload = trpc.webImporting.importWebFile.useMutation()
-  return (
-    <Button
-      onPress={() => {
-        upload
-          .mutateAsync(
-            'https://cdn.vocab.com/articles/ll/meme-and-variation/memes_clip_image002_0000.jpg',
-          )
-          .then(({cid, type}) => {
-            toast.success(`Imported to CID: ${cid}. Type is ${type}`)
-          })
-          .catch((e) => {
-            toast.error('Failed to import this file')
-          })
-      }}
-      theme="blue"
-    >
-      Test Image Import from URL
-    </Button>
-  )
-}
-
 export function ProfileForm({
   profile,
   accountId,
@@ -483,15 +463,14 @@ export function ExperimentSection({
 function EnabledTag() {
   return (
     <XStack
-      backgroundColor="$blue12"
-      padding="$2"
+      padding="$1"
       paddingHorizontal="$3"
       gap="$3"
       alignItems="center"
       borderRadius="$2"
     >
-      <Check size="$1" color="$color1" />
-      <SizableText size="$1" color="$color1" fontWeight="bold">
+      <Check size="$1" color="$blue12" />
+      <SizableText size="$1" color="$blue12" fontWeight="bold">
         Enabled
       </SizableText>
     </XStack>

frontend/packages/shared/src/publication-content.tsx

@@ -3,6 +3,7 @@ import {
   BlockNode,
   HMBlock,
   HMBlockChildrenType,
+  HMBlockCodeBlock,
   HMBlockFile,
   HMBlockNode,
   HMInlineContent,
@@ -15,30 +16,28 @@ import {
   isHypermediaScheme,
   toHMInlineContent,
   unpackHmId,
-  IS_PROD_DESKTOP,
-  HMBlockCodeBlock,
 } from '@mintter/shared'
 import {
   Button,
-  ColorProp,
-  Copy,
-  File,
   Check as CheckIcon,
   Checkbox,
   CheckboxProps,
+  ColorProp,
+  Copy,
+  File,
+  Label,
+  RadioGroup,
   SizableText,
   SizableTextProps,
+  SizeTokens,
   Text,
   TextProps,
-  Label,
   Tooltip,
   UIAvatar,
-  RadioGroup,
-  SizeTokens,
   XStack,
+  XStackProps,
   YStack,
   YStackProps,
-  XStackProps,
 } from '@mintter/ui'
 import {AlertCircle, Book} from '@tamagui/lucide-icons'
 import {
@@ -49,11 +48,11 @@ import {
   useState,
 } from 'react'
 import {HMAccount, HMGroup} from './json-hm'
-import './publication-content.css'
 import {
   contentLayoutUnit,
   contentTextUnit,
 } from './publication-content-constants'
+import './publication-content.css'
 
 export type EntityComponentsRecord = {
   AccountCard: React.FC<EntityComponentProps>
@@ -343,7 +342,6 @@ export function BlockNodeContent({
   }, [blockNode.block, headingMarginStyles])
 
   const isEmbed = blockNode.block?.type == 'embed'
-
   return (
     <YStack
       className="blocknode-content"

frontend/packages/ui/src/config/animations.ts

@@ -1,7 +1,7 @@
 import {createAnimations} from '@tamagui/animations-css'
 
 export const animations = createAnimations({
-  fast: 'ease-in 150ms',
-  medium: 'ease-in 300ms',
-  slow: 'ease-in 450ms',
+  fast: 'ease-in-out 150ms',
+  medium: 'ease-in-out 300ms',
+  slow: 'ease-in-out 450ms',
 })