feat: design polish v4 (#1961)

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: zehfernandes

packages/react-email/src/components/code-container.tsx

@@ -72,7 +72,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
 
   return (
     <div
-      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm backdrop-blur-md"
+      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm"
       style={{
         lineHeight: '130%',
         background:

packages/react-email/src/components/code.tsx

@@ -60,7 +60,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-          <pre className="h-[650px] overflow-auto p-4">
+          <pre className="overflow-auto p-4 max-h-[calc(100vh-10rem)]">
             {tokens.map((line, i) => {
               const lineProps = getLineProps({
                 line,

packages/react-email/src/components/icons/icon-reload.tsx

@@ -1,19 +1,18 @@
-export const IconReload = (props: React.ComponentProps<'svg'>) => {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconReload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M10.52 6C10.52 3.73168 8.75221 1.48 6.00006 1.48C3.77741 1.48 2.67886 3.1251 2.21074 3.99999H3.60005C3.82096 3.99999 4.00005 4.17908 4.00005 4.39999C4.00005 4.6209 3.82096 4.79999 3.60005 4.79999H1.20005C0.979137 4.79999 0.800049 4.6209 0.800049 4.39999V1.99999C0.800049 1.77908 0.979137 1.59999 1.20005 1.59999C1.42096 1.59999 1.60005 1.77908 1.60005 1.99999V3.45056C2.16367 2.45702 3.4673 0.679993 6.00006 0.679993C9.25029 0.679993 11.32 3.34831 11.32 6C11.32 8.65169 9.25029 11.32 6.00006 11.32C4.44499 11.32 3.15027 10.7047 2.22843 9.76673C1.73486 9.26449 1.34939 8.67121 1.08658 8.03257C1.0025 7.8283 1.09995 7.59453 1.30424 7.51046C1.50853 7.42638 1.7423 7.52384 1.82637 7.72812C2.05104 8.27401 2.38001 8.77961 2.79901 9.20593C3.57646 9.99705 4.66802 10.52 6.00006 10.52C8.75221 10.52 10.52 8.26833 10.52 6Z"
+        d="M17.9354 12C17.9354 9.01537 15.5828 6.05264 11.9202 6.05264C8.96229 6.05264 7.50033 8.21724 6.87735 9.36841H8.72625C9.02024 9.36841 9.25858 9.60406 9.25858 9.89473C9.25858 10.1854 9.02024 10.421 8.72625 10.421H5.53232C5.23833 10.421 5 10.1854 5 9.89473V6.73684C5 6.44617 5.23833 6.21052 5.53232 6.21052C5.82631 6.21052 6.06465 6.44617 6.06465 6.73684V8.64548C6.81471 7.33819 8.54959 5 11.9202 5C16.2456 5 19 8.51094 19 12C19 15.4891 16.2456 19 11.9202 19C9.8507 19 8.12769 18.1904 6.9009 16.9562C6.24405 16.2954 5.73107 15.5148 5.38132 14.6744C5.26942 14.4057 5.39911 14.0981 5.67098 13.9875C5.94285 13.8768 6.25395 14.0051 6.36583 14.2738C6.66482 14.9921 7.10262 15.6574 7.66023 16.2183C8.69486 17.2593 10.1475 17.9474 11.9202 17.9474C15.5828 17.9474 17.9354 14.9846 17.9354 12Z"
         fill="currentColor"
       />
-    </svg>
-  );
-};
+    </IconBase>
+  ),
+);
+
+IconReload.displayName = 'IconReload';

packages/react-email/src/components/icons/icon-scanner.tsx

@@ -1,8 +1,8 @@
 export const IconScanner = (props: React.ComponentProps<'svg'>) => {
   return (
     <svg
-      width="13"
-      height="12"
+      width="15"
+      height="13"
       viewBox="0 0 13 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

packages/react-email/src/components/icons/icon-scissors.tsx

@@ -1,8 +1,8 @@
 export const IconScissors = (props: React.ComponentProps<'svg'>) => {
   return (
     <svg
-      width="12"
-      height="10"
+      width="14"
+      height="12"
       viewBox="0 0 12 10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

packages/react-email/src/components/logo.tsx

@@ -1,10 +1,11 @@
 export const Logo = () => (
   <svg
     fill="none"
-    height="32"
+    height="30"
     viewBox="0 0 119 32"
-    width="119"
+    width="113"
     xmlns="http://www.w3.org/2000/svg"
+    style={{ opacity: 0.9 }}
   >
     <g clipPath="url(#clip0_27_291)">
       <path

packages/react-email/src/components/resizable-wrapper.tsx

@@ -100,10 +100,7 @@ export const ResizableWarpper = ({
   return (
     <div
       {...rest}
-      className={cn(
-        'relative mx-auto my-auto box-content px-4 py-2',
-        rest.className,
-      )}
+      className={cn('relative mx-auto my-auto box-content', rest.className)}
     >
       <div
         aria-label="resize-west"

packages/react-email/src/components/sidebar/sidebar.tsx

@@ -2,7 +2,6 @@
 import { clsx } from 'clsx';
 import { useEmails } from '../../contexts/emails';
 import { cn } from '../../utils';
-import { Heading } from '../heading';
 import { Logo } from '../logo';
 import { FileTree } from './file-tree';
 
@@ -29,9 +28,9 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
               'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
             )}
           >
-            <Heading as="h2" className="truncate" size="2" weight="medium">
+            <h2>
               <Logo />
-            </Heading>
+            </h2>
           </div>
           <div className="relative h-full w-full border-slate-4 border-t px-4 pb-3">
             <FileTree

packages/react-email/src/components/toolbar.tsx

@@ -61,17 +61,18 @@ const ToolbarInner = ({
     useCachedState<SpamCheckingResult>(
       `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
     );
-  const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
-    markup,
-    plainText,
+  const [spamCheckingResult, { load: loadSpamChecking, loading: spamLoading }] =
+    useSpamAssassin({
+      markup,
+      plainText,
 
-    initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
-  });
+      initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
+    });
 
   const [cachedLintingRows, setCachedLintingRows] = useCachedState<
     LintingRow[]
   >(`linter-${emailSlug.replaceAll('/', '-')}`);
-  const [lintingRows, { load: loadLinting }] = useLinter({
+  const [lintingRows, { load: loadLinting, loading: lintLoading }] = useLinter({
     reactMarkup,
     emailPath,
     markup,
@@ -95,19 +96,20 @@ const ToolbarInner = ({
     <div
       data-toggled={toggled}
       className={cn(
-        'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
-        'data-[toggled=false]:h-8',
+        'absolute bottom-0 left-0 right-0',
+        'bg-black group/toolbar text-xs text-slate-11 h-52 transition-transform',
+        'data-[toggled=false]:translate-y-[170px]',
       )}
     >
       <Tabs.Root
-        value={activeTab}
+        value={activeTab ?? ''}
         onValueChange={(newValue) => {
           setActivePanelValue(newValue as ToolbarTabValue);
         }}
         asChild
       >
         <div className="flex flex-col h-full">
-          <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-7 w-full">
+          <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-9 w-full flex-shrink-0">
             <LayoutGroup id="toolbar">
               <Tabs.Trigger asChild value="spam-assassin">
                 <ToolbarButton active={activeTab === 'spam-assassin'}>
@@ -122,10 +124,11 @@ const ToolbarInner = ({
                 </ToolbarButton>
               </Tabs.Trigger>
             </LayoutGroup>
-            <div className="flex gap-1 ml-auto">
+            <div className="flex gap-0.5 ml-auto">
               {isBuilding ? null : (
                 <ToolbarButton
                   tooltip="Reload"
+                  disabled={lintLoading || spamLoading}
                   onClick={async () => {
                     if (activeTab === undefined) {
                       setActivePanelValue('linter');
@@ -137,7 +140,13 @@ const ToolbarInner = ({
                     }
                   }}
                 >
-                  <IconReload />
+                  <IconReload
+                    size={24}
+                    className={cn({
+                      'animate-spin opacity-60 animate-spin-fast':
+                        lintLoading || spamLoading,
+                    })}
+                  />
                 </ToolbarButton>
               )}
               <ToolbarButton
@@ -150,17 +159,32 @@ const ToolbarInner = ({
                   }
                 }}
               >
-                <IconArrowDown className="transition-transform group-data-[toggled=false]/toolbar:rotate-180" />
+                <IconArrowDown
+                  size={24}
+                  className="transition-transform group-data-[toggled=false]/toolbar:rotate-180"
+                />
               </ToolbarButton>
             </div>
           </Tabs.List>
 
-          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2">
+          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2 pt-3">
             <Tabs.Content value="linter">
-              <Linter rows={lintingRows} />
+              {lintLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  Running linting...
+                </div>
+              ) : (
+                <Linter rows={lintingRows} />
+              )}
             </Tabs.Content>
             <Tabs.Content value="spam-assassin">
-              <SpamAssassin result={spamCheckingResult} />
+              {spamLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  Running spam check...
+                </div>
+              ) : (
+                <SpamAssassin result={spamCheckingResult} />
+              )}
             </Tabs.Content>
           </div>
         </div>

packages/react-email/src/components/toolbar/linter.tsx

@@ -4,7 +4,7 @@ import { nicenames } from '../../actions/email-validation/caniemail-data';
 import type { CompatibilityCheckingResult } from '../../actions/email-validation/check-compatibility';
 import type { ImageCheckingResult } from '../../actions/email-validation/check-images';
 import type { LinkCheckingResult } from '../../actions/email-validation/check-links';
-import { cn } from '../../utils';
+import { cn, sanitize } from '../../utils';
 import { getLintingSources, loadLintingRowsFrom } from '../../utils/linting';
 import { IconWarning } from '../icons/icon-warning';
 import { Results } from './results';
@@ -105,7 +105,7 @@ export const Linter = ({ rows }: LinterProps) => {
           )!;
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
               <Result.Description>
                 {failingCheck.type === 'security'
                   ? 'Insecure URL, use HTTPS insted of HTTP'
@@ -125,7 +125,7 @@ export const Linter = ({ rows }: LinterProps) => {
                   ? 'The link is broken due to invalid syntax'
                   : null}
 
-                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
                   {row.result.link}
                 </span>
               </Result.Description>
@@ -148,10 +148,10 @@ export const Linter = ({ rows }: LinterProps) => {
           )!;
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
               <Result.Description>
                 {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  ? 'Insecure URL, use HTTPS instead of HTTP'
                   : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
@@ -177,7 +177,7 @@ export const Linter = ({ rows }: LinterProps) => {
                   ? 'This image is too large, keep it under 1mb'
                   : null}
 
-                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
                   {row.result.source}
                 </span>
               </Result.Description>
@@ -205,7 +205,7 @@ export const Linter = ({ rows }: LinterProps) => {
                     return undefined;
                   })
                   .filter(Boolean)
-                  .join('—')}
+                  .join(' · ')}
               </Result.Metadata>
             </Result>
           );
@@ -228,7 +228,7 @@ export const Linter = ({ rows }: LinterProps) => {
 
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{row.result.entry.title}</Result.Name>
+              <Result.Name>{sanitize(row.result.entry.title)}</Result.Name>
               <Result.Description>
                 {statsReportedNotWorking.length > 0
                   ? `Not supported in ${unsupportedClientsString}`
@@ -240,20 +240,19 @@ export const Linter = ({ rows }: LinterProps) => {
                 {statsReportedPartiallyWorking.length > 0
                   ? `Partially supported in ${partiallySupportedClientsString}`
                   : null}
-              </Result.Description>
-              <Result.Metadata>
-                <span className="mr-2">
-                  {row.result.location.start.line.toString().padStart(2, '0')}:
-                  {row.result.location.start.column.toString().padStart(2, '0')}
-                </span>
+
                 <a
                   href={row.result.entry.url}
-                  className="underline"
+                  className="underline ml-2 decoration-slate-9 decoration-1 hover:decoration-slate-11 transition-colors  hover:text-slate-12"
                   rel="noreferrer"
                   target="_blank"
                 >
-                  See more info
+                  More ↗
                 </a>
+              </Result.Description>
+              <Result.Metadata>
+                {row.result.location.start.line.toString().padStart(2, '0')}:
+                {row.result.location.start.column.toString().padStart(2, '0')}
               </Result.Metadata>
             </Result>
           );
@@ -287,9 +286,9 @@ Result.Name = ({
 }: React.ComponentProps<typeof Results.Column>) => {
   return (
     <Results.Column {...props}>
-      <span className="flex uppercase gap-1 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
+      <span className="flex uppercase gap-2 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
         <IconWarning />
-        {children}
+        {typeof children === 'string' ? sanitize(children) : children}
       </span>
     </Results.Column>
   );