+
+
+ {name}
+ ([...categories, ...name.split("-"), ...tags])
+ )}
+ isDark={isDark}
+ />
+
+
React
- {snippets.react}
+ {snippets.react}
@@ -123,73 +180,80 @@ const InfoPanel: React.FC
= (props) => {
Vue
- {snippets.vue}
+ {snippets.vue}
HTML/CSS
-
- {snippets.html}
+
+ {snippets.html}
-
-
+
+ setOpen(false)}
+ onKeyDown={(e) => {
+ e.key === "Enter" && setOpen(false);
+ }}
+ />
+
);
};
-export default InfoPanel;
+export default DetailsPanel;
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index c431e22..179b074 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -1,5 +1,5 @@
.grid-container {
- padding: 0px 16px 4px;
+ padding: 32px 16px;
min-height: 80vh;
}
@@ -22,12 +22,14 @@
margin: 4px;
border-radius: 16px;
user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
cursor: pointer;
+ /* transition: background-color 100ms ease; */
}
.grid-item:hover {
background-color: rgba(163, 159, 171, 0.1);
- transition: background-color 0.2s;
}
.grid-item:focus {
@@ -48,11 +50,9 @@
display: flex;
width: 100%;
height: 0px;
- margin: 0px;
+ margin: 0 4px;
border-radius: 16px;
background-color: rgba(163, 159, 171, 0.1);
- overflow-y: hidden;
- overflow-x: auto;
}
@media screen and (max-width: 1023px) {
@@ -66,17 +66,16 @@
}
.icon-preview {
- height: 396px;
width: 30%;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
- justify-content: center;
+ margin-top: 72px;
}
.icon-preview p {
- margin: 12px 0 0;
+ margin: 0;
font-size: 12px;
line-height: 16px;
}
@@ -91,8 +90,8 @@
}
.snippet pre {
- /* white-space: nowrap; */
- /* overflow: hidden; */
+ display: flex;
+ align-items: center;
text-overflow: ellipsis;
color: black;
user-select: all;
@@ -112,12 +111,15 @@
}
}
+.snippet span {
+ flex: 1;
+}
+
.snippet button {
background-color: transparent;
margin: 0;
padding: 0;
height: 24px;
- float: right;
cursor: pointer;
}
@@ -127,6 +129,7 @@
.button-row {
display: flex;
+ flex-wrap: wrap;
}
.button-row button {
@@ -156,7 +159,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 0 16px 4px;
+ padding: 32px 16px;
min-height: 80vh;
max-width: 1120px;
margin: auto;
@@ -167,9 +170,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ margin-bottom: 0;
}
.beacon {
position: relative;
- top: -64px;
+ top: -96px;
}
diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx
index 2d7b88c..803329c 100644
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/src/components/IconGrid/IconGrid.tsx
@@ -10,9 +10,12 @@ import {
} from "../../state/selectors";
import useGridSpans from "../../hooks/useGridSpans";
import IconGridItem from "./IconGridItem";
-import Warn from "../Warn/Warn";
+import TagCloud from "./TagCloud";
+import Notice from "../Notice/Notice";
import "./IconGrid.css";
+const defaultSearchTags = ["communication", "editor", "emoji", "maps", "weather"];
+
type IconGridProps = {};
const IconGrid: React.FC
= () => {
@@ -31,7 +34,13 @@ const IconGrid: React.FC = () => {
controls.start("visible");
}, [controls, filteredQueryResults]);
- if (!filteredQueryResults.length) return ;
+ if (!filteredQueryResults.length)
+ return (
+
+ Try searching a category or keyword:
+
+
+ );
return (
@@ -52,7 +61,7 @@ const IconGrid: React.FC = () => {
index={index}
spans={spans}
isDark={isDark}
- {...iconEntry}
+ entry={iconEntry}
originOffset={originOffset}
/>
))}
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index 3c9e100..ecd2ee4 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/src/components/IconGrid/IconGridItem.tsx
@@ -6,17 +6,16 @@ import React, {
} from "react";
import { useRecoilState } from "recoil";
import { motion, AnimatePresence } from "framer-motion";
-import { IconProps, Icon } from "phosphor-react";
import { iconPreviewOpenAtom } from "../../state/atoms";
-import InfoPanel from "./InfoPanel";
+import DetailsPanel from "./DetailsPanel";
+import { IconEntry } from "../../lib";
-interface IconGridItemProps extends IconProps {
+interface IconGridItemProps {
index: number;
spans: number;
isDark: boolean;
- name: string;
- Icon: Icon;
+ entry: IconEntry;
originOffset: MutableRefObject<{ top: number; left: number }>;
}
@@ -33,7 +32,8 @@ const itemVariants = {
};
const IconGridItem: React.FC = (props) => {
- const { index, originOffset, name, Icon } = props;
+ const { index, originOffset, entry } = props;
+ const { name, Icon } = entry;
const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
const isOpen = open === name;
const delayRef = useRef(0);
@@ -87,7 +87,7 @@ const IconGridItem: React.FC = (props) => {
{name}
- {isOpen && }
+ {isOpen && }
);
diff --git a/src/components/IconGrid/TagCloud.css b/src/components/IconGrid/TagCloud.css
new file mode 100644
index 0000000..1ee8f94
--- /dev/null
+++ b/src/components/IconGrid/TagCloud.css
@@ -0,0 +1,32 @@
+.tag-cloud {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding: 24px;
+}
+
+button.tag-button {
+ margin: 4px;
+ border-radius: 4px;
+ background-color: rgba(194, 186, 196, 0.25);
+ outline: none;
+ cursor: pointer;
+ transition: background-color 200ms ease, box-shadow 200ms ease;
+}
+
+button.tag-button:hover {
+ background-color: rgba(194, 186, 196, 0.7);
+}
+
+button.tag-button:focus {
+ box-shadow: 0 0 0 1px rgba(194, 186, 196, 0.7);
+}
+
+.tag-button code {
+ padding: 4px;
+ font-size: 12px;
+}
+
+.dark {
+ color: white;
+}
\ No newline at end of file
diff --git a/src/components/IconGrid/TagCloud.tsx b/src/components/IconGrid/TagCloud.tsx
new file mode 100644
index 0000000..5d376b4
--- /dev/null
+++ b/src/components/IconGrid/TagCloud.tsx
@@ -0,0 +1,38 @@
+import React, { useCallback } from "react";
+import { useSetRecoilState } from "recoil";
+
+import { searchQueryAtom } from "../../state/atoms";
+import "./TagCloud.css";
+
+interface TagCloudProps {
+ name: string;
+ tags: string[];
+ isDark: boolean;
+}
+
+const TagCloud: React.FC = ({ name, tags, isDark }) => {
+ const setQuery = useSetRecoilState(searchQueryAtom);
+ const handleTagClick = useCallback(
+ (tag: string) => {
+ setQuery(tag);
+ document.getElementById("search-input")?.focus();
+ },
+ [setQuery]
+ );
+
+ return (
+
+ {tags.map((tag) => (
+
+ ))}
+
+ );
+};
+
+export default TagCloud;
diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css
new file mode 100644
index 0000000..fd241ef
--- /dev/null
+++ b/src/components/Links/Links.css
@@ -0,0 +1,41 @@
+.links {
+ display: flex;
+ flex-flow: column wrap;
+ align-content: flex-start;
+ align-items: flex-start;
+ justify-content: center;
+ /* column-gap: 72px; */
+ /* -webkit-column-gap: 72px; */
+ margin: 32px 0 64px;
+ max-height: 144px;
+}
+
+.links > div {
+ margin: 0 72px 24px 0;
+ display: flex;
+ align-items: center;
+}
+
+.links svg {
+ margin-right: 12px;
+}
+
+a.nav-link {
+ text-decoration: none;
+ position: relative;
+ color: black;
+}
+
+a.nav-link:after {
+ content: "";
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0%;
+ border-bottom: 1px solid black;
+ 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
new file mode 100644
index 0000000..378a1b4
--- /dev/null
+++ b/src/components/Links/Links.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { OutboundLink } from "react-ga";
+import { ArrowElbowDownRight } from "phosphor-react";
+
+import "./Links.css";
+
+interface LinksProps {}
+
+const Links: React.FC = () => {
+ return (
+
+ );
+};
+
+export default Links;
diff --git a/src/components/Warn/Warn.tsx b/src/components/Notice/Notice.tsx
similarity index 55%
rename from src/components/Warn/Warn.tsx
rename to src/components/Notice/Notice.tsx
index 8b213de..a89d20f 100644
--- a/src/components/Warn/Warn.tsx
+++ b/src/components/Notice/Notice.tsx
@@ -4,13 +4,14 @@ import { useRecoilValue } from "recoil";
import { isDarkThemeSelector } from "../../state/selectors";
import { searchQueryAtom } from "../../state/atoms";
-import { SmileyXEyes } from "phosphor-react";
+import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
-interface WarnProps {
+interface NoticeProps {
message?: string;
+ type?: "wait" | "help" | "warn" | "none";
}
-const Warn: React.FC = ({ message }) => {
+const Notice: React.FC = ({ message, type = "warn", children }) => {
const isDark = useRecoilValue(isDarkThemeSelector);
const query = useRecoilValue(searchQueryAtom);
@@ -22,15 +23,24 @@ const Warn: React.FC = ({ message }) => {
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
-
+ {type === "wait" && (
+
+ )}
+ {type === "help" && (
+
+ )}
+ {type === "warn" && (
+
+ )}
{message ?? (
No results for "{query}"
)}
+ {children}
+
# Phosphor Icons
Phosphor Icons is a flexible icon family in 6 weights. We aim to provide consistency, variety, and above all, ease-of-use for creators of all kinds. Browse the library on [our website](https://phosphoricons.com).
@@ -98,6 +100,7 @@ Download our [asset kit](https://www.phosphoricons.com/assets/phosphor-icons.zip
- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React
- [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) ▲ Phosphor icon component library for Vue
- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS
+- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin
## License
diff --git a/meta/phosphor-mark-tight-yellow.png b/meta/phosphor-mark-tight-yellow.png
new file mode 100644
index 0000000..da5f28d
Binary files /dev/null and b/meta/phosphor-mark-tight-yellow.png differ
diff --git a/package.json b/package.json
index 04bac2a..72408f3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "phosphor-web",
- "version": "0.5.0",
- "license": "GPL-3.0",
+ "version": "0.6.0",
+ "license": "MIT",
"homepage": "https://phosphoricons.com",
"author": {
"name": "Tobias Fried",
@@ -24,13 +24,15 @@
"file-saver": "^2.0.2",
"framer-motion": "^2.1.0",
"fuse.js": "^6.4.1",
- "phosphor-react": "^0.5.0",
+ "phosphor-react": "^0.6.0",
"react": "^17.0.0-rc.0",
"react-dom": "^17.0.0-rc.0",
"react-dropdown-select": "^4.4.2",
+ "react-ga": "^3.1.2",
"react-scripts": "3.4.1",
"react-use": "^15.3.2",
- "recoil": "^0.0.10",
+ "recoil": "^0.0.13",
+ "svg2png-converter": "^1.0.0",
"tinycolor2": "^1.4.1"
},
"scripts": {
@@ -70,7 +72,6 @@
"@types/react-list": "^0.8.5",
"@types/react-virtualized": "^9.21.10",
"@types/tinycolor2": "^1.4.2",
- "gh-pages": "^3.1.0",
"typescript": "^3.9.6"
}
}
diff --git a/public/favicon-192.png b/public/favicon-192.png
new file mode 100644
index 0000000..2ac834b
Binary files /dev/null and b/public/favicon-192.png differ
diff --git a/public/favicon-512.png b/public/favicon-512.png
new file mode 100644
index 0000000..4713d08
Binary files /dev/null and b/public/favicon-512.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index bcd5dfd..7d28ad7 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index c4fb387..1d9e75f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,21 +12,6 @@
/>
-
-
-
-
-
+
-
diff --git a/src/assets/billiard-ball.svg b/src/assets/billiard-ball.svg
index 609c8e8..90995db 100644
--- a/src/assets/billiard-ball.svg
+++ b/src/assets/billiard-ball.svg
@@ -1,25 +1,19 @@
-
-
diff --git a/src/assets/calculator-spec.svg b/src/assets/calculator-spec.svg
index 8d04bde..2cc2bcf 100644
--- a/src/assets/calculator-spec.svg
+++ b/src/assets/calculator-spec.svg
@@ -1,223 +1,212 @@
-
-
diff --git a/src/assets/calculator.svg b/src/assets/calculator.svg
index b439d48..c584c32 100644
--- a/src/assets/calculator.svg
+++ b/src/assets/calculator.svg
@@ -1,553 +1,457 @@
-
-
diff --git a/src/assets/command-key-spec.svg b/src/assets/command-key-spec.svg
index 3cd16fc..5946deb 100644
--- a/src/assets/command-key-spec.svg
+++ b/src/assets/command-key-spec.svg
@@ -1,18 +1,12 @@
-
-
diff --git a/src/assets/command-key.svg b/src/assets/command-key.svg
index 0d53716..ccad301 100644
--- a/src/assets/command-key.svg
+++ b/src/assets/command-key.svg
@@ -1,14 +1,8 @@
-
-
\ No newline at end of file
+
diff --git a/src/assets/cutting-mat-spec.svg b/src/assets/cutting-mat-spec.svg
index 63ce2fe..43a3741 100644
--- a/src/assets/cutting-mat-spec.svg
+++ b/src/assets/cutting-mat-spec.svg
@@ -1,27 +1,21 @@
-
-
diff --git a/src/assets/cutting-mat.svg b/src/assets/cutting-mat.svg
index f2fec9a..f7bf4cf 100644
--- a/src/assets/cutting-mat.svg
+++ b/src/assets/cutting-mat.svg
@@ -1,24 +1,20 @@
-
-
diff --git a/src/assets/footer-mobile.svg b/src/assets/footer-mobile.svg
new file mode 100644
index 0000000..f04f994
--- /dev/null
+++ b/src/assets/footer-mobile.svg
@@ -0,0 +1,34 @@
+
diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg
index 3bf1ad6..719b1af 100644
--- a/src/assets/marker-green.svg
+++ b/src/assets/marker-green.svg
@@ -1,22 +1,17 @@
-
-
diff --git a/src/assets/marker-purple.svg b/src/assets/marker-purple.svg
index 8ac9479..1d795e2 100644
--- a/src/assets/marker-purple.svg
+++ b/src/assets/marker-purple.svg
@@ -1,22 +1,15 @@
-
-
diff --git a/src/assets/paperclips-footer.svg b/src/assets/paperclips-footer.svg
new file mode 100644
index 0000000..6b6db87
--- /dev/null
+++ b/src/assets/paperclips-footer.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/assets/paperclips-header-mobile.svg b/src/assets/paperclips-header-mobile.svg
new file mode 100644
index 0000000..49bbde0
--- /dev/null
+++ b/src/assets/paperclips-header-mobile.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/assets/paperclips-header.svg b/src/assets/paperclips-header.svg
new file mode 100644
index 0000000..71e64dd
--- /dev/null
+++ b/src/assets/paperclips-header.svg
@@ -0,0 +1,16 @@
+
diff --git a/src/assets/post-it.svg b/src/assets/post-it.svg
new file mode 100644
index 0000000..e5e1598
--- /dev/null
+++ b/src/assets/post-it.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/receipt-spec.svg b/src/assets/receipt-spec.svg
index 6bc85c1..0fa3da8 100644
--- a/src/assets/receipt-spec.svg
+++ b/src/assets/receipt-spec.svg
@@ -1,72 +1,67 @@
-
-
diff --git a/src/assets/receipt.svg b/src/assets/receipt.svg
index 3e5888a..2420186 100644
--- a/src/assets/receipt.svg
+++ b/src/assets/receipt.svg
@@ -1,51 +1,44 @@
-
-
diff --git a/src/assets/tablet-spec.svg b/src/assets/tablet-spec.svg
index 8adfa18..ee6b5c9 100644
--- a/src/assets/tablet-spec.svg
+++ b/src/assets/tablet-spec.svg
@@ -1,53 +1,35 @@
-
-
diff --git a/src/assets/tablet.svg b/src/assets/tablet.svg
index 9d72593..fbcfc13 100644
--- a/src/assets/tablet.svg
+++ b/src/assets/tablet.svg
@@ -1,36 +1,21 @@
-
-
diff --git a/src/assets/warning-spec.svg b/src/assets/warning-spec.svg
index 896015a..96d5063 100644
--- a/src/assets/warning-spec.svg
+++ b/src/assets/warning-spec.svg
@@ -1,19 +1,13 @@
-
-
diff --git a/src/assets/warning.svg b/src/assets/warning.svg
index a27a787..cc0d86b 100644
--- a/src/assets/warning.svg
+++ b/src/assets/warning.svg
@@ -1,14 +1,8 @@
-
-
\ No newline at end of file
+
diff --git a/src/components/App/App.css b/src/components/App/App.css
index c5d49cb..ca2ab6d 100644
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -14,11 +14,17 @@ h2 {
font-weight: 400;
}
+img {
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -webkit-user-drag: none;
+}
+
pre,
code {
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: 14px;
- color: "black";
}
pre {
@@ -28,6 +34,7 @@ pre {
background-color: white;
border-radius: 6px;
border: 1px solid #e1d4d7;
+ white-space: pre-wrap;
}
input {
@@ -44,7 +51,6 @@ button {
button.main-button {
height: 64px;
- margin: 16px 24px 0 0;
padding: 0 48px 0 40px;
background-color: white;
border-radius: 8px;
@@ -60,11 +66,13 @@ button.main-button {
transition: all 0.2s ease;
cursor: pointer;
user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ margin: 0 24px 24px 0;
}
button.main-button:active {
transform: translate(4px, 4px);
- /* background-color: #DDDDDD; */
box-shadow: 0 0 0 0 black;
}
@@ -72,10 +80,20 @@ button.main-button:focus {
outline: none;
}
+/* button.main-button:not(:last-child) {
+ margin: 0 24px 24px 0;
+} */
+
button.main-button svg {
margin-right: 12px;
}
+.button-container {
+ display: flex;
+ flex-wrap: wrap;
+ /* gap: 24px; */
+}
+
a.main-link {
text-decoration: none;
position: relative;
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 03455db..1dec31c 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,7 +6,11 @@ import Toolbar from "../Toolbar/Toolbar";
import IconGrid from "../IconGrid/IconGrid";
import Footer from "../Footer/Footer";
import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
-import Warn from "../Warn/Warn";
+import Notice from "../Notice/Notice";
+
+const errorFallback =