From 8f2c595eca30e2d7138c8e8d6685774a8f44e55d Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 15 Feb 2018 16:59:58 -0500
Subject: omg

---
 frontend/components/Item.js | 79 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 63 insertions(+), 16 deletions(-)

(limited to 'frontend/components/Item.js')

diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 42a6c87..87fb0b9 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,31 +1,74 @@
 import React from 'react';
+import Title from './styles/Title';
 import styled from 'styled-components';
 import slugify from 'slugify';
 import { compose } from 'react-apollo';
 import { Link } from '../routes';
 import AddToCart from './AddToCart';
-import makeImage from '../lib/image';
 import formatMoney from '../lib/formatMoney';
 import { removeItemMutation } from '../enhancers/enhancers';
 
 const Item = styled.div`
-  background: #f3f3f3;
-  padding: 5px;
+  background: white;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.09);
+  position: relative;
+  display: grid;
+  align-content: start;
+  /* grid-template-rows: repeat(auto-fit, minmax(100px,)); */
+  grid-auto-rows: fit-content;
   img {
     width: 100%;
   }
+  p {
+    font-size: 14px;
+    line-height: 2;
+    font-weight: 600;
+    padding: 0 3rem;
+    font-size: 1.5rem;
+  }
+  .buttonList {
+    display: grid;
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-gap: 1px;
+    background: ${props => props.theme.lightgrey};
+    align-self: end;
+    & > * {
+      background: white;
+      border: 0;
+      text-align: center;
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+`;
+
+const PriceTag = styled.span`
+  background: ${props => props.theme.red};
+  transform: rotate(2deg);
+  color: white;
+  font-weight: 600;
+  padding: 5px;
+  font-size: 3rem;
+  display: inline-block;
+  position: absolute;
+  top: -3px;
+  right: -3px;
 `;
 
 class ItemComponent extends React.Component {
   removeItem = () => {
-    this.props.removeItem({ variables: { id: this.props.item.id } });
+    if (confirm('Are you sure you want to delete this item?')) {
+      this.props.removeItem({ variables: { id: this.props.item.id } });
+    }
   };
   render() {
     const item = this.props.item;
     return (
       <Item key={item.id}>
         {item.image ? <img src={item.image} alt={item.title} /> : null}
-        <h3>
+        <Title>
           <Link
             route="item"
             params={{
@@ -35,20 +78,24 @@ class ItemComponent extends React.Component {
           >
             <a>{item.title}</a>
           </Link>
-        </h3>
+        </Title>
+
+        <PriceTag>{formatMoney(item.price)}</PriceTag>
 
         <p>{item.description}</p>
 
-        <Link
-          href={{
-            pathname: '/admin/update',
-            query: { id: item.id },
-          }}
-        >
-          <a>Edit ✏️</a>
-        </Link>
-        <AddToCart id={item.id} />
-        <button onClick={this.removeItem}>&times; Delete item</button>
+        <div className="buttonList">
+          <Link
+            href={{
+              pathname: '/admin/update',
+              query: { id: item.id },
+            }}
+          >
+            <a>Edit ✏️</a>
+          </Link>
+          <AddToCart id={item.id} />
+          <button onClick={this.removeItem}>&times; Delete item</button>
+        </div>
       </Item>
     );
   }
-- 
cgit v1.3