rem instead of px (#1468)

BasedHardware · Dec 4, 2024 · c7a1649 · c7a1649
2 parents fac230e + 46b75df
commit c7a1649
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 25 deletions.
diff --git a/frontend/src/app/apps/[id]/page.tsx b/frontend/src/app/apps/[id]/page.tsx
@@ -204,22 +204,22 @@ export default async function PluginDetailView({ params }: { params: { id: strin
         dangerouslySetInnerHTML={generateStructuredData(plugin, categoryName)}
       />
       {/* Fixed Header and Navigation */}
-      <div className="fixed inset-x-0 top-16 z-50 bg-[#0B0F17]">
+      <div className="fixed inset-x-0 top-[4rem] z-50 bg-[#0B0F17]">
         <div className="border-b border-white/5 shadow-lg">
-          <div className="container mx-auto px-6 py-8">
+          <div className="container mx-auto px-[1.5rem] py-[2rem]">
             <CategoryBreadcrumb category={plugin.category} />
           </div>
         </div>
       </div>
 
       {/* Main Content */}
-      <main className="relative z-0 mt-[160px] flex-grow">
-        <div className="container mx-auto px-6 pt-8">
+      <main className="relative z-0 mt-[10rem] flex-grow">
+        <div className="container mx-auto px-[1.5rem] pt-[2rem]">
           {/* Hero Section */}
-          <section className="grid grid-cols-1 gap-12 lg:grid-cols-5">
+          <section className="grid grid-cols-1 gap-[3rem] lg:grid-cols-5">
             {/* Image Column - 3 columns */}
             <div className="lg:col-span-2">
-              <div className="relative aspect-square overflow-hidden rounded-2xl bg-[#1A1F2E]">
+              <div className="relative aspect-square overflow-hidden rounded-[1rem] bg-[#1A1F2E]">
                 <img
                   src={plugin.image}
                   alt={plugin.name}
@@ -233,15 +233,15 @@ export default async function PluginDetailView({ params }: { params: { id: strin
                 {/* App Info Container */}
                 <div>
                   <h1 className="text-4xl font-bold text-white">{plugin.name}</h1>
-                  <p className="mt-2 text-xl text-gray-400">by {plugin.author}</p>
+                  <p className="mt-[0.5rem] text-xl text-gray-400">by {plugin.author}</p>
 
                   {/* Stats Section */}
-                  <div className="mt-8 flex items-center gap-4">
+                  <div className="mt-[2rem] flex items-center gap-[1rem]">
                     <div className="flex items-center">
                       <span className="text-3xl font-bold text-yellow-400">
                         {plugin.rating_avg?.toFixed(1)}
                       </span>
-                      <div className="ml-2 flex flex-col">
+                      <div className="ml-[0.5rem] flex flex-col">
                         <span className="text-yellow-400">★</span>
                         <span className="text-sm text-gray-400">
                           ({plugin.rating_count} reviews)

diff --git a/frontend/src/app/apps/category/[category]/page.tsx b/frontend/src/app/apps/category/[category]/page.tsx
@@ -137,11 +137,11 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
   return (
     <div className="relative flex min-h-screen flex-col bg-[#0B0F17]">
       {/* Fixed Header and Navigation */}
-      <div className="fixed inset-x-0 top-16 z-40 bg-[#0B0F17]">
-        <div className="px-6 py-8">
+      <div className="fixed inset-x-0 top-[4rem] z-40 bg-[#0B0F17]">
+        <div className="px-[1.5rem] py-[2rem]">
           <div className="container mx-auto">
             <CategoryBreadcrumb category={params.category} />
-            <div className="mt-8">
+            <div className="mt-[2rem]">
               <CategoryHeader
                 category={params.category}
                 totalApps={categoryPlugins.length}
@@ -151,10 +151,10 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
         </div>
 
         <div className="border-b border-white/5 shadow-lg shadow-black/5">
-          <div className="px-6">
+          <div className="px-[1.5rem]">
             <div className="container mx-auto">
               <ProductBanner variant="category" category={params.category} />
-              <div className="py-5">
+              <div className="py-[1.25rem]">
                 <ScrollableCategoryNav currentCategory={params.category} />
               </div>
             </div>
@@ -163,10 +163,10 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
       </div>
 
       {/* Main Content */}
-      <main className="relative z-0 mt-[555px] flex-grow sm:mt-[475px]">
-        <div className="px-4 py-6 sm:px-6 sm:py-8">
+      <main className="relative z-0 mt-[34.75rem] flex-grow sm:mt-[29.75rem]">
+        <div className="px-[1rem] py-[1.5rem] sm:px-[1.5rem] sm:py-[2rem]">
           <div className="container mx-auto">
-            <div className="space-y-6 sm:space-y-12">
+            <div className="space-y-[1.5rem] sm:space-y-[3rem]">
               {/* New/Recent This Week Section */}
               <section>
                 <h3 className="text-lg font-semibold text-white sm:mb-8 sm:text-xl">

diff --git a/frontend/src/app/apps/page.tsx b/frontend/src/app/apps/page.tsx
@@ -57,8 +57,12 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function AppsPage() {
   return (
     <main className="min-h-screen bg-[#0B0F17]">
-      <AppList />
-      <ProductBanner variant="floating" />
+      <div className="relative">
+        <AppList />
+        <div className="fixed bottom-[1.5rem] left-0 right-0 z-50">
+          <ProductBanner variant="floating" />
+        </div>
+      </div>
     </main>
   );
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -5,26 +5,26 @@ import { redirect } from 'next/navigation';
 export default function Home() {
   redirect('/apps');
   return (
-    <div className="flex min-h-screen flex-col items-center justify-between p-12 text-xl text-white md:p-24 md:text-lg">
-      <div className="mt-10">
+    <div className="flex min-h-screen flex-col items-center justify-between p-[3rem] text-xl text-white md:p-[6rem] md:text-lg">
+      <div className="mt-[2.5rem]">
         <Image
           src={'/omi-white.webp'}
           alt="Based Hardware Logo"
           width={100}
           height={64}
-          className="mx-auto h-auto w-[80px]"
+          className="mx-auto h-auto w-[5rem]"
         />
-        <h2 className="mt-5 text-center text-lg md:text-xl">
+        <h2 className="mt-[1.25rem] text-center text-lg md:text-xl">
           We are working in this feature
         </h2>
-        <p className="mt-10 max-w-xl text-center">
+        <p className="mt-[2.5rem] max-w-xl text-center">
           For now, you can order Omi wearable. Remember everything you want to remember
           with Omi.
         </p>
         <Link
           href={`https://basedhardware.com/`}
           target="_blank"
-          className="mx-auto mt-10 flex w-fit items-center gap-2 rounded-md bg-white/90 p-1.5 px-3.5 text-black transition-colors hover:bg-white"
+          className="mx-auto mt-[2.5rem] flex w-fit items-center gap-[0.5rem] rounded-md bg-white/90 p-[0.375rem] px-[0.875rem] text-black transition-colors hover:bg-white"
         >
           Order now
         </Link>