Blue color theme for Comments Panel

seed-hypermedia · Jan 10, 2024 · 244a429 · 244a429
1 parent 8300f68
commit 244a429
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/frontend/packages/app/components/accessory-sidebar.tsx b/frontend/packages/app/components/accessory-sidebar.tsx
@@ -1,18 +1,20 @@
 import {ScrollView, SizableText, XStack, YStack} from '@mintter/ui'
 import {Allotment} from 'allotment'
+import {ComponentProps} from 'react'
 
 export function AccessoryContainer({
   children,
   footer,
   title,
+  ...props
 }: {
   children: React.ReactNode
   footer?: React.ReactNode
   title?: string
-}) {
+} & ComponentProps<typeof YStack>) {
   return (
     <Allotment.Pane preferredSize="35%" maxSize={400} minSize={300}>
-      <YStack height="100%">
+      <YStack height="100%" {...props}>
         {title ? (
           <XStack
             paddingHorizontal="$4"

diff --git a/frontend/packages/app/components/comments.tsx b/frontend/packages/app/components/comments.tsx
@@ -198,6 +198,8 @@ export function EntityCommentsAccessory({
   const createComment = trpc.comments.createCommentDraft.useMutation()
   return (
     <AccessoryContainer
+      backgroundColor={'$blue2'}
+      theme="blue"
       title="Comments"
       footer={
         <YStack padding="$4" borderTopWidth={1} borderColor="$borderColor">

diff --git a/frontend/packages/app/pages/comment.tsx b/frontend/packages/app/pages/comment.tsx
@@ -164,7 +164,7 @@ export default function CommentPage() {
   return (
     <>
       <CommentPageTitlebarWithDocId targetDocId={targetDocId?.qid} />
-      <MainWrapperStandalone backgroundColor={'$blue2'}>
+      <MainWrapperStandalone backgroundColor={'$blue2'} theme="blue">
         {comment.isLoading ? <Spinner /> : null}
         {route.showThread && targetDocId && comment.data?.repliedComment ? (
           <CommentThread