chore: use Heading component

* ⚡️ feat: create heading component

* ♻️ refactor: move sidebar inside shared components

* ⚡️ feat: add polymorphic prop type for heading component

* 🎨 style: re-styling project list page

* ♻️ refactor: remove `.env`

* 🎨 style: set default font weight to normal for heading component

packages/frontend/.env

@@ -1,7 +0,0 @@
-REACT_APP_SERVER_URL = 'http://localhost:8000'
-
-REACT_APP_GITHUB_CLIENT_ID =
-REACT_APP_GITHUB_PWA_TEMPLATE_REPO =
-REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO =
-
-REACT_APP_WALLET_CONNECT_ID =

packages/frontend/src/components/projects/project/ActivityCard.tsx

@@ -1,45 +1,85 @@
 import React from 'react';
-
-import { Typography, IconButton, Avatar } from '@material-tailwind/react';
-
-import { relativeTimeISO } from '../../../utils/time';
+import { Link } from 'react-router-dom';
 import { GitCommitWithBranch } from '../../../types';
+import { Avatar } from 'components/shared/Avatar';
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleFilledIcon,
+  BranchIcon,
+} from 'components/shared/CustomIcon';
+import { formatDistance } from 'date-fns';
+import { getInitials } from 'utils/geInitials';
 
 interface ActivityCardProps {
   activity: GitCommitWithBranch;
 }
 
 const ActivityCard = ({ activity }: ActivityCardProps) => {
+  const formattedDate = formatDistance(
+    new Date(activity.commit.author!.date!),
+    new Date(),
+    {
+      addSuffix: true,
+    },
+  );
+
   return (
-    <div className="group flex gap-2 hover:bg-gray-200 rounded mt-1">
-      <div className="w-8">
-        <Avatar
-          src={activity.author?.avatar_url}
-          variant="rounded"
-          size="sm"
-          placeholder={''}
+    <>
+      <Link
+        to={activity.html_url}
+        target="_blank"
+        className="p-3 gap-2 focus-within:ring-2 focus-within:ring-controls-primary/40 focus:outline-none rounded-xl transition-colors hover:bg-base-bg-alternate flex group"
+      >
+        <div>
+          <Avatar
+            type="orange"
+            size={36}
+            initials={getInitials(activity.commit.author?.name ?? '')}
+            imageSrc={activity.author?.avatar_url}
+          />
+        </div>
+        <div className="flex-1">
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">
+            {activity.commit.author?.name}
+          </span>
+          <span className="text-elements-low-em text-xs flex items-center gap-2">
+            <span title={formattedDate} className="whitespace-nowrap">
+              {formattedDate}
+            </span>
+            {/* Dot */}
+            <span className="w-0.5 h-0.5 rounded-full bg-border-interactive-hovered"></span>
+            <span className="flex justify-center items-center gap-1.5">
+              <div>
+                <BranchIcon />
+              </div>
+              <span
+                title={activity.branch.name}
+                // pseudo to increase hover area
+                className="before:absolute relative before:h-5 before:-top-4 before:inset-x-0"
+              >
+                <span className="line-clamp-1">{activity.branch.name}</span>
+              </span>
+            </span>
+          </span>
+          <p
+            title={activity.commit.message}
+            className="text-sm line-clamp-4 tracking-tight text-elements-mid-em mt-2"
+          >
+            {activity.commit.message}
+          </p>
+        </div>
+        <Button
+          aria-label="Go to commit"
+          variant="unstyled"
+          tabIndex={-1}
+          className="p-0 text-elements-low-em group-focus-within:opacity-100 group-hover:opacity-100 opacity-0 transition-all"
+          leftIcon={<ArrowRightCircleFilledIcon className="w-5 h-5" />}
         />
-      </div>
-      <div className="grow">
-        <Typography placeholder={''}>{activity.commit.author?.name}</Typography>
-        <Typography variant="small" color="gray" placeholder={''}>
-          {relativeTimeISO(activity.commit.author!.date!)} ^{' '}
-          {activity.branch.name}
-        </Typography>
-        <Typography variant="small" color="gray" placeholder={''}>
-          {activity.commit.message}
-        </Typography>
-      </div>
-      <div className="mr-2 self-center hidden group-hover:block">
-        <IconButton
-          size="sm"
-          className="rounded-full bg-gray-600"
-          placeholder={''}
-        >
-          {'>'}
-        </IconButton>
-      </div>
-    </div>
+      </Link>
+      {/* Separator calc => 100% - 36px (avatar) - 12px (padding-left) - 8px (gap)
+       */}
+      <div className="pt-2 mb-2 ml-auto h-1 w-[calc(100%-36px-12px-8px)] border-b border-border-separator last:border-b-transparent"></div>
+    </>
   );
 };
 

packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ArrowRightCircleFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      {...props}
+      fill="none"
+      height="32"
+      viewBox="0 0 32 32"
+      width="32"
+    >
+      <path
+        clipRule="evenodd"
+        d="M29.3334 16C29.3334 8.63619 23.3638 2.66666 16 2.66666C8.63622 2.66666 2.66669 8.63619 2.66669 16C2.66669 23.3638 8.63622 29.3333 16 29.3333C23.3638 29.3333 29.3334 23.3638 29.3334 16ZM18.1144 17.3333L16.3905 19.0572C15.8698 19.5779 15.8698 20.4221 16.3905 20.9428C16.9112 21.4635 17.7555 21.4635 18.2762 20.9428L21.3334 17.8856C22.3748 16.8442 22.3748 15.1558 21.3334 14.1144L18.2762 11.0572C17.7555 10.5365 16.9112 10.5365 16.3905 11.0572C15.8698 11.5779 15.8698 12.4221 16.3905 12.9428L18.1144 14.6667H10.6667C9.93031 14.6667 9.33335 15.2636 9.33335 16C9.33335 16.7364 9.93031 17.3333 10.6667 17.3333H18.1144Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -32,3 +32,4 @@ export * from './GitHubLogo';
 export * from './ClockIcon';
 export * from './HorizontalDotIcon';
 export * from './WarningDiamondIcon';
+export * from './ArrowRightCircleFilledIcon';

packages/frontend/src/components/shared/Heading/Heading.theme.ts

@@ -0,0 +1,7 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const headingTheme = tv({
+  base: ['text-elements-high-em', 'font-display', 'font-normal'],
+});
+
+export type HeadingVariants = VariantProps<typeof headingTheme>;

packages/frontend/src/components/shared/Heading/Heading.tsx

@@ -0,0 +1,30 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { headingTheme, type HeadingVariants } from './Heading.theme';
+import { PolymorphicProps } from 'types/common';
+
+export type HeadingElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type HeadingProps<Element extends HeadingElementType> =
+  PropsWithChildren<PolymorphicProps<Element, HeadingVariants>>;
+
+export const Heading = <Element extends HeadingElementType>({
+  children,
+  as,
+  className,
+  ...props
+}: HeadingProps<Element>) => {
+  // Component is the element that will be rendered
+  const Component = as ?? 'h1';
+
+  return (
+    <Component
+      {...props}
+      className={headingTheme({
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+};

packages/frontend/src/components/shared/Heading/index.ts

@@ -0,0 +1 @@
+export * from './Heading';

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -5,8 +5,8 @@ import { Organization } from 'gql-client';
 import { Option } from '@material-tailwind/react';
 import { useDisconnect } from 'wagmi';
 
-import { useGQLClient } from '../context/GQLClientContext';
-import AsyncSelect from './shared/AsyncSelect';
+import { useGQLClient } from 'context/GQLClientContext';
+import AsyncSelect from 'components/shared/AsyncSelect';
 import {
   ChevronGrabberHorizontal,
   FolderIcon,
@@ -14,10 +14,11 @@ import {
   LifeBuoyIcon,
   QuestionMarkRoundIcon,
   SettingsSlidersIcon,
-} from './shared/CustomIcon';
+} from 'components/shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
+import { Heading } from 'components/shared/Heading';
 
-const Sidebar = () => {
+export const Sidebar = () => {
   const { orgSlug } = useParams();
   const navigate = useNavigate();
   const client = useGQLClient();
@@ -42,20 +43,20 @@ const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <div className="flex flex-col h-full p-4 pt-10">
-      <div className="grow">
-        <Link to={`/${orgSlug}`}>
-          <div className="flex items-center space-x-3 mb-10 ml-2">
-            <img
-              src="/logo.svg"
-              alt="Snowball Logo"
-              className="h-8 w-8 rounded-lg"
-            />
-            <span className="text-2xl font-bold text-snowball-900">
-              Snowball
-            </span>
-          </div>
-        </Link>
+    <div className="flex flex-col h-full px-6 py-8 gap-9">
+      {/* Logo */}
+      <Link to={`/${orgSlug}`}>
+        <div className="flex items-center gap-3 px-2">
+          <img
+            src="/logo.svg"
+            alt="Snowball Logo"
+            className="h-10 w-10 rounded-lg"
+          />
+          <Heading className="text-[24px] font-semibold">Snowball</Heading>
+        </div>
+      </Link>
+      {/* Switch organization */}
+      <div className="flex flex-1 flex-col gap-4">
         <AsyncSelect
           containerProps={{ className: 'h-14 border-none' }}
           labelProps={{ className: 'before:border-none after:border-none' }}
@@ -82,7 +83,7 @@ const Sidebar = () => {
           )}
           arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
         >
-          {/* TODO: Show label organization and manage in option */}
+          {/* // TODO: Show label organization and manage in option */}
           {organizations.map((org) => (
             <Option key={org.id} value={org.slug}>
               <div className="flex items-center space-x-3">
@@ -99,7 +100,7 @@ const Sidebar = () => {
             </Option>
           ))}
         </AsyncSelect>
-        <Tabs defaultValue="Projects" orientation="vertical" className="mt-10">
+        <Tabs defaultValue="Projects" orientation="vertical">
           <Tabs.List>
             {[
               { title: 'Projects', url: `/${orgSlug}/`, icon: <FolderIcon /> },
@@ -118,9 +119,10 @@ const Sidebar = () => {
           </Tabs.List>
         </Tabs>
       </div>
-      <div className="grow flex flex-col justify-end mb-8">
+      {/* Bottom navigation */}
+      <div className="flex flex-col justify-end">
         <Tabs defaultValue="Projects" orientation="vertical">
-          {/* TODO: use proper link buttons */}
+          {/* // TODO: use proper link buttons */}
           <Tabs.List>
             <Tabs.Trigger icon={<GlobeIcon />} value="">
               <a className="cursor-pointer" onClick={handleLogOut}>
@@ -139,5 +141,3 @@ const Sidebar = () => {
     </div>
   );
 };
-
-export default Sidebar;

packages/frontend/src/components/shared/Sidebar/index.ts

@@ -0,0 +1 @@
+export * from './Sidebar';

packages/frontend/src/pages/OrgSlug.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
-import Sidebar from '../components/Sidebar';
-import { OctokitProvider } from '../context/OctokitContext';
+import { OctokitProvider } from 'context/OctokitContext';
+import { Sidebar } from 'components/shared/Sidebar';
 
 const OrgSlug = () => {
   return (

packages/frontend/src/pages/org-slug/index.tsx

@@ -3,11 +3,11 @@ import { Link, useParams } from 'react-router-dom';
 import { Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 
-import { Typography, Chip } from '@material-tailwind/react';
-
-import { useGQLClient } from '../../context/GQLClientContext';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { ProjectCard } from 'components/projects/ProjectCard';
+import { Heading } from 'components/shared/Heading';
+import { Badge } from 'components/shared/Badge';
+import { useGQLClient } from 'context/GQLClientContext';
 
 const Projects = () => {
   const client = useGQLClient();
@@ -26,33 +26,31 @@ const Projects = () => {
   }, [orgSlug]);
 
   return (
-    <div>
-      <div className="flex p-5">
+    <section className="px-6 py-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex items-center">
         <div className="grow">
-          <div className="flex gap-2 items-center">
-            <Typography variant="h4" placeholder={''}>
+          <div className="flex gap-4 items-center">
+            <Heading as="h2" className="text-[24px]">
               Projects
-            </Typography>
-            <Chip
-              className="bg-gray-300 rounded-full static"
-              value={projects.length}
-              size="sm"
-            />
+            </Heading>
+            <Badge className="bg-base-bg-alternate text-elements-mid-em h-7 w-7">
+              {projects.length}
+            </Badge>
           </div>
         </div>
-        <div>
-          <Link to="projects/create">
-            <Button leftIcon={<PlusIcon />}>Create project</Button>
-          </Link>
-        </div>
+        <Link to="projects/create">
+          <Button leftIcon={<PlusIcon />}>Create project</Button>
+        </Link>
       </div>
-      <div className="grid grid-cols-3 gap-5 p-5">
-        {projects.length !== 0 &&
+      {/* List of projects */}
+      <div className="grid grid-cols-3 gap-4">
+        {projects.length > 0 &&
           projects.map((project, key) => {
             return <ProjectCard project={project} key={key} />;
           })}
       </div>
-    </div>
+    </section>
   );
 };
 

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -1,15 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Domain, DomainStatus } from 'gql-client';
-import { Link, useNavigate, useOutletContext } from 'react-router-dom';
+import { useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import {
-  Typography,
-  Button,
-  Chip,
-  Avatar,
-  Tooltip,
-} from '@material-tailwind/react';
+import { Typography, Chip, Avatar, Tooltip } from '@material-tailwind/react';
 
 import ActivityCard from '../../../../components/projects/project/ActivityCard';
 import { relativeTimeMs } from '../../../../utils/time';
@@ -17,6 +11,8 @@ import { useOctokit } from '../../../../context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 import { formatAddress } from '../../../../utils/format';
+import { Button } from 'components/shared/Button';
+import { Heading } from 'components/shared/Heading';
 
 const COMMITS_PER_PAGE = 4;
 
@@ -107,9 +103,9 @@ const OverviewTabPanel = () => {
   }, [project]);
 
   return (
-    <div className="grid grid-cols-5">
-      <div className="col-span-3 p-2">
-        <div className="flex items-center gap-2 p-2 ">
+    <div className="grid grid-cols-5 gap-[72px] mt-7">
+      <div className="col-span-3">
+        <div className="flex items-center gap-2">
           <Avatar
             src={project.icon || '/gray.png'}
             variant="rounded"
@@ -143,12 +139,11 @@ const OverviewTabPanel = () => {
               />
               <Button
                 className="normal-case rounded-full"
-                color="blue"
+                variant="primary"
                 size="sm"
                 onClick={() => {
                   navigate('settings/domains');
                 }}
-                placeholder={''}
               >
                 Setup
               </Button>
@@ -179,21 +174,17 @@ const OverviewTabPanel = () => {
           <div>No current deployment found</div>
         )}
       </div>
-      <div className="col-span-2 p-2">
-        <div className="flex justify-between">
-          <Typography variant="h6" placeholder={''}>
-            Activity
-          </Typography>
-          <button className="text-xs bg-gray-300 rounded-full p-2">
+      <div className="col-span-2 mr-1">
+        <div className="flex items-center justify-between">
+          <Heading className="text-lg leading-6 font-medium">Activity</Heading>
+          <Button variant="tertiary" size="sm">
             See all
-          </button>
+          </Button>
         </div>
-        <div className="p-2">
+        <div className="mt-5">
           {activities.map((activity, index) => {
             return (
-              <Link to={activity.html_url} target="_blank" key={index}>
-                <ActivityCard activity={activity} />
-              </Link>
+              <ActivityCard activity={activity} key={`activity-${index}`} />
             );
           })}
         </div>

packages/frontend/src/types/common.ts

@@ -1,3 +1,9 @@
+import {
+  type ElementType,
+  type ComponentPropsWithoutRef,
+  forwardRef,
+} from 'react';
+
 /**
  * Construct a type by excluding common keys from one type to another.
  * @template T - The type from which to omit properties.
@@ -7,3 +13,15 @@
  * @returns A new type that includes all properties from T except those that are common with U.
  */
 export type OmitCommon<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
+
+export type PolymorphicProps<Element extends ElementType, Props> = Props &
+  Omit<ComponentPropsWithoutRef<Element>, 'as'> & {
+    as?: Element;
+  };
+
+// taken from : https://github.com/total-typescript/react-typescript-tutorial/blob/main/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
+type FixedForwardRef = <T, P = object>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => JSX.Element;
+
+export const fixedForwardRef = forwardRef as FixedForwardRef;