fix: ui fixes

ajesuscode · Oct 12, 2023 · fca5d64 · fca5d64
1 parent dfc9907
commit fca5d64
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 16 deletions.
diff --git a/src/app/(surfspots)/layout.tsx b/src/app/(surfspots)/layout.tsx
@@ -25,8 +25,8 @@ export default async function FavoriteSpotsLayout({
 
     return (
         <main className="flex flex-col p-4 pt-20 xl:p-24">
-            <div className="flex flex-row justify-between gap-4 mb-4 items-center">
-                <div className="flex flex-row gap-4 justify-start">
+            <div className="flex flex-row justify-between gap-4 mb-4 items-center sticky top-14 bg-primary h-full z-20 pt-4 w-full">
+                <div className="flex flex-row gap-4 justify-start ">
                     {user && (
                         <Link href="/favorite">
                             <div

diff --git a/src/app/(surfspots)/spots/SpotsList.tsx b/src/app/(surfspots)/spots/SpotsList.tsx
@@ -19,7 +19,7 @@ export default async function SpotsList() {
 
     return (
         <>
-            <div className="grid grid-cols-1 gap-4 lg:grid-cols-4  md:grid-cols-2 ">
+            <div className="grid grid-cols-1 gap-8 lg:grid-cols-4  md:grid-cols-2 ">
                 {allSpotsData &&
                     allSpotsData.map((spot) => {
                         if (spot) {

diff --git a/src/app/(surfspots)/spots/[spot_id]/page.tsx b/src/app/(surfspots)/spots/[spot_id]/page.tsx
@@ -70,13 +70,13 @@ export default async function SpotPage({
         <>
             {spot && (
                 <main>
-                    <div className="flex flex-row justify-start gap-4 items-center mb-4">
+                    <div className="flex flex-row justify-start gap-4 items-center mb-4 px-4">
                         <Link href="/spots">
                             <ArrowBackIcon size={18} color="text-dark" />
                         </Link>
                     </div>
                     <div className="flex flex-col justify-center px-4 gap-2 bg-dark/25 p-2 rounded-sm">
-                        <div className="flex flex-row justify-between items-center ">
+                        <div className="flex flex-row justify-between items-center py-4">
                             <div className="font-body text-light text-2xl">
                                 {spot.name}
                             </div>
@@ -86,7 +86,7 @@ export default async function SpotPage({
                                 user={user}
                             />
                         </div>
-                        <div className="flex flex-row gap-6 justify-start  items-center ml-2 lg:m-0 overflow-y-auto mt-4">
+                        <div className="flex flex-row gap-6 justify-start  items-center ml-2 lg:m-0 overflow-y-auto my-4">
                             {currentPintxoCondition.map((pintxo, index) => (
                                 <PintxoRange
                                     key={index}

diff --git a/src/app/components/SpotConditionsWeek.tsx b/src/app/components/SpotConditionsWeek.tsx
@@ -35,10 +35,7 @@ export default function SpotConditionsWeek({
             <table className="table-auto border-separate border-spacing-2 items-center">
                 <tbody className="">
                     <tr>
-                        <th
-                            className=" bg-light/5 w-48"
-                            style={{ position: "sticky" }}
-                        ></th>
+                        <th className="bg-primeshade w-48 sticky left-0"></th>
                         {localDateTimes?.map((item, index) => (
                             <td
                                 key={index}
@@ -53,7 +50,7 @@ export default function SpotConditionsWeek({
                         )) ?? <></>}
                     </tr>
                     <tr>
-                        <th className=" text-xs text-light font-body font-light sticky bg-light/5 p-2">
+                        <th className=" text-xs text-light font-body font-light  bg-primeshade p-2 sticky left-0">
                             Wave (m)
                         </th>
                         {spot.hourlyspotforecast?.hourly.wave_height
@@ -68,7 +65,7 @@ export default function SpotConditionsWeek({
                             ))}
                     </tr>
                     <tr>
-                        <th className="text-xs text-light font-body font-light bg-light/5 p-2 sticky">
+                        <th className="text-xs text-light font-body font-light bg-primeshade p-2 sticky left-0">
                             Period
                         </th>
                         {spot.hourlyspotforecast?.hourly.wave_period
@@ -83,7 +80,7 @@ export default function SpotConditionsWeek({
                             ))}
                     </tr>
                     <tr>
-                        <th className="text-xs text-light font-body font-light bg-light/5 p-2 sticky">
+                        <th className="text-xs text-light font-body font-light bg-primeshade p-2 sticky left-0">
                             Wave dir.
                         </th>
                         {spot.hourlyspotforecast?.hourly.wave_direction
@@ -99,7 +96,7 @@ export default function SpotConditionsWeek({
                     </tr>
 
                     <tr>
-                        <th className="text-xs text-light font-body font-light bg-light/5 p-2 sticky">
+                        <th className="text-xs text-light font-body font-light bg-primeshade p-2 sticky left-0">
                             Wind (km/h)
                         </th>
                         {spot.hourlyweatherdata?.windspeed_10m
@@ -114,7 +111,7 @@ export default function SpotConditionsWeek({
                             )) ?? <></>}
                     </tr>
                     <tr>
-                        <th className="text-xs text-light font-body font-light bg-light/5 p-2 sticky">
+                        <th className="text-xs text-light font-body font-light bg-primeshade p-2 sticky left-0">
                             Wind dir.
                         </th>
                         {spot.hourlyweatherdata?.winddirection_10m
@@ -129,7 +126,7 @@ export default function SpotConditionsWeek({
                             ))}
                     </tr>
                     <tr>
-                        <th className="text-xs text-light font-body font-light bg-light/5 p-2 sticky">
+                        <th className="text-xs text-light font-body font-light bg-primeshade p-2 sticky left-0">
                             Temp. (°C)
                         </th>
                         {spot.hourlyweatherdata?.temperature_2m

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -18,6 +18,7 @@ const config: Config = {
                 secondary: "#84cc16",
                 light: "#c7d2fe",
                 dark: "#1e1b4b",
+                primeshade: "#383593",
             },
         },
     },