Improve styles of account page

web/components/contracts-list.tsx

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useUser } from '../hooks/use-user'
@@ -18,26 +19,24 @@ function ContractCard(props: { contract: Contract }) {
   return (
     <li>
       <Link href={`/contract/${contract.id}`}>
-        <a className="block hover:bg-gray-300">
+        <a className="block hover:bg-gray-200">
           <div className="px-4 py-4 sm:px-6">
             <div className="flex items-center justify-between">
-              <p className="text-base font-medium text-indigo-700 truncate">
+              <p className="text-sm font-medium text-indigo-700">
                 {contract.question}
               </p>
             </div>
-
+            <div className="mt-2 sm:flex sm:flex-col sm:justify-between text-gray-600">
-            <div className="mt-2 sm:flex sm:justify-between">
               {/* <div className="sm:flex">
-                <p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
+                <p className="flex items-center text-sm">{contract.id}</p>
+                <p className="mt-2 flex items-center text-sm">
                   {contract.description}
                 </p>
               </div> */}
-
+              <div className="mt-2 flex flex-row items-center justify-between text-sm">
-              <div className="mt-2 flex items-center text-sm sm:mt-0">
                 <p>
-                  Created on{' '}
                   <time dateTime={`${contract.createdTime}`}>
-                    {new Date(contract.createdTime).toLocaleDateString()}
+                    {dayjs(contract.createdTime).format('MMM D')}
                   </time>
                 </p>
 
@@ -75,8 +74,8 @@ export function ContractsList(props: {}) {
   }, [creator])
 
   return (
-    <div className="bg-gray-200 shadow-xl overflow-hidden sm:rounded-md max-w-4xl w-full">
+    <div className="bg-gray-100 shadow-xl overflow-hidden sm:rounded-md max-w-4xl w-full">
-      <ul role="list" className="divide-y divide-gray-300">
+      <ul role="list" className="divide-y divide-gray-200">
         {contracts.map((contract) => (
           <ContractCard contract={contract} key={contract.id} />
         ))}

web/pages/account.tsx

@@ -5,16 +5,17 @@ import { useState, useEffect } from 'react'
 import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsList } from '../components/contracts-list'
 import { Title } from '../components/title'
+import { Row } from '../components/layout/row'
 
 function UserCard(props: { user: User }) {
   const { user } = props
   return (
-    <div className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
+    <Row className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
-      <figure className="p-6">
+      <div className="p-4">
         {user?.avatarUrl && (
-          <img src={user.avatarUrl} className="rounded-lg shadow-lg" />
+          <img src={user.avatarUrl} className="rounded-lg shadow-lg" width={96} height={96} />
         )}
-      </figure>
+      </div>
       <div className="max-w-md card-body">
         <h2 className="card-title font-major-mono">{user?.name}</h2>
         <p>{user?.email}</p>
@@ -28,19 +29,19 @@ function UserCard(props: { user: User }) {
           </button>
         </div>
       </div>
-    </div>
+    </Row>
   )
 }
 
 function SignInCard() {
   return (
     <div className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
-      <figure className="p-6">
+      <div className="p-4">
         <img
           src="/logo-icon-white-bg.png"
           className="rounded-lg shadow-lg w-20 h-20"
         />
-      </figure>
+      </div>
       <div className="max-w-md card-body">
         <h2 className="card-title font-major-mono">Welcome!</h2>
         <p>Sign in to get started</p>
@@ -70,11 +71,11 @@ export default function Account() {
   return (
     <div>
       <Header />
-      <div className="max-w-4xl py-8 mx-auto">
+      <div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
         {user ? (
           <div>
             <UserCard user={user} />
-            <Title text="Your markets" />
+            <Title className="px-2" text="Your markets" />
             <ContractsList contracts={contracts} />
           </div>
         ) : (