LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 20:31:13 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into fix/fix-badges-spacing-componentize

Browse source
This commit is contained in:
SleeplessOne1917 2023-07-03 12:29:55 +00:00 committed by GitHub
commit 34f04e6758
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 224 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/common/searchable-select.tsx
View file

@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
const { searchText, selectedIndex, loadingEllipses } = this.state; const { searchText, selectedIndex, loadingEllipses } = this.state;
return ( return (
<div className="searchable-select dropdown"> <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
<button <button
id={id} id={id}
type="button" type="button"

2
src/shared/components/community/communities.tsx
View file

@ -102,7 +102,7 @@ export class Communities extends Component<any, CommunitiesState> {
const { listingType, page } = this.getCommunitiesQueryParams(); const { listingType, page } = this.getCommunitiesQueryParams();
return ( return (
<div> <div>
<h1 className="h4"> <h1 className="h4 mb-4">
{I18NextService.i18n.t("list_of_communities")} {I18NextService.i18n.t("list_of_communities")}
</h1> </h1>
<div className="row g-2 justify-content-between"> <div className="row g-2 justify-content-between">

2
src/shared/components/community/community.tsx
View file

@ -485,7 +485,7 @@ export class Community extends Component<
community && ( community && (
<div className="mb-2"> <div className="mb-2">
<BannerIconHeader banner={community.banner} icon={community.icon} /> <BannerIconHeader banner={community.banner} icon={community.icon} />
<h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5> <h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
<CommunityLink <CommunityLink
community={community} community={community}
realLink realLink

4
src/shared/components/community/create-community.tsx
View file

@ -39,7 +39,9 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
/> />
<div className="row"> <div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4"> <div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{I18NextService.i18n.t("create_community")}</h5> <h1 className="h4 mb-4">
{I18NextService.i18n.t("create_community")}
</h1>
<CommunityForm <CommunityForm
onUpsertCommunity={this.handleCommunityCreate} onUpsertCommunity={this.handleCommunityCreate}
enableNsfw={enableNsfw(this.state.siteRes)} enableNsfw={enableNsfw(this.state.siteRes)}

4
src/shared/components/community/sidebar.tsx
View file

@ -169,7 +169,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
return ( return (
<div> <div>
<h5 className="mb-0"> <h2 className="h5 mb-0">
{this.props.showIcon && !community.removed && ( {this.props.showIcon && !community.removed && (
<BannerIconHeader icon={community.icon} banner={community.banner} /> <BannerIconHeader icon={community.icon} banner={community.banner} />
)} )}
@ -191,7 +191,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{I18NextService.i18n.t("nsfw")} {I18NextService.i18n.t("nsfw")}
</small> </small>
)} )}
</h5> </h2>
<CommunityLink <CommunityLink
community={community} community={community}
realLink realLink

10
src/shared/components/home/admin-settings.tsx
View file

@ -135,6 +135,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
role="tabpanel" role="tabpanel"
id="site-tab-pane" id="site-tab-pane"
> >
<h1 className="h4 mb-4">
{I18NextService.i18n.t("site_config")}
</h1>
<div className="row"> <div className="row">
<div className="col-12 col-md-6"> <div className="col-12 col-md-6">
<SiteForm <SiteForm
@ -149,6 +152,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
</div> </div>
<div className="col-12 col-md-6"> <div className="col-12 col-md-6">
{this.admins()} {this.admins()}
<hr />
{this.bannedUsers()} {this.bannedUsers()}
</div> </div>
</div> </div>
@ -249,7 +253,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
admins() { admins() {
return ( return (
<> <>
<h5>{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}</h5> <h2 className="h5">
{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}
</h2>
<ul className="list-unstyled"> <ul className="list-unstyled">
{this.state.siteRes.admins.map(admin => ( {this.state.siteRes.admins.map(admin => (
<li key={admin.person.id} className="list-inline-item"> <li key={admin.person.id} className="list-inline-item">
@ -289,7 +295,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
const bans = this.state.bannedRes.data.banned; const bans = this.state.bannedRes.data.banned;
return ( return (
<> <>
<h5>{I18NextService.i18n.t("banned_users")}</h5> <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
<ul className="list-unstyled"> <ul className="list-unstyled">
{bans.map(banned => ( {bans.map(banned => (
<li key={banned.person.id} className="list-inline-item"> <li key={banned.person.id} className="list-inline-item">

2
src/shared/components/home/emojis-form.tsx
View file

@ -77,7 +77,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("custom_emojis")}</h1>
{customEmojisLookup.size > 0 && ( {customEmojisLookup.size > 0 && (
<div> <div>
<EmojiMart <EmojiMart

17
src/shared/components/home/instances.tsx
View file

@ -85,24 +85,35 @@ export class Instances extends Component<any, InstancesState> {
case "success": { case "success": {
const instances = this.state.instancesRes.data.federated_instances; const instances = this.state.instancesRes.data.federated_instances;
return instances ? ( return instances ? (
<>
<h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">
<h5>{I18NextService.i18n.t("linked_instances")}</h5> <h2 className="h5 mb-3">
{I18NextService.i18n.t("linked_instances")}
</h2>
{this.itemList(instances.linked)} {this.itemList(instances.linked)}
</div> </div>
</div>
<div className="row">
{instances.allowed && instances.allowed.length > 0 && ( {instances.allowed && instances.allowed.length > 0 && (
<div className="col-md-6"> <div className="col-md-6">
<h5>{I18NextService.i18n.t("allowed_instances")}</h5> <h2 className="h5 mb-3">
{I18NextService.i18n.t("allowed_instances")}
</h2>
{this.itemList(instances.allowed)} {this.itemList(instances.allowed)}
</div> </div>
)} )}
{instances.blocked && instances.blocked.length > 0 && ( {instances.blocked && instances.blocked.length > 0 && (
<div className="col-md-6"> <div className="col-md-6">
<h5>{I18NextService.i18n.t("blocked_instances")}</h5> <h2 className="h5 mb-3">
{I18NextService.i18n.t("blocked_instances")}
</h2>
{this.itemList(instances.blocked)} {this.itemList(instances.blocked)}
</div> </div>
)} )}
</div> </div>
</>
) : ( ) : (
<></> <></>
); );

4
src/shared/components/home/login-reset.tsx
View file

@ -59,9 +59,9 @@ export class LoginReset extends Component<any, State> {
loginResetForm() { loginResetForm() {
return ( return (
<form onSubmit={linkEvent(this, this.handlePasswordReset)}> <form onSubmit={linkEvent(this, this.handlePasswordReset)}>
<h5> <h1 className="h4 mb-4">
{capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))} {capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
</h5> </h1>
<div className="form-group row"> <div className="form-group row">
<label className="col-form-label"> <label className="col-form-label">

2
src/shared/components/home/login.tsx
View file

@ -69,7 +69,7 @@ export class Login extends Component<any, State> {
return ( return (
<div> <div>
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}> <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
<h5>{I18NextService.i18n.t("login")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("login")}</h1>
<div className="mb-3 row"> <div className="mb-3 row">
<label <label
className="col-sm-2 col-form-label" className="col-sm-2 col-form-label"

4
src/shared/components/home/rate-limit-form.tsx
View file

@ -145,7 +145,9 @@ export default class RateLimitsForm extends Component<
className="rate-limit-form" className="rate-limit-form"
onSubmit={linkEvent(this, submitRateLimitForm)} onSubmit={linkEvent(this, submitRateLimitForm)}
> >
<h5>{I18NextService.i18n.t("rate_limit_header")}</h5> <h1 className="h4 mb-4">
{I18NextService.i18n.t("rate_limit_header")}
</h1>
<Tabs <Tabs
tabs={rateLimitTypes.map(rateLimitType => ({ tabs={rateLimitTypes.map(rateLimitType => ({
key: rateLimitType, key: rateLimitType,

6
src/shared/components/home/setup.tsx
View file

@ -63,7 +63,9 @@ export class Setup extends Component<any, State> {
<Helmet title={this.documentTitle} /> <Helmet title={this.documentTitle} />
<div className="row"> <div className="row">
<div className="col-12 offset-lg-3 col-lg-6"> <div className="col-12 offset-lg-3 col-lg-6">
<h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3> <h1 className="h4 mb-4">
{I18NextService.i18n.t("lemmy_instance_setup")}
</h1>
{!this.state.doneRegisteringUser ? ( {!this.state.doneRegisteringUser ? (
this.registerUser() this.registerUser()
) : ( ) : (
@ -84,7 +86,7 @@ export class Setup extends Component<any, State> {
registerUser() { registerUser() {
return ( return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}> <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
<h5>{I18NextService.i18n.t("setup_admin")}</h5> <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="username"> <label className="col-sm-2 col-form-label" htmlFor="username">
{I18NextService.i18n.t("username")} {I18NextService.i18n.t("username")}

2
src/shared/components/home/signup.tsx
View file

@ -144,7 +144,7 @@ export class Signup extends Component<any, State> {
className="was-validated" className="was-validated"
onSubmit={linkEvent(this, this.handleRegisterSubmit)} onSubmit={linkEvent(this, this.handleRegisterSubmit)}
> >
<h5>{this.titleName(siteView)}</h5> <h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
{this.isLemmyMl && ( {this.isLemmyMl && (
<div className="mb-3 row"> <div className="mb-3 row">

4
src/shared/components/home/site-form.tsx
View file

@ -136,11 +136,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
!this.state.submitted !this.state.submitted
} }
/> />
<h5>{`${ <h2 className="h5">{`${
siteSetup siteSetup
? capitalizeFirstLetter(I18NextService.i18n.t("edit")) ? capitalizeFirstLetter(I18NextService.i18n.t("edit"))
: capitalizeFirstLetter(I18NextService.i18n.t("setup")) : capitalizeFirstLetter(I18NextService.i18n.t("setup"))
} ${I18NextService.i18n.t("your_site")}`}</h5> } ${I18NextService.i18n.t("your_site")}`}</h2>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-12 col-form-label" htmlFor="create-site-name"> <label className="col-12 col-form-label" htmlFor="create-site-name">
{I18NextService.i18n.t("name")} {I18NextService.i18n.t("name")}

2
src/shared/components/home/tagline-form.tsx
View file

@ -37,7 +37,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5 className="col-12">{I18NextService.i18n.t("taglines")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
<div className="table-responsive col-12"> <div className="table-responsive col-12">
<table id="taglines_table" className="table table-sm table-hover"> <table id="taglines_table" className="table table-sm table-hover">
<thead className="pointer"> <thead className="pointer">

12
src/shared/components/modlog.tsx
View file

@ -751,7 +751,8 @@ export class Modlog extends Component<
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<div> <h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
<div <div
className="alert alert-warning text-sm-start text-xs-center" className="alert alert-warning text-sm-start text-xs-center"
role="alert" role="alert"
@ -792,15 +793,11 @@ export class Modlog extends Component<
<option value={"ModLockPost"}>Locking Posts</option> <option value={"ModLockPost"}>Locking Posts</option>
<option value={"ModFeaturePost"}>Featuring Posts</option> <option value={"ModFeaturePost"}>Featuring Posts</option>
<option value={"ModRemoveComment"}>Removing Comments</option> <option value={"ModRemoveComment"}>Removing Comments</option>
<option value={"ModRemoveCommunity"}> <option value={"ModRemoveCommunity"}>Removing Communities</option>
Removing Communities
</option>
<option value={"ModBanFromCommunity"}> <option value={"ModBanFromCommunity"}>
Banning From Communities Banning From Communities
</option> </option>
<option value={"ModAddCommunity"}> <option value={"ModAddCommunity"}>Adding Mod to Community</option>
Adding Mod to Community
</option>
<option value={"ModTransferCommunity"}> <option value={"ModTransferCommunity"}>
Transferring Communities Transferring Communities
</option> </option>
@ -832,7 +829,6 @@ export class Modlog extends Component<
</div> </div>
{this.renderModlogTable()} {this.renderModlogTable()}
</div> </div>
</div>
); );
} }

34
src/shared/components/person/inbox.tsx
View file

@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5 className="mb-2"> <h1 className="h4 mb-4">
{I18NextService.i18n.t("inbox")} {I18NextService.i18n.t("inbox")}
{inboxRss && ( {inboxRss && (
<small> <small>
@ -235,10 +235,10 @@ export class Inbox extends Component<any, InboxState> {
/> />
</small> </small>
)} )}
</h5> </h1>
{this.hasUnreads && ( {this.hasUnreads && (
<button <button
className="btn btn-secondary mb-2" className="btn btn-secondary mb-2 mb-sm-3"
onClick={linkEvent(this, this.handleMarkAllAsRead)} onClick={linkEvent(this, this.handleMarkAllAsRead)}
> >
{this.state.markAllAsReadRes.state == "loading" ? ( {this.state.markAllAsReadRes.state == "loading" ? (
@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
unreadOrAllRadios() { unreadOrAllRadios() {
return ( return (
<div className="btn-group btn-group-toggle flex-wrap mb-2"> <div className="btn-group btn-group-toggle flex-wrap">
<label <label
className={`btn btn-outline-secondary pointer className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"} ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
messageTypeRadios() { messageTypeRadios() {
return ( return (
<div className="btn-group btn-group-toggle flex-wrap mb-2"> <div className="btn-group btn-group-toggle flex-wrap">
<label <label
className={`btn btn-outline-secondary pointer className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && "active"} ${this.state.messageType == MessageType.All && "active"}
@ -382,14 +382,16 @@ export class Inbox extends Component<any, InboxState> {
selects() { selects() {
return ( return (
<div className="mb-2"> <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
<span className="me-3">{this.unreadOrAllRadios()}</span> <div className="col">{this.unreadOrAllRadios()}</div>
<span className="me-3">{this.messageTypeRadios()}</span> <div className="col">{this.messageTypeRadios()}</div>
<div className="col">
<CommentSortSelect <CommentSortSelect
sort={this.state.sort} sort={this.state.sort}
onChange={this.handleSortChange} onChange={this.handleSortChange}
/> />
</div> </div>
</div>
); );
} }
@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
this.state.messagesRes.state == "loading" this.state.messagesRes.state == "loading"
) { ) {
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
} else { } else {
return ( return (
@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.repliesRes.state) { switch (this.state.repliesRes.state) {
case "loading": case "loading":
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
case "success": { case "success": {
const replies = this.state.repliesRes.data.replies; const replies = this.state.repliesRes.data.replies;
@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.mentionsRes.state) { switch (this.state.mentionsRes.state) {
case "loading": case "loading":
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
case "success": { case "success": {
const mentions = this.state.mentionsRes.data.mentions; const mentions = this.state.mentionsRes.data.mentions;
@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.messagesRes.state) { switch (this.state.messagesRes.state) {
case "loading": case "loading":
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
case "success": { case "success": {
const messages = this.state.messagesRes.data.private_messages; const messages = this.state.messagesRes.data.private_messages;

4
src/shared/components/person/password-change.tsx
View file

@ -47,7 +47,9 @@ export class PasswordChange extends Component<any, State> {
/> />
<div className="row"> <div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4"> <div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{I18NextService.i18n.t("password_change")}</h5> <h1 className="h4 mb-4">
{I18NextService.i18n.t("password_change")}
</h1>
{this.passwordChangeForm()} {this.passwordChangeForm()}
</div> </div>
</div> </div>

4
src/shared/components/person/profile.tsx
View file

@ -137,7 +137,7 @@ const getCommunitiesListing = (
communityViews.length > 0 && ( communityViews.length > 0 && (
<div className="card border-secondary mb-3"> <div className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
<h5>{I18NextService.i18n.t(translationKey)}</h5> <h2 className="h5">{I18NextService.i18n.t(translationKey)}</h2>
<ul className="list-unstyled mb-0"> <ul className="list-unstyled mb-0">
{communityViews.map(({ community }) => ( {communityViews.map(({ community }) => (
<li key={community.id}> <li key={community.id}>
@ -472,7 +472,7 @@ export class Profile extends Component<
<div className="mb-0 d-flex flex-wrap"> <div className="mb-0 d-flex flex-wrap">
<div> <div>
{pv.person.display_name && ( {pv.person.display_name && (
<h5 className="mb-0">{pv.person.display_name}</h5> <h1 className="h4 mb-4">{pv.person.display_name}</h1>
)} )}
<ul className="list-inline mb-2"> <ul className="list-inline mb-2">
<li className="list-inline-item"> <li className="list-inline-item">

4
src/shared/components/person/registration-applications.tsx
View file

@ -100,9 +100,9 @@ export class RegistrationApplications extends Component<
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5 className="mb-2"> <h1 className="h4 mb-4">
{I18NextService.i18n.t("registration_applications")} {I18NextService.i18n.t("registration_applications")}
</h5> </h1>
{this.selects()} {this.selects()}
{this.applicationList(apps)} {this.applicationList(apps)}
<Paginator <Paginator

2
src/shared/components/person/reports.tsx
View file

@ -152,7 +152,7 @@ export class Reports extends Component<any, ReportsState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("reports")}</h1>
{this.selects()} {this.selects()}
{this.section} {this.section}
<Paginator <Paginator

8
src/shared/components/person/settings.tsx
View file

@ -316,7 +316,7 @@ export class Settings extends Component<any, SettingsState> {
changePasswordHtmlForm() { changePasswordHtmlForm() {
return ( return (
<> <>
<h5>{I18NextService.i18n.t("change_password")}</h5> <h2 className="h5">{I18NextService.i18n.t("change_password")}</h2>
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}> <form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-5 col-form-label" htmlFor="user-password"> <label className="col-sm-5 col-form-label" htmlFor="user-password">
@ -409,7 +409,7 @@ export class Settings extends Component<any, SettingsState> {
blockedUsersList() { blockedUsersList() {
return ( return (
<> <>
<h5>{I18NextService.i18n.t("blocked_users")}</h5> <h2 className="h5">{I18NextService.i18n.t("blocked_users")}</h2>
<ul className="list-unstyled mb-0"> <ul className="list-unstyled mb-0">
{this.state.personBlocks.map(pb => ( {this.state.personBlocks.map(pb => (
<li key={pb.target.id}> <li key={pb.target.id}>
@ -453,7 +453,7 @@ export class Settings extends Component<any, SettingsState> {
blockedCommunitiesList() { blockedCommunitiesList() {
return ( return (
<> <>
<h5>{I18NextService.i18n.t("blocked_communities")}</h5> <h2 className="h5">{I18NextService.i18n.t("blocked_communities")}</h2>
<ul className="list-unstyled mb-0"> <ul className="list-unstyled mb-0">
{this.state.communityBlocks.map(cb => ( {this.state.communityBlocks.map(cb => (
<li key={cb.community.id}> <li key={cb.community.id}>
@ -484,7 +484,7 @@ export class Settings extends Component<any, SettingsState> {
return ( return (
<> <>
<h5>{I18NextService.i18n.t("settings")}</h5> <h2 className="h5">{I18NextService.i18n.t("settings")}</h2>
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}> <form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-3 col-form-label" htmlFor="display-name"> <label className="col-sm-3 col-form-label" htmlFor="display-name">

2
src/shared/components/person/verify-email.tsx
View file

@ -60,7 +60,7 @@ export class VerifyEmail extends Component<any, State> {
/> />
<div className="row"> <div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4"> <div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{I18NextService.i18n.t("verify_email")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("verify_email")}</h1>
{this.state.verifyRes.state == "loading" && ( {this.state.verifyRes.state == "loading" && (
<h5> <h5>
<Spinner large /> <Spinner large />

4
src/shared/components/post/create-post.tsx
View file

@ -170,7 +170,9 @@ export class CreatePost extends Component<
id="createPostForm" id="createPostForm"
className="col-12 col-lg-6 offset-lg-3 mb-4" className="col-12 col-lg-6 offset-lg-3 mb-4"
> >
<h1 className="h4">{I18NextService.i18n.t("create_post")}</h1> <h1 className="h4 mb-4">
{I18NextService.i18n.t("create_post")}
</h1>
<PostForm <PostForm
onCreate={this.handlePostCreate} onCreate={this.handlePostCreate}
params={locationState} params={locationState}

4
src/shared/components/post/post-listing.tsx
View file

@ -466,7 +466,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return ( return (
<> <>
<div className="post-title overflow-hidden"> <div className="post-title overflow-hidden">
<h5 className="d-inline"> <h1 className="h5 d-inline">
{url && this.props.showBody ? ( {url && this.props.showBody ? (
<a <a
className={ className={
@ -482,7 +482,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
) : ( ) : (
this.postLink this.postLink
)} )}
</h5> </h1>
{/** {/**
* If there is (a) a URL and an embed title, or (b) a post body, and * If there is (a) a URL and an embed title, or (b) a post body, and

2
src/shared/components/private_message/create-private-message.tsx
View file

@ -115,7 +115,7 @@ export class CreatePrivateMessage extends Component<
return ( return (
<div className="row"> <div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4"> <div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h1 className="h4"> <h1 className="h4 mb-4">
{I18NextService.i18n.t("create_private_message")} {I18NextService.i18n.t("create_private_message")}
</h1> </h1>
<PrivateMessageForm <PrivateMessageForm

33
src/shared/components/search.tsx
View file

@ -181,8 +181,8 @@ const Filter = ({
loading: boolean; loading: boolean;
}) => { }) => {
return ( return (
<div className="mb-3 col-sm-6"> <div className="col-sm-6">
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}> <label className="mb-1" htmlFor={`${filterType}-filter`}>
{capitalizeFirstLetter(I18NextService.i18n.t(filterType))} {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
</label> </label>
<SearchableSelect <SearchableSelect
@ -467,7 +467,7 @@ export class Search extends Component<any, SearchState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5>{I18NextService.i18n.t("search")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
{this.selects} {this.selects}
{this.searchForm} {this.searchForm}
{this.displayResults(type)} {this.displayResults(type)}
@ -500,8 +500,11 @@ export class Search extends Component<any, SearchState> {
get searchForm() { get searchForm() {
return ( return (
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}> <form
<div className="col-auto"> className="row gx-2 gy-3"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<div className="col-auto flex-grow-1 flex-sm-grow-0">
<input <input
type="text" type="text"
className="form-control me-2 mb-2 col-sm-8" className="form-control me-2 mb-2 col-sm-8"
@ -542,11 +545,13 @@ export class Search extends Component<any, SearchState> {
communitiesRes.data.communities.length > 0; communitiesRes.data.communities.length > 0;
return ( return (
<div className="mb-2"> <>
<div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
<div className="col">
<select <select
value={type} value={type}
onChange={linkEvent(this, this.handleTypeChange)} onChange={linkEvent(this, this.handleTypeChange)}
className="form-select d-inline-block w-auto mb-2" className="form-select d-inline-block w-auto"
aria-label={I18NextService.i18n.t("type")} aria-label={I18NextService.i18n.t("type")}
> >
<option disabled aria-hidden="true"> <option disabled aria-hidden="true">
@ -560,23 +565,25 @@ export class Search extends Component<any, SearchState> {
</option> </option>
))} ))}
</select> </select>
<span className="ms-2"> </div>
<div className="col">
<ListingTypeSelect <ListingTypeSelect
type_={listingType} type_={listingType}
showLocal={showLocal(this.isoData)} showLocal={showLocal(this.isoData)}
showSubscribed showSubscribed
onChange={this.handleListingTypeChange} onChange={this.handleListingTypeChange}
/> />
</span> </div>
<span className="ms-2"> <div className="col">
<SortSelect <SortSelect
sort={sort} sort={sort}
onChange={this.handleSortChange} onChange={this.handleSortChange}
hideHot hideHot
hideMostComments hideMostComments
/> />
</span> </div>
<div className="row"> </div>
<div className="row gy-2 gx-4 mb-3">
{hasCommunities && ( {hasCommunities && (
<Filter <Filter
filterType="community" filterType="community"
@ -596,7 +603,7 @@ export class Search extends Component<any, SearchState> {
loading={searchCreatorLoading} loading={searchCreatorLoading}
/> />
</div> </div>
</div> </>
); );
} }