From 3a84832da5e45489a72551daa79b9f0260527907 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 14:22:10 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20tooltip=20on?=
 =?UTF-8?q?=20hover=20projectcard=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/ProjectCard/ProjectCard.tsx      | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
index 1c91e51d..5a0ff9b5 100644
--- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
+++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
@@ -1,12 +1,18 @@
+import {
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from '@material-tailwind/react';
 import React, {
   ComponentPropsWithoutRef,
   MouseEvent,
   useCallback,
 } from 'react';
-import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme';
+import { useNavigate } from 'react-router-dom';
 import { Project } from 'gql-client';
+import { Avatar } from 'components/shared/Avatar';
 import { Button } from 'components/shared/Button';
-import { WavyBorder } from 'components/shared/WavyBorder';
 import {
   BranchIcon,
   ClockIcon,
@@ -14,16 +20,11 @@ import {
   HorizontalDotIcon,
   WarningDiamondIcon,
 } from 'components/shared/CustomIcon';
+import { Tooltip } from 'components/shared/Tooltip';
+import { WavyBorder } from 'components/shared/WavyBorder';
 import { relativeTimeMs } from 'utils/time';
-import { useNavigate } from 'react-router-dom';
-import { Avatar } from 'components/shared/Avatar';
 import { getInitials } from 'utils/geInitials';
-import {
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from '@material-tailwind/react';
+import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme';
 
 export interface ProjectCardProps
   extends ComponentPropsWithoutRef<'div'>,
@@ -72,7 +73,9 @@ export const ProjectCard = ({
         />
         {/* Title and website */}
         <div className={theme.content()}>
-          <p className={theme.title()}>{project.name}</p>
+          <Tooltip content={project.name}>
+            <p className={theme.title()}>{project.name}</p>
+          </Tooltip>
           <p className={theme.description()}>
             {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>

From cdb995205afbaff4377911c85580c48e3cc4c1e7 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 14:22:32 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=8E=A8=20style:=20truncate=20overflow?=
 =?UTF-8?q?=20text=20on=20projectCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/projects/ProjectCard/ProjectCard.theme.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts
index db662ebc..117a2cde 100644
--- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts
+++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts
@@ -9,16 +9,18 @@ export const projectCardTheme = tv({
       'flex',
       'flex-col',
       'group',
+      'cursor-pointer',
     ],
     upperContent: ['px-4', 'py-4', 'flex', 'items-start', 'gap-3', 'relative'],
-    content: ['flex', 'flex-col', 'gap-1', 'flex-1'],
+    content: ['flex', 'flex-col', 'gap-1', 'flex-1', 'overflow-hidden'],
     title: [
       'text-sm',
       'font-medium',
       'text-elements-high-em',
       'tracking-[-0.006em]',
+      'truncate',
     ],
-    description: ['text-xs', 'text-elements-low-em'],
+    description: ['text-xs', 'text-elements-low-em', 'truncate'],
     icons: ['flex', 'items-center', 'gap-1'],
     lowerContent: [
       'transition-colors',

From 41033c5241dfc7bcc24aeb2f0364b01a0d8eec36 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 14:23:11 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20reskin=20"no?=
 =?UTF-8?q?=20repository=20found"=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/RepositoryList/RepositoryList.tsx  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx b/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
index 14af57e6..5b96ce37 100644
--- a/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
+++ b/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
@@ -3,17 +3,17 @@ import { Octokit } from 'octokit';
 import assert from 'assert';
 import { useDebounce } from 'usehooks-ts';
 
-import { Button, Typography } from '@material-tailwind/react';
-
 import { ProjectRepoCard } from 'components/projects/create/ProjectRepoCard';
 import { GitOrgDetails, GitRepositoryDetails } from 'types';
 import {
   ChevronGrabberHorizontal,
   GithubIcon,
+  RefreshIcon,
   SearchIcon,
 } from 'components/shared/CustomIcon';
 import { Select, SelectOption } from 'components/shared/Select';
 import { Input } from 'components/shared/Input';
+import { Button } from 'components/shared/Button';
 
 const DEFAULT_SEARCHED_REPO = '';
 const REPOS_PER_PAGE = 5;
@@ -160,18 +160,16 @@ export const RepositoryList = ({ octokit }: RepositoryListProps) => {
           ))}
         </div>
       ) : (
-        <div className="mt-4 p-6 flex items-center justify-center">
-          <div className="text-center">
-            <Typography placeholder={''}>No repository found</Typography>
-            <Button
-              className="rounded-full mt-5"
-              size="sm"
-              onClick={handleResetFilters}
-              placeholder={''}
-            >
-              ^ Reset filters
-            </Button>
-          </div>
+        <div className="mt-4 p-6 flex flex-col gap-4 items-center justify-center">
+          <p className="text-elements-high-em font-sans">No repository found</p>
+          <Button
+            variant="tertiary"
+            leftIcon={<RefreshIcon />}
+            size="sm"
+            onClick={handleResetFilters}
+          >
+            Reset filters
+          </Button>
         </div>
       )}
     </section>

From 095008867f7c2c4d8729c76f44c504126ee8d055 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 14:23:34 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=94=A7=20chore:=20show=20loading=20st?=
 =?UTF-8?q?ate=20on=20fetching=20repo=20activities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project/overview/Activity/Activity.tsx      | 17 ++++++++++++++---
 .../src/pages/org-slug/projects/id/Overview.tsx |  6 +++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
index 252d85a1..38b4d959 100644
--- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
@@ -4,10 +4,13 @@ import { GitCommitWithBranch } from 'types';
 import { Heading } from 'components/shared/Heading';
 import ActivityCard from './ActivityCard';
 import { Button } from 'components/shared/Button';
+import { LoadingIcon } from 'components/shared/CustomIcon';
 
 export const Activity = ({
+  isLoading,
   activities,
 }: {
+  isLoading: boolean;
   activities: GitCommitWithBranch[];
 }) => {
   return (
@@ -19,9 +22,17 @@ export const Activity = ({
         </Button>
       </div>
       <div className="mt-5">
-        {activities.map((activity, index) => {
-          return <ActivityCard activity={activity} key={`activity-${index}`} />;
-        })}
+        {isLoading ? (
+          <div className="grid place-content-center mt-10">
+            <LoadingIcon className="animate-spin" />
+          </div>
+        ) : (
+          activities.map((activity, index) => {
+            return (
+              <ActivityCard activity={activity} key={`activity-${index}`} />
+            );
+          })
+        )}
       </div>
     </div>
   );
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index c1337045..40975555 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -32,6 +32,7 @@ const OverviewTabPanel = () => {
   const { octokit } = useOctokit();
   const navigate = useNavigate();
   const [activities, setActivities] = useState<GitCommitWithBranch[]>([]);
+  const [fetchingActivities, setFetchingActivities] = useState(true);
   const [liveDomain, setLiveDomain] = useState<Domain>();
 
   const client = useGQLClient();
@@ -39,6 +40,7 @@ const OverviewTabPanel = () => {
   const { project } = useOutletContext<OutletContextType>();
 
   useEffect(() => {
+    setFetchingActivities(true);
     // TODO: Save repo commits in DB and avoid using GitHub API in frontend
     // TODO: Figure out fetching latest commits for all branches
     const fetchRepoActivity = async () => {
@@ -91,6 +93,8 @@ const OverviewTabPanel = () => {
 
         // TODO: Show warning in activity section on request error
         console.log(err.message);
+      } finally {
+        setFetchingActivities(false);
       }
     };
 
@@ -217,7 +221,7 @@ const OverviewTabPanel = () => {
           </p>
         )}
       </div>
-      <Activity activities={activities} />
+      <Activity activities={activities} isLoading={fetchingActivities} />
     </div>
   );
 };

From 667deb78fb7441bc6d71a9997a55239fc9f74ecd Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 14:23:59 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20style:=20tabs=20to=20use=20o?=
 =?UTF-8?q?verflow-auto=20instead=20of=20overflow-scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/shared/Tabs/Tabs.theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
index 783d242b..7fe66671 100644
--- a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
+++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
@@ -71,7 +71,7 @@ export const tabsTheme = tv({
       'gap-5',
       'border-b',
       'border-transparent',
-      'overflow-scroll',
+      'overflow-auto',
       // Horizontal – default
       'data-[orientation=horizontal]:border-border-interactive/10',
       // Vertical