feat(app): various updates for v2.0.0

src/components/Banner/Banner.css

@@ -4,14 +4,9 @@
   left: 0;
   right: 0;
   border-radius: 0;
-  /* top: 8px;
-  left: 8px;
-  right: 8px;
-  max-width: 1120px; */
   display: flex;
   padding: 12px;
   color: white;
-  text-align: center;
   margin: auto;
   background-color: var(--eggplant);
   z-index: 1;
@@ -31,10 +26,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 20px;
   flex: 1;
   max-width: 1120px;
   margin: auto;
+  font-family: "IBM Plex Mono";
 }
 
 .banner-button {
@@ -50,3 +46,10 @@
 .banner-button:active {
   opacity: 0.7;
 }
+
+.message {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  align-items: center;
+  gap: 20px;
+}

src/components/Banner/Banner.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, Dispatch, SetStateAction } from "react";
 import { motion, AnimatePresence, Variants } from "framer-motion";
-import { XCircle } from "phosphor-react";
+import { XCircle } from "@phosphor-icons/react";
 import ReactGA from "react-ga4";
 
 import { useLocalStorage } from "@/hooks";
@@ -69,7 +69,7 @@ const Banner = ({ id, children, onClose }: BannerProps) => {
                 e.key === "Enter" && handleClose();
               }}
             >
-              <XCircle color="currentColor" size={28} weight="fill" />
+              <XCircle color="currentColor" size={28} weight="regular" />
             </button>
           </div>
         </motion.aside>

src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from "recoil";
 import { motion, AnimatePresence, Variants } from "framer-motion";
-import { Coffee, Heart, ArrowULeftUp } from "phosphor-react";
+import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react";
 
 import Links from "@/components/Links/Links";
 

src/components/Header/Header.tsx

@@ -1,4 +1,8 @@
-import { ArrowCircleUpRight, ArrowCircleDown, Megaphone } from "phosphor-react";
+import {
+  ArrowCircleUpRight,
+  ArrowCircleDown,
+  Broadcast,
+} from "@phosphor-icons/react";
 
 import Banner from "@/components/Banner";
 
@@ -38,22 +42,19 @@ const handleScrollToIcons = () =>
 const Header = (_: HeaderProps) => {
   return (
     <header>
-      <Banner
-        id={Math.random().toString()}
-        children={
-          <>
-            <Megaphone mirrored color="var(--orange)" size={28} weight="fill" />
-            <small>
-              Phosphor has some big updates, and some APIs have changed for
-              users of the Vanilla JS library. Please check our{" "}
-              <a href="https://github.com/phosphor-icons/homepage#readme">
-                documentation
-              </a>{" "}
-              to see what's new...
-            </small>
-          </>
-        }
-      />
+      <Banner id="2.0">
+        <div className="message">
+          <Broadcast size={32} weight="fill" />
+          <small>
+            Phosphor 2.0 is out, with some big updates and some small API
+            changes. Check our{" "}
+            <a href="https://github.com/phosphor-icons/homepage#readme">
+              documentation
+            </a>{" "}
+            to see what's new!
+          </small>
+        </div>
+      </Banner>
       <div className="header-contents">
         <div className="illustrations-top">
           <MarkerPurple id="marker-purple" />

src/components/IconGrid/DetailFooter.tsx

@@ -4,7 +4,12 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { motion, AnimatePresence, Variants } from "framer-motion";
 import { Svg2Png } from "svg2png-converter";
 import { saveAs } from "file-saver";
-import { Copy, CheckCircle, DownloadSimple, XCircle } from "phosphor-react";
+import {
+  Copy,
+  CheckCircle,
+  DownloadSimple,
+  XCircle,
+} from "@phosphor-icons/react";
 import ReactGA from "react-ga4";
 
 import Tabs, { Tab } from "@/components/Tabs";
@@ -241,30 +246,33 @@ const DetailFooter = () => {
             </figure>
             <div className="detail-actions">
               <button
+                className="action-button"
                 tabIndex={0}
                 style={buttonBarStyle}
                 onClick={handleDownloadPNG}
               >
-                <DownloadSimple size={24} color="currentColor" weight="fill" />{" "}
+                <DownloadSimple size={20} color="currentColor" weight="fill" />{" "}
                 PNG
               </button>
               <button
+                className="action-button"
                 tabIndex={0}
                 style={buttonBarStyle}
                 onClick={handleDownloadSVG}
               >
-                <DownloadSimple size={24} color="currentColor" weight="fill" />{" "}
+                <DownloadSimple size={20} color="currentColor" weight="fill" />{" "}
                 SVG
               </button>
               <button
+                className="action-button"
                 tabIndex={0}
                 style={buttonBarStyle}
                 onClick={handleCopySVG}
               >
                 {copied === "SVG" ? (
-                  <CheckCircle size={24} color={successColor} weight="fill" />
+                  <CheckCircle size={20} color={successColor} weight="fill" />
                 ) : (
-                  <Copy size={24} color="currentColor" weight="fill" />
+                  <Copy size={20} color="currentColor" weight="fill" />
                 )}
                 {copied === "SVG" ? "Copied!" : " SVG"}
               </button>

src/components/IconGrid/IconGrid.css

@@ -78,7 +78,7 @@
 
 .snippet pre {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   text-overflow: ellipsis;
   -moz-user-select: all;
   -webkit-user-select: all;
@@ -142,7 +142,7 @@
 
 .close-button {
   color: inherit;
-  background: var(--background);
+  background: transparent;
   height: unset !important;
   padding: 0 !important;
   margin: 0 !important;
@@ -154,6 +154,18 @@
   cursor: pointer;
 }
 
+.close-button::before {
+  content: "";
+  background: var(--background);
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 5px;
+  left: 5px;
+  border-radius: 50%;
+  z-index: -1;
+}
+
 .close-button:active {
   opacity: 0.7;
 }
@@ -238,6 +250,10 @@ figcaption > p {
     bottom: -4px;
     display: flex;
     flex-direction: column;
-    height: 60vh;
+    height: 440px;
   }
 }
+
+.action-button svg {
+  margin-right: 6px;
+}

src/components/IconGrid/IconGrid.tsx

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { motion, useAnimation } from "framer-motion";
-import { IconContext } from "phosphor-react";
+import { IconContext } from "@phosphor-icons/react";
 
 import {
   iconWeightAtom,

src/components/Links/Links.tsx

@@ -1,4 +1,4 @@
-import { ArrowElbowDownRight } from "phosphor-react";
+import { ArrowElbowDownRight } from "@phosphor-icons/react";
 
 import { iconCount } from "@/lib/icons";
 import OutboundLink from "@/components/OutboundLink";

src/components/Notice/Notice.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { motion } from "framer-motion";
 import { useRecoilValue } from "recoil";
-import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
+import { HourglassMedium, Question, SmileyXEyes } from "@phosphor-icons/react";
 
 import { searchQueryAtom } from "@/state";
 

src/components/SearchInput/SearchInput.tsx

@@ -8,7 +8,7 @@ import {
 import { useRecoilState } from "recoil";
 import { useDebounce } from "react-use";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
+import { Command, MagnifyingGlass, X, HourglassHigh } from "@phosphor-icons/react";
 import ReactGA from "react-ga4";
 
 import { searchQueryAtom } from "@/state";

src/components/SettingsActions/SettingsActions.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue, useResetRecoilState } from "recoil";
-import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
+import { ArrowCounterClockwise, CheckCircle, Link } from "@phosphor-icons/react";
 
 import { useTransientState } from "@/hooks";
 import {

src/components/StyleInput/StyleInput.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
-import { PencilLine } from "phosphor-react";
+import { PencilLine } from "@phosphor-icons/react";
 import { IconStyle } from "@phosphor-icons/core";
 
 import { iconWeightAtom } from "@/state";

src/components/Tabs/Tabs.css

@@ -6,18 +6,19 @@
 .tabs-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 }
 
 button.tab {
   all: unset;
-  padding: 4px;
+  padding: 6px 4px;
   font-size: 12px;
   text-align: center;
   cursor: pointer;
   flex: 1;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
+  z-index: 2;
 }
 
 button.tab:focus-visible {
@@ -35,11 +36,9 @@ button.tab.active {
 
 .tab-content {
   flex: 1;
-  height: 80px;
-  max-height: 80px;
-  padding: 16px;
-  display: grid;
-  place-items: center;
+  height: 77px;
+  max-height: 77px;
+  padding: 20px 20px 10px;
   border-radius: 8px;
   background-color: var(--background);
   overflow-y: auto;

src/lib/icons.ts

@@ -1,4 +1,4 @@
-import * as Icons from "phosphor-react";
+import * as Icons from "@phosphor-icons/react";
 import { icons as iconData } from "@phosphor-icons/core";
 
 import { IconEntry } from ".";
@@ -12,6 +12,4 @@ if (process.env.NODE_ENV === "development") {
   console.log(`${icons.length} icons`);
 }
 
-export const iconCount = (icons.length * 6)
-  .toString()
-  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+export const iconCount = Intl.NumberFormat("en-US").format(icons.length * 6);

src/lib/index.ts

@@ -1,4 +1,4 @@
-import { Icon } from "phosphor-react";
+import { Icon } from "@phosphor-icons/react";
 import { IconEntry as CoreEntry } from "@phosphor-icons/core";
 
 export interface IconEntry extends CoreEntry {