Make new project card

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

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>