style: projects menu

Signed-off-by: Karthik Ayangar <[email protected]>
mdgspace · Jan 20, 2024 · a2d34b4 · a2d34b4
1 parent 5c6cdd9
commit a2d34b4
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/src/features/workspace/components/projectCard/index.scss b/src/features/workspace/components/projectCard/index.scss
@@ -1,4 +1,5 @@
 .projectcard {
+  position: relative;
   border-radius: 1em;
   background-color: var(--home-page-card-bg);
   max-width: 554px;
@@ -98,3 +99,50 @@
   border: 1px solid white;
   border-radius: 50%;
 }
+
+.hide {
+  display: none;
+}
+.workspace-popup {
+  position: absolute;
+  right: 50px;
+  top: 50px;
+  box-sizing: border-box;
+
+  /* Auto layout */
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 18px 33px;
+  gap: 10px;
+
+  position: absolute;
+  width: 111px;
+  height: 110px;
+
+  background: rgba(26, 26, 57, 0.5);
+  border: 1px solid #402aa4;
+  backdrop-filter: blur(2px);
+  /* Note: backdrop-filter has minimal browser support */
+
+  border-radius: 12px;
+}
+
+.workspace-popup-btn {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+.workspace-popup-btn img {
+  color: white;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/features/workspace/components/projectCard/index.tsx b/src/features/workspace/components/projectCard/index.tsx
@@ -32,6 +32,7 @@ const ProjectCard: React.FC<Props> = ({
   githubData,
 }) => {
   const token = localStorage.getItem('token');
+  const [showPopUp, setShowPopUp] = useState(false);
   const userContext = useContext(UserContext);
   const [pin, setPin] = useState<boolean>(status.archeive);
   const [archive, setArchive] = useState<boolean>(status.bookmark);
@@ -137,13 +138,31 @@ const ProjectCard: React.FC<Props> = ({
     <div className='projectcard'>
       <h1>{projectName}</h1>
       <p>{project_data ? project_data.description : <></>}</p>
+
       {(userContext?.userOrgs?.userOrgs[orgName].role === 'admin' ||
         userContext?.userOrgs?.userOrgs[orgName].role === 'manager') && (
-        <div>
-          <button onClick={PinHandler}>Pin</button>
-          <button onClick={ArchiveHandler}>Archive</button>
-          <button onClick={DeleteHandler}>Delete</button>
-        </div>
+        <>
+          <div
+            className='workspace-popup-btn'
+            onClick={() => setShowPopUp(showPopUp ? false : true)}
+          >
+            <img
+              src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51T-25-1BBmDvoLRWJYNK3P6AENpJBslAp9n_QDXRnA&usqp=CAU&ec=48665701'
+              alt=''
+            />
+          </div>
+          <div className={showPopUp ? 'workspace-popup' : 'hide'}>
+            <div className='pin' onClick={PinHandler}>
+              {pin ? 'Unpin' : 'Pin'}
+            </div>
+            <div className='archive' onClick={ArchiveHandler}>
+              {archive ? 'Unarchive' : 'Archive'}
+            </div>
+            <div className='delete' onClick={DeleteHandler}>
+              Delete
+            </div>
+          </div>
+        </>
       )}
       <div className='projectcard-status'>
         <div>