Add basic styling to parts page

web/src/components/Parts/Parts.js

@@ -1,6 +1,8 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { Link, routes } from '@redwoodjs/router'
 
+import avatar from 'src/assets/harold.jpg'
+
 const DELETE_PART_MUTATION = gql`
   mutation DeletePartMutation($id: Int!) {
     deletePart(id: $id) {
@@ -50,58 +52,27 @@ const PartsList = ({ parts }) => {
   }
 
   return (
-    <div className="rw-segment rw-table-wrapper-responsive">
-      <table className="rw-table">
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Title</th>
-            <th>Description</th>
-            <th>Code</th>
-            <th>Main image</th>
-            <th>Created at</th>
-            <th>&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-          {parts.map((part) => (
-            <tr key={part.id}>
-              <td>{truncate(part.id)}</td>
-              <td>{truncate(part.title)}</td>
-              <td>{truncate(part.description)}</td>
-              <td>{truncate(part.code)}</td>
-              <td>{truncate(part.mainImage)}</td>
-              <td>{timeTag(part.createdAt)}</td>
-              <td>
-                <nav className="rw-table-actions">
+    <div className="max-w-6xl mx-auto grid gap-8 grid-cols-4">
+      {parts.map((part) => {
+        return (
           <Link
             to={routes.part({ id: part.id })}
             title={'Show part ' + part.id + ' detail'}
-                    className="rw-button rw-button-small"
+            key={part.id}
+            className="relative bg-gray-900 rounded-t-2xl"
           >
-                    Show
+            <div className="rounded-t-2xl bg-gray-900">
+              <div className="flex items-center p-2 text-indigo-200">
+                <div className="h-full absolute inset-0 text-6xl flex items-center justify-center text-indigo-700" ><span>?</span></div>
+                <div className="mr-4"><img src={avatar} className="rounded-full h-10 w-10" /></div>
+                <h3>{part.title}</h3>
+              </div>
+              <div className="relative z-10">
+                <img className="h-full" src={part.mainImage}/>
+              </div>
+            </div>
           </Link>
-                  <Link
-                    to={routes.editPart({ id: part.id })}
-                    title={'Edit part ' + part.id}
-                    className="rw-button rw-button-small rw-button-blue"
-                  >
-                    Edit
-                  </Link>
-                  <a
-                    href="#"
-                    title={'Delete part ' + part.id}
-                    className="rw-button rw-button-small rw-button-red"
-                    onClick={() => onDeleteClick(part.id)}
-                  >
-                    Delete
-                  </a>
-                </nav>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      )})}
     </div>
   )
 }

web/src/index.css

@@ -12,6 +12,11 @@
  * END --- TAILWIND GENERATOR EDIT
  */
 
+body {
+  /* TODO can I use a tailwind class here? */
+  background-color: #4a5568;
+}
+
 button, input, label, textarea {
   display: block;
   outline: none;

web/src/layouts/MainLayout/MainLayout.js

@@ -1,8 +1,10 @@
 import { Link, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
+import { Flash } from '@redwoodjs/web'
+import Tooltip from '@material-ui/core/Tooltip';
+
 import avatar from 'src/assets/harold.jpg'
 import Svg from 'src/components/Svg'
-import Tooltip from '@material-ui/core/Tooltip';
 
 const MainLayout = ({ children }) => {
   const { logIn, logOut, isAuthenticated } = useAuth()
@@ -28,11 +30,16 @@ const MainLayout = ({ children }) => {
             </li>
           </ul>
           <ul className="flex items-center">
-            <li className="mr-8 rounded-full border-2 border-indigo-300"><Svg name="plus" className="text-indigo-300" /></li>
+            <li className="mr-8 rounded-full border-2 border-indigo-300">
+              <Link to={routes.newPart()}>
+                <Svg name="plus" className="text-indigo-300" />
+              </Link>
+            </li>
             <li className="mr-12 p-px border-2 rounded-full border-indigo-300"><img src={avatar} className="rounded-full h-10 w-10" /></li>
           </ul>
         </nav>
       </header>
+      <Flash timeout={1000} />
       <main>{children}</main>
     </>
   )

web/src/layouts/PartsLayout/PartsLayout.js

@@ -1,21 +1,9 @@
-import { Link, routes } from '@redwoodjs/router'
-import { Flash } from '@redwoodjs/web'
+
 
 const PartsLayout = (props) => {
   return (
-    <div className="rw-scaffold">
-      <Flash timeout={1000} />
-      <header className="rw-header">
-        <h1 className="rw-heading rw-heading-primary">
-          <Link to={routes.parts()} className="rw-link">
-            Parts
-          </Link>
-        </h1>
-        <Link to={routes.newPart()} className="rw-button rw-button-green">
-          <div className="rw-button-icon">+</div> New Part
-        </Link>
-      </header>
-      <main className="rw-main">{props.children}</main>
+    <div className="mt-8">
+      <main>{props.children}</main>
     </div>
   )
 }

web/src/layouts/PostsLayout/PostsLayout.js

@@ -15,7 +15,7 @@ const PostsLayout = (props) => {
           <div className="rw-button-icon">+</div> New Post
         </Link>
       </header>
-      <main className="rw-main">{props.children}</main>
+      <main>{props.children}</main>
     </div>
   )
 }