massive refactor toDrop cascadeStudio and add CadQuery + OpenSCAD

resolves #400

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

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

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

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

app/web/src/components/EmojiReaction/EmojiReaction.tsx

@@ -3,7 +3,7 @@ import { getActiveClasses } from 'get-active-classes'
 import Popover from '@material-ui/core/Popover'
 import { useAuth } from '@redwoodjs/auth'
 
-import Svg from 'src/components/Svg'
+import Svg from 'src/components/Svg/Svg'
 
 const emojiMenu = ['❤️', '👍', '😄', '🙌']
 // const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
@@ -20,7 +20,7 @@ const EmojiReaction = ({
   emotes,
   userEmotes,
   onEmote = () => {},
-  onShowPartReactions,
+  onShowProjectReactions,
   className,
 }) => {
   const { currentUser } = useAuth()
@@ -57,42 +57,41 @@ const EmojiReaction = ({
   return (
     <>
       <div
-        className={getActiveClasses(
-          'h-10 relative overflow-hidden py-4',
-          className
-        )}
+        className={getActiveClasses('relative overflow-hidden pt-1', className)}
       >
-        <div className="absolute left-0 w-8 inset-y-0 z-10 flex items-center bg-gray-100">
+        <div className="z-10 flex items-center gap-4 h-10">
           <div
-            className="h-8 w-8 relative"
+            className="h-full w-10"
             aria-describedby={popoverId}
             onClick={togglePopover}
           >
-            <button className="bg-gray-200 border-2 m-px w-full h-full border-gray-300 rounded-full flex justify-center items-center shadow-md hover:shadow-lg hover:border-indigo-200 transform hover:-translate-y-px transition-all duration-150">
-              <Svg
-                className="h-8 w-8 pt-px mt-px text-gray-500"
-                name="dots-vertical"
-              />
+            <button className="bg-ch-gray-600 w-full h-full flex justify-center items-center shadow-md hover:shadow-lg transform hover:-translate-y-px transition-all duration-150 rounded">
+              <Svg className="w-8 text-ch-gray-300" name="dots-vertical" />
             </button>
           </div>
-        </div>
-
-        <div className="whitespace-nowrap absolute right-0 inset-y-0 flex items-center flex-row-reverse">
           {(emotes.length ? emotes : noEmotes).map((emote, i) => (
             <span
               className={getActiveClasses(
-                'rounded-full tracking-wide hover:bg-indigo-100 p-1 mx-px transform hover:-translate-y-px transition-all duration-150 border-indigo-400',
-                { border: currentUser && userEmotes?.includes(emote.emoji) }
+                'tracking-wide border border-transparent hover:border-ch-gray-300 h-full p-1 px-4 transform hover:-translate-y-px transition-all duration-150 flex items-center rounded',
+                {
+                  'bg-ch-gray-500 text-ch-gray-900':
+                    currentUser && userEmotes?.includes(emote.emoji),
+                  'bg-ch-gray-600': !(
+                    currentUser && userEmotes?.includes(emote.emoji)
+                  ),
+                }
               )}
               style={textShadow}
               key={`${emote.emoji}--${i}`}
               onClick={() => handleEmojiClick(emote.emoji)}
             >
-              <span className="text-lg pr-1">{emote.emoji}</span>
-              <span className="text-sm font-ropa-sans">{emote.count}</span>
+              <span className="text-lg pr-2">{emote.emoji}</span>
+              <span className="text-sm font-fira-code">{emote.count}</span>
             </span>
           ))}
         </div>
+
+        <div className="whitespace-nowrap flex items-center flex-row-reverse"></div>
       </div>
       <Popover
         id={popoverId}
@@ -121,7 +120,7 @@ const EmojiReaction = ({
               </button>
             ))}
           </div>
-          <button className="text-gray-700" onClick={onShowPartReactions}>
+          <button className="text-gray-700" onClick={onShowProjectReactions}>
             View Reactions
           </button>
         </div>