quilling.dev / social-app
An ATproto social media client -- with an independent Appview.
fork atom

Fix space on bottom of mod screen (#3266)

* Fix space on bottom of mod screen

* fix PWI label overflow + center loader (#3268)

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

authored by

Eric Bailey
Samuel Newman and committed by
GitHub 877eab0f 2a5b0ab2

+225 -226
unified split
+225 -226
src/screens/Moderation/index.tsx
··· 205 205 ) 206 206 207 207 return ( 208 - <View> 209 - <ScrollView 210 - contentContainerStyle={[ 211 - a.border_0, 208 + <ScrollView 209 + contentContainerStyle={[ 210 + a.border_0, 211 + a.pt_2xl, 212 + a.px_lg, 213 + gtMobile && a.px_2xl, 214 + ]}> 215 + <Text 216 + style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}> 217 + <Trans>Moderation tools</Trans> 218 + </Text> 219 + 220 + <View 221 + style={[ 222 + a.w_full, 223 + a.rounded_md, 224 + a.overflow_hidden, 225 + t.atoms.bg_contrast_25, 226 + ]}> 227 + <Button 228 + testID="mutedWordsBtn" 229 + label={_(msg`Open muted words and tags settings`)} 230 + onPress={() => mutedWordsDialogControl.open()}> 231 + {state => ( 232 + <SubItem 233 + title={_(msg`Muted words & tags`)} 234 + icon={Filter} 235 + style={[ 236 + (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 237 + ]} 238 + /> 239 + )} 240 + </Button> 241 + <Divider /> 242 + <Link testID="moderationlistsBtn" to="/moderation/modlists"> 243 + {state => ( 244 + <SubItem 245 + title={_(msg`Moderation lists`)} 246 + icon={Group} 247 + style={[ 248 + (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 249 + ]} 250 + /> 251 + )} 252 + </Link> 253 + <Divider /> 254 + <Link testID="mutedAccountsBtn" to="/moderation/muted-accounts"> 255 + {state => ( 256 + <SubItem 257 + title={_(msg`Muted accounts`)} 258 + icon={Person} 259 + style={[ 260 + (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 261 + ]} 262 + /> 263 + )} 264 + </Link> 265 + <Divider /> 266 + <Link testID="blockedAccountsBtn" to="/moderation/blocked-accounts"> 267 + {state => ( 268 + <SubItem 269 + title={_(msg`Blocked accounts`)} 270 + icon={CircleBanSign} 271 + style={[ 272 + (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 273 + ]} 274 + /> 275 + )} 276 + </Link> 277 + </View> 278 + 279 + <Text 280 + style={[ 212 281 a.pt_2xl, 213 - a.px_lg, 214 - gtMobile && a.px_2xl, 282 + a.pb_md, 283 + a.text_md, 284 + a.font_bold, 285 + t.atoms.text_contrast_high, 215 286 ]}> 216 - <Text 217 - style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}> 218 - <Trans>Moderation tools</Trans> 219 - </Text> 287 + <Trans>Content filters</Trans> 288 + </Text> 220 289 290 + <View style={[a.gap_md]}> 291 + {ageNotSet && ( 292 + <> 293 + <Button 294 + label={_(msg`Confirm your birthdate`)} 295 + size="small" 296 + variant="solid" 297 + color="secondary" 298 + onPress={() => { 299 + birthdateDialogControl.open() 300 + }} 301 + style={[a.justify_between, a.rounded_md, a.px_lg, a.py_lg]}> 302 + <ButtonText> 303 + <Trans>Confirm your age:</Trans> 304 + </ButtonText> 305 + <ButtonText> 306 + <Trans>Set birthdate</Trans> 307 + </ButtonText> 308 + </Button> 309 + 310 + <BirthDateSettingsDialog control={birthdateDialogControl} /> 311 + </> 312 + )} 221 313 <View 222 314 style={[ 223 315 a.w_full, ··· 225 317 a.overflow_hidden, 226 318 t.atoms.bg_contrast_25, 227 319 ]}> 228 - <Button 229 - testID="mutedWordsBtn" 230 - label={_(msg`Open muted words and tags settings`)} 231 - onPress={() => mutedWordsDialogControl.open()}> 232 - {state => ( 233 - <SubItem 234 - title={_(msg`Muted words & tags`)} 235 - icon={Filter} 320 + {!ageNotSet && !isUnderage && ( 321 + <> 322 + <View 236 323 style={[ 237 - (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 238 - ]} 324 + a.py_lg, 325 + a.px_lg, 326 + a.flex_row, 327 + a.align_center, 328 + a.justify_between, 329 + ]}> 330 + <Text style={[a.font_semibold, t.atoms.text_contrast_high]}> 331 + <Trans>Enable adult content</Trans> 332 + </Text> 333 + <Toggle.Item 334 + label={_(msg`Toggle to enable or disable adult content`)} 335 + name="adultContent" 336 + value={adultContentEnabled} 337 + onChange={onToggleAdultContentEnabled}> 338 + <View style={[a.flex_row, a.align_center, a.gap_sm]}> 339 + <Text style={[t.atoms.text_contrast_medium]}> 340 + {adultContentEnabled ? ( 341 + <Trans>Enabled</Trans> 342 + ) : ( 343 + <Trans>Disabled</Trans> 344 + )} 345 + </Text> 346 + <Toggle.Switch /> 347 + </View> 348 + </Toggle.Item> 349 + </View> 350 + <Divider /> 351 + </> 352 + )} 353 + {!isUnderage && adultContentEnabled && ( 354 + <> 355 + <GlobalModerationLabelPref labelValueDefinition={LABELS.porn} /> 356 + <Divider /> 357 + <GlobalModerationLabelPref labelValueDefinition={LABELS.sexual} /> 358 + <Divider /> 359 + <GlobalModerationLabelPref 360 + labelValueDefinition={LABELS['graphic-media']} 239 361 /> 240 - )} 241 - </Button> 242 - <Divider /> 243 - <Link testID="moderationlistsBtn" to="/moderation/modlists"> 244 - {state => ( 245 - <SubItem 246 - title={_(msg`Moderation lists`)} 247 - icon={Group} 248 - style={[ 249 - (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 250 - ]} 251 - /> 252 - )} 253 - </Link> 254 - <Divider /> 255 - <Link testID="mutedAccountsBtn" to="/moderation/muted-accounts"> 256 - {state => ( 257 - <SubItem 258 - title={_(msg`Muted accounts`)} 259 - icon={Person} 260 - style={[ 261 - (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 262 - ]} 263 - /> 264 - )} 265 - </Link> 266 - <Divider /> 267 - <Link testID="blockedAccountsBtn" to="/moderation/blocked-accounts"> 268 - {state => ( 269 - <SubItem 270 - title={_(msg`Blocked accounts`)} 271 - icon={CircleBanSign} 272 - style={[ 273 - (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 274 - ]} 275 - /> 276 - )} 277 - </Link> 278 - </View> 279 - 280 - <Text 281 - style={[ 282 - a.pt_2xl, 283 - a.pb_md, 284 - a.text_md, 285 - a.font_bold, 286 - t.atoms.text_contrast_high, 287 - ]}> 288 - <Trans>Content filters</Trans> 289 - </Text> 290 - 291 - <View style={[a.gap_md]}> 292 - {ageNotSet && ( 293 - <> 294 - <Button 295 - label={_(msg`Confirm your birthdate`)} 296 - size="small" 297 - variant="solid" 298 - color="secondary" 299 - onPress={() => { 300 - birthdateDialogControl.open() 301 - }} 302 - style={[a.justify_between, a.rounded_md, a.px_lg, a.py_lg]}> 303 - <ButtonText> 304 - <Trans>Confirm your age:</Trans> 305 - </ButtonText> 306 - <ButtonText> 307 - <Trans>Set birthdate</Trans> 308 - </ButtonText> 309 - </Button> 310 - 311 - <BirthDateSettingsDialog control={birthdateDialogControl} /> 362 + <Divider /> 312 363 </> 313 364 )} 314 - <View 315 - style={[ 316 - a.w_full, 317 - a.rounded_md, 318 - a.overflow_hidden, 319 - t.atoms.bg_contrast_25, 320 - ]}> 321 - {!ageNotSet && !isUnderage && ( 322 - <> 323 - <View 324 - style={[ 325 - a.py_lg, 326 - a.px_lg, 327 - a.flex_row, 328 - a.align_center, 329 - a.justify_between, 330 - ]}> 331 - <Text style={[a.font_semibold, t.atoms.text_contrast_high]}> 332 - <Trans>Enable adult content</Trans> 333 - </Text> 334 - <Toggle.Item 335 - label={_(msg`Toggle to enable or disable adult content`)} 336 - name="adultContent" 337 - value={adultContentEnabled} 338 - onChange={onToggleAdultContentEnabled}> 339 - <View style={[a.flex_row, a.align_center, a.gap_sm]}> 340 - <Text style={[t.atoms.text_contrast_medium]}> 341 - {adultContentEnabled ? ( 342 - <Trans>Enabled</Trans> 343 - ) : ( 344 - <Trans>Disabled</Trans> 345 - )} 346 - </Text> 347 - <Toggle.Switch /> 348 - </View> 349 - </Toggle.Item> 350 - </View> 351 - <Divider /> 352 - </> 353 - )} 354 - {!isUnderage && adultContentEnabled && ( 355 - <> 356 - <GlobalModerationLabelPref labelValueDefinition={LABELS.porn} /> 357 - <Divider /> 358 - <GlobalModerationLabelPref 359 - labelValueDefinition={LABELS.sexual} 360 - /> 361 - <Divider /> 362 - <GlobalModerationLabelPref 363 - labelValueDefinition={LABELS['graphic-media']} 364 - /> 365 - <Divider /> 366 - </> 367 - )} 368 - <GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} /> 369 - </View> 365 + <GlobalModerationLabelPref labelValueDefinition={LABELS.nudity} /> 370 366 </View> 367 + </View> 371 368 372 - <Text 373 - style={[ 374 - a.text_md, 375 - a.font_bold, 376 - a.pt_2xl, 377 - a.pb_md, 378 - t.atoms.text_contrast_high, 379 - ]}> 380 - <Trans>Advanced</Trans> 381 - </Text> 369 + <Text 370 + style={[ 371 + a.text_md, 372 + a.font_bold, 373 + a.pt_2xl, 374 + a.pb_md, 375 + t.atoms.text_contrast_high, 376 + ]}> 377 + <Trans>Advanced</Trans> 378 + </Text> 382 379 383 - {isLabelersLoading ? ( 384 - <Loader /> 385 - ) : labelersError || !labelers ? ( 386 - <View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}> 387 - <Text> 388 - <Trans> 389 - We were unable to load your configured labelers at this time. 390 - </Trans> 391 - </Text> 392 - </View> 393 - ) : ( 394 - <View style={[a.rounded_sm, t.atoms.bg_contrast_25]}> 395 - {labelers.map((labeler, i) => { 396 - return ( 397 - <React.Fragment key={labeler.creator.did}> 398 - {i !== 0 && <Divider />} 399 - <LabelingService.Link labeler={labeler}> 400 - {state => ( 401 - <LabelingService.Outer 402 - style={[ 403 - i === 0 && { 404 - borderTopLeftRadius: a.rounded_sm.borderRadius, 405 - borderTopRightRadius: a.rounded_sm.borderRadius, 406 - }, 407 - i === labelers.length - 1 && { 408 - borderBottomLeftRadius: a.rounded_sm.borderRadius, 409 - borderBottomRightRadius: a.rounded_sm.borderRadius, 410 - }, 411 - (state.hovered || state.pressed) && [ 412 - t.atoms.bg_contrast_50, 413 - ], 414 - ]}> 415 - <LabelingService.Avatar /> 416 - <LabelingService.Content> 417 - <LabelingService.Title 418 - value={getLabelingServiceTitle({ 419 - displayName: labeler.creator.displayName, 420 - handle: labeler.creator.handle, 421 - })} 422 - /> 423 - <LabelingService.Description 424 - value={labeler.creator.description} 425 - handle={labeler.creator.handle} 426 - /> 427 - </LabelingService.Content> 428 - </LabelingService.Outer> 429 - )} 430 - </LabelingService.Link> 431 - </React.Fragment> 432 - ) 433 - })} 434 - </View> 435 - )} 380 + {isLabelersLoading ? ( 381 + <View style={[a.w_full, a.align_center, a.p_lg]}> 382 + <Loader size="xl" /> 383 + </View> 384 + ) : labelersError || !labelers ? ( 385 + <View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}> 386 + <Text> 387 + <Trans> 388 + We were unable to load your configured labelers at this time. 389 + </Trans> 390 + </Text> 391 + </View> 392 + ) : ( 393 + <View style={[a.rounded_sm, t.atoms.bg_contrast_25]}> 394 + {labelers.map((labeler, i) => { 395 + return ( 396 + <React.Fragment key={labeler.creator.did}> 397 + {i !== 0 && <Divider />} 398 + <LabelingService.Link labeler={labeler}> 399 + {state => ( 400 + <LabelingService.Outer 401 + style={[ 402 + i === 0 && { 403 + borderTopLeftRadius: a.rounded_sm.borderRadius, 404 + borderTopRightRadius: a.rounded_sm.borderRadius, 405 + }, 406 + i === labelers.length - 1 && { 407 + borderBottomLeftRadius: a.rounded_sm.borderRadius, 408 + borderBottomRightRadius: a.rounded_sm.borderRadius, 409 + }, 410 + (state.hovered || state.pressed) && [ 411 + t.atoms.bg_contrast_50, 412 + ], 413 + ]}> 414 + <LabelingService.Avatar /> 415 + <LabelingService.Content> 416 + <LabelingService.Title 417 + value={getLabelingServiceTitle({ 418 + displayName: labeler.creator.displayName, 419 + handle: labeler.creator.handle, 420 + })} 421 + /> 422 + <LabelingService.Description 423 + value={labeler.creator.description} 424 + handle={labeler.creator.handle} 425 + /> 426 + </LabelingService.Content> 427 + </LabelingService.Outer> 428 + )} 429 + </LabelingService.Link> 430 + </React.Fragment> 431 + ) 432 + })} 433 + </View> 434 + )} 436 435 437 - <Text 438 - style={[ 439 - a.text_md, 440 - a.font_bold, 441 - a.pt_2xl, 442 - a.pb_md, 443 - t.atoms.text_contrast_high, 444 - ]}> 445 - <Trans>Logged-out visibility</Trans> 446 - </Text> 436 + <Text 437 + style={[ 438 + a.text_md, 439 + a.font_bold, 440 + a.pt_2xl, 441 + a.pb_md, 442 + t.atoms.text_contrast_high, 443 + ]}> 444 + <Trans>Logged-out visibility</Trans> 445 + </Text> 447 446 448 - <PwiOptOut /> 447 + <PwiOptOut /> 449 448 450 - <View style={{height: 200}} /> 451 - </ScrollView> 452 - </View> 449 + <View style={{height: 200}} /> 450 + </ScrollView> 453 451 ) 454 452 } 455 453 ··· 517 515 value={isOptedOut} 518 516 onChange={onToggleOptOut} 519 517 name="logged_out_visibility" 518 + style={a.flex_1} 520 519 label={_( 521 520 msg`Discourage apps from showing my account to logged-out users`, 522 521 )}> 523 522 <Toggle.Switch /> 524 - <Toggle.Label style={[a.text_md]}> 523 + <Toggle.Label style={[a.text_md, a.flex_1]}> 525 524 <Trans> 526 525 Discourage apps from showing my account to logged-out users 527 526 </Trans>