Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Barefeature #2

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Barefeature #2

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6baa35
Page for Individual Bulletin
see-ann Mar 14, 2022
b36cee7
Bulletin
see-ann Mar 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 62 additions & 1 deletion pages/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { majorScale, Pane } from 'evergreen-ui';
import { Pane, majorScale, ArrowsHorizontalIcon, Button, ChatIcon} from 'evergreen-ui'
import Link from 'next/link'
import { withPageAuthRequired } from '@auth0/nextjs-auth0';
import MenuCard from '../../components/MenuCard';
import router from "next/router";
Expand All @@ -23,6 +24,66 @@ export default withPageAuthRequired(() => {
<Pane display="flex" flexWrap="wrap" justifyContent="center"
marginY={majorScale(4)}
paddingX={majorScale(3)}>
<Pane
display="flex"
borderRadius={8}
elevation={1}
background="white"
marginX={20}
maxWidth="800px"
height="400px"
width="100%"
paddingX="10px"
paddingTop={majorScale(5)}
paddingBottom={majorScale(7)}>
<div style={{width:"100%", display:"flex", justifyContent:"space-between"}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use <Pane> instead of divs. For example, this would have been:
<Pane width="100%" display="flex" justifyContent="space-between">...</Pane>
which is just much cleaner.


<div style={{marginLeft:40}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use <Pane marginLeft={40}> etc. instead, it is basically 1:1 equivalent which is why we use it in other parts of the code. Same applies for everything

<div style={{marginBottom:30, fontSize:30}}><b>Tiger Plushie</b></div>
<div style={{fontSize:15}}>
<div style={{marginBottom:20}}><b>Description:</b> Soft and like new. Is a hand sized tiger plushie.</div>
<div style={{marginBottom:20}}><b>Type of Trade:</b> Selling</div>
<div style={{marginBottom:20}}><b>Delivery:</b> Pickup</div>
</div>

<div style={{display:"flex", justifyContent:"space-between", marginTop:50}}><Button
height={45}
width={majorScale(25)}
appearance="default"
marginTop={20}
iconBefore={ArrowsHorizontalIcon}
backgroundColor="#6E62B6"
color="white"
>
<div><b>Request to Buy</b></div>
</Button>

<Button
height={45}
width={majorScale(25)}
appearance="default"
marginTop={20}
iconBefore={ChatIcon}
color="#6E62B6"
backgroundColor="white"
borderColor="#6E62B6"
>
<div><b>Ask a Question</b></div>
</Button>

</div>

</div>

<div style={{marginRight:40, display:"flex flex-col", justifyContent:"flex-end", fontSize:15}}>
<div style={{marginBottom:5}}>5 days left</div>
<div style={{color:"grey"}}>2 standing offers</div>
</div>
</div>


</Pane>

</Pane>
</>
);
Expand Down