🎨 Update icon sizes to be explicit

jupyter-book · Aug 11, 2023 · 5bd201a · 5bd201a
1 parent f03b062
commit 5bd201a
Show file tree

Hide file tree

Showing 24 changed files with 202 additions and 79 deletions.
diff --git a/.changeset/quick-apes-crash.md b/.changeset/quick-apes-crash.md
@@ -0,0 +1,10 @@
+---
+'myst-to-react': patch
+'@myst-theme/frontmatter': patch
+'myst-demo': patch
+'@myst-theme/jupyter': patch
+'@myst-theme/article': patch
+'@myst-theme/site': patch
+---
+
+Update icon sizes to be explicit rather than class names
diff --git a/packages/frontmatter/src/Authors.tsx b/packages/frontmatter/src/Authors.tsx
@@ -21,7 +21,11 @@ export function Author({
           target="_blank"
           rel="noopener noreferrer"
         >
-          <EmailIcon className="w-4 h-4 inline-block text-gray-400 hover:text-blue-400 -translate-y-[0.1em]" />
+          <EmailIcon
+            width="1rem"
+            height="1rem"
+            className="inline-block text-gray-400 hover:text-blue-400 -translate-y-[0.1em]"
+          />
         </a>
       )}
       {author.orcid && (
@@ -32,7 +36,11 @@ export function Author({
           rel="noopener noreferrer"
           title="ORCID (Open Researcher and Contributor ID)"
         >
-          <OrcidIcon className="w-4 h-4 inline-block text-gray-400 hover:text-[#A9C751] -translate-y-[0.1em]" />
+          <OrcidIcon
+            width="1rem"
+            height="1rem"
+            className="inline-block text-gray-400 hover:text-[#A9C751] -translate-y-[0.1em]"
+          />
         </a>
       )}
       {author.twitter && (
@@ -43,7 +51,11 @@ export function Author({
           rel="noopener noreferrer"
           title={`Twitter: ${author.twitter}`}
         >
-          <TwitterIcon className="w-4 h-4 inline-block text-gray-400 hover:text-[#1DA1F2] -translate-y-[0.1em]" />
+          <TwitterIcon
+            width="1rem"
+            height="1rem"
+            className="inline-block text-gray-400 hover:text-[#1DA1F2] -translate-y-[0.1em]"
+          />
         </a>
       )}
     </span>

diff --git a/packages/frontmatter/src/FrontmatterBlock.tsx b/packages/frontmatter/src/FrontmatterBlock.tsx
@@ -93,7 +93,11 @@ export function TwitterLink({ twitter: possibleLink }: { twitter?: string }) {
       rel="noopener noreferrer"
       className="text-inherit hover:text-inherit"
     >
-      <TwitterIcon className="inline-block w-5 h-5 mr-1 opacity-60 hover:opacity-100" />
+      <TwitterIcon
+        width="1.25rem"
+        height="1.25rem"
+        className="inline-block mr-1 opacity-60 hover:opacity-100"
+      />
     </a>
   );
 }
@@ -109,7 +113,11 @@ export function GitHubLink({ github: possibleLink }: { github?: string }) {
       rel="noopener noreferrer"
       className="text-inherit hover:text-inherit"
     >
-      <GithubIcon className="inline-block w-5 h-5 mr-1 opacity-60 hover:opacity-100" />
+      <GithubIcon
+        width="1.25rem"
+        height="1.25rem"
+        className="inline-block mr-1 opacity-60 hover:opacity-100"
+      />
     </a>
   );
 }
@@ -124,7 +132,11 @@ export function OpenAccessBadge({ open_access }: { open_access?: boolean }) {
       title="Open Access"
       className="text-inherit hover:text-inherit"
     >
-      <OpenAccessIcon className="w-5 h-5 mr-1 inline-block opacity-60 hover:opacity-100 hover:text-[#E18435]" />
+      <OpenAccessIcon
+        width="1.25rem"
+        height="1.25rem"
+        className="mr-1 inline-block opacity-60 hover:opacity-100 hover:text-[#E18435]"
+      />
     </a>
   );
 }
@@ -226,7 +238,7 @@ export function FrontmatterBlock({
               <GitHubLink github={github} />
               {isJupyter && (
                 <div className="inline-block mr-1">
-                  <JupyterIcon className="inline-block w-5 h-5" />
+                  <JupyterIcon width="1.25rem" height="1.25rem" className="inline-block" />
                 </div>
               )}
             </>
@@ -236,9 +248,17 @@ export function FrontmatterBlock({
       )}
       {title && <h1 className="mb-0">{title}</h1>}
       {subtitle && <p className="mt-2 mb-0 lead text-zinc-600 dark:text-zinc-400">{subtitle}</p>}
-      {hasAuthors && authorStyle === 'list' && <AuthorsList authors={frontmatter.authors} />}
+      {hasAuthors && authorStyle === 'list' && (
+        <AuthorsList
+          authors={frontmatter.authors}
+          affiliations={(frontmatter as any).affiliations}
+        />
+      )}
       {hasAuthors && authorStyle === 'block' && (
-        <AuthorAndAffiliations authors={frontmatter.authors} />
+        <AuthorAndAffiliations
+          authors={frontmatter.authors}
+          affiliations={(frontmatter as any).affiliations}
+        />
       )}
       {hasDateOrDoi && (
         <div className="flex mt-2 text-sm font-light">

diff --git a/packages/frontmatter/src/downloads.tsx b/packages/frontmatter/src/downloads.tsx
@@ -78,7 +78,12 @@ export function Download({
   return (
     <a className={classNames(className, 'flex')} href={url} onClick={clickDownload}>
       <span className="sr-only">Download as {format}</span>
-      <DocumentIcon className="items-center inline-block w-5 h-5 mr-2" aria-hidden="true" />
+      <DocumentIcon
+        width="1.25rem"
+        height="1.25rem"
+        className="items-center inline-block mr-2"
+        aria-hidden="true"
+      />
       {filename}
     </a>
   );
@@ -90,7 +95,12 @@ export function DownloadsDropdown({ exports }: HasExports) {
     <Menu as="div" className="relative flex inline-block mx-1 grow-0">
       <Menu.Button className="relative">
         <span className="sr-only">Downloads</span>
-        <ArrowDownTrayIcon className="w-5 h-5 ml-2 -mr-1" aria-hidden="true" />
+        <ArrowDownTrayIcon
+          width="1.25rem"
+          height="1.25rem"
+          className="ml-2 -mr-1"
+          aria-hidden="true"
+        />
       </Menu.Button>
       <Menu.Items className="absolute overflow-hidden bg-white rounded-sm shadow-lg -right-1 dark:bg-slate-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
         {exports.map(({ format, filename, url }, index) => (

diff --git a/packages/frontmatter/src/licenses.tsx b/packages/frontmatter/src/licenses.tsx
@@ -43,34 +43,44 @@ export function CreativeCommonsBadge({
       )}
       aria-label={title}
     >
-      <CcIcon className="inline-block w-5 h-5 mx-1" title={title} />
+      <CcIcon width="1.25rem" height="1.25rem" className="inline-block mx-1" title={title} />
       {(kind.startsWith('CC0') || kind.startsWith('CC-0') || kind.includes('ZERO')) && (
         <CcZeroIcon
-          className="inline-block w-5 h-5 mr-1"
+          width="1.25rem"
+          height="1.25rem"
+          className="inline-block mr-1"
           title="CC0: Work is in the worldwide public domain"
         />
       )}
       {kind.includes('BY') && (
         <CcByIcon
-          className="inline-block w-5 h-5 mr-1"
+          width="1.25rem"
+          height="1.25rem"
+          className="inline-block mr-1"
           title="Credit must be given to the creator"
         />
       )}
       {kind.includes('NC') && (
         <CcNcIcon
-          className="inline-block w-5 h-5 mr-1"
+          width="1.25rem"
+          height="1.25rem"
+          className="inline-block mr-1"
           title="Only noncommercial uses of the work are permitted"
         />
       )}
       {kind.includes('SA') && (
         <CcSaIcon
-          className="inline-block w-5 h-5 mr-1"
+          width="1.25rem"
+          height="1.25rem"
+          className="inline-block mr-1"
           title="Adaptations must be shared under the same terms"
         />
       )}
       {kind.includes('ND') && (
         <CcNdIcon
-          className="inline-block w-5 h-5 mr-1"
+          width="1.25rem"
+          height="1.25rem"
+          className="inline-block mr-1"
           title="No derivatives or adaptations of the work are permitted"
         />
       )}
@@ -106,16 +116,17 @@ function SingleLicenseBadge({
     >
       {!license.osi && (
         <ScaleIcon
-          className={classNames(
-            'h-5 w-5 mx-1 inline-block opacity-60 hover:opacity-100',
-            className,
-          )}
+          width="1.25rem"
+          height="1.25rem"
+          className={classNames('mx-1 inline-block opacity-60 hover:opacity-100', className)}
         />
       )}
       {license.osi && (
         <OsiIcon
+          width="1.25rem"
+          height="1.25rem"
           className={classNames(
-            'h-5 w-5 mx-1 inline-block opacity-60 hover:opacity-100 hover:text-[#599F46]',
+            'mx-1 inline-block opacity-60 hover:opacity-100 hover:text-[#599F46]',
             className,
           )}
         />

diff --git a/packages/jupyter/src/controls/Buttons.tsx b/packages/jupyter/src/controls/Buttons.tsx
@@ -25,12 +25,12 @@ export function SpinnerStatusButton({
     title = modified ? 'The figure has been modified' : "The figure is in it's original state";
   }
 
-  let icon = <PowerIcon className="w-6 h-6" />;
+  let icon = <PowerIcon width="1.5rem" height="1.5rem" />;
   if (ready) {
     if (modified) {
-      icon = <Bolt className="w-6 h-6 text-green-600" />;
+      icon = <Bolt width="1.5rem" height="1.5rem" className="text-green-600" />;
     } else {
-      icon = <BoltIconSolid className="w-6 h-6 text-green-600" />;
+      icon = <BoltIconSolid width="1.5rem" height="1.5rem" className="text-green-600" />;
     }
   }
 
@@ -52,8 +52,8 @@ export function SpinnerStatusButton({
         {icon}
       </button>
       {busy && (
-        <span className="absolute top-0 left-0 z-10 w-[22px] h-[22px] opacity-100">
-          <Spinner size={24} />
+        <span className="absolute top-0 left-0 z-10 opacity-100">
+          <Spinner size={22} />
         </span>
       )}
     </div>
@@ -93,8 +93,8 @@ function SpinnerButton({
         {icon}
       </button>
       {busy && (
-        <span className="absolute top-0 left-0 z-10 w-[22px] h-[22px] opacity-100">
-          <Spinner size={24} />
+        <span className="absolute top-0 left-0 z-10 opacity-100">
+          <Spinner size={22} />
         </span>
       )}
     </div>
@@ -121,7 +121,7 @@ export function Run({
       disabled={disabled}
       title={title ?? 'run all cells'}
       onClick={onClick}
-      icon={<PlayCircleIcon className="inline-block w-6 h-6 align-top" />}
+      icon={<PlayCircleIcon width="1.5rem" height="1.5rem" className="inline-block align-top" />}
     />
   );
 }
@@ -146,7 +146,13 @@ export function Power({
       disabled={disabled}
       title={title ?? 'enable compute'}
       onClick={onClick}
-      icon={<PowerIcon className="inline-block w-6 h-6 align-top dark:text-white" />}
+      icon={
+        <PowerIcon
+          width="1.5rem"
+          height="1.5rem"
+          className="inline-block align-top dark:text-white"
+        />
+      }
     />
   );
 }
@@ -171,7 +177,7 @@ export function ReRun({
       disabled={disabled}
       title={title ?? 'run all cells'}
       onClick={onClick}
-      icon={<ArrowPathIcon className="inline-block w-6 h-6 align-top" />}
+      icon={<ArrowPathIcon width="1.5rem" height="1.5rem" className="inline-block align-top" />}
     />
   );
 }
@@ -196,7 +202,7 @@ export function Reset({
       disabled={disabled}
       title={title ?? 'reset notebook'}
       onClick={onClick}
-      icon={<ArrowUturnLeft className="inline-block w-6 h-6 align-top" />}
+      icon={<ArrowUturnLeft width="1.5rem" height="1.5rem" className="inline-block align-top" />}
     />
   );
 }
@@ -223,7 +229,7 @@ export function Clear({
       title={title ?? 'clear'}
       aria-label={title ?? 'clear'}
     >
-      <MinusCircleIcon className="inline-block w-6 h-6 align-top" />
+      <MinusCircleIcon width="1.5rem" height="1.5rem" className="inline-block align-top" />
     </button>
   );
 }
@@ -247,7 +253,11 @@ export function Launch({
       title={title ?? 'launch in jupyter'}
       aria-label={title ?? 'launch in jupyter'}
     >
-      <ArrowTopRightOnSquareIcon className="inline-block w-6 h-6 align-top" />
+      <ArrowTopRightOnSquareIcon
+        width="1.5rem"
+        height="1.5rem"
+        className="inline-block align-top"
+      />
     </button>
   );
 }
diff --git a/packages/jupyter/src/controls/Spinner.tsx b/packages/jupyter/src/controls/Spinner.tsx
@@ -3,7 +3,9 @@ export function Spinner({ size }: { size: number }) {
     <div role="status">
       <svg
         aria-hidden="true"
-        className={`w-[${size}px] h-[${size}px] mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-600`}
+        width={size}
+        height={size}
+        className="mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-600"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/jupyter/src/decoration.tsx b/packages/jupyter/src/decoration.tsx
@@ -49,7 +49,7 @@ export function OutputDecoration({
         <div className="sticky top-[60px] z-[2] w-full bg-gray-100/80 backdrop-blur dark:bg-neutral-800/80 py-1 px-2">
           <div className="flex items-center">
             <div className="flex items-center">
-              <JupyterIcon className="inline-block w-5 h-5" />
+              <JupyterIcon width="1.25rem" height="1.25rem" className="inline-block" />
               <span className="ml-2">Source:</span>
               {url && (
                 <Link
@@ -76,7 +76,7 @@ export function OutputDecoration({
     return (
       <>
         <div className="flex items-center justify-end text-xs">
-          <JupyterIcon className="inline-block w-3 h-3" />
+          <JupyterIcon width="0.75rem" height="0.75rem" className="inline-block" />
           <div className="ml-1">Source:</div>
           {url && (
             <Link

diff --git a/packages/myst-demo/src/index.tsx b/packages/myst-demo/src/index.tsx
@@ -343,7 +343,8 @@ export function MySTRenderer({
                 title={`Download Micorsoft Word`}
                 aria-label={`Download Micorsoft Word`}
               >
-                <ArrowDownTrayIcon className="inline h-[1.3em] mr-1" /> Download as Microsoft Word
+                <ArrowDownTrayIcon width="1.3rem" height="1.3rem" className="inline mr-1" />{' '}
+                Download as Microsoft Word
               </button>
             </div>
           )}
@@ -359,9 +360,15 @@ export function MySTRenderer({
                   'bg-slate-500 dark:bg-slate-800': m.fatal === null,
                 })}
               >
-                {m.fatal === true && <ExclamationCircleIcon className="inline h-[1.3em] mr-1" />}
-                {m.fatal === false && <ExclamationTriangleIcon className="inline h-[1.3em] mr-1" />}
-                {m.fatal === null && <InformationCircleIcon className="inline h-[1.3em] mr-1" />}
+                {m.fatal === true && (
+                  <ExclamationCircleIcon width="1.3rem" height="1.3rem" className="inline mr-1" />
+                )}
+                {m.fatal === false && (
+                  <ExclamationTriangleIcon width="1.3rem" height="1.3rem" className="inline mr-1" />
+                )}
+                {m.fatal === null && (
+                  <InformationCircleIcon width="1.3rem" height="1.3rem" className="inline mr-1" />
+                )}
                 <code>{m.ruleId || m.source}</code>: {m.message}
               </div>
             ))}