From 44c39a4d2c3f86695276db5851ed2be9b2ce4d30 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Tue, 5 Mar 2024 10:30:33 -0500
Subject: [PATCH] Projects Page Finer Details (#4988)

* chaneg card size

* fx grid

* fix grid

* fix gradient

* subtitle color

* match designs

* move new project buttons

* fix dropdown alignment

* dropdown triggers are grey when menu is open

* adressing comments

* react useCallback
---
 .../components/projectActionContextMenu.tsx   |  8 +--
 .../components/sortProjectsContextMenu.tsx    |  8 +--
 utopia-remix/app/routes/projects.tsx          | 70 +++++++++----------
 .../app/styles/newProjectButton.css.ts        |  4 +-
 utopia-remix/app/styles/projects.css.ts       | 29 ++++++++
 .../app/styles/sidebarComponents.css.ts       |  4 +-
 6 files changed, 70 insertions(+), 53 deletions(-)
 create mode 100644 utopia-remix/app/styles/projects.css.ts

diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
index 1635f7608358..f11a73569960 100644
--- a/utopia-remix/app/components/projectActionContextMenu.tsx
+++ b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -142,13 +142,7 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
 
   return (
     <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        className={contextMenuDropdown()}
-        style={{
-          right: 75,
-        }}
-        sideOffset={5}
-      >
+      <DropdownMenu.Content className={contextMenuDropdown()} align='end' sideOffset={5}>
         {menuEntries.map((entry, index) => {
           if (entry === 'separator') {
             return (
diff --git a/utopia-remix/app/components/sortProjectsContextMenu.tsx b/utopia-remix/app/components/sortProjectsContextMenu.tsx
index 457ebdaedeb3..0496d3eecae2 100644
--- a/utopia-remix/app/components/sortProjectsContextMenu.tsx
+++ b/utopia-remix/app/components/sortProjectsContextMenu.tsx
@@ -13,13 +13,7 @@ export const SortingContextMenu = React.memo(() => {
 
   return (
     <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        className={contextMenuDropdown()}
-        style={{
-          right: 60,
-        }}
-        sideOffset={5}
-      >
+      <DropdownMenu.Content className={contextMenuDropdown()} sideOffset={5} align='end'>
         <DropdownMenu.Label style={{ color: 'grey', padding: 5 }}>Sort by</DropdownMenu.Label>
         <DropdownMenu.CheckboxItem
           className={contextMenuItem()}
diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx
index 7f9cab308fc6..b9184cc7d757 100644
--- a/utopia-remix/app/routes/projects.tsx
+++ b/utopia-remix/app/routes/projects.tsx
@@ -25,6 +25,7 @@ import { OperationWithKey, useProjectsStore } from '../store'
 import { button } from '../styles/button.css'
 import { newProjectButton } from '../styles/newProjectButton.css'
 import { projectCategoryButton, userName } from '../styles/sidebarComponents.css'
+import { projectCards, projectRows } from '../styles/projects.css'
 import { sprinkles } from '../styles/sprinkles.css'
 import {
   Collaborator,
@@ -249,7 +250,6 @@ const Sidebar = React.memo(({ user }: { user: UserDetails }) => {
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
-              padding: '0 14px',
             }}
             placeholder='Search…'
           />
@@ -304,7 +304,7 @@ const TopActionBar = React.memo(() => {
       id: 'createProject',
       title: '+ Blank Project',
       onClick: () => window.open(projectEditorLink(null), '_blank'),
-      color: 'orange',
+      color: 'primary',
     },
     // {
     //   title: '+ Project On GitHub',
@@ -334,6 +334,7 @@ const TopActionBar = React.memo(() => {
         height: 60,
         flex: 0,
         display: 'flex',
+        justifyContent: 'flex-end',
         flexDirection: 'row',
         gap: 15,
       }}
@@ -373,6 +374,11 @@ const ProjectsHeader = React.memo(({ projects }: { projects: ProjectWithoutConte
     }
   }
 
+  const [sortMenuOpen, setSortMenuOpen] = React.useState(false)
+  const handleSortMenuOpenChange = React.useCallback(() => {
+    setSortMenuOpen((prevSortMenuOpen) => !prevSortMenuOpen)
+  }, [])
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
       <div
@@ -434,13 +440,14 @@ const ProjectsHeader = React.memo(({ projects }: { projects: ProjectWithoutConte
         <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
           {when(
             projects.length > 1,
-            <DropdownMenuRoot>
+            <DropdownMenuRoot onOpenChange={handleSortMenuOpenChange}>
               <DropdownMenuTrigger asChild>
                 <div
                   className={button()}
                   style={{
                     justifyContent: 'flex-end',
                     gap: 10,
+                    background: sortMenuOpen ? '#a4a4a430' : 'inherit',
                   }}
                 >
                   <div>{convertToTitleCase(sortCriteria)} </div>
@@ -544,14 +551,7 @@ const Projects = React.memo(
       <>
         {when(
           projects.length > 0 && !gridView,
-          <div
-            style={{
-              flexGrow: 1,
-              overflowY: 'scroll',
-              scrollbarColor: 'lightgrey transparent',
-              gap: 10,
-            }}
-          >
+          <div className={projectRows()}>
             {projects.map((project) => (
               <ProjectRow
                 key={project.proj_id}
@@ -565,18 +565,7 @@ const Projects = React.memo(
         )}
         {when(
           projects.length > 0 && gridView,
-          <div
-            style={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              alignContent: 'flex-start',
-              gap: MarginSize,
-              flexGrow: 1,
-              flexDirection: 'row',
-              overflowY: 'scroll',
-              scrollbarColor: 'lightgrey transparent',
-            }}
-          >
+          <div className={projectCards()}>
             {projects.map((project) => (
               <ProjectCard
                 key={project.proj_id}
@@ -643,11 +632,10 @@ const ProjectCard = React.memo(
     return (
       <div
         style={{
-          height: 200,
-          width: 300,
+          height: 220,
           display: 'flex',
           flexDirection: 'column',
-          gap: 5,
+          gap: 10,
           filter: activeOperations.length > 0 ? 'grayscale(1)' : undefined,
         }}
       >
@@ -656,9 +644,9 @@ const ProjectCard = React.memo(
             border: selected ? '2px solid #0075F9' : '2px solid transparent',
             borderRadius: 10,
             overflow: 'hidden',
-            height: 180,
-            width: '100%',
-            background: 'linear-gradient(rgba(77, 255, 223, 0.4), rgba(255,250,220,.8))',
+            height: 170,
+            width: 280,
+            background: 'linear-gradient(#a4a4a4, #a4a4a410)',
             backgroundAttachment: 'local',
             backgroundRepeat: 'no-repeat',
             position: 'relative',
@@ -723,9 +711,9 @@ const ProjectCard = React.memo(
             alignItems: 'center',
           }}
         >
-          <div style={{ display: 'flex', flexDirection: 'column', padding: 10, gap: 5, flex: 1 }}>
-            <div style={{ fontWeight: 600 }}>{projectTitle}</div>
-            <div>{moment(project.modified_at).fromNow()}</div>
+          <div style={{ display: 'flex', flexDirection: 'column', padding: 10, gap: 10, flex: 1 }}>
+            <div style={{ fontWeight: 500 }}>{project.title}</div>
+            <div style={{ opacity: 0.5 }}>{moment(project.modified_at).fromNow()}</div>
           </div>
           <ProjectCardActions project={project} />
         </div>
@@ -783,7 +771,7 @@ const ProjectRow = React.memo(
                 overflow: 'hidden',
                 height: 40,
                 width: 70,
-                background: 'linear-gradient(rgba(77, 255, 223, 0.4), rgba(255,250,220,.8))',
+                background: 'linear-gradient(#a4a4a4, #a4a4a410)',
                 backgroundAttachment: 'local',
                 backgroundRepeat: 'no-repeat',
                 position: 'relative',
@@ -794,12 +782,12 @@ const ProjectRow = React.memo(
                 flexGrow: 1,
                 minWidth: 180,
                 maxWidth: 380,
-                fontWeight: 600,
+                fontWeight: 500,
               }}
             >
               {project.title}
             </div>
-            <div style={{ width: 220 }}>{moment(project.modified_at).fromNow()}</div>
+            <div style={{ width: 220, opacity: 0.5 }}>{moment(project.modified_at).fromNow()}</div>
             <div
               style={{
                 maxWidth: 480,
@@ -852,11 +840,19 @@ const ProjectRow = React.memo(
 ProjectRow.displayName = 'ProjectRow'
 
 const ProjectCardActions = React.memo(({ project }: { project: ProjectWithoutContent }) => {
+  const [sortMenuOpen, setSortMenuOpen] = React.useState(false)
+  const handleSortMenuOpenChange = React.useCallback(() => {
+    setSortMenuOpen((prevSortMenuOpen) => !prevSortMenuOpen)
+  }, [])
+
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-      <DropdownMenuRoot>
+      <DropdownMenuRoot onOpenChange={handleSortMenuOpenChange}>
         <DropdownMenuTrigger asChild>
-          <DotsHorizontalIcon className={button()} />
+          <DotsHorizontalIcon
+            className={button()}
+            style={{ background: sortMenuOpen ? '#a4a4a430' : 'inherit' }}
+          />
         </DropdownMenuTrigger>
         <ProjectContextMenu project={project} />
       </DropdownMenuRoot>
diff --git a/utopia-remix/app/styles/newProjectButton.css.ts b/utopia-remix/app/styles/newProjectButton.css.ts
index 69e13dbb0f1b..f7d7c5f8b87d 100644
--- a/utopia-remix/app/styles/newProjectButton.css.ts
+++ b/utopia-remix/app/styles/newProjectButton.css.ts
@@ -1,5 +1,5 @@
 import { recipe } from '@vanilla-extract/recipes'
-import { sprinkles } from './sprinkles.css'
+import { sprinkles, colors } from './sprinkles.css'
 
 export const newProjectButton = recipe({
   base: [
@@ -14,6 +14,7 @@ export const newProjectButton = recipe({
       alignItems: 'center',
       gap: 10,
       fontSize: 16,
+      fontWeight: 500,
       color: 'white',
       height: 40,
       opacity: 1,
@@ -30,6 +31,7 @@ export const newProjectButton = recipe({
       purple: { background: '#9643FF' },
       blue: { background: '#3992FF' },
       green: { background: '#96BF48' },
+      primary: { background: colors.primary}
     },
 
     size: {
diff --git a/utopia-remix/app/styles/projects.css.ts b/utopia-remix/app/styles/projects.css.ts
new file mode 100644
index 000000000000..4e2fe55d6305
--- /dev/null
+++ b/utopia-remix/app/styles/projects.css.ts
@@ -0,0 +1,29 @@
+import { recipe } from '@vanilla-extract/recipes'
+import { colors, sprinkles } from './sprinkles.css'
+
+export const projectCards = recipe({
+  base: [
+    {
+      flexGrow: 1,
+      overflow: 'hidden scroll',
+      scrollbarColor: 'lightgrey transparent',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, 280px)',
+      justifyContent: 'space-between',
+      alignContent: 'flex-start',
+      gridGap: '60px 40px',
+      paddingRight: 30,
+    },
+  ],
+})
+
+export const projectRows = recipe({
+  base: [
+    {
+      flexGrow: 1,
+      overflowY: 'scroll',
+      scrollbarColor: 'lightgrey transparent',
+      gap: 10,
+    },
+  ],
+})
diff --git a/utopia-remix/app/styles/sidebarComponents.css.ts b/utopia-remix/app/styles/sidebarComponents.css.ts
index 8d5ce110017d..975ca215c04f 100644
--- a/utopia-remix/app/styles/sidebarComponents.css.ts
+++ b/utopia-remix/app/styles/sidebarComponents.css.ts
@@ -12,8 +12,10 @@ export const projectCategoryButton = recipe({
       display: 'flex',
       alignItems: 'center',
       gap: 10,
-      padding: '0 14px',
+      padding: '3px 14px',
       height: 30,
+      fontWeight: 600,
+      fontSize: '12px',
       color: 'gray', //fix me to be theme responsive
     },
   ],