Tweak some styling to fit better in smaller desktop screens (wise-old…

…-man#1230)
Jakesterwars · Sep 17, 2023 · 0a17d50 · 0a17d50
1 parent d0c1034
commit 0a17d50
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 10 deletions.
diff --git a/app-v2/src/components/Table.tsx b/app-v2/src/components/Table.tsx
@@ -69,7 +69,7 @@ const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCel
     <th
       ref={ref}
       className={cn(
-        "h-10 px-5 text-left align-middle text-xs font-medium tabular-nums text-gray-200 [&:has([role=checkbox])]:pr-0",
+        "h-10 px-4 text-left align-middle text-xs font-medium tabular-nums text-gray-200 [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -82,7 +82,7 @@ const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCel
   ({ className, ...props }, ref) => (
     <td
       ref={ref}
-      className={cn("px-5 py-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
       {...props}
     />
   )

diff --git a/app-v2/src/components/competitions/CompetitionCountdown.tsx b/app-v2/src/components/competitions/CompetitionCountdown.tsx
@@ -34,11 +34,11 @@ export default function CompetitionCountdown(props: CompetitionCountdownProps) {
       </div>
       <div className="flex flex-col items-center">
         <span className="text-2xl font-medium">{padNumber(minutes)}</span>
-        <span className="text-xs text-gray-200">minutes</span>
+        <span className="text-xs text-gray-200">mins</span>
       </div>
       <div className="flex flex-col items-center">
         <span className="text-2xl font-medium">{padNumber(seconds)}</span>
-        <span className="text-xs text-gray-200">seconds</span>
+        <span className="text-xs text-gray-200">secs</span>
       </div>
       {isOngoing && progress > 0 && (
         <div className="absolute bottom-0 left-0 right-0">

diff --git a/app-v2/src/components/competitions/CompetitionDuration.tsx b/app-v2/src/components/competitions/CompetitionDuration.tsx
@@ -19,16 +19,16 @@ export default function CompetitionDuration(props: CompetitionDurationProps) {
   return (
     <div className="flex h-24 w-full flex-col items-center overflow-hidden rounded-lg border border-gray-500">
       <div className="grid w-full grow grid-cols-2 items-center divide-x divide-gray-500">
-        <div className="flex flex-col px-4 py-3">
+        <div className="flex flex-col py-3 pl-3">
           <span className="text-xs text-gray-200">Start</span>
           <span className="line-clamp-1 text-sm">{formatDate(props.startsAt, showUTC)}</span>
         </div>
-        <div className="flex flex-col px-4 py-3">
+        <div className="flex flex-col py-3 pl-3">
           <span className="text-xs text-gray-200">End</span>
           <span className="line-clamp-1 text-sm">{formatDate(props.endsAt, showUTC)}</span>
         </div>
       </div>
-      <div className="line-clamp-1 w-full overflow-hidden truncate border-t border-gray-500 px-4 py-2 text-xs text-gray-200">
+      <div className="line-clamp-1 w-full overflow-hidden truncate border-t border-gray-500 py-2 pl-3 text-xs text-gray-200">
         Duration: {durationSegments.join(", ")}
       </div>
     </div>

diff --git a/app-v2/src/components/players/PlayerGainedTable.tsx b/app-v2/src/components/players/PlayerGainedTable.tsx
@@ -6,7 +6,6 @@ import { useRouter, useSearchParams } from "next/navigation";
 import {
   ACTIVITIES,
   ActivityDelta,
-  BOSSES,
   BossDelta,
   Metric,
   MetricProps,
@@ -16,7 +15,6 @@ import {
   PeriodProps,
   PlayerDeltasMap,
   PlayerDetails,
-  SKILLS,
   SkillDelta,
   isPeriod,
 } from "@wise-old-man/utils";

diff --git a/app-v2/src/components/players/PlayerOverviewWidgets.tsx b/app-v2/src/components/players/PlayerOverviewWidgets.tsx
@@ -10,7 +10,7 @@ export function PlayerOverviewWidgets(props: PlayerDetails) {
   const { data } = props.latestSnapshot;
 
   return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5">
+    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 xl:grid-cols-5">
       <Stat metric="combat" label="Combat Lvl." value={props.combatLevel} />
       <Stat metric={Metric.OVERALL} label="Overall exp." value={data.skills.overall.experience} />
       <Stat metric={Metric.EHP} label="EHP" value={data.computed.ehp.value || 0} />