open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve styles of account page

Browse Source
This commit is contained in:
jahooma 2021-12-13 19:29:02 -06:00
parent 14cf1e6a8b
commit 7b0c011d39
2 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/contracts-list.tsx
View File

@ -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:justify-between">
<div className="mt-2 sm:flex sm:flex-col sm:justify-between text-gray-600">
{/* <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 items-center text-sm sm:mt-0">
<div className="mt-2 flex flex-row items-center justify-between text-sm">
<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">
<ul role="list" className="divide-y divide-gray-300">
<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-200">
{contracts.map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}

19
web/pages/account.tsx
View File

@ -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">
<figure className="p-6">
<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">
<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>
) : (