From 46ed0bc3005fea6cdd620b7fda38db3b0940d6db Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 11 Mar 2023 01:25:42 -0700 Subject: [PATCH 1/7] feat(app): recipe ideas --- src/components/App/App.tsx | 4 +- src/components/Recipes/Recipe.tsx | 22 ++++++ src/components/Recipes/Recipes.css | 39 ++++++++++ src/components/Recipes/Recipes.tsx | 29 ++++++++ src/components/Recipes/index.ts | 1 + src/components/Recipes/items/Animation.tsx | 83 ++++++++++++++++++++++ src/components/Recipes/items/Duocolor.tsx | 63 ++++++++++++++++ src/components/Recipes/items/index.ts | 6 ++ src/components/Toolbar/Toolbar.css | 3 +- 9 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 src/components/Recipes/Recipe.tsx create mode 100644 src/components/Recipes/Recipes.css create mode 100644 src/components/Recipes/Recipes.tsx create mode 100644 src/components/Recipes/index.ts create mode 100644 src/components/Recipes/items/Animation.tsx create mode 100644 src/components/Recipes/items/Duocolor.tsx create mode 100644 src/components/Recipes/items/index.ts diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 6d30762..6268578 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -8,6 +8,7 @@ import IconGrid from "@/components/IconGrid"; import Footer from "@/components/Footer"; import ErrorBoundary from "@/components/ErrorBoundary"; import Notice from "@/components/Notice"; +import Recipes from "@/components/Recipes"; import { useIconParameters, usePersistSettings, @@ -21,7 +22,7 @@ const waitingFallback = ; const App: React.FC = () => { useIconParameters(); usePersistSettings(); - + const isDark = useRecoilValue(isDarkThemeSelector); const properties = useMemo( @@ -47,6 +48,7 @@ const App: React.FC = () => { +
); diff --git a/src/components/Recipes/Recipe.tsx b/src/components/Recipes/Recipe.tsx new file mode 100644 index 0000000..75cb198 --- /dev/null +++ b/src/components/Recipes/Recipe.tsx @@ -0,0 +1,22 @@ +import { ArrowCircleUpRight } from "@phosphor-icons/react"; + +export type RecipeProps = { + title: string; + url: string; + Example: () => JSX.Element; +}; + +const Recipe = ({ title, url, Example }: RecipeProps) => { + return ( + + {/*

{title}

*/} +
+ Open on StackBlitz + +
+ + + ); +}; + +export default Recipe; diff --git a/src/components/Recipes/Recipes.css b/src/components/Recipes/Recipes.css new file mode 100644 index 0000000..719d4e5 --- /dev/null +++ b/src/components/Recipes/Recipes.css @@ -0,0 +1,39 @@ +.recipes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); + gap: 16px; + padding-block: 32px; +} + +a.recipe { + position: relative; + color: initial; + padding: 16px; + display: grid; + place-items: center; +} + +.recipe-linkout { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background-color: var(--soft); + border-radius: 8px; + z-index: 1; + opacity: 0; + transition: opacity 200ms ease; +} + +.recipe-linkout:hover { + opacity: 1; +} + +.example { + display: grid; + grid-template-columns: 64px 64px; + gap: 12px; + place-items: center; +} diff --git a/src/components/Recipes/Recipes.tsx b/src/components/Recipes/Recipes.tsx new file mode 100644 index 0000000..8d25e3b --- /dev/null +++ b/src/components/Recipes/Recipes.tsx @@ -0,0 +1,29 @@ +import { IconContext } from "@phosphor-icons/react"; + +import Recipe from "./Recipe"; +import items from "./items"; +import "./Recipes.css"; + +const Recipes = () => { + return ( + <> +
+
+

Recipes

+

Cool stuff to do with Phosphor

+
+
+
+ +
+ {items.map((itemProps) => ( + + ))} +
+ +
+ + ); +}; + +export default Recipes; diff --git a/src/components/Recipes/index.ts b/src/components/Recipes/index.ts new file mode 100644 index 0000000..83dc03a --- /dev/null +++ b/src/components/Recipes/index.ts @@ -0,0 +1 @@ +export { default } from "./Recipes"; diff --git a/src/components/Recipes/items/Animation.tsx b/src/components/Recipes/items/Animation.tsx new file mode 100644 index 0000000..8222a36 --- /dev/null +++ b/src/components/Recipes/items/Animation.tsx @@ -0,0 +1,83 @@ +import { Cube } from "@phosphor-icons/react"; + +import { RecipeProps } from "../Recipe"; + +const recipe: RecipeProps = { + title: "SVG Wizardry", + url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css", + Example() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); + }, +}; + +export default recipe; diff --git a/src/components/Recipes/items/Duocolor.tsx b/src/components/Recipes/items/Duocolor.tsx new file mode 100644 index 0000000..4e9c186 --- /dev/null +++ b/src/components/Recipes/items/Duocolor.tsx @@ -0,0 +1,63 @@ +import { useMemo } from "react"; +import { + Icon, + IconProps, + Barricade, + GasCan, + IceCream, + FlyingSaucer, +} from "@phosphor-icons/react"; + +import { RecipeProps } from "../Recipe"; + +type DuocolorProps = Omit & { + Icon: Icon; + duocolor?: string; +}; + +function Duocolor({ Icon, duocolor, ...iconProps }: DuocolorProps) { + const [uuid, style] = useMemo(() => { + // UUID to make sure the inline stylesheet is "scoped" to this icon only. + // Could also easily be implemented with a regular CSS selector. + const uuid = "ph-" + Math.floor(Math.random() * 1_000_000).toString(16); + // const uuid = "ph-" + crypto.randomUUID(); + return [uuid, !duocolor ? null : createDuocolorStyle(uuid, duocolor)]; + }, [duocolor]); + + return ( + <> + {style} + + + ); +} + +function createDuocolorStyle(id: string, color: string) { + return ( + + ); +} + +const recipe: RecipeProps = { + title: "Duocolor", + url: "https://stackblitz.com/edit/react-ts-kvdzu1?file=App.tsx", + Example() { + return ( +
+ + + + +
+ ); + }, +}; + +export default recipe; diff --git a/src/components/Recipes/items/index.ts b/src/components/Recipes/items/index.ts new file mode 100644 index 0000000..d4ecc34 --- /dev/null +++ b/src/components/Recipes/items/index.ts @@ -0,0 +1,6 @@ +import animation from "./Animation"; +import duocolor from "./Duocolor"; +import { RecipeProps } from "../Recipe"; + +const items: RecipeProps[] = [animation, duocolor, duocolor, animation]; +export default items; diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css index c9f5576..17b73f6 100644 --- a/src/components/Toolbar/Toolbar.css +++ b/src/components/Toolbar/Toolbar.css @@ -1,9 +1,10 @@ -nav.toolbar { +.toolbar { position: -webkit-sticky; position: sticky; top: -1px; padding: 0; margin: 0; + color: white; background-color: var(--eggplant); z-index: 2; display: flex; From a14bdfb2819c042628abad92f08edee7cfacd460 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sun, 12 Mar 2023 16:05:59 -0600 Subject: [PATCH 2/7] feat(app): continue on recipes --- src/components/Recipes/Recipes.tsx | 2 +- src/components/Recipes/items/Animation.tsx | 24 +++------ src/components/Recipes/items/Duocolor.tsx | 4 +- src/components/Recipes/items/Gradient.tsx | 60 ++++++++++++++++++++++ src/components/Recipes/items/index.ts | 4 +- 5 files changed, 74 insertions(+), 20 deletions(-) create mode 100644 src/components/Recipes/items/Gradient.tsx diff --git a/src/components/Recipes/Recipes.tsx b/src/components/Recipes/Recipes.tsx index 8d25e3b..e2ff902 100644 --- a/src/components/Recipes/Recipes.tsx +++ b/src/components/Recipes/Recipes.tsx @@ -14,7 +14,7 @@ const Recipes = () => {
- +
{items.map((itemProps) => ( diff --git a/src/components/Recipes/items/Animation.tsx b/src/components/Recipes/items/Animation.tsx index 8222a36..fa36f20 100644 --- a/src/components/Recipes/items/Animation.tsx +++ b/src/components/Recipes/items/Animation.tsx @@ -2,42 +2,34 @@ import { Cube } from "@phosphor-icons/react"; import { RecipeProps } from "../Recipe"; -const recipe: RecipeProps = { +const animation: RecipeProps = { title: "SVG Wizardry", url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css", Example() { return (
- + - + - + @@ -80,4 +72,4 @@ const recipe: RecipeProps = { }, }; -export default recipe; +export default animation; diff --git a/src/components/Recipes/items/Duocolor.tsx b/src/components/Recipes/items/Duocolor.tsx index 4e9c186..3dbd7cf 100644 --- a/src/components/Recipes/items/Duocolor.tsx +++ b/src/components/Recipes/items/Duocolor.tsx @@ -45,7 +45,7 @@ function createDuocolorStyle(id: string, color: string) { ); } -const recipe: RecipeProps = { +const duocolor: RecipeProps = { title: "Duocolor", url: "https://stackblitz.com/edit/react-ts-kvdzu1?file=App.tsx", Example() { @@ -60,4 +60,4 @@ const recipe: RecipeProps = { }, }; -export default recipe; +export default duocolor; diff --git a/src/components/Recipes/items/Gradient.tsx b/src/components/Recipes/items/Gradient.tsx new file mode 100644 index 0000000..6b3a57e --- /dev/null +++ b/src/components/Recipes/items/Gradient.tsx @@ -0,0 +1,60 @@ +import { Fire, Image, Peace, RainbowCloud } from "@phosphor-icons/react"; + +import { RecipeProps } from "../Recipe"; + +const gradient: RecipeProps = { + title: "Gradients", + url: "", + Example() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); + }, +}; + +export default gradient; diff --git a/src/components/Recipes/items/index.ts b/src/components/Recipes/items/index.ts index d4ecc34..d0986f4 100644 --- a/src/components/Recipes/items/index.ts +++ b/src/components/Recipes/items/index.ts @@ -1,6 +1,8 @@ import animation from "./Animation"; import duocolor from "./Duocolor"; +import gradient from "./Gradient"; + import { RecipeProps } from "../Recipe"; -const items: RecipeProps[] = [animation, duocolor, duocolor, animation]; +const items: RecipeProps[] = [duocolor, animation, gradient]; export default items; From 94e66c3893684fc4f824415d484775e9d88b8a6b Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Mon, 13 Mar 2023 12:21:55 -0600 Subject: [PATCH 3/7] feat(app): more homepage style updates --- src/assets/ipad.svg | 53 +++ src/assets/map.svg | 65 ++++ src/assets/synth.svg | 325 ++++++++++++++++++ src/assets/watch.svg | 63 ++++ src/components/App/App.css | 21 +- src/components/App/App.tsx | 9 +- src/components/Banner/Banner.css | 32 +- src/components/Banner/Banner.tsx | 8 +- src/components/Footer/Footer.css | 7 +- src/components/Footer/Footer.tsx | 4 +- src/components/Header/Header.css | 36 +- src/components/Header/Header.tsx | 86 +++-- src/components/IconGrid/IconGrid.css | 3 +- src/components/Links/Links.css | 8 +- src/components/Links/Links.tsx | 16 + src/components/Recipes/Recipes.tsx | 4 +- .../SettingsActions/SettingsActions.css | 2 +- src/components/Tabs/Tabs.css | 12 +- src/components/Toolbar/Toolbar.css | 4 +- 19 files changed, 679 insertions(+), 79 deletions(-) create mode 100644 src/assets/ipad.svg create mode 100644 src/assets/map.svg create mode 100644 src/assets/synth.svg create mode 100644 src/assets/watch.svg diff --git a/src/assets/ipad.svg b/src/assets/ipad.svg new file mode 100644 index 0000000..cc63cb5 --- /dev/null +++ b/src/assets/ipad.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/map.svg b/src/assets/map.svg new file mode 100644 index 0000000..5b5e212 --- /dev/null +++ b/src/assets/map.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/synth.svg b/src/assets/synth.svg new file mode 100644 index 0000000..ab3c4d3 --- /dev/null +++ b/src/assets/synth.svg @@ -0,0 +1,325 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/watch.svg b/src/assets/watch.svg new file mode 100644 index 0000000..d34c1b7 --- /dev/null +++ b/src/assets/watch.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/App/App.css b/src/components/App/App.css index effc40e..8fd7ade 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -4,6 +4,13 @@ --yellow: #ffd171; --pale: #ffe8dc; --peach: #ffd5c0; + --sand: #bcadaf; + --foam: #e9ebe2; + --lichen: #d2d6c5; + --moss: #3c402b; + --moss-shadow: rgba(60, 64, 43, 0.2); + --stone: #1f2310; + --acid: #c4e456; --darkgreen: #245633; --blue: #397fff; --purple: #925bff; @@ -77,8 +84,9 @@ button.main-button { font-size: 20px; line-height: 30px; box-sizing: border-box; - border: 2px solid black; - box-shadow: 4px 4px 0 0 black; + color: var(--moss); + border: 1px solid var(--moss); + box-shadow: 2px 2px 0 0 var(--moss-shadow); transform: translate(0, 0); transition: all 0.2s ease; cursor: pointer; @@ -90,8 +98,8 @@ button.main-button { } button.main-button:active { - transform: translate(4px, 4px); - box-shadow: 0 0 0 0 black; + transform: translate(2px, 2px); + box-shadow: 0 0 0 0 var(--moss); } button.main-button svg { @@ -101,13 +109,12 @@ button.main-button svg { .button-container { display: flex; flex-wrap: wrap; - /* gap: 24px; */ } a.main-link { text-decoration: none; position: relative; - color: black; + color: var(--moss); } a.main-link:after { @@ -116,7 +123,7 @@ a.main-link:after { bottom: -2px; left: 0; width: 100%; - border-bottom: 1px solid black; + border-bottom: 1px solid var(--moss); transition: 0.2s; pointer-events: none; } diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 6268578..8eb4a11 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -27,10 +27,11 @@ const App: React.FC = () => { const properties = useMemo( () => ({ - "--foreground": isDark ? "white" : "black", - "--foreground-card": isDark ? "white" : "#35313D", - "--background": isDark ? "#35313D" : "white", - "--background-card": isDark ? "#413c48" : "#f6f5f6", + "--foreground": isDark ? "white" : "var(--moss)", + "--foreground-card": isDark ? "white" : "var(--moss)", + "--background": isDark ? "var(--stone)" : "var(--foam)", + "--background-card": isDark ? "var(--stone)" : "var(--foam)", + "--background-tab": isDark ? "var(--moss)" : "white", }), [isDark] ); diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css index 594b9da..24452f7 100644 --- a/src/components/Banner/Banner.css +++ b/src/components/Banner/Banner.css @@ -1,17 +1,20 @@ -.banner { +.banner-container { position: fixed; top: 0; left: 0; right: 0; - border-radius: 0; display: flex; + flex-direction: column; + gap: 8px; padding: 12px; color: white; margin: auto; - background-color: var(--eggplant); z-index: 1; } +.banner { +} + .banner .main-button { height: unset; min-height: 64px; @@ -19,27 +22,32 @@ } .banner a { - color: white; + color: inherit; } .banner-content { + flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; - flex: 1; - max-width: 1120px; + max-width: 560px; margin: auto; + padding: 12px 12px 12px 16px; + color: var(--moss); + background-color: var(--acid); + border: 1px solid var(--moss); + border-radius: 32px; + filter: drop-shadow(2px 2px 0 var(--moss-shadow)); font-family: "IBM Plex Mono"; + font-size: 14px; } .banner-button { color: inherit; - background: var(--eggplant); - height: unset !important; - padding: 0 !important; - margin: 0 !important; - border-radius: 48px !important; + background-color: unset; + padding: 0; + margin: 0; cursor: pointer; } @@ -51,5 +59,5 @@ display: grid; grid-template-columns: 32px 1fr; align-items: center; - gap: 20px; + gap: 12px; } diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index 8fcc873..2d2dbc2 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -53,7 +53,7 @@ const Banner = ({ id, children, onClose }: BannerProps) => { {!seen && ( { e.key === "Enter" && handleClose(); }} > - +
@@ -78,4 +78,8 @@ const Banner = ({ id, children, onClose }: BannerProps) => { ); }; +Banner.Container = ({ children }: { children: ReactNode }) => { + return
{children}
; +}; + export default Banner; diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 60a3601..f2a9567 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -1,5 +1,6 @@ footer { - background-color: var(--purple); + color: var(--moss); + background-color: var(--sand); } #back-to-top-button { @@ -12,8 +13,8 @@ footer { } #back-to-top-button:active { - transform: translate(4px, 4px) !important; - box-shadow: 0 0 0 0 black; + transform: translate(2px, 2px) !important; + box-shadow: 0 0 0 0 var(--moss-shadow); } #back-to-top-button svg { diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 58b1b0c..de82188 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -79,7 +79,7 @@ const Footer = (_: FooterProps) => { ) } > - + Buy us a coffee
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index f54fdad..169d39c 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,7 +1,8 @@ header { overflow: hidden; position: relative; - background-color: var(--yellow); + color: var(--moss); + background-color: var(--lichen); } .header-contents { @@ -36,6 +37,29 @@ header { cursor: cell; } +.map { + position: absolute; + transform: translate(300px, -44px) rotate(-10deg); +} + +.synth { + position: absolute; + transform: translate(800px, -274px) rotate(3deg); +} + +.ipad { + position: absolute; + top: -620px; + left: 500px; +} + +.watch { + position: absolute; + top: 160px; + left: 320px; + transform: rotate(-5deg); +} + .xray { opacity: 1; transition: opacity 200ms ease; @@ -83,6 +107,12 @@ header { left: 672px; top: -900px; } + + /* .ipad { + position: absolute; + top: -571px; + left: 500px; + } */ } @media screen and (min-width: 720px) and (max-width: 1239px) { @@ -144,8 +174,8 @@ header { #paperclips-three { display: initial; position: absolute; - left: 724px; - top: 694px; + left: 908px; + top: 360px; } .warning { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7bb4da9..da14287 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,7 +1,7 @@ import { ArrowCircleUpRight, ArrowCircleDown, - Broadcast, + MegaphoneSimple, } from "@phosphor-icons/react"; import Banner from "@/components/Banner"; @@ -21,6 +21,10 @@ import { ReactComponent as Receipt } from "@/assets/receipt.svg"; import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg"; import { ReactComponent as Calculator } from "@/assets/calculator.svg"; import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg"; +import { ReactComponent as IPad } from "@/assets/ipad.svg"; +import { ReactComponent as Map } from "@/assets/map.svg"; +import { ReactComponent as Synth } from "@/assets/synth.svg"; +import { ReactComponent as Watch } from "@/assets/watch.svg"; import Links from "@/components/Links"; import "./Header.css"; @@ -42,58 +46,72 @@ const handleScrollToIcons = () => const Header = (_: HeaderProps) => { return (
- -
- - - Phosphor 2.0 is out, with some big updates and some small API - changes. Check our{" "} - - documentation - {" "} - to see what's new! - -
- + + +
+ + + Phosphor 2.0 is out, with some big updates and some small API + changes. Check our{" "} + + documentation + {" "} + to see what's new! + +
+ +
- - - - - - - - + + + + + + + {/* */} + {/* */} + + {/* */} + {/* */} + + {/* */} + {/* */}

- Phosphor is a flexible icon family for interfaces, diagrams, - presentations —  - - whatever, really. + Phosphor is a flexible icon
+ family for interfaces and more.

- - - - - - + + + + + + + {/* */} + {/* */} + + {/* */} + {/* */} + + {/* */} + {/* */}
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index 2345f8e..a08f97b 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/src/components/IconGrid/IconGrid.css @@ -205,6 +205,7 @@ aside.detail-footer { gap: 24px; padding: 12px 24px; height: 136px; + /* filter: drop-shadow(2px 2px 0 var(--moss-shadow)); */ } figure { @@ -247,7 +248,7 @@ figcaption > p { aside.detail-footer { top: 16px; - bottom: -4px; + bottom: -20px; display: flex; flex-direction: column; height: 440px; diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css index 710549d..98b6d2e 100644 --- a/src/components/Links/Links.css +++ b/src/components/Links/Links.css @@ -7,7 +7,7 @@ /* column-gap: 72px; */ /* -webkit-column-gap: 72px; */ margin: 32px 0 64px; - max-height: 144px; + max-height: 220px; } .links > div { @@ -24,7 +24,7 @@ a.nav-link { text-decoration: none; position: relative; cursor: pointer; - color: black; + color: inherit; } a.nav-link:after { @@ -33,10 +33,10 @@ a.nav-link:after { bottom: -2px; left: 0; width: 0%; - border-bottom: 1px solid black; + border-bottom: 1px solid var(--moss); transition: 0.2s; } a.nav-link:hover:after { width: 100%; -} \ No newline at end of file +} diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx index 4d65524..72a66d9 100644 --- a/src/components/Links/Links.tsx +++ b/src/components/Links/Links.tsx @@ -88,6 +88,22 @@ const Links = (_: LinksProps) => { Request an icon
+ +
+ + + TKTK + +
+
+ + + Showcase TK + +
); }; diff --git a/src/components/Recipes/Recipes.tsx b/src/components/Recipes/Recipes.tsx index e2ff902..c4a86f7 100644 --- a/src/components/Recipes/Recipes.tsx +++ b/src/components/Recipes/Recipes.tsx @@ -6,7 +6,7 @@ import "./Recipes.css"; const Recipes = () => { return ( - <> +

Recipes

@@ -22,7 +22,7 @@ const Recipes = () => {
- +
); }; diff --git a/src/components/SettingsActions/SettingsActions.css b/src/components/SettingsActions/SettingsActions.css index da317c5..b853be1 100644 --- a/src/components/SettingsActions/SettingsActions.css +++ b/src/components/SettingsActions/SettingsActions.css @@ -11,7 +11,7 @@ button.action-button:active { } @media screen and (max-width: 558px) { - .action-button { + .toolbar .action-button { display: none; } } diff --git a/src/components/Tabs/Tabs.css b/src/components/Tabs/Tabs.css index 1c9a591..16a8f48 100644 --- a/src/components/Tabs/Tabs.css +++ b/src/components/Tabs/Tabs.css @@ -3,6 +3,14 @@ flex-direction: column; } +.tabs:has(button.tab:first-child:hover) .tab-content { + border-top-left-radius: 0; +} + +.tabs:has(button.tab:last-child:hover) .tab-content { + border-top-right-radius: 0; +} + .tabs-header { display: flex; align-items: center; @@ -30,7 +38,7 @@ button.tab:hover:not(.active) { } button.tab.active { - background-color: var(--background); + background-color: var(--background-tab); border-bottom: none; } @@ -40,7 +48,7 @@ button.tab.active { max-height: 77px; padding: 20px 20px 10px; border-radius: 8px; - background-color: var(--background); + background-color: var(--background-tab); overflow-y: auto; } diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css index 17b73f6..a333eec 100644 --- a/src/components/Toolbar/Toolbar.css +++ b/src/components/Toolbar/Toolbar.css @@ -5,12 +5,12 @@ padding: 0; margin: 0; color: white; - background-color: var(--eggplant); + background-color: var(--stone); z-index: 2; display: flex; justify-content: center; align-items: center; - box-shadow: 0 2px 0 0 var(--shadow); + box-shadow: 0 2px 0 0 var(--moss-shadow); } .toolbar-contents { From 307a2f5c7bf8733a43dba4554c893b663414a5a1 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sun, 19 Mar 2023 14:49:20 -0600 Subject: [PATCH 4/7] feat(app): add hand-drawn recipe --- src/assets/marker-green.svg | 40 ++++---- src/assets/ruler.svg | 105 +++++++++++++++++++++ src/components/Footer/Footer.css | 19 ++-- src/components/Footer/Footer.tsx | 6 +- src/components/Header/Header.tsx | 12 --- src/components/Recipes/Recipe.tsx | 2 +- src/components/Recipes/items/HandDrawn.tsx | 50 ++++++++++ src/components/Recipes/items/index.ts | 3 +- 8 files changed, 196 insertions(+), 41 deletions(-) create mode 100644 src/assets/ruler.svg create mode 100644 src/components/Recipes/items/HandDrawn.tsx diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg index 719b1af..b2853fd 100644 --- a/src/assets/marker-green.svg +++ b/src/assets/marker-green.svg @@ -1,17 +1,25 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/ruler.svg b/src/assets/ruler.svg new file mode 100644 index 0000000..325067e --- /dev/null +++ b/src/assets/ruler.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index f2a9567..807a54a 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -58,6 +58,8 @@ footer .links { } .illustrations-footer { + position: fixed; + margin: auto; display: none; -moz-user-select: none; -webkit-user-select: none; @@ -92,11 +94,9 @@ footer .links { } .illustrations-footer { - max-width: 100%; height: 440px; - display: flex; - justify-content: center; - overflow: hidden; + display: initial; + overflow-y: hidden; } } @@ -127,6 +127,11 @@ footer .links { right: -18px; top: 144px; } + + .ruler { + position: absolute; + transform: rotate(-5deg); + } } @media screen and (min-width: 1239px) { @@ -143,9 +148,7 @@ footer .links { .illustrations-footer { display: initial; position: absolute; - left: -240px; - top: 632px; - height: 584px; - overflow: hidden; + bottom: 0; + height: 500px !important; } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index de82188..b03db32 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -5,7 +5,7 @@ import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react"; import Links from "@/components/Links/Links"; import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg"; -import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg"; +import { ReactComponent as Ruler } from "@/assets/ruler.svg"; import { useMediaQuery } from "@/hooks"; import { selectionEntryAtom } from "@/state"; import "./Footer.css"; @@ -122,11 +122,11 @@ const Footer = (_: FooterProps) => { {" "} by Mikhail Sharanda.

-
- + +
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index da14287..8ac3526 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,18 +9,6 @@ import Banner from "@/components/Banner"; import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg"; import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg"; import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg"; -import { ReactComponent as Tablet } from "@/assets/tablet.svg"; -import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg"; -import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg"; -import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg"; -import { ReactComponent as Warning } from "@/assets/warning.svg"; -import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg"; -import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg"; -import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg"; -import { ReactComponent as Receipt } from "@/assets/receipt.svg"; -import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg"; -import { ReactComponent as Calculator } from "@/assets/calculator.svg"; -import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg"; import { ReactComponent as IPad } from "@/assets/ipad.svg"; import { ReactComponent as Map } from "@/assets/map.svg"; import { ReactComponent as Synth } from "@/assets/synth.svg"; diff --git a/src/components/Recipes/Recipe.tsx b/src/components/Recipes/Recipe.tsx index 75cb198..e375b3c 100644 --- a/src/components/Recipes/Recipe.tsx +++ b/src/components/Recipes/Recipe.tsx @@ -6,7 +6,7 @@ export type RecipeProps = { Example: () => JSX.Element; }; -const Recipe = ({ title, url, Example }: RecipeProps) => { +const Recipe = ({ url, Example }: RecipeProps) => { return ( {/*

{title}

*/} diff --git a/src/components/Recipes/items/HandDrawn.tsx b/src/components/Recipes/items/HandDrawn.tsx new file mode 100644 index 0000000..879c324 --- /dev/null +++ b/src/components/Recipes/items/HandDrawn.tsx @@ -0,0 +1,50 @@ +import { CassetteTape, Cube, Virus, ThumbsUp } from "@phosphor-icons/react"; + +import { RecipeProps } from "../Recipe"; + +const animation: RecipeProps = { + title: "Hand Drawn", + url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css", + Example() { + return ( +
+ + + + + + + + + + + +
+ ); + }, +}; + +export default animation; diff --git a/src/components/Recipes/items/index.ts b/src/components/Recipes/items/index.ts index d0986f4..4af0c09 100644 --- a/src/components/Recipes/items/index.ts +++ b/src/components/Recipes/items/index.ts @@ -1,8 +1,9 @@ import animation from "./Animation"; import duocolor from "./Duocolor"; import gradient from "./Gradient"; +import handdrawn from "./HandDrawn"; import { RecipeProps } from "../Recipe"; -const items: RecipeProps[] = [duocolor, animation, gradient]; +const items: RecipeProps[] = [duocolor, handdrawn, animation, gradient]; export default items; From bdc1996a0776ef512b40963d88d06f7842fd932c Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Tue, 21 Mar 2023 19:49:03 -0600 Subject: [PATCH 5/7] feat(app): massive ui updates all over the place --- index.html | 16 +- src/assets/ipad-spec.svg | 192 +++++ src/assets/ipad.svg | 98 ++- src/assets/map-spec.svg | 189 +++++ src/assets/map.svg | 197 +++-- src/assets/paperclips-2.svg | 33 + src/assets/paperclips-3.svg | 50 ++ src/assets/phosphor-logo.svg | 4 + src/assets/ruler-marker-spec.svg | 160 ++++ src/assets/ruler-marker.svg | 112 +++ src/assets/synth-spec.svg | 160 ++++ src/assets/synth.svg | 553 ++++++-------- src/assets/watch-spec.svg | 48 ++ src/assets/watch.svg | 98 ++- src/components/App/App.css | 93 ++- src/components/App/App.tsx | 12 +- src/components/Banner/Banner.css | 23 +- src/components/Footer/Footer.css | 3 +- src/components/Header/Header.css | 202 +++--- src/components/Header/Header.tsx | 50 +- src/components/Header/dynamic/Watch.tsx | 681 ++++++++++++++++++ src/components/IconGrid/IconGrid.css | 132 ++-- src/components/IconGrid/IconGrid.tsx | 17 +- src/components/IconGrid/IconGridItem.tsx | 2 +- .../IconGrid/{DetailFooter.tsx => Panel.tsx} | 258 +++++-- src/components/IconGrid/TagCloud.css | 12 +- src/components/Links/Links.tsx | 56 +- src/components/Notice/Notice.tsx | 35 +- src/components/SearchInput/SearchInput.css | 8 +- src/components/SearchInput/SearchInput.tsx | 7 +- .../SettingsActions/SettingsActions.css | 8 +- .../SettingsActions/SettingsActions.tsx | 59 +- src/components/StyleInput/StyleInput.css | 14 +- src/components/StyleInput/StyleInput.tsx | 14 +- src/components/Tabs/Tabs.css | 8 +- src/hooks/useSessionStorage.ts | 12 +- src/lib/index.ts | 2 +- 37 files changed, 2726 insertions(+), 892 deletions(-) create mode 100644 src/assets/ipad-spec.svg create mode 100644 src/assets/map-spec.svg create mode 100644 src/assets/paperclips-2.svg create mode 100644 src/assets/paperclips-3.svg create mode 100644 src/assets/phosphor-logo.svg create mode 100644 src/assets/ruler-marker-spec.svg create mode 100644 src/assets/ruler-marker.svg create mode 100644 src/assets/synth-spec.svg create mode 100644 src/assets/watch-spec.svg create mode 100644 src/components/Header/dynamic/Watch.tsx rename src/components/IconGrid/{DetailFooter.tsx => Panel.tsx} (52%) diff --git a/index.html b/index.html index e67608f..2ddf104 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Phosphor Icons - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/ipad.svg b/src/assets/ipad.svg index cc63cb5..614c0c1 100644 --- a/src/assets/ipad.svg +++ b/src/assets/ipad.svg @@ -1,53 +1,47 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/map-spec.svg b/src/assets/map-spec.svg new file mode 100644 index 0000000..215abb9 --- /dev/null +++ b/src/assets/map-spec.svg @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/map.svg b/src/assets/map.svg index 5b5e212..795e20d 100644 --- a/src/assets/map.svg +++ b/src/assets/map.svg @@ -1,65 +1,134 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/paperclips-2.svg b/src/assets/paperclips-2.svg new file mode 100644 index 0000000..18eb398 --- /dev/null +++ b/src/assets/paperclips-2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/paperclips-3.svg b/src/assets/paperclips-3.svg new file mode 100644 index 0000000..279e4dc --- /dev/null +++ b/src/assets/paperclips-3.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/phosphor-logo.svg b/src/assets/phosphor-logo.svg new file mode 100644 index 0000000..c651c82 --- /dev/null +++ b/src/assets/phosphor-logo.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/assets/ruler-marker-spec.svg b/src/assets/ruler-marker-spec.svg new file mode 100644 index 0000000..b99dc19 --- /dev/null +++ b/src/assets/ruler-marker-spec.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/ruler-marker.svg b/src/assets/ruler-marker.svg new file mode 100644 index 0000000..64530af --- /dev/null +++ b/src/assets/ruler-marker.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/synth-spec.svg b/src/assets/synth-spec.svg new file mode 100644 index 0000000..5780827 --- /dev/null +++ b/src/assets/synth-spec.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/synth.svg b/src/assets/synth.svg index ab3c4d3..2458d86 100644 --- a/src/assets/synth.svg +++ b/src/assets/synth.svg @@ -1,325 +1,230 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/watch-spec.svg b/src/assets/watch-spec.svg new file mode 100644 index 0000000..d6f75e1 --- /dev/null +++ b/src/assets/watch-spec.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/watch.svg b/src/assets/watch.svg index d34c1b7..80eacbc 100644 --- a/src/assets/watch.svg +++ b/src/assets/watch.svg @@ -1,61 +1,45 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - + diff --git a/src/components/App/App.css b/src/components/App/App.css index 8fd7ade..4e9db5c 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -1,26 +1,29 @@ :root { - --red: #ff6e60; + --red: #e8612b; --orange: #ff8e51; - --yellow: #ffd171; + --yellow: #f8c666; --pale: #ffe8dc; --peach: #ffd5c0; --sand: #bcadaf; + --vellum: #eeeae3; --foam: #e9ebe2; --lichen: #d2d6c5; --moss: #3c402b; - --moss-shadow: rgba(60, 64, 43, 0.2); - --stone: #1f2310; + --slate: #3e3d3a; + --stone: #343330; --acid: #c4e456; + --green: #1fa647; --darkgreen: #245633; - --blue: #397fff; + --blue: #1f7fea; --purple: #925bff; --eggplant: #35313d; - --neutral: #86838b; - --translucent: rgba(163, 159, 171, 0.1); + --moss-shadow: rgba(60, 64, 43, 0.2); + --shadow: rgba(0, 0, 0, 0.15); --scrim: rgba(255, 255, 255, 0.05); --sheer: rgba(194, 186, 196, 0.25); --soft: rgba(194, 186, 196, 0.7); - --shadow: rgba(0, 0, 0, 0.15); + --translucent: rgba(255, 255, 255, 0.5); + --neutral: #9b9b9b; } body { @@ -31,14 +34,18 @@ body { } ::selection { - color: white; - background-color: black; + color: var(--moss); + background-color: var(--acid); } h2 { font-weight: 400; } +p { + font-size: 16px; +} + img { -moz-user-select: none; -webkit-user-select: none; @@ -49,17 +56,26 @@ img { pre, code { font-family: "IBM Plex Mono", "Courier New", monospace; - font-size: 12px; } pre { box-sizing: border-box; margin: 0; border-radius: 6px; - font-size: 12x; + font-size: 13px; white-space: pre-wrap; } +hr { + display: block; + height: 0px; + border: 0; + border-bottom: 1px solid var(--border-secondary); + margin: 1em 0; + padding: 0; + margin: 8px 0; +} + input { font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; @@ -67,21 +83,25 @@ input { button { border: none; - display: flex; + display: inline-flex; align-items: center; justify-content: flex-start; cursor: pointer; } +button:disabled { + cursor: not-allowed !important; +} + button.main-button { - height: 64px; - padding: 0 48px 0 40px; + height: 56px; + padding: 0 32px 0 28px; background-color: white; border-radius: 8px; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 600; - font-size: 20px; + font-size: 16px; line-height: 30px; box-sizing: border-box; color: var(--moss); @@ -103,7 +123,7 @@ button.main-button:active { } button.main-button svg { - margin-right: 12px; + margin-right: 8px; } .button-container { @@ -147,7 +167,7 @@ a.main-link:hover:after { .card { border-radius: 8px; - border: 2px solid var(--translucent); + border: 1px solid var(--border-card); } .primary { @@ -159,3 +179,40 @@ a.main-link:hover:after { color: var(--foreground-card); background-color: var(--background-card); } + +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-12px); + } + 60% { + transform: translateY(-4px); + } +} + +.bounce { + animation: bounce 1s ease-out 1; +} + +@keyframes spin { + 0%, + 20% { + transform: rotate(0); + } + 40% { + transform: rotate(200deg); + } + 100% { + transform: rotate(540deg); + } +} + +.spin { + animation: spin 1000ms ease-out 1; +} diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 8eb4a11..b6e6843 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -8,7 +8,7 @@ import IconGrid from "@/components/IconGrid"; import Footer from "@/components/Footer"; import ErrorBoundary from "@/components/ErrorBoundary"; import Notice from "@/components/Notice"; -import Recipes from "@/components/Recipes"; +// import Recipes from "@/components/Recipes"; import { useIconParameters, usePersistSettings, @@ -29,9 +29,11 @@ const App: React.FC = () => { () => ({ "--foreground": isDark ? "white" : "var(--moss)", "--foreground-card": isDark ? "white" : "var(--moss)", - "--background": isDark ? "var(--stone)" : "var(--foam)", - "--background-card": isDark ? "var(--stone)" : "var(--foam)", - "--background-tab": isDark ? "var(--moss)" : "white", + "--background": isDark ? "var(--slate)" : "var(--vellum)", + "--background-card": isDark ? "var(--stone)" : "var(--vellum)", + "--background-layer": isDark ? "var(--scrim)" : "var(--translucent)", + "--border-card": isDark ? "var(--shadow)" : "var(--moss-shadow)", + "--border-secondary": isDark ? "var(--scrim)" : "var(--moss-shadow)", }), [isDark] ); @@ -49,7 +51,7 @@ const App: React.FC = () => { - + {/* */}
); diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css index 24452f7..101ec24 100644 --- a/src/components/Banner/Banner.css +++ b/src/components/Banner/Banner.css @@ -10,6 +10,7 @@ color: white; margin: auto; z-index: 1; + pointer-events: none; } .banner { @@ -31,7 +32,7 @@ align-items: center; justify-content: space-between; gap: 20px; - max-width: 560px; + max-width: 600px; margin: auto; padding: 12px 12px 12px 16px; color: var(--moss); @@ -41,6 +42,7 @@ filter: drop-shadow(2px 2px 0 var(--moss-shadow)); font-family: "IBM Plex Mono"; font-size: 14px; + pointer-events: initial; } .banner-button { @@ -61,3 +63,22 @@ align-items: center; gap: 12px; } + +@media screen and (max-width: 719px) { + .banner-container { + padding: 0; + } + + .banner-content { + align-items: flex-start; + border-radius: 0; + border: none; + border-bottom: 1px solid var(--moss); + margin: 0; + max-width: unset; + } + + .message { + align-items: flex-start; + } +} diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 807a54a..935e7b6 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -10,6 +10,7 @@ footer { border-radius: 50%; z-index: 2; font-size: 56px; + justify-content: center; } #back-to-top-button:active { @@ -18,7 +19,7 @@ footer { } #back-to-top-button svg { - margin-right: unset; + margin-right: 0 !important; } .container { diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 169d39c..01c2a21 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -2,7 +2,7 @@ header { overflow: hidden; position: relative; color: var(--moss); - background-color: var(--lichen); + background-color: var(--vellum); } .header-contents { @@ -14,6 +14,28 @@ header { margin: auto; } +@keyframes tickle { + 0% { + transform: none; + } + 50% { + transform: scale(1.1) rotate(-12deg) translateY(-2px); + } + 100% { + transform: scale(1.2) rotate(12deg) translateY(-4px); + } +} + +#logo { + margin-top: 56px; + transition: color 150ms ease; +} + +#logo:hover { + color: var(--sand); + animation: tickle 250ms ease 0ms infinite alternate forwards; +} + .illustrations-top { position: relative; } @@ -22,7 +44,8 @@ header { position: relative; } -.intro { +.intro, +.illustrations-top { margin: 0 8%; max-width: 666px; } @@ -37,20 +60,37 @@ header { cursor: cell; } +#paperclips { + position: absolute; + left: 110px; + top: 152px; +} + +#paperclips-three { + display: initial; + position: absolute; + left: 776px; + top: 370px; +} + .map { position: absolute; - transform: translate(300px, -44px) rotate(-10deg); + top: -44px; + left: 300px; + transform: rotate(-10deg); } .synth { position: absolute; - transform: translate(800px, -274px) rotate(3deg); + top: -235px; + left: 800px; + transform: rotate(3deg); } .ipad { position: absolute; - top: -620px; - left: 500px; + top: -626px; + left: 308px; } .watch { @@ -69,81 +109,45 @@ header { opacity: 0; } -#paperclips-three { - display: none; -} - @media screen and (max-width: 1239px) { .illustrations-top { height: 382px; } - #marker-purple { - position: absolute; - left: 28px; - top: -158px; + .map { + top: -10px; + left: -80px; } - .billiard-ball { - position: absolute; - left: 132px; - top: -98px; + .watch { + top: 8px; + left: 90px; } #paperclips { - position: absolute; - left: 110px; - top: 152px; + display: none; } - - .warning { - position: absolute; - left: 394px; - top: -304px; - } - - .tablet { - position: absolute; - left: 672px; - top: -900px; - } - - /* .ipad { - position: absolute; - top: -571px; - left: 500px; - } */ } @media screen and (min-width: 720px) and (max-width: 1239px) { - .intro { - margin: 0 auto; - } - .illustrations-bottom { - height: 612px; + height: 500px; } - .cutting-mat { - position: absolute; - left: 96px; + .synth { + top: -110px; + left: 620px; } - .receipt { - position: absolute; - left: -36px; - top: 190px; - } - - .calculator { - position: absolute; - left: 632px; - top: 170px; + #paperclips-three { + top: 506px; + left: 550px; } } @media screen and (min-width: 1240px) { - .intro { + .intro, + .illustrations-top { margin: 0 auto 0 140px; } @@ -152,59 +156,7 @@ header { } .illustrations-bottom { - height: 606px; - } - - #marker-purple { - position: absolute; - left: 144px; - top: -158px; - } - - .billiard-ball { - position: absolute; - left: 900px; - top: 400px; - } - - #paperclips { - display: none; - } - - #paperclips-three { - display: initial; - position: absolute; - left: 908px; - top: 360px; - } - - .warning { - position: absolute; - left: 1170px; - top: 400px; - } - - .tablet { - position: absolute; - left: 578px; - top: -900px; - } - - .cutting-mat { - position: absolute; - left: 120px; - } - - .receipt { - position: absolute; - left: -16px; - top: 190px; - } - - .calculator { - position: absolute; - left: 924px; - top: 114px; + height: 550px; } } @@ -215,11 +167,35 @@ header { } .illustrations-top { - height: 352px; + height: 200px; + } + + #paperclips-three { + top: -70px; + left: -167px; + } + + .ipad { + display: none; + } + + .map { + top: 0px; + left: -60px; + } + + .synth { + top: -340px; + left: 400px; + } + + .watch { + top: 0; + left: 100px; } .illustrations-bottom { - display: none; + height: 360px; } .links { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 8ac3526..c628bf3 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -6,13 +6,17 @@ import { import Banner from "@/components/Banner"; -import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg"; -import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg"; -import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg"; +import { ReactComponent as PhosphorLogo } from "@/assets/phosphor-logo.svg"; +import { ReactComponent as PaperClipsTwo } from "@/assets/paperclips-2.svg"; +import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-3.svg"; import { ReactComponent as IPad } from "@/assets/ipad.svg"; +import { ReactComponent as IPadSpec } from "@/assets/ipad-spec.svg"; import { ReactComponent as Map } from "@/assets/map.svg"; +import { ReactComponent as MapSpec } from "@/assets/map-spec.svg"; import { ReactComponent as Synth } from "@/assets/synth.svg"; -import { ReactComponent as Watch } from "@/assets/watch.svg"; +import { ReactComponent as SynthSpec } from "@/assets/synth-spec.svg"; + +import { Watch, WatchSpec } from "./dynamic/Watch"; import Links from "@/components/Links"; import "./Header.css"; @@ -37,7 +41,7 @@ const Header = (_: HeaderProps) => {
- + Phosphor 2.0 is out, with some big updates and some small API changes. Check our{" "} @@ -51,27 +55,17 @@ const Header = (_: HeaderProps) => {
- - - +

- Phosphor is a flexible icon
- family for interfaces and more. + Phosphor is a flexible icon family for interfaces, diagrams, + presentations — whatever, really.

+ + - + + + + FOOO + + - {/* */} - {/* */} - - {/* */} - {/* */} - - {/* */} - {/* */} +
diff --git a/src/components/Header/dynamic/Watch.tsx b/src/components/Header/dynamic/Watch.tsx new file mode 100644 index 0000000..234a033 --- /dev/null +++ b/src/components/Header/dynamic/Watch.tsx @@ -0,0 +1,681 @@ +import { SVGAttributes } from "react"; + +import { iconCount } from "@/lib/icons"; + +export const Watch = (props: SVGAttributes) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {iconCount} icons + + + + + + + + + + + + + + + + + + + ); +}; + +export const WatchSpec = (props: SVGAttributes) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {iconCount} icons + + + + + + + + + + + + ); +}; diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index a08f97b..32021b6 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/src/components/IconGrid/IconGrid.css @@ -1,7 +1,6 @@ .grid-container { position: relative; padding: 32px 16px; - /* min-height: 80vh; */ z-index: 1; content-visibility: auto; color: var(--foreground); @@ -33,52 +32,33 @@ } .grid-item:hover { - background-color: var(--translucent); + background-color: var(--background-layer); } .grid-item:focus { outline: none; - border: 2px solid var(--translucent); + border: 1px solid var(--background-layer); } .grid-item p { font-size: 12px; line-height: 16px; - color: var(--neutral); + opacity: 0.75; margin-top: 12px; text-align: center; } -@media screen and (max-width: 536px) { - .grid-container { - padding: 32px 8px; - } - - .grid-item { - width: 108px; - height: unset; - padding: 4px 0; - justify-content: flex-start; - border: 2px solid transparent; - } - - .grid-item p { - padding: 0 4px; - } -} - .versioning { margin-top: 2px; - opacity: 0.6; + opacity: 0.75; } .snippet { + position: relative; width: 100%; } .snippet pre { - display: flex; - align-items: flex-start; text-overflow: ellipsis; -moz-user-select: all; -webkit-user-select: all; @@ -97,22 +77,14 @@ } } -.snippet span { - flex: 1; -} - .snippet button { - background-color: transparent; + position: absolute; + top: -8px; + right: -8px; margin: 0; - padding: 0; - height: 24px; cursor: pointer; } -.snippet button:disabled { - cursor: not-allowed; -} - .button-row { display: flex; flex-wrap: wrap; @@ -132,6 +104,11 @@ margin-right: 8px; } +.disabled { + color: var(--neutral); + user-select: none; +} + .close-icon { position: absolute; top: 12px; @@ -179,17 +156,24 @@ min-height: 80vh; max-width: 1120px; margin: auto; - white-space: nowrap; } -.empty-list p { - max-width: 80%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.empty-list-box p { margin-bottom: 0; } +.empty-list-box { + max-width: 80%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + padding: 32px; + border-radius: 8px; + background-color: var(--background-layer); +} + .beacon { position: relative; top: -96px; @@ -201,11 +185,10 @@ aside.detail-footer { margin: auto; max-width: 1120px; display: grid; - grid-template-columns: 232px 1fr; + grid-template-columns: 280px 1fr; gap: 24px; padding: 12px 24px; - height: 136px; - /* filter: drop-shadow(2px 2px 0 var(--moss-shadow)); */ + height: 146px; } figure { @@ -229,18 +212,51 @@ figcaption > p { .detail-preview { display: flex; flex-direction: column; - justify-content: center; - gap: 24px; + justify-content: space-between; + padding-block: 8px; +} + +.detail-meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 4px; } .detail-actions { - display: flex; - flex-direction: row; + /* display: inline-flex; align-items: center; - gap: 8px; + justify-content: flex-start; */ + display: inline-grid; + grid-template-columns: 66px 66px 92px; + gap: 6px; +} + +.action-button { + color: var(--foreground); + background-color: transparent; + font-size: 11px; + padding: 6px; + border-radius: 4px; +} + +.action-button.text { + padding: 6px 10px 6px 6px; +} + +.action-button:hover { + background-color: var(--sheer) !important; +} + +.detail-actions .action-button svg { + margin-right: 6px; } @media screen and (max-width: 719px) { + .grid-container { + padding: 16px 8px; + } + .close-button { top: 4px; right: 12px; @@ -252,9 +268,21 @@ figcaption > p { display: flex; flex-direction: column; height: 440px; + margin-inline: -10px; + border-radius: 0; } } -.action-button svg { - margin-right: 6px; +@media screen and (max-width: 536px) { + .grid-item { + width: 108px; + height: unset; + padding: 4px 0; + justify-content: flex-start; + border: 1px solid transparent; + } + + .grid-item p { + padding: 0 4px; + } } diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx index 5bc3e0d..891ab1a 100644 --- a/src/components/IconGrid/IconGrid.tsx +++ b/src/components/IconGrid/IconGrid.tsx @@ -9,10 +9,11 @@ import { iconColorAtom, filteredQueryResultsSelector, isDarkThemeSelector, + searchQueryAtom, } from "@/state"; import Notice from "@/components/Notice"; -import DetailFooter from "./DetailFooter"; +import Panel from "./Panel"; import IconGridItem from "./IconGridItem"; import TagCloud from "./TagCloud"; import "./IconGrid.css"; @@ -34,6 +35,7 @@ const IconGrid = (_: IconGridProps) => { const size = useRecoilValue(iconSizeAtom); const color = useRecoilValue(iconColorAtom); const isDark = useRecoilValue(isDarkThemeSelector); + const query = useRecoilValue(searchQueryAtom); const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector); const originOffset = useRef({ top: 0, left: 0 }); @@ -45,8 +47,15 @@ const IconGrid = (_: IconGridProps) => { if (!filteredQueryResults.length) return ( - - Try searching a category or keyword: + + No results for "{query}". Try searching a category or + keyword: + + } + > ); @@ -66,7 +75,7 @@ const IconGrid = (_: IconGridProps) => { /> ))} - +
); diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx index 505f40d..c0345d0 100644 --- a/src/components/IconGrid/IconGridItem.tsx +++ b/src/components/IconGrid/IconGridItem.tsx @@ -76,7 +76,7 @@ const IconGridItem = (props: IconGridItemProps) => { tabIndex={0} style={{ ...style, - backgroundColor: isOpen ? "var(--translucent)" : undefined, + backgroundColor: isOpen ? "var(--background-layer)" : undefined, }} custom={delayRef} transition={transition} diff --git a/src/components/IconGrid/DetailFooter.tsx b/src/components/IconGrid/Panel.tsx similarity index 52% rename from src/components/IconGrid/DetailFooter.tsx rename to src/components/IconGrid/Panel.tsx index b21c321..9814a60 100644 --- a/src/components/IconGrid/DetailFooter.tsx +++ b/src/components/IconGrid/Panel.tsx @@ -1,4 +1,10 @@ -import React, { useRef, useEffect, CSSProperties, useMemo } from "react"; +import React, { + useRef, + useState, + useEffect, + useMemo, + HTMLAttributes, +} from "react"; import { useRecoilValue, useRecoilState } from "recoil"; import { useHotkeys } from "react-hotkeys-hook"; import { motion, AnimatePresence, Variants } from "framer-motion"; @@ -7,8 +13,10 @@ import { saveAs } from "file-saver"; import { Copy, CheckCircle, - DownloadSimple, + ArrowFatLinesDown, XCircle, + CaretDoubleLeft, + CaretDoubleRight, } from "@phosphor-icons/react"; import ReactGA from "react-ga4"; @@ -41,15 +49,19 @@ const variants: Record = { const RENDERED_SNIPPETS = [ SnippetType.REACT, - SnippetType.VUE, SnippetType.HTML, + SnippetType.VUE, SnippetType.FLUTTER, SnippetType.ELM, ]; -const buttonColor = "#35313D"; -const successColor = "#1FA647"; -const disabledColor = "#B7B7B7"; +enum CopyType { + SVG, + SVG_RAW, + SVG_DATA, + PNG, + PNG_DATA, +} function cloneWithSize(svg: SVGSVGElement, size: number): SVGSVGElement { const sized = svg.cloneNode(true) as SVGSVGElement; @@ -58,20 +70,43 @@ function cloneWithSize(svg: SVGSVGElement, size: number): SVGSVGElement { return sized; } -const DetailFooter = () => { +const ActionButton = ( + props: { + active?: boolean; + label: string; + download?: boolean; + } & HTMLAttributes +) => { + const { active, download, label, ...rest } = props; + const Icon = download ? ArrowFatLinesDown : Copy; + return ( + + ); +}; + +const Panel = () => { const [entry, setSelectionEntry] = useRecoilState(selectionEntryAtom); const weight = useRecoilValue(iconWeightAtom); const size = useRecoilValue(iconSizeAtom); const color = useRecoilValue(iconColorAtom); const isDark = useRecoilValue(isDarkThemeSelector); - const [copied, setCopied] = useTransientState( + const [copied, setCopied] = useTransientState( false, 2000 ); const ref = useRef(null); - const [{ i }, setInitialTab] = useSessionStorage("tab", { i: 0 }); + const [showMoreActions, setShowMoreActions] = useState(false); + + const [i, setInitialTab] = useSessionStorage("tab", 0); const isMobile = useMediaQuery("(max-width: 719px)"); @@ -88,11 +123,6 @@ const DetailFooter = () => { color, }); - const snippetButtonStyle: CSSProperties = - weight === "duotone" - ? { color: disabledColor, userSelect: "none" } - : { color: "currentcolor" }; - const tabs = [ { header: "Tags", @@ -101,9 +131,9 @@ const DetailFooter = () => { name={entry.name} tags={Array.from( new Set([ + ...entry.tags, ...entry.categories, ...entry.name.split("-"), - ...entry.tags, ]) )} /> @@ -117,31 +147,27 @@ const DetailFooter = () => { header: type, content: (
- 
-                
+              
+                
                   {isWeightSupported
                     ? snippets[type]
                     : "This weight is not yet supported"}
                 
                 
-              
-
- setInitialTab({ i })} - /> + + ); }; diff --git a/src/components/StyleInput/StyleInput.css b/src/components/StyleInput/StyleInput.css index 279205e..9312a09 100644 --- a/src/components/StyleInput/StyleInput.css +++ b/src/components/StyleInput/StyleInput.css @@ -28,7 +28,7 @@ .react-dropdown-select:focus-within { background-color: white; - color: black; + color: var(--moss); outline: none !important; box-shadow: none !important; } @@ -62,21 +62,21 @@ box-shadow: none; } .react-dropdown-select-item { - color: black; + color: var(--moss); } .react-dropdown-select-item:hover { - background-color: var(--yellow) !important; + background-color: var(--acid) !important; } .react-dropdown-select-item.react-dropdown-select-item-selected, .react-dropdown-select-item.react-dropdown-select-item-active { - color: black !important; - background-color: var(--yellow) !important; + color: var(--moss) !important; + background-color: var(--acid) !important; } .react-dropdown-select-item:focus { - color: black !important; - background-color: var(--yellow) !important; + color: var(--moss) !important; + background-color: var(--acid) !important; } .react-dropdown-select-item.react-dropdown-select-item-disabled { diff --git a/src/components/StyleInput/StyleInput.tsx b/src/components/StyleInput/StyleInput.tsx index c18c285..f5571ec 100644 --- a/src/components/StyleInput/StyleInput.tsx +++ b/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-icons/react"; +import { PencilSimpleLine } from "@phosphor-icons/react"; import { IconStyle } from "@phosphor-icons/core"; import { iconWeightAtom } from "@/state"; @@ -14,32 +14,32 @@ const options: WeightOption[] = [ { key: "Thin", value: IconStyle.THIN, - icon: , + icon: , }, { key: "Light", value: IconStyle.LIGHT, - icon: , + icon: , }, { key: "Regular", value: IconStyle.REGULAR, - icon: , + icon: , }, { key: "Bold", value: IconStyle.BOLD, - icon: , + icon: , }, { key: "Fill", value: IconStyle.FILL, - icon: , + icon: , }, { key: "Duotone", value: IconStyle.DUOTONE, - icon: , + icon: , }, ]; diff --git a/src/components/Tabs/Tabs.css b/src/components/Tabs/Tabs.css index 16a8f48..0aff447 100644 --- a/src/components/Tabs/Tabs.css +++ b/src/components/Tabs/Tabs.css @@ -38,17 +38,17 @@ button.tab:hover:not(.active) { } button.tab.active { - background-color: var(--background-tab); + background-color: var(--background-layer); border-bottom: none; } .tab-content { flex: 1; - height: 77px; - max-height: 77px; + height: 86px; + max-height: 86px; padding: 20px 20px 10px; border-radius: 8px; - background-color: var(--background-tab); + background-color: var(--background-layer); overflow-y: auto; } diff --git a/src/hooks/useSessionStorage.ts b/src/hooks/useSessionStorage.ts index 9ce2453..0b7793b 100644 --- a/src/hooks/useSessionStorage.ts +++ b/src/hooks/useSessionStorage.ts @@ -5,7 +5,7 @@ type Initializer = () => S; type Setter = (prev: S) => S; type Action = S | Setter | Initializer; -function expand(action: Action, prev?: S) { +function expand(action: Action, prev?: S) { if (typeof action === "function") { return (action as Setter)(prev!); } else { @@ -13,13 +13,19 @@ function expand(action: Action, prev?: S) { } } -export default function useSessionStorage( +export default function useSessionStorage( key: string, fallbackState: S | (() => S) ): [S, Dispatch>, (partial: Partial) => void] { const [value, setValue] = useState(() => { let val = sessionStorage.getItem(STORAGE_KEY + key); - if (val) return JSON.parse(val) as S; + if (val) { + try { + return JSON.parse(val) as S; + } catch (_) { + return val as S; + } + } return expand(fallbackState); }); diff --git a/src/lib/index.ts b/src/lib/index.ts index 921793a..f03970b 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -8,7 +8,7 @@ export interface IconEntry extends CoreEntry { export enum SnippetType { REACT = "React", VUE = "Vue", - HTML = "HTML/CSS", + HTML = "Web", FLUTTER = "Flutter", ELM = "Elm", } From 1e95c69d437666453011980b7ff5664e0a3beb65 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Wed, 22 Mar 2023 01:29:34 -0600 Subject: [PATCH 6/7] feat(app): all the rest of the things --- package.json | 2 +- src/assets/paperclips-2.svg | 35 ++-- src/assets/paperclips-3.svg | 56 ++---- src/assets/ruler-marker-spec.svg | 182 +++++++++--------- src/assets/ruler-marker.svg | 1 + src/assets/synth.svg | 117 ++++++----- src/components/App/App.css | 43 +++-- src/components/App/App.tsx | 3 + src/components/Footer/Footer.css | 124 ++++++------ src/components/Footer/Footer.tsx | 103 +++++++--- src/components/Header/Header.tsx | 2 +- src/components/IconGrid/IconGrid.css | 9 +- src/components/IconGrid/IconGridItem.tsx | 2 +- src/components/IconGrid/Panel.tsx | 39 ++-- src/components/IconGrid/TagCloud.css | 4 +- src/components/Links/Links.css | 2 +- .../SettingsActions/SettingsActions.tsx | 2 +- src/components/Tabs/Tabs.css | 2 +- 18 files changed, 369 insertions(+), 359 deletions(-) diff --git a/package.json b/package.json index f4e8a74..dad1129 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "phosphor-home", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "homepage": "https://phosphoricons.com", "author": { diff --git a/src/assets/paperclips-2.svg b/src/assets/paperclips-2.svg index 18eb398..75e41e4 100644 --- a/src/assets/paperclips-2.svg +++ b/src/assets/paperclips-2.svg @@ -1,32 +1,19 @@ - - - + + + - - - + + + + + - - - - - - - - - - - - - - - - - - + + + diff --git a/src/assets/paperclips-3.svg b/src/assets/paperclips-3.svg index 279e4dc..68d3971 100644 --- a/src/assets/paperclips-3.svg +++ b/src/assets/paperclips-3.svg @@ -1,49 +1,31 @@ - - - + + + - - - + + + + - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + diff --git a/src/assets/ruler-marker-spec.svg b/src/assets/ruler-marker-spec.svg index b99dc19..6c0a8eb 100644 --- a/src/assets/ruler-marker-spec.svg +++ b/src/assets/ruler-marker-spec.svg @@ -1,113 +1,113 @@ - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - + + + + + + + + + @@ -116,7 +116,7 @@ - + @@ -141,7 +141,7 @@ - + @@ -153,7 +153,7 @@ - + diff --git a/src/assets/ruler-marker.svg b/src/assets/ruler-marker.svg index 64530af..ff0e259 100644 --- a/src/assets/ruler-marker.svg +++ b/src/assets/ruler-marker.svg @@ -1,4 +1,5 @@ + diff --git a/src/assets/synth.svg b/src/assets/synth.svg index 2458d86..d047fa4 100644 --- a/src/assets/synth.svg +++ b/src/assets/synth.svg @@ -1,153 +1,149 @@ - - - - - + - - - - + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -171,10 +167,10 @@ - + - + @@ -183,10 +179,10 @@ - + - + @@ -221,6 +217,7 @@ + diff --git a/src/components/App/App.css b/src/components/App/App.css index 4e9db5c..ebd73bc 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -2,28 +2,38 @@ --red: #e8612b; --orange: #ff8e51; --yellow: #f8c666; - --pale: #ffe8dc; - --peach: #ffd5c0; + --mustard: #d6971e; + --rust: #92543b; + --earth: #825b61; --sand: #bcadaf; + --blush: #f2cbd1; + --pale: #ffe8dc; --vellum: #eeeae3; + --ghost: #f7f5f1; --foam: #e9ebe2; --lichen: #d2d6c5; --moss: #3c402b; --slate: #3e3d3a; --stone: #343330; + --dark-grey: #656461; --acid: #c4e456; + --olive: #a4b55b; --green: #1fa647; - --darkgreen: #245633; + --darkgreen: #2e321f; + --deepgreen: #1f2310; --blue: #1f7fea; --purple: #925bff; --eggplant: #35313d; --moss-shadow: rgba(60, 64, 43, 0.2); + --slate-sheer: rgba(62, 61, 58, 0.5); + --ghost-sheer: rgba(247, 245, 241, 0.5); + --elephant: #656461; + --pewter: #c9c5bf; --shadow: rgba(0, 0, 0, 0.15); --scrim: rgba(255, 255, 255, 0.05); --sheer: rgba(194, 186, 196, 0.25); --soft: rgba(194, 186, 196, 0.7); --translucent: rgba(255, 255, 255, 0.5); - --neutral: #9b9b9b; } body { @@ -140,7 +150,7 @@ a.main-link { a.main-link:after { content: ""; position: absolute; - bottom: -2px; + bottom: 0.15em; left: 0; width: 100%; border-bottom: 1px solid var(--moss); @@ -152,12 +162,16 @@ a.main-link:hover:after { width: 0%; } +.name { + color: var(--foreground-secondary); +} + .badge.new { - color: var(--red); + color: var(--mustard); } .badge.updated { - color: var(--blue); + color: var(--olive); } .badge { @@ -182,17 +196,16 @@ a.main-link:hover:after { @keyframes bounce { 0%, - 20%, + 30%, 50%, - 80%, 100% { transform: translateY(0); } - 40% { + 20% { transform: translateY(-12px); } - 60% { - transform: translateY(-4px); + 40% { + transform: translateY(-7px); } } @@ -201,13 +214,13 @@ a.main-link:hover:after { } @keyframes spin { - 0%, - 20% { + 0% { transform: rotate(0); } - 40% { + 20% { transform: rotate(200deg); } + 80%, 100% { transform: rotate(540deg); } diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index b6e6843..499a3a9 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -29,11 +29,14 @@ const App: React.FC = () => { () => ({ "--foreground": isDark ? "white" : "var(--moss)", "--foreground-card": isDark ? "white" : "var(--moss)", + "--foreground-secondary": isDark ? "var(--pewter)" : "var(--elephant)", "--background": isDark ? "var(--slate)" : "var(--vellum)", "--background-card": isDark ? "var(--stone)" : "var(--vellum)", "--background-layer": isDark ? "var(--scrim)" : "var(--translucent)", "--border-card": isDark ? "var(--shadow)" : "var(--moss-shadow)", "--border-secondary": isDark ? "var(--scrim)" : "var(--moss-shadow)", + "--hover-tabs": isDark ? "var(--slate-sheer)" : "var(--ghost-sheer)", + "--hover-buttons": isDark ? "var(--scrim)" : "var(--slate)", }), [isDark] ); diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 935e7b6..ddfece7 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -11,6 +11,7 @@ footer { z-index: 2; font-size: 56px; justify-content: center; + padding: 0 30px; } #back-to-top-button:active { @@ -48,24 +49,68 @@ footer .links { .fine-print { position: relative; - margin: 72px 0 0; - padding-bottom: 32px; + margin: 104px 0 0; overflow: hidden; } .fine-print p { font-size: 16px; line-height: 24px; + padding-bottom: 56px; + margin: 0; } .illustrations-footer { - position: fixed; + position: absolute; + overflow-y: hidden; + width: 300px; margin: auto; - display: none; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; - pointer-events: none; + bottom: 0; + left: -456px; + height: 490px; +} + +.ruler-marker { + position: absolute; +} + +@media screen and (min-width: 720px) { + .outro { + margin: 0 auto; + } + + .fine-print { + margin-top: 72px; + } + + #back-to-top-button { + position: absolute; + left: 70px; + top: -56px; + } +} + +@media screen and (min-width: 720px) and (max-width: 1239px) { + .illustrations-footer { + height: 600px; + left: -320px; + } + + .ruler-marker { + bottom: -216px; + } +} + +@media screen and (min-width: 1239px) { + .outro { + margin-left: 462px; + } + + #back-to-top-button { + position: absolute; + left: 190px; + top: 348px; + } } @media screen and (max-width: 719px) { @@ -86,70 +131,11 @@ footer .links { margin: 0 0 64px; } - #command { - display: none; - } - - #marker-green { - display: none; - } - - .illustrations-footer { - height: 440px; - display: initial; - overflow-y: hidden; - } -} - -@media screen and (min-width: 720px) { - .outro { - margin: 0 auto; - } - .fine-print { - margin-top: 96px; - padding-bottom: 96px; - } - - #back-to-top-button { - position: absolute; - left: 70px; - top: -56px; - } - - #marker-green { - position: absolute; - left: 678px; - top: -218px; - } - - #command { - position: absolute; - right: -18px; - top: 144px; - } - - .ruler { - position: absolute; - transform: rotate(-5deg); - } -} - -@media screen and (min-width: 1239px) { - .outro { - margin-left: 462px; - } - - #back-to-top-button { - position: absolute; - left: 190px; - top: 276px; + margin-top: 48px; } .illustrations-footer { - display: initial; - position: absolute; - bottom: 0; - height: 500px !important; + display: none; } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index b03db32..96699a3 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,11 +1,11 @@ import { useRecoilValue } from "recoil"; import { motion, AnimatePresence, Variants } from "framer-motion"; -import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react"; +import { ArrowULeftUp, Coffee, HandHeart } from "@phosphor-icons/react"; import Links from "@/components/Links/Links"; -import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg"; -import { ReactComponent as Ruler } from "@/assets/ruler.svg"; +import { ReactComponent as RulerMarker } from "@/assets/ruler-marker.svg"; +import { ReactComponent as RulerMarkerSpec } from "@/assets/ruler-marker-spec.svg"; import { useMediaQuery } from "@/hooks"; import { selectionEntryAtom } from "@/state"; import "./Footer.css"; @@ -49,14 +49,64 @@ const Footer = (_: FooterProps) => {

- We designed the icon library we always wanted to use. Easy to pick - up and plug in. Truly consistent in style and scale. Flexible to - multiple sizes and weights. Reserved enough to be multi-purpose, but - a little quirky, too. + Phosphor is a passion project by{" "} + + Helena Zhang + {" "} + and{" "} + + Tobias Fried + + .

- We're thankful for the tools we've benefited from and this is our - contribution towards a collaborative community. + It’s used by companies and creatives like{" "} + + AllTrails + + ,{" "} + + Figma Academy + + ,{" "} + + Framer + + ,{" "} + + Outgo + + ,{" "} + + Pablo Stanley + + ,{" "} + + reMarkable + + ,{" "} + + Qatalog + + ,{" "} + + Spacedrive + + ,{" "} + + Stash + + , and{" "} + + Threads + + .

Phosphor is free and open-source, licensed under{" "} @@ -92,19 +142,23 @@ const Footer = (_: FooterProps) => { ) } > - + Become a patron

- Phosphor Icons is designed by{" "} - - Helena Zhang + Type set in{" "} + + Manrope {" "} - and built by{" "} - - Toby Fried + by Mikhail Sharanda and{" "} + + IBM Plex Mono + .{" "} + Contact us at{" "} + + hello@phosphoricons.com {" "} { > 🙇🏻‍♀️👨‍💻🐈 - . Contact us at{" "} - - hello@phosphoricons.com - - . Type set in{" "} - - Manrope - {" "} - by Mikhail Sharanda.

- -
- - +
+ + +
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index c628bf3..8e633c4 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -39,7 +39,7 @@ const Header = (_: HeaderProps) => { return (
- +
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index 32021b6..6b8f1f6 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/src/components/IconGrid/IconGrid.css @@ -35,15 +35,14 @@ background-color: var(--background-layer); } -.grid-item:focus { +.grid-item:focus-visible { outline: none; - border: 1px solid var(--background-layer); + border: 1px solid var(--foreground); } .grid-item p { font-size: 12px; line-height: 16px; - opacity: 0.75; margin-top: 12px; text-align: center; } @@ -105,7 +104,7 @@ } .disabled { - color: var(--neutral); + color: var(--pewter); user-select: none; } @@ -245,7 +244,7 @@ figcaption > p { } .action-button:hover { - background-color: var(--sheer) !important; + background-color: var(--background-layer) !important; } .detail-actions .action-button svg { diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx index c0345d0..49877a2 100644 --- a/src/components/IconGrid/IconGridItem.tsx +++ b/src/components/IconGrid/IconGridItem.tsx @@ -86,7 +86,7 @@ const IconGridItem = (props: IconGridItemProps) => { >

- {name} + {name} {isNew && •} {isUpdated && •}

diff --git a/src/components/IconGrid/Panel.tsx b/src/components/IconGrid/Panel.tsx index 9814a60..aa2fce2 100644 --- a/src/components/IconGrid/Panel.tsx +++ b/src/components/IconGrid/Panel.tsx @@ -82,7 +82,7 @@ const ActionButton = ( return ( + {isWeightSupported && ( + + )}
), diff --git a/src/components/IconGrid/TagCloud.css b/src/components/IconGrid/TagCloud.css index 64f3729..4543e16 100644 --- a/src/components/IconGrid/TagCloud.css +++ b/src/components/IconGrid/TagCloud.css @@ -15,11 +15,11 @@ button.tag-button { } button.tag-button:hover { - background-color: var(--sheer); + background-color: transparent; } button.tag-button:focus-visible { - box-shadow: 0 0 0 1px var(--sheer); + box-shadow: 0 0 0 1px var(--foreground); } .tag-button code { diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css index 98b6d2e..a66727f 100644 --- a/src/components/Links/Links.css +++ b/src/components/Links/Links.css @@ -30,7 +30,7 @@ a.nav-link { a.nav-link:after { content: ""; position: absolute; - bottom: -2px; + bottom: 0.15em; left: 0; width: 0%; border-bottom: 1px solid var(--moss); diff --git a/src/components/SettingsActions/SettingsActions.tsx b/src/components/SettingsActions/SettingsActions.tsx index ac5ef8c..40f4d57 100644 --- a/src/components/SettingsActions/SettingsActions.tsx +++ b/src/components/SettingsActions/SettingsActions.tsx @@ -80,7 +80,7 @@ const SettingsActions = () => { onClick={copyDeepLinkToClipboard} > {copied ? ( - + ) : ( )} diff --git a/src/components/Tabs/Tabs.css b/src/components/Tabs/Tabs.css index 0aff447..15acb10 100644 --- a/src/components/Tabs/Tabs.css +++ b/src/components/Tabs/Tabs.css @@ -34,7 +34,7 @@ button.tab:focus-visible { } button.tab:hover:not(.active) { - background-color: var(--sheer); + background-color: var(--hover-tabs); } button.tab.active { From 5c6788506383aa0e711b3f5a5ad05015c173b58f Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Thu, 23 Mar 2023 01:02:31 -0600 Subject: [PATCH 7/7] feat(app): update og and icons --- index.html | 31 +++++++++++++++---------------- public/favicon-16.png | Bin 0 -> 483 bytes public/favicon-192.png | Bin 5422 -> 3474 bytes public/favicon-32.png | Bin 0 -> 817 bytes public/favicon-512.png | Bin 18106 -> 7698 bytes public/favicon.ico | Bin 15406 -> 1150 bytes public/phosphor-opengraph.png | Bin 85787 -> 39248 bytes 7 files changed, 15 insertions(+), 16 deletions(-) create mode 100644 public/favicon-16.png create mode 100644 public/favicon-32.png diff --git a/index.html b/index.html index 2ddf104..5fb84ee 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,8 @@ - Phosphor Icons - + + + + + + + + @@ -28,7 +40,7 @@ "@type": "Project", "url": "https://phosphoricons.com", "email": "hello@phosphoricons.com", - "location": "Brooklyn, NY", + "location": "Denver, CO", "description": "A flexible icon family for interfaces, diagrams, presentations — whatever, really.", "logo": "https://phosphoricons.com/favicon-512.png" } @@ -65,19 +77,6 @@ /> - - - - - - -