grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Adding a lot of front end prettying.

Browse source 
- Re-did litely theme.
- Increased spacing.
- Fixed up navbar to not full width.
- Made login/sign up stand out.
- Made thumbnails have a light background.
- Removed btn-sm, made almost all buttons bigger.
- Made all badges lighter.
- Made card backgrounds transparent.
- Fixes #888
This commit is contained in:
Dessalines 2020-07-23 02:10:22 -04:00
parent 01cc8654e2
commit 76fec39670
24 changed files with 274 additions and 258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/assets/css/main.css vendored
View file

@ -2,6 +2,11 @@
border: 0px;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: .75rem !important;
padding-left: .75rem !important;
}
.pointer {
cursor: pointer;
}
@ -134,12 +139,14 @@ blockquote {
.thumbnail {
object-fit: cover;
min-height: 60px;
max-height: 80px;
width: 100%;
}
svg.thumbnail {
height: 40px;
.thumbnail svg {
height: 1.25rem;
width: 1.25rem;
}
.no-s-hows {

21
ui/assets/css/themes/_variables.litely.scss vendored
View file

@ -1,17 +1,17 @@
$white: #ffffff;
$orange: #faa077;
$orange: #f1641e;
$cyan: #02bdc2;
$green: #d4e9d7;
$green: #00C853;
$secondary: $green;
$body-color: $gray-700;
$link-color: theme-color("danger");;
$link-color: theme-color("primary");;
$primary: $orange;
$red: #d8486a;
$border-radius: 1.5rem;
$border-radius-lg: 1.5rem;
$border-radius: 0.5rem;
$border-radius-lg: 0.5rem;
$border-radius-sm: 1rem;
$font-family-sans-serif: Guardian-EgypTT,serif,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Droid Sans","Segoe UI","Helvetica",Arial,sans-serif;
$headings-color: $gray-700;
$input-btn-focus-color: rgba($component-active-bg, .75);
$form-feedback-valid-color: theme-color("info");
@ -21,10 +21,13 @@ $navbar-dark-toggler-border-color: rgba($black, .1);
$navbar-light-active-color: $gray-900;
$card-color: $gray-700;
$card-cap-color: $gray-700;
$info: darken($green, 25%);;
$body-bg: #f2f0f0;
$success: darken($green, 25%);;
$info: $blue;
$body-bg: #fff;
$success: $indigo;
$danger: darken($primary, 25%);
$navbar-light-hover-color: $gray-900;
$card-bg: $gray-100;
$border-color: $gray-700;
$mark-bg: rgb(255, 252, 239);
$font-weight-bold: 600;
$rounded-pill: 0.25rem;

2
ui/assets/css/themes/litely.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
ui/src/components/comment-node.tsx vendored
View file

@ -204,7 +204,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</>
)}
<button
class="btn btn-sm text-muted"
class="btn text-muted"
onClick={linkEvent(this, this.handleCommentCollapse)}
>
{this.state.collapsed ? (
@ -220,7 +220,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{/* This is an expanding spacer for mobile */}
<div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
<button
className={`btn btn-sm p-0 unselectable pointer ${this.scoreColor}`}
className={`btn p-0 unselectable pointer ${this.scoreColor}`}
onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={this.pointsTippy}
>

4
ui/src/components/communities.tsx vendored
View file

@ -157,7 +157,7 @@ export class Communities extends Component<any, CommunitiesState> {
<div class="mt-2">
{this.state.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
@ -166,7 +166,7 @@ export class Communities extends Component<any, CommunitiesState> {
{this.state.communities.length > 0 && (
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

4
ui/src/components/community.tsx vendored
View file

@ -271,7 +271,7 @@ export class Community extends Component<any, State> {
<div class="my-2">
{this.state.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
@ -279,7 +279,7 @@ export class Community extends Component<any, State> {
)}
{this.state.posts.length > 0 && (
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

4
ui/src/components/data-type-select.tsx vendored
View file

@ -35,7 +35,7 @@ export class DataTypeSelect extends Component<
return (
<div class="btn-group btn-group-toggle">
<label
className={`pointer btn btn-sm btn-secondary
className={`pointer btn btn-outline-secondary
${this.state.type_ == DataType.Post && 'active'}
`}
>
@ -48,7 +48,7 @@ export class DataTypeSelect extends Component<
{i18n.t('posts')}
</label>
<label
className={`pointer btn btn-sm btn-secondary ${
className={`pointer btn btn-outline-secondary ${
this.state.type_ == DataType.Comment && 'active'
}`}
>

2
ui/src/components/iframely-card.tsx vendored
View file

@ -29,7 +29,7 @@ export class IFramelyCard extends Component<
return (
<>
{post.embed_title && !this.state.expanded && (
<div class="card mt-3 mb-2">
<div class="card bg-transparent border-secondary mt-3 mb-2">
<div class="row">
<div class="col-12">
<div class="card-body">

16
ui/src/components/inbox.tsx vendored
View file

@ -147,7 +147,7 @@ export class Inbox extends Component<any, InboxState> {
return (
<div class="btn-group btn-group-toggle">
<label
className={`btn btn-sm btn-secondary pointer
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'}
`}
>
@ -160,7 +160,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('unread')}
</label>
<label
className={`btn btn-sm btn-secondary pointer
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.All && 'active'}
`}
>
@ -180,7 +180,7 @@ export class Inbox extends Component<any, InboxState> {
return (
<div class="btn-group btn-group-toggle">
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && 'active'}
`}
>
@ -193,7 +193,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('all')}
</label>
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.Replies && 'active'}
`}
>
@ -206,7 +206,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('replies')}
</label>
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.Mentions && 'active'}
`}
>
@ -219,7 +219,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('mentions')}
</label>
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.Messages && 'active'}
`}
>
@ -326,7 +326,7 @@ export class Inbox extends Component<any, InboxState> {
<div class="mt-2">
{this.state.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
@ -334,7 +334,7 @@ export class Inbox extends Component<any, InboxState> {
)}
{this.unreadCount() > 0 && (
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

4
ui/src/components/listing-type-select.tsx vendored
View file

@ -36,7 +36,7 @@ export class ListingTypeSelect extends Component<
return (
<div class="btn-group btn-group-toggle">
<label
className={`btn btn-sm btn-secondary
className={`btn btn-outline-secondary
${this.state.type_ == ListingType.Subscribed && 'active'}
${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
`}
@ -51,7 +51,7 @@ export class ListingTypeSelect extends Component<
{i18n.t('subscribed')}
</label>
<label
className={`pointer btn btn-sm btn-secondary ${
className={`pointer btn btn-outline-secondary ${
this.state.type_ == ListingType.All && 'active'
}`}
>

26
ui/src/components/main.tsx vendored
View file

@ -195,7 +195,7 @@ export class Main extends Component<any, MainState> {
<div>
{!this.state.loading && (
<div>
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
{this.trendingCommunities()}
{UserService.Instance.user &&
@ -226,7 +226,7 @@ export class Main extends Component<any, MainState> {
</div>
)}
<Link
class="btn btn-sm btn-secondary btn-block"
class="btn btn-secondary btn-block"
to="/create_community"
>
{i18n.t('create_a_community')}
@ -295,7 +295,7 @@ export class Main extends Component<any, MainState> {
siteInfo() {
return (
<div>
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>
{this.canAdmin && (
@ -315,32 +315,32 @@ export class Main extends Component<any, MainState> {
)}
<ul class="my-2 list-inline">
{/*
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_online', { count: this.state.siteRes.online })}
</li>
*/}
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_users', {
count: this.state.siteRes.site.number_of_users,
})}
</li>
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_communities', {
count: this.state.siteRes.site.number_of_communities,
})}
</li>
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_posts', {
count: this.state.siteRes.site.number_of_posts,
})}
</li>
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_comments', {
count: this.state.siteRes.site.number_of_comments,
})}
</li>
<li className="list-inline-item">
<Link className="badge badge-secondary" to="/modlog">
<Link className="badge badge-light" to="/modlog">
{i18n.t('modlog')}
</Link>
</li>
@ -364,7 +364,7 @@ export class Main extends Component<any, MainState> {
</div>
</div>
{this.state.siteRes.site.description && (
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<div
className="md-div"
@ -381,7 +381,7 @@ export class Main extends Component<any, MainState> {
landing() {
return (
<div class="card border-secondary">
<div class="card bg-transparent border-secondary">
<div class="card-body">
<h5>
{i18n.t('powered_by')}
@ -517,7 +517,7 @@ export class Main extends Component<any, MainState> {
<div class="my-2">
{this.state.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
@ -525,7 +525,7 @@ export class Main extends Component<any, MainState> {
)}
{this.state.posts.length > 0 && (
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

2
ui/src/components/markdown-textarea.tsx vendored
View file

@ -125,7 +125,7 @@ export class MarkdownTextArea extends Component<
/>
{this.state.previewMode && (
<div
className="card card-body md-div"
className="card bg-transparent border-secondary card-body md-div"
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/>
)}

4
ui/src/components/modlog.tsx vendored
View file

@ -384,14 +384,14 @@ export class Modlog extends Component<any, ModlogState> {
<div class="mt-2">
{this.state.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
</button>
)}
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

308
ui/src/components/navbar.tsx vendored
View file

@ -150,179 +150,181 @@ export class Navbar extends Component<any, NavbarState> {
// TODO class active corresponding to current page
navbar() {
return (
<nav class="container-fluid navbar navbar-expand-md navbar-light shadow p-0 px-3">
<Link title={this.state.version} class="navbar-brand" to="/">
{this.state.siteName}
</Link>
{this.state.isLoggedIn && (
<Link
class="ml-auto p-0 navbar-toggler nav-link"
to="/inbox"
title={i18n.t('inbox')}
>
<svg class="icon">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
<Link title={this.state.version} class="navbar-brand" to="/">
{this.state.siteName}
</Link>
)}
<button
class="navbar-toggler"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
data-tippy-content={i18n.t('expand_here')}
>
<span class="navbar-toggler-icon"></span>
</button>
<div
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
>
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
<Link
class="nav-link"
to="/communities"
title={i18n.t('communities')}
>
{i18n.t('communities')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
to={{
pathname: '/create_post',
state: { prevPath: this.currentLocation },
}}
title={i18n.t('create_post')}
>
{i18n.t('create_post')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
to="/create_community"
title={i18n.t('create_community')}
>
{i18n.t('create_community')}
</Link>
</li>
<li className="nav-item">
<Link
class="nav-link"
to="/sponsors"
title={i18n.t('donate_to_lemmy')}
>
<svg class="icon">
<use xlinkHref="#icon-coffee"></use>
</svg>
</Link>
</li>
</ul>
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<form
class="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
{this.state.isLoggedIn && (
<Link
class="ml-auto p-0 navbar-toggler nav-link border-0"
to="/inbox"
title={i18n.t('inbox')}
>
<input
class={`form-control mr-0 search-input ${
this.state.toggleSearch ? 'show-input' : 'hide-input'
}`}
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
ref={this.searchTextField}
type="text"
placeholder={i18n.t('search')}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
class="btn btn-link"
style="color: var(--gray)"
>
<svg class="icon">
<use xlinkHref="#icon-search"></use>
</svg>
</button>
</form>
<svg class="icon">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
</Link>
)}
<ul class="navbar-nav my-2">
{this.canAdmin && (
<button
class="navbar-toggler border-0"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
data-tippy-content={i18n.t('expand_here')}
>
<span class="navbar-toggler-icon"></span>
</button>
<div
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
>
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
<Link
class="nav-link"
to="/communities"
title={i18n.t('communities')}
>
{i18n.t('communities')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
to={{
pathname: '/create_post',
state: { prevPath: this.currentLocation },
}}
title={i18n.t('create_post')}
>
{i18n.t('create_post')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
to="/create_community"
title={i18n.t('create_community')}
>
{i18n.t('create_community')}
</Link>
</li>
<li className="nav-item">
<Link
class="nav-link"
to={`/admin`}
title={i18n.t('admin_settings')}
to="/sponsors"
title={i18n.t('donate_to_lemmy')}
>
<svg class="icon">
<use xlinkHref="#icon-settings"></use>
<use xlinkHref="#icon-coffee"></use>
</svg>
</Link>
</li>
</ul>
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<form
class="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
class={`form-control mr-0 search-input ${
this.state.toggleSearch ? 'show-input' : 'hide-input'
}`}
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
ref={this.searchTextField}
type="text"
placeholder={i18n.t('search')}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
class="btn btn-link"
style="color: var(--gray)"
>
<svg class="icon">
<use xlinkHref="#icon-search"></use>
</svg>
</button>
</form>
)}
</ul>
{this.state.isLoggedIn ? (
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link class="nav-link" to="/inbox" title={i18n.t('inbox')}>
<svg class="icon">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
</Link>
</li>
</ul>
<ul class="navbar-nav">
<ul class="navbar-nav my-2">
{this.canAdmin && (
<li className="nav-item">
<Link
class="nav-link"
to={`/u/${UserService.Instance.user.username}`}
title={i18n.t('settings')}
to={`/admin`}
title={i18n.t('admin_settings')}
>
<span>
{UserService.Instance.user.avatar && showAvatars() && (
<img
src={pictrsAvatarThumbnail(
UserService.Instance.user.avatar
)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
<svg class="icon">
<use xlinkHref="#icon-settings"></use>
</svg>
</Link>
</li>
)}
</ul>
{this.state.isLoggedIn ? (
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link class="nav-link" to="/inbox" title={i18n.t('inbox')}>
<svg class="icon">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
{UserService.Instance.user.username}
</span>
</Link>
</li>
</ul>
<ul class="navbar-nav">
<li className="nav-item">
<Link
class="nav-link"
to={`/u/${UserService.Instance.user.username}`}
title={i18n.t('settings')}
>
<span>
{UserService.Instance.user.avatar && showAvatars() && (
<img
src={pictrsAvatarThumbnail(
UserService.Instance.user.avatar
)}
height="32"
width="32"
class="rounded-circle mr-2"
/>
)}
{UserService.Instance.user.username}
</span>
</Link>
</li>
</ul>
</>
) : (
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link
class="btn btn-success"
to="/login"
title={i18n.t('login_sign_up')}
>
{i18n.t('login_sign_up')}
</Link>
</li>
</ul>
</>
) : (
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link
class="nav-link"
to="/login"
title={i18n.t('login_sign_up')}
>
{i18n.t('login_sign_up')}
</Link>
</li>
</ul>
)}
)}
</div>
</div>
</nav>
);

34
ui/src/components/post-listing.tsx vendored
View file

@ -240,9 +240,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
title={post.url}
rel="noopener"
>
<svg class="icon thumbnail">
<use xlinkHref="#icon-external-link"></use>
</svg>
<div class="thumbnail rounded bg-light d-flex justify-content-center">
<svg class="icon d-flex align-items-center">
<use xlinkHref="#icon-external-link"></use>
</svg>
</div>
</a>
);
}
@ -253,9 +255,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
to={`/post/${post.id}`}
title={i18n.t('comments')}
>
<svg class="icon thumbnail">
<use xlinkHref="#icon-message-square"></use>
</svg>
<div class="thumbnail rounded bg-light d-flex justify-content-center">
<svg class="icon d-flex align-items-center">
<use xlinkHref="#icon-message-square"></use>
</svg>
</div>
</Link>
);
}
@ -298,7 +302,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
</div>
{!this.state.imageExpanded && (
<div class="col-3 col-sm-2 pr-0 mt-1">
<div class="col-3 col-sm-2 pr-0">
<div class="position-relative">{this.thumbnail()}</div>
</div>
)}
@ -562,7 +566,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleSavePostClick)}
data-tippy-content={
post.saved ? i18n.t('unsave') : i18n.t('save')
@ -579,7 +583,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li>
<li className="list-inline-item">
<Link
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
to={`/create_post${this.crossPostParams}`}
title={i18n.t('cross_post')}
>
@ -594,7 +598,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t('edit')}
>
@ -605,7 +609,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li>
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!post.deleted
@ -628,7 +632,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{!this.state.showAdvanced && this.props.showBody ? (
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t('more')}
>
@ -642,7 +646,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.props.showBody && post.body && (
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')}
>
@ -660,7 +664,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleModLock)}
data-tippy-content={
post.locked
@ -679,7 +683,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li>
<li className="list-inline-item">
<button
class="btn btn-sm btn-link btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleModSticky)}
data-tippy-content={
post.stickied

2
ui/src/components/post-listings.tsx vendored
View file

@ -32,7 +32,7 @@ export class PostListings extends Component<PostListingsProps, any> {
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
<hr class="my-2" />
<hr class="my-3" />
</>
))
) : (

10
ui/src/components/post.tsx vendored
View file

@ -225,7 +225,7 @@ export class Post extends Component<any, PostState> {
<>
<div class="btn-group btn-group-toggle mr-3 mb-2">
<label
className={`btn btn-sm btn-secondary pointer ${
className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Hot && 'active'
}`}
>
@ -238,7 +238,7 @@ export class Post extends Component<any, PostState> {
/>
</label>
<label
className={`btn btn-sm btn-secondary pointer ${
className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Top && 'active'
}`}
>
@ -251,7 +251,7 @@ export class Post extends Component<any, PostState> {
/>
</label>
<label
className={`btn btn-sm btn-secondary pointer ${
className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.New && 'active'
}`}
>
@ -264,7 +264,7 @@ export class Post extends Component<any, PostState> {
/>
</label>
<label
className={`btn btn-sm btn-secondary pointer ${
className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Old && 'active'
}`}
>
@ -279,7 +279,7 @@ export class Post extends Component<any, PostState> {
</div>
<div class="btn-group btn-group-toggle mb-2">
<label
className={`btn btn-sm btn-secondary pointer ${
className={`btn btn-outline-secondary pointer ${
this.state.commentViewType === CommentViewType.Chat && 'active'
}`}
>

10
ui/src/components/private-message.tsx vendored
View file

@ -131,7 +131,7 @@ export class PrivateMessage extends Component<
<>
<li className="list-inline-item">
<button
class="btn btn-link btn-sm btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={
message.read
@ -150,7 +150,7 @@ export class PrivateMessage extends Component<
</li>
<li className="list-inline-item">
<button
class="btn btn-link btn-sm btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={i18n.t('reply')}
>
@ -165,7 +165,7 @@ export class PrivateMessage extends Component<
<>
<li className="list-inline-item">
<button
class="btn btn-link btn-sm btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t('edit')}
>
@ -176,7 +176,7 @@ export class PrivateMessage extends Component<
</li>
<li className="list-inline-item">
<button
class="btn btn-link btn-sm btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!message.deleted
@ -197,7 +197,7 @@ export class PrivateMessage extends Component<
)}
<li className="list-inline-item">
<button
class="btn btn-link btn-sm btn-animate text-muted"
class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')}
>

6
ui/src/components/search.tsx vendored
View file

@ -207,7 +207,7 @@ export class Search extends Component<any, SearchState> {
<select
value={this.state.type_}
onChange={linkEvent(this, this.handleTypeChange)}
class="custom-select custom-select-sm w-auto"
class="custom-select w-auto"
>
<option disabled>{i18n.t('type')}</option>
<option value={SearchType.All}>{i18n.t('all')}</option>
@ -402,7 +402,7 @@ export class Search extends Component<any, SearchState> {
<div class="mt-2">
{this.state.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
@ -411,7 +411,7 @@ export class Search extends Component<any, SearchState> {
{this.resultsCount() > 0 && (
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

22
ui/src/components/sidebar.tsx vendored
View file

@ -75,7 +75,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
}
return (
<div>
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<h5 className="mb-0">
<span>{community.title}</span>
@ -177,33 +177,33 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
)}
<ul class="my-1 list-inline">
{/*
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_online', { count: this.props.online })}
</li>
*/}
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_subscribers', {
count: community.number_of_subscribers,
})}
</li>
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_posts', {
count: community.number_of_posts,
})}
</li>
<li className="list-inline-item badge badge-secondary">
<li className="list-inline-item badge badge-light">
{i18n.t('number_of_comments', {
count: community.number_of_comments,
})}
</li>
<li className="list-inline-item">
<Link className="badge badge-secondary" to="/communities">
<Link className="badge badge-light" to="/communities">
{community.category_name}
</Link>
</li>
<li className="list-inline-item">
<Link
className="badge badge-secondary"
className="badge badge-light"
to={`/modlog/community/${this.props.community.id}`}
>
{i18n.t('modlog')}
@ -228,7 +228,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</ul>
{/* TODO the to= needs to be able to handle community_ids as well, since they're federated */}
<Link
class={`btn btn-sm btn-secondary btn-block mb-3 ${
class={`btn btn-secondary btn-block mb-3 ${
(community.deleted || community.removed) && 'no-click'
}`}
to={`/create_post?community=${community.name}`}
@ -238,14 +238,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<div>
{community.subscribed ? (
<button
class="btn btn-sm btn-secondary btn-block"
class="btn btn-secondary btn-block"
onClick={linkEvent(community.id, this.handleUnsubscribe)}
>
{i18n.t('unsubscribe')}
</button>
) : (
<button
class="btn btn-sm btn-secondary btn-block"
class="btn btn-secondary btn-block"
onClick={linkEvent(community.id, this.handleSubscribe)}
>
{i18n.t('subscribe')}
@ -255,7 +255,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</div>
</div>
{community.description && (
<div class="card border-secondary">
<div class="card bg-transparent border-secondary">
<div class="card-body">
<div
className="md-div"

2
ui/src/components/sort-select.tsx vendored
View file

@ -35,7 +35,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
<select
value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)}
class="custom-select custom-select-sm w-auto mr-2"
class="custom-select w-auto mr-2"
>
<option disabled>{i18n.t('sort_type')}</option>
{!this.props.hideHot && (

4
ui/src/components/user-details.tsx vendored
View file

@ -205,7 +205,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
<div class="my-2">
{this.props.page > 1 && (
<button
class="btn btn-sm btn-secondary mr-1"
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
{i18n.t('prev')}
@ -213,7 +213,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
)}
{this.state.comments.length + this.state.posts.length > 0 && (
<button
class="btn btn-sm btn-secondary"
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
{i18n.t('next')}

5
ui/src/components/user-listing.tsx vendored
View file

@ -43,11 +43,10 @@ export class UserListing extends Component<UserListingProps, any> {
return (
<>
<Link className="text-body font-weight-bold" to={link}>
<Link className="text-info" to={link}>
{user.avatar && showAvatars() && (
<img
height="32"
width="32"
style="width: 2rem; height: 2rem;"
src={pictrsAvatarThumbnail(user.avatar)}
class="rounded-circle mr-2"
/>

23
ui/src/components/user.tsx vendored
View file

@ -132,6 +132,7 @@ export class User extends Component<any, UserState> {
open_registration: undefined,
enable_nsfw: undefined,
},
version: undefined,
},
};
@ -266,7 +267,7 @@ export class User extends Component<any, UserState> {
return (
<div class="btn-group btn-group-toggle">
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Overview && 'active'}
`}
>
@ -279,7 +280,7 @@ export class User extends Component<any, UserState> {
{i18n.t('overview')}
</label>
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Comments && 'active'}
`}
>
@ -292,7 +293,7 @@ export class User extends Component<any, UserState> {
{i18n.t('comments')}
</label>
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Posts && 'active'}
`}
>
@ -305,7 +306,7 @@ export class User extends Component<any, UserState> {
{i18n.t('posts')}
</label>
<label
className={`btn btn-sm btn-secondary pointer btn-outline-light
className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Saved && 'active'}
`}
>
@ -350,7 +351,7 @@ export class User extends Component<any, UserState> {
let user = this.state.user;
return (
<div>
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<h5>
<ul class="list-inline mb-0">
@ -447,7 +448,7 @@ export class User extends Component<any, UserState> {
userSettings() {
return (
<div>
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t('settings')}</h5>
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
@ -459,7 +460,7 @@ export class User extends Component<any, UserState> {
class="pointer ml-4 text-muted small font-weight-bold"
>
{!this.checkSettingsAvatar ? (
<span class="btn btn-sm btn-secondary">
<span class="btn btn-secondary">
{i18n.t('upload_avatar')}
</span>
) : (
@ -499,7 +500,7 @@ export class User extends Component<any, UserState> {
<select
value={this.state.userSettingsForm.lang}
onChange={linkEvent(this, this.handleUserSettingsLangChange)}
class="ml-2 custom-select custom-select-sm w-auto"
class="ml-2 custom-select w-auto"
>
<option disabled>{i18n.t('language')}</option>
<option value="browser">{i18n.t('browser_default')}</option>
@ -514,7 +515,7 @@ export class User extends Component<any, UserState> {
<select
value={this.state.userSettingsForm.theme}
onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
class="ml-2 custom-select custom-select-sm w-auto"
class="ml-2 custom-select w-auto"
>
<option disabled>{i18n.t('theme')}</option>
{themes.map(theme => (
@ -775,7 +776,7 @@ export class User extends Component<any, UserState> {
return (
<div>
{this.state.moderates.length > 0 && (
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t('moderates')}</h5>
<ul class="list-unstyled mb-0">
@ -798,7 +799,7 @@ export class User extends Component<any, UserState> {
return (
<div>
{this.state.follows.length > 0 && (
<div class="card border-secondary mb-3">
<div class="card bg-transparent border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t('subscribed')}</h5>
<ul class="list-unstyled mb-0">