From 04615539f54ed502bb82cd62b3a48316776720b1 Mon Sep 17 00:00:00 2001 From: Dario Piotrowicz Date: Mon, 9 Jan 2023 19:10:43 +0000 Subject: [PATCH] adjust wildebeest logo - use the wildebeest logo which includes the text as well - make the wildebeest logo resizable via props - delete the no longer needed mastodon logo resolves #46 --- frontend/src/components/MastodonLogo.tsx | 113 ++++++++---------- .../components/StickyHeader/StickyHeader.tsx | 2 +- .../layout/RightColumn/RightColumn.scss | 2 +- .../layout/RightColumn/RightColumn.tsx | 5 +- frontend/src/routes/explore/layout.scss | 2 +- frontend/src/routes/first-login/index.tsx | 7 +- frontend/src/routes/layout.tsx | 9 +- frontend/src/routes/start-instance/index.tsx | 5 +- 8 files changed, 59 insertions(+), 86 deletions(-) diff --git a/frontend/src/components/MastodonLogo.tsx b/frontend/src/components/MastodonLogo.tsx index 3e753f609..f00356ef9 100644 --- a/frontend/src/components/MastodonLogo.tsx +++ b/frontend/src/components/MastodonLogo.tsx @@ -1,96 +1,81 @@ import { component$ } from '@builder.io/qwik' export const heightsMap = { - small: '2rem', - medium: '2.65rem', + small: '2.4rem', + medium: '3.5rem', + large: '6rem', } as const type Props = { size: keyof typeof heightsMap } -// TODO: the mastodonLogo is likely no longer needed -// we're keeping it around just in case but before -// launch this should be removed -export const MastodonLogo = component$(({ size }) => { - return ( - - ) -}) - export const WildebeestLogo = component$(({ size }) => { const linearGradientId = `wildebeest_linear_gradient_${Math.round(Math.random() * 9999)}` return ( - + + + + + + + + + + diff --git a/frontend/src/components/StickyHeader/StickyHeader.tsx b/frontend/src/components/StickyHeader/StickyHeader.tsx index b4eb63ae3..97b1e3aca 100644 --- a/frontend/src/components/StickyHeader/StickyHeader.tsx +++ b/frontend/src/components/StickyHeader/StickyHeader.tsx @@ -2,7 +2,7 @@ import { component$, Slot } from '@builder.io/qwik' export default component$(() => { return ( -
+
) diff --git a/frontend/src/components/layout/RightColumn/RightColumn.scss b/frontend/src/components/layout/RightColumn/RightColumn.scss index 37e95067c..bd5bdaf07 100644 --- a/frontend/src/components/layout/RightColumn/RightColumn.scss +++ b/frontend/src/components/layout/RightColumn/RightColumn.scss @@ -6,6 +6,6 @@ @media (max-width: tailwind.$xl-breakpoint) { .right-column-wrapper { - height: calc(100vh - 4.5rem); + height: calc(100vh - 3.9rem); } } diff --git a/frontend/src/components/layout/RightColumn/RightColumn.tsx b/frontend/src/components/layout/RightColumn/RightColumn.tsx index 10491e622..e65da277d 100644 --- a/frontend/src/components/layout/RightColumn/RightColumn.tsx +++ b/frontend/src/components/layout/RightColumn/RightColumn.tsx @@ -44,10 +44,7 @@ export default component$(() => {
diff --git a/frontend/src/routes/explore/layout.scss b/frontend/src/routes/explore/layout.scss index 4cdfdb97d..689fe6b6f 100644 --- a/frontend/src/routes/explore/layout.scss +++ b/frontend/src/routes/explore/layout.scss @@ -6,7 +6,7 @@ @media (max-width: tailwind.$xl-breakpoint) { .explore-wrapper { - min-height: calc(100vh - 4.5rem); + min-height: calc(100vh - 3.9rem); } } diff --git a/frontend/src/routes/first-login/index.tsx b/frontend/src/routes/first-login/index.tsx index 447155afb..17a162cd6 100644 --- a/frontend/src/routes/first-login/index.tsx +++ b/frontend/src/routes/first-login/index.tsx @@ -1,5 +1,5 @@ import { component$ } from '@builder.io/qwik' -import { MastodonLogo, WildebeestLogo } from '~/components/MastodonLogo' +import { WildebeestLogo } from '~/components/MastodonLogo' import { useDomain } from '~/utils/useDomain' export default component$(() => { @@ -8,10 +8,7 @@ export default component$(() => { return (

- - {/* TODO: We need to move the text inside the logo component for better reusability - (because we are adding the text every time we use the logo anyways) */} - ildebeest +

diff --git a/frontend/src/routes/layout.tsx b/frontend/src/routes/layout.tsx index 197c1479e..d3a26d9d8 100644 --- a/frontend/src/routes/layout.tsx +++ b/frontend/src/routes/layout.tsx @@ -32,16 +32,13 @@ export default component$(() => { return ( <> {showHeaderAndColumns && ( -
+
- {/* TODO: We need to move the text inside the logo component for better reusability - (because we are adding the text every time we use the logo anyways) */} - ildebeest
)} -
+
{showHeaderAndColumns && (