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
cloudflare · Jan 9, 2023 · 0461553 · 0461553
1 parent 97b6a3f
commit 0461553
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 86 deletions.
diff --git a/frontend/src/components/MastodonLogo.tsx b/frontend/src/components/MastodonLogo.tsx
diff --git 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 (
-		<header class="bg-slate-900 sticky top-[4.5rem] xl:top-0 xl:pt-[10px] z-10">
+		<header class="bg-slate-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
 			<Slot />
 		</header>
 	)

diff --git 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
@@ -44,10 +44,7 @@ export default component$(() => {
 			<div>
 				<div class="xl:p-4">
 					<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
-						<WildebeestLogo size="small" />
-						{/* 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) */}
-						<span class="text-white font-bold xl:text-xl xl:ml-[-27px] xl:mt-[-27px]">ildebeest</span>
+						<WildebeestLogo size="medium" />
 					</a>
 				</div>
 				<hr class="hidden xl:block border-t border-slate-700 my-3" />

diff --git 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
@@ -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 (
 		<div class="flex flex-col p-5 items-center">
 			<h1 class="text-center mt-7 mb-9 flex items-center">
-				<WildebeestLogo size="medium" />
-				{/* 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) */}
-				<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
+				<WildebeestLogo size="large" />
 			</h1>
 			<form method="post" class="flex flex-col w-full max-w-md">
 				<div class="flex flex-col mb-6">

diff --git a/frontend/src/routes/layout.tsx b/frontend/src/routes/layout.tsx
@@ -32,16 +32,13 @@ export default component$(() => {
 	return (
 		<>
 			{showHeaderAndColumns && (
-				<header class="h-[4.5rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
+				<header class="h-[3.9rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
 					<a class="no-underline flex items-center w-max" href="https://mastodon.social">
 						<WildebeestLogo size="small" />
-						{/* 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) */}
-						<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
 					</a>
 				</header>
 			)}
-			<main class="h-full flex justify-center main-wrapper sticky top-[4.5rem]">
+			<main class="h-full flex justify-center main-wrapper sticky top-[3.9rem]">
 				{showHeaderAndColumns && (
 					<div class="w-fit md:w-72 hidden xl:block mx-[10px]">
 						<div class="sticky top-[10px]">
@@ -56,7 +53,7 @@ export default component$(() => {
 				</div>
 				{showHeaderAndColumns && (
 					<div class="w-fit md:w-72 border-l xl:border-l-0 border-slate-700 xl:mx-[10px]">
-						<div class="sticky top-[4.5rem] xl:top-[10px]">
+						<div class="sticky top-[3.9rem] xl:top-[10px]">
 							<RightColumn />
 						</div>
 					</div>

diff --git a/frontend/src/routes/start-instance/index.tsx b/frontend/src/routes/start-instance/index.tsx
@@ -42,10 +42,7 @@ export default component$(() => {
 	return (
 		<div class="flex flex-col p-5 items-center max-w-lg mx-auto">
 			<h1 class="text-center mt-7 mb-9 flex items-center">
-				<WildebeestLogo size="medium" />
-				{/* 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) */}
-				<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
+				<WildebeestLogo size="large" />
 			</h1>
 			{stepToShow.startsWith('step-') && (
 				<div class="text-center">