diff --git a/public/assets/fakepost-subscribe-dark.png b/public/assets/fakepost-subscribe-dark.png new file mode 100644 index 00000000..8b248708 Binary files /dev/null and b/public/assets/fakepost-subscribe-dark.png differ diff --git a/public/assets/fakepost-subscribe.png b/public/assets/fakepost-subscribe.png new file mode 100644 index 00000000..1bfae699 Binary files /dev/null and b/public/assets/fakepost-subscribe.png differ diff --git a/src/components/over-18-warning/over-18-warning.module.css b/src/components/over-18-warning/over-18-warning.module.css index 385e5997..d73a60b9 100644 --- a/src/components/over-18-warning/over-18-warning.module.css +++ b/src/components/over-18-warning/over-18-warning.module.css @@ -98,8 +98,8 @@ border-radius: 3px; flex: 1; margin: 3px 5px; - background-color: #4f86b5; - border-bottom: 2px solid #4270a2; + background-color: var(--button-background-color); + border-bottom: 2px solid var(--button-border-bottom); user-select: none; } @@ -115,7 +115,7 @@ } .over18 .warningButtons button:hover { - background-color: #4980ae; + background-color: var(--button-background-color-hover); } .over18 .warningButtons button a { diff --git a/src/themes.css b/src/themes.css index 9bac29a8..b42bca2f 100644 --- a/src/themes.css +++ b/src/themes.css @@ -13,6 +13,9 @@ --border-primary: #1f1f1f; --border-text: #3e3e3e; --box-border-color: gray; + --button-background-color: #38678f; + --button-background-color-hover: #356187; + --button-border-bottom: #325a85; --button-border-disabled: #6f6f6f34; --button-border-primary: #1f1f1f; --button-border-primary-hover: #3e3e3e; @@ -28,6 +31,7 @@ --continue-thread-arrow: url('/public/assets/buttons/continue-this-thread-arrow-dark.png'); --code-background: rgb(19, 19, 13); --code-border: rgb(52, 58, 60); + --fakepost-subscribe: url('/public/assets/fakepost-subscribe-dark.png'); --filter80: brightness(80%); --filter90: brightness(90%); --gray: #3e3e3e; @@ -96,6 +100,9 @@ --border-primary: #5f99cf; --border-text: gray; --box-border-color: #8D9CAA; + --button-background-color: #4f86b5; + --button-background-color-hover: #4980ae; + --button-border-bottom: #4270a2; --button-border-disabled: #dadada; --button-border-primary: #c4dbf1; --button-border-primary-hover: #879eb4; @@ -111,6 +118,7 @@ --continue-thread-arrow: url('/public/assets/buttons/continue-this-thread-arrow.png'); --code-background: #fcfcfb; --code-border: #e6e6de; + --fakepost-subscribe: url('/public/assets/fakepost-subscribe.png'); --filter80: brightness(100%); --filter90: brightness(100%); --gray: #c0c0c0; diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index 47220173..cc6b250a 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -78,4 +78,71 @@ font-weight: 700; color: var(--text-info); cursor: pointer; +} + +.noSubscriptions { + text-align: center; + font-size: 12px; + margin-right: 310px; + color: var(--text); +} + +.noSubscriptions h1 { + font-weight: bold; + font-size: 25px; + margin: 10px 0; +} + +.squash { + margin: 1em auto; + max-width: 580px; + padding: 0 75px 0 60px; + box-sizing: border-box; +} + +.squash img { + display: inline; + margin: 0; + vertical-align: bottom; + border: 0; + width: 12px; + height: 12px; + margin-left: 7px; +} + +.fakePost { + margin: 1em auto; + vertical-align: bottom; + background-image: var(--fakepost-subscribe); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + width: 500px; + height: 200px; + -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%); + mask-image: linear-gradient(to bottom, black 50%, transparent 100%); +} + +.findCommunities a { + background-color: var(--button-background-color); + color: #ffffff; + display: inline-block; + text-transform: uppercase; + font-weight: bold; + cursor: pointer; + border: 1px solid transparent; + padding: 4px 12px 3px; + line-height: 20px; + border-radius: 3px; + -webkit-user-select: none; + -moz-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; + border-bottom: 2px solid var(--button-border-bottom); +} + +.findCommunities a:hover { + background-color: var(--button-background-color-hover); + text-decoration: underline; } \ No newline at end of file diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 9d9d1239..44975639 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, memo } from 'react'; +import { useEffect, useRef } from 'react'; import { Link, useParams } from 'react-router-dom'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { useAccount, useFeed } from '@plebbit/plebbit-react-hooks'; @@ -24,69 +24,68 @@ const LoadingStateFooter = ({ subplebbitAddresses }: { subplebbitAddresses: stri ); }; -const Footer = memo( - ({ - feed, - hasMore, - subplebbitAddresses, - subplebbitAddressesWithNewerPosts, - handleNewerPostsButtonClick, - params, - weeklyFeed, - monthlyFeed, - currentTimeFilterName, - }: any) => { - const { t } = useTranslation(); - let footerContent; - if (feed.length === 0) { - footerContent = t('no_posts'); - } - if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) { - footerContent = ( - <> - {subplebbitAddressesWithNewerPosts.length > 0 ? ( +const Footer = ({ + feed, + hasMore, + subplebbitAddresses, + subplebbitAddressesWithNewerPosts, + handleNewerPostsButtonClick, + params, + weeklyFeed, + monthlyFeed, + currentTimeFilterName, +}: any) => { + const { t } = useTranslation(); + let footerContent; + if (feed.length === 0) { + footerContent = t('no_posts'); + } + if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) { + footerContent = ( + <> + {subplebbitAddressesWithNewerPosts.length > 0 ? ( +
+ , + }} + /> +
+ ) : ( + monthlyFeed.length > feed.length && + (weeklyFeed.length > feed.length ? (
, + 1: , }} />
) : ( - monthlyFeed.length > feed.length && - (weeklyFeed.length > feed.length ? ( -
- , - }} - /> -
- ) : ( -
- , - }} - /> -
- )) - )} - - ); - } - return
{footerContent}
; - }, -); +
+ , + }} + /> +
+ )) + )} + + ); + } + return
{footerContent}
; +}; const Home = () => { useRedirectToDefaultSort(); const { t } = useTranslation(); + const account = useAccount(); const subplebbitAddresses = useAccount()?.subscriptions || []; const params = useParams<{ sortType?: string; timeFilterName?: string }>(); const sortType = params?.sortType || 'hot'; @@ -148,27 +147,42 @@ const Home = () => {
-
- } - useWindowScroll={true} - components={{ - Footer: () => ( - <> -
+ {subplebbitAddresses.length > 0 ? ( +
+ } + useWindowScroll={true} + components={{ + Footer: () => ( + <> +
+ ) : ( +
+
+

{account?.author.displayName || account?.author.shortAddress}, this is your home on Seedit

+
+ When you find a community that you like, join with the + +
+
+
+ find communities on p/all +
+
+ )}
); diff --git a/src/views/submit-page/submit-page.module.css b/src/views/submit-page/submit-page.module.css index 1f716833..1701cd9f 100644 --- a/src/views/submit-page/submit-page.module.css +++ b/src/views/submit-page/submit-page.module.css @@ -16,7 +16,7 @@ font-size: 14px; } -h1 { +.content h1 { font-size: 18px; font-weight: normal; text-transform: lowercase;