colors

components/arcade/showcase/project-edit.js

@@ -36,7 +36,7 @@ const ProjectEditForm = ({ project }) => {
         maxWidth: '1200px',
         margin: 'auto',
         position: 'relative',
-        my: 4
+        my: 5
       }}
     >
       <Text
@@ -98,6 +98,14 @@ const ProjectEditForm = ({ project }) => {
               sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
             />
           </Label>
+          <Label>
+            <Text>Project description</Text>
+            <Input
+              {...useField('desc')}
+              placeholder="A summer of making for high schoolers"
+              sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
+            />
+          </Label>
           <Label>
             <Text>Repo Link</Text>
             <Input
@@ -148,10 +156,26 @@ const ProjectEditForm = ({ project }) => {
               position: 'relative',}}
             />
           </Label>
-          {/* <Text>{color}</Text> */}
+          <Label>
+            <Text>Text Color</Text>
+            <Input
+              {...useField('textColor')}
+              type="color"
+              sx={{
+                width: '150px',
+              height: '50px',
+              padding: '0',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              zIndex: 1,
+              position: 'relative',}}
+            />
+          </Label>
 
           <Input {...useField('authToken')} type="hidden" />
-
+          <FileInput />
           <Submit
             status={status}
             labels={{
@@ -164,7 +188,6 @@ const ProjectEditForm = ({ project }) => {
             }}
           />
         </form>
-        <FileInput />
         <Box
           sx={{
             // backgroundColor: color,

components/arcade/showcase/project-view.js

@@ -1,9 +1,37 @@
 import styles from './project-view.module.css'
+import { useState, useEffect } from 'react'
 import randomNotFoundImg from './random-not-found-img'
 import { Button, Text } from 'theme-ui'
 import Icon from '@hackclub/icons'
 /** @jsxImportSource theme-ui */
 
+
+function darkenColor(hex, factor) {
+  let r = parseInt(hex.substring(1, 3), 16);
+  let g = parseInt(hex.substring(3, 5), 16);
+  let b = parseInt(hex.substring(5, 7), 16);
+
+  r = Math.floor(r * factor);
+  g = Math.floor(g * factor);
+  b = Math.floor(b * factor);
+
+  return "#" + 
+         ("0" + r.toString(16)).slice(-2) +
+         ("0" + g.toString(16)).slice(-2) +
+         ("0" + b.toString(16)).slice(-2);
+}
+
+function invertColor(hex) {
+  hex = hex.replace(/^#/, '');
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+  r = (255 - r).toString(16).padStart(2, '0');
+  g = (255 - g).toString(16).padStart(2, '0');
+  b = (255 - b).toString(16).padStart(2, '0');
+  return `#${r}${g}${b}`;
+}
+
 const ProjectView = ({
   id,
   title = 'Title Not Found',
@@ -16,24 +44,34 @@ const ProjectView = ({
   user = 'User Not Found',
   codeLink = '',
   color = '',
+  textColor = '',
   ...props
 }) => {
+  const [darkColor, setDarkColor ] = useState("#000000")
+  const [invertedColor, setInvertedColor ] = useState("#000000")
+
   const codeHost = codeLink.includes('github')
     ? 'View on GitHub'
     : 'View project source'
   
   const imagesList = images.length > 0 ? images : [randomNotFoundImg(id)]
 
+  useEffect(() => {
+    setDarkColor(darkenColor(color, 0.8));
+    setInvertedColor(invertColor(textColor));
+  }, [color])
+  
+
   return (
     <div {...props} className="gaegu" sx={{ position: 'relative', backgroundColor: color }}>
-      <div sx={{ py: 4, backgroundColor: '#F4E7C7', textAlign: 'center', color: '#333' }}>
-        <h1 className="slackey" sx={{color: '#FF5C00'}}>{title}</h1>
+      <div sx={{ py: 4, backgroundColor: darkColor, textAlign: 'center', color: textColor }}>
+        <h1 className="slackey">{title}</h1>
         <h3>By {user}</h3>
         <Text
       as="a"
       href="/arcade/showcase/my"
         sx={{
-          border: '2px dashed #333',
+          border: `2px dashed ${textColor}`,
           borderRadius: '5px',
           position: ['relative', 'relative', 'absolute'],
           display: 'flex',
@@ -47,10 +85,9 @@ const ProjectView = ({
           cursor: 'pointer',
           textDecoration: 'none',
           mb: 3,
-          color: '#333',
           '&:hover': {
-            background: '#333',
-            color: '#F4E7C7'
+            background: textColor || '#333',
+            color: invertedColor || '#F4E7C7'
           }
         }}
       >
@@ -100,7 +137,7 @@ const ProjectView = ({
 
       <div
         className={styles.buttonGroup}
-        sx={{ width: '90%', margin: 'auto', my: 3 }}
+        sx={{ width: '90%', margin: 'auto', pt: 1, pb: 5 }}
       >
         {playLink && (
           <Button

pages/api/arcade/showcase/projects/[projectID]/edit.js

@@ -21,6 +21,7 @@ export default async function handler(req, res) {
   updatedFields['Play Link'] = body.playLink
   updatedFields['Screenshot'] = body.images
   updatedFields['color'] = body.color
+  updatedFields['textColor'] = body.textColor
 
   console.log(body.color)
 
@@ -45,7 +46,8 @@ export default async function handler(req, res) {
     images: (project.fields['Screenshot'] || []).map(i => i.url),
     user: user.fields['Name'],
     githubProf: project.fields['Github Profile'] || '',
-    color: project.fields['color'] || ''
+    color: project.fields['color'] || '',
+    textColor: project.fields['textColor'] || ''
   }
 
   return res.status(200).json({ project: results })

pages/api/arcade/showcase/projects/[projectID]/index.js

@@ -33,7 +33,8 @@ export default async function handler(req, res) {
     images: (p.fields['Screenshot'] || []).map(i => i.url),
     githubProf: p.fields['Github Profile'] || '',
     user: user.fields['Name'],
-    color: p.fields['color'] || ''
+    color: p.fields['color'] || '',
+    textColor: p.fields['textColor'] || ''
   }))
   return res.status(200).json({ project: results[0] })
 }

pages/arcade/showcase/project/[projectID]/index.js

@@ -44,23 +44,7 @@ const ProjectShowPage = ({ projectID }) => {
   const [project, setProject] = useState([])
   const [status, setStatus] = useState('loading')
   const [errorMsg, setError] = useState(null)
-  // Spotlight effect
-  const spotlightRef = useRef()
-  useEffect(() => {
-    const handler = event => {
-      var rect = document.getElementById('spotlight').getBoundingClientRect()
-      var x = event.clientX - rect.left //x position within the element.
-      var y = event.clientY - rect.top //y position within the element.
 
-      spotlightRef.current.style.background = `radial-gradient(
-             circle at ${x}px ${y}px,
-             rgba(132, 146, 166, 0) 20px,
-             rgba(250, 239, 214, 0.9) 120px
-           )`
-    }
-    window.addEventListener('mousemove', handler)
-    return () => window.removeEventListener('mousemove', handler)
-  }, [])
   useEffect(async () => {
     const token = window.localStorage.getItem('arcade.authToken')
     const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, {
@@ -84,33 +68,7 @@ const ProjectShowPage = ({ projectID }) => {
   }, [])
 
   return (
-    <Box
-      id="spotlight"
-      as="section"
-      sx={{
-        backgroundImage: `
-              linear-gradient(rgba(250, 239, 214, 0.7), rgba(250, 239, 214, 0.7)),
-              url('https://cloud-o19rieg4g-hack-club-bot.vercel.app/0group_495__1_.svg')
-            `,
-        backgroundSize: 'cover',
-        backgroundRepeat: 'no-repeat',
-        position: 'relative',
-        minHeight: '100vh'
-      }}
-    >
-      <Box
-        ref={spotlightRef}
-        sx={{
-          position: 'absolute',
-          zIndex: 2,
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          bg: '#FAEFD6',
-          pointerEvents: 'none'
-        }}
-      />
+    <div>
       <div sx={{ zIndex: 5, position: 'relative' }}>
         <img
           src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
@@ -132,26 +90,27 @@ const ProjectShowPage = ({ projectID }) => {
         status == 'error' && <ErrorMessage />
       } */}
 
-      {/* {
+          {/* {
         status == 'success' &&  */}
-        <ProjectView
-          key={project.id}
-          id={project.id}
-          title={project.title}
-          desc={project.desc}
-          slack={project.slackLink}
-          codeLink={project.codeLink}
-          playLink={project.playLink}
-          images={project.images}
-          githubProf={project.githubProf}
-          user={project.user}
-          color={project.color}
-        />
-      {/* } */}
+          <ProjectView
+            key={project.id}
+            id={project.id}
+            title={project.title}
+            desc={project.desc}
+            slack={project.slackLink}
+            codeLink={project.codeLink}
+            playLink={project.playLink}
+            images={project.images}
+            githubProf={project.githubProf}
+            user={project.user}
+            color={project.color}
+            textColor={project.textColor}
+          />
+          {/* } */}
         </div>
       </div>
       <style>{styled}</style>
-    </Box>
+    </div>
   )
 }