New icons and stuff

src/app/_components/BranchRow.tsx

@@ -1,52 +1,62 @@
+function CreateButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/PlusIcon.svg" />
+    </button>
+  );
+}
+
+function DeleteButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/DeleteIcon.svg" />
+    </button>
+  );
+}
+
+function PauseButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/PauseIcon.svg" />
+    </button>
+  );
+}
+
+function PlayButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/PlayIcon.svg" />
+    </button>
+  );
+}
+
 export default function BranchRow(props: {
+  creator: string;
   name: string;
   status: string;
-  action: string;
-  actionLabel: string;
 }) {
+  const actionLabel =
+    status === "No DB" ? "Create Database" : "Connect to Database";
+
   return (
-    <div className="flex justify-between items-center py-3 px-12 shadow-inner">
+    <div className="flex justify-between items-center py-3 pl-12 pr-8 shadow-inner">
       <span>
-        {props.name} / {props.status}
+        {props.creator} / {props.name}
       </span>
       <span>
         {props.status} /{" "}
         <a href="#" className="text-blue-500 hover:underline">
-          {props.actionLabel}
+          {actionLabel}
         </a>
       </span>
-      <button>
-        <svg
-          className="w-6 h-6 text-gray-500"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d={`M${props.action}`}
-          />
-        </svg>
-      </button>
-      <button>
-        <svg
-          className="w-6 h-6 text-red-500"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
+      <div className=" flex flex-row gap-4">
+        {props.status === "No DB" && <CreateButton />}
+        {props.status === "Stopped" && <PlayButton />}
+        {props.status === "Running" && <PauseButton />}
+        {(props.status === "Running" || props.status === "Stopped") && (
+          <DeleteButton />
+        )}
+      </div>
     </div>
   );
 }

src/app/_components/Button.tsx

@@ -4,9 +4,15 @@ export default function Button(props: {
   href: string;
   text: string;
   yellow?: boolean;
+  newTab?: boolean;
 }) {
   return (
-    <Link href={props.href} passHref>
+    <Link
+      rel={props.newTab ? "noopener noreferrer" : ""}
+      target={props.newTab ? "_blank" : ""}
+      href={props.href}
+      passHref
+    >
       <button
         className={`${props.yellow ? "bg-generate-sw hover:bg-generate-sw-dark" : "bg-white hover:bg-project-row"} text-black py-3 px-12`}
       >

src/app/_components/Dashboard.tsx

@@ -7,7 +7,7 @@ const Dashboard: React.FC = () => {
     <>
       <Navbar />
       <div className="min-h-screen min-x-screen">
-        <div className="px-24 py-12 min-x-screen min-h-screen bg-gradient-to-b from-generate-dark to-black from-33 text-white">
+        <div className="px-4 sm:px-12 md:px-24 lg:px-48 py-12 min-x-screen min-h-screen bg-gradient-to-b from-generate-dark to-black from-33 text-white">
           <DashboardItems />
         </div>
       </div>

src/app/_components/DashboardContents.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { api } from "~/trpc/react";
 import { useState } from "react";
 import ProjectList from "./ProjectList";
 import SearchInput from "./SearchInput";
@@ -12,6 +13,8 @@ export default function DashboardItems() {
     setOpenProject(openProject === index ? null : index);
   };
 
+  //const deleteProjectMutation = api.database.create.useMutation()
+
   const projects = [
     {
       projectName: "natesawant",
@@ -20,10 +23,9 @@ export default function DashboardItems() {
       databasesCount: 0,
       branches: [
         {
+          creator: "natesawant",
           name: "main",
           status: "Running",
-          action: "M10 9v6m4-6v6",
-          actionLabel: "Connect to Database",
         },
       ],
       creator: "Nate Sawant",
@@ -36,22 +38,19 @@ export default function DashboardItems() {
       databasesCount: 2,
       branches: [
         {
+          creator: "natesawant",
           name: "main",
           status: "Running",
-          action: "M10 9v6m4-6v6",
-          actionLabel: "Connect to Database",
         },
         {
+          creator: "natesawant",
           name: "stopped-example",
           status: "Stopped",
-          action: "M14.752 11.168l-6.048 3.684",
-          actionLabel: "Connect to Database",
         },
         {
+          creator: "natesawant",
           name: "no-database-example",
           status: "No DB",
-          action: "M12 4v16m8-8H4",
-          actionLabel: "Create Database",
         },
       ],
       creator: "Nate Sawant",
@@ -60,7 +59,7 @@ export default function DashboardItems() {
   ];
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-8">
       <SearchInput searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
       <ProjectList
         projects={projects}

src/app/_components/NavBar.tsx

@@ -17,7 +17,7 @@ const Navbar: React.FC = () => {
           <h1 className="text-xl font-bold">DevDB</h1>
         </div>
       </Link>
-      <div className="flex gap-6">
+      <div className="flex gap-2 sm:gap-6">
         <Link href="/">
           <button className="hover:underline font-bold">Home</button>
         </Link>

src/app/_components/ProjectCard.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import BranchRow from "./BranchRow";
+import Link from "next/link";
 
 interface Branch {
+  creator: string;
   name: string;
   status: string;
-  action: string;
-  actionLabel: string;
 }
 
 interface ProjectCardProps {
@@ -32,48 +32,37 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   onToggle,
 }) => {
   return (
-    <div className="bg-white text-black shadow-md mb-4">
+    <div className="bg-white text-black shadow-md">
       <div
-        className={`p-4 flex justify-between items-center drop-shadow ${isOpen ? " bg-generate-sw" : ""}`}
-        onClick={onToggle}
+        className={` pr-8 py-3 flex flex-row justify-between ${isOpen ? "bg-generate-sw" : "bg-white"}`}
       >
-        <div className="flex items-center">
-          <button className="mr-2">
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d={`M${isOpen ? "5 15l7-7 7 7" : "19 9l-7 7-7-7"}`}
-              />
-            </svg>
+        <div className=" flex flex-row items-center">
+          <button className=" px-12" onClick={onToggle}>
+            <img src="./images/ChevronIcon.svg" className=" w-8" />
           </button>
-          <span className=" select-none">
-            {projectName} / {route} - {branchesCount} branches -{" "}
-            {databasesCount} databases
+          <span>
+            <Link
+              className=" underline"
+              rel="noopener noreferrer"
+              target="_blank"
+              href={"https://github.com/GenerateNU/"}
+            >
+              {projectName}
+            </Link>{" "}
+            /{" "}
+            <Link
+              className=" underline"
+              rel="noopener noreferrer"
+              target="_blank"
+              href={"https://github.com/GenerateNU/devdb"}
+            >
+              {route}
+            </Link>{" "}
+            - {branchesCount} branches - {databasesCount} databases
           </span>
         </div>
-        <button>
-          <svg
-            className="w-6 h-6 text-red-500"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
+        <button className=" px-4 ">
+          <img src="./images/DeleteIcon.svg" />
         </button>
       </div>
       {isOpen && (
@@ -82,14 +71,13 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
             {branches.map((branch, index) => (
               <BranchRow
                 key={index}
+                creator={branch.creator}
                 name={branch.name}
                 status={branch.status}
-                action={branch.action}
-                actionLabel={branch.actionLabel}
               />
             ))}
           </div>
-          <div className="flex flex-col gap-3 py-3 px-12 shadow-inner">
+          <div className="flex flex-col gap-3 py-3 px-12 shadow-inner bg-white">
             <p>Created by: {creator}</p>
             <p>Created on: {createdOn}</p>
           </div>

src/app/_components/ProjectList.tsx

@@ -10,10 +10,9 @@ interface ProjectListProps {
     branchesCount: number;
     databasesCount: number;
     branches: Array<{
+      creator: string;
       name: string;
       status: string;
-      action: string;
-      actionLabel: string;
     }>;
     creator: string;
     createdOn: string;
@@ -28,7 +27,7 @@ const ProjectList: React.FC<ProjectListProps> = ({
   handleToggle,
 }) => {
   return (
-    <div className="w-full">
+    <div className="w-full flex flex-col gap-8">
       {projects.map((project, index) => (
         <ProjectCard
           key={index}

src/app/_components/SearchInput.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import Image from "next/image";
-import searchIcon from "../../../public/images/Search Icon.svg";
+import searchIcon from "../../../public/images/SearchIcon.svg";
 
 interface SearchInputProps {
   searchTerm: string;
@@ -14,7 +14,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
   setSearchTerm,
 }) => {
   return (
-    <div className="flex flex-row bg-white text-gray-700 pl-12 p-2 gap-4">
+    <div className="flex flex-row w-fit bg-white text-gray-700 pl-12 py-2 gap-8">
       <Image
         src={searchIcon as string}
         alt="Search Icon"
@@ -26,7 +26,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
         placeholder="Search projects or databases"
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
-        className="p-2 w-full text-black placeholder:text-input-text"
+        className="p-2 min-w-[324px] w-full text-black placeholder:text-input-text outline-none"
       />
     </div>
   );