Increase award sizes on mobile (#145)

byronwall · Nov 22, 2023 · 9619a4e · 9619a4e
1 parent 424a7c1
commit 9619a4e
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 15 deletions.
diff --git a/src/app/awards/AwardsForProfile.tsx b/src/app/awards/AwardsForProfile.tsx
@@ -83,7 +83,7 @@ export function AwardsForProfile() {
               <CardTitle>Recent Awards</CardTitle>
               <CardDescription></CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="p-1 sm:p-2 md:p-4">
               <AwardList awards={recentFiftyAwards} />
             </CardContent>
           </Card>

diff --git a/src/app/awards/page.tsx b/src/app/awards/page.tsx
@@ -69,7 +69,7 @@ export default function AwardsPage() {
               Click an image to add to your awards.
             </CardDescription>
           </CardHeader>
-          <CardContent className="flex flex-col gap-4">
+          <CardContent className="flex flex-col gap-4 p-1 sm:p-2 md:p-4">
             <div className="sticky top-0 z-10 flex flex-wrap justify-center gap-2 bg-gray-100 p-2">
               {awards
                 ?.filter((award) => !award.imageId)
@@ -80,7 +80,7 @@ export default function AwardsPage() {
                 ))}
             </div>
 
-            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
               {(awardImagesShuffled ?? []).map((image) => (
                 <AwardImageChoice
                   key={image.id}

diff --git a/src/components/awards/AwardCard.tsx b/src/components/awards/AwardCard.tsx
@@ -58,8 +58,8 @@ export function AwardCard({ award }: { award: Award }) {
           key={award.id}
           src={award.image?.imageUrl ?? "/placeholder.jpeg"}
           alt={"Award image"}
-          width={256}
-          height={256}
+          width={512}
+          height={512}
           className={cn("rounded-md", {
             "border-4 border-yellow-400": !award.imageId,
           })}

diff --git a/src/components/awards/AwardImageChoice.tsx b/src/components/awards/AwardImageChoice.tsx
@@ -59,8 +59,8 @@ export function AwardImageChoice({
         key={image.id}
         src={image.imageUrl}
         alt={"Award image"}
-        width={256}
-        height={256}
+        width={512}
+        height={512}
         onClick={() =>
           !isLoading && shouldClickToClaim && handleAddImageIdToAward(image.id)
         }

diff --git a/src/components/awards/AwardList.tsx b/src/components/awards/AwardList.tsx
@@ -6,7 +6,7 @@ import { AwardCard } from "./AwardCard";
 
 export function AwardList({ awards = [] }: { awards?: Award[] }) {
   return (
-    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3 ">
       {awards.map((award) => (
         <AwardCard key={award.id} award={award} />
       ))}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,15 +2,15 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1rem",
       screens: {
         "2xl": "1400px",
       },
@@ -33,4 +33,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};