diff --git a/public/assets/moderator.png b/public/assets/moderator.png new file mode 100644 index 00000000..59f22a5a Binary files /dev/null and b/public/assets/moderator.png differ diff --git a/public/assets/private.png b/public/assets/private.png new file mode 100644 index 00000000..73311cee Binary files /dev/null and b/public/assets/private.png differ diff --git a/src/components/post/label/label.tsx b/src/components/post/label/label.tsx index 1c907a87..7a296d4f 100644 --- a/src/components/post/label/label.tsx +++ b/src/components/post/label/label.tsx @@ -5,13 +5,14 @@ interface LabelProps { color: string; text: string; isFirstInLine?: boolean; + title?: string; } -const Label = ({ color, text, isFirstInLine = false }: LabelProps) => { +const Label = ({ color, text, isFirstInLine = false, title = '' }: LabelProps) => { const { t } = useTranslation(); return ( - + {t(text)} ); diff --git a/src/views/subplebbits/subplebbits.module.css b/src/views/subplebbits/subplebbits.module.css index 8539019f..0648913f 100644 --- a/src/views/subplebbits/subplebbits.module.css +++ b/src/views/subplebbits/subplebbits.module.css @@ -130,22 +130,29 @@ color: var(--link); } -.subscribeButton { - margin-left: 5px; -} - .tagline { text-transform: lowercase; margin-top: 2px; } +.moderatorIcon { + background-image: url('/public/assets/moderator.png'); + background-size: 100%; + background-repeat: no-repeat; + height: 16px; + width: 16px; + display: inline-block; + margin-left: 5px; + vertical-align: bottom; +} + .expandButton { background-size: cover; height: 23px; width: 23px; float: left; margin-right: 5px; - margin-top: 2px; + margin-top: 5px; } .textButton { @@ -179,24 +186,13 @@ font-size: 14px; } -.subplebbitPreferences { - padding: 0 1px; +.taglineSecondLine { + padding-left: 1px; line-height: 1.6em; - margin-top: 1px; + margin-top: 2px; margin-left: 28px; } -.subplebbitPreferences a { - color: var(--gray-contrast); - font-weight: bold; - margin-left: 1px; -} - -.subplebbitPreferences a:hover { - text-decoration: underline; - cursor: pointer; -} - .subplebbitsTabs { border-bottom: 1px dotted gray; padding: 5px 10px; diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx index fd129894..0fa8367f 100644 --- a/src/views/subplebbits/subplebbits.tsx +++ b/src/views/subplebbits/subplebbits.tsx @@ -131,7 +131,7 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => { const postScore = upvoteCount === 0 && downvoteCount === 0 ? '•' : upvoteCount - downvoteCount || '•'; const { allActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address }); - const { isOffline, isOnlineStatusLoading } = useIsSubplebbitOffline(subplebbit); + const { isOffline, isOnlineStatusLoading, offlineTitle } = useIsSubplebbitOffline(subplebbit); return (
@@ -158,25 +158,18 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => { p/{address?.includes('.') ? address : shortAddress} {title && `: ${title}`} - - -
{description && } - - {t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedTimeDuration(createdAt) })} -
- {isOffline && !isOnlineStatusLoading &&
-
+ {t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedTimeDuration(createdAt) })} +
+ + + + {(userRole || isUserOwner) && } + {isOffline && !isOnlineStatusLoading &&
{description && showDescription && (