Make new project card

designs
https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1150%3A1619
Resolves #492

app/web/config/tailwind.config.js

@@ -13,6 +13,9 @@ module.exports = {
       borderRadius: {
         half: '50%',
       },
+      boxShadow: {
+        ch: '0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 4px 0 rgba(13, 13, 19, 0.15)',
+      },
       colors: {
         'ch-gray': {
           900: '#0D0D13',
@@ -35,9 +38,10 @@ module.exports = {
           200: '#DBDBEC',
         },
         'ch-blue': {
-          600: '#79B2F8',
+          700: '#08466F',
+          650: '#0958BA',
           500: '5098F1',
-          300: '#08466F'
+          400: '#79B2F8',
         },
         'ch-pink': {
           800: '#93064F',

app/web/src/components/CadPackage/CadPackage.tsx

@@ -1,11 +1,17 @@
 import { ideTypeNameMap } from 'src/helpers/hooks/useIdeContext'
+import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
 
 interface CadPackageProps {
-  cadPackage: string
+  cadPackage: CadPackageType
   className?: string
+  dotClass?: string
 }
 
-const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
+const CadPackage = ({
+  cadPackage,
+  className = '',
+  dotClass = 'w-5 h-5',
+}: CadPackageProps) => {
   const cadName = ideTypeNameMap[cadPackage] || ''
   const isOpenScad = cadPackage === 'openscad'
   const isCadQuery = cadPackage === 'cadquery'
@@ -14,13 +20,13 @@ const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
       className={
         `grid grid-flow-col-dense items-center gap-2 cursor-default text-gray-100 ${
           isOpenScad && 'bg-yellow-800'
-        } ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className
+        } ${isCadQuery && 'bg-ch-blue-700'} bg-opacity-30 ` + className
       }
     >
       <div
         className={`${isOpenScad && 'bg-yellow-200'} ${
           isCadQuery && 'bg-blue-800'
-        } w-5 h-5 rounded-full`}
+        } ${dotClass} rounded-full`}
       />
       <div>{cadName}</div>
     </div>

app/web/src/components/Customizer/Customizer.tsx

@@ -222,7 +222,7 @@ function ChoiceParam({
                   className={({ active }) =>
                     `${
                       active
-                        ? 'text-ch-blue-600 bg-ch-gray-700'
+                        ? 'text-ch-blue-400 bg-ch-gray-700'
                         : 'text-ch-gray-300'
                     }
                           cursor-default select-none relative py-2 pl-10 pr-4`
@@ -241,7 +241,7 @@ function ChoiceParam({
                       {selected ? (
                         <span
                           className={`${
-                            active ? 'text-ch-blue-600' : 'text-ch-gray-300'
+                            active ? 'text-ch-blue-400' : 'text-ch-gray-300'
                           }
                                 absolute inset-y-0 left-0 flex items-center pl-3`}
                         >

app/web/src/components/Footer/Footer.stories.js

@@ -1,7 +0,0 @@
-import Footer from './Footer'
-
-export const generated = () => {
-  return <Footer />
-}
-
-export default { title: 'Components/Footer' }

app/web/src/components/Footer/Footer.test.js

@@ -1,11 +0,0 @@
-import { render } from '@redwoodjs/testing'
-
-import Footer from './Footer'
-
-describe('Footer', () => {
-  it('renders successfully', () => {
-    expect(() => {
-      render(<Footer />)
-    }).not.toThrow()
-  })
-})

app/web/src/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import OutBound from 'src/components/OutBound'
 
 const Footer = () => {
   return (
-    <div className="bg-indigo-900 text-indigo-200 font-roboto mt-20 text-sm">
+    <div className="bg-indigo-900 text-indigo-200 font-roboto text-sm">
       <div className="flex h-16 md:justify-end items-center mx-2 md:mx-16 flex-wrap">
         <OutBound className="mr-8" to="https://github.com/Irev-Dev/cadhub">
           Github

app/web/src/components/IdeConsole/IdeConsole.tsx

@@ -18,7 +18,7 @@ const IdeConsole = () => {
             className="font-mono text-sm text-gray-400"
             key={`${message} ${index}`}
           >
-            <div className="text-xs font-bold pt-2 text-ch-blue-600">
+            <div className="text-xs font-bold pt-2 text-ch-blue-400">
               {time?.toLocaleString()}
             </div>
             <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>

app/web/src/components/IdeEditor/IdeEditor.tsx

@@ -5,7 +5,6 @@ import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../config/tailwind.config'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
-import CadPackage from '../CadPackage/CadPackage'
 
 const colors = theme.extend.colors
 

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -36,7 +36,7 @@ const KeyValue = ({
   if (!children || hide) return null
   return (
     <div>
-      <div className="text-ch-blue-600 font-fira-code flex text-sm whitespace-nowrap">
+      <div className="text-ch-blue-400 font-fira-code flex text-sm whitespace-nowrap">
         {keyName}
         {canEdit &&
           (isEditable ? (
@@ -246,7 +246,7 @@ const ProjectProfile = ({
                                   />
                                   {user?.userName}
                                 </Link>
-                                <div className="font-fira-code text-ch-blue-600 flex items-center">
+                                <div className="font-fira-code text-ch-blue-400 flex items-center">
                                   {new Date(createdAt).toDateString()}
                                 </div>
                               </div>

app/web/src/components/Projects/Projects.tsx

@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 import { Link, routes } from '@redwoodjs/router'
+import Svg from 'src/components/Svg/Svg'
+import CadPackage from 'src/components/CadPackage/CadPackage'
 
 import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'
@@ -11,6 +13,8 @@ const ProjectsList = ({
   // temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
   // it helps avoid the look of the website just being filled with dumby data.
   // related issue-104
+
+  // note to self the projectCard is hardcoded directly into this component will not be hard the extract later when we need it elsewhere.
   const filteredProjects = useMemo(
     () =>
       (shouldFilterProjectsWithoutImage
@@ -24,67 +28,68 @@ const ProjectsList = ({
         ),
     [projects, shouldFilterProjectsWithoutImage]
   )
+
   return (
-    <section className="max-w-6xl mx-auto mt-8">
+    <section className="max-w-6xl mx-auto">
       <ul
         className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
       >
-        {filteredProjects.map(({ title, mainImage, user, Reaction }) => (
-          <li
-            className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
-            key={`${user?.userName}--${title}`}
-          >
-            <Link
-              to={routes.project({
-                userName: user?.userName,
-                projectTitle: title,
-              })}
+        {filteredProjects.map(
+          ({ title, mainImage, user, Reaction, cadPackage }) => (
+            <li
+              className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
+              key={`${user?.userName}--${title}`}
             >
-              <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
-                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
+              <Link
+                to={routes.project({
+                  userName: user?.userName,
+                  projectTitle: title,
+                })}
+              >
+                <div className="relative">
                   <ImageUploader
-                    className=""
-                    aspectRatio={1}
-                    imageUrl={user?.image}
-                    width={50}
+                    className="rounded"
+                    aspectRatio={1.4}
+                    imageUrl={mainImage}
+                    width={700}
+                  />
+                  <CadPackage
+                    cadPackage={cadPackage}
+                    className="absolute right-0 top-0 p-1.5 rounded-bl text-sm bg-opacity-50"
+                    dotClass="w-3 h-3"
                   />
                 </div>
-                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">
-                  {title}
-                </span>
-              </div>
-              <div className="w-full overflow-hidden relative rounded-b-lg">
-                <ImageUploader
-                  className=""
-                  aspectRatio={1.4}
-                  imageUrl={mainImage}
-                  width={700}
-                />
-                <div
-                  className="absolute inset-0"
-                  style={{
-                    background:
-                      'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)',
-                  }}
-                />
-              </div>
-              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">
-                {countEmotes(Reaction).map(({ emoji, count }) => (
-                  <div
-                    key={emoji}
-                    className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between"
-                  >
-                    <div className="-ml-px text-sm w-1">{emoji}</div>
-                    <div className="text-sm pl-1 font-ropa-sans text-gray-800">
-                      {count}
-                    </div>
+                <div className="flex items-center mt-1">
+                  <div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
+                    <ImageUploader
+                      className=""
+                      aspectRatio={1}
+                      imageUrl={user?.image}
+                      width={50}
+                    />
                   </div>
-                ))}
-              </div>
-            </Link>
-          </li>
-        ))}
+                  <div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
+                    <div className="">{title}</div>
+                    <div className="text-sm">{user?.userName}</div>
+                  </div>
+                </div>
+                <div className="grid grid-flow-col-dense gap-2 justify-start mt-1.5">
+                  <div className="px-2 flex items-center bg-ch-gray-600 text-ch-gray-300 rounded-sm">
+                    <Svg name="reactions" className="w-4 mr-2" />
+                    {countEmotes(Reaction).reduce(
+                      (prev, { count }) => prev + count,
+                      0
+                    )}
+                  </div>
+                  <div className="px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm">
+                    <Svg name="fork-new" className="w-4 mr-2" />0
+                  </div>
+                </div>
+              </Link>
+            </li>
+          )
+        )}
       </ul>
     </section>
   )

app/web/src/components/ProjectsCell/ProjectsCell.tsx

@@ -7,6 +7,7 @@ export const QUERY = gql`
     projects {
       id
       title
+      cadPackage
       mainImage
       createdAt
       updatedAt

app/web/src/pages/HomePage/HomePage.tsx

@@ -12,7 +12,9 @@ const ProjectsPage = () => {
         lang="en-US"
       />
       <LandingSection />
-      <ProjectsCell shouldFilterProjectsWithoutImage />
+      <div className="bg-ch-gray-800 py-20">
+        <ProjectsCell shouldFilterProjectsWithoutImage />
+      </div>
     </MainLayout>
   )
 }