Merge pull request #501 from 1ifeworld/salief/qa-sizing-positioning

salief/qa sizing positioning
1ifeworld · Feb 22, 2024 · 86f1673 · 86f1673
2 parents 00842f0 + 3bc7ed9
commit 86f1673
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 45 deletions.
diff --git a/apps/site/app/(base)/layout.tsx b/apps/site/app/(base)/layout.tsx
@@ -10,10 +10,10 @@ export default function BaseLayout({
 }) {
   return (
     <section>
-      <div className="hidden md:block fixed top-[38px] z-50 w-full">
+      <div className="hidden md:block fixed top-[var(--header-height)] z-50 w-full">
         <MarqueeWrapper />
       </div>
-      <Flex className="px-5 pt-[70px] md:pt-[110px]">
+      <Flex className="px-[15px] md:px-5 pt-[57px] md:pt-[104px]">
         <div className="hidden md:w-[19%] md:block">
           <RecentChannels params={params} />
         </div>

diff --git a/apps/site/app/(base)/page.tsx b/apps/site/app/(base)/page.tsx
@@ -10,7 +10,7 @@ export default async function Home() {
   }
 
   return (
-    <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-5 py-[30px]">
+    <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-5 pb-[30px]">
       {adds.items.map((add, index) =>
         add.removed ? null : (
           // @ts-ignore

diff --git a/apps/site/app/channel/[id]/[index]/error.tsx b/apps/site/app/channel/[id]/[index]/error.tsx
@@ -18,7 +18,7 @@ export default function ItemError({
   const router = useRouter()
 
   return (
-    <Stack className="gap-y-3 justify-center items-center h-[calc(100dvh-38px)]">
+    <Stack className="gap-y-3 justify-center items-center h-[calc(100dvh-var(--header-height))]">
       <Typography>Something went wrong</Typography>
       <Button
         onClick={() => router.back()}

diff --git a/apps/site/app/channel/[id]/[index]/layout.tsx b/apps/site/app/channel/[id]/[index]/layout.tsx
@@ -3,5 +3,5 @@ export default function ItemLayout({
 }: {
   children: React.ReactNode
 }) {
-  return <section className="pt-[38px]">{children}</section>
+  return <section className="pt-[var(--header-height)]">{children}</section>
 }
diff --git a/apps/site/app/channel/[id]/[index]/page.tsx b/apps/site/app/channel/[id]/[index]/page.tsx
@@ -119,7 +119,7 @@ export default async function ItemPage({
     ))
 
   return (
-    <Stack className="h-[calc(100dvh-38px)] md:flex-row">
+    <Stack className="h-[calc(100dvh-var(--header-height))] md:flex-row">
       <div className="bg-[#F3F4F6] w-full h-full md:w-[78%]">{content}</div>
       <div className="md:w-[22%]">
         <ItemSidebar

diff --git a/apps/site/app/channel/[id]/page.tsx b/apps/site/app/channel/[id]/page.tsx
@@ -30,16 +30,16 @@ export default async function Channel({
 
   return (
     <section>
-      <div className="hidden md:block fixed top-[38px] z-50 w-full">
+      <div className="hidden md:block fixed top-[var(--header-height)] z-50 w-full">
         <MarqueeWrapper />
       </div>
-      <Flex className="px-5 pt-[70px] md:pt-[110px]">
+      <Flex className="px-[15px] md:px-5 pt-[57px] md:pt-[104px]">
         <div className="hidden md:w-[19%] md:block">
           <RecentChannels params={params} />
         </div>
         <div className="w-full md:w-[78%]">
           <Stack>
-            <Stack className="gap-y-[45px]">
+            <Stack className="gap-y-5">
               <Flex className="justify-between">
                 {/* @ts-ignore */}
                 <ChannelBanner channel={channel} />

diff --git a/apps/site/components/client/Header.tsx b/apps/site/components/client/Header.tsx
@@ -2,12 +2,11 @@ import { ChannelDialog, UserDropdown, UsernameDialog } from '@/client'
 import { Button, Flex, Typography } from '@/design-system'
 import { RiverLogo } from '@/server'
 import { usePrivy } from '@privy-io/react-auth'
-import { useUserContext } from 'context/UserContext'
-import { getUserId } from 'gql/requests'
-import { getUsername } from 'lib/username'
+import { useUserContext } from '@/context'
+import { getUserId } from '@/gql'
+import { getUsername } from '@/lib'
 import { useParams } from 'next/navigation'
-import { useState } from 'react'
-import { useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { Hex } from 'viem'
 
 export function Header() {
@@ -63,7 +62,7 @@ export function Header() {
     <div className="bg-popover fixed z-50 w-screen">
       {/* Header */}
       <Flex
-        className={`py-3 px-5 items-center justify-between border-b border-border ${
+        className={`py-[11px] px-[15px] md:px-5 items-center justify-between border-b border-border ${
           params.index || params.username ? '' : 'md:border-none'
         }`}
       >

diff --git a/apps/site/components/client/Marquee.tsx b/apps/site/components/client/Marquee.tsx
@@ -22,7 +22,7 @@ export function Marquee({
 }: MarqueeProps) {
   return (
     <ReactMarquee
-      className="py-3 border-t border-b border-border bg-popover"
+      className="py-[11px] border-t border-b border-border bg-popover"
       speed={30}
       pauseOnHover
     >

diff --git a/apps/site/components/server/ItemSidebar.tsx b/apps/site/components/server/ItemSidebar.tsx
@@ -45,7 +45,7 @@ export function ItemSidebar({
             </div>
             <Typography>{'--'}</Typography>
           </Stack>
-          <Stack className="gap-y-[3px] md:pt-[45px]">
+          <Stack className="gap-y-[7px] md:pt-[45px]">
             <Flex className="justify-between">
               <Typography>Added to</Typography>
               <Link

diff --git a/apps/site/components/server/MarqueeWrapper.tsx b/apps/site/components/server/MarqueeWrapper.tsx
@@ -2,7 +2,6 @@ import { Marquee } from '@/client'
 import { getMarqueeData } from '@/gql'
 
 export async function MarqueeWrapper() {
-  // Everything
   const { users, channels, items } = await getMarqueeData()
   return (
     <Marquee

diff --git a/apps/site/components/server/channel/ChannelBanner.tsx b/apps/site/components/server/channel/ChannelBanner.tsx
@@ -36,7 +36,7 @@ export async function ChannelBanner({
   return (
     // Include left margin to accommodate for margin necessary for hover states for items
     <Stack className="gap-5 md:ml-2">
-      <Stack>
+      <Stack className="gap-y-[3px]">
         <Flex className="items-center gap-x-[4px]">
           <Typography>{channel.name}</Typography>
           <ChannelSettings channel={channel} />
@@ -69,7 +69,9 @@ export async function ChannelBanner({
       <Typography className="md:hidden">
         {truncateText(channel.description, 90, true) || '--'}
       </Typography>
-      <ItemDropzone channel={channel} />
+      <div className="pt-[10px]">
+        <ItemDropzone channel={channel} />
+      </div>
     </Stack>
   )
 }
diff --git a/apps/site/components/server/channel/ChannelDetails.tsx b/apps/site/components/server/channel/ChannelDetails.tsx
@@ -6,7 +6,7 @@ export async function ChannelDetails({ channel }: { channel: Channel }) {
   const length = channel.adds?.items ? channel.adds?.items.length : 0
 
   return (
-    <Stack className="py-8 ml-2">
+    <Stack className="py-8 md:ml-2 gap-y-[3px]">
       {/* Number of items */}
       <Typography className="text-secondary-foreground">
         {pluralize(length, 'item', 'items')}

diff --git a/apps/site/components/server/channel/ChannelItems.tsx b/apps/site/components/server/channel/ChannelItems.tsx
@@ -83,7 +83,7 @@ export async function ChannelItems({
     )
   }
   return (
-    <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-5 py-[30px]">
+    <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-5 pb-[30px] md:ml-2">
       {channel?.adds?.items?.map((add: Adds) =>
         add.removed ? null : (
           <ItemCard

diff --git a/apps/site/components/server/channel/RecentChannels.tsx b/apps/site/components/server/channel/RecentChannels.tsx
@@ -17,7 +17,7 @@ export async function RecentChannels({
   return (
     <Stack className="hidden md:flex gap-y-[34px]">
       <Typography className="font-medium">Recent channels</Typography>
-      <Stack className="gap-y-[5px]">
+      <Stack className="gap-y-[3px]">
         {channels.items.slice(0, 50).map((channel) => {
           return (
             <Link href={`/channel/${channel.id}`} key={channel.timestamp}>

diff --git a/apps/site/components/server/channel/ThumbnailNameCreator.tsx b/apps/site/components/server/channel/ThumbnailNameCreator.tsx
@@ -18,13 +18,15 @@ export function ThumbnailNameCreator({
   if (!item) {
     return (
       <>
-        <Image
-          className="object-cover aspect-square "
-          src={''}
-          alt={''}
-          width={40}
-          height={40}
-        />
+        <div className="relative w-12 h-12 md:w-10 md:h-10">
+          <Image
+            className="object-cover aspect-square"
+            src={''}
+            alt={''}
+            fill
+            sizes="48px"
+          />
+        </div>
         <Stack>
           <Typography className="text-primary-foreground">{''}</Typography>
         </Stack>
@@ -37,13 +39,15 @@ export function ThumbnailNameCreator({
   if (!itemMetadata) {
     return (
       <>
-        <Image
-          className="object-cover aspect-square "
-          src={''}
-          alt={''}
-          width={40}
-          height={40}
-        />
+        <div className="relative w-12 h-12 md:w-10 md:h-10">
+          <Image
+            className="object-cover aspect-square"
+            src={''}
+            alt={''}
+            fill
+            sizes="48px"
+          />
+        </div>
         <Stack>
           <Typography className="text-primary-foreground">{''}</Typography>
         </Stack>
@@ -56,20 +60,22 @@ export function ThumbnailNameCreator({
   return (
     <>
       {cid ? (
-        <Image
-          className="object-cover aspect-square hover:cursor-pointer"
-          src={w3sUrlFromCid({ cid })}
-          alt={itemMetadata.name}
-          width={40}
-          height={40}
-        />
+        <div className="relative w-12 h-12 md:w-10 md:h-10">
+          <Image
+            className="object-cover aspect-square hover:cursor-pointer"
+            src={w3sUrlFromCid({ cid })}
+            alt={itemMetadata.name}
+            fill
+            sizes="48px"
+          />
+        </div>
       ) : (
         <GenericThumbnailSmall
           className="hover:cursor-pointer"
           text={itemMetadata?.contentType as string}
         />
       )}
-      <Stack>
+      <Stack className="gap-y-[3px]">
         {/* This component is hidden on large screens */}
         <Typography className="hover:cursor-pointer md:hidden hover:underline text-primary-foreground leading-none whitespace-nowrap">
           {truncateText(itemMetadata.name, 35, false)}

diff --git a/apps/site/styles/globals.css b/apps/site/styles/globals.css
@@ -36,6 +36,9 @@
     --radius: 0.5rem;
 
     --divider: 0 0% 94%;
+
+    /* Style Constants */
+    --header-height: 36px
   }
 
   .dark {