Finished fixing nav, tweaked KeyValue edit btn

app/web/config/tailwind.config.js

@@ -22,6 +22,7 @@ module.exports = {
           800: '#1A1A1D',
           750: '#222222',
           760: '#232532',
+          710: '#2B303C', // TODO: Use HSL so I stop adding grays to fix the warm/cool problem
           700: '#2A3038',
           600: '#3B3E4B',
           550: '#63636A',

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

@@ -11,6 +11,7 @@ import ProfileSlashLogin from 'src/components/ProfileSlashLogin'
 import Gravatar from 'src/components/Gravatar/Gravatar'
 import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle'
 import CaptureButton from 'src/components/CaptureButton/CaptureButton'
+import { ReactNode } from 'react'
 
 const TopButton = ({
   onClick,
@@ -44,6 +45,7 @@ interface IdeHeaderProps {
   projectOwnerId?: string
   projectOwnerImage?: string
   projectId?: string
+  children?: ReactNode
 }
 
 const IdeHeader = ({
@@ -53,6 +55,7 @@ const IdeHeader = ({
   projectOwnerImage,
   projectId,
   projectOwnerId,
+  children,
 }: IdeHeaderProps) => {
   const { currentUser } = useAuth()
   const { project } = useIdeContext()
@@ -92,87 +95,16 @@ const IdeHeader = ({
         <div />
       )}
       <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
-        {canEdit && !projectTitle && (
+        { (!children)
-          <CaptureButton
+          ? <DefaultTopButtons
+            project={project}
+            projectTitle={projectTitle}
+            _projectOwner={_projectOwner}
+            handleRender={handleRender}
             canEdit={canEdit}
-            projectTitle={project?.title}
-            userName={project?.user?.userName}
-            shouldUpdateImage={!project?.mainImage}
-            TheButton={({ onClick }) => (
-              <TopButton
-                onClick={onClick}
-                name="Save Project Image"
-                className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-              >
-                <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
-              </TopButton>
-            )}
           />
-        )}
+          : children 
-        {!projectTitle && (
+        }
-          <TopButton
-            className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-            onClick={handleRender}
-            name={canEdit ? 'Save' : 'Preview'}
-          >
-            <Svg
-              name={canEdit ? 'floppy-disk' : 'photograph'}
-              className="w-6 h-6 text-ch-pink-500"
-            />
-          </TopButton>
-        )}
-        {projectTitle && (
-          <TopButton
-            className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-            onClick={() =>
-              navigate(routes.ide({ userName: _projectOwner, projectTitle }))
-            }
-            name="Editor"
-          >
-            <Svg name="terminal" className="w-6 h-6 text-ch-pink-500" />
-          </TopButton>
-        )}
-
-        <Popover className="relative outline-none w-full h-full">
-          {({ open }) => {
-            return (
-              <>
-                <Popover.Button className="h-full w-full outline-none">
-                  <TopButton
-                    Tag="div"
-                    name="Share"
-                    className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-                  >
-                    <Svg
-                      name="share"
-                      className="w-6 h-6 text-ch-purple-500 mt-1"
-                    />
-                  </TopButton>
-                </Popover.Button>
-                {open && (
-                  <Popover.Panel className="absolute z-10 mt-4 right-0">
-                    <Tabs
-                      className="bg-ch-purple-gray-200 rounded-md shadow-md overflow-hidden text-gray-700"
-                      selectedTabClassName="bg-ch-gray-700 text-white"
-                    >
-                      <TabPanel>
-                        <FullScriptEncoding />
-                      </TabPanel>
-                      <TabPanel>
-                        <ExternalScript />
-                      </TabPanel>
-
-                      <TabList className="flex whitespace-nowrap text-gray-700 border-t border-gray-700">
-                        <Tab className="p-3 px-5">encoded script</Tab>
-                        <Tab className="p-3 px-5">external script</Tab>
-                      </TabList>
-                    </Tabs>
-                  </Popover.Panel>
-                )}
-              </>
-            )
-          }}
-        </Popover>
         {/* <TopButton>Fork</TopButton> */}
         <div className="h-8 w-8">
           <NavPlusButton />
@@ -184,3 +116,89 @@ const IdeHeader = ({
 }
 
 export default IdeHeader
+
+
+function DefaultTopButtons({ project, projectTitle, _projectOwner, handleRender, canEdit }) {
+  return (<>
+    {canEdit && !projectTitle && (
+      <CaptureButton
+        canEdit={canEdit}
+        projectTitle={project?.title}
+        userName={project?.user?.userName}
+        shouldUpdateImage={!project?.mainImage}
+        TheButton={({ onClick }) => (
+          <TopButton
+            onClick={onClick}
+            name="Save Project Image"
+            className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+          >
+            <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
+          </TopButton>
+        )}
+      />
+    )}
+    {!projectTitle && (
+      <TopButton
+        className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+        onClick={handleRender}
+        name={canEdit ? 'Save' : 'Preview'}
+      >
+        <Svg
+          name={canEdit ? 'floppy-disk' : 'photograph'}
+          className="w-6 h-6 text-ch-pink-500"
+        />
+      </TopButton>
+    )}
+    {projectTitle && (
+      <TopButton
+        className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+        onClick={() =>
+          navigate(routes.ide({ userName: _projectOwner, projectTitle }))
+        }
+        name="Editor"
+      >
+        <Svg name="terminal" className="w-6 h-6 text-ch-pink-500" />
+      </TopButton>
+    )}
+    <Popover className="relative outline-none w-full h-full">
+      {({ open }) => {
+        return (
+          <>
+            <Popover.Button className="h-full w-full outline-none">
+              <TopButton
+                Tag="div"
+                name="Share"
+                className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+              >
+                <Svg
+                  name="share"
+                  className="w-6 h-6 text-ch-purple-500 mt-1"
+                />
+              </TopButton>
+            </Popover.Button>
+            {open && (
+              <Popover.Panel className="absolute z-10 mt-4 right-0">
+                <Tabs
+                  className="bg-ch-purple-gray-200 rounded-md shadow-md overflow-hidden text-gray-700"
+                  selectedTabClassName="bg-ch-gray-700 text-white"
+                >
+                  <TabPanel>
+                    <FullScriptEncoding />
+                  </TabPanel>
+                  <TabPanel>
+                    <ExternalScript />
+                  </TabPanel>
+
+                  <TabList className="flex whitespace-nowrap text-gray-700 border-t border-gray-700">
+                    <Tab className="p-3 px-5">encoded script</Tab>
+                    <Tab className="p-3 px-5">external script</Tab>
+                  </TabList>
+                </Tabs>
+              </Popover.Panel>
+            )}
+          </>
+        )
+      }}
+    </Popover>
+  </>)
+}

app/web/src/components/ImageUploader/ImageUploader.js

@@ -11,13 +11,13 @@ import Svg from 'src/components/Svg'
 const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
 const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
 
-export function ImageFallback({ width = 100, cloudinaryId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
+export function ImageFallback({ width = 100, imageId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
   return (
   <div className="relative overflow-hidden w-full h-full">
     <CloudinaryImage
       className={"object-cover w-full h-full shadow overflow-hidden " + className } 
       cloudName="irevdev"
-      publicId={cloudinaryId}
+      publicId={imageId}
       width={width}
       crop="scale"
     />
@@ -78,20 +78,19 @@ export default function ImageUploader({
       }
       style={{ paddingBottom: `${(1 / aspectRatio) * 100}%` }}
     >
-      <div className="absolute w-full h-full" {...getRootProps()}>
+      <div className="absolute w-full h-full inset-0" {...getRootProps()}>
         {cloudinaryId && isEditable && (
-          <button className="absolute z-10 bg-indigo-900 opacity-75 bottom-0 right-0 flex items-center p-1 mb-6 mr-2 rounded-lg">
+          <button className="w-full py-1 absolute z-10 bg-ch-blue-650 bg-opacity-50 hover:bg-opacity-80 bottom-0 right-0 left-0 flex items-center justify-center text-ch-gray-300">
-            <span className="text-gray-100 pr-2">Update</span>
+            <span className="font-fira-code text-sm leading-4">Update</span>
             <Svg
-              name="pencil"
+              name="pencil-solid"
-              strokeWidth={2}
+              className=" h-4 w-4 ml-4 mb-2"
-              className=" text-gray-100 h-6 w-6"
             />
           </button>
         )}
         {isEditable && <input {...getInputProps()} />}
         {(cloudinaryId || !isEditable) && (
-          <ImageFallback cloudinaryId={cloudinaryId} width={width} />
+          <ImageFallback imageId={cloudinaryId} width={width} />
         )}
         {!cloudinaryId && <button className="absolute inset-0"></button>}
         {!cloudinaryId && isEditable && (

app/web/src/components/KeyValue/KeyValue.tsx

@@ -25,17 +25,17 @@ const KeyValue = ({
     return (
       <div className={"flex flex-col " + className}>
         <div className={"text-ch-blue-400 font-fira-code flex items-center leading-4 text-sm whitespace-nowrap " + (bottom ? "order-2" : "")}>
-          {keyName}
+          <span className={isEditable ? "text-ch-blue-300" : ""}>{keyName}</span>
           {canEdit &&
             (isEditable ? (
               <button
-                className="font-fira-sans items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
+                className="font-fira-sans text-ch-gray-300 items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-blue-500 bg-opacity-50 hover:bg-opacity-70 rounded-sm"
                 id="rename-button"
                 onClick={onEdit}
               >
                 <Svg
                   name="check"
-                  className="w-6 h-6 text-ch-purple-500"
+                  className="w-6 h-6"
                   strokeWidth={3}
                 />
                 <span>Update</span>

app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx

@@ -51,7 +51,7 @@ const ProfileSlashLogin = () => {
               <ImageFallback
                 width={80}
                 className="rounded-full object-cover"
-                imageUrl={user?.image}
+                imageId={user?.image}
               />
             )}
           </Popover.Button>
@@ -79,10 +79,10 @@ const ProfileSlashLogin = () => {
         <div>
           <a
             href="#"
-            className="text-indigo-200 font-semibold underline mr-2"
+            className="text-ch-gray-300 mr-2 px-4 py-2 border-2 border-ch-gray-400 rounded-full hover:bg-ch-gray-600"
             onClick={recordedLogin}
           >
-            Sign in/up
+            Sign In/Up
           </a>
         </div>
       )}

app/web/src/components/ProjectCard/ProjectCard.tsx

@@ -8,7 +8,7 @@ import { ImageFallback } from '../ImageUploader/ImageUploader'
 
 const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
   <li
-    className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
+    className="rounded p-1.5 bg-ch-gray-760 hover:bg-ch-gray-710 shadow-ch"
     key={`${user?.userName}--${title}`}
   >
     <Link
@@ -33,8 +33,8 @@ const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
       <div className="flex items-center mt-1">
         <div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
           <ImageFallback
-            imageUrl={user?.image}
+            imageId={user?.image} // http://res.cloudinary.com/irevdev/image/upload/c_scale,w_50/v1/CadHub/bc7smqwo9qqmrloyf9xr
-            width={50}
+            width={80}            // http://res.cloudinary.com/irevdev/image/upload/c_scale,w_300/v1/CadHub/bc7smqwo9qqmrloyf9xr
           />
         </div>
         <div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">

app/web/src/components/UserProfile/UserProfile.tsx

@@ -35,7 +35,7 @@ const UserProfile = ({
 
   return (
     <>
-      <div className="h-screen flex flex-col text-lg font-fira-sans">
+      <div className="md:h-screen flex flex-col text-lg font-fira-sans">
         <div className="flex">
           <Link
             to={routes.home()}
@@ -48,12 +48,15 @@ const UserProfile = ({
             projectOwner={user?.userName}
             projectOwnerImage={user?.image}
             projectOwnerId={user?.id}
-          />
+          >
+            
+            <span></span> 
+          </IdeHeader>
         </div>
         <div className="relative flex-grow h-full">
           <div className="grid md:grid-cols-profile-layout grid-flow-row-dense absolute inset-0">
             {/* Side panel */}
-            <section className="bg-ch-gray-760 font-fira-sans px-12 pt-12 overflow-y-auto ch-scrollbar">
+            <section className="bg-ch-gray-760 font-fira-sans p-12 md:overflow-y-auto ch-scrollbar">
               <div className="flex gap-6">
                 {!isEditable && (
                   <div className="w-28 flex-shrink-0">
@@ -98,8 +101,8 @@ const UserProfile = ({
               </div>
             </section>
             {/* Viewer */}
-            <div className="py-10 px-8 w-full min-h-md relative bg-ch-gray-800 overflow-auto ch-scrollbar">
+            <div className="py-10 px-8 w-full h-full relative bg-ch-gray-800 md:overflow-y-auto ch-scrollbar">
-              <h3 className="text-2xl text-ch-gray-500 mb-4">Projects</h3>
+              <h3 className="text-2xl text-ch-gray-500 mb-4 md:hidden">Projects</h3>
               <ProjectsOfUser userName={user?.userName} />
             </div>
           </div>

app/web/src/layouts/MainLayout/MainLayout.js

@@ -91,7 +91,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
     }
   }, [hash, client])
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className="min-h-screen flex flex-col ch-scrollbar">
       <header id="cadhub-main-header">
         <nav className="flex justify-between h-16 px-4 bg-ch-gray-900">
           <ul className="flex items-center">
@@ -140,7 +140,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                       <ImageFallback
                         width={80}
                         className="rounded-full object-cover"
-                        imageUrl={user?.image}
+                        imageId={user?.image}
                       />
                     )}
                   </Popover.Button>