Merge remote-tracking branch 'upstream/main' into main

README.md

@@ -1,6 +1,6 @@
 # CadHub
 
-CadHub aims to be a community website for javascript based code-cad. Currently trying to integrate [cascadeStudio](https://zalo.github.io/CascadeStudio/), but if successful plan to also integrate [jsCad](https://openjscad.org/).
+CadHub aims to be a community website for javascript based code-cad. Currently trying to integrate [cascadeStudio](https://zalo.github.io/CascadeStudio/), but if successful plan to also integrate [JSCAD](https://openjscad.org/).
 OpenScad has proven code-cad a much loved formate for cad-modeling. Joining code-cad to a mature language like javascript that has a package manager (npm) plus a community hub for sharing cad models like CadHub, we're going to build a thriving community.
 
 <img src="https://raw.githubusercontent.com/Irev-Dev/repo-images/main/images/Parts%20Page.jpg">

web/src/components/EmojiReaction/EmojiReaction.js

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import Fab from '@material-ui/core/Fab'
+import IconButton from '@material-ui/core/IconButton'
+import Popover from '@material-ui/core/Popover'
+import Svg from 'src/components/Svg'
+
+const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
+
+const EmojiReaction = ({ emotes, callback = () => {} }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [popoverId, setPopoverId] = useState(undefined)
+
+  const openPopover = (target) => {
+    setAnchorEl(target)
+    setPopoverId('simple-popover')
+    setIsOpen(true)
+  }
+
+  const closePopover = () => {
+    setAnchorEl(null)
+    setPopoverId(undefined)
+    setIsOpen(false)
+  }
+
+  const togglePopover = ({ currentTarget }) => {
+    if (isOpen) {
+      return closePopover()
+    }
+
+    openPopover(currentTarget)
+  }
+
+  const handleEmojiClick = (emoji) => {
+    callback(emoji)
+    closePopover()
+  }
+
+  return [
+    <div className="flex justify-between">
+        <Fab size="medium" variant="round" aria-describedby={popoverId} onClick={togglePopover}>
+          <div className="bg-gray-200 border-2 m-px border-gray-300 text-gray-500 absolute inset-0 rounded-full flex justify-center items-center">
+            <Svg name="dots-vertical" />
+          </div>
+        </Fab>
+
+      <div>
+        {emotes.map((emote, i) => (
+          <IconButton key={`${emote.emoji}--${i}`} onClick={() => handleEmojiClick(emote.emoji)}>
+            {emote.emoji} <span>{emote.count}</span>
+          </IconButton>
+        ))}
+      </div>
+    </div>,
+    <Popover
+      id={popoverId}
+      open={isOpen}
+      anchorEl={anchorEl}
+      onClose={closePopover}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+    >
+      {emojiMenu.map((emoji, i) => (
+        <IconButton key={`${emoji}-${i}}`} onClick={() => handleEmojiClick(emoji)}>{emoji}</IconButton>
+      ))}
+    </Popover>,
+  ]
+}
+
+export default EmojiReaction

web/src/components/EmojiReaction/EmojiReaction.stories.js

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

web/src/components/EmojiReaction/EmojiReaction.test.js

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

web/src/components/PartForm/ImageUploader.js

@@ -9,7 +9,7 @@ import 'react-image-crop/dist/ReactCrop.css'
 import Svg from 'src/components/Svg/Svg.js'
 
 const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images";
-const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload/?custom_coordinates=10,10,20,20";
+const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload";
 
 export default function ImageUploader({ onImageUpload, imageUrl }) {
   const [isModalOpen, setIsModalOpen] = useState(false)

web/src/components/Parts/Parts.js

@@ -53,7 +53,7 @@ const PartsList = ({ parts }) => {
   }
 
   return (
-    <div className="max-w-6xl mx-auto grid gap-8 grid-cols-4">
+    <div className="max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-5xl xl:max-w-6xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid- cols-4">
       {parts.map((part) => {
         return (
           <Link

web/src/components/Svg/Svg.js

@@ -9,6 +9,9 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => {
     </svg>,
     "pencil": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+    </svg>,
+    "dots-vertical": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
     </svg>
   }
 

web/src/components/UserPart/UserPart.js

@@ -0,0 +1,16 @@
+function UserPart({ userName, partName }) {
+  return (
+    <h3 className="text-xl font-roboto">
+      <div className="w-1 inline-block text-indigo-800 bg-indigo-800 mr-2">.</div>
+      <span className="text-gray-500">
+        {userName}
+      </span>
+      <div className="w-1 inline-block bg-gray-400 text-gray-400 mx-3 transform -skew-x-20" >.</div>
+      <span className="text-indigo-800">
+        {partName}
+      </span>
+    </h3>
+  )
+}
+
+export default UserPart

web/src/index.css

@@ -8,6 +8,9 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap')
 /**
  * END --- TAILWIND GENERATOR EDIT
  */
@@ -33,7 +36,7 @@
 
 body {
   /* TODO can I use a tailwind class here? */
-  background-color: #4a5568;
+  background-color: #E5E5E5;
 }
 
 button, input, label, textarea {

web/src/layouts/MainLayout/MainLayout.js

@@ -11,36 +11,42 @@ const MainLayout = ({ children }) => {
   return (
     <>
       <header>
-        <nav className="flex justify-between h-20 bg-gray-900">
+        <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">
             <li>
               <Link to={routes.home()}>
                 <Tooltip title="We need a logo!" >
-                  <div className="h-10 w-10 bg-indigo-500 rounded-full ml-12" data-tip="hello world" data-place="bottom"></div>
+                  <div className="h-10 w-10 bg-indigo-500 rounded-full" data-tip="hello world" data-place="bottom"></div>
                 </Tooltip>
               </Link>
             </li>
             <li>
               <Tooltip title="Very alpha, there's lots of work todo" >
-                <div className="ml-8 flex">
-                  <h2 className="text-indigo-200 text-2xl">CadHub</h2>
-                  <div className="text-pink-500 pb-4 text-sm" >pre-alpha</div>
+                <div className="ml-12 flex">
+                  {/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
+                  <h2 className="text-indigo-300 text-5xl font-ropa-sans py-1 tracking-wider" style={{letterSpacing: '0.3em'}}>CadHub</h2>
+                  <div className="text-pink-400 text-sm font-bold font-ropa-sans" style={{paddingBottom: '2rem', marginLeft: '-1.8rem'}}>pre-alpha</div>
                 </div>
               </Tooltip>
             </li>
           </ul>
           <ul className="flex items-center">
-            <li className="mr-8 rounded-full border-2 border-indigo-300">
+            <li className="mr-8 h-10 w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center">
               <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 text-indigo-200">
-              <a href="#" onClick={isAuthenticated ? logOut : logIn}>
-                {isAuthenticated ? 'Log Out' : 'Log In'}
-                <img src={avatar} className="rounded-full h-10 w-10" />
-              </a>
-            </li>
+            {
+              isAuthenticated ?
+              <li className="h-10 w-10 border-2 rounded-full border-indigo-300 text-indigo-200">
+                <a href="#" onClick={logOut}>
+                  <img src={avatar} className="rounded-full object-cover" />
+                </a>
+              </li>:
+              <li>
+                <a href="#" className='text-indigo-200 font-semibold underline' onClick={logIn}>Sign in/up</a>
+              </li>
+            }
           </ul>
         </nav>
       </header>

web/tailwind.config.js

@@ -16,7 +16,13 @@ module.exports = {
       minHeight: {
         'md': '28rem'
       },
-
+      fontFamily: {
+        'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'],
+        'roboto': ['Roboto', 'Arial', 'sans-serif'],
+      },
+      skew: {
+        '-20': "-20deg"
+      }
     }
   },
   variants: {},