Merge branch 'main' into keyboard-shortcuts

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

@@ -1,11 +1,21 @@
-import { ideTypeNameMap } from 'src/helpers/hooks/useIdeContext'
+export type CadPackageType = 'openscad' | 'cadquery' | 'jscad'
 
-interface CadPackageProps {
-  cadPackage: string
-  className?: string
+export const ideTypeNameMap = {
+  openscad: 'OpenSCAD',
+  cadquery: 'CadQuery',
 }
 
-const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
+interface CadPackageProps {
+  cadPackage: CadPackageType
+  className?: string
+  dotClass?: string
+}
+
+const CadPackage = ({
+  cadPackage,
+  className = '',
+  dotClass = 'w-5 h-5',
+}: CadPackageProps) => {
   const cadName = ideTypeNameMap[cadPackage] || ''
   const isOpenScad = cadPackage === 'openscad'
   const isCadQuery = cadPackage === 'cadquery'
@@ -14,13 +24,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/EncodedUrl/ExternalScript.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { useIdeContext, ideTypeNameMap } from 'src/helpers/hooks/useIdeContext'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+import { ideTypeNameMap } from 'src/components/CadPackage/CadPackage'
 import OutBound from 'src/components/OutBound/OutBound'
 import { prepareEncodedUrl, makeExternalUrl } from './helpers'
 import { copyTextToClipboard } from 'src/helpers/clipboard'

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

@@ -4,8 +4,7 @@ import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 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'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 const colors = theme.extend.colors
 

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -102,9 +102,9 @@ const IdeHeader = ({
               <TopButton
                 onClick={onClick}
                 name="Save Project Image"
-                className=" bg-ch-gray-300 bg-opacity-70 hover:bg-opacity-90 text-ch-gray-900"
+                className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
               >
-                <Svg name="camera" className="w-6 h-6" />
+                <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
               </TopButton>
             )}
           />

app/web/src/components/IdeSideBar/IdeSideBar.tsx

@@ -4,17 +4,17 @@ import Svg from 'src/components/Svg/Svg'
 const IdeSideBar = () => {
   return (
     <div className="h-full flex flex-col justify-between">
-      <div className="w-16 h-16 flex items-center justify-center bg-ch-gray-900">
+      <div className="w-14 h-16 flex items-center justify-center bg-ch-gray-900">
         <Link to={routes.home()}>
-          <Svg className="w-12" name="favicon" />
+          <Svg className="w-12 p-0.5" name="favicon" />
         </Link>
       </div>
       <button
-        className="text-gray-300 p-2 pb-4 flex justify-center cursor-not-allowed"
+        className="text-gray-300 p-3 pb-6 flex justify-center cursor-not-allowed"
         aria-label="IDE settings"
         disabled
       >
-        <Svg name="big-gear" />
+        <Svg name="gear" />
       </button>
     </div>
   )

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -1,12 +1,12 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
-import type { CadPackage } from 'src/helpers/hooks/useIdeState'
+import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
 
 const menuOptions: {
   name: string
   sub: string
-  ideType: CadPackage
+  ideType: CadPackageType
 }[] = [
   {
     name: 'OpenSCAD',
@@ -20,7 +20,7 @@ const menuOptions: {
 const NavPlusButton: React.FC = () => {
   return (
     <Popover className="relative outline-none w-full h-full">
-      <Popover.Button className="h-full w-full outline-none">
+      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border rounded-full">
         <Svg name="plus" className="text-gray-200" />
       </Popover.Button>
 

app/web/src/components/PanelToolbar/PanelToolbar.tsx

@@ -23,10 +23,10 @@ const PanelToolbar = ({
           aria-label={`${panelName} settings`}
           disabled
         >
-          <Svg name="gear" className="w-7 p-px" />
+          <Svg name="gear" className="w-7 p-0.5" />
         </button>
         {mosaicWindowActions.connectDragSource(
-          <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
+          <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-1.5 h-full flex items-center">
             <Svg name="drag-grid" className="w-4 p-px" />
           </div>
         )}

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