More polish fixes (#137)

* make homepage a little more responsive, fix spacing nits * update hidden password string * fix dayProgressBar
stripe · May 10, 2024 · a38ac5a · a38ac5a
1 parent d8b17be
commit a38ac5a
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 47 deletions.
diff --git a/app/(dashboard)/home/page.tsx b/app/(dashboard)/home/page.tsx
@@ -17,6 +17,8 @@ export default function Dashboard() {
 
   const name = session.user.stripeAccount.individual?.first_name;
 
+  const BREAKPOINT = 1190;
+
   return (
     <>
       <h1 className="text-3xl font-bold">Woof woof, {name}!</h1>
@@ -25,16 +27,20 @@ export default function Dashboard() {
           <ConnectNotificationBanner />
         </EmbeddedComponentContainer>
       </div>
-      <div className="flex flex-row items-start space-x-5">
-        <div className="min-w-[700px] flex-1">
+      <div className="flex flex-col xl:flex-row items-start gap-5">
+        <div className="min-w-[550px] w-full flex-1">
           <Schedule />
         </div>
-        <div className="w-[30%] min-w-[300px] space-y-4">
-          <BalanceWidget />
-          <RecentPaymentsWidget />
-          <h2 className="pt-4 text-lg font-bold">Performance</h2>
-          <MonthToDateWidget />
-          <CustomersWidget />
+        <div className="flex flex-col w-[30%] w-full xl:w-[30%] -order-1 xl:order-2 min-w-[300px] gap-4">
+          <div className="flex flex-row flex-grow xl:flex-col gap-4">
+            <BalanceWidget />
+            <RecentPaymentsWidget />
+          </div>
+          <h2 className="pt-4 text-lg font-bold hidden xl:block">Performance</h2>
+          <div className="flex flex-row gap-4 xl:flex-col">
+            <MonthToDateWidget />
+            <CustomersWidget />
+          </div>
         </div>
       </div>
     </>

diff --git a/app/(dashboard)/payments/page.tsx b/app/(dashboard)/payments/page.tsx
@@ -50,10 +50,10 @@ export default function Payments() {
         </div>
       </div>
       <Container>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row items-center justify-between">
           <h1 className="text-xl font-bold">Recent payments</h1>
           {!loading && (
-            <Button onClick={onClick} disabled={buttonLoading}>
+            <Button onClick={onClick} size="sm" disabled={buttonLoading}>
               {buttonLoading ? (
                 <>
                   <LoaderCircle className="mr-1 animate-spin" size={20} />{' '}

diff --git a/app/(dashboard)/payouts/page.tsx b/app/(dashboard)/payouts/page.tsx
@@ -40,7 +40,7 @@ export default function Payouts() {
       <div className="flex flex-row justify-between">
         <h1 className="text-3xl font-bold">Payouts</h1>
         {!loading && (
-          <Button onClick={onClick} disabled={buttonLoading}>
+          <Button onClick={onClick} size="sm" disabled={buttonLoading}>
             {buttonLoading ? (
               <>
                 <LoaderCircle className="mr-1 animate-spin" size={20} />{' '}
@@ -55,7 +55,7 @@ export default function Payouts() {
         )}
       </div>
       <Container>
-        <h1 className="text-xl font-bold">Recent payouts</h1>
+        <h1 className="ml-1 text-xl font-bold">Recent payouts</h1>
         <EmbeddedComponentContainer>
           {loading ? (
             <div className="text-l flex items-center justify-center gap-1 py-16 text-center font-medium">

diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
@@ -48,7 +48,7 @@ export default function Settings() {
           <ConnectNotificationBanner />
         </EmbeddedComponentContainer>
       </Container>
-      <Container>
+      <Container className="pl-5">
         <div className="flex flex-row justify-between">
           <h1 className="mb-4 text-xl font-semibold">Details</h1>
           <div className="text-right align-top text-sm font-semibold text-accent">
@@ -67,7 +67,7 @@ export default function Settings() {
           <div>
             <div className="text-subdued">Password</div>
             <div className="font-medium">
-              {showPassword ? password : '*********'}
+              {showPassword ? password : '••••••••'}
             </div>
             <Link
               className="text-sm font-semibold text-accent"
@@ -81,17 +81,17 @@ export default function Settings() {
         </div>
       </Container>
       <Container>
-        <div className="flex flex-row justify-between">
-          <header className="mb-5">
+        <div className="flex flex-row items-start justify-between">
+          <header className="ml-2 mb-5">
             <h1 className="text-xl font-semibold">Account settings</h1>
             <h2 className="text-subdued">
               Manage account and business settings.
             </h2>
           </header>
-          <Button className="h-10" onClick={onClick} disabled={buttonLoading}>
+          <Button size="sm" className="" onClick={onClick} disabled={buttonLoading}>
             {buttonLoading ? (
               <>
-                <LoaderCircle className="mr-1 animate-spin" size={20} />{' '}
+                <LoaderCircle className="mr-1.5 animate-spin" size={20} />{' '}
                 Creating intervention
               </>
             ) : (
@@ -108,7 +108,7 @@ export default function Settings() {
       </Container>
 
       <Container>
-        <header className="mb-5">
+        <header className="ml-2 mb-5">
           <h1 className="text-xl font-semibold">Payment methods</h1>
           <h2 className="text-subdued">Add and manage your payment methods.</h2>
         </header>

diff --git a/app/components/BalanceWidget.tsx b/app/components/BalanceWidget.tsx
@@ -5,11 +5,11 @@ import {ChevronRight} from 'lucide-react';
 
 const BalanceWidget = () => {
   return (
-    <Container className="px-5">
+    <Container className="px-5 w-full">
       <div className="flex flex-row justify-between space-y-1">
         <div>
           <h1 className="font-bold text-subdued">Total balance</h1>
-          <div className="text-xl font-bold">$1,532</div>
+          <div className="text-2xl font-bold">$1,532</div>
         </div>
         <div>
           <Link href="/payouts" className="flex flex-row items-center">

diff --git a/app/components/CustomersWidget.tsx b/app/components/CustomersWidget.tsx
@@ -7,7 +7,7 @@ import {SparkLineChart} from '@mui/x-charts/SparkLineChart';
 
 const CustomersWidget = () => {
   return (
-    <Container className="px-5">
+    <Container className="px-5 w-full">
       <div className="flex flex-row justify-between gap-10">
         <div className="min-w-[110px] space-y-1">
           <h1 className="font-bold text-subdued">Customers</h1>

diff --git a/app/components/MonthToDateWidget.tsx b/app/components/MonthToDateWidget.tsx
@@ -7,7 +7,7 @@ import {SparkLineChart} from '@mui/x-charts/SparkLineChart';
 
 const MonthToDateWidget = () => {
   return (
-    <Container className="px-5">
+    <Container className="px-5 w-full">
       <div className="flex flex-row justify-between gap-10">
         <div className="min-w-[110px] space-y-1">
           <h1 className="font-bold text-subdued">Month-to-date</h1>

diff --git a/app/components/RecentPaymentsWidget.tsx b/app/components/RecentPaymentsWidget.tsx
@@ -23,7 +23,7 @@ const BalanceWidget = () => {
   // }, []);
 
   return (
-    <Container className="px-5">
+    <Container className="px-5 w-full">
       <div className="space-y-1">
         <div className="flex flex-row justify-between">
           <div>
@@ -42,15 +42,15 @@ const BalanceWidget = () => {
         </div>
         <div>
           <ul>
-            <li className="flex flex-row justify-between text-subdued">
+            <li className="flex flex-row justify-between text-sm text-subdued">
               <div>michael@stripe.com</div>
               <div>$250.00</div>
             </li>
-            <li className="flex flex-row justify-between text-subdued">
+            <li className="flex flex-row justify-between text-sm text-subdued">
               <div>jessica@stripe.com</div>
               <div>$250.00</div>
             </li>
-            <li className="flex flex-row justify-between text-subdued">
+            <li className="flex flex-row justify-between text-sm text-subdued">
               <div>david@stripe.com</div>
               <div>$54.32</div>
             </li>

diff --git a/app/components/Schedule.tsx b/app/components/Schedule.tsx
@@ -50,20 +50,20 @@ const renderDayProgressBar = () => {
 
   return (
     <div
-      className="absolute left-20 h-[2px] w-[calc(100%-10rem)] bg-accent pl-20"
+      className="absolute h-[2px] left-[40px] w-[calc(100%-35px)] bg-accent"
       style={{
         top: `${(SCHEDULE_HEIGHT * minutesSince9AM) / MINUTES_IN_BUSINESS_DAY + 60}px`,
       }}
     >
-      <div className="relative left-[-80px] top-[-3px] h-2 w-2 rounded-full border-2 border-accent bg-accent"></div>
+      <div className="relative left-0 top-[-3px] h-2 w-2 rounded-full border-2 border-accent bg-accent"></div>
     </div>
   );
 };
 
 const renderHourBlock = (hour: string) => {
   return (
     <div className="flex h-36 flex-row">
-      <div className="w-20 text-sm text-subdued">
+      <div className="w-12 text-sm text-subdued">
         <div className="-translate-y-[50%]">{hour}</div>
       </div>
       <div className="grid flex-1 grid-cols-1 divide-y border-t-2">
@@ -77,7 +77,7 @@ const renderHourBlock = (hour: string) => {
 const Schedule = () => {
   return (
     <Container className="px-5 py-5">
-      <div className="space-y-4">
+      <div className="space-y-4 relative">
         <div className="flex flex-row justify-between">
           <h1 className="text-xl font-bold">Today&apos;s schedule</h1>
           <div className="flex flex-row space-x-2">
@@ -86,10 +86,10 @@ const Schedule = () => {
             <ChevronRight color="var(--accent)" />
           </div>
         </div>
-        <div className="relative left-20 z-20 -ml-20 flex flex-row pl-20">
+        <div className="relative z-40 left-0 flex w-full flex-row">
           {renderDayProgressBar()}
         </div>
-        <div className="ml-20 flex flex-row">
+        <div className="ml-10 flex flex-row">
           {schedule.map(({id: id, groomer}) => (
             <h2
               key={id}
@@ -101,24 +101,24 @@ const Schedule = () => {
           ))}
         </div>
         <div className="relative flex">
-          <div className="z-10 flex-1">
-            {renderHourBlock('9:00am')}
-            {renderHourBlock('10:00am')}
-            {renderHourBlock('11:00am')}
-            {renderHourBlock('12:00pm')}
-            {renderHourBlock('1:00pm')}
-            {renderHourBlock('2:00pm')}
-            {renderHourBlock('3:00pm')}
-            {renderHourBlock('4:00pm')}
-            {renderHourBlock('5:00pm')}
-            {renderHourBlock('6:00pm')}
+          <div className="z-10 w-full absolute flex-1">
+            {renderHourBlock('9 AM')}
+            {renderHourBlock('10 AM')}
+            {renderHourBlock('11 AM')}
+            {renderHourBlock('12 PM')}
+            {renderHourBlock('1 PM')}
+            {renderHourBlock('2 PM')}
+            {renderHourBlock('3 PM')}
+            {renderHourBlock('4 PM')}
+            {renderHourBlock('5 PM')}
+            {renderHourBlock('6 PM')}
           </div>
-          <div className="absolute left-20 top-0 z-20 -ml-20 flex w-full flex-row pl-20">
+          <div className={`h-[1440px] relative gap-4 top-0 z-20 flex w-full flex-row pl-16`}>
             {schedule.map(({id: id, sessions}) => {
               return (
                 <div
                   key={id}
-                  className="relative mr-5 flex flex-1 flex-col first:ml-5"
+                  className="relative flex flex-grow flex-col"
                 >
                   {sessions.map(
                     ({
@@ -141,7 +141,7 @@ const Schedule = () => {
                       return (
                         <div
                           key={classId}
-                          className="absolute ml-2 mr-2 flex w-full min-w-64 cursor-pointer flex-col justify-between space-y-2 rounded-md border bg-offset p-3 transition duration-150 hover:scale-[1.01] hover:bg-white hover:shadow-md"
+                          className="absolute flex w-full cursor-pointer flex-col justify-between space-y-2 rounded-md border bg-offset p-3 transition duration-150 hover:scale-[1.01] hover:bg-white hover:shadow-md hover:z-100"
                           style={{
                             height: `${Math.round(
                               (SCHEDULE_HEIGHT *