fix: update icebreaker styles (#10723)

ParabolInc · Feb 6, 2025 · 31d398f · 31d398f
1 parent ae4c7b0
commit 31d398f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 34 deletions.
diff --git a/packages/client/modules/meeting/components/MeetingCheckInPrompt/NewCheckInQuestion.tsx b/packages/client/modules/meeting/components/MeetingCheckInPrompt/NewCheckInQuestion.tsx
@@ -37,30 +37,6 @@ const CogIcon = styled('div')({
   width: 24
 })
 
-const QuestionBlock = styled('div')({
-  alignContent: 'center',
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'column',
-  fontSize: 24,
-  lineHeight: 1.25,
-  padding: '16px 0',
-  '.DraftEditor-root, textarea': {
-    flexGrow: 1,
-    padding: '16px',
-    borderRadius: '4px',
-    '&:hover': {
-      backgroundColor: 'rgba(255,255,255,0.2)'
-    },
-    '&:focus-within': {
-      backgroundColor: 'rgba(255,255,255,0.6)'
-    },
-    '.public-DraftStyleDefault-block': {
-      textAlign: 'center'
-    }
-  }
-})
-
 interface Props {
   meeting: NewCheckInQuestion_meeting$key
 }
@@ -187,9 +163,8 @@ const NewCheckInQuestion = (props: Props) => {
 
   return (
     <>
-      <QuestionBlock id='test'>
-        {/* cannot set min width because iPhone 5 has a width of 320*/}
-        <EditorContent editor={editor} onBlur={updateQuestion} />
+      <div className='flex flex-col items-center py-4'>
+        <EditorContent className='text-2xl' editor={editor} onBlur={updateQuestion} />
         {isFacilitating && (
           <div className='flex gap-x-2'>
             <Tooltip open={isFacilitating ? undefined : false}>
@@ -214,7 +189,7 @@ const NewCheckInQuestion = (props: Props) => {
             </Tooltip>
           </div>
         )}
-      </QuestionBlock>
+      </div>
       {showAiIcebreaker && (
         <div className='flex flex-col gap-4 rounded-lg bg-slate-100 p-6'>
           <div className='flex flex-col items-center justify-center gap-2'>

diff --git a/packages/client/styles/theme/global.css b/packages/client/styles/theme/global.css
@@ -492,16 +492,18 @@
   }
 }
 
-.ProseMirror p {
-  margin-block-start: 4px;
-  margin-block-end: 4px;
-  line-height: 1rem;
-}
-
 hr.ProseMirror-selectednode {
   border-top: 1px solid #68cef8;
 }
 
 .ProseMirror hr {
   border-top: 1px solid var(--color-slate-400);
 }
+
+.ProseMirror p {
+  line-height: 1.25rem;
+}
+
+.text-2xl .ProseMirror p {
+  line-height: 2rem;
+}