@100mslive/roomkit-react 0.3.17-alpha.1 → 0.3.17-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -131,23 +131,20 @@ const PreviewJoin = ({
131
131
 
132
132
  return roomState === HMSRoomState.Preview ? (
133
133
  <Flex justify="center" css={{ size: '100%', position: 'relative' }}>
134
- <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>
134
+ <Container css={{ h: '100%', pt: '$6', '@md': { justifyContent: 'space-between', pt: '$10' } }}>
135
135
  {toggleVideo ? null : <Box />}
136
- <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '640px' }}>
136
+ <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '600px', gap: '$8' }}>
137
137
  <Logo />
138
- <Text
139
- variant="h4"
140
- css={{ wordBreak: 'break-word', textAlign: 'center', mt: '$14', mb: '$4', '@md': { mt: '$8', mb: '$2' } }}
141
- >
138
+ <Text variant="h4" css={{ wordBreak: 'break-word', textAlign: 'center' }}>
142
139
  {previewHeader.title}
143
140
  </Text>
144
141
  <Text
145
- css={{ c: '$on_surface_medium', my: '0', textAlign: 'center', maxWidth: '100%', wordWrap: 'break-word' }}
142
+ css={{ c: '$on_surface_medium', textAlign: 'center', maxWidth: '100%', wordWrap: 'break-word' }}
146
143
  variant="sm"
147
144
  >
148
145
  {previewHeader.sub_title}
149
146
  </Text>
150
- <Flex justify="center" css={{ mt: '$14', '@md': { mt: '$8', mb: '0' }, gap: '$4' }}>
147
+ <Flex justify="center" css={{ gap: '$4' }}>
151
148
  {isStreamingOn ? (
152
149
  <Chip
153
150
  content="LIVE"
@@ -160,7 +157,7 @@ const PreviewJoin = ({
160
157
  </Flex>
161
158
  </Flex>
162
159
  {toggleVideo ? <PreviewTile name={name} error={previewError} /> : null}
163
- <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
160
+ <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 340}px` }}>
164
161
  <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
165
162
  <PreviewForm
166
163
  name={name}
@@ -210,11 +207,11 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
210
207
  css={{
211
208
  bg: '$surface_default',
212
209
  aspectRatio,
213
- height: 'min(360px, 70vh)',
210
+ height: 'min(340px, 70vh)',
214
211
  width: 'auto',
215
- maxWidth: '640px',
212
+ maxWidth: '600px',
216
213
  overflow: 'clip',
217
- mt: '$14',
214
+ mt: '$10',
218
215
  '@md': {
219
216
  mt: 0,
220
217
  width: 'min(220px, 70vw)',
@@ -261,7 +258,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
261
258
  justify={hideSettings && isMobile ? 'center' : 'between'}
262
259
  css={{
263
260
  width: '100%',
264
- mt: '$8',
261
+ mt: '$6',
265
262
  }}
266
263
  >
267
264
  <Flex css={{ gap: '$4' }}>