feat: continue primer component and design token migration

package.json

@@ -140,6 +140,7 @@
     "@discordapp/twemoji": "15.1.0",
     "@electron/notarize": "2.5.0",
     "@primer/octicons-react": "19.14.0",
+    "@primer/primitives": "^10.3.4",
     "@primer/react": "36.27.0",
     "@testing-library/react": "16.2.0",
     "@types/jest": "29.5.14",

src/renderer/App.css

@@ -1,3 +1,18 @@
+/** GitHub Primer Design System */
+/* Size & Typography */
+@import "@primer/primitives/dist/css/base/size/size.css";
+@import "@primer/primitives/dist/css/base/typography/typography.css";
+@import "@primer/primitives/dist/css/functional/size/border.css";
+@import "@primer/primitives/dist/css/functional/size/breakpoints.css";
+@import "@primer/primitives/dist/css/functional/size/size.css";
+@import "@primer/primitives/dist/css/functional/size/viewport.css";
+@import "@primer/primitives/dist/css/functional/typography/typography.css";
+
+/* Themes and Colors */
+/* TODO Add support for setting color modes (dark_dimmed) - see #1748 */
+@import "@primer/primitives/dist/css/functional/themes/light.css";
+@import "@primer/primitives/dist/css/functional/themes/dark.css";
+
 html,
 body,
 #root {

src/renderer/App.tsx

@@ -35,7 +35,8 @@ function RequireAuth({ children }) {
 
 export const App = () => {
   return (
-    <ThemeProvider>
+    // TODO Add support for setting color modes (dark_dimmed) - see #1748
+    <ThemeProvider dayScheme="light" nightScheme="dark">
       <BaseStyles>
         <AppProvider>
           <Router>

src/renderer/components/AllRead.tsx

@@ -1,14 +1,15 @@
 import { type FC, useContext, useMemo } from 'react';
 
-import { Stack } from '@primer/react';
-
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
 import { hasFiltersSet } from '../utils/filters';
-import { Centered } from './primitives/Centered';
-import { EmojiText } from './primitives/EmojiText';
+import { EmojiSplash } from './layout/EmojiSplash';
+
+interface IAllRead {
+  fullHeight?: boolean;
+}
 
-export const AllRead: FC = () => {
+export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
   const { settings } = useContext(AppContext);
 
   const hasFilters = hasFiltersSet(settings);
@@ -21,21 +22,9 @@ export const AllRead: FC = () => {
     [],
   );
 
-  return (
-    <Centered>
-      <Stack direction="vertical" align="center">
-        <div className="mt-2 mb-5 text-5xl">
-          <EmojiText text={emoji} />
-        </div>
+  const heading = `No new ${hasFilters ? 'filtered ' : ''} notifications`;
 
-        {hasFilters ? (
-          <div className="mb-2 text-xl font-semibold">
-            No new filtered notifications
-          </div>
-        ) : (
-          <div className="mb-2 text-xl font-semibold">No new notifications</div>
-        )}
-      </Stack>
-    </Centered>
+  return (
+    <EmojiSplash emoji={emoji} heading={heading} fullHeight={fullHeight} />
   );
 };

src/renderer/components/Oops.tsx

@@ -1,37 +1,25 @@
 import { type FC, useMemo } from 'react';
 
-import { Stack } from '@primer/react';
 import type { GitifyError } from '../types';
-import { Centered } from './primitives/Centered';
-import { EmojiText } from './primitives/EmojiText';
+import { EmojiSplash } from './layout/EmojiSplash';
 
 interface IOops {
   error: GitifyError;
+  fullHeight?: boolean;
 }
 
-export const Oops: FC<IOops> = ({ error }: IOops) => {
+export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
   const emoji = useMemo(
     () => error.emojis[Math.floor(Math.random() * error.emojis.length)],
     [error],
   );
 
   return (
-    <Centered>
-      <Stack direction="vertical" align="center">
-        <div className="mt-2 text-5xl">
-          <EmojiText text={emoji} />
-        </div>
-
-        <div className="mb-2 text-xl font-semibold">{error.title}</div>
-        {error.descriptions.map((description, i) => {
-          return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-            <div className="mb-2 text-center" key={`error_description_${i}`}>
-              {description}
-            </div>
-          );
-        })}
-      </Stack>
-    </Centered>
+    <EmojiSplash
+      emoji={emoji}
+      heading={error.title}
+      subHeadings={error.descriptions}
+      fullHeight={fullHeight}
+    />
   );
 };

src/renderer/components/Sidebar.tsx

@@ -69,80 +69,82 @@ export const Sidebar: FC = () => {
   }, [notifications]);
 
   return (
-    <div className="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar">
-      <div className="flex flex-1 flex-col">
-        <Stack
-          direction="vertical"
-          align="center"
-          gap="condensed"
-          padding="normal"
-        >
-          <IconButton
-            icon={LogoIcon}
-            aria-label={APPLICATION.NAME}
-            description="Home"
-            unsafeDisableTooltip={false}
-            size="small"
-            variant="invisible"
-            tooltipDirection="e"
-            onClick={() => navigate('/', { replace: true })}
-            data-testid="sidebar-home"
-          />
-
-          <IconButton
-            icon={BellIcon}
-            aria-label="Notifications"
-            description={`${notificationsCount} unread notifications`}
-            unsafeDisableTooltip={false}
-            size="small"
-            variant={notificationsCount > 0 ? 'primary' : 'invisible'}
-            tooltipDirection="e"
-            onClick={() => openGitHubNotifications(primaryAccountHostname)}
-            data-testid="sidebar-notifications"
-            sx={{ color: 'white' }}
-          />
-
-          {/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
-          {isLoggedIn && (
-            <IconButton
-              icon={FilterIcon}
-              aria-label="Filters"
-              description="Filter notifications"
-              unsafeDisableTooltip={false}
-              size="small"
-              variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
-              tooltipDirection="e"
-              onClick={() => toggleFilters()}
-              data-testid="sidebar-filter-notifications"
-              sx={{ color: 'white' }}
-            />
-          )}
-
+    <Stack
+      direction="vertical"
+      justify="space-between"
+      className="fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+    >
+      <Stack
+        direction="vertical"
+        align="center"
+        gap="condensed"
+        padding="normal"
+      >
+        <IconButton
+          icon={LogoIcon}
+          aria-label={APPLICATION.NAME}
+          description="Home"
+          unsafeDisableTooltip={false}
+          size="small"
+          variant="invisible"
+          tooltipDirection="e"
+          onClick={() => navigate('/', { replace: true })}
+          data-testid="sidebar-home"
+        />
+
+        <IconButton
+          icon={BellIcon}
+          aria-label="Notifications"
+          description={`${notificationsCount} unread notifications`}
+          unsafeDisableTooltip={false}
+          size="small"
+          variant={notificationsCount > 0 ? 'primary' : 'invisible'}
+          tooltipDirection="e"
+          onClick={() => openGitHubNotifications(primaryAccountHostname)}
+          data-testid="sidebar-notifications"
+          sx={{ color: 'white' }}
+        />
+
+        {/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
+        {isLoggedIn && (
           <IconButton
-            icon={IssueOpenedIcon}
-            aria-label="My issues"
+            icon={FilterIcon}
+            aria-label="Filters"
+            description="Filter notifications"
             unsafeDisableTooltip={false}
             size="small"
-            variant="invisible"
+            variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
             tooltipDirection="e"
-            onClick={() => openGitHubIssues(primaryAccountHostname)}
-            data-testid="sidebar-my-issues"
+            onClick={() => toggleFilters()}
+            data-testid="sidebar-filter-notifications"
             sx={{ color: 'white' }}
           />
+        )}
 
-          <IconButton
-            icon={GitPullRequestIcon}
-            aria-label="My pull requests"
-            unsafeDisableTooltip={false}
-            size="small"
-            variant="invisible"
-            tooltipDirection="e"
-            onClick={() => openGitHubPulls(primaryAccountHostname)}
-            data-testid="sidebar-my-pull-requests"
-            sx={{ color: 'white' }}
-          />
-        </Stack>
-      </div>
+        <IconButton
+          icon={IssueOpenedIcon}
+          aria-label="My issues"
+          unsafeDisableTooltip={false}
+          size="small"
+          variant="invisible"
+          tooltipDirection="e"
+          onClick={() => openGitHubIssues(primaryAccountHostname)}
+          data-testid="sidebar-my-issues"
+          sx={{ color: 'white' }}
+        />
+
+        <IconButton
+          icon={GitPullRequestIcon}
+          aria-label="My pull requests"
+          unsafeDisableTooltip={false}
+          size="small"
+          variant="invisible"
+          tooltipDirection="e"
+          onClick={() => openGitHubPulls(primaryAccountHostname)}
+          data-testid="sidebar-my-pull-requests"
+          sx={{ color: 'white' }}
+        />
+      </Stack>
 
       <Stack
         direction="vertical"
@@ -195,6 +197,6 @@ export const Sidebar: FC = () => {
           />
         )}
       </Stack>
-    </div>
+    </Stack>
   );
 };