diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index 3a4eed937..966b45d6c 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -61,6 +61,7 @@ .lowerSectionMobile { display: flex; + flex-direction: column; flex-grow: 1; flex-shrink: 0; padding: 0.3em; @@ -125,3 +126,11 @@ } } } + +.bottomPageContentContainer { + background-color: var(--theme-color-components-content-background); + padding: calc(2 * var(--content-padding)); + padding-top: 0px; + border-radius: var(--theme-rounded-corners); + width: 100%; +} diff --git a/web/components/ui/Content/DesktopContent.tsx b/web/components/ui/Content/DesktopContent.tsx index 68b7964c4..32ae22b2a 100644 --- a/web/components/ui/Content/DesktopContent.tsx +++ b/web/components/ui/Content/DesktopContent.tsx @@ -43,9 +43,14 @@ export const DesktopContent: FC = ({ setShowFollowModal, supportFediverseFeatures, }) => { - const aboutTabContent = ; + const aboutTabContent = ( +
+ +
+ ); + const followersTabContent = ( -
+
setShowFollowModal(true)} />
); diff --git a/web/components/ui/Content/MobileContent.tsx b/web/components/ui/Content/MobileContent.tsx index 740a891d6..1213a215e 100644 --- a/web/components/ui/Content/MobileContent.tsx +++ b/web/components/ui/Content/MobileContent.tsx @@ -95,18 +95,25 @@ export const MobileContent: FC = ({ links={socialHandles} logo="/logo" /> - +
+ +
); const followersTabContent = ( - setShowFollowModal(true)} /> +
+ setShowFollowModal(true)} /> +
); - const items = [ - showChat && { label: 'Chat', key: '0', children: chatContent }, - { label: 'About', key: '2', children: aboutTabContent }, - { label: 'Followers', key: '3', children: followersTabContent }, - ]; + const items = []; + if (showChat) { + items.push({ label: 'Chat', key: '0', children: chatContent }); + } + items.push({ label: 'About', key: '2', children: aboutTabContent }); + if (supportFediverseFeatures) { + items.push({ label: 'Followers', key: '3', children: followersTabContent }); + } const replacementTabBar = (props, DefaultTabBar) => (
@@ -125,12 +132,16 @@ export const MobileContent: FC = ({ return (
- + {items.length > 1 ? ( + + ) : ( + aboutTabContent + )}
); }; diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss index 7be43664d..c4e5f46bd 100644 --- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss +++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss @@ -8,10 +8,6 @@ font-size: 1rem; line-height: 1.6em; color: var(--theme-color-components-text-on-light); - padding: calc(2 * var(--content-padding)); - border-radius: var(--theme-rounded-corners); - width: 100%; - background-color: var(--theme-color-components-content-background); hr { margin: 1.35em 0; diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss index f4aaa1dee..0f10bbfdc 100644 --- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss +++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss @@ -4,10 +4,6 @@ width: 100%; padding: 5px; - @include screen(desktop) { - background-color: var(--theme-color-components-content-background); - } - @include screen(mobile) { .followerRow { justify-content: center; @@ -16,10 +12,9 @@ } .noFollowers { - padding: calc(2 * var(--content-padding)); + padding: var(--content-padding); border-radius: var(--theme-rounded-corners); width: 100%; - background-color: var(--theme-color-components-content-background); } .pagination {