Merge pull request #221 from phosphor-icons/revamp

Revamp

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.vscode/phosphor-home.code-snippets

@@ -1,5 +1,5 @@
 {
-	// Place your phosphor-web workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// Place your phosphor-home workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
 	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
 	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
 	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
@@ -21,10 +21,10 @@
 			"{",
 			"\tname: \"${1:name}\",",
 			"\tcategories: [IconCategory${2:categories}],",
-			"\ttags: [${3:tags}],",
+			"\ttags: [\"*new*\", ${3:tags}],",
-			"\tIcon: ${4:icon},",
+			"\tIcon: Icons.${4:icon},",
 			"},"
 		],
-		"description": "Create an IconEntry for phosphor-web"
+		"description": "Create an IconEntry for phosphor-home"
 	}
 }

LICENSE

@@ -1,674 +1,21 @@
-                    GNU GENERAL PUBLIC LICENSE
+MIT License
-                       Version 3, 29 June 2007
+
-
+Copyright (c) 2020 Phosphor Icons
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+
- Everyone is permitted to copy and distribute verbatim copies
+Permission is hereby granted, free of charge, to any person obtaining a copy
- of this license document, but changing it is not allowed.
+of this software and associated documentation files (the "Software"), to deal
-
+in the Software without restriction, including without limitation the rights
-                            Preamble
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-
+copies of the Software, and to permit persons to whom the Software is
-  The GNU General Public License is a free, copyleft license for
+furnished to do so, subject to the following conditions:
-software and other kinds of works.
+
-
+The above copyright notice and this permission notice shall be included in all
-  The licenses for most software and other practical works are designed
+copies or substantial portions of the Software.
-to take away your freedom to share and change the works.  By contrast,
+
-the GNU General Public License is intended to guarantee your freedom to
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-share and change all versions of a program--to make sure it remains free
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-software for all its users.  We, the Free Software Foundation, use the
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-GNU General Public License for most of our software; it applies also to
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-any other work released this way by its authors.  You can apply it to
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-your programs, too.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-
+SOFTWARE.
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
-
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
-
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -1,12 +1,21 @@
+<img src="/meta/phosphor-mark-tight-yellow.png" width="128" align="right" />
+
 # Phosphor Icons
 
-Phosphor is a kickass and dead-simple set of open-source icons for web and digital media. We aim to provide variety, consistency, and above all, ease-of-use for digital content creators of all kinds. A complete list of icons can be found on [our website](https://phosphoricons.com).
+Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
+
+- 1,248 icons and counting
+- 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
+- Designed at 16 x 16px to read well small and scale up big
+- Raw stroke information retained to fine-tune the style
+
+More ways to use at [phosphoricons.com](https://phosphoricons.com).
 
 ## For developers
 
-Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phosphor-icons) script, [React package](https://github.com/phosphor-icons/phosphor-react), and [Vue package](https://github.com/phosphor-icons/phosphor-vue), all of which can be sourced from NPM or from a CDN.
+Phosphor is available for [web](https://github.com/phosphor-icons/web), [React](https://github.com/phosphor-icons/react), [Vue](https://github.com/phosphor-icons/vue), [Flutter](https://github.com/phosphor-icons/flutter), [Elm](https://github.com/phosphor-icons/phosphor-elm), and other frameworks and platforms.
 
-### HTML/CSS
+### Vanilla Web
 
 - **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document `<head>`, and drop in icons with an `<i/>` tag and the appropriate class:
 
@@ -14,26 +23,26 @@ Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phospho
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/phosphor-icons"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
   </head>
   <body>
     <i class="ph-smiley"></i>
-    <i class="ph-heart-fill" style="color: hotpink"></i>
+    <i class="ph-fill ph-heart" style="color: hotpink"></i>
-    <i class="ph-cube-thin"></i>
+    <i class="ph-thin ph-cube"></i>
   </body>
 </html>
 ```
 
-Check out the full documentation on the [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) repo page.
+Check out the full documentation on the [@phosphor-icons/web](https://github.com/phosphor-icons/web) repo page.
 
 ### React
 
-- **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [phosphor-react](https://github.com/phosphor-icons/phosphor-react) repo page.
+- **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [@phosphor-icons/react](https://github.com/phosphor-icons/react) repo page.
 
 ```jsx
 import React from "react";
 import ReactDOM from "react-dom";
-import { Smiley, Heart, Horse } from "phosphor-react";
+import { Smiley, Heart, Horse } from "@phosphor-icons/react";
 
 const App = () => {
   return (
@@ -53,14 +62,14 @@ ReactDOM.render(<App />, document.getElementById("root"));
 
 ### Vue
 
-- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) repo page.
+- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) repo page.
 
 ```html
 <template>
   <div>
-    <PhHorse />
+    <ph-horse />
-    <PhHeart :size="32" color="hotpink" weight="fill" />
+    <ph-heart :size="32" color="hotpink" weight="fill" />
-    <PhCube />
+    <ph-cube />
   </div>
 </template>
 
@@ -77,28 +86,31 @@ ReactDOM.render(<App />, document.getElementById("root"));
 </script>
 ```
 
-> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions.
+> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
 
-## For designers
+## Our Related Projects
 
-### Raw Assets
+- [@phosphor-icons/core](https://github.com/phosphor-icons/core) ▲ Phosphor icon assets and catalog
+- [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
+- [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS
+- [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
+- [@phosphor-icons/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm
+- [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
+- [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components
+- [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin
+- [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin
 
-Download our [asset kit](https://www.phosphoricons.com/assets/phosphor.zip) to start working with Phosphor Icons in your designs.
+## Community Projects
 
-- **SVGs** – Individual icon SVGs, in both minified and original formats retaining design-time detail.
+- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native
-- **Icon Font** – Use the icons as you would text, in print and other applications where full-fledged graphical elements are undesirable.
+- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps
+- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications
+- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views
+- [wireui/phosphoricons](https://github.com/wireui/phosphoricons) ▲ Phosphor icons for Laravel
+- [phosphor-css](https://github.com/lucagoslar/phosphor-css) ▲ CSS wrapper for Phosphor SVG icons
 
-<!-- ### Source Files
+If you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!
-- **Sketch**
-- **Illustrator**
-- **Figma** -->
-
-## Related Projects
-
-- [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
 
 ## License
 
-GPL-3.0 © [Phosphor Icons](https://github.com/phosphor-icons)
+MIT © [Phosphor Icons](https://github.com/phosphor-icons)

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Phosphor Icons</title>
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#35313D" />
     <meta
@@ -18,7 +18,21 @@
       itemprop="description"
       content="A flexible icon family for interfaces, diagrams, presentations — whatever, really."
     />
-    <meta itemprop="image" content="https://phosphoricons.com/promo.jpg" />
+    <meta
+      itemprop="image"
+      content="https://phosphoricons.com/phosphor-opengraph.png"
+    />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Project",
+        "url": "https://phosphoricons.com",
+        "email": "hello@phosphoricons.com",
+        "location": "Brooklyn, NY",
+        "description": "A flexible icon family for interfaces, diagrams, presentations — whatever, really.",
+        "logo": "https://phosphoricons.com/favicon-512.png"
+      }
+    </script>
 
     <!-- FACEBOOK META -->
     <meta property="og:title" content="Phosphor Icons" />
@@ -29,11 +43,14 @@
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://phosphoricons.com" />
-    <meta property="og:image" content="https://phosphoricons.com/promo.jpg" />
+    <meta
-    <meta property="og:image:type" content="image/jpeg" />
+      property="og:image"
+      content="https://phosphoricons.com/phosphor-opengraph.png"
+    />
+    <meta property="og:image:type" content="image/png" />
     <meta property="og:image:alt" content="Phosphor Icons logo" />
-    <meta property="og:image:width" content="960" />
+    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="590" />
+    <meta property="og:image:height" content="630" />
 
     <!-- TWITTER META -->
     <meta name="twitter:card" content="summary_large_image" />
@@ -42,24 +59,27 @@
       name="twitter:description"
       content="A flexible icon family for interfaces, diagrams, presentations — whatever, really."
     />
-    <meta name="twitter:image" content="https://phosphoricons.com/promo.jpg" />
+    <meta
+      name="twitter:image"
+      content="https://phosphoricons.com/phosphor-opengraph.png"
+    />
     <meta name="twitter:site" content="@_phosphoricons" />
     <meta name="twitter:creator" content="@friedtm" />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/favicon-192.png" />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicon-32x32.png"
+      href="/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicon-16x16.png"
+      href="/favicon-16x16.png"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <link
       href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"
       rel="stylesheet"
@@ -92,5 +112,6 @@
       </div>
     </noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "phosphor-web",
+  "name": "phosphor-home",
-  "version": "0.5.0",
+  "version": "2.0.0",
-  "license": "GPL-3.0",
+  "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {
     "name": "Tobias Fried",
@@ -18,31 +18,42 @@
     "UI",
     "UX"
   ],
-  "repository": "github:phosphor-icons/phosphor-web",
+  "repository": "github:phosphor-icons/homepage",
-  "private": false,
+  "private": true,
-  "dependencies": {
-    "file-saver": "^2.0.2",
-    "framer-motion": "^2.1.0",
-    "fuse.js": "^6.4.1",
-    "phosphor-react": "^0.5.0",
-    "react": "^17.0.0-rc.0",
-    "react-dom": "^17.0.0-rc.0",
-    "react-dropdown-select": "^4.4.2",
-    "react-scripts": "3.4.1",
-    "react-use": "^15.3.2",
-    "recoil": "^0.0.10",
-    "tinycolor2": "^1.4.1"
-  },
   "scripts": {
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "dev": "vite",
-    "start": "react-scripts start",
+    "build": "tsc && vite build",
-    "build": "react-scripts build",
+    "preview": "vite preview",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\""
   },
+  "dependencies": {
+    "@phosphor-icons/core": "^2.0.2",
+    "@phosphor-icons/react": "^2.0.4",
+    "file-saver": "^2.0.2",
+    "framer-motion": "^9.0.1",
+    "fuse.js": "^6.4.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropdown-select": "^4.4.2",
+    "react-ga4": "^2.0.0",
+    "react-hotkeys-hook": "^3.2.1",
+    "react-use": "^17.4.0",
+    "recoil": "^0.7.6",
+    "svg2png-converter": "^1.0.2",
+    "tinycolor2": "^1.4.2"
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.5",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/tinycolor2": "^1.4.3",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1",
+    "vite-plugin-svgr": "^2.4.0"
+  },
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -57,20 +68,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/file-saver": "^2.0.1",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@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"
   }
 }

public/.htaccess

@@ -0,0 +1,9 @@
+RewriteEngine On
+RewriteCond %{HTTPS} !=on
+RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
+
+Options +SymLinksIfOwnerMatch 
+RewriteEngine On 
+RewriteCond %{REQUEST_FILENAME} !-f 
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.html [L]

public/assets/phosphor-android/cadmium/wallpaper.json

@@ -0,0 +1,242 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "https://i.imgur.com/xBCTxrP.png",
+			"preview_thumbnail_url": "https://i.imgur.com/xBCTxrPl.jpg"
+		},
+		{
+			"name": "architecture",
+			"preview_url": "https://i.imgur.com/pdV0KQ1.png",
+			"preview_thumbnail_url": "https://i.imgur.com/pdV0KQ1l.jpg"
+		},
+		{
+			"name": "landscape",
+			"preview_url": "https://i.imgur.com/EEBaeFE.png",
+			"preview_thumbnail_url": "https://i.imgur.com/EEBaeFEl.jpg"
+		},
+		{
+			"name": "minimal",
+			"preview_url": "https://i.imgur.com/peX5qVO.png",
+			"preview_thumbnail_url": "https://i.imgur.com/peX5qVOl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Antelope Canyon",
+			"author": "Daniel Olah Nvez",
+			"url": "https://i.imgur.com/KYglyUn.png",
+			"thumbnail": "https://i.imgur.com/KYglyUl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Fractured Light",
+			"author": "Chris Limbrick",
+			"url": "https://i.imgur.com/MILbsga.png",
+			"thumbnail": "https://i.imgur.com/MILbsgal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "The Forest Path",
+			"author": "Kristaps Ungurs",
+			"url": "https://i.imgur.com/95QLblG.png",
+			"thumbnail": "https://i.imgur.com/95QLblGl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Taken",
+			"author": "Touann Gatouillat",
+			"url": "https://i.imgur.com/otCPhH7.png",
+			"thumbnail": "https://i.imgur.com/otCPhH7l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Construct",
+			"author": "Florian Olivo",
+			"url": "https://i.imgur.com/7CxJsXn.png",
+			"thumbnail": "https://i.imgur.com/7CxJsXnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Redline",
+			"author": "Sergio Ibannez",
+			"url": "https://i.imgur.com/uja4O1m.png",
+			"thumbnail": "https://i.imgur.com/uja4O1ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "End Of Line",
+			"author": "Claudio Schwarz-Purzlbaum",
+			"url": "https://i.imgur.com/2ZiqhE3.png",
+			"thumbnail": "https://i.imgur.com/2ZiqhE3l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Downtown",
+			"author": "Van Mendoza",
+			"url": "https://i.imgur.com/sKizrcp.png",
+			"thumbnail": "https://i.imgur.com/sKizrcpl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Omnicorp",
+			"author": "Irina Iriser",
+			"url": "https://i.imgur.com/Zx11fXx.png",
+			"thumbnail": "https://i.imgur.com/Zx11fXxl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Pinball Wizard",
+			"author": "Joey Banks",
+			"url": "https://i.imgur.com/XpVCRrj.png",
+			"thumbnail": "https://i.imgur.com/XpVCRrjl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Chinatown",
+			"author": "Donny Jiang",
+			"url": "https://i.imgur.com/mz8mTVC.png",
+			"thumbnail": "https://i.imgur.com/mz8mTVCl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "FDR Drive",
+			"author": "Donny Jiang",
+			"url": "https://i.imgur.com/elbdmZk.png",
+			"thumbnail": "https://i.imgur.com/elbdmZkl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Through the Fog",
+			"author": "Zhimai Zhang",
+			"url": "https://i.imgur.com/KQIss5a.png",
+			"thumbnail": "https://i.imgur.com/KQIss5al.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Kids Will Play",
+			"author": "Perry C",
+			"url": "https://i.imgur.com/IieNbdS.png",
+			"thumbnail": "https://i.imgur.com/IieNbdSl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Double Blind",
+			"author": "Pau Casals",
+			"url": "https://i.imgur.com/kKyn0dW.png",
+			"thumbnail": "https://i.imgur.com/kKyn0dWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "All-Seeing Eye",
+			"author": "Alex Rainer",
+			"url": "https://i.imgur.com/HtyCalZ.png",
+			"thumbnail": "https://i.imgur.com/HtyCalZl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Methylene",
+			"author": "Pim Myten",
+			"url": "https://i.imgur.com/vOAYeEW.png",
+			"thumbnail": "https://i.imgur.com/vOAYeEWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Nexus",
+			"author": "Alexander Popov",
+			"url": "https://i.imgur.com/3q2e7N2.png",
+			"thumbnail": "https://i.imgur.com/3q2e7N2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Synthetic",
+			"author": "Leyy M",
+			"url": "https://i.imgur.com/ASKhMFU.png",
+			"thumbnail": "https://i.imgur.com/ASKhMFUl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Nondeterminism",
+			"author": "Alex Perez",
+			"url": "https://i.imgur.com/6dtZBAW.png",
+			"thumbnail": "https://i.imgur.com/6dtZBAWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "In the Beginning",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/gBSjMh2.png",
+			"thumbnail": "https://i.imgur.com/gBSjMh2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "The Swarm",
+			"author": "Vino Li",
+			"url": "https://i.imgur.com/yljYDqp.png",
+			"thumbnail": "https://i.imgur.com/yljYDqpl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Moonrise",
+			"author": "Adrian Swancar",
+			"url": "https://i.imgur.com/NiSCb6W.png",
+			"thumbnail": "https://i.imgur.com/NiSCb6Wl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Cerro",
+			"author": "Tamas Tuzes Katai",
+			"url": "https://i.imgur.com/5u4aM1y.png",
+			"thumbnail": "https://i.imgur.com/5u4aM1yl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		}
+	]
+}

public/assets/phosphor-android/carbon/wallpaper.json

@@ -0,0 +1,409 @@
+{
+	"Collections": [
+		{
+			"name": "Abstract",
+			"preview_url": "https://i.imgur.com/8DTRYwb.png",
+			"preview_thumbnail_url": "https://i.imgur.com/8DTRYwbl.jpg"
+		},
+		{
+			"name": "Architecture",
+			"preview_url":"https://i.imgur.com/t6BTASJ.png",
+			"preview_thumbnail_url": "https://i.imgur.com/t6BTASJl.jpg"
+		},
+		{
+			"name": "Landscape",
+			"preview_url": "https://i.imgur.com/G8cgftc.png",
+			"preview_thumbnail_url": "https://i.imgur.com/G8cgftcl.jpg"
+		},
+		{
+			"name": "Minimal",
+			"preview_url": "https://i.imgur.com/Srt9bP3.png",
+			"preview_thumbnail_url": "https://i.imgur.com/Srt9bP3l.jpg"
+		},
+		{
+			"name": "Solids",
+			"preview_url": "https://i.imgur.com/fzL4yoj.png",
+			"preview_thumbnail_url": "https://i.imgur.com/fzL4yojl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Arctic",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/4qopfYy.png",
+			"thumbnail": "https://i.imgur.com/4qopfYyl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Saffron",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/fzL4yoj.png",
+			"thumbnail": "https://i.imgur.com/fzL4yojl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Heliotrope",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/QsrKIjp.png",
+			"thumbnail": "https://i.imgur.com/QsrKIjpl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Jade",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/Z29e7f7.png",
+			"thumbnail": "https://i.imgur.com/Z29e7f7l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Soft Dunes",
+			"author": "Kunj Parekh",
+			"url": "https://i.imgur.com/vIAE5jd.png",
+			"thumbnail": "https://i.imgur.com/vIAE5jdl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscapes"
+		},
+		{
+			"name": "Lake at Dawn",
+			"author": "Max Fuchs",
+			"url": "https://i.imgur.com/4Nmefrv.png",
+			"thumbnail": "https://i.imgur.com/4Nmefrvl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Doors of Perception",
+			"author": "Philipp Berndt",
+			"url": "https://i.imgur.com/Srt9bP3.png",
+			"thumbnail": "https://i.imgur.com/Srt9bP3l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "TwoTone",
+			"author": "Samuel Zeller",
+			"url": "https://i.imgur.com/8DTRYwb.png",
+			"thumbnail": "https://i.imgur.com/8DTRYwbl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Empty Court",
+			"author": "35mm",
+			"url": "https://i.imgur.com/rPSLdCD.png",
+			"thumbnail": "https://i.imgur.com/rPSLdCDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Edge of the Pool",
+			"author": "Autumn Studio",
+			"url": "https://i.imgur.com/qNXWTej.png",
+			"thumbnail": "https://i.imgur.com/qNXWTejl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "One in the Hand",
+			"author": "Rainon Franco",
+			"url": "https://i.imgur.com/QhW4UDc.png",
+			"thumbnail": "https://i.imgur.com/QhW4UDcl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Solitude",
+			"author": "Braxton Stuntz",
+			"url": "https://i.imgur.com/QlQ9tMO.png",
+			"thumbnail": "https://i.imgur.com/QlQ9tMOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Double Fault",
+			"author": "Dane Deaner",
+			"url": "https://i.imgur.com/ERMWJSe.png",
+			"thumbnail": "https://i.imgur.com/ERMWJSel.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Lomo 800",
+			"author": "Markus Spiske",
+			"url": "https://i.imgur.com/bHPWGPQ.png",
+			"thumbnail": "https://i.imgur.com/bHPWGPQl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Clothespins",
+			"author": "Plush Design Studio",
+			"url": "https://i.imgur.com/xPyXBL9.png",
+			"thumbnail": "https://i.imgur.com/xPyXBL9l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Memory Tapes",
+			"author": "Imani Clovis",
+			"url": "https://i.imgur.com/cmWuvUT.png",
+			"thumbnail": "https://i.imgur.com/cmWuvUTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Contours in White",
+			"author": "Jean Philippe del Berghe",
+			"url": "https://i.imgur.com/wjxl9xT.png",
+			"thumbnail": "https://i.imgur.com/wjxl9xTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Awaiting Inspiration",
+			"author": "Joanna Kosinska",
+			"url": "https://i.imgur.com/SBtlZmn.png",
+			"thumbnail": "https://i.imgur.com/SBtlZmnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Succulent",
+			"author": "Khai Sze Ong",
+			"url": "https://i.imgur.com/yDD2wz8.png",
+			"thumbnail": "https://i.imgur.com/yDD2wz8l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Tracks in the Sand",
+			"author": "Ruben Bagues",
+			"url": "https://i.imgur.com/G8cgftc.png",
+			"thumbnail": "https://i.imgur.com/G8cgftcl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape,minimal"
+		},
+		{
+			"name": "Starched Linen",
+			"author": "Annie Spratt",
+			"url": "https://i.imgur.com/W9nAQVR.png",
+			"thumbnail": "https://i.imgur.com/W9nAQVRl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Delamination",
+			"author": "Wesley Tingey",
+			"url": "https://i.imgur.com/VNJ3xWG.png",
+			"thumbnail": "https://i.imgur.com/VNJ3xWGl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Look Up",
+			"author": "Tony Dinh",
+			"url": "https://i.imgur.com/t6BTASJ.png",
+			"thumbnail": "https://i.imgur.com/t6BTASJl.jpgg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Keep to the Right",
+			"author": "hello i m nik",
+			"url": "https://i.imgur.com/SHp6pkv.png",
+			"thumbnail": "https://i.imgur.com/SHp6pkvl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Pink Paper",
+			"author": "Alex Koch",
+			"url": "https://i.imgur.com/OHPR80R.png",
+			"thumbnail": "https://i.imgur.com/OHPR80Rl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Lavender Dunes",
+			"author": "Alex Koch",
+			"url": "https://i.imgur.com/Sb50W4f.png",
+			"thumbnail": "https://i.imgur.com/Sb50W4fl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Cotton Candy Clouds",
+			"author": "Autumn Studio",
+			"url": "https://i.imgur.com/43Vf2hT.png",
+			"thumbnail": "https://i.imgur.com/43Vf2hTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Pineapple",
+			"author": "Pineaaple Supply Co.",
+			"url": "https://i.imgur.com/YK9TyNk.png",
+			"thumbnail": "https://i.imgur.com/YK9TyNkl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Cuttings",
+			"author": "Alex Loup",
+			"url": "https://i.imgur.com/wp2S7TK.png",
+			"thumbnail": "https://i.imgur.com/wp2S7TKl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Textured Ombre Wall",
+			"author": "Bharath G.S.",
+			"url": "https://i.imgur.com/kxBGzva.png",
+			"thumbnail": "https://i.imgur.com/kxBGzval.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "The Loading Dock",
+			"author": "Ph. B.",
+			"url": "https://i.imgur.com/NmL5Ldm.png",
+			"thumbnail": "https://i.imgur.com/NmL5Ldml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Leaning Dwarf Pine",
+			"author": "Caleb George",
+			"url": "https://i.imgur.com/crgckrr.png",
+			"thumbnail": "https://i.imgur.com/crgckrrl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Dunes in Hard Light",
+			"author": "Heather Shevlin",
+			"url": "https://i.imgur.com/LG0G1IO.png",
+			"thumbnail": "https://i.imgur.com/LG0G1IOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "3 Balloons",
+			"author": "Amy Shamblen",
+			"url": "https://i.imgur.com/5HHCh12.png",
+			"thumbnail": "https://i.imgur.com/5HHCh12l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Bicolor Bricks",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/i4VrEDH.png",
+			"thumbnail": "https://i.imgur.com/i4VrEDHl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Acrid Sky",
+			"author": "W",
+			"url": "https://i.imgur.com/RUSz9mM.png",
+			"thumbnail": "https://i.imgur.com/RUSz9mMl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Salmon Colored Smoke",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/8wehlrT.png",
+			"thumbnail": "https://i.imgur.com/8wehlrTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Polygonal Grid",
+			"author": "Scott Webb",
+			"url": "https://i.imgur.com/voUtZhY.png",
+			"thumbnail": "https://i.imgur.com/voUtZhYl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture,minimal"
+		},
+		{
+			"name": "Clay Courts",
+			"author": "Ph. B.",
+			"url": "https://i.imgur.com/yd7OmyV.png",
+			"thumbnail": "https://i.imgur.com/yd7OmyVl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Lavender on Yellow",
+			"author": "Mona Eendra",
+			"url": "https://i.imgur.com/p8T1V7N.png",
+			"thumbnail": "https://i.imgur.com/p8T1V7Nl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,landscape"
+		},
+		{
+			"name": "Whispering Pines",
+			"author": "Mads Schmidt Rasmussen",
+			"url": "https://i.imgur.com/FLkrDVZ.png",
+			"thumbnail": "https://i.imgur.com/FLkrDVZl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "All the Light Touches",
+			"author": "Eberhard Grossgasteiger",
+			"url": "https://i.imgur.com/cwUvsmS.png",
+			"thumbnail": "https://i.imgur.com/cwUvsmSl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		}
+	]
+}

public/assets/phosphor-android/classic/wallpaper.json

@@ -0,0 +1,350 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "https://i.imgur.com/xBCTxrP.png",
+			"preview_thumbnail_url": "https://i.imgur.com/xBCTxrPl.jpg"
+		},
+		{
+			"name": "architecture",
+			"preview_url": "https://i.imgur.com/pdV0KQ1.png",
+			"preview_thumbnail_url": "https://i.imgur.com/pdV0KQ1l.jpg"
+		},
+		{
+			"name": "landscape",
+			"preview_url": "https://i.imgur.com/EEBaeFE.png",
+			"preview_thumbnail_url": "https://i.imgur.com/EEBaeFEl.jpg"
+		},
+		{
+			"name": "minimal",
+			"preview_url": "https://i.imgur.com/peX5qVO.png",
+			"preview_thumbnail_url": "https://i.imgur.com/peX5qVOl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Dunes at Dusk",
+			"author": "Jeremy Bishop",
+			"url": "https://i.imgur.com/EEBaeFE.png",
+			"thumbnail": "https://i.imgur.com/EEBaeFEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Black Sand",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/Yt8zaUn.png",
+			"thumbnail": "https://i.imgur.com/Yt8zaUnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Disappearing Coastline",
+			"author": "Chris Coe",
+			"url": "https://i.imgur.com/hq4aENh.png",
+			"thumbnail": "https://i.imgur.com/hq4aENhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,landscape"
+		},
+		{
+			"name": "Setting Out",
+			"author": "Tim Trad",
+			"url": "https://i.imgur.com/42uDJkj.png",
+			"thumbnail": "https://i.imgur.com/42uDJkjl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Dark Tides",
+			"author": "Mike Yukhtenko",
+			"url": "https://i.imgur.com/XSIIUAQ.png",
+			"thumbnail": "https://i.imgur.com/XSIIUAQl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Rogue Wave",
+			"author": "Jack B",
+			"url": "https://i.imgur.com/YVHtCTT.png",
+			"thumbnail": "https://i.imgur.com/YVHtCTTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Strata",
+			"author": "Joshua Oluwagbemiga",
+			"url": "https://i.imgur.com/uvRONTa.png",
+			"thumbnail": "https://i.imgur.com/uvRONTal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Condolences",
+			"author": "Annie Spratt",
+			"url": "https://i.imgur.com/peX5qVO.png",
+			"thumbnail": "https://i.imgur.com/peX5qVOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Ferns",
+			"author": "Andras Vas",
+			"url": "https://i.imgur.com/wXvAISN.png",
+			"thumbnail": "https://i.imgur.com/wXvAISNl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Blades of Grass",
+			"author": "Claudio Testa",
+			"url": "https://i.imgur.com/0QOoq8R.png",
+			"thumbnail": "https://i.imgur.com/0QOoq8Rl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Lush",
+			"author": "Ian Espinosa",
+			"url": "https://i.imgur.com/AumRAb4.png",
+			"thumbnail": "https://i.imgur.com/AumRAb4l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Amethyst Bloom",
+			"author": "Alyssa Smith",
+			"url": "https://i.imgur.com/96JmZIF.png",
+			"thumbnail": "https://i.imgur.com/96JmZIFl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Carbon",
+			"author": "David Jorre",
+			"url": "https://i.imgur.com/hkN3ioi.png",
+			"thumbnail": "https://i.imgur.com/hkN3ioil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Charred Remains",
+			"author": "Brian Patrick Tagalog",
+			"url": "https://i.imgur.com/SbyCpR2.png",
+			"thumbnail": "https://i.imgur.com/SbyCpR2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Make a Wish",
+			"author": "Wil Stewart",
+			"url": "https://i.imgur.com/VeuzvUA.png",
+			"thumbnail": "https://i.imgur.com/VeuzvUAl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Resonance",
+			"author": "Luke Stackpoole",
+			"url": "https://i.imgur.com/94SjlPi.png",
+			"thumbnail": "https://i.imgur.com/94SjlPil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "An Endless Mist",
+			"author": "Yoal Desurmont",
+			"url": "https://i.imgur.com/Qkng6Dm.png",
+			"thumbnail": "https://i.imgur.com/Qkng6Dml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Elevation",
+			"author": "Manuel Will",
+			"url": "https://i.imgur.com/yQMGOAb.png",
+			"thumbnail": "https://i.imgur.com/yQMGOAbl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Rock Show",
+			"author": "Raphael Schaller",
+			"url": "https://i.imgur.com/DMi6ffB.png",
+			"thumbnail": "https://i.imgur.com/DMi6ffBl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Motes",
+			"author": "Samuel Zeller",
+			"url": "https://i.imgur.com/kOIWSNJ.png",
+			"thumbnail": "https://i.imgur.com/kOIWSNJl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Birds on a Wire",
+			"author": "Adrian Kirkegaard",
+			"url": "https://i.imgur.com/M3dlKS4.png",
+			"thumbnail": "https://i.imgur.com/M3dlKS4l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Interleaved",
+			"author": "Ron Whitaker",
+			"url": "https://i.imgur.com/QQ7WQvD.png",
+			"thumbnail": "https://i.imgur.com/QQ7WQvDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Elliptic",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/xBCTxrP.png",
+			"thumbnail": "https://i.imgur.com/xBCTxrPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Convergence",
+			"author": "Josh Rose",
+			"url": "https://i.imgur.com/uqBhWYH.png",
+			"thumbnail": "https://i.imgur.com/uqBhWYHl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Baffles",
+			"author": "Elena Saharova",
+			"url": "https://i.imgur.com/l2L6u1E.png",
+			"thumbnail": "https://i.imgur.com/l2L6u1El.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Polygonal",
+			"author": "Carrie Yang",
+			"url": "https://i.imgur.com/pdV0KQ1.png",
+			"thumbnail": "https://i.imgur.com/pdV0KQ1l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "S-Curve",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/Y1A9GTi.png",
+			"thumbnail": "https://i.imgur.com/Y1A9GTil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Galaxy Swirls",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/KrxLGxy.png",
+			"thumbnail": "https://i.imgur.com/KrxLGxyl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Prismatic Dreams",
+			"author": "Sean Sinclair",
+			"url": "https://i.imgur.com/byLsXXB.png",
+			"thumbnail": "https://i.imgur.com/byLsXXBl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Slot Canyon",
+			"author": "Meric Dagli",
+			"url": "https://i.imgur.com/hB90xvB.png",
+			"thumbnail": "https://i.imgur.com/hB90xvBl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Crescent Moonrise",
+			"author": "Val Vesa",
+			"url": "https://i.imgur.com/nfoPdRd.png",
+			"thumbnail": "https://i.imgur.com/nfoPdRdl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Eye of the Storm",
+			"author": "Breno Machado",
+			"url": "https://i.imgur.com/BliGpTl.png",
+			"thumbnail": "https://i.imgur.com/BliGpTll.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Thundercloud",
+			"author": "Bryan Minear",
+			"url": "https://i.imgur.com/mK8JE0t.png",
+			"thumbnail": "https://i.imgur.com/mK8JE0tl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Departmental Security",
+			"author": "Bartosz Wanot",
+			"url": "https://i.imgur.com/wRN7lDd.png",
+			"thumbnail": "https://i.imgur.com/wRN7lDdl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "CMatrix",
+			"author": "Maekus Spiske",
+			"url": "https://i.imgur.com/QAsjQkP.png",
+			"thumbnail": "https://i.imgur.com/QAsjQkPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Neon Serif",
+			"author": "Zuzanna Adamcyzk",
+			"url": "https://i.imgur.com/3edF6DE.png",
+			"thumbnail": "https://i.imgur.com/3edF6DEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		}
+	]
+}

public/assets/phosphor-android/helium/wallpaper.json

@@ -0,0 +1,422 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		},
+		{
+			"name": "architecture",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		},
+		{
+			"name": "landscape",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		},
+		{
+			"name": "minimal",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Retro Sunrise",
+			"author": "Maxim Medvedev",
+			"url": "https://i.imgur.com/kCtyGwT.png",
+			"thumbnail": "https://i.imgur.com/kCtyGwTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Tawny Peak",
+			"author": "Andreas Kind",
+			"url": "https://i.imgur.com/fqxcpJU.png",
+			"thumbnail": "https://i.imgur.com/fqxcpJUl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "First Light",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/EakVjSC.png",
+			"thumbnail": "https://i.imgur.com/EakVjSCl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Rosy Dunes",
+			"author": "Paxel Nolbert",
+			"url": "https://i.imgur.com/lD06npE.png",
+			"thumbnail": "https://i.imgur.com/lD06npEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Waking Up",
+			"author": "Dhaval Parmar",
+			"url": "https://i.imgur.com/eBenVs8.png",
+			"thumbnail": "https://i.imgur.com/eBenVs8l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "The Great Outdoors",
+			"author": "Gauravdeep Singh Bansal",
+			"url": "https://i.imgur.com/gJ40ptR.png",
+			"thumbnail": "https://i.imgur.com/gJ40ptRl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Make a Wish",
+			"author": "Diego Ph",
+			"url": "https://i.imgur.com/vJagBNf.png",
+			"thumbnail": "https://i.imgur.com/vJagBNfl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Lateral Strike",
+			"author": "Damon Lam",
+			"url": "https://i.imgur.com/BeZHVcY.png",
+			"thumbnail": "https://i.imgur.com/BeZHVcYl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Starfield",
+			"author": "Guilherme Stecanella",
+			"url": "https://i.imgur.com/pDjDeVr.png",
+			"thumbnail": "https://i.imgur.com/pDjDeVrl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Smallness",
+			"author": "Melanie Magdalena",
+			"url": "https://i.imgur.com/658blVF.png",
+			"thumbnail": "https://i.imgur.com/658blVFl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Alone at the Summit",
+			"author": "Aleks Dahlberg",
+			"url": "https://i.imgur.com/YKeQ9sc.png",
+			"thumbnail": "https://i.imgur.com/YKeQ9scl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Like Waves",
+			"author": "Calvin Ma",
+			"url": "https://i.imgur.com/wbNiiie.png",
+			"thumbnail": "https://i.imgur.com/wbNiiiel.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Cloud Cover",
+			"author": "Adrian",
+			"url": "https://i.imgur.com/02uf66E.png",
+			"thumbnail": "https://i.imgur.com/02uf66El.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Tiled",
+			"author": "Fabrizio Conti",
+			"url": "https://i.imgur.com/mAfbAsG.png",
+			"thumbnail": "https://i.imgur.com/mAfbAsGl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,architecture"
+		},
+		{
+			"name": "Brutalism",
+			"author": "Andrej Lisakov",
+			"url": "https://i.imgur.com/9JlGo4m.png",
+			"thumbnail": "https://i.imgur.com/9JlGo4ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,architecture"
+		},
+		{
+			"name": "Arrayed",
+			"author": "Robert Haverly",
+			"url": "https://i.imgur.com/SGA180g.png",
+			"thumbnail": "https://i.imgur.com/SGA180gl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,architecture"
+		},
+		{
+			"name": "Placidity",
+			"author": "Julian Bock",
+			"url": "https://i.imgur.com/T7PwRnh.png",
+			"thumbnail": "https://i.imgur.com/T7PwRnhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Sea Change",
+			"author": "Samara Doole",
+			"url": "https://i.imgur.com/ekcUJ2M.png",
+			"thumbnail": "https://i.imgur.com/ekcUJ2Ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Choppy",
+			"author": "Imleedh Ali",
+			"url": "https://i.imgur.com/2bk3vxM.png",
+			"thumbnail": "https://i.imgur.com/2bk3vxMl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Below the Crush",
+			"author": "Jeremy Bishop",
+			"url": "https://i.imgur.com/h244SGI.png",
+			"thumbnail": "https://i.imgur.com/h244SGIl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Betta",
+			"author": "Aung Soe Min",
+			"url": "https://i.imgur.com/YOBYine.png",
+			"thumbnail": "https://i.imgur.com/YOBYinel.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Last One in the Pack",
+			"author": "Alfaz Sayed",
+			"url": "https://i.imgur.com/tP0SOFS.png",
+			"thumbnail": "https://i.imgur.com/tP0SOFSl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Basement Window",
+			"author": "Taylor Young",
+			"url": "https://i.imgur.com/V7srimE.png",
+			"thumbnail": "https://i.imgur.com/V7srimEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Cellular",
+			"author": "Christina Kirschnerova",
+			"url": "https://i.imgur.com/lePTybt.png",
+			"thumbnail": "https://i.imgur.com/lePTybtl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Ignition",
+			"author": "Roland Larsson",
+			"url": "https://i.imgur.com/v4si6N2.png",
+			"thumbnail": "https://i.imgur.com/v4si6N2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Falling Light",
+			"author": "Rene Bohmer",
+			"url": "https://i.imgur.com/1U953Cb.png",
+			"thumbnail": "https://i.imgur.com/1U953Cbl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Vices",
+			"author": "Jaredd Craig",
+			"url": "https://i.imgur.com/a2xwnHK.png",
+			"thumbnail": "https://i.imgur.com/a2xwnHKl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Your Worst Nightmare",
+			"author": "Elti Meshau",
+			"url": "https://i.imgur.com/9ajAMtL.png",
+			"thumbnail": "https://i.imgur.com/9ajAMtLl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Tail Lights",
+			"author": "Shaunak Mirashi",
+			"url": "https://i.imgur.com/tL6d50t.png",
+			"thumbnail": "https://i.imgur.com/tL6d50tl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Rapid Transit",
+			"author": "Kevin Clyde Berbano",
+			"url": "https://i.imgur.com/JxXJxDZ.png",
+			"thumbnail": "https://i.imgur.com/JxXJxDZl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Storms Ahead",
+			"author": "Luke Stackpoole",
+			"url": "https://i.imgur.com/ZBMCKbt.png",
+			"thumbnail": "https://i.imgur.com/ZBMCKbtl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Truss",
+			"author": "Phil Botha",
+			"url": "https://i.imgur.com/q4qNcui.png",
+			"thumbnail": "https://i.imgur.com/q4qNcuil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "T",
+			"author": "Joshua Rivera",
+			"url": "https://i.imgur.com/84O8dFa.png",
+			"thumbnail": "https://i.imgur.com/84O8dFal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Shadows on the Wall",
+			"author": "Rene Bohmer",
+			"url": "https://i.imgur.com/09GgsVW.png",
+			"thumbnail": "https://i.imgur.com/09GgsVWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Fluid Dynamics",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/AaD8SLO.png",
+			"thumbnail": "https://i.imgur.com/AaD8SLOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Ombre",
+			"author": "Elliott Engelmann",
+			"url": "https://i.imgur.com/5jsq9Jg.png",
+			"thumbnail": "https://i.imgur.com/5jsq9Jgl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Black Sand",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/Yt8zaUn.png",
+			"thumbnail": "https://i.imgur.com/Yt8zaUnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Carbon",
+			"author": "David Jorre",
+			"url": "https://i.imgur.com/hkN3ioi.png",
+			"thumbnail": "https://i.imgur.com/hkN3ioil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Charred Remains",
+			"author": "Brian Patrick Tagalog",
+			"url": "https://i.imgur.com/SbyCpR2.png",
+			"thumbnail": "https://i.imgur.com/SbyCpR2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Water Fountain",
+			"author": "Quin Stevenson",
+			"url": "https://i.imgur.com/Bz5u4HA.png",
+			"thumbnail": "https://i.imgur.com/Bz5u4HAl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Interleaved",
+			"author": "Ron Whitaker",
+			"url": "https://i.imgur.com/QQ7WQvD.png",
+			"thumbnail": "https://i.imgur.com/QQ7WQvDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Elliptic",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/xBCTxrP.png",
+			"thumbnail": "https://i.imgur.com/xBCTxrPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Convergence",
+			"author": "Josh Rose",
+			"url": "https://i.imgur.com/uqBhWYH.png",
+			"thumbnail": "https://i.imgur.com/uqBhWYHl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "S-Curve",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/Y1A9GTi.png",
+			"thumbnail": "https://i.imgur.com/Y1A9GTil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		}
+	]
+}

public/assets/phosphor-android/krypton/wallpaper.json

@@ -0,0 +1,207 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "https://i.imgur.com/xBCTxrP.png",
+			"preview_thumbnail_url": "https://i.imgur.com/xBCTxrPl.jpg"
+		},
+		{
+			"name": "architecture",
+			"preview_url": "https://i.imgur.com/pdV0KQ1.png",
+			"preview_thumbnail_url": "https://i.imgur.com/pdV0KQ1l.jpg"
+		},
+		{
+			"name": "landscape",
+			"preview_url": "https://i.imgur.com/EEBaeFE.png",
+			"preview_thumbnail_url": "https://i.imgur.com/EEBaeFEl.jpg"
+		},
+		{
+			"name": "minimal",
+			"preview_url": "https://i.imgur.com/peX5qVO.png",
+			"preview_thumbnail_url": "https://i.imgur.com/peX5qVOl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Echoes Of",
+			"author": "Zoltan Tasi",
+			"url": "https://i.imgur.com/OVKso33.png",
+			"thumbnail": "https://i.imgur.com/OVKso33l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Gradient #4B",
+			"author": "Luke Chesser",
+			"url": "https://i.imgur.com/iFrJbfE.png",
+			"thumbnail": "https://i.imgur.com/iFrJbfEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Orthogonal",
+			"author": "Etienne Beauregard",
+			"url": "https://i.imgur.com/cFyjq7V.png",
+			"thumbnail": "https://i.imgur.com/cFyjq7Vl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Filters Through",
+			"author": "Martin Adams",
+			"url": "https://i.imgur.com/r7MFJxM.png",
+			"thumbnail": "https://i.imgur.com/r7MFJxMl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Gehry",
+			"author": "Sascha Yeryomin",
+			"url": "https://i.imgur.com/jf5NX7F.png",
+			"thumbnail": "https://i.imgur.com/jf5NX7Fl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "The Benevolent Corp.",
+			"author": "Alex Iby",
+			"url": "https://i.imgur.com/SrgJtef.png",
+			"thumbnail": "https://i.imgur.com/SrgJtefl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Bokehd",
+			"author": "Kristaps Solims",
+			"url": "https://i.imgur.com/HzU9KSK.png",
+			"thumbnail": "https://i.imgur.com/HzU9KSKl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Confluence",
+			"author": "Ash Edmonds",
+			"url": "https://i.imgur.com/HWwYY1t.png",
+			"thumbnail": "https://i.imgur.com/HWwYY1tl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "What Lies Beyond",
+			"author": "Cheng Feng",
+			"url": "https://i.imgur.com/BjdQkxh.png",
+			"thumbnail": "https://i.imgur.com/BjdQkxhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Stairstep",
+			"author": "Dawid Sokolowski",
+			"url": "https://i.imgur.com/VXzW2tV.png",
+			"thumbnail": "https://i.imgur.com/VXzW2tVl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Bluesmoke",
+			"author": "Albert Bleeker",
+			"url": "https://i.imgur.com/mrltonO.png",
+			"thumbnail": "https://i.imgur.com/mrltonOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Tensegrity",
+			"author": "Luca Bravo",
+			"url": "https://i.imgur.com/N69Gk81.png",
+			"thumbnail": "https://i.imgur.com/N69Gk81l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Vertical Integration",
+			"author": "Pawl Czerwinski",
+			"url": "https://i.imgur.com/rWVitPA.png",
+			"thumbnail": "https://i.imgur.com/rWVitPAl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "T",
+			"author": "Joshua Rivera",
+			"url": "https://i.imgur.com/84O8dFa.png",
+			"thumbnail": "https://i.imgur.com/84O8dFal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Ripples",
+			"author": "Julian Bock",
+			"url": "https://i.imgur.com/T7PwRnh.png",
+			"thumbnail": "https://i.imgur.com/T7PwRnhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Light Speed",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/cprtb1M.png",
+			"thumbnail": "https://i.imgur.com/cprtb1Ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Dunes at Dusk",
+			"author": "Jeremy Bishop",
+			"url": "https://i.imgur.com/EEBaeFE.png",
+			"thumbnail": "https://i.imgur.com/EEBaeFEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Black Sand",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/Yt8zaUn.png",
+			"thumbnail": "https://i.imgur.com/Yt8zaUnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+
+		{
+			"name": "Interleaved",
+			"author": "Ron Whitaker",
+			"url": "https://i.imgur.com/QQ7WQvD.png",
+			"thumbnail": "https://i.imgur.com/QQ7WQvDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Elliptic",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/xBCTxrP.png",
+			"thumbnail": "https://i.imgur.com/xBCTxrPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+	]
+}

public/manifest.json

@@ -8,16 +8,23 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "favicon-192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "favicon-512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
+  "permissions": [
+    "http://*/*",
+    "https://*/*",
+    "clipboardRead",
+    "clipboardWrite",
+    "storage"
+  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#35313D",

src/assets/billiard-ball.svg

@@ -1,25 +1,19 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="246" height="246" viewBox="0 0 246 246">
-<svg width="246px" height="246px" viewBox="0 0 246 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
-    <title>billiard-ball</title>
+    <circle id="billiard-ball-a" cx="120" cy="120" r="120"/>
-    <defs>
+    <filter id="billiard-ball-b" width="103.8%" height="103.8%" x="-1.9%" y="-1.9%" filterUnits="objectBoundingBox">
-        <circle id="path-1" cx="120" cy="120" r="120"></circle>
+      <feOffset dx="9" dy="9" in="SourceAlpha" result="shadowOffsetInner1"/>
-        <filter x="-1.9%" y="-1.9%" width="103.8%" height="103.8%" filterUnits="objectBoundingBox" id="filter-2">
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
-            <feOffset dx="9" dy="9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.1 0"/>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+    </filter>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+  </defs>
-        </filter>
+  <g fill="none" fill-rule="evenodd">
-    </defs>
+    <circle cx="126" cy="126" r="120" fill="#35313D" opacity=".1"/>
-    <g id="billiard-ball" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <use fill="#925BFF" xlink:href="#billiard-ball-a"/>
-        <g>
+    <use fill="#000" filter="url(#billiard-ball-b)" xlink:href="#billiard-ball-a"/>
-            <circle id="shadow" fill="#35313D" opacity="0.100000001" cx="126" cy="126" r="120"></circle>
+    <g transform="translate(56 56)">
-            <g id="body">
+      <path fill="#FFF" d="M64,10 C93.8177085,10 118,34.1822915 118,64 C118,93.8177085 93.8177085,118 64,118 C34.1822915,118 10,93.8177085 10,64 C10,34.1822915 34.1822915,10 64,10 Z"/>
-                <use fill="#925BFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+      <path fill="#000" fill-rule="nonzero" d="M63.9969207,32.342058 C67.0490461,33.4192787 68.6837704,36.7139781 67.7304533,39.7784541 L67.657942,39.9969207 L58.479,66 L67.9990088,65.9993648 L68,55.996 C68,52.6822915 70.6862915,49.996 74,49.996 C77.2383969,49.996 79.8775718,52.5615749 79.9958615,55.7710617 L80,55.996 L80,87.996 C80,91.3097085 77.3137085,93.996 74,93.996 C70.7616031,93.996 68.1224282,91.4304251 68.0041385,88.2209383 L68,87.996 L67.9990088,77.9993648 L50,78 C45.9341991,78 43.0680996,74.05168 44.2723194,70.212364 L44.342058,70.0030793 L56.342058,36.0030793 C57.4449269,32.8782842 60.8721256,31.2391891 63.9969207,32.342058 Z"/>
-                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-            </g>
-            <g id="4" transform="translate(56.000000, 56.000000)">
-                <path d="M64,10 C93.8177085,10 118,34.1822915 118,64 C118,93.8177085 93.8177085,118 64,118 C34.1822915,118 10,93.8177085 10,64 C10,34.1822915 34.1822915,10 64,10 Z" id="circle" fill="#FFFFFF"></path>
-                <path d="M63.9969207,32.342058 C67.0490461,33.4192787 68.6837704,36.7139781 67.7304533,39.7784541 L67.657942,39.9969207 L58.479,66 L67.9990088,65.9993648 L68,55.996 C68,52.6822915 70.6862915,49.996 74,49.996 C77.2383969,49.996 79.8775718,52.5615749 79.9958615,55.7710617 L80,55.996 L80,87.996 C80,91.3097085 77.3137085,93.996 74,93.996 C70.7616031,93.996 68.1224282,91.4304251 68.0041385,88.2209383 L68,87.996 L67.9990088,77.9993648 L50,78 C45.9341991,78 43.0680996,74.05168 44.2723194,70.212364 L44.342058,70.0030793 L56.342058,36.0030793 C57.4449269,32.8782842 60.8721256,31.2391891 63.9969207,32.342058 Z" fill="#000000" fill-rule="nonzero"></path>
-            </g>
-        </g>
     </g>
-</svg>
+  </g>
+</svg>

src/assets/footer-mobile.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="878" height="667" viewBox="0 0 878 667">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="rotate(-10 623.127 52.264)">
+      <polygon fill="#35313D" points="3.245 4.634 359.245 4.634 359.245 288.738 287.234 360.634 3.245 360.634" opacity=".1"/>
+      <polygon fill="#FFD171" points="0 0 356 0 356 284.105 283.989 356 0 356"/>
+      <polygon fill="#000" points="356 284 356 356 284 356" opacity=".1" transform="rotate(180 320 320)"/>
+    </g>
+    <g fill="#000" transform="translate(314)">
+      <g transform="rotate(-58 71.706 11.615)">
+        <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+        <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+      </g>
+      <g transform="rotate(40 -178.662 147.611)">
+        <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+        <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+      </g>
+    </g>
+    <g transform="rotate(-170 269.983 311.939)">
+      <path fill="#35313D" d="M14.3245,446.00015 C13.567,446.00015 12.9295,445.43765 12.8365,444.68615 L12.25,440.00015 L11.7301372,440.00015 C10.7367686,440.00015 9.89394963,439.271054 9.75096432,438.28803 L2,385.00015 C0.8954305,385.00015 1.63710399e-11,384.104719 1.63709046e-11,383.00015 L1.63709046e-11,8.00015 C1.63703635e-11,3.581872 3.581722,0.000149999993 8,0.000149999993 L33,0.000149999993 C37.418278,0.000149999993 41,3.581872 41,8.00015 L41,383.00015 C41,384.104719 40.1045695,385.00015 39,385.00015 L31.2490357,438.28803 C31.1060504,439.271054 30.2632314,440.00015 29.2698628,440.00015 L28.75,440.00015 L28.1635,444.68615 C28.0705,445.43765 27.433,446.00015 26.6755,446.00015 L24.25,446.00015 L22.909,457.42265 C22.819,458.59415 21.8425,459.50015 20.6665,459.50015 L20.3335,459.50015 C19.1575,459.50015 18.181,458.59415 18.091,457.42265 L16.75,446.00015 L14.3245,446.00015 Z" opacity=".1"/>
+      <g transform="translate(5.424 6)">
+        <path fill="#4B4A48" d="M12.826,434 L29.326,434 L28.7395,438.686 C28.6465,439.4375 28.009,440 27.2515,440 L14.9005,440 C14.143,440 13.5055,439.4375 13.4125,438.686 L12.826,434 Z"/>
+        <path fill="#353432" d="M10.3269643,432.28788 L2.576,379 L2.576,379 L39.576,379 L31.8250357,432.28788 C31.6820504,433.270904 30.8392314,434 29.8458628,434 L12.3061372,434 C11.3127686,434 10.4699496,433.270904 10.3269643,432.28788 Z"/>
+        <path fill="#1F1D1B" d="M0.576,377 L0.576,8 C0.576,3.581722 4.157722,8.11624501e-16 8.576,0 L33.576,0 C37.994278,-8.11624501e-16 41.576,3.581722 41.576,8 L41.576,189.5 L41.576,189.5 L41.576,377 C41.576,378.104569 40.6805695,379 39.576,379 L2.576,379 C1.4714305,379 0.576,378.104569 0.576,377 Z"/>
+        <path fill="#1FA647" d="M17.326,440 L24.826,440 L23.485,451.4225 C23.395,452.594 22.4185,453.5 21.2425,453.5 L20.9095,453.5 C19.7335,453.5 18.757,452.594 18.667,451.4225 L17.326,440 Z"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M-0.068,324.49985 L-0.068,321.37985 L1.024,321.37985 C2.98,321.37985 4.24,320.51585 4.24,318.70385 L4.24,318.65585 C4.24,316.84385 3.052,315.91985 0.964,315.91985 L-2,315.91985 L-2,324.49985 L-0.068,324.49985 Z M0.916,320.02385 L-0.068,320.02385 L-0.068,317.39585 L0.916,317.39585 C1.84,317.39585 2.368,317.75585 2.368,318.66785 L2.368,318.71585 C2.368,319.56785 1.864,320.02385 0.916,320.02385 Z M7.456,324.49985 L7.456,320.95985 L10.9,320.95985 L10.9,324.49985 L12.844,324.49985 L12.844,315.91985 L10.9,315.91985 L10.9,319.42385 L7.456,319.42385 L7.456,315.91985 L5.512,315.91985 L5.512,324.49985 L7.456,324.49985 Z M18.64,324.63185 C21.316,324.63185 23.068,322.77185 23.068,320.21585 L23.068,320.11985 C23.068,317.53985 21.232,315.79985 18.652,315.79985 C16.108,315.79985 14.236,317.61185 14.236,320.16785 L14.236,320.26385 C14.236,322.77185 15.952,324.63185 18.64,324.63185 Z M18.676,323.08385 C17.272,323.08385 16.264,322.00385 16.264,320.25185 L16.264,320.15585 C16.264,318.42785 17.164,317.33585 18.652,317.33585 C20.152,317.33585 21.04,318.47585 21.04,320.14385 L21.04,320.23985 C21.04,321.96785 20.128,323.08385 18.676,323.08385 Z M27.472,324.63185 C29.5,324.63185 30.748,323.41985 30.748,321.89585 C30.748,320.11985 29.68,319.55585 27.604,319.29185 C26.284,319.09985 26.008,318.81185 26.008,318.19985 C26.008,317.62385 26.44,317.22785 27.292,317.22785 C28.144,317.22785 28.6,317.58785 28.72,318.36785 L30.508,318.36785 C30.352,316.66385 29.224,315.79985 27.292,315.79985 C25.396,315.79985 24.172,316.89185 24.172,318.35585 C24.172,320.01185 25.072,320.67185 27.268,320.95985 C28.528,321.15185 28.888,321.39185 28.888,322.07585 C28.888,322.74785 28.324,323.21585 27.472,323.21585 C26.2,323.21585 25.876,322.57985 25.792,321.81185 L23.932,321.81185 C24.04,323.52785 25.12,324.63185 27.472,324.63185 Z M34.084,324.49985 L34.084,321.37985 L35.176,321.37985 C37.132,321.37985 38.392,320.51585 38.392,318.70385 L38.392,318.65585 C38.392,316.84385 37.204,315.91985 35.116,315.91985 L32.152,315.91985 L32.152,324.49985 L34.084,324.49985 Z M35.068,320.02385 L34.084,320.02385 L34.084,317.39585 L35.068,317.39585 C35.992,317.39585 36.52,317.75585 36.52,318.66785 L36.52,318.71585 C36.52,319.56785 36.016,320.02385 35.068,320.02385 Z M41.608,324.49985 L41.608,320.95985 L45.052,320.95985 L45.052,324.49985 L46.996,324.49985 L46.996,315.91985 L45.052,315.91985 L45.052,319.42385 L41.608,319.42385 L41.608,315.91985 L39.664,315.91985 L39.664,324.49985 L41.608,324.49985 Z M52.792,324.63185 C55.468,324.63185 57.22,322.77185 57.22,320.21585 L57.22,320.11985 C57.22,317.53985 55.384,315.79985 52.804,315.79985 C50.26,315.79985 48.388,317.61185 48.388,320.16785 L48.388,320.26385 C48.388,322.77185 50.104,324.63185 52.792,324.63185 Z M52.828,323.08385 C51.424,323.08385 50.416,322.00385 50.416,320.25185 L50.416,320.15585 C50.416,318.42785 51.316,317.33585 52.804,317.33585 C54.304,317.33585 55.192,318.47585 55.192,320.14385 L55.192,320.23985 C55.192,321.96785 54.28,323.08385 52.828,323.08385 Z M60.556,324.49985 L60.556,321.18785 L61.396,321.18785 L63.448,324.49985 L65.512,324.49985 L63.244,320.85185 C64.252,320.55185 65.008,319.86785 65.008,318.57185 L65.008,318.52385 C65.008,316.74785 63.724,315.91985 61.696,315.91985 L58.624,315.91985 L58.624,324.49985 L60.556,324.49985 Z M61.648,319.86785 L60.556,319.86785 L60.556,317.40785 L61.648,317.40785 C62.584,317.40785 63.112,317.70785 63.112,318.58385 L63.112,318.63185 C63.112,319.45985 62.62,319.86785 61.648,319.86785 Z" opacity=".2" transform="rotate(90 31.756 320.216)"/>
+      </g>
+      <g fill="#FFF" opacity=".1" transform="matrix(-1 0 0 1 47 6)">
+        <polygon points="17.5 440 16.75 434 12.25 434 13 440"/>
+        <polygon points="10 434 2 379 11 379 17.5 434"/>
+        <path d="M0 377L0 8C-5.41083001e-16 3.581722 3.581722 8.11624501e-16 8 0L9 0 9 0 9 379 2 379C.8954305 379 1.3527075e-16 378.104569 0 377zM16.75 440L18.091 451.4225C18.181 452.594 19.1575 453.5 20.3335 453.5L20.5 453.5 19 440 16.75 440z"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/marker-green.svg

@@ -1,22 +1,17 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="118" height="462" viewBox="0 0 118 462">
-<svg width="118px" height="462px" viewBox="0 0 118 462" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="none" fill-rule="evenodd" transform="rotate(-170 43.817 228.606)">
-    <title>marker-green</title>
+    <path fill="#35313D" d="M14.3245,446.00015 C13.567,446.00015 12.9295,445.43765 12.8365,444.68615 L12.25,440.00015 L11.7301372,440.00015 C10.7367686,440.00015 9.89394963,439.271054 9.75096432,438.28803 L2,385.00015 C0.8954305,385.00015 1.63710399e-11,384.104719 1.63709046e-11,383.00015 L1.63709046e-11,8.00015 C1.63703635e-11,3.581872 3.581722,0.000149999993 8,0.000149999993 L33,0.000149999993 C37.418278,0.000149999993 41,3.581872 41,8.00015 L41,383.00015 C41,384.104719 40.1045695,385.00015 39,385.00015 L31.2490357,438.28803 C31.1060504,439.271054 30.2632314,440.00015 29.2698628,440.00015 L28.75,440.00015 L28.1635,444.68615 C28.0705,445.43765 27.433,446.00015 26.6755,446.00015 L24.25,446.00015 L22.909,457.42265 C22.819,458.59415 21.8425,459.50015 20.6665,459.50015 L20.3335,459.50015 C19.1575,459.50015 18.181,458.59415 18.091,457.42265 L16.75,446.00015 L14.3245,446.00015 Z" opacity=".1"/>
-    <g id="marker-green" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(5.424 6)">
-        <g id="marker" transform="translate(63.574467, 230.673339) rotate(190.000000) translate(-63.574467, -230.673339) translate(39.574467, 0.673339)">
+      <path fill="#4B4A48" d="M12.826,434 L29.326,434 L28.7395,438.686 C28.6465,439.4375 28.009,440 27.2515,440 L14.9005,440 C14.143,440 13.5055,439.4375 13.4125,438.686 L12.826,434 Z"/>
-            <path d="M14.3245,446.00015 C13.567,446.00015 12.9295,445.43765 12.8365,444.68615 L12.25,440.00015 L11.7301372,440.00015 C10.7367686,440.00015 9.89394963,439.271054 9.75096432,438.28803 L2,385.00015 C0.8954305,385.00015 1.63710399e-11,384.104719 1.63709046e-11,383.00015 L1.63709046e-11,8.00015 C1.63703635e-11,3.581872 3.581722,0.000149999993 8,0.000149999993 L33,0.000149999993 C37.418278,0.000149999993 41,3.581872 41,8.00015 L41,383.00015 C41,384.104719 40.1045695,385.00015 39,385.00015 L31.2490357,438.28803 C31.1060504,439.271054 30.2632314,440.00015 29.2698628,440.00015 L28.75,440.00015 L28.1635,444.68615 C28.0705,445.43765 27.433,446.00015 26.6755,446.00015 L24.25,446.00015 L22.909,457.42265 C22.819,458.59415 21.8425,459.50015 20.6665,459.50015 L20.3335,459.50015 C19.1575,459.50015 18.181,458.59415 18.091,457.42265 L16.75,446.00015 L14.3245,446.00015 Z" id="shadow" fill="#35313D" opacity="0.100000001"></path>
+      <path fill="#353432" d="M10.3269643,432.28788 L2.576,379 L2.576,379 L39.576,379 L31.8250357,432.28788 C31.6820504,433.270904 30.8392314,434 29.8458628,434 L12.3061372,434 C11.3127686,434 10.4699496,433.270904 10.3269643,432.28788 Z"/>
-            <g id="body" transform="translate(5.424000, 6.000150)">
+      <path fill="#1F1D1B" d="M0.576,377 L0.576,8 C0.576,3.581722 4.157722,8.11624501e-16 8.576,0 L33.576,0 C37.994278,-8.11624501e-16 41.576,3.581722 41.576,8 L41.576,189.5 L41.576,189.5 L41.576,377 C41.576,378.104569 40.6805695,379 39.576,379 L2.576,379 C1.4714305,379 0.576,378.104569 0.576,377 Z"/>
-                <path d="M12.826,434 L29.326,434 L28.7395,438.686 C28.6465,439.4375 28.009,440 27.2515,440 L14.9005,440 C14.143,440 13.5055,439.4375 13.4125,438.686 L12.826,434 Z" fill="#4B4A48"></path>
+      <path fill="#1FA647" d="M17.326,440 L24.826,440 L23.485,451.4225 C23.395,452.594 22.4185,453.5 21.2425,453.5 L20.9095,453.5 C19.7335,453.5 18.757,452.594 18.667,451.4225 L17.326,440 Z"/>
-                <path d="M10.3269643,432.28788 L2.576,379 L2.576,379 L39.576,379 L31.8250357,432.28788 C31.6820504,433.270904 30.8392314,434 29.8458628,434 L12.3061372,434 C11.3127686,434 10.4699496,433.270904 10.3269643,432.28788 Z" fill="#353432"></path>
+      <path fill="#FFF" fill-rule="nonzero" d="M-0.068,324.49985 L-0.068,321.37985 L1.024,321.37985 C2.98,321.37985 4.24,320.51585 4.24,318.70385 L4.24,318.65585 C4.24,316.84385 3.052,315.91985 0.964,315.91985 L-2,315.91985 L-2,324.49985 L-0.068,324.49985 Z M0.916,320.02385 L-0.068,320.02385 L-0.068,317.39585 L0.916,317.39585 C1.84,317.39585 2.368,317.75585 2.368,318.66785 L2.368,318.71585 C2.368,319.56785 1.864,320.02385 0.916,320.02385 Z M7.456,324.49985 L7.456,320.95985 L10.9,320.95985 L10.9,324.49985 L12.844,324.49985 L12.844,315.91985 L10.9,315.91985 L10.9,319.42385 L7.456,319.42385 L7.456,315.91985 L5.512,315.91985 L5.512,324.49985 L7.456,324.49985 Z M18.64,324.63185 C21.316,324.63185 23.068,322.77185 23.068,320.21585 L23.068,320.11985 C23.068,317.53985 21.232,315.79985 18.652,315.79985 C16.108,315.79985 14.236,317.61185 14.236,320.16785 L14.236,320.26385 C14.236,322.77185 15.952,324.63185 18.64,324.63185 Z M18.676,323.08385 C17.272,323.08385 16.264,322.00385 16.264,320.25185 L16.264,320.15585 C16.264,318.42785 17.164,317.33585 18.652,317.33585 C20.152,317.33585 21.04,318.47585 21.04,320.14385 L21.04,320.23985 C21.04,321.96785 20.128,323.08385 18.676,323.08385 Z M27.472,324.63185 C29.5,324.63185 30.748,323.41985 30.748,321.89585 C30.748,320.11985 29.68,319.55585 27.604,319.29185 C26.284,319.09985 26.008,318.81185 26.008,318.19985 C26.008,317.62385 26.44,317.22785 27.292,317.22785 C28.144,317.22785 28.6,317.58785 28.72,318.36785 L30.508,318.36785 C30.352,316.66385 29.224,315.79985 27.292,315.79985 C25.396,315.79985 24.172,316.89185 24.172,318.35585 C24.172,320.01185 25.072,320.67185 27.268,320.95985 C28.528,321.15185 28.888,321.39185 28.888,322.07585 C28.888,322.74785 28.324,323.21585 27.472,323.21585 C26.2,323.21585 25.876,322.57985 25.792,321.81185 L23.932,321.81185 C24.04,323.52785 25.12,324.63185 27.472,324.63185 Z M34.084,324.49985 L34.084,321.37985 L35.176,321.37985 C37.132,321.37985 38.392,320.51585 38.392,318.70385 L38.392,318.65585 C38.392,316.84385 37.204,315.91985 35.116,315.91985 L32.152,315.91985 L32.152,324.49985 L34.084,324.49985 Z M35.068,320.02385 L34.084,320.02385 L34.084,317.39585 L35.068,317.39585 C35.992,317.39585 36.52,317.75585 36.52,318.66785 L36.52,318.71585 C36.52,319.56785 36.016,320.02385 35.068,320.02385 Z M41.608,324.49985 L41.608,320.95985 L45.052,320.95985 L45.052,324.49985 L46.996,324.49985 L46.996,315.91985 L45.052,315.91985 L45.052,319.42385 L41.608,319.42385 L41.608,315.91985 L39.664,315.91985 L39.664,324.49985 L41.608,324.49985 Z M52.792,324.63185 C55.468,324.63185 57.22,322.77185 57.22,320.21585 L57.22,320.11985 C57.22,317.53985 55.384,315.79985 52.804,315.79985 C50.26,315.79985 48.388,317.61185 48.388,320.16785 L48.388,320.26385 C48.388,322.77185 50.104,324.63185 52.792,324.63185 Z M52.828,323.08385 C51.424,323.08385 50.416,322.00385 50.416,320.25185 L50.416,320.15585 C50.416,318.42785 51.316,317.33585 52.804,317.33585 C54.304,317.33585 55.192,318.47585 55.192,320.14385 L55.192,320.23985 C55.192,321.96785 54.28,323.08385 52.828,323.08385 Z M60.556,324.49985 L60.556,321.18785 L61.396,321.18785 L63.448,324.49985 L65.512,324.49985 L63.244,320.85185 C64.252,320.55185 65.008,319.86785 65.008,318.57185 L65.008,318.52385 C65.008,316.74785 63.724,315.91985 61.696,315.91985 L58.624,315.91985 L58.624,324.49985 L60.556,324.49985 Z M61.648,319.86785 L60.556,319.86785 L60.556,317.40785 L61.648,317.40785 C62.584,317.40785 63.112,317.70785 63.112,318.58385 L63.112,318.63185 C63.112,319.45985 62.62,319.86785 61.648,319.86785 Z" opacity=".2" transform="rotate(90 31.756 320.216)"/>
-                <path d="M0.576,377 L0.576,8 C0.576,3.581722 4.157722,8.11624501e-16 8.576,0 L33.576,0 C37.994278,-8.11624501e-16 41.576,3.581722 41.576,8 L41.576,189.5 L41.576,189.5 L41.576,377 C41.576,378.104569 40.6805695,379 39.576,379 L2.576,379 C1.4714305,379 0.576,378.104569 0.576,377 Z" fill="#1F1D1B"></path>
-                <path d="M17.326,440 L24.826,440 L23.485,451.4225 C23.395,452.594 22.4185,453.5 21.2425,453.5 L20.9095,453.5 C19.7335,453.5 18.757,452.594 18.667,451.4225 L17.326,440 Z" id="tip" fill="#1FA647"></path>
-                <path d="M-0.068,324.49985 L-0.068,321.37985 L1.024,321.37985 C2.98,321.37985 4.24,320.51585 4.24,318.70385 L4.24,318.65585 C4.24,316.84385 3.052,315.91985 0.964,315.91985 L-2,315.91985 L-2,324.49985 L-0.068,324.49985 Z M0.916,320.02385 L-0.068,320.02385 L-0.068,317.39585 L0.916,317.39585 C1.84,317.39585 2.368,317.75585 2.368,318.66785 L2.368,318.71585 C2.368,319.56785 1.864,320.02385 0.916,320.02385 Z M7.456,324.49985 L7.456,320.95985 L10.9,320.95985 L10.9,324.49985 L12.844,324.49985 L12.844,315.91985 L10.9,315.91985 L10.9,319.42385 L7.456,319.42385 L7.456,315.91985 L5.512,315.91985 L5.512,324.49985 L7.456,324.49985 Z M18.64,324.63185 C21.316,324.63185 23.068,322.77185 23.068,320.21585 L23.068,320.11985 C23.068,317.53985 21.232,315.79985 18.652,315.79985 C16.108,315.79985 14.236,317.61185 14.236,320.16785 L14.236,320.26385 C14.236,322.77185 15.952,324.63185 18.64,324.63185 Z M18.676,323.08385 C17.272,323.08385 16.264,322.00385 16.264,320.25185 L16.264,320.15585 C16.264,318.42785 17.164,317.33585 18.652,317.33585 C20.152,317.33585 21.04,318.47585 21.04,320.14385 L21.04,320.23985 C21.04,321.96785 20.128,323.08385 18.676,323.08385 Z M27.472,324.63185 C29.5,324.63185 30.748,323.41985 30.748,321.89585 C30.748,320.11985 29.68,319.55585 27.604,319.29185 C26.284,319.09985 26.008,318.81185 26.008,318.19985 C26.008,317.62385 26.44,317.22785 27.292,317.22785 C28.144,317.22785 28.6,317.58785 28.72,318.36785 L30.508,318.36785 C30.352,316.66385 29.224,315.79985 27.292,315.79985 C25.396,315.79985 24.172,316.89185 24.172,318.35585 C24.172,320.01185 25.072,320.67185 27.268,320.95985 C28.528,321.15185 28.888,321.39185 28.888,322.07585 C28.888,322.74785 28.324,323.21585 27.472,323.21585 C26.2,323.21585 25.876,322.57985 25.792,321.81185 L23.932,321.81185 C24.04,323.52785 25.12,324.63185 27.472,324.63185 Z M34.084,324.49985 L34.084,321.37985 L35.176,321.37985 C37.132,321.37985 38.392,320.51585 38.392,318.70385 L38.392,318.65585 C38.392,316.84385 37.204,315.91985 35.116,315.91985 L32.152,315.91985 L32.152,324.49985 L34.084,324.49985 Z M35.068,320.02385 L34.084,320.02385 L34.084,317.39585 L35.068,317.39585 C35.992,317.39585 36.52,317.75585 36.52,318.66785 L36.52,318.71585 C36.52,319.56785 36.016,320.02385 35.068,320.02385 Z M41.608,324.49985 L41.608,320.95985 L45.052,320.95985 L45.052,324.49985 L46.996,324.49985 L46.996,315.91985 L45.052,315.91985 L45.052,319.42385 L41.608,319.42385 L41.608,315.91985 L39.664,315.91985 L39.664,324.49985 L41.608,324.49985 Z M52.792,324.63185 C55.468,324.63185 57.22,322.77185 57.22,320.21585 L57.22,320.11985 C57.22,317.53985 55.384,315.79985 52.804,315.79985 C50.26,315.79985 48.388,317.61185 48.388,320.16785 L48.388,320.26385 C48.388,322.77185 50.104,324.63185 52.792,324.63185 Z M52.828,323.08385 C51.424,323.08385 50.416,322.00385 50.416,320.25185 L50.416,320.15585 C50.416,318.42785 51.316,317.33585 52.804,317.33585 C54.304,317.33585 55.192,318.47585 55.192,320.14385 L55.192,320.23985 C55.192,321.96785 54.28,323.08385 52.828,323.08385 Z M60.556,324.49985 L60.556,321.18785 L61.396,321.18785 L63.448,324.49985 L65.512,324.49985 L63.244,320.85185 C64.252,320.55185 65.008,319.86785 65.008,318.57185 L65.008,318.52385 C65.008,316.74785 63.724,315.91985 61.696,315.91985 L58.624,315.91985 L58.624,324.49985 L60.556,324.49985 Z M61.648,319.86785 L60.556,319.86785 L60.556,317.40785 L61.648,317.40785 C62.584,317.40785 63.112,317.70785 63.112,318.58385 L63.112,318.63185 C63.112,319.45985 62.62,319.86785 61.648,319.86785 Z" id="phosphor" fill="#FFFFFF" fill-rule="nonzero" opacity="0.200000003" transform="translate(31.756000, 320.215850) rotate(90.000000) translate(-31.756000, -320.215850) "></path>
-            </g>
-            <g id="highlights" transform="translate(36.500000, 233.000150) scale(-1, 1) translate(-36.500000, -233.000150) translate(26.000000, 6.000150)" fill="#FFFFFF" opacity="0.100000001">
-                <polygon id="highlight" points="17.5 440 16.75 434 12.25 434 13 440"></polygon>
-                <polygon id="highlight" points="10 434 2 379 11 379 17.5 434"></polygon>
-                <path d="M0,377 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L9,0 L9,0 L9,379 L2,379 C0.8954305,379 1.3527075e-16,378.104569 0,377 Z" id="highlight"></path>
-                <path d="M16.75,440 L18.091,451.4225 C18.181,452.594 19.1575,453.5 20.3335,453.5 L20.5,453.5 L19,440 L16.75,440 Z" id="highlight"></path>
-            </g>
-        </g>
     </g>
-</svg>
+    <g fill="#FFF" opacity=".1" transform="matrix(-1 0 0 1 47 6)">
+      <polygon points="17.5 440 16.75 434 12.25 434 13 440"/>
+      <polygon points="10 434 2 379 11 379 17.5 434"/>
+      <path d="M0 377L0 8C-5.41083001e-16 3.581722 3.581722 8.11624501e-16 8 0L9 0 9 0 9 379 2 379C.8954305 379 1.3527075e-16 378.104569 0 377zM16.75 440L18.091 451.4225C18.181 452.594 19.1575 453.5 20.3335 453.5L20.5 453.5 19 440 16.75 440z"/>
+    </g>
+  </g>
+</svg>

src/assets/marker-purple.svg

@@ -1,22 +1,15 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="458" viewBox="0 0 45 458">
-<svg width="45px" height="458px" viewBox="0 0 45 458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="none" fill-rule="evenodd">
-    <title>marker-purple</title>
+    <path fill="#35313D" d="M18.3245,444.00015 C17.567,444.00015 16.9295,443.43765 16.8365,442.68615 L16.25,438.00015 L15.7301372,438.00015 C14.7367686,438.00015 13.8939496,437.271054 13.7509643,436.28803 L6,383.00015 C4.8954305,383.00015 4,382.104719 4,381.00015 L4,14 C4,9.581722 7.581722,6 12,6 L37,6 C41.418278,6 45,9.581722 45,14 L45,381.00015 C45,382.104719 44.1045695,383.00015 43,383.00015 L35.2490357,436.28803 C35.1060504,437.271054 34.2632314,438.00015 33.2698628,438.00015 L32.75,438.00015 L32.1635,442.68615 C32.0705,443.43765 31.433,444.00015 30.6755,444.00015 L28.25,444.00015 L26.909,455.42265 C26.819,456.59415 25.8425,457.50015 24.6665,457.50015 L24.3335,457.50015 C23.1575,457.50015 22.181,456.59415 22.091,455.42265 L20.75,444.00015 L18.3245,444.00015 Z" opacity=".1"/>
-    <g id="marker-purple" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path fill="#4B4A48" d="M12.25,434 L28.75,434 L28.1635,438.686 C28.0705,439.4375 27.433,440 26.6755,440 L14.3245,440 C13.567,440 12.9295,439.4375 12.8365,438.686 L12.25,434 Z"/>
-        <g id="marker">
+    <path fill="#353432" d="M9.75096432,432.28788 L2,379 L2,379 L39,379 L31.2490357,432.28788 C31.1060504,433.270904 30.2632314,434 29.2698628,434 L11.7301372,434 C10.7367686,434 9.89394963,433.270904 9.75096432,432.28788 Z"/>
-            <path d="M18.3245,444.00015 C17.567,444.00015 16.9295,443.43765 16.8365,442.68615 L16.25,438.00015 L15.7301372,438.00015 C14.7367686,438.00015 13.8939496,437.271054 13.7509643,436.28803 L6,383.00015 C4.8954305,383.00015 4,382.104719 4,381.00015 L4,14 C4,9.581722 7.581722,6 12,6 L37,6 C41.418278,6 45,9.581722 45,14 L45,381.00015 C45,382.104719 44.1045695,383.00015 43,383.00015 L35.2490357,436.28803 C35.1060504,437.271054 34.2632314,438.00015 33.2698628,438.00015 L32.75,438.00015 L32.1635,442.68615 C32.0705,443.43765 31.433,444.00015 30.6755,444.00015 L28.25,444.00015 L26.909,455.42265 C26.819,456.59415 25.8425,457.50015 24.6665,457.50015 L24.3335,457.50015 C23.1575,457.50015 22.181,456.59415 22.091,455.42265 L20.75,444.00015 L18.3245,444.00015 Z" id="shadow" fill="#35313D" opacity="0.100000001"></path>
+    <path fill="#1F1D1B" d="M0,377 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L33,0 C37.418278,-8.11624501e-16 41,3.581722 41,8 L41,377 C41,378.104569 40.1045695,379 39,379 L2,379 C0.8954305,379 1.3527075e-16,378.104569 0,377 Z"/>
-            <g id="body" transform="translate(0.000000, 0.000150)">
+    <path fill="#925BFF" d="M16.75,440 L24.25,440 L22.909,451.4225 C22.819,452.594 21.8425,453.5 20.6665,453.5 L20.3335,453.5 C19.1575,453.5 18.181,452.594 18.091,451.4225 L16.75,440 Z"/>
-                <path d="M12.25,434 L28.75,434 L28.1635,438.686 C28.0705,439.4375 27.433,440 26.6755,440 L14.3245,440 C13.567,440 12.9295,439.4375 12.8365,438.686 L12.25,434 Z" id="Fill-1" fill="#4B4A48"></path>
+    <path fill="#FFF" fill-rule="nonzero" d="M-0.644,324.49985 L-0.644,321.37985 L0.448,321.37985 C2.404,321.37985 3.664,320.51585 3.664,318.70385 L3.664,318.65585 C3.664,316.84385 2.476,315.91985 0.388,315.91985 L-2.576,315.91985 L-2.576,324.49985 L-0.644,324.49985 Z M0.34,320.02385 L-0.644,320.02385 L-0.644,317.39585 L0.34,317.39585 C1.264,317.39585 1.792,317.75585 1.792,318.66785 L1.792,318.71585 C1.792,319.56785 1.288,320.02385 0.34,320.02385 Z M6.88,324.49985 L6.88,320.95985 L10.324,320.95985 L10.324,324.49985 L12.268,324.49985 L12.268,315.91985 L10.324,315.91985 L10.324,319.42385 L6.88,319.42385 L6.88,315.91985 L4.936,315.91985 L4.936,324.49985 L6.88,324.49985 Z M18.064,324.63185 C20.74,324.63185 22.492,322.77185 22.492,320.21585 L22.492,320.11985 C22.492,317.53985 20.656,315.79985 18.076,315.79985 C15.532,315.79985 13.66,317.61185 13.66,320.16785 L13.66,320.26385 C13.66,322.77185 15.376,324.63185 18.064,324.63185 Z M18.1,323.08385 C16.696,323.08385 15.688,322.00385 15.688,320.25185 L15.688,320.15585 C15.688,318.42785 16.588,317.33585 18.076,317.33585 C19.576,317.33585 20.464,318.47585 20.464,320.14385 L20.464,320.23985 C20.464,321.96785 19.552,323.08385 18.1,323.08385 Z M26.896,324.63185 C28.924,324.63185 30.172,323.41985 30.172,321.89585 C30.172,320.11985 29.104,319.55585 27.028,319.29185 C25.708,319.09985 25.432,318.81185 25.432,318.19985 C25.432,317.62385 25.864,317.22785 26.716,317.22785 C27.568,317.22785 28.024,317.58785 28.144,318.36785 L29.932,318.36785 C29.776,316.66385 28.648,315.79985 26.716,315.79985 C24.82,315.79985 23.596,316.89185 23.596,318.35585 C23.596,320.01185 24.496,320.67185 26.692,320.95985 C27.952,321.15185 28.312,321.39185 28.312,322.07585 C28.312,322.74785 27.748,323.21585 26.896,323.21585 C25.624,323.21585 25.3,322.57985 25.216,321.81185 L23.356,321.81185 C23.464,323.52785 24.544,324.63185 26.896,324.63185 Z M33.508,324.49985 L33.508,321.37985 L34.6,321.37985 C36.556,321.37985 37.816,320.51585 37.816,318.70385 L37.816,318.65585 C37.816,316.84385 36.628,315.91985 34.54,315.91985 L31.576,315.91985 L31.576,324.49985 L33.508,324.49985 Z M34.492,320.02385 L33.508,320.02385 L33.508,317.39585 L34.492,317.39585 C35.416,317.39585 35.944,317.75585 35.944,318.66785 L35.944,318.71585 C35.944,319.56785 35.44,320.02385 34.492,320.02385 Z M41.032,324.49985 L41.032,320.95985 L44.476,320.95985 L44.476,324.49985 L46.42,324.49985 L46.42,315.91985 L44.476,315.91985 L44.476,319.42385 L41.032,319.42385 L41.032,315.91985 L39.088,315.91985 L39.088,324.49985 L41.032,324.49985 Z M52.216,324.63185 C54.892,324.63185 56.644,322.77185 56.644,320.21585 L56.644,320.11985 C56.644,317.53985 54.808,315.79985 52.228,315.79985 C49.684,315.79985 47.812,317.61185 47.812,320.16785 L47.812,320.26385 C47.812,322.77185 49.528,324.63185 52.216,324.63185 Z M52.252,323.08385 C50.848,323.08385 49.84,322.00385 49.84,320.25185 L49.84,320.15585 C49.84,318.42785 50.74,317.33585 52.228,317.33585 C53.728,317.33585 54.616,318.47585 54.616,320.14385 L54.616,320.23985 C54.616,321.96785 53.704,323.08385 52.252,323.08385 Z M59.98,324.49985 L59.98,321.18785 L60.82,321.18785 L62.872,324.49985 L64.936,324.49985 L62.668,320.85185 C63.676,320.55185 64.432,319.86785 64.432,318.57185 L64.432,318.52385 C64.432,316.74785 63.148,315.91985 61.12,315.91985 L58.048,315.91985 L58.048,324.49985 L59.98,324.49985 Z M61.072,319.86785 L59.98,319.86785 L59.98,317.40785 L61.072,317.40785 C62.008,317.40785 62.536,317.70785 62.536,318.58385 L62.536,318.63185 C62.536,319.45985 62.044,319.86785 61.072,319.86785 Z" opacity=".3" transform="rotate(90 31.18 320.216)"/>
-                <path d="M9.75096432,432.28788 L2,379 L2,379 L39,379 L31.2490357,432.28788 C31.1060504,433.270904 30.2632314,434 29.2698628,434 L11.7301372,434 C10.7367686,434 9.89394963,433.270904 9.75096432,432.28788 Z" id="Fill-5-Copy-2" fill="#353432"></path>
+    <g fill="#FFF" opacity=".1">
-                <path d="M0,377 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L33,0 C37.418278,-8.11624501e-16 41,3.581722 41,8 L41,377 C41,378.104569 40.1045695,379 39,379 L2,379 C0.8954305,379 1.3527075e-16,378.104569 0,377 Z" id="Fill-5-Copy" fill="#1F1D1B"></path>
+      <polygon points="17.5 440 16.75 434 12.25 434 13 440"/>
-                <path d="M16.75,440 L24.25,440 L22.909,451.4225 C22.819,452.594 21.8425,453.5 20.6665,453.5 L20.3335,453.5 C19.1575,453.5 18.181,452.594 18.091,451.4225 L16.75,440 Z" id="Fill-9" fill="#925BFF"></path>
+      <polygon points="10 434 2 379 11 379 17.5 434"/>
-                <path d="M-0.644,324.49985 L-0.644,321.37985 L0.448,321.37985 C2.404,321.37985 3.664,320.51585 3.664,318.70385 L3.664,318.65585 C3.664,316.84385 2.476,315.91985 0.388,315.91985 L-2.576,315.91985 L-2.576,324.49985 L-0.644,324.49985 Z M0.34,320.02385 L-0.644,320.02385 L-0.644,317.39585 L0.34,317.39585 C1.264,317.39585 1.792,317.75585 1.792,318.66785 L1.792,318.71585 C1.792,319.56785 1.288,320.02385 0.34,320.02385 Z M6.88,324.49985 L6.88,320.95985 L10.324,320.95985 L10.324,324.49985 L12.268,324.49985 L12.268,315.91985 L10.324,315.91985 L10.324,319.42385 L6.88,319.42385 L6.88,315.91985 L4.936,315.91985 L4.936,324.49985 L6.88,324.49985 Z M18.064,324.63185 C20.74,324.63185 22.492,322.77185 22.492,320.21585 L22.492,320.11985 C22.492,317.53985 20.656,315.79985 18.076,315.79985 C15.532,315.79985 13.66,317.61185 13.66,320.16785 L13.66,320.26385 C13.66,322.77185 15.376,324.63185 18.064,324.63185 Z M18.1,323.08385 C16.696,323.08385 15.688,322.00385 15.688,320.25185 L15.688,320.15585 C15.688,318.42785 16.588,317.33585 18.076,317.33585 C19.576,317.33585 20.464,318.47585 20.464,320.14385 L20.464,320.23985 C20.464,321.96785 19.552,323.08385 18.1,323.08385 Z M26.896,324.63185 C28.924,324.63185 30.172,323.41985 30.172,321.89585 C30.172,320.11985 29.104,319.55585 27.028,319.29185 C25.708,319.09985 25.432,318.81185 25.432,318.19985 C25.432,317.62385 25.864,317.22785 26.716,317.22785 C27.568,317.22785 28.024,317.58785 28.144,318.36785 L29.932,318.36785 C29.776,316.66385 28.648,315.79985 26.716,315.79985 C24.82,315.79985 23.596,316.89185 23.596,318.35585 C23.596,320.01185 24.496,320.67185 26.692,320.95985 C27.952,321.15185 28.312,321.39185 28.312,322.07585 C28.312,322.74785 27.748,323.21585 26.896,323.21585 C25.624,323.21585 25.3,322.57985 25.216,321.81185 L23.356,321.81185 C23.464,323.52785 24.544,324.63185 26.896,324.63185 Z M33.508,324.49985 L33.508,321.37985 L34.6,321.37985 C36.556,321.37985 37.816,320.51585 37.816,318.70385 L37.816,318.65585 C37.816,316.84385 36.628,315.91985 34.54,315.91985 L31.576,315.91985 L31.576,324.49985 L33.508,324.49985 Z M34.492,320.02385 L33.508,320.02385 L33.508,317.39585 L34.492,317.39585 C35.416,317.39585 35.944,317.75585 35.944,318.66785 L35.944,318.71585 C35.944,319.56785 35.44,320.02385 34.492,320.02385 Z M41.032,324.49985 L41.032,320.95985 L44.476,320.95985 L44.476,324.49985 L46.42,324.49985 L46.42,315.91985 L44.476,315.91985 L44.476,319.42385 L41.032,319.42385 L41.032,315.91985 L39.088,315.91985 L39.088,324.49985 L41.032,324.49985 Z M52.216,324.63185 C54.892,324.63185 56.644,322.77185 56.644,320.21585 L56.644,320.11985 C56.644,317.53985 54.808,315.79985 52.228,315.79985 C49.684,315.79985 47.812,317.61185 47.812,320.16785 L47.812,320.26385 C47.812,322.77185 49.528,324.63185 52.216,324.63185 Z M52.252,323.08385 C50.848,323.08385 49.84,322.00385 49.84,320.25185 L49.84,320.15585 C49.84,318.42785 50.74,317.33585 52.228,317.33585 C53.728,317.33585 54.616,318.47585 54.616,320.14385 L54.616,320.23985 C54.616,321.96785 53.704,323.08385 52.252,323.08385 Z M59.98,324.49985 L59.98,321.18785 L60.82,321.18785 L62.872,324.49985 L64.936,324.49985 L62.668,320.85185 C63.676,320.55185 64.432,319.86785 64.432,318.57185 L64.432,318.52385 C64.432,316.74785 63.148,315.91985 61.12,315.91985 L58.048,315.91985 L58.048,324.49985 L59.98,324.49985 Z M61.072,319.86785 L59.98,319.86785 L59.98,317.40785 L61.072,317.40785 C62.008,317.40785 62.536,317.70785 62.536,318.58385 L62.536,318.63185 C62.536,319.45985 62.044,319.86785 61.072,319.86785 Z" id="PHOSPHOR" fill="#FFFFFF" fill-rule="nonzero" opacity="0.300000012" transform="translate(31.180000, 320.215850) rotate(90.000000) translate(-31.180000, -320.215850) "></path>
+      <path d="M0 379L0 8C-5.41083001e-16 3.581722 3.581722 8.11624501e-16 8 0L9 0 9 0 9 379 0 379zM16.75 440L18.091 451.4225C18.181 452.594 19.1575 453.5 20.3335 453.5L20.5 453.5 19 440 16.75 440z"/>
-            </g>
-            <g id="highlights" transform="translate(0.000000, 0.000150)" fill="#FFFFFF" opacity="0.100000001">
-                <polygon id="Fill-3" points="17.5 440 16.75 434 12.25 434 13 440"></polygon>
-                <polygon id="Fill-7" points="10 434 2 379 11 379 17.5 434"></polygon>
-                <path d="M0,379 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L9,0 L9,0 L9,379 L0,379 Z" id="Fill-7-Copy"></path>
-                <path d="M16.75,440 L18.091,451.4225 C18.181,452.594 19.1575,453.5 20.3335,453.5 L20.5,453.5 L19,440 L16.75,440 Z" id="Fill-12"></path>
-            </g>
-        </g>
     </g>
-</svg>
+  </g>
+</svg>

src/assets/paperclips-footer.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="289" viewBox="0 0 140 289">
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#000" transform="rotate(-58 71.706 11.615)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+    <g fill="#000" transform="rotate(40 -178.662 147.611)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+  </g>
+</svg>

src/assets/paperclips-header-mobile.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="217" height="199" viewBox="0 0 217 199">
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#000" transform="rotate(-20 141.428 -249.712)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+    <g fill="#000" transform="rotate(10 -475.704 343.826)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+  </g>
+</svg>

src/assets/paperclips-header.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="415" height="199" viewBox="0 0 415 199">
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#000" transform="rotate(-50 68.717 11.971)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+    <g fill="#000" transform="rotate(-20 240.428 -811.169)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+    <g fill="#000" transform="rotate(10 -376.704 1475.401)">
+      <path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
+      <path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
+    </g>
+  </g>
+</svg>

src/assets/post-it.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="418" height="419" viewBox="0 0 418 419">
+  <g fill="none" fill-rule="evenodd" transform="rotate(-10 360.236 29.264)">
+    <polygon fill="#35313D" points="3.245 4.634 359.245 4.634 359.245 288.738 287.234 360.634 3.245 360.634" opacity=".1"/>
+    <polygon fill="#FFD171" points="0 0 356 0 356 284.105 283.989 356 0 356"/>
+    <polygon fill="#000" points="356 284 356 356 284 356" opacity=".1" transform="rotate(180 320 320)"/>
+  </g>
+</svg>

src/assets/u-arrow-up-left.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="58px" height="58px" viewBox="0 0 58 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>u-arrow-up-left</title>
-    <g id="u-arrow-up-left" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon id="bounding-box" transform="translate(29.200000, 29.200000) scale(1, -1) rotate(90.000000) translate(-29.200000, -29.200000) " points="0.4 58 58 58 58 0.4 0.4 0.4"></polygon>
-        <path d="M38.2,9.4 C39.1941125,9.4 40,10.2058875 40,11.2 C40,12.1444069 39.2726866,12.9189407 38.347628,12.9940331 L38.2,13 L18.4,13 C12.4353125,13 7.6,17.8353125 7.6,23.8 C7.6,29.6684828 12.2805926,34.4437284 18.112283,34.5962419 L18.4,34.6 L44.654,34.6 L36.9272078,26.8727922 C36.2633165,26.2089009 36.2264336,25.1554365 36.8165592,24.4482593 L36.9272078,24.3272078 C37.5910991,23.6633165 38.6445635,23.6264336 39.3517407,24.2165592 L39.4727922,24.3272078 L50.2727922,35.1272078 C50.3086835,35.1630991 50.3430661,35.200499 50.3758368,35.2393043 L50.2727922,35.1272078 C50.322523,35.1769386 50.3687356,35.2288554 50.4114298,35.2826489 C50.4303122,35.3066321 50.4485184,35.3308286 50.4661181,35.3554879 C50.4786457,35.3727743 50.4909825,35.3907223 50.5029573,35.4088392 C50.5204983,35.4356771 50.5373395,35.4626973 50.5534721,35.4901836 C50.5604155,35.501718 50.5673022,35.5137723 50.5740382,35.5258878 C50.5905898,35.5559164 50.606343,35.5862258 50.6212445,35.6170243 C50.6310894,35.6372379 50.6403272,35.6573209 50.6491756,35.6775332 C50.6615763,35.705848 50.6734867,35.7350368 50.6846414,35.7645963 C50.6896953,35.7781611 50.6944267,35.7911991 50.6990025,35.8042794 C50.7106655,35.837281 50.721476,35.8712903 50.7312871,35.9057207 C50.7358977,35.9224356 50.7403085,35.938831 50.7444838,35.9552738 C50.7807852,36.0974825 50.8,36.2464973 50.8,36.4 C50.8,36.6494086 50.7492745,36.8869696 50.6575775,37.1029292 C50.6430903,37.1371689 50.6273615,37.1712925 50.6105085,37.2049973 C50.5965597,37.232636 50.5820362,37.2598508 50.5668455,37.2866377 C50.566621,37.2873207 50.5664341,37.2876503 50.566247,37.2879798 C50.5435288,37.327754 50.5186404,37.3678619 50.492262,37.4068799 C50.4795991,37.4258795 50.4663526,37.4446817 50.4527038,37.463281 C50.4342916,37.488172 50.4153249,37.512692 50.3957513,37.5366974 C50.3915469,37.5419745 50.3875087,37.5468658 50.3834408,37.5517407 L50.3644975,37.5739923 C50.3400259,37.6024091 50.3146818,37.630053 50.2885067,37.6568825 L50.2727922,37.6727922 L39.4727922,48.4727922 C38.7698485,49.1757359 37.6301515,49.1757359 36.9272078,48.4727922 C36.2633165,47.8089009 36.2264336,46.7554365 36.8165592,46.0482593 L36.9272078,45.9272078 L44.654,38.2 L18.4,38.2 C10.4470875,38.2 4,31.7529125 4,23.8 C4,15.951731 10.2785434,9.5699209 18.0868626,9.4033373 L18.4,9.4 L38.2,9.4 Z" fill="#000000" fill-rule="nonzero" transform="translate(27.400000, 29.200000) scale(1, -1) rotate(90.000000) translate(-27.400000, -29.200000) "></path>
-    </g>
-</svg>

src/assets/warning.svg

@@ -1,14 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="279" height="555" viewBox="0 0 279 555">
-<svg width="223px" height="444px" viewBox="0 0 223 444" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="none" fill-rule="evenodd" transform="rotate(-80 311.017 260.974)">
-    <title>warning</title>
+    <rect width="523.125" height="180" x=".166" y="8.688" fill="#35313D" opacity=".1"/>
-    <g id="warning" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <rect width="517.5" height="174.375" x="9.063" y="2.813" fill="#FF8E51" stroke="#000" stroke-width="5.625"/>
-        <g transform="translate(111.166399, 221.889681) rotate(280.000000) translate(-111.166399, -221.889681) translate(-100.833601, 146.389681)">
+    <path fill="#000" fill-rule="nonzero" d="M205.43125,111.25 L213.671875,82.45 L221.96875,111.25 L228.6625,111.25 L240.475,70.75 L233.359375,70.75 L225.315625,100 L217.24375,70.75 L210.128125,70.80625 L202.084375,100 L194.0125,70.75 L186.896875,70.75 L198.7375,111.25 L205.43125,111.25 Z M249.221875,111.25 L251.98625,102.475 L267.93875,102.475 L270.7375,111.25 L277.7125,111.25 L264.94375,70.75 L255.015625,70.75 L242.246875,111.25 L249.221875,111.25 Z M265.92125,96.1475 L253.97875,96.1475 L259.91375,77.30875 L265.92125,96.1475 Z M289.553125,111.25 L289.553125,97.103125 L299.1775,97.10375 L306.034375,111.25 L313.7125,111.25 L306.23,95.90375 L306.52526,95.7740991 C308.081297,95.0559812 309.352806,94.0488422 310.339786,92.7526819 L310.5625,92.4484375 C312.23125,90.0765625 313.065625,87.240625 313.065625,83.940625 C313.065625,81.709375 312.695312,79.6796875 311.954687,77.8515625 C311.214062,76.0234375 310.079687,74.509375 308.551562,73.309375 C307.023437,72.109375 305.0875,71.33125 302.74375,70.975 C302.21875,70.88125 301.646875,70.8203125 301.028125,70.7921875 C300.409375,70.7640625 299.903125,70.75 299.509375,70.75 L299.509375,70.75 L282.775,70.75 L282.775,111.25 L289.553125,111.25 Z M299.228125,90.775 L289.553125,90.775 L289.553125,77.10625 L299.228125,77.10625 C299.603125,77.10625 300.025,77.1203125 300.49375,77.1484375 C300.9625,77.1765625 301.39375,77.246875 301.7875,77.359375 C302.9125,77.640625 303.798437,78.1375 304.445312,78.85 C305.092187,79.5625 305.551562,80.3734375 305.823437,81.2828125 C306.095312,82.1921875 306.23125,83.078125 306.23125,83.940625 C306.23125,84.803125 306.095312,85.684375 305.823437,86.584375 C305.551562,87.484375 305.092187,88.290625 304.445312,89.003125 C303.798437,89.715625 302.9125,90.2125 301.7875,90.49375 C301.39375,90.60625 300.9625,90.68125 300.49375,90.71875 C300.025,90.75625 299.603125,90.775 299.228125,90.775 L299.228125,90.775 Z M326.7625,111.25 L326.7625,82.703125 L345.55,111.25 L352.4125,111.25 L352.4125,70.75 L345.55,70.75 L345.55,99.296875 L326.7625,70.75 L319.9,70.75 L319.9,111.25 L326.7625,111.25 Z M367.628125,111.25 L367.628125,70.75 L360.85,70.75 L360.85,111.25 L367.628125,111.25 Z M382.928125,111.25 L382.928125,82.703125 L401.715625,111.25 L408.578125,111.25 L408.578125,70.75 L401.715625,70.75 L401.715625,99.296875 L382.928125,70.75 L376.065625,70.75 L376.065625,111.25 L382.928125,111.25 Z M433.159375,112.09375 C437.078125,112.09375 440.44375,111.25 443.25625,109.5625 C446.06875,107.875 448.229687,105.545312 449.739062,102.573437 C451.248437,99.6015625 452.003125,96.203125 452.003125,92.378125 C452.003125,92.265625 451.99375,91.91875 451.975,91.3375 C451.95625,90.75625 451.928125,90.315625 451.890625,90.015625 L451.890625,90.015625 L437.546875,90.015625 L437.546875,95.33125 L444.690625,95.33125 C444.353125,97.65625 443.696875,99.5921875 442.721875,101.139062 C441.746875,102.685937 440.490625,103.839062 438.953125,104.598437 C437.415625,105.357812 435.625,105.728125 433.58125,105.709375 C430.8625,105.671875 428.598437,105.04375 426.789062,103.825 C424.979687,102.60625 423.625,100.904687 422.725,98.7203125 C421.825,96.5359375 421.375,93.9625 421.375,91 C421.375,88.0375 421.829687,85.45 422.739062,83.2375 C423.648437,81.025 425.003125,79.309375 426.803125,78.090625 C428.603125,76.871875 430.8625,76.28125 433.58125,76.31875 C436.28125,76.31875 438.503125,77.0359375 440.246875,78.4703125 C441.990625,79.9046875 443.246875,81.821875 444.015625,84.221875 L444.015625,84.221875 L450.934375,83.125 C449.903125,78.94375 447.929687,75.6953125 445.014062,73.3796875 C442.098437,71.0640625 438.146875,69.90625 433.159375,69.90625 C429.559375,69.90625 426.325,70.7453125 423.45625,72.4234375 C420.5875,74.1015625 418.328125,76.5109375 416.678125,79.6515625 C415.028125,82.7921875 414.203125,86.575 414.203125,91 C414.203125,94.375 414.690625,97.3703125 415.665625,99.9859375 C416.640625,102.601562 417.995312,104.809375 419.729687,106.609375 C421.464062,108.409375 423.479687,109.773437 425.776562,110.701562 C428.073437,111.629687 430.534375,112.09375 433.159375,112.09375 Z"/>
-            <rect id="shadow" fill="#35313D" opacity="0.100000001" x="0.133042548" y="6.95073558" width="418.5" height="144"></rect>
+    <path fill="#000" d="M45,67.501125 C42.67125,67.501125 40.78125,65.611125 40.78125,63.282375 C40.78125,60.948 42.67125,59.063625 45,59.063625 C47.32875,59.063625 49.21875,60.948 49.21875,63.282375 C49.21875,65.611125 47.32875,67.501125 45,67.501125 L45,67.501125 Z M42.1875,33.751125 C42.1875,32.193 43.441875,30.938625 45,30.938625 C46.5525,30.938625 47.8125,32.193 47.8125,33.751125 L47.8125,50.626125 C47.8125,52.178625 46.5525,53.438625 45,53.438625 C43.441875,53.438625 42.1875,52.178625 42.1875,50.626125 L42.1875,33.751125 Z M83.2275,66.083625 L52.30125,12.646125 C50.776875,10.008 48.04875,8.438625 45,8.438625 C41.95125,8.438625 39.223125,10.008 37.69875,12.646125 L37.69875,12.646125 L6.7725,66.083625 C5.236875,68.727375 5.236875,71.883 6.766875,74.52675 C8.285625,77.1705 11.01375,78.7455 14.068125,78.7455 L75.931875,78.7455 C78.98625,78.7455 81.714375,77.1705 83.233125,74.52675 C84.763125,71.883 84.763125,68.727375 83.2275,66.083625 L83.2275,66.083625 Z" transform="translate(81.25 45)"/>
-            <rect id="body" stroke="#000000" stroke-width="4.5" fill="#FF8E51" x="7.25" y="2.25" width="414" height="139.5"></rect>
+  </g>
-            <path d="M164.345,89 L170.9375,65.96 L177.575,89 L182.93,89 L192.38,56.6 L186.6875,56.6 L180.2525,80 L173.795,56.6 L168.1025,56.645 L161.6675,80 L155.21,56.6 L149.5175,56.6 L158.99,89 L164.345,89 Z M199.3775,89 L201.589,81.98 L214.351,81.98 L216.59,89 L222.17,89 L211.955,56.6 L204.0125,56.6 L193.7975,89 L199.3775,89 Z M212.737,76.918 L203.183,76.918 L207.931,61.847 L212.737,76.918 Z M231.6425,89 L231.6425,77.6825 L239.342,77.683 L244.8275,89 L250.97,89 L244.984,76.723 L245.220208,76.6192793 C246.465038,76.044785 247.482245,75.2390737 248.271829,74.2021456 L248.45,73.95875 C249.785,72.06125 250.4525,69.7925 250.4525,67.1525 C250.4525,65.3675 250.15625,63.74375 249.56375,62.28125 C248.97125,60.81875 248.06375,59.6075 246.84125,58.6475 C245.61875,57.6875 244.07,57.065 242.195,56.78 C241.775,56.705 241.3175,56.65625 240.8225,56.63375 C240.3275,56.61125 239.9225,56.6 239.6075,56.6 L239.6075,56.6 L226.22,56.6 L226.22,89 L231.6425,89 Z M239.3825,72.62 L231.6425,72.62 L231.6425,61.685 L239.3825,61.685 C239.6825,61.685 240.02,61.69625 240.395,61.71875 C240.77,61.74125 241.115,61.7975 241.43,61.8875 C242.33,62.1125 243.03875,62.51 243.55625,63.08 C244.07375,63.65 244.44125,64.29875 244.65875,65.02625 C244.87625,65.75375 244.985,66.4625 244.985,67.1525 C244.985,67.8425 244.87625,68.5475 244.65875,69.2675 C244.44125,69.9875 244.07375,70.6325 243.55625,71.2025 C243.03875,71.7725 242.33,72.17 241.43,72.395 C241.115,72.485 240.77,72.545 240.395,72.575 C240.02,72.605 239.6825,72.62 239.3825,72.62 L239.3825,72.62 Z M261.41,89 L261.41,66.1625 L276.44,89 L281.93,89 L281.93,56.6 L276.44,56.6 L276.44,79.4375 L261.41,56.6 L255.92,56.6 L255.92,89 L261.41,89 Z M294.1025,89 L294.1025,56.6 L288.68,56.6 L288.68,89 L294.1025,89 Z M306.3425,89 L306.3425,66.1625 L321.3725,89 L326.8625,89 L326.8625,56.6 L321.3725,56.6 L321.3725,79.4375 L306.3425,56.6 L300.8525,56.6 L300.8525,89 L306.3425,89 Z M346.5275,89.675 C349.6625,89.675 352.355,89 354.605,87.65 C356.855,86.3 358.58375,84.43625 359.79125,82.05875 C360.99875,79.68125 361.6025,76.9625 361.6025,73.9025 C361.6025,73.8125 361.595,73.535 361.58,73.07 C361.565,72.605 361.5425,72.2525 361.5125,72.0125 L361.5125,72.0125 L350.0375,72.0125 L350.0375,76.265 L355.7525,76.265 C355.4825,78.125 354.9575,79.67375 354.1775,80.91125 C353.3975,82.14875 352.3925,83.07125 351.1625,83.67875 C349.9325,84.28625 348.5,84.5825 346.865,84.5675 C344.69,84.5375 342.87875,84.035 341.43125,83.06 C339.98375,82.085 338.9,80.72375 338.18,78.97625 C337.46,77.22875 337.1,75.17 337.1,72.8 C337.1,70.43 337.46375,68.36 338.19125,66.59 C338.91875,64.82 340.0025,63.4475 341.4425,62.4725 C342.8825,61.4975 344.69,61.025 346.865,61.055 C349.025,61.055 350.8025,61.62875 352.1975,62.77625 C353.5925,63.92375 354.5975,65.4575 355.2125,67.3775 L355.2125,67.3775 L360.7475,66.5 C359.9225,63.155 358.34375,60.55625 356.01125,58.70375 C353.67875,56.85125 350.5175,55.925 346.5275,55.925 C343.6475,55.925 341.06,56.59625 338.765,57.93875 C336.47,59.28125 334.6625,61.20875 333.3425,63.72125 C332.0225,66.23375 331.3625,69.26 331.3625,72.8 C331.3625,75.5 331.7525,77.89625 332.5325,79.98875 C333.3125,82.08125 334.39625,83.8475 335.78375,85.2875 C337.17125,86.7275 338.78375,87.81875 340.62125,88.56125 C342.45875,89.30375 344.4275,89.675 346.5275,89.675 Z" id="WARNING" fill="#000000" fill-rule="nonzero"></path>
+</svg>
-            <g id="warning-icon" transform="translate(65.000000, 36.000000)" fill="#000000">
-                <path d="M36,54.0009 C34.137,54.0009 32.625,52.4889 32.625,50.6259 C32.625,48.7584 34.137,47.2509 36,47.2509 C37.863,47.2509 39.375,48.7584 39.375,50.6259 C39.375,52.4889 37.863,54.0009 36,54.0009 L36,54.0009 Z M33.75,27.0009 C33.75,25.7544 34.7535,24.7509 36,24.7509 C37.242,24.7509 38.25,25.7544 38.25,27.0009 L38.25,40.5009 C38.25,41.7429 37.242,42.7509 36,42.7509 C34.7535,42.7509 33.75,41.7429 33.75,40.5009 L33.75,27.0009 Z M66.582,52.8669 L41.841,10.1169 C40.6215,8.0064 38.439,6.7509 36,6.7509 C33.561,6.7509 31.3785,8.0064 30.159,10.1169 L30.159,10.1169 L5.418,52.8669 C4.1895,54.9819 4.1895,57.5064 5.4135,59.6214 C6.6285,61.7364 8.811,62.9964 11.2545,62.9964 L60.7455,62.9964 C63.189,62.9964 65.3715,61.7364 66.5865,59.6214 C67.8105,57.5064 67.8105,54.9819 66.582,52.8669 L66.582,52.8669 Z" id="warning"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/components/App/App.css

@@ -1,3 +1,21 @@
+:root {
+  --red: #ff6e60;
+  --orange: #ff8e51;
+  --yellow: #ffd171;
+  --pale: #ffe8dc;
+  --peach: #ffd5c0;
+  --darkgreen: #245633;
+  --blue: #397fff;
+  --purple: #925bff;
+  --eggplant: #35313d;
+  --neutral: #86838b;
+  --translucent: rgba(163, 159, 171, 0.1);
+  --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);
+}
+
 body {
   margin: 0px;
   font-variant-ligatures: common-ligatures;
@@ -14,20 +32,25 @@ h2 {
   font-weight: 400;
 }
 
+img {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
 pre,
 code {
   font-family: "IBM Plex Mono", "Courier New", monospace;
-  font-size: 14px;
+  font-size: 12px;
-  color: "black";
 }
 
 pre {
   box-sizing: border-box;
-  padding: 20px 16px 20px 24px;
+  margin: 0;
-  margin: 12px 0px;
-  background-color: white;
   border-radius: 6px;
-  border: 1px solid #e1d4d7;
+  font-size: 12x;
+  white-space: pre-wrap;
 }
 
 input {
@@ -40,11 +63,11 @@ button {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  cursor: pointer;
 }
 
 button.main-button {
   height: 64px;
-  margin: 16px 24px 0 0;
   padding: 0 48px 0 40px;
   background-color: white;
   border-radius: 8px;
@@ -59,23 +82,28 @@ button.main-button {
   transform: translate(0, 0);
   transition: all 0.2s ease;
   cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
   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;
 }
 
-button.main-button:focus {
-  outline: none;
-}
-
 button.main-button svg {
   margin-right: 12px;
 }
 
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  /* gap: 24px; */
+}
+
 a.main-link {
   text-decoration: none;
   position: relative;
@@ -90,8 +118,37 @@ a.main-link:after {
   width: 100%;
   border-bottom: 1px solid black;
   transition: 0.2s;
+  pointer-events: none;
 }
 
 a.main-link:hover:after {
   width: 0%;
 }
+
+.badge.new {
+  color: var(--red);
+}
+
+.badge.updated {
+  color: var(--blue);
+}
+
+.badge {
+  font-size: 24px;
+  line-height: 0.5em;
+}
+
+.card {
+  border-radius: 8px;
+  border: 2px solid var(--translucent);
+}
+
+.primary {
+  color: var(--foreground);
+  background-color: var(--background);
+}
+
+.secondary {
+  color: var(--foreground-card);
+  background-color: var(--background-card);
+}

src/components/App/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/App/App.tsx

@@ -1,27 +1,54 @@
-import React, { Suspense } from "react";
+import { Fragment, Suspense, useMemo } from "react";
+import { useRecoilValue } from "recoil";
 
 import "./App.css";
-import Header from "../Header/Header";
+import Header from "@/components/Header";
-import Toolbar from "../Toolbar/Toolbar";
+import Toolbar from "@/components/Toolbar";
-import IconGrid from "../IconGrid/IconGrid";
+import IconGrid from "@/components/IconGrid";
-import Footer from "../Footer/Footer";
+import Footer from "@/components/Footer";
-import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
+import ErrorBoundary from "@/components/ErrorBoundary";
-import Warn from "../Warn/Warn";
+import Notice from "@/components/Notice";
+import {
+  useIconParameters,
+  usePersistSettings,
+  useCSSVariables,
+} from "@/hooks";
+import { isDarkThemeSelector } from "@/state";
+
+const errorFallback = <Notice message="Search error" />;
+const waitingFallback = <Notice type="none" message="" />;
 
 const App: React.FC<any> = () => {
+  useIconParameters();
+  usePersistSettings();
+  
+  const isDark = useRecoilValue(isDarkThemeSelector);
+
+  const properties = useMemo(
+    () => ({
+      "--foreground": isDark ? "white" : "black",
+      "--foreground-card": isDark ? "white" : "#35313D",
+      "--background": isDark ? "#35313D" : "white",
+      "--background-card": isDark ? "#413c48" : "#f6f5f6",
+    }),
+    [isDark]
+  );
+
+  useCSSVariables(properties);
+
   return (
-    <React.StrictMode>
+    <Fragment>
       <Header />
       <main>
         <Toolbar />
-        <ErrorBoundary fallback={<Warn message="Search error"/>}>
+        <ErrorBoundary fallback={errorFallback}>
-          <Suspense fallback={<div>Loading...</div>}>
+          <Suspense fallback={waitingFallback}>
             <IconGrid />
           </Suspense>
         </ErrorBoundary>
       </main>
       <Footer />
-    </React.StrictMode>
+    </Fragment>
   );
 };
 

src/components/App/index.ts

@@ -0,0 +1 @@
+export { default } from "./App";

src/components/Banner/Banner.css

@@ -0,0 +1,55 @@
+.banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+  display: flex;
+  padding: 12px;
+  color: white;
+  margin: auto;
+  background-color: var(--eggplant);
+  z-index: 1;
+}
+
+.banner .main-button {
+  height: unset;
+  min-height: 64px;
+  margin: 8px 0 0;
+}
+
+.banner a {
+  color: white;
+}
+
+.banner-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  flex: 1;
+  max-width: 1120px;
+  margin: auto;
+  font-family: "IBM Plex Mono";
+}
+
+.banner-button {
+  color: inherit;
+  background: var(--eggplant);
+  height: unset !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 48px !important;
+  cursor: pointer;
+}
+
+.banner-button:active {
+  opacity: 0.7;
+}
+
+.message {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  align-items: center;
+  gap: 20px;
+}

src/components/Banner/Banner.tsx

@@ -0,0 +1,81 @@
+import { ReactNode, Dispatch, SetStateAction } from "react";
+import { motion, AnimatePresence, Variants } from "framer-motion";
+import { XCircle } from "@phosphor-icons/react";
+import ReactGA from "react-ga4";
+
+import { useLocalStorage } from "@/hooks";
+
+import "./Banner.css";
+
+type BannerState = {
+  seen: Record<string, boolean>;
+};
+
+type BannerProps = {
+  id: string;
+  children?: ReactNode;
+  onClose?: (dispatch: Dispatch<SetStateAction<BannerState>>) => void;
+};
+
+const variants: Variants = {
+  initial: { y: -120 },
+  animate: { y: 0 },
+  exit: { y: -120 },
+};
+
+const BANNER_STATE_KEY = "banner_state";
+
+const Banner = ({ id, children, onClose }: BannerProps) => {
+  const [
+    {
+      seen: { [id]: seen },
+    },
+    setBannerState,
+  ] = useLocalStorage<BannerState>(BANNER_STATE_KEY, {
+    seen: { [id]: false },
+  });
+
+  const handleClose = () => {
+    ReactGA.event({
+      category: "Banner",
+      action: "Dismiss",
+      label: id,
+    });
+    onClose
+      ? onClose(setBannerState)
+      : setBannerState((state) => ({
+          ...state,
+          seen: { ...state.seen, [id]: true },
+        }));
+  };
+
+  return (
+    <AnimatePresence initial={true}>
+      {!seen && (
+        <motion.aside
+          className="card banner"
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={variants}
+        >
+          <div className="banner-content">
+            {children}
+            <button
+              tabIndex={0}
+              className="banner-button"
+              onClick={handleClose}
+              onKeyDown={(e) => {
+                e.key === "Enter" && handleClose();
+              }}
+            >
+              <XCircle color="currentColor" size={28} weight="regular" />
+            </button>
+          </div>
+        </motion.aside>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Banner;

src/components/Banner/index.ts

@@ -0,0 +1 @@
+export { default } from "./Banner";

src/components/ColorInput/ColorInput.css

@@ -16,8 +16,11 @@
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
+  -moz-user-select: none;
+  -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
+  text-transform: uppercase;
 }
 
 input.color-input {

src/components/ColorInput/ColorInput.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
-import { iconColorAtom } from "../../state/atoms";
+import { useThrottled } from "@/hooks";
-import { isDarkThemeSelector } from "../../state/selectors";
+import { iconColorAtom, isDarkThemeSelector } from "@/state";
-import useThrottled from "../../hooks/useThrottled";
+
 import "./ColorInput.css";
 
 type ColorInputProps = {};
 
-const ColorInput: React.FC<ColorInputProps> = () => {
+const ColorInput = (_: ColorInputProps) => {
   const [color, setColor] = useRecoilState(iconColorAtom);
   const isDark = useRecoilValue(isDarkThemeSelector);
 

src/components/ColorInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./ColorInput";

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,17 +1,21 @@
-import React, { ErrorInfo } from "react";
+import { Component, ErrorInfo, ReactNode } from "react";
 
 interface ErrorBoundaryProps {
-  fallback?: JSX.Element | React.ReactNode;
+  fallback?: JSX.Element | ReactNode;
+  children?: JSX.Element | ReactNode;
 }
 
 interface ErrorBoundaryState {
-  errorMessage?: string
+  errorMessage?: string;
 }
 
-export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export default class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
   constructor(props: any) {
     super(props);
-    this.state = { errorMessage: "" }
+    this.state = { errorMessage: "" };
   }
 
   static getDerivedStateFromError(error: any) {
@@ -23,7 +27,7 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
     console.info(info);
   }
 
-  render(): JSX.Element | React.ReactNode {
+  render(): JSX.Element | ReactNode {
     if (this.state.errorMessage) {
       return this.props.fallback ?? <p>{this.state.errorMessage}</p>;
     }

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from "./ErrorBoundary";

src/components/Footer/Footer.css

@@ -1,14 +1,5 @@
 footer {
-  width: 100%;
+  background-color: var(--purple);
-  position: relative;
-  background-color: #925bff;
-  overflow: hidden;
-}
-
-.container {
-  width: 100%;
-  max-width: 1280px;
-  margin: auto;
 }
 
 #back-to-top-button {
@@ -16,187 +7,144 @@ footer {
   height: 140px;
   margin: 0;
   border-radius: 50%;
+  z-index: 2;
+  font-size: 56px;
 }
 
-@media screen and (max-width: 759px) {
+#back-to-top-button:active {
-  .outro h2 {
+  transform: translate(4px, 4px) !important;
+  box-shadow: 0 0 0 0 black;
+}
+
+#back-to-top-button svg {
+  margin-right: unset;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 1240px;
+  margin: auto;
+}
+
+.outro {
+  position: relative;
+  max-width: 666px;
+  margin: 0 8% 0;
+  padding-top: 72px;
+}
+
+.outro p {
+  font-size: 28px;
+  line-height: 40px;
+  margin: 0 0 32px;
+}
+
+footer .links {
+  margin: 56px 0 48px;
+}
+
+.fine-print {
+  position: relative;
+  margin: 72px 0 0;
+  padding-bottom: 32px;
+  overflow: hidden;
+}
+
+.fine-print p {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.illustrations-footer {
+  display: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+@media screen and (max-width: 719px) {
+  #back-to-top-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    padding: 0;
     font-size: 28px;
-    line-height: 38px;
-    margin-bottom: 32px;
   }
 
-  .fine-print {
+  footer .links {
-    margin: 80px 0 0;
+    margin: 0 0 64px;
-    font-size: 16px;
+  }
-    line-height: 24px;
+
+  #command {
+    display: none;
   }
 
   #marker-green {
-    position: absolute;
+    display: none;
-    top: 0;
-    left: 0;
-    transform: translate(324px, 510px);
   }
-  
+
-  #phone {
+  .illustrations-footer {
-    position: absolute;
+    max-width: 100%;
-    top: 0;
+    height: 440px;
-    left: 0;
+    display: flex;
-    transform: translate(-140px, 470px);
+    justify-content: center;
-    touch-action: none;
+    overflow: hidden;
   }
 }
 
-@media screen and (min-width: 760px) and (max-width: 1023px) {
+@media screen and (min-width: 720px) {
-  .outro h2 {
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 32px;
-  }
-
-  .fine-print {
-    margin: 80px 0 0;
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  #marker-green {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(544px, 500px);
-  }
-  
-  #phone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(80px, 480px);
-  }
-}
-
-@media screen and (max-width: 1023px) {
   .outro {
-    position: relative;
+    margin: 0 auto;
-    margin: 292px 10% 292px;
   }
 
-  #back-to-top {
+  .fine-print {
+    margin-top: 96px;
+    padding-bottom: 96px;
+  }
+
+  #back-to-top-button {
     position: absolute;
-    top: 0;
+    left: 70px;
-    left: 0;
+    top: -56px;
-    transform: translate(-48px, -196px);
+  }
+
+  #marker-green {
+    position: absolute;
+    left: 678px;
+    top: -218px;
   }
 
   #command {
     position: absolute;
-    top: 0;
+    right: -18px;
-    left: 0;
+    top: 144px;
-    transform: translate(640px, -228px);
   }
 }
 
-
+@media screen and (min-width: 1239px) {
-
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  footer {
-    height: 920px;
-  }
-
   .outro {
-    position: relative;
+    margin-left: 462px;
-    width: 666px;
-    margin: 160px auto 324px;
   }
 
-  .outro h2 {
+  #back-to-top-button {
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 32px;
-  }
-
-  .fine-print {
-    margin: 96px 0 0;
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  #back-to-top {
     position: absolute;
-    top: 0;
+    left: 190px;
-    left: 0;
+    top: 276px;
-    transform: translate(-212px, 0);
   }
 
-  #marker-green {
+  .illustrations-footer {
+    display: initial;
     position: absolute;
-    top: 0;
+    left: -240px;
-    left: 0;
+    top: 632px;
-    transform: translate(384px, 512px);
+    height: 584px;
-  }
+    overflow: hidden;
-  
-  #phone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-80px, 476px);
-  }
-
-  #command {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(706px, 360px);
-  }
-}
-
-@media screen and (min-width: 1280px) {
-  .outro {
-    width: 660px;
-    position: relative;
-    margin: 160px 0 120px 468px;
-  }
-  
-  .outro h2 {
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 32px;
-  }
-  
-  .fine-print {
-    margin: 96px 0 0;
-    font-size: 20px;
-    line-height: 30px;
-  }
-  
-  #back-to-top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-320px, -12px);
-  }
-  
-  #marker-green {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /* x and y-translate is wrong in spec? */
-    transform: translate(-208px, 270px);
-  }
-  
-  #phone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /* y-translate is wrong in spec? */
-    transform: translate(-684px, 236px);
-  }
-  
-  #command {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /* y-translate is wrong in spec? */
-    transform: translate(744px, 352px);
   }
 }

src/components/Footer/Footer.tsx

@@ -1,129 +1,132 @@
-import React, { useState } from "react";
+import { useRecoilValue } from "recoil";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence, Variants } from "framer-motion";
-import { Heart } from "phosphor-react";
+import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react";
 
-import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
+import Links from "@/components/Links/Links";
-import markerGreen from "../../assets/marker-green.svg";
+
-import phone from "../../assets/phone.svg";
+import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
-import phoneSpec from "../../assets/phone-spec.svg";
+import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
-import commandKey from "../../assets/command-key.svg";
+import { useMediaQuery } from "@/hooks";
-import commandKeySpec from "../../assets/command-key-spec.svg";
+import { selectionEntryAtom } from "@/state";
 import "./Footer.css";
 
 type FooterProps = {};
 
-const variants = {
+const variants: Variants = {
-  hidden: { opacity: 0, transition: { duration: 0.2 } },
+  initial: { y: 188 },
-  visible: { opacity: 1, transition: { duration: 0.2 } },
+  animate: { y: 0 },
+  exit: { y: 188 },
 };
 
-const Footer: React.FC<FooterProps> = () => {
+const Footer = (_: FooterProps) => {
-  const [phoneHovered, setPhoneHovered] = useState<boolean>(false);
+  const isMobile = useMediaQuery("(max-width: 719px)");
+  const isViewing = !!useRecoilValue(selectionEntryAtom);
 
   return (
     <footer>
       <div className="container">
-        <div className="outro">
+        <AnimatePresence initial={false}>
-          <h2>
+          {(!isMobile || !isViewing) && (
-            Phosphor is free and open source software. If you enjoy these icons,
+            <motion.button
-            please support us with a donation.
-          </h2>
-          <button
-            className="main-button"
-            onClick={() =>
-              window.open(
-                "https://paypal.me/TobiasFried",
-                "_blank",
-                "noopener noreferrer"
-              )
-            }
-          >
-            <Heart size={24} weight="fill" />
-            Buy us a coffee
-          </button>
-          <p className="fine-print">
-            Copyright © 2020 Phosphor Icons
-            <br />
-            Designed by{" "}
-            <a className="main-link" href="https://helenazhang.com">
-              Helena Zhang
-            </a>{" "}
-            + built by{" "}
-            <a className="main-link" href="https://tobiasfried.com">
-              Tobias Fried
-            </a>{" "}
-            <span
-              role="img"
-              aria-label="Emoji of woman technologist, man technologist, and cat"
-            >
-              👩🏻‍💻👨‍💻🐈
-            </span>
-            <br />
-            This website is set in{" "}
-            <a className="main-link" href="https://manropefont.com/">
-              Manrope
-            </a>
-            <br />
-            See also:{" "}
-            <a
-              className="main-link"
-              href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-            >
-              Phosphor for Android
-            </a>
-          </p>
-          <div id="back-to-top">
-            <button
               id="back-to-top-button"
               aria-label="back-to-top button"
               className="main-button"
+              variants={variants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              transition={{ duration: 0.1 }}
               onClick={() => {
                 document
                   .getElementById("root")
                   ?.scrollIntoView({ behavior: "smooth", block: "start" });
               }}
             >
-              <img src={uArrowUpLeft} alt="" />
+              <ArrowULeftUp size="1em" />
+            </motion.button>
+          )}
+        </AnimatePresence>
+        <div className="outro">
+          <Links />
+          <p>
+            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.
+          </p>
+          <p>
+            We're thankful for the tools we've benefited from and this is our
+            contribution towards a collaborative community.
+          </p>
+          <p>
+            Phosphor is free and open-source, licensed under{" "}
+            <a
+              className="main-link"
+              href="https://raw.githubusercontent.com/phosphor-icons/phosphor-home/master/LICENSE"
+            >
+              MIT
+            </a>
+            . If you enjoy these icons, please support us with a donation.
+          </p>
+          <div className="button-container">
+            <button
+              className="main-button"
+              onClick={() =>
+                window.open(
+                  "https://paypal.me/minoraxis",
+                  "_blank",
+                  "noopener noreferrer"
+                )
+              }
+            >
+              <Coffee size={24} weight="fill" />
+              Buy us a coffee
+            </button>
+            <button
+              className="main-button"
+              onClick={() =>
+                window.open(
+                  "https://patreon.com/phosphoricons",
+                  "_blank",
+                  "noopener noreferrer"
+                )
+              }
+            >
+              <Heart size={24} weight="fill" />
+              Become a patron
             </button>
           </div>
-          {phoneHovered && (
+          <div className="fine-print">
-            <motion.img
+            <p>
-              id="phone"
+              Phosphor Icons is designed by{" "}
-              className="inspectable"
+              <a className="main-link" href="https://helenazhang.com">
-              variants={variants}
+                Helena Zhang
-              initial="hidden"
+              </a>{" "}
-              animate={phoneHovered ? "visible" : "hidden"}
+              and built by{" "}
-              src={phoneSpec}
+              <a className="main-link" href="https://tobiasfried.com">
-              alt=""
+                Toby Fried
-            />
+              </a>{" "}
-          )}
+              <span
-          <motion.img
+                role="img"
-            id="phone"
+                aria-label="Emoji of woman technologist, man technologist, and cat"
-            className="inspectable"
+              >
-            variants={variants}
+                🙇🏻‍♀️👨‍💻🐈
-            initial="visible"
+              </span>
-            whileHover="hidden"
+              . Contact us at{" "}
-            onHoverStart={() => setPhoneHovered(true)}
+              <a className="main-link" href="mailto:hello@phosphoricons.com">
-            onHoverEnd={() => setPhoneHovered(false)}
+                hello@phosphoricons.com
-            src={phone}
+              </a>
-            alt=""
+              . Type set in{" "}
-          />
+              <a className="main-link" href="https://manropefont.com/">
-          <img
+                Manrope
-            id="command"
+              </a>{" "}
-            className="inspectable"
+              by Mikhail Sharanda.
-            src={commandKeySpec}
+            </p>
-            alt=""
+            <MarkerGreen id="marker-green" />
-          />
+          </div>
-          <motion.img
+        </div>
-            id="command"
+        <div className="illustrations-footer">
-            className="inspectable"
+          <PostIt id="post-it" width="878" height="667" />
-            variants={variants}
-            initial="visible"
-            whileHover="hidden"
-            src={commandKey}
-            alt=""
-          />
-          <img id="marker-green" src={markerGreen} alt="" />
         </div>
       </div>
     </footer>

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Footer";

src/components/Header/Header.css

@@ -1,187 +1,199 @@
 header {
-  width: 100%;
-  height: 1434px;
-  background-color: #ffd171;
   overflow: hidden;
-}
-
-header img {
-  user-select: none;
-}
-
-.links {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  /* gap: 56px; */
-  /* column-gap: 56px; */
-  margin: 48px 0 32px;
-}
-
-a.nav-link:not(:last-child) {
-  margin-right: 56px;
-}
-
-a.nav-link {
-  text-decoration: none;
   position: relative;
-  color: black;
+  background-color: var(--yellow);
-  margin-bottom: 16px;
 }
 
-a.nav-link:after {
+.header-contents {
-  content: "";
+  position: relative;
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 0%;
-  border-bottom: 1px solid black;
-  transition: 0.2s;
-}
-
-a.nav-link:hover:after {
   width: 100%;
+  height: 100%;
+  max-width: 1366px;
+  min-width: 360px;
+  margin: auto;
+}
+
+.illustrations-top {
+  position: relative;
+}
+
+.illustrations-bottom {
+  position: relative;
+}
+
+.intro {
+  margin: 0 8%;
+  max-width: 666px;
+}
+
+.intro h2 {
+  font-size: 40px;
+  line-height: 52px;
+  margin: 0 0 32px;
 }
 
 .inspectable {
   cursor: cell;
 }
 
-.image-container {
+.xray {
-  position: relative;
+  opacity: 1;
-  width: 100%;
+  transition: opacity 200ms ease;
-  height: 100%;
-  margin: auto;
 }
 
-.button-container {
+.xray:hover {
-  display: flex;
+  opacity: 0;
-  flex-wrap: wrap;
 }
 
-#cutting-mat {
+#paperclips-three {
-  position: absolute;
+  display: none;
-  /* transform: translate(120px, 824px); */
 }
 
-#receipt {
+@media screen and (max-width: 1239px) {
-  position: absolute;
+  .illustrations-top {
-  transform: translate(-138px, 190px);
+    height: 382px;
-}
-
-#calculator {
-  position: absolute;
-  transform: translate(800px, 112px);
-}
-
-/* Illustrations remain at same layout up to 1024px */
-@media screen and (max-width: 1023px) {
-  .intro {
-    margin: 0 10%;
-    position: absolute;
-    transform: translate(0, 382px);
-  }
-
-  .intro h2 {
-    font-size: 40px;
-    line-height: 52px;
-    margin-bottom: 32px;
   }
 
   #marker-purple {
     position: absolute;
-    top: 0;
+    left: 28px;
-    left: 0;
+    top: -158px;
-    transform: translate(40px, -158px);
   }
 
-  #billiard-ball {
+  .billiard-ball {
     position: absolute;
-    top: 0;
+    left: 132px;
-    left: 0;
+    top: -98px;
-    transform: translate(130px, -98px);
   }
 
   #paperclips {
     position: absolute;
-    transform: translate(176px, 152px);
+    left: 110px;
+    top: 152px;
   }
 
-  #warning {
+  .warning {
     position: absolute;
-    top: 0;
+    left: 394px;
-    left: 0;
+    top: -304px;
-    transform: translate(398px, -116px);
   }
 
-  #tablet {
+  .tablet {
     position: absolute;
-    transform: translate(672px, -900px);
+    left: 672px;
-  }
+    top: -900px;
-
-  #calculator {
-    position: absolute;
-    transform: translate(534px, 240px);
   }
 }
 
-@media screen and (min-width: 760px) and (max-width: 1023px) {
+@media screen and (min-width: 720px) and (max-width: 1239px) {
-  .intro h2 {
-    font-size: 40px;
-    line-height: 52px;
-    margin-bottom: 32px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .image-container {
-    width: 1366px;
-  }
-
   .intro {
-    margin: 0;
+    margin: 0 auto;
-    width: 660px;
-    position: absolute;
-    transform: translate(144px, 386px);
   }
 
-  .intro h2 {
+  .illustrations-bottom {
-    font-size: 40px;
+    height: 612px;
-    line-height: 50px;
+  }
-    margin-bottom: 32px;
+
+  .cutting-mat {
+    position: absolute;
+    left: 96px;
+  }
+
+  .receipt {
+    position: absolute;
+    left: -36px;
+    top: 190px;
+  }
+
+  .calculator {
+    position: absolute;
+    left: 632px;
+    top: 170px;
+  }
+}
+
+@media screen and (min-width: 1240px) {
+  .intro {
+    margin: 0 auto 0 140px;
+  }
+
+  .illustrations-top {
+    height: 386px;
+  }
+
+  .illustrations-bottom {
+    height: 606px;
   }
 
   #marker-purple {
     position: absolute;
-    transform: translate(144px, -158px);
+    left: 144px;
+    top: -158px;
   }
 
-  #tablet {
+  .billiard-ball {
     position: absolute;
-    transform: translate(578px, -900px);
+    left: 900px;
-  }
+    top: 400px;
-
-  #billiard-ball {
-    position: absolute;
-    transform: translate(918px, 360px);
-  }
-
-  #warning {
-    position: absolute;
-    transform: translate(1184px, 424px);
   }
 
   #paperclips {
+    display: none;
+  }
+
+  #paperclips-three {
+    display: initial;
     position: absolute;
-    transform: translate(982px, 621px);
+    left: 724px;
+    top: 694px;
+  }
+
+  .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;
   }
 }
 
-@media screen and (max-width: 759px) {
+@media screen and (max-width: 719px) {
   .intro h2 {
     font-size: 28px;
-    line-height: 38px;
+    line-height: 40px;
-    margin-bottom: 32px;
+  }
+
+  .illustrations-top {
+    height: 352px;
+  }
+
+  .illustrations-bottom {
+    display: none;
+  }
+
+  .links {
+    display: block;
+    max-height: initial;
   }
 }

src/components/Header/Header.tsx

@@ -1,33 +1,35 @@
-import React from "react";
+import {
-import { motion } from "framer-motion";
+  ArrowCircleUpRight,
-import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
+  ArrowCircleDown,
+  Broadcast,
+} from "@phosphor-icons/react";
 
+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 Links from "@/components/Links";
 import "./Header.css";
-import markerPurple from "../../assets/marker-purple.svg";
-import paperclips from "../../assets/paperclips.svg";
-import tablet from "../../assets/tablet.svg";
-import tabletSpec from "../../assets/tablet-spec.svg";
-import billiardBall from "../../assets/billiard-ball.svg";
-import billiardBallSpec from "../../assets/billiard-ball-spec.svg";
-import warning from "../../assets/warning.svg";
-import warningSpec from "../../assets/warning-spec.svg";
-import cuttingMat from "../../assets/cutting-mat.svg";
-import cuttingMatSpec from "../../assets/cutting-mat-spec.svg";
-import receipt from "../../assets/receipt.svg";
-import receiptSpec from "../../assets/receipt-spec.svg";
-import calculator from "../../assets/calculator.svg";
-import calculatorSpec from "../../assets/calculator-spec.svg";
 
 type HeaderProps = {};
 
-const illustrationVariants = {
-  hidden: { opacity: 0, transition: { duration: 0.2 } },
-  visible: { opacity: 1, transition: { duration: 0.2 } },
-};
-
 const handleGetStarted = () =>
   window.open(
-    "https://github.com/phosphor-icons/phosphor-web#phosphor-icons",
+    "https://github.com/phosphor-icons/homepage#phosphor-icons",
     "_blank",
     "noopener noreferrer"
   );
@@ -37,129 +39,62 @@ const handleScrollToIcons = () =>
     .getElementById("toolbar")
     ?.scrollIntoView({ behavior: "smooth", block: "start" });
 
-const Header: React.FC<HeaderProps> = () => {
+const Header = (_: HeaderProps) => {
   return (
     <header>
-      <div className="image-container">
+      <Banner id="2.0">
-        <img src={markerPurple} id="marker-purple" alt="" />
+        <div className="message">
-        <img src={paperclips} id="paperclips" alt="" />
+          <Broadcast size={32} weight="fill" />
+          <small>
+            Phosphor 2.0 is out, with some big updates and some small API
+            changes. Check our{" "}
+            <a href="https://github.com/phosphor-icons/homepage#readme">
+              documentation
+            </a>{" "}
+            to see what's new!
+          </small>
+        </div>
+      </Banner>
+      <div className="header-contents">
+        <div className="illustrations-top">
+          <MarkerPurple id="marker-purple" />
+          <PaperClips id="paperclips" />
+          <PaperClipsThree id="paperclips-three" />
+          <TabletSpec className="tablet" />
+          <Tablet className="tablet inspectable xray" />
+          <BilliardBallSpec className="billiard-ball" />
+          <BilliardBall className="billiard-ball inspectable xray" />
+
+          <WarningSpec className="warning" />
+          <Warning className="warning inspectable xray" />
+        </div>
         <div className="intro">
           <h2>
-            Phosphor Icons is a flexible icon family for interfaces, diagrams,
+            Phosphor is a flexible icon family for interfaces, diagrams,
-            presentations — whatever really.
+            presentations — 
+            <wbr />
+            whatever, really.
           </h2>
           <div className="button-container">
             <button className="main-button" onClick={handleGetStarted}>
               <ArrowCircleUpRight size={24} weight="fill" />
-              Go to docs
+              Get started
             </button>
-
             <button className="main-button" onClick={handleScrollToIcons}>
               <ArrowCircleDown size={24} weight="fill" />
               Explore icons
             </button>
           </div>
-          <div className="links">
+          <Links />
-            <a
+        </div>
-              className="nav-link"
+        <div className="illustrations-bottom">
-              href="https://phosphoricons.com/assets/phosphor-icons.zip"
+          <CuttingMatSpec className="cutting-mat" />
-              download
+          <CuttingMat className="cutting-mat inspectable xray" />
-            >
+          <ReceiptSpec className="receipt" />
-              Download all
+          <Receipt className="receipt inspectable xray" />
-            </a>
+          <CalculatorSpec className="calculator" />
-            <a
+          <Calculator className="calculator inspectable xray" />
-              className="nav-link"
-              href="https://github.com/phosphor-icons/phosphor-web/issues"
-            >
-              Request
-            </a>
-            <a className="nav-link" href="https://paypal.me/TobiasFried">
-              Donate
-            </a>
-            <a
-              className="nav-link"
-              href="https://github.com/phosphor-icons/phosphor-web"
-            >
-              Github
-            </a>
-          </div>
-          <img
-            id="cutting-mat"
-            className="inspectable"
-            src={cuttingMatSpec}
-            alt=""
-          />
-          <motion.img
-            id="cutting-mat"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
-            src={cuttingMat}
-            alt=""
-          />
-          <img id="receipt" className="inspectable" src={receiptSpec} alt="" />
-          <motion.img
-            id="receipt"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
-            src={receipt}
-            alt=""
-          />
-          <img
-            id="calculator"
-            className="inspectable"
-            src={calculatorSpec}
-            alt=""
-          />
-          <motion.img
-            id="calculator"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
-            src={calculator}
-            alt=""
-          />
         </div>
-        <img id="tablet" className="inspectable" src={tabletSpec} alt="" />
-        <motion.img
-          id="tablet"
-          className="inspectable"
-          variants={illustrationVariants}
-          initial="visible"
-          whileHover="hidden"
-          src={tablet}
-          alt=""
-        />
-        <img
-          id="billiard-ball"
-          className="inspectable"
-          src={billiardBallSpec}
-          alt=""
-        />
-        <motion.img
-          id="billiard-ball"
-          className="inspectable"
-          variants={illustrationVariants}
-          initial="visible"
-          whileHover="hidden"
-          src={billiardBall}
-          alt=""
-        />
-
-        <img id="warning" className="inspectable" src={warningSpec} alt="" />
-        <motion.img
-          id="warning"
-          className="inspectable"
-          variants={illustrationVariants}
-          initial="visible"
-          whileHover="hidden"
-          src={warning}
-          alt=""
-        />
       </div>
     </header>
   );

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from "./Header";

src/components/IconGrid/DetailFooter.tsx

@@ -0,0 +1,304 @@
+import React, { useRef, useEffect, CSSProperties, useMemo } from "react";
+import { useRecoilValue, useRecoilState } from "recoil";
+import { useHotkeys } from "react-hotkeys-hook";
+import { motion, AnimatePresence, Variants } from "framer-motion";
+import { Svg2Png } from "svg2png-converter";
+import { saveAs } from "file-saver";
+import {
+  Copy,
+  CheckCircle,
+  DownloadSimple,
+  XCircle,
+} from "@phosphor-icons/react";
+import ReactGA from "react-ga4";
+
+import Tabs, { Tab } from "@/components/Tabs";
+import { useMediaQuery, useTransientState, useSessionStorage } from "@/hooks";
+import { SnippetType } from "@/lib";
+import {
+  iconWeightAtom,
+  iconSizeAtom,
+  iconColorAtom,
+  selectionEntryAtom,
+  isDarkThemeSelector,
+} from "@/state";
+import { getCodeSnippets, supportsWeight } from "@/utils";
+
+import TagCloud from "./TagCloud";
+
+const variants: Record<string, Variants> = {
+  desktop: {
+    initial: { y: 188 },
+    animate: { y: 0 },
+    exit: { y: 188 },
+  },
+  mobile: {
+    initial: { y: "60vh" },
+    animate: { y: 0 },
+    exit: { y: "60vh" },
+  },
+};
+
+const RENDERED_SNIPPETS = [
+  SnippetType.REACT,
+  SnippetType.VUE,
+  SnippetType.HTML,
+  SnippetType.FLUTTER,
+  SnippetType.ELM,
+];
+
+const buttonColor = "#35313D";
+const successColor = "#1FA647";
+const disabledColor = "#B7B7B7";
+
+function cloneWithSize(svg: SVGSVGElement, size: number): SVGSVGElement {
+  const sized = svg.cloneNode(true) as SVGSVGElement;
+  sized.setAttribute("width", `${size}`);
+  sized.setAttribute("height", `${size}`);
+  return sized;
+}
+
+const DetailFooter = () => {
+  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<SnippetType | "SVG" | false>(
+    false,
+    2000
+  );
+  const ref = useRef<SVGSVGElement>(null);
+
+  const [{ i }, setInitialTab] = useSessionStorage("tab", { i: 0 });
+
+  const isMobile = useMediaQuery("(max-width: 719px)");
+
+  const [snippets, tabs] = useMemo<
+    [Partial<Record<SnippetType, string>>, Tab[]]
+  >(() => {
+    if (!entry) return [{}, []];
+
+    const snippets = getCodeSnippets({
+      displayName: entry?.pascal_name!,
+      name: entry.name,
+      weight,
+      size,
+      color,
+    });
+
+    const snippetButtonStyle: CSSProperties =
+      weight === "duotone"
+        ? { color: disabledColor, userSelect: "none" }
+        : { color: "currentcolor" };
+
+    const tabs = [
+      {
+        header: "Tags",
+        content: (
+          <TagCloud
+            name={entry.name}
+            tags={Array.from(
+              new Set<string>([
+                ...entry.categories,
+                ...entry.name.split("-"),
+                ...entry.tags,
+              ])
+            )}
+          />
+        ),
+      },
+    ].concat(
+      RENDERED_SNIPPETS.map((type) => {
+        const isWeightSupported = supportsWeight({ type, weight });
+
+        return {
+          header: type,
+          content: (
+            <div className="snippet" key={type}>
+              <pre style={isWeightSupported ? undefined : snippetButtonStyle}>
+                <span>
+                  {isWeightSupported
+                    ? snippets[type]
+                    : "This weight is not yet supported"}
+                </span>
+                <button
+                  title="Copy snippet"
+                  onClick={(e) => handleCopySnippet(e, type)}
+                  disabled={!isWeightSupported}
+                  style={
+                    isWeightSupported
+                      ? { color: "currentColor" }
+                      : snippetButtonStyle
+                  }
+                >
+                  {copied === type ? (
+                    <CheckCircle size={24} color={successColor} weight="fill" />
+                  ) : (
+                    <Copy
+                      size={24}
+                      color={
+                        isWeightSupported
+                          ? "currentColor"
+                          : snippetButtonStyle.color
+                      }
+                      weight="fill"
+                    />
+                  )}
+                </button>
+              </pre>
+            </div>
+          ),
+        };
+      })
+    );
+
+    return [snippets, tabs];
+  }, [entry, weight, size, copied, isDark]);
+
+  useHotkeys("esc", () => setSelectionEntry(null));
+
+  useEffect(() => {
+    if (!entry) return;
+    ReactGA.event({
+      category: "Grid",
+      action: "Details",
+      label: entry.name,
+    });
+  }, [entry]);
+
+  const buttonBarStyle: CSSProperties = {
+    color: isDark ? "white" : buttonColor,
+    backgroundColor: "transparent",
+  };
+
+  const handleCopySnippet = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    type: SnippetType
+  ) => {
+    event.currentTarget.blur();
+    if (!entry) return;
+
+    setCopied(type);
+    const data = snippets[type];
+    data && void navigator.clipboard?.writeText(data);
+  };
+
+  const handleCopySVG = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.currentTarget.blur();
+    if (!entry) return;
+    if (!ref.current) return;
+
+    navigator.clipboard?.writeText(cloneWithSize(ref.current, size).outerHTML);
+    setCopied("SVG");
+  };
+
+  const handleDownloadSVG = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.currentTarget.blur();
+    if (!entry) return;
+    if (!ref.current) return;
+
+    const blob = new Blob([cloneWithSize(ref.current, size).outerHTML]);
+    saveAs(
+      blob,
+      `${entry?.name}${weight === "regular" ? "" : `-${weight}`}.svg`
+    );
+  };
+
+  const handleDownloadPNG = async (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.currentTarget.blur();
+    if (!entry) return;
+    if (!ref.current) return;
+
+    Svg2Png.save(
+      cloneWithSize(ref.current, size),
+      `${entry?.name}${weight === "regular" ? "" : `-${weight}`}.png`
+    );
+  };
+
+  return (
+    <AnimatePresence initial={true}>
+      {!!entry && (
+        <motion.aside
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={isMobile ? variants.mobile : variants.desktop}
+          className="secondary detail-footer card"
+          transition={isMobile ? { duration: 0.25 } : { duration: 0.1 }}
+        >
+          <div className="detail-preview">
+            <figure>
+              <entry.Icon ref={ref} size={64}></entry.Icon>
+              <figcaption>
+                <p>{entry.name}</p>
+                <small className="versioning">
+                  available in v{entry.published_in.toFixed(1)}.0+
+                </small>
+              </figcaption>
+            </figure>
+            <div className="detail-actions">
+              <button
+                className="action-button"
+                tabIndex={0}
+                style={buttonBarStyle}
+                onClick={handleDownloadPNG}
+              >
+                <DownloadSimple size={20} color="currentColor" weight="fill" />{" "}
+                PNG
+              </button>
+              <button
+                className="action-button"
+                tabIndex={0}
+                style={buttonBarStyle}
+                onClick={handleDownloadSVG}
+              >
+                <DownloadSimple size={20} color="currentColor" weight="fill" />{" "}
+                SVG
+              </button>
+              <button
+                className="action-button"
+                tabIndex={0}
+                style={buttonBarStyle}
+                onClick={handleCopySVG}
+              >
+                {copied === "SVG" ? (
+                  <CheckCircle size={20} color={successColor} weight="fill" />
+                ) : (
+                  <Copy size={20} color="currentColor" weight="fill" />
+                )}
+                {copied === "SVG" ? "Copied!" : " SVG"}
+              </button>
+            </div>
+          </div>
+
+          <Tabs
+            tabs={tabs}
+            initialIndex={i}
+            onTabChange={(i) => setInitialTab({ i })}
+          />
+
+          <button
+            tabIndex={0}
+            className="close-button"
+            onClick={() => setSelectionEntry(null)}
+            onKeyDown={(e) => {
+              e.key === "Enter" && setSelectionEntry(null);
+            }}
+          >
+            <XCircle color="currentColor" size={28} weight="fill" />
+          </button>
+        </motion.aside>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default DetailFooter;

src/components/IconGrid/IconGrid.css

@@ -1,6 +1,11 @@
 .grid-container {
-  padding: 0px 16px 4px;
+  position: relative;
-  min-height: 80vh;
+  padding: 32px 16px;
+  /* min-height: 80vh; */
+  z-index: 1;
+  content-visibility: auto;
+  color: var(--foreground);
+  background-color: var(--background);
 }
 
 .grid {
@@ -21,83 +26,63 @@
   justify-content: center;
   margin: 4px;
   border-radius: 16px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
 }
 
 .grid-item:hover {
-  background-color: rgba(163, 159, 171, 0.1);
+  background-color: var(--translucent);
-  transition: background-color 0.2s;
 }
 
 .grid-item:focus {
   outline: none;
-  border: 2px solid rgba(163, 159, 171, 0.1);
+  border: 2px solid var(--translucent);
 }
 
 .grid-item p {
   font-size: 12px;
   line-height: 16px;
-  color: #86838b;
+  color: var(--neutral);
   margin-top: 12px;
   text-align: center;
 }
 
-.info-box {
+@media screen and (max-width: 536px) {
-  position: relative;
+  .grid-container {
-  display: flex;
+    padding: 32px 8px;
-  width: 100%;
-  height: 0px;
-  margin: 0px;
-  border-radius: 16px;
-  background-color: rgba(163, 159, 171, 0.1);
-  overflow-y: hidden;
-  overflow-x: auto;
-}
-
-@media screen and (max-width: 1023px) {
-  .icon-preview {
-    display: none !important;
   }
 
-  .icon-usage {
+  .grid-item {
-    padding-left: 10% !important;
+    width: 108px;
+    height: unset;
+    padding: 4px 0;
+    justify-content: flex-start;
+    border: 2px solid transparent;
+  }
+
+  .grid-item p {
+    padding: 0 4px;
   }
 }
 
-.icon-preview {
+.versioning {
-  height: 396px;
+  margin-top: 2px;
-  width: 30%;
+  opacity: 0.6;
-  display: flex;
-  text-align: center;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-preview p {
-  margin: 12px 0 0;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.icon-usage {
-  flex: 1;
-  padding: 56px 10% 56px 0;
 }
 
 .snippet {
-  margin-bottom: 24px;
+  width: 100%;
 }
 
 .snippet pre {
-  /* white-space: nowrap; */
+  display: flex;
-  /* overflow: hidden; */
+  align-items: flex-start;
   text-overflow: ellipsis;
-  color: black;
-  user-select: all;
   -moz-user-select: all;
   -webkit-user-select: all;
+  user-select: all;
 }
 
 .snippet pre:focus {
@@ -106,18 +91,21 @@
 
 @keyframes select {
   to {
-    user-select: text;
     -moz-user-select: text;
     -webkit-user-select: text;
+    user-select: text;
   }
 }
 
+.snippet span {
+  flex: 1;
+}
+
 .snippet button {
   background-color: transparent;
   margin: 0;
   padding: 0;
   height: 24px;
-  float: right;
   cursor: pointer;
 }
 
@@ -127,6 +115,7 @@
 
 .button-row {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .button-row button {
@@ -145,21 +134,52 @@
 
 .close-icon {
   position: absolute;
-  top: 24px;
+  top: 12px;
-  right: 24px;
+  right: 12px;
   text-align: end;
   cursor: pointer;
 }
 
+.close-button {
+  color: inherit;
+  background: transparent;
+  height: unset !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 48px !important;
+  position: absolute;
+  top: -14px;
+  right: -18px;
+  text-align: end;
+  cursor: pointer;
+}
+
+.close-button::before {
+  content: "";
+  background: var(--background);
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 5px;
+  left: 5px;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.close-button:active {
+  opacity: 0.7;
+}
+
 .empty-list {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 16px 4px;
+  padding: 32px 16px;
   min-height: 80vh;
   max-width: 1120px;
   margin: auto;
+  white-space: nowrap;
 }
 
 .empty-list p {
@@ -167,9 +187,73 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 0;
 }
 
 .beacon {
   position: relative;
-  top: -64px;
+  top: -96px;
+}
+
+aside.detail-footer {
+  position: sticky;
+  bottom: 16px;
+  margin: auto;
+  max-width: 1120px;
+  display: grid;
+  grid-template-columns: 232px 1fr;
+  gap: 24px;
+  padding: 12px 24px;
+  height: 136px;
+}
+
+figure {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 24px;
+  align-items: center;
+}
+
+figcaption {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+figcaption > p {
+  margin: 0;
+}
+
+.detail-preview {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+}
+
+.detail-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+@media screen and (max-width: 719px) {
+  .close-button {
+    top: 4px;
+    right: 12px;
+  }
+
+  aside.detail-footer {
+    top: 16px;
+    bottom: -4px;
+    display: flex;
+    flex-direction: column;
+    height: 440px;
+  }
+}
+
+.action-button svg {
+  margin-right: 6px;
 }

src/components/IconGrid/IconGrid.tsx

@@ -1,27 +1,39 @@
-import React, { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { motion, useAnimation } from "framer-motion";
-import { IconContext } from "phosphor-react";
+import { IconContext } from "@phosphor-icons/react";
 
-import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
 import {
+  iconWeightAtom,
+  iconSizeAtom,
+  iconColorAtom,
   filteredQueryResultsSelector,
   isDarkThemeSelector,
-} from "../../state/selectors";
+} from "@/state";
-import useGridSpans from "../../hooks/useGridSpans";
+import Notice from "@/components/Notice";
+
+import DetailFooter from "./DetailFooter";
 import IconGridItem from "./IconGridItem";
-import Warn from "../Warn/Warn";
+import TagCloud from "./TagCloud";
 import "./IconGrid.css";
 
+const defaultSearchTags = [
+  "*new*",
+  "*updated*",
+  "communication",
+  "editor",
+  "emoji",
+  "maps",
+  "weather",
+];
+
 type IconGridProps = {};
 
-const IconGrid: React.FC<IconGridProps> = () => {
+const IconGrid = (_: IconGridProps) => {
   const weight = useRecoilValue(iconWeightAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);
   const isDark = useRecoilValue(isDarkThemeSelector);
-  const spans = useGridSpans();
-
   const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
 
   const originOffset = useRef({ top: 0, left: 0 });
@@ -31,32 +43,30 @@ const IconGrid: React.FC<IconGridProps> = () => {
     controls.start("visible");
   }, [controls, filteredQueryResults]);
 
-  if (!filteredQueryResults.length) return <Warn />;
+  if (!filteredQueryResults.length)
+    return (
+      <Notice>
+        <span>Try searching a category or keyword:</span>
+        <TagCloud name="empty-state" tags={defaultSearchTags} />
+      </Notice>
+    );
 
   return (
     <IconContext.Provider value={{ weight, size, color, mirrored: false }}>
-      <div
+      <div className="grid-container">
-        className="grid-container"
-        style={{ backgroundColor: isDark ? "#35313D" : "" }}
-      >
         <i id="beacon" className="beacon" />
-        <motion.div
+        <motion.div className="grid" initial="hidden" animate={controls}>
-          className="grid"
-          initial="hidden"
-          animate={controls}
-          variants={{}}
-        >
           {filteredQueryResults.map((iconEntry, index) => (
             <IconGridItem
               key={index}
               index={index}
-              spans={spans}
               isDark={isDark}
-              {...iconEntry}
+              entry={iconEntry}
               originOffset={originOffset}
             />
           ))}
         </motion.div>
+        <DetailFooter />
       </div>
     </IconContext.Provider>
   );

src/components/IconGrid/IconGridItem.tsx

@@ -1,22 +1,20 @@
-import React, {
+import {
   useRef,
   useLayoutEffect,
   useEffect,
   MutableRefObject,
+  HTMLAttributes,
 } from "react";
 import { useRecoilState } from "recoil";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
-import { IconProps, Icon } from "phosphor-react";
 
-import { iconPreviewOpenAtom } from "../../state/atoms";
+import { IconEntry } from "@/lib";
-import InfoPanel from "./InfoPanel";
+import { selectionEntryAtom } from "@/state";
 
-interface IconGridItemProps extends IconProps {
+interface IconGridItemProps extends HTMLAttributes<HTMLDivElement> {
   index: number;
-  spans: number;
   isDark: boolean;
-  name: string;
+  entry: IconEntry;
-  Icon: Icon;
   originOffset: MutableRefObject<{ top: number; left: number }>;
 }
 
@@ -26,21 +24,24 @@ const delayPerPixel = 0.0004;
 
 const itemVariants = {
   hidden: { opacity: 0 },
-  visible: (delayRef: any) => ({
+  visible: (delayRef: MutableRefObject<number>) => ({
     opacity: 1,
     transition: { delay: delayRef.current },
   }),
 };
 
-const IconGridItem: React.FC<IconGridItemProps> = (props) => {
+const IconGridItem = (props: IconGridItemProps) => {
-  const { index, originOffset, name, Icon } = props;
+  const { index, originOffset, entry, style } = props;
-  const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
+  const { name, Icon } = entry;
-  const isOpen = open === name;
+  const [selection, setSelectionEntry] = useRecoilState(selectionEntryAtom);
+  const isOpen = selection?.name === name;
+  const isNew = entry.tags.includes("*new*");
+  const isUpdated = entry.tags.includes("*updated*");
   const delayRef = useRef<number>(0);
   const offset = useRef({ top: 0, left: 0 });
   const ref = useRef<any>();
 
-  const handleOpen = () => setOpen(isOpen ? false : name);
+  const handleOpen = () => setSelectionEntry(isOpen ? null : entry);
 
   // The measurement for all elements happens in the layoutEffect cycle
   // This ensures that when we calculate distance in the effect cycle
@@ -74,8 +75,8 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         ref={ref}
         tabIndex={0}
         style={{
-          order: index,
+          ...style,
-          backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined,
+          backgroundColor: isOpen ? "var(--translucent)" : undefined,
         }}
         custom={delayRef}
         transition={transition}
@@ -84,11 +85,12 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         onClick={handleOpen}
       >
         <Icon />
-        <p>{name}</p>
+        <p>
+          {name}
+          {isNew && <span className="badge new">•</span>}
+          {isUpdated && <span className="badge updated">•</span>}
+        </p>
       </motion.div>
-        <AnimatePresence initial={false}>
-          {isOpen && <InfoPanel {...props} />}
-        </AnimatePresence>
     </>
   );
 };

src/components/IconGrid/InfoPanel.tsx

@@ -1,195 +0,0 @@
-import React, { useRef } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
-import { motion } from "framer-motion";
-import { saveAs } from "file-saver";
-import { Icon, Copy, X, CheckCircle, Download } from "phosphor-react";
-
-import {
-  iconWeightAtom,
-  iconSizeAtom,
-  iconColorAtom,
-  iconPreviewOpenAtom,
-} from "../../state/atoms";
-import useTransientState from "../../hooks/useTransientState";
-
-const infoVariants = {
-  open: {
-    opacity: 1,
-    height: 496,
-    margin: 4,
-    // transition: { stiffness: 600, damping: 32, duration: 0.2 },
-  },
-  collapsed: {
-    opacity: 0,
-    height: 0,
-    margin: 0,
-    // transition: { stiffness: 600, damping: 32, duration: 0.2 },
-  },
-};
-
-interface InfoPanelProps {
-  index: number;
-  spans: number;
-  isDark: boolean;
-  name: string;
-  Icon: Icon;
-}
-
-const InfoPanel: React.FC<InfoPanelProps> = (props) => {
-  const { index, spans, isDark, name, Icon } = props;
-  const weight = useRecoilValue(iconWeightAtom);
-  const size = useRecoilValue(iconSizeAtom);
-  const color = useRecoilValue(iconColorAtom);
-  const setOpen = useSetRecoilState(iconPreviewOpenAtom);
-  const [copied, setCopied] = useTransientState<string | false>(false, 2000);
-  const ref = useRef<SVGSVGElement>(null);
-
-  const snippets = {
-    html:
-      weight === "duotone"
-        ? "This weight is not yet supported"
-        : `<i class="ph-${name}${
-            weight === "regular" ? "" : `-${weight}`
-          }"></i>`,
-    react: `<${Icon.displayName} size={${size}} ${
-      color !== "#000000" ? `color="${color}" ` : ""
-    }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
-    vue: `<Ph${Icon.displayName} :size="${size}" ${
-      color !== "#000000" ? `color="${color}" ` : ""
-    }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
-  };
-
-  const handleCopySnippet = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    type: "html" | "react" | "vue"
-  ) => {
-    event.currentTarget.blur();
-    setCopied(type);
-    const data = snippets[type];
-    data && void navigator.clipboard?.writeText(data);
-  };
-
-  const handleDownloadSVG = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    event.currentTarget.blur();
-    if (!ref.current?.outerHTML) return;
-    const blob = new Blob([ref.current.outerHTML]);
-    saveAs(blob, `${name}${weight === "regular" ? "" : `-${weight}`}.svg`);
-  };
-
-  const handleCopySVG = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    event.currentTarget.blur();
-    setCopied("svg");
-    ref.current && void navigator.clipboard?.writeText(ref.current.outerHTML);
-  };
-
-  return (
-    <motion.section
-      className="info-box"
-      animate="open"
-      exit="collapsed"
-      variants={infoVariants}
-      style={{
-        order: index + (spans - (index % spans)),
-        color: isDark ? "white" : "black",
-      }}
-    >
-      <div className="icon-preview">
-        <div>
-          <Icon ref={ref} color={color} weight={weight} size={192} />
-          <p>{name}</p>
-        </div>
-      </div>
-      <div className="icon-usage">
-        <div className="snippet">
-          React
-          <pre tabIndex={0}>
-            {snippets.react}
-            <button
-              title="Copy snippet"
-              onClick={(e) => handleCopySnippet(e, "react")}
-            >
-              {copied === "react" ? (
-                <CheckCircle size={24} color="#1FA647" weight="fill" />
-              ) : (
-                <Copy size={24} color="currentColor" weight="fill" />
-              )}
-            </button>
-          </pre>
-        </div>
-        <div className="snippet">
-          Vue
-          <pre tabIndex={0}>
-            {snippets.vue}
-            <button
-              title="Copy snippet"
-              onClick={(e) => handleCopySnippet(e, "vue")}
-            >
-              {copied === "vue" ? (
-                <CheckCircle size={24} color="#1FA647" weight="fill" />
-              ) : (
-                <Copy size={24} color="currentColor" weight="fill" />
-              )}
-            </button>
-          </pre>
-        </div>
-        <div className="snippet">
-          HTML/CSS
-          <pre
-            tabIndex={0}
-            style={weight === "duotone" ? { color: "#B7B7B7" } : {}}
-          >
-            {snippets.html}
-            <button
-              title="Copy snippet"
-              onClick={(e) => handleCopySnippet(e, "html")}
-              disabled={weight === "duotone"}
-            >
-              {copied === "html" ? (
-                <CheckCircle size={24} color="#1FA647" weight="fill" />
-              ) : (
-                <Copy size={24} color="currentColor" weight="fill" />
-              )}
-            </button>
-          </pre>
-        </div>
-        <div className="button-row">
-          <button
-            style={{ color: isDark ? "white" : "black" }}
-            onClick={handleDownloadSVG}
-          >
-            <Download size={32} color="currentColor" weight="fill" /> Download
-            SVG
-          </button>
-          <button
-            style={{ color: isDark ? "white" : "black" }}
-            onClick={handleCopySVG}
-          >
-            {copied === "svg" ? (
-              <CheckCircle size={32} color="#1FA647" weight="fill" />
-            ) : (
-              <Copy size={32} color="currentColor" weight="fill" />
-            )}
-            {copied === "svg" ? "Copied!" : "Copy SVG"}
-          </button>
-        </div>
-      </div>
-      <X
-        className="close-icon"
-        tabIndex={0}
-        color="currentColor"
-        size={32}
-        weight="fill"
-        onClick={() => setOpen(false)}
-        onKeyDown={(e) => {
-          e.key === "Enter" && setOpen(false);
-        }}
-      />
-    </motion.section>
-  );
-};
-
-export default InfoPanel;

src/components/IconGrid/TagCloud.css

@@ -0,0 +1,28 @@
+.tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+button.tag-button {
+  margin: 4px;
+  border-radius: 4px;
+  background-color: var(--sheer);
+  outline: none;
+  cursor: pointer;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+  color: var(--foreground);
+}
+
+button.tag-button:hover {
+  background-color: var(--soft);
+}
+
+button.tag-button:focus-visible {
+  box-shadow: 0 0 0 1px var(--soft);
+}
+
+.tag-button code {
+  padding: 4px;
+  font-size: 12px;
+}

src/components/IconGrid/TagCloud.tsx

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import { useSetRecoilState } from "recoil";
+
+import { useMediaQuery } from "@/hooks";
+import { searchQueryAtom } from "@/state";
+import "./TagCloud.css";
+
+interface TagCloudProps {
+  name: string;
+  tags: string[];
+}
+
+const TagCloud = ({ name, tags }: TagCloudProps) => {
+  const isMobile = useMediaQuery("(max-width: 719px)");
+  const setQuery = useSetRecoilState(searchQueryAtom);
+  const handleTagClick = useCallback(
+    (tag: string) => {
+      setQuery(tag);
+      !isMobile && document.getElementById("search-input")?.focus();
+    },
+    [setQuery, isMobile]
+  );
+
+  return (
+    <div className="tag-cloud">
+      {tags.map((tag) => (
+        <button
+          key={`${name}-tag-${tag}`}
+          className="tag-button"
+          onClick={() => void handleTagClick(tag)}
+        >
+          <code>{tag}</code>
+          {tag === "*new*" && <span className="badge new">•</span>}
+          {tag === "*updated*" && <span className="badge updated">•</span>}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TagCloud;

src/components/IconGrid/index.ts

@@ -0,0 +1 @@
+export { default } from "./IconGrid";

src/components/Links/Links.css

@@ -0,0 +1,42 @@
+.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;
+  cursor: pointer;
+  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%;
+}

src/components/Links/Links.tsx

@@ -0,0 +1,95 @@
+import { ArrowElbowDownRight } from "@phosphor-icons/react";
+
+import { iconCount } from "@/lib/icons";
+import OutboundLink from "@/components/OutboundLink";
+
+import "./Links.css";
+
+interface LinksProps {}
+
+const Links = (_: LinksProps) => {
+  return (
+    <div className="links">
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          className="nav-link"
+          href="https://phosphoricons.com/assets/phosphor-icons.zip"
+          eventLabel="Download all"
+          download
+          type="application/zip"
+        >
+          Download all ({iconCount})
+        </OutboundLink>
+      </div>
+
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <span>
+          <OutboundLink
+            href="https://www.figma.com/community/file/903830135544202908/Phosphor-Icons"
+            eventLabel="Figma library"
+          >
+            Figma library
+          </OutboundLink>
+          {" / "}
+          <OutboundLink
+            href="https://www.figma.com/community/plugin/898620911119764089/Phosphor-Icons"
+            eventLabel="Figma plugin"
+          >
+            plugin
+          </OutboundLink>
+        </span>
+      </div>
+
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          href="https://phosphoricons.com/assets/phosphor-icons.sketchplugin.zip"
+          eventLabel="Download sketch plugin"
+          download
+          type="application/zip"
+        >
+          Sketch plugin
+        </OutboundLink>
+      </div>
+
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <span>
+          <OutboundLink href="https://paypal.me/minoraxis" eventLabel="Donate">
+            Donate on PayPal
+          </OutboundLink>
+          {" / "}
+          <OutboundLink
+            href="https://patreon.com/phosphoricons"
+            eventLabel="Patreon"
+          >
+            Patreon
+          </OutboundLink>
+        </span>
+      </div>
+
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          href="https://github.com/phosphor-icons/homepage"
+          eventLabel="GitHub"
+        >
+          GitHub
+        </OutboundLink>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          href="https://github.com/phosphor-icons/homepage/issues"
+          eventLabel="Request"
+        >
+          Request an icon
+        </OutboundLink>
+      </div>
+    </div>
+  );
+};
+
+export default Links;

src/components/Links/index.ts

@@ -0,0 +1 @@
+export { default } from "./Links";

src/components/Notice/Notice.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { motion } from "framer-motion";
+import { useRecoilValue } from "recoil";
+import { HourglassMedium, Question, SmileyXEyes } from "@phosphor-icons/react";
+
+import { searchQueryAtom } from "@/state";
+
+interface NoticeProps {
+  message?: string;
+  type?: "wait" | "help" | "warn" | "none";
+  children?: ReactNode;
+}
+
+const Notice = ({ message, type = "warn", children }: NoticeProps) => {
+  const query = useRecoilValue(searchQueryAtom);
+
+  return (
+    <div className="primary">
+      <motion.div
+        className="empty-list"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        {type === "wait" && (
+          <HourglassMedium size={128} color="#615C68" weight="duotone" />
+        )}
+        {type === "help" && (
+          <Question size={128} color="#615C68" weight="duotone" />
+        )}
+        {type === "warn" && (
+          <SmileyXEyes size={128} color="#615C68" weight="duotone" />
+        )}
+        {message ?? (
+          <p>
+            No results for "<code>{query}</code>"
+          </p>
+        )}
+        {children}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Notice;

src/components/Notice/index.ts

@@ -0,0 +1 @@
+export { default } from "./Notice";

src/components/OutboundLink/OutboundLink.tsx

@@ -0,0 +1,64 @@
+import {
+  DetailedHTMLProps,
+  AnchorHTMLAttributes,
+  useCallback,
+  MouseEventHandler,
+} from "react";
+import ReactGA from "react-ga4";
+import { UaEventOptions } from "react-ga4/types/ga4";
+
+interface OutboundLinkProps
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  eventLabel: string;
+}
+
+const NEWTAB = "_blank";
+const MIDDLECLICK = 1;
+const DEFAULT_META: UaEventOptions = {
+  category: "Outbound",
+  action: "Click",
+};
+
+const OutboundLink = ({
+  eventLabel,
+  target,
+  href,
+  ...props
+}: OutboundLinkProps) => {
+  const handleClick: MouseEventHandler<HTMLAnchorElement> = useCallback(
+    (event) => {
+      const eventMeta = { ...DEFAULT_META, label: eventLabel };
+      const sameTarget = target !== NEWTAB;
+      const normalClick = !(
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.metaKey ||
+        event.button === MIDDLECLICK
+      );
+
+      if (!!href && sameTarget && normalClick) {
+        event.preventDefault();
+        ReactGA.event(eventMeta);
+        window.location.href = href;
+      } else {
+        ReactGA.event(eventMeta);
+      }
+    },
+    [href, eventLabel]
+  );
+
+  return (
+    <a
+      {...props}
+      href={href}
+      onClick={handleClick}
+      rel={target === NEWTAB ? "noopener noreferrer" : ""}
+      className="nav-link"
+    />
+  );
+};
+
+export default OutboundLink;

src/components/OutboundLink/index.ts

@@ -0,0 +1 @@
+export { default } from "./OutboundLink";

src/components/SearchInput/SearchInput.css

@@ -6,7 +6,7 @@
   padding: 0 24px;
   border-radius: 8px;
   color: white;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--scrim);
 }
 
 .search-bar:focus-within {
@@ -15,11 +15,15 @@
   background-color: white !important;
 }
 
+.search-bar:focus-within .keys {
+  display: none;
+}
+
 .search-bar input {
   height: 100%;
   flex: 1;
   border: none;
-  margin-left: 12px;
+  margin: 0 12px;
   padding: 0;
   font-size: 16px;
   color: white;
@@ -48,6 +52,17 @@
   cursor: wait;
 }
 
+.keys {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  min-width: 42px;
+  font-size: 12px;
+}
+
 @media screen and (max-width: 558px) {
   #search-icon {
     display: none;
@@ -58,3 +73,9 @@
     width: 60%;
   }
 }
+
+@media screen and (min-width: 858px) and (max-width: 1100px) {
+  .search-bar {
+    flex-basis: 320px;
+  }
+}

src/components/SearchInput/SearchInput.tsx

@@ -1,27 +1,65 @@
-import React, { useState } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  MutableRefObject,
+  ReactNode,
+} from "react";
 import { useRecoilState } from "recoil";
 import { useDebounce } from "react-use";
-import { MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Command, MagnifyingGlass, X, HourglassHigh } from "@phosphor-icons/react";
+import ReactGA from "react-ga4";
 
-import { searchQueryAtom } from "../../state/atoms";
+import { searchQueryAtom } from "@/state";
 import "./SearchInput.css";
 
+const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
+const isApple = apple.test(window.navigator.platform);
+
+const mobile = /Android|iPhone|iPod|iPad|Opera Mini|IEMobile/i;
+const isMobile = mobile.test(window.navigator.userAgent);
+
 type SearchInputProps = {};
 
-const SearchInput: React.FC<SearchInputProps> = () => {
+const SearchInput = (_: SearchInputProps) => {
   const [value, setValue] = useState<string>("");
   const [query, setQuery] = useRecoilState(searchQueryAtom);
-  void query;
+  const inputRef =
+    useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>;
+
+  useHotkeys("ctrl+k,cmd+k", (e) => {
+    e.preventDefault();
+    if (!e.repeat) {
+      inputRef.current?.focus();
+      inputRef.current.select();
+    }
+  });
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    let isMounted = true;
+    if (value !== query) {
+      isMounted && setValue(query);
+      ReactGA.event({ category: "Search", action: "Tag", label: query });
+    }
+    return () => void (isMounted = false);
+  }, [query]);
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   const [isReady] = useDebounce(
     () => {
-      setQuery(value);
+      if (value !== query) {
-      value &&
+        setQuery(value);
+        !!value &&
+          ReactGA.event({ category: "Search", action: "Query", label: value });
+      }
+      !!value &&
         void document
           .getElementById("beacon")
           ?.scrollIntoView({ block: "start", behavior: "smooth" });
     },
-    250,
+    500,
     [value]
   );
 
@@ -36,6 +74,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
     <div className="search-bar">
       <MagnifyingGlass id="search-icon" size={24} />
       <input
+        ref={inputRef}
         id="search-input"
         title="Search for icon names, categories, or keywords"
         aria-label="Search for an icon"
@@ -45,10 +84,11 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         value={value}
         placeholder="Search"
         onChange={({ currentTarget }) => setValue(currentTarget.value)}
-        onKeyPress={({ currentTarget, key }) =>
+        onKeyDown={({ currentTarget, key }) =>
-          key === "Enter" && currentTarget.blur()
+          (key === "Enter" || key === "Escape") && currentTarget.blur()
         }
       />
+      {!value && !isMobile && <Keys>{isApple ? <Command /> : "Ctrl + "}K</Keys>}
       {value ? (
         isReady() ? (
           <X className="clear-icon" size={18} onClick={handleCancelSearch} />
@@ -60,4 +100,8 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   );
 };
 
+const Keys = ({ children }: { children?: ReactNode }) => (
+  <div className="keys">{children}</div>
+);
+
 export default SearchInput;

src/components/SearchInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./SearchInput";

src/components/SettingsActions/SettingsActions.css

@@ -0,0 +1,17 @@
+button.action-button {
+  background-color: var(--scrim);
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+button.action-button:active {
+  background-color: var(--sheer);
+}
+
+@media screen and (max-width: 558px) {
+  .action-button {
+    display: none;
+  }
+}

src/components/SettingsActions/SettingsActions.tsx

@@ -0,0 +1,62 @@
+import { useRecoilValue, useResetRecoilState } from "recoil";
+import { ArrowCounterClockwise, CheckCircle, Link } from "@phosphor-icons/react";
+
+import { useTransientState } from "@/hooks";
+import {
+  iconWeightAtom,
+  iconSizeAtom,
+  iconColorAtom,
+  resetSettingsSelector,
+} from "@/state";
+
+import "./SettingsActions.css";
+
+const SettingsActions = () => {
+  const weight = useRecoilValue(iconWeightAtom);
+  const size = useRecoilValue(iconSizeAtom);
+  const color = useRecoilValue(iconColorAtom);
+  const reset = useResetRecoilState(resetSettingsSelector);
+
+  const [copied, setCopied] = useTransientState<boolean>(false, 2000);
+
+  const copyDeepLinkToClipboard = () => {
+    const paramString = new URLSearchParams([
+      ["weight", weight.toString()],
+      ["size", size.toString()],
+      ["color", color.replace("#", "")],
+    ]).toString();
+    void navigator.clipboard
+      ?.writeText(`${window.location.host}?${paramString}`)
+      .then(() => {
+        setCopied(true);
+      })
+      .catch(() => {
+        alert("Clipboard permissions must be enabled to copy links!");
+      });
+  };
+
+  return (
+    <>
+      <button
+        className="action-button"
+        title="Restore default settings"
+        onClick={reset}
+      >
+        <ArrowCounterClockwise size={24} />
+      </button>
+      <button
+        className="action-button"
+        title="Copy URL for current settings"
+        onClick={copyDeepLinkToClipboard}
+      >
+        {copied ? (
+          <CheckCircle size={24} color="#1FA647" weight="fill" />
+        ) : (
+          <Link size={24} />
+        )}
+      </button>
+    </>
+  );
+};
+
+export default SettingsActions;

src/components/SettingsActions/index.ts

@@ -0,0 +1 @@
+export { default } from "./SettingsActions";

src/components/SizeInput/SizeInput.css

@@ -7,7 +7,7 @@
   padding: 0 24px;
   color: white;
   border-radius: 8px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--scrim);
   font-family: "Manrope", sans-serif;
   font-size: 16px;
 }
@@ -24,7 +24,7 @@
   flex: 1;
   border: none;
   margin: 0 0 0 12px;
-  -webkit-appearance: none;  /* Override default CSS styles */
+  -webkit-appearance: none; /* Override default CSS styles */
   appearance: none;
   height: 1px; /* Specified height */
   background: rgba(255, 255, 255, 0.3);
@@ -46,7 +46,7 @@
   appearance: none;
   width: 16px; /* Set a specific slider handle width */
   height: 16px; /* Slider handle height */
-  margin: 6px;
+  padding: 6px;
   border-radius: 50%;
   background: white; /* Green background */
   cursor: pointer; /* Cursor on hover */
@@ -57,7 +57,7 @@
   appearance: none;
   width: 16px; /* Set a specific slider handle width */
   height: 16px; /* Slider handle height */
-  margin: 6px;
+  padding: 6px;
   border-radius: 50%;
   background: white; /* Green background */
   cursor: pointer; /* Cursor on hover */
@@ -68,12 +68,12 @@
   outline: none;
   width: 24px; /* Set a specific slider handle width */
   height: 24px; /* Slider handle height */
-  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 6px var(--sheer);
 }
 
 .size-bar input:focus::-webkit-slider-thumb {
   outline: none;
   width: 24px; /* Set a specific slider handle width */
   height: 24px; /* Slider handle height */
-  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 6px var(--sheer);
 }

src/components/SizeInput/SizeInput.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useRecoilState } from "recoil";
 
-import { iconSizeAtom } from "../../state/atoms";
+import { iconSizeAtom } from "@/state";
 import "./SizeInput.css";
 
 type SizeInputProps = {};
@@ -14,7 +14,7 @@ const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
   event.currentTarget.blur();
 };
 
-const SizeInput: React.FC<SizeInputProps> = () => {
+const SizeInput = (_: SizeInputProps) => {
   const [size, setSize] = useRecoilState(iconSizeAtom);
 
   const handleSizeChange = useCallback(

src/components/SizeInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./SizeInput";

src/components/StyleInput/StyleInput.css

@@ -1,20 +1,3 @@
-/* .style-select {
-  position: relative;
-}
-
-.style-select {
-  background-color: gold;
-  border-radius: 24px;
-  box-shadow: 4px 4px #ccc;
-  display: none;
-}
-
-.style-select option {
-  background-color: gold;
-  border-radius: 24px;
-  display: none;
-} */
-
 .react-dropdown-select {
   width: 176px !important;
   height: 48px !important;
@@ -22,7 +5,7 @@
   padding: 0 24px !important;
   color: white;
   border-radius: 8px !important;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--scrim);
   font-size: 16px;
   border: none !important;
 }
@@ -50,19 +33,6 @@
   box-shadow: none !important;
 }
 
-/* .react-dropdown-select-type-single {
-  height: 100% !important;
-} */
-
-/* .react-dropdown-select-clear,
-.react-dropdown-select-dropdown-handle {
-  color: #fff;
-} */
-
-/* .react-dropdown-select-option {
-  border: 1px solid #000;
-} */
-
 .react-dropdown-select-item {
   color: #333;
   height: 40px !important;
@@ -89,25 +59,24 @@
   max-height: 300px;
   overflow: auto;
   z-index: 9;
-  /* background: rgb(29, 20, 20) !important; */
   box-shadow: none;
 }
 .react-dropdown-select-item {
   color: black;
 }
 .react-dropdown-select-item:hover {
-  background-color: #ffd171 !important;
+  background-color: var(--yellow) !important;
 }
 
 .react-dropdown-select-item.react-dropdown-select-item-selected,
 .react-dropdown-select-item.react-dropdown-select-item-active {
   color: black !important;
-  background-color: #ffd171 !important;
+  background-color: var(--yellow) !important;
 }
 
 .react-dropdown-select-item:focus {
   color: black !important;
-  background-color: #ffd171 !important;
+  background-color: var(--yellow) !important;
 }
 
 .react-dropdown-select-item.react-dropdown-select-item-disabled {

src/components/StyleInput/StyleInput.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import { useMemo } from "react";
-import { useSetRecoilState } from "recoil";
+import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
-import { PencilLine } from "phosphor-react";
+import { PencilLine } from "@phosphor-icons/react";
+import { IconStyle } from "@phosphor-icons/core";
+
+import { iconWeightAtom } from "@/state";
 
-import { iconWeightAtom } from "../../state/atoms";
-import { IconStyle } from "../../lib";
 import "./StyleInput.css";
 
 type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
@@ -44,8 +45,13 @@ const options: WeightOption[] = [
 
 type StyleInputProps = {};
 
-const StyleInput: React.FC<StyleInputProps> = () => {
+const StyleInput = (_: StyleInputProps) => {
-  const setStyle = useSetRecoilState(iconWeightAtom);
+  const [style, setStyle] = useRecoilState(iconWeightAtom);
+
+  const currentStyle = useMemo(
+    () => [options.find((option) => option.value === style)!!],
+    [style]
+  );
 
   const handleStyleChange = (values: WeightOption[]) =>
     setStyle(values[0].value as IconStyle);
@@ -53,7 +59,7 @@ const StyleInput: React.FC<StyleInputProps> = () => {
   return (
     <Select
       options={options}
-      values={[options[2]]}
+      values={currentStyle}
       searchable={false}
       labelField="key"
       onChange={handleStyleChange}

src/components/StyleInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./StyleInput";

src/components/Tabs/Tabs.css

@@ -0,0 +1,56 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+button.tab {
+  all: unset;
+  padding: 6px 4px;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+  flex: 1;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  z-index: 2;
+}
+
+button.tab:focus-visible {
+  outline: 1px solid currentColor;
+}
+
+button.tab:hover:not(.active) {
+  background-color: var(--sheer);
+}
+
+button.tab.active {
+  background-color: var(--background);
+  border-bottom: none;
+}
+
+.tab-content {
+  flex: 1;
+  height: 77px;
+  max-height: 77px;
+  padding: 20px 20px 10px;
+  border-radius: 8px;
+  background-color: var(--background);
+  overflow-y: auto;
+}
+
+@media screen and (max-width: 719px) {
+  .tabs {
+    flex: 1;
+  }
+
+  .tab-content {
+    height: unset;
+    max-height: unset;
+  }
+}

src/components/Tabs/Tabs.tsx

@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode, useState } from "react";
+
+import "./Tabs.css";
+
+export type Tab = {
+  header: ReactNode;
+  content: ReactNode;
+};
+
+type TabsProps = {
+  tabs: Tab[];
+  initialIndex?: number;
+  onTabChange?: (index: number) => void;
+};
+
+const contentStyles: Record<string, CSSProperties> = {
+  activeLeft: { borderTopLeftRadius: 0 },
+  activeRight: { borderTopRightRadius: 0 },
+} as const;
+
+const Tabs = ({ tabs, initialIndex = 0, onTabChange }: TabsProps) => {
+  const [activeIndex, setActiveIndex] = useState<number>(
+    !!tabs[initialIndex] ? initialIndex : 0
+  );
+
+  return (
+    <div className="secondary tabs" tabIndex={0}>
+      <div className="tabs-header">
+        {tabs.map((tab, i) => (
+          <button
+            key={i}
+            tabIndex={0}
+            className={`tab ${activeIndex === i ? "active" : ""}`}
+            onClick={() => {
+              setActiveIndex(i);
+              onTabChange?.(i);
+            }}
+          >
+            {tab.header}
+          </button>
+        ))}
+      </div>
+      <div
+        className="tab-content"
+        style={
+          activeIndex === 0
+            ? contentStyles.activeLeft
+            : activeIndex === tabs.length - 1
+            ? contentStyles.activeRight
+            : undefined
+        }
+      >
+        {tabs[activeIndex]?.content}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export type { Tab } from "./Tabs";

src/components/Toolbar/Toolbar.css

@@ -1,14 +1,15 @@
-menu.toolbar {
+nav.toolbar {
+  position: -webkit-sticky;
   position: sticky;
   top: -1px;
   padding: 0;
   margin: 0;
-  background-color: #35313d;
+  background-color: var(--eggplant);
-  z-index: 1;
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 0 0 var(--shadow);
 }
 
 .toolbar-contents {

src/components/Toolbar/Toolbar.tsx

@@ -1,23 +1,25 @@
 import React from "react";
 
+import StyleInput from "@/components/StyleInput";
+import SearchInput from "@/components/SearchInput";
+import SizeInput from "@/components/SizeInput";
+import ColorInput from "@/components/ColorInput";
+import SettingsActions from "@/components/SettingsActions";
 import "./Toolbar.css";
-import StyleInput from "../StyleInput/StyleInput";
-import SearchInput from "../SearchInput/SearchInput";
-import SizeInput from "../SizeInput/SizeInput";
-import ColorInput from "../ColorInput/ColorInput";
 
 type ToolbarProps = {};
 
 const Toolbar: React.FC<ToolbarProps> = () => {
   return (
-    <menu className="toolbar" id="toolbar">
+    <nav className="toolbar" id="toolbar">
       <div className="toolbar-contents">
         <StyleInput />
         <SearchInput />
         <SizeInput />
         <ColorInput />
+        <SettingsActions />
       </div>
-    </menu>
+    </nav>
   );
 };
 

src/components/Toolbar/index.ts

@@ -0,0 +1 @@
+export { default } from "./Toolbar";

src/components/Warn/Warn.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { useRecoilValue } from "recoil";
-
-import { isDarkThemeSelector } from "../../state/selectors";
-import { searchQueryAtom } from "../../state/atoms";
-import { SmileyXEyes } from "phosphor-react";
-
-interface WarnProps {
-  message?: string;
-}
-
-const Warn: React.FC<WarnProps> = ({ message }) => {
-  const isDark = useRecoilValue(isDarkThemeSelector);
-  const query = useRecoilValue(searchQueryAtom);
-
-  return (
-    <div style={isDark ? { backgroundColor: "#35313D", color: "white" } : {}}>
-      <motion.div
-        className="empty-list"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.5 }}
-      >
-        <SmileyXEyes size={128} color="#615C68" weight="duotone" />
-        {message ?? (
-          <p>
-            No results for "<code>{query}</code>"
-          </p>
-        )}
-      </motion.div>
-    </div>
-  );
-};
-
-export default Warn;

src/hooks/index.ts

@@ -0,0 +1,13 @@
+export { default as useCSSVariables } from "./useCSSVariables";
+export { default as useDebounce } from "./useDebounce";
+export { default as useEvent } from "./useEvent";
+export { default as useIconParameters } from "./useIconParameters";
+export { default as useLocalStorage } from "./useLocalStorage";
+export { default as useMediaQuery } from "./useMediaQuery";
+export { default as usePersistSettings } from "./usePersistSettings";
+export { default as useSessionStorage } from "./useSessionStorage";
+export { default as useThrottle } from "./useThrottle";
+export { default as useThrottled } from "./useThrottled";
+export { default as useTimeoutFn } from "./useTimeoutFn";
+export { default as useTransientState } from "./useTransientState";
+export { default as useUnmount } from "./useUnmount";

src/hooks/useCSSVariables.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+
+type CSSCustomPropertyName = `--${string}`;
+
+type CSSCustomProperties = {
+  [property: CSSCustomPropertyName]: string | null;
+};
+
+function simpleDiff(prev: CSSCustomProperties, next: CSSCustomProperties) {
+  const merge = { ...prev, ...next };
+  return Object.entries(merge).reduce<
+    [property: CSSCustomPropertyName, value: string | null][]
+  >((acc, [k, val]) => {
+    let key = k as CSSCustomPropertyName;
+
+    if (
+      !prev[key as CSSCustomPropertyName] ||
+      prev[key as CSSCustomPropertyName] !== val
+    ) {
+      acc.push([key, val]);
+    }
+    return acc;
+  }, []);
+}
+
+export default function useCSSVariables(properties: CSSCustomProperties) {
+  const p = useRef<CSSCustomProperties>({});
+
+  useEffect(() => {
+    const diff = simpleDiff(p.current, properties);
+
+    if (diff.length > 0) {
+      diff.forEach(([key, value]) => {
+        document.documentElement.style.setProperty(key, value);
+      });
+
+      p.current = properties;
+    }
+  }, [properties]);
+}

src/hooks/useDebounce.ts

@@ -0,0 +1,16 @@
+import { DependencyList, useEffect } from "react";
+import useTimeoutFn from "./useTimeoutFn";
+
+export type UseDebounceReturn = [() => boolean | null, () => void];
+
+export default function useDebounce(
+  fn: Function,
+  ms: number = 0,
+  deps: DependencyList = []
+): UseDebounceReturn {
+  const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
+
+  useEffect(reset, deps);
+
+  return [isReady, cancel];
+}

src/hooks/useEvent.ts

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+export type UseEventTarget = HTMLElement | SVGElement | Document | Window;
+
+export type UseEventMap<E extends UseEventTarget> = E extends HTMLElement
+  ? HTMLElementEventMap
+  : E extends SVGElement
+  ? SVGElementEventMap
+  : E extends Document
+  ? DocumentEventMap
+  : WindowEventMap;
+
+export type UseEventType<E extends UseEventTarget> = keyof UseEventMap<E>;
+
+/**
+ * Attach event listeners to arbitrary targets, and perform necessary cleanup
+ * when unmounting. Provides type inference for the listener based on the
+ * provided event name (currently supports {@link Window}, {@link Document},
+ * and subclasses of {@link HTMLElement} and {@link SVGElement}).
+ *
+ * @param type an {@link https://developer.mozilla.org/en-US/docs/Web/Events#event_listing event type}
+ * @param listener a callback to be fired on the event
+ * @param options {@link AddEventListenerOptions}
+ * @param el the target element to attack the listener. Defaults to
+ * {@link Document} when omitted.
+ */
+export default function useEvent<
+  K extends UseEventType<T>,
+  M extends UseEventMap<T>,
+  T extends UseEventTarget = Document
+>(
+  type: K,
+  listener: (this: T, ev: M[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+  el?: T
+) {
+  useEffect(() => {
+    const target = el ?? document;
+    // @ts-ignore
+    target.addEventListener(type, listener, options);
+
+    // @ts-ignore
+    return () => target.removeEventListener(type, listener);
+  }, [el, type]);
+}