payments: integrate with payment server

This patch adds a mechanism to open a modal, and roughs out a donation
flow using the 'braintree' payments provider.

.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}],",
-			"\tIcon: ${4:icon},",
+			"\ttags: [\"*new*\", ${3:tags}],",
+			"\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
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
-
-  The licenses for most software and other practical works are designed
-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
-share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
-
-  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>.
+MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,15 @@
+<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.
+
+- 772 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
 
@@ -58,9 +67,9 @@ ReactDOM.render(<App />, document.getElementById("root"));
 ```html
 <template>
   <div>
-    <PhHorse />
-    <PhHeart :size="32" color="hotpink" weight="fill" />
-    <PhCube />
+    <ph-horse />
+    <ph-heart :size="32" color="hotpink" weight="fill" />
+    <ph-cube />
   </div>
 </template>
 
@@ -77,28 +86,17 @@ 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.
-
-## For designers
-
-### Raw Assets
-
-Download our [asset kit](https://www.phosphoricons.com/assets/phosphor.zip) to start working with Phosphor Icons in your designs.
-
-- **SVGs** – Individual icon SVGs, in both minified and original formats retaining design-time detail.
-- **Icon Font** – Use the icons as you would text, in print and other applications where full-fledged graphical elements are undesirable.
-
-<!-- ### Source Files
-- **Sketch**
-- **Illustrator**
-- **Figma** -->
+> **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.
 
 ## 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
+- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter
+- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components
+- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin
 
 ## License
 
-GPL-3.0 © [Phosphor Icons](https://github.com/phosphor-icons)
+MIT © [Phosphor Icons](https://github.com/phosphor-icons)

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "phosphor-web",
-  "version": "0.5.0",
-  "license": "GPL-3.0",
+  "name": "phosphor-home",
+  "version": "1.2.1",
+  "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {
     "name": "Tobias Fried",
@@ -18,20 +18,26 @@
     "UI",
     "UX"
   ],
-  "repository": "github:phosphor-icons/phosphor-web",
-  "private": false,
+  "repository": "github:phosphor-icons/phosphor-home",
+  "private": true,
   "dependencies": {
+    "@types/braintree-web-drop-in": "^1.22.3",
+    "axios": "^0.21.1",
+    "braintree-web-drop-in": "^1.30.1",
     "file-saver": "^2.0.2",
-    "framer-motion": "^2.1.0",
+    "framer-motion": "^3.10.0",
     "fuse.js": "^6.4.1",
-    "phosphor-react": "^0.5.0",
-    "react": "^17.0.0-rc.0",
-    "react-dom": "^17.0.0-rc.0",
+    "phosphor-react": "^1.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-dropdown-select": "^4.4.2",
+    "react-ga": "^3.1.2",
+    "react-hotkeys-hook": "^3.2.1",
     "react-scripts": "3.4.1",
     "react-use": "^15.3.2",
-    "recoil": "^0.0.10",
-    "tinycolor2": "^1.4.1"
+    "recoil": "^0.1.3",
+    "svg2png-converter": "^1.0.0",
+    "tinycolor2": "^1.4.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -70,7 +76,6 @@
     "@types/react-list": "^0.8.5",
     "@types/react-virtualized": "^9.21.10",
     "@types/tinycolor2": "^1.4.2",
-    "gh-pages": "^3.1.0",
     "typescript": "^3.9.6"
   }
 }

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/index.html

@@ -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 property="og:image:type" content="image/jpeg" />
+    <meta
+      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:height" content="590" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
 
     <!-- TWITTER META -->
     <meta name="twitter:card" content="summary_large_image" />
@@ -42,11 +59,14 @@
       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="%PUBLIC_URL%/favicon-192.png" />
     <link
       rel="icon"
       type="image/png"

public/manifest.json

@@ -8,12 +8,12 @@
       "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"
     }

src/assets/billiard-ball.svg

@@ -1,25 +1,19 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<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">
-    <title>billiard-ball</title>
+<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">
   <defs>
-        <circle id="path-1" cx="120" cy="120" r="120"></circle>
-        <filter x="-1.9%" y="-1.9%" width="103.8%" height="103.8%" filterUnits="objectBoundingBox" id="filter-2">
-            <feOffset dx="9" dy="9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <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>
+    <circle id="billiard-ball-a" cx="120" cy="120" r="120"/>
+    <filter id="billiard-ball-b" width="103.8%" height="103.8%" x="-1.9%" y="-1.9%" filterUnits="objectBoundingBox">
+      <feOffset dx="9" dy="9" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <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"/>
     </filter>
   </defs>
-    <g id="billiard-ball" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g>
-            <circle id="shadow" fill="#35313D" opacity="0.100000001" cx="126" cy="126" r="120"></circle>
-            <g id="body">
-                <use fill="#925BFF" fill-rule="evenodd" xlink:href="#path-1"></use>
-                <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 fill="none" fill-rule="evenodd">
+    <circle cx="126" cy="126" r="120" fill="#35313D" opacity=".1"/>
+    <use fill="#925BFF" xlink:href="#billiard-ball-a"/>
+    <use fill="#000" filter="url(#billiard-ball-b)" xlink:href="#billiard-ball-a"/>
+    <g transform="translate(56 56)">
+      <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"/>
+      <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"/>
     </g>
   </g>
 </svg>

src/assets/calculator.svg

@@ -1,553 +1,457 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="405px" height="714px" viewBox="0 0 405 714" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>calculator</title>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="405" height="714" viewBox="0 0 405 714">
   <defs>
-        <circle id="path-1" cx="76.8" cy="9.6" r="9.6"></circle>
-        <filter x="-5.2%" y="-5.2%" width="120.8%" height="120.8%" filterUnits="objectBoundingBox" id="filter-2">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-b" cx="76.8" cy="9.6" r="9.6"/>
+    <filter id="calculator-a" width="120.8%" height="120.8%" x="-5.2%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-5.2%" y="-5.2%" width="120.8%" height="120.8%" filterUnits="objectBoundingBox" id="filter-3">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-c" width="120.8%" height="120.8%" x="-5.2%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-4" cx="9.6" cy="9.6" r="9.6"></circle>
-        <filter x="-5.2%" y="-5.2%" width="120.8%" height="120.8%" filterUnits="objectBoundingBox" id="filter-5">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-e" cx="9.6" cy="9.6" r="9.6"/>
+    <filter id="calculator-d" width="120.8%" height="120.8%" x="-5.2%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-5.2%" y="-5.2%" width="120.8%" height="120.8%" filterUnits="objectBoundingBox" id="filter-6">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-f" width="120.8%" height="120.8%" x="-5.2%" y="-5.2%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-7" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-8">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-h" cx="24" cy="24" r="24"/>
+    <filter id="calculator-g" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-9">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-i" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-10" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-11">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-k" cx="24" cy="24" r="24"/>
+    <filter id="calculator-j" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-12">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-l" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-13" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-n" cx="24" cy="24" r="24"/>
+    <filter id="calculator-m" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-15">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-o" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-16" cx="24" cy="24" r="3"></circle>
-        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-17">
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <circle id="calculator-p" cx="24" cy="24" r="3"/>
+    <filter id="calculator-q" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
+      <feOffset in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-18" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-19">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-s" cx="24" cy="24" r="24"/>
+    <filter id="calculator-r" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-20">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-t" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-21" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-22">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-v" cx="24" cy="24" r="24"/>
+    <filter id="calculator-u" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-23">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-w" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-24" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-25">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-y" cx="24" cy="24" r="24"/>
+    <filter id="calculator-x" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-26">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-z" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-27" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-28">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-B" cx="24" cy="24" r="24"/>
+    <filter id="calculator-A" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-29">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-C" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-30" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-31">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-E" cx="24" cy="24" r="24"/>
+    <filter id="calculator-D" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-32">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-F" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-33" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-34">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-H" cx="24" cy="24" r="24"/>
+    <filter id="calculator-G" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-35">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-I" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-36" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-37">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-K" cx="24" cy="24" r="24"/>
+    <filter id="calculator-J" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-38">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-L" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-39" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-40">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-N" cx="24" cy="24" r="24"/>
+    <filter id="calculator-M" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-41">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-O" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-42" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-43">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-Q" cx="24" cy="24" r="24"/>
+    <filter id="calculator-P" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-44">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-R" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-45" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-46">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-T" cx="24" cy="24" r="24"/>
+    <filter id="calculator-S" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-47">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-U" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-48" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-49">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-W" cx="24" cy="24" r="24"/>
+    <filter id="calculator-V" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-50">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-X" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-51" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-52">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-Z" cx="24" cy="24" r="24"/>
+    <filter id="calculator-Y" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-53">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-aa" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-54" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-55">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-ac" cx="24" cy="24" r="24"/>
+    <filter id="calculator-ab" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-56">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-ad" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-57" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-58">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-af" cx="24" cy="24" r="24"/>
+    <filter id="calculator-ae" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-59">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-ag" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-60" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-61">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-ai" cx="24" cy="24" r="24"/>
+    <filter id="calculator-ah" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-62">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-aj" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-63" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-64">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-al" cx="24" cy="24" r="24"/>
+    <filter id="calculator-ak" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-65">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-am" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-66" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-67">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-ao" cx="24" cy="24" r="24"/>
+    <filter id="calculator-an" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-68">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-ap" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-69" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-70">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-ar" cx="24" cy="24" r="24"/>
+    <filter id="calculator-aq" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-71">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-as" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-72" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-73">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-au" cx="24" cy="24" r="24"/>
+    <filter id="calculator-at" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-74">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-av" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-75" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-76">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-ax" cx="24" cy="24" r="24"/>
+    <filter id="calculator-aw" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-77">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-ay" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-78" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-79">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-aA" cx="24" cy="24" r="24"/>
+    <filter id="calculator-az" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-80">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-aB" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
-        <circle id="path-81" cx="24" cy="24" r="24"></circle>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-82">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+    <circle id="calculator-aD" cx="24" cy="24" r="24"/>
+    <filter id="calculator-aC" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
     </filter>
-        <filter x="-2.1%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-83">
-            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+    <filter id="calculator-aE" width="108.3%" height="108.3%" x="-2.1%" y="-2.1%" filterUnits="objectBoundingBox">
+      <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetInner1"/>
+      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
+      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.3 0"/>
     </filter>
   </defs>
-    <g id="calculator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g>
-            <path d="M25.2,6 L385.2,6 C395.803867,6 404.4,14.5961328 404.4,25.2 L404.4,654 C404.4,687.137085 377.537085,714 344.4,714 L66,714 C32.862915,714 6,687.137085 6,654 L6,25.2 C6,14.5961328 14.5961328,6 25.2,6 Z" id="calculator-shadow" fill="#35313D" opacity="0.100000001"></path>
-            <path d="M19.2,0 L379.2,0 C389.803867,-1.9478988e-15 398.4,8.5961328 398.4,19.2 L398.4,648 C398.4,681.137085 371.537085,708 338.4,708 L60,708 C26.862915,708 -1.66472134e-13,681.137085 -1.70530257e-13,648 L-1.70530257e-13,19.2 C-1.75381569e-13,8.5961328 8.5961328,-8.71024223e-15 19.2,0 Z" id="calculator-body" fill="#1F1F1F"></path>
-            <g id="display" transform="translate(43.200000, 100.800000)">
-                <g id="display-bg">
-                    <rect id="Rectangle" fill="#5893BB" opacity="0.400000006" x="0" y="0" width="312" height="96"></rect>
-                    <polygon id="Rectangle-Copy-140" fill="#000000" opacity="0.200000003" points="1.82076576e-13 0 9.6 9.6 9.6 86.4 1.82076576e-13 96"></polygon>
-                    <polygon id="Rectangle-Copy-143" fill="#FFFFFF" opacity="0.2" transform="translate(307.200000, 48.000000) scale(-1, 1) translate(-307.200000, -48.000000) " points="302.4 0 312 9.6 312 86.4 302.4 96"></polygon>
-                    <polygon id="Rectangle-Copy-141" fill="#000000" opacity="0.200000003" points="0 -7.27418126e-13 312 -7.27418126e-13 302.4 9.6 9.6 9.6"></polygon>
-                    <polygon id="Rectangle-Copy-142" fill="#FFFFFF" opacity="0.2" transform="translate(156.000000, 91.200000) scale(1, -1) translate(-156.000000, -91.200000) " points="0 86.4 312 86.4 302.4 96 9.6 96"></polygon>
-                </g>
-                <g id="baseline" transform="translate(26.400000, 22.200000)" fill="#1F1707" opacity="0.200000003">
-                    <path d="M253.8,47.7 L255.6,49.5 L253.8,51.3 L235.8,51.3 L234,49.5 L235.8,47.7 L253.8,47.7 Z M215.4,47.7 L217.2,49.5 L215.4,51.3 L197.4,51.3 L195.6,49.5 L197.4,47.7 L215.4,47.7 Z M177,47.7 L178.8,49.5 L177,51.3 L159,51.3 L157.2,49.5 L159,47.7 L177,47.7 Z M138.6,47.7 L140.4,49.5 L138.6,51.3 L120.6,51.3 L118.8,49.5 L120.6,47.7 L138.6,47.7 Z M100.2,47.7 L102,49.5 L100.2,51.3 L82.2,51.3 L80.4,49.5 L82.2,47.7 L100.2,47.7 Z M61.8,47.7 L63.6,49.5 L61.8,51.3 L43.8,51.3 L42,49.5 L43.8,47.7 L61.8,47.7 Z M23.4,47.7 L25.2,49.5 L23.4,51.3 L5.4,51.3 L3.6,49.5 L5.4,47.7 L23.4,47.7 Z M219,27 L220.8,28.8 L220.8,46.8 L219,48.6 L217.2,46.8 L217.2,28.8 L219,27 Z M155.4,27 L157.2,28.8 L157.2,46.8 L155.4,48.6 L153.6,46.8 L153.6,28.8 L155.4,27 Z M180.6,27 L182.4,28.8 L182.4,46.8 L180.6,48.6 L178.8,46.8 L178.8,28.8 L180.6,27 Z M117,27 L118.8,28.8 L118.8,46.8 L117,48.6 L115.2,46.8 L115.2,28.8 L117,27 Z M142.2,27 L144,28.8 L144,46.8 L142.2,48.6 L140.4,46.8 L140.4,28.8 L142.2,27 Z M78.6,27 L80.4,28.8 L80.4,46.8 L78.6,48.6 L76.8,46.8 L76.8,28.8 L78.6,27 Z M103.8,27 L105.6,28.8 L105.6,46.8 L103.8,48.6 L102,46.8 L102,28.8 L103.8,27 Z M232.2,27 L234,28.8 L234,46.8 L232.2,48.6 L230.4,46.8 L230.4,28.8 L232.2,27 Z M40.2,27 L42,28.8 L42,46.8 L40.2,48.6 L38.4,46.8 L38.4,28.8 L40.2,27 Z M65.4,27 L67.2,28.8 L67.2,46.8 L65.4,48.6 L63.6,46.8 L63.6,28.8 L65.4,27 Z M257.4,27 L259.2,28.8 L259.2,46.8 L257.4,48.6 L255.6,46.8 L255.6,28.8 L257.4,27 Z M1.8,27 L3.6,28.8 L3.6,46.8 L1.8,48.6 L-2.84217094e-13,46.8 L-2.84217094e-13,28.8 L1.8,27 Z M27,27 L28.8,28.8 L28.8,46.8 L27,48.6 L25.2,46.8 L25.2,28.8 L27,27 Z M193.8,27 L195.6,28.8 L195.6,46.8 L193.8,48.6 L192,46.8 L192,28.8 L193.8,27 Z M138.6,24.3 L140.4,26.1 L138.6,27.9 L120.6,27.9 L118.8,26.1 L120.6,24.3 L138.6,24.3 Z M253.8,24.3 L255.6,26.1 L253.8,27.9 L235.8,27.9 L234,26.1 L235.8,24.3 L253.8,24.3 Z M177,24.3 L178.8,26.1 L177,27.9 L159,27.9 L157.2,26.1 L159,24.3 L177,24.3 Z M100.2,24.3 L102,26.1 L100.2,27.9 L82.2,27.9 L80.4,26.1 L82.2,24.3 L100.2,24.3 Z M61.8,24.3 L63.6,26.1 L61.8,27.9 L43.8,27.9 L42,26.1 L43.8,24.3 L61.8,24.3 Z M23.4,24.3 L25.2,26.1 L23.4,27.9 L5.4,27.9 L3.6,26.1 L5.4,24.3 L23.4,24.3 Z M215.4,24.3 L217.2,26.1 L215.4,27.9 L197.4,27.9 L195.6,26.1 L197.4,24.3 L215.4,24.3 Z M232.2,3.6 L234,5.4 L234,23.4 L232.2,25.2 L230.4,23.4 L230.4,5.4 L232.2,3.6 Z M117,3.6 L118.8,5.4 L118.8,23.4 L117,25.2 L115.2,23.4 L115.2,5.4 L117,3.6 Z M142.2,3.6 L144,5.4 L144,23.4 L142.2,25.2 L140.4,23.4 L140.4,5.4 L142.2,3.6 Z M78.6,3.6 L80.4,5.4 L80.4,23.4 L78.6,25.2 L76.8,23.4 L76.8,5.4 L78.6,3.6 Z M103.8,3.6 L105.6,5.4 L105.6,23.4 L103.8,25.2 L102,23.4 L102,5.4 L103.8,3.6 Z M40.2,3.6 L42,5.4 L42,23.4 L40.2,25.2 L38.4,23.4 L38.4,5.4 L40.2,3.6 Z M257.4,3.6 L259.2,5.4 L259.2,23.4 L257.4,25.2 L255.6,23.4 L255.6,5.4 L257.4,3.6 Z M65.4,3.6 L67.2,5.4 L67.2,23.4 L65.4,25.2 L63.6,23.4 L63.6,5.4 L65.4,3.6 Z M193.8,3.6 L195.6,5.4 L195.6,23.4 L193.8,25.2 L192,23.4 L192,5.4 L193.8,3.6 Z M219,3.6 L220.8,5.4 L220.8,23.4 L219,25.2 L217.2,23.4 L217.2,5.4 L219,3.6 Z M1.8,3.6 L3.6,5.4 L3.6,23.4 L1.8,25.2 L-2.84217094e-13,23.4 L-2.84217094e-13,5.4 L1.8,3.6 Z M155.4,3.6 L157.2,5.4 L157.2,23.4 L155.4,25.2 L153.6,23.4 L153.6,5.4 L155.4,3.6 Z M27,3.6 L28.8,5.4 L28.8,23.4 L27,25.2 L25.2,23.4 L25.2,5.4 L27,3.6 Z M180.6,3.6 L182.4,5.4 L182.4,23.4 L180.6,25.2 L178.8,23.4 L178.8,5.4 L180.6,3.6 Z M253.8,1.09079814e-12 L255.6,1.8 L253.8,3.6 L235.8,3.6 L234,1.8 L235.8,1.09190032e-12 L253.8,1.09079814e-12 Z M215.4,1.09079814e-12 L217.2,1.8 L215.4,3.6 L197.4,3.6 L195.6,1.8 L197.4,1.09190032e-12 L215.4,1.09079814e-12 Z M177,1.09079814e-12 L178.8,1.8 L177,3.6 L159,3.6 L157.2,1.8 L159,1.09190032e-12 L177,1.09079814e-12 Z M138.6,1.09079814e-12 L140.4,1.8 L138.6,3.6 L120.6,3.6 L118.8,1.8 L120.6,1.09190032e-12 L138.6,1.09079814e-12 Z M100.2,1.09079814e-12 L102,1.8 L100.2,3.6 L82.2,3.6 L80.4,1.8 L82.2,1.09190032e-12 L100.2,1.09079814e-12 Z M61.8,1.09079814e-12 L63.6,1.8 L61.8,3.6 L43.8,3.6 L42,1.8 L43.8,1.09190032e-12 L61.8,1.09079814e-12 Z M23.4,1.09079814e-12 L25.2,1.8 L23.4,3.6 L5.4,3.6 L3.6,1.8 L5.4,1.09190032e-12 L23.4,1.09079814e-12 Z"></path>
-                </g>
-                <path d="M241.8,69.9 L243.6,71.7 L241.8,73.5 L223.8,73.5 L222,71.7 L223.8,69.9 L241.8,69.9 Z M203.4,69.9 L205.2,71.7 L203.4,73.5 L185.4,73.5 L183.6,71.7 L185.4,69.9 L203.4,69.9 Z M283.8,49.2 L285.6,51 L285.6,69 L283.8,70.8 L282,69 L282,51 L283.8,49.2 Z M245.4,49.2 L247.2,51 L247.2,69 L245.4,70.8 L243.6,69 L243.6,51 L245.4,49.2 Z M207,49.2 L208.8,51 L208.8,69 L207,70.8 L205.2,69 L205.2,51 L207,49.2 Z M168.6,49.2 L170.4,51 L170.4,69 L168.6,70.8 L166.8,69 L166.8,51 L168.6,49.2 Z M241.8,46.5 L243.6,48.3 L241.8,50.1 L223.8,50.1 L222,48.3 L223.8,46.5 L241.8,46.5 Z M203.4,46.5 L205.2,48.3 L203.4,50.1 L185.4,50.1 L183.6,48.3 L185.4,46.5 L203.4,46.5 Z M258.6,25.8 L260.4,27.6 L260.4,45.6 L258.6,47.4 L256.8,45.6 L256.8,27.6 L258.6,25.8 Z M283.8,25.8 L285.6,27.6 L285.6,45.6 L283.8,47.4 L282,45.6 L282,27.6 L283.8,25.8 Z M245.4,25.8 L247.2,27.6 L247.2,45.6 L245.4,47.4 L243.6,45.6 L243.6,27.6 L245.4,25.8 Z M207,25.8 L208.8,27.6 L208.8,45.6 L207,47.4 L205.2,45.6 L205.2,27.6 L207,25.8 Z M168.6,25.8 L170.4,27.6 L170.4,45.6 L168.6,47.4 L166.8,45.6 L166.8,27.6 L168.6,25.8 Z M280.2,22.2 L282,24 L280.2,25.8 L262.2,25.8 L260.4,24 L262.2,22.2 L280.2,22.2 Z M241.8,22.2 L243.6,24 L241.8,25.8 L223.8,25.8 L222,24 L223.8,22.2 L241.8,22.2 Z M203.4,22.2 L205.2,24 L203.4,25.8 L185.4,25.8 L183.6,24 L185.4,22.2 L203.4,22.2 Z" id="1337" fill="#1F1707"></path>
-            </g>
-            <g id="on-off" transform="translate(55.314003, 247.200000)">
-                <circle id="dot-outline" stroke="#FFFFFF" stroke-width="1.2" cx="76.8" cy="50.4" r="4.2"></circle>
-                <circle id="dot" fill="#FFFFFF" cx="76.8" cy="30" r="1.2"></circle>
-                <g id="off">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                    <use fill="#FF8E51" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
-                </g>
-                <circle id="dot-fill" fill="#FFFFFF" cx="9.48599689" cy="50.4" r="4.8"></circle>
-                <circle id="dot" fill="#FFFFFF" cx="9.6" cy="30" r="1.2"></circle>
-                <g id="on">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
-                    <use fill="#245633" fill-rule="evenodd" xlink:href="#path-4"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-4"></use>
-                </g>
-            </g>
-            <g id="add" transform="translate(309.714003, 603.714003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-7"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-7"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.6,1.8 C10.2213203,1.8 10.7323525,2.27219968 10.7938045,2.87730697 L10.8,3 L10.8,8.399 L16.2,8.4 C16.8627417,8.4 17.4,8.9372583 17.4,9.6 C17.4,10.2213203 16.9278003,10.7323525 16.322693,10.7938045 L16.2,10.8 L10.8,10.799 L10.8,16.2 C10.8,16.8627417 10.2627417,17.4 9.6,17.4 C8.97867966,17.4 8.46764746,16.9278003 8.40619546,16.322693 L8.4,16.2 L8.4,10.799 L3,10.8 C2.3372583,10.8 1.8,10.2627417 1.8,9.6 C1.8,8.97867966 2.27219968,8.46764746 2.87730697,8.40619546 L3,8.4 L8.4,8.399 L8.4,3 C8.4,2.3372583 8.9372583,1.8 9.6,1.8 Z" id="add"></path>
-                </g>
-            </g>
-            <g id="equals" transform="translate(242.514003, 603.714003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="#FFD171" fill-rule="evenodd" xlink:href="#path-10"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-10"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#000000">
-                    <path d="M15.9,11.4 C16.5627417,11.4 17.1,11.9372583 17.1,12.6 C17.1,13.2213203 16.6278003,13.7323525 16.022693,13.7938045 L15.9,13.8 L3.3,13.8 C2.6372583,13.8 2.1,13.2627417 2.1,12.6 C2.1,11.9786797 2.57219968,11.4676475 3.17730697,11.4061955 L3.3,11.4 L15.9,11.4 Z M15.9,5.4 C16.5627417,5.4 17.1,5.9372583 17.1,6.6 C17.1,7.22132034 16.6278003,7.73235254 16.022693,7.79380454 L15.9,7.8 L3.3,7.8 C2.6372583,7.8 2.1,7.2627417 2.1,6.6 C2.1,5.97867966 2.57219968,5.46764746 3.17730697,5.40619546 L3.3,5.4 L15.9,5.4 Z" id="equals"></path>
-                </g>
-            </g>
-            <g id="decimal" transform="translate(175.314003, 603.714003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-13"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                </g>
-                <g id="icon">
-                    <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-16"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                </g>
-            </g>
-            <g id="0" transform="translate(108.114003, 603.714003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-18"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.6,0.6 C5.4030503,0.6 3,4.5664365 3,9.6 C3,14.6335635 5.4030503,18.6 9.6,18.6 C13.7969497,18.6 16.2,14.6335635 16.2,9.6 C16.2,4.5664365 13.7969497,0.6 9.6,0.6 Z M9.6,3 C12.1518503,3 13.8,5.72040961 13.8,9.6 C13.8,13.4795904 12.1518503,16.2 9.6,16.2 C7.0481497,16.2 5.4,13.4795904 5.4,9.6 C5.4,5.72040961 7.0481497,3 9.6,3 Z" id="0"></path>
-                </g>
-            </g>
-            <g id="ce" transform="translate(40.914003, 536.514003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-21"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-21"></use>
-                </g>
-                <path d="M20.076,28.9584 C22.6104,28.9584 24.4392,27.648 24.6984,25.0992 L22.4088,25.0992 C22.2216,26.424 21.3288,27.072 20.0472,27.072 C18.348,27.072 17.3688,25.8336 17.3688,23.7024 L17.3688,23.5872 C17.3688,21.456 18.4056,20.1888 20.0328,20.1888 C21.3288,20.1888 22.02,20.8512 22.1928,22.0896 L24.5832,22.0896 C24.3384,19.5552 22.4952,18.3456 20.0184,18.3456 C17.0952,18.3456 14.9064,20.4768 14.9064,23.6016 L14.9064,23.7168 C14.9064,26.8848 16.7064,28.9584 20.076,28.9584 Z M33.1512,28.8 L33.1512,26.9856 L28.5288,26.9856 L28.5288,24.4224 L32.0424,24.4224 L32.0424,22.7232 L28.5288,22.7232 L28.5288,20.3184 L32.9208,20.3184 L32.9208,18.504 L26.2104,18.504 L26.2104,28.8 L33.1512,28.8 Z" id="CE" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="c" transform="translate(40.914003, 603.714003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-25)" xlink:href="#path-24"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-24"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-26)" xlink:href="#path-24"></use>
-                </g>
-                <path d="M24.36,28.9584 C26.8944,28.9584 28.7232,27.648 28.9824,25.0992 L26.6928,25.0992 C26.5056,26.424 25.6128,27.072 24.3312,27.072 C22.632,27.072 21.6528,25.8336 21.6528,23.7024 L21.6528,23.5872 C21.6528,21.456 22.6896,20.1888 24.3168,20.1888 C25.6128,20.1888 26.304,20.8512 26.4768,22.0896 L28.8672,22.0896 C28.6224,19.5552 26.7792,18.3456 24.3024,18.3456 C21.3792,18.3456 19.1904,20.4768 19.1904,23.6016 L19.1904,23.7168 C19.1904,26.8848 20.9904,28.9584 24.36,28.9584 Z" id="C" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="subtract" transform="translate(309.714003, 536.514003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-27"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-27"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-29)" xlink:href="#path-27"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M16.2,8.4 C16.8627417,8.4 17.4,8.9372583 17.4,9.6 C17.4,10.2213203 16.9278003,10.7323525 16.322693,10.7938045 L16.2,10.8 L3,10.8 C2.3372583,10.8 1.8,10.2627417 1.8,9.6 C1.8,8.97867966 2.27219968,8.46764746 2.87730697,8.40619546 L3,8.4 L16.2,8.4 Z" id="subtract"></path>
-                </g>
-            </g>
-            <g id="3" transform="translate(242.514003, 536.514003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-31)" xlink:href="#path-30"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-30"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-32)" xlink:href="#path-30"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M13.1994,1.1988 C14.1296568,1.1988 14.6910002,2.2022219 14.2463857,2.98586331 L14.1826353,3.08673048 L11.027,7.595 L11.0759268,7.6138171 C11.642627,7.84987826 12.1670321,8.18221774 12.6267844,8.59858828 L12.8197976,8.78214184 C13.8244684,9.78839976 14.4006,11.1504612 14.4006,12.6 C14.4006,14.0495388 13.8244684,15.4116002 12.8184582,16.4191976 C11.8122002,17.4238684 10.4501388,18 9.0006,18 C7.54970906,18 6.18723939,17.4236957 5.18207186,16.4185281 C4.71344271,15.949899 4.71344271,15.190101 5.18207186,14.7214719 C5.65070101,14.2528427 6.41049899,14.2528427 6.87912814,14.7214719 C7.43868053,15.2810243 8.19278692,15.6 9.0006,15.6 C9.8073652,15.6 10.5617551,15.2809043 11.1214024,14.7221418 C11.6815043,14.1611551 12.0006,13.4067652 12.0006,12.6 C12.0006,11.7932348 11.6815043,11.0388449 11.1227418,10.4791976 C10.5617551,9.91909566 9.8073652,9.6 9.0006,9.6 C8.07034321,9.6 7.50899979,8.5965781 7.95361428,7.81293669 L8.0173647,7.71206952 L10.895,3.598 L5.9994,3.5988 C5.37807966,3.5988 4.86704746,3.12660032 4.80559546,2.52149303 L4.7994,2.3988 C4.7994,1.77747966 5.27159968,1.26644746 5.87670697,1.20499546 L5.9994,1.1988 L13.1994,1.1988 Z" id="3"></path>
-                </g>
-            </g>
-            <g id="2" transform="translate(175.314003, 536.514003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-34)" xlink:href="#path-33"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-33"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-35)" xlink:href="#path-33"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.59976,1.2 C9.92619706,1.2 10.2490027,1.23280057 10.566893,1.29767676 C10.8762961,1.36114406 11.1775269,1.45500292 11.4650927,1.57642453 C11.7528643,1.69699922 12.0286671,1.8466628 12.2835274,2.01978159 C12.5405382,2.19326386 12.7796801,2.39086849 12.9903513,2.60314656 C13.2088915,2.82007988 13.4064961,3.0592218 13.57802,3.31334036 C13.7530972,3.57109285 13.9027608,3.84689567 14.0220595,4.13163356 C14.1447571,4.42223315 14.2386159,4.72346394 14.3023249,5.03404799 C14.3669594,5.35075732 14.39976,5.67356294 14.39976,6 C14.39976,6.32684055 14.3668756,6.6500703 14.3023249,6.96475201 C14.2389286,7.27539356 14.1450688,7.5770285 14.0233355,7.86533274 C13.9329045,8.08116143 13.8261109,8.29025769 13.6908398,8.50920208 L13.5456274,8.73204328 L8.4,15.598 L13.19976,15.5988 C13.8210803,15.5988 14.3321125,16.0709997 14.3935645,16.676107 L14.39976,16.7988 C14.39976,17.4201203 13.9275603,17.9311525 13.322453,17.9926045 L13.19976,17.9988 L6.092,17.998 L6.02392848,18.0023266 C5.44095184,18.0081465 4.86722524,17.5919253 4.80527715,16.9210072 L4.79976,16.8 C4.79976,16.5088505 4.9025946,16.2429193 5.07378166,16.0354886 L11.5927,7.33814036 C11.6780601,7.21247128 11.7512024,7.07768339 11.8110605,6.93483356 C11.8727324,6.78876863 11.9193348,6.6390036 11.9510368,6.48366703 C11.9833137,6.3263169 11.99976,6.16466189 11.99976,6 C11.99976,5.83524194 11.9832948,5.67320052 11.9510368,5.51513297 C11.9194801,5.36129412 11.872696,5.21114508 11.8097845,5.06213274 C11.7512024,4.92231661 11.6780601,4.78752872 11.5907416,4.65896743 C11.5043829,4.53102863 11.4066293,4.41272677 11.2933066,4.30019128 C11.1870332,4.19313074 11.0687314,4.0953771 10.9379004,4.00706003 C10.8122313,3.9216999 10.6774434,3.84855765 10.5345936,3.78869947 C10.3886149,3.72706405 10.2384659,3.68027993 10.085808,3.64896487 C9.92655948,3.61646517 9.76451806,3.6 9.59976,3.6 C9.43509811,3.6 9.2734431,3.61644629 9.11491201,3.64896487 C8.9607564,3.6804252 8.81099137,3.72702762 8.66189274,3.78997547 C8.52374588,3.84785824 8.38899274,3.92108932 8.25872743,4.00901841 C8.13078863,4.0953771 8.01248677,4.19313074 7.89995128,4.30645344 C7.79289074,4.41272677 7.6951371,4.53102863 7.60682003,4.66185964 C7.52341992,4.78464314 7.44983855,4.92060872 7.38752363,5.06737674 C7.12851493,5.67741039 6.42401691,5.96197233 5.81398326,5.70296363 C5.20394961,5.44395493 4.91938767,4.73945691 5.17839637,4.12942326 C5.30084628,3.8410215 5.44889494,3.56745332 5.61954159,3.31623257 C5.79302386,3.0592218 5.99062849,2.82007988 6.20290656,2.60940872 C6.41983988,2.39086849 6.6589818,2.19326386 6.91599257,2.01978159 C7.17532928,1.84472932 7.44889582,1.69606061 7.73139356,1.57770053 C8.0227315,1.45469117 8.32436644,1.36083136 8.63382703,1.29767676 C8.9496897,1.23288442 9.27291945,1.2 9.59976,1.2 Z" id="2"></path>
-                </g>
-            </g>
-            <g id="1" transform="translate(108.114003, 536.514003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-37)" xlink:href="#path-36"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-36"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-38)" xlink:href="#path-36"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.23308291,1.40159088 C9.99731499,0.89201786 11.0102487,1.39580088 11.093333,2.28225696 L11.0988,2.4 L11.0988,16.7988 C11.0988,17.4615417 10.5615417,17.9988 9.8988,17.9988 C9.27747966,17.9988 8.76644746,17.5266003 8.70499546,16.921493 L8.6988,16.7988 L8.698,4.642 L6.96691709,5.79720912 C6.45227137,6.14036348 5.76893624,6.03348731 5.38118662,5.56939842 L5.30279088,5.46451709 C4.95963652,4.94987137 5.06651269,4.26653624 5.53060158,3.87878662 L5.63548291,3.80039088 L9.23308291,1.40159088 Z" id="1"></path>
-                </g>
-            </g>
-            <g id="percent" transform="translate(40.914003, 469.314003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-40)" xlink:href="#path-39"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-39"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-41)" xlink:href="#path-39"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF">
-                    <path d="M12.70332,12.70308 C13.64052,11.76588 15.15972,11.76588 16.09692,12.70308 C17.03412,13.64028 17.03412,15.15948 16.09692,16.09668 C15.15972,17.03388 13.64052,17.03388 12.70332,16.09668 C11.76612,15.15948 11.76612,13.64028 12.70332,12.70308 Z M14.1516,3.3516 C14.6208,2.8824 15.3792,2.8824 15.8484,3.3516 C16.3176,3.8208 16.3176,4.5792 15.8484,5.0484 L15.8484,5.0484 L5.0484,15.8484 C4.8144,16.0824 4.5072,16.2 4.2,16.2 C3.8928,16.2 3.5856,16.0824 3.3516,15.8484 C2.8824,15.3792 2.8824,14.6208 3.3516,14.1516 L3.3516,14.1516 Z M3.10332,3.10332 C4.04052,2.16612 5.55972,2.16612 6.49692,3.10332 C7.43412,4.04052 7.43412,5.55972 6.49692,6.49692 C5.55972,7.43412 4.04052,7.43412 3.10332,6.49692 C2.16612,5.55972 2.16612,4.04052 3.10332,3.10332 Z" id="percent"></path>
-                </g>
-            </g>
-            <g id="multiply" transform="translate(309.714003, 469.314003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-43)" xlink:href="#path-42"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-42"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-44)" xlink:href="#path-42"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M4.9510926,3.26399442 L5.04852814,3.35147186 L9.6,7.903 L14.1514719,3.35147186 C14.620101,2.88284271 15.379899,2.88284271 15.8485281,3.35147186 C16.2859153,3.78885907 16.3150745,4.47988667 15.9360056,4.9510926 L15.8485281,5.04852814 L11.297,9.6 L15.8485281,14.1514719 C16.3171573,14.620101 16.3171573,15.379899 15.8485281,15.8485281 C15.4111409,16.2859153 14.7201133,16.3150745 14.2489074,15.9360056 L14.1514719,15.8485281 L9.6,11.297 L5.04852814,15.8485281 C4.57989899,16.3171573 3.82010101,16.3171573 3.35147186,15.8485281 C2.91408466,15.4111409 2.88492551,14.7201133 3.26399442,14.2489074 L3.35147186,14.1514719 L7.903,9.6 L3.35147186,5.04852814 C2.88284271,4.57989899 2.88284271,3.82010101 3.35147186,3.35147186 C3.78885907,2.91408466 4.47988667,2.88492551 4.9510926,3.26399442 Z" id="multiply"></path>
-                </g>
-            </g>
-            <g id="6" transform="translate(242.514003, 469.314003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-46)" xlink:href="#path-45"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-45"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-47)" xlink:href="#path-45"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M11.238178,1.36013371 C11.7738842,1.66938121 11.9809402,2.32930332 11.7367779,2.88257812 L11.6775063,2.99933798 L9.24809756,7.20978407 C10.2982969,7.14018395 11.3587115,7.37845015 12.3000144,7.92163932 C13.5567348,8.64684352 14.4488084,9.82786443 14.8152759,11.2001372 C15.183566,12.5732877 15.001742,14.0417096 14.2768007,15.2979744 C13.5519193,16.5541354 12.3715575,17.4461179 10.9979679,17.8145257 C9.62320056,18.1828237 8.15580816,18.0006702 6.90046556,17.2747607 C5.64430465,16.5498793 4.75232208,15.3695175 4.38400406,13.9962628 C4.01586008,12.623657 4.19851793,11.1550717 4.92367932,9.89842556 C4.92387469,9.898087 4.92407009,9.89774847 4.92426552,9.89740997 L9.59897371,1.79946202 C9.93031031,1.22549109 10.6642071,1.02879711 11.238178,1.36013371 Z M10.9070658,9.89782425 C10.2538158,9.58108157 9.51875053,9.51487209 8.82265227,9.70157062 C8.05898215,9.90551027 7.40583106,10.3988622 7.00240068,11.0979744 C6.59842903,11.7980247 6.49730598,12.611063 6.70207594,13.3745372 C6.90717459,14.1392369 7.40093118,14.7926257 8.10094528,15.196577 C8.79983033,15.6007113 9.61114233,15.7014228 10.3765772,15.4963641 C11.1412769,15.2912654 11.7946657,14.7975088 12.1980793,14.0984256 C12.6015875,13.3991786 12.7022378,12.5863204 12.4968694,11.8206123 C12.2929297,11.0569422 11.7995778,10.4037911 11.1004656,10.0003607 L11.1004656,10.0003607 Z" id="6"></path>
-                </g>
-            </g>
-            <g id="5" transform="translate(175.314003, 469.314003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-49)" xlink:href="#path-48"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-48"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-50)" xlink:href="#path-48"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M13.18476,1.1994 C13.8475017,1.1994 14.38476,1.7366583 14.38476,2.3994 C14.38476,3.02072034 13.9125603,3.53175254 13.307453,3.59320454 L13.18476,3.5994 L8.206,3.599 L7.594,7.381 L7.65963416,7.3636844 C8.00179959,7.27726717 8.35467311,7.22397549 8.71406211,7.20611551 L8.98476,7.1994 C10.4342988,7.1994 11.7963602,7.77553165 12.8039576,8.78154184 C13.8086284,9.78779976 14.38476,11.1498612 14.38476,12.5994 C14.38476,14.0489388 13.8086284,15.4110002 12.8026182,16.4185976 C11.7963602,17.4232684 10.4342988,17.9994 8.98476,17.9994 C7.53522117,17.9994 6.17315976,17.4232684 5.16690184,16.4185976 C4.69790296,15.9503385 4.69730328,15.1905407 5.16556241,14.7215418 C5.60260427,14.2838096 6.29360864,14.254105 6.76511361,14.6328019 L6.86261816,14.7202024 C7.42360492,15.2803043 8.1779948,15.5994 8.98476,15.5994 C9.7915252,15.5994 10.5459151,15.2803043 11.1055624,14.7215418 C11.6656643,14.1605551 11.98476,13.4061652 11.98476,12.5994 C11.98476,11.7926348 11.6656643,11.0382449 11.1069018,10.4785976 C10.5459151,9.91849566 9.7915252,9.5994 8.98476,9.5994 C8.24522524,9.5994 7.54970029,9.86752899 7.00681247,10.3436383 L6.86261816,10.4785976 C6.06828989,11.271673 4.74310827,10.6358494 4.8161973,9.55910545 L4.83017052,9.43770295 L6.00017052,2.20770295 C6.08750346,1.66803012 6.52640891,1.26120276 7.06004781,1.205838 L7.18476,1.1994 L13.18476,1.1994 Z" id="5"></path>
-                </g>
-            </g>
-            <g id="4" transform="translate(108.114003, 469.314003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-52)" xlink:href="#path-51"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-51"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-53)" xlink:href="#path-51"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.69938414,0.6684116 C10.2826792,0.874280452 10.6071323,1.48509923 10.4684657,2.07374159 L10.4315884,2.19938414 L7.396,10.799 L11.6990018,10.799673 L11.7,7.1994 C11.7,6.5366583 12.2372583,5.9994 12.9,5.9994 C13.5213203,5.9994 14.0323525,6.47159968 14.0938045,7.07670697 L14.1,7.1994 L14.1,16.7994 C14.1,17.4621417 13.5627417,17.9994 12.9,17.9994 C12.2786797,17.9994 11.7676475,17.5272003 11.7061955,16.922093 L11.7,16.7994 L11.6990018,13.199673 L5.7,13.2 C4.91345234,13.2 4.35139676,12.4611773 4.53341302,11.7179046 L4.5684116,11.6006159 L8.1684116,1.40061586 C8.38898537,0.775656842 9.07442512,0.447837829 9.69938414,0.6684116 Z" id="4"></path>
-                </g>
-            </g>
-            <g id="root" transform="translate(40.914003, 402.114003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-55)" xlink:href="#path-54"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-54"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-56)" xlink:href="#path-54"></use>
-                </g>
-                <path d="M32.4,18.6 C33.0213203,18.6 33.5323525,19.0721997 33.5938045,19.677307 L33.6,19.8 L33.6,21.6 C33.6,22.2627417 33.0627417,22.8 32.4,22.8 C31.7786797,22.8 31.2676475,22.3278003 31.2061955,21.722693 L31.2,21.6 L31.2,20.999 L23.665,20.999 L20.33842,30.9794733 C19.9883286,32.0297475 18.5481647,32.0717584 18.1108675,31.1055062 L18.06158,30.9794733 L14.46158,20.1794733 C14.2520027,19.5507413 14.5917947,18.8711574 15.2205267,18.66158 C15.8073432,18.4659745 16.4384574,18.7489307 16.6903921,19.29871 L16.73842,19.4205267 L19.2,26.804 L21.66158,19.4205267 C21.8113055,18.9713503 22.2091059,18.6561936 22.6722155,18.6067868 L22.8,18.6 L32.4,18.6 Z" id="square-root" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="divide" transform="translate(309.714003, 402.114003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-58)" xlink:href="#path-57"></use>
-                    <use fill="#512A1A" fill-rule="evenodd" xlink:href="#path-57"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-59)" xlink:href="#path-57"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.6,13.2 C10.7592,13.2 11.7,14.1408 11.7,15.3 C11.7,16.4592 10.7592,17.4 9.6,17.4 C8.4408,17.4 7.5,16.4592 7.5,15.3 C7.5,14.1408 8.4408,13.2 9.6,13.2 Z M16.2,8.4 C16.8627417,8.4 17.4,8.9372583 17.4,9.6 C17.4,10.2213203 16.9278003,10.7323525 16.322693,10.7938045 L16.2,10.8 L3,10.8 C2.3372583,10.8 1.8,10.2627417 1.8,9.6 C1.8,8.97867966 2.27219968,8.46764746 2.87730697,8.40619546 L3,8.4 L16.2,8.4 Z M9.6,1.8 C10.7592,1.8 11.7,2.7408 11.7,3.9 C11.7,5.0592 10.7592,6 9.6,6 C8.4408,6 7.5,5.0592 7.5,3.9 C7.5,2.7408 8.4408,1.8 9.6,1.8 Z" id="divide"></path>
-                </g>
-            </g>
-            <g id="9" transform="translate(242.514003, 402.114003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-61)" xlink:href="#path-60"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-60"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-62)" xlink:href="#path-60"></use>
-                </g>
-                <path d="M22.6032815,15.7839403 C23.9774004,15.4174028 25.443864,15.599441 26.6995344,16.3240393 C27.9556954,17.0489207 28.8476779,18.2292825 29.2159959,19.6025372 C29.5841399,20.975143 29.4014821,22.4437283 28.6763207,23.7003744 L28.6795388,23.6920355 L28.6762648,23.7004713 L24.0010648,31.8004713 C23.669765,32.3744635 22.9358809,32.5712045 22.3618887,32.2399048 C21.8261627,31.9306916 21.6190643,31.2707828 21.8631911,30.7174924 L21.9224552,30.6007287 L24.3524801,26.3901694 C23.3016308,26.4598935 22.2408529,26.221223 21.2999856,25.6771607 C20.0432652,24.9519565 19.1511916,23.7709356 18.7847241,22.3986628 C18.416434,21.0255123 18.598258,19.5570904 19.3231993,18.3008256 C20.0480807,17.0446646 21.2284425,16.1526821 22.6032815,15.7839403 Z M25.3065769,18.300205 C24.6533565,17.9833836 23.9188932,17.9169247 23.2234228,18.1024359 C22.4587231,18.3075346 21.8053343,18.8012912 21.4019207,19.5003744 C20.9984125,20.1996214 20.8977622,21.0124796 21.1031306,21.7781877 C21.3070703,22.5418578 21.8004222,23.1950089 22.5004653,23.598977 C23.1991704,24.0030072 24.0115462,24.1038228 24.7760972,23.8987641 C25.5407969,23.6936654 26.1941857,23.1999088 26.5975993,22.5008256 C27.001571,21.8007753 27.102694,20.987737 26.8979241,20.2242628 C26.6928254,19.4595631 26.1990688,18.8061743 25.4999856,18.4027607 L25.4999856,18.4027607 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="8" transform="translate(175.314003, 402.114003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-64)" xlink:href="#path-63"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-63"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-65)" xlink:href="#path-63"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M9.59988,0.6 C10.9307684,0.6 12.1837529,1.09756316 13.1141188,1.97282101 C14.0605282,2.86152247 14.60748,4.07555109 14.60748,5.3748 C14.60748,6.67419558 14.0603711,7.88942501 13.1141188,8.77797899 C13.0884369,8.80209489 13.0625108,8.82592373 13.0363454,8.84946301 C13.2348943,8.9890365 13.4243342,9.14481958 13.603387,9.31279693 C14.6784254,10.32124 15.3,11.7011521 15.3,13.1748 C15.3,14.6489014 14.6790803,16.0273595 13.6034294,17.0379632 C12.5422009,18.0335488 11.1155388,18.6 9.6,18.6 C8.0844612,18.6 6.65779912,18.0335488 5.59592715,17.0373592 C4.52091971,16.0273595 3.9,14.6489014 3.9,13.1748 C3.9,11.7011521 4.52157463,10.32124 5.59657058,9.31283677 C5.77563052,9.1448527 5.96507636,8.98906404 6.16358029,8.84613568 L6.08564119,8.77797899 C5.1393889,7.88942501 4.59228,6.67419558 4.59228,5.3748 C4.59228,4.07555109 5.13923184,2.86152247 6.0855919,1.9728673 C7.01781081,1.09739215 8.27036467,0.6 9.59988,0.6 Z M9.6,10.1496 C8.69641381,10.1496 7.8564233,10.4835834 7.23858695,11.0632031 C6.63830168,11.6263025 6.3,12.3773412 6.3,13.1748 C6.3,13.9730053 6.63796404,14.7232944 7.23862942,15.2876368 C7.85571829,15.8665552 8.69553123,16.2 9.6,16.2 C10.5044688,16.2 11.3442817,15.8665552 11.9607272,15.2882408 C12.562036,14.7232944 12.9,13.9730053 12.9,13.1748 C12.9,12.3773412 12.5616983,11.6263025 11.9613706,11.0631632 C11.3435767,10.4835834 10.5035862,10.1496 9.6,10.1496 Z M9.59988,3 C8.88168488,3 8.21641604,3.26417986 7.72851881,3.72237899 C7.25612819,4.1659653 6.99228,4.75160966 6.99228,5.3748 C6.99228,5.99838012 7.25643958,6.5851271 7.72775871,7.02770787 C8.21609086,7.48546619 8.88179574,7.7496 9.59988,7.7496 C10.3189914,7.7496 10.9843871,7.48558885 11.4712412,7.02842101 C11.9433204,6.5851271 12.20748,5.99838012 12.20748,5.3748 C12.20748,4.75160966 11.9436318,4.1659653 11.4704324,3.72161878 C10.9840609,3.26405673 10.3191021,3 9.59988,3 Z" id="8"></path>
-                </g>
-            </g>
-            <g id="7" transform="translate(108.114003, 402.114003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-67)" xlink:href="#path-66"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-66"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-68)" xlink:href="#path-66"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF" fill-rule="nonzero">
-                    <path d="M13.2,1.7994 C13.9781158,1.7994 14.5389943,2.52359847 14.3710661,3.26223071 L14.33842,3.37887332 L9.53841996,17.7788733 C9.32884263,18.4076053 8.64925866,18.7473973 8.02052668,18.53782 C7.43371016,18.3422145 7.09859249,17.7371809 7.22691234,17.1461968 L7.26158004,17.0199267 L11.534,4.199 L6,4.1994 C5.37867966,4.1994 4.86764746,3.72720032 4.80619546,3.12209303 L4.8,2.9994 C4.8,2.37807966 5.27219968,1.86704746 5.87730697,1.80559546 L6,1.7994 L13.2,1.7994 Z" id="7"></path>
-                </g>
-            </g>
-            <g id="+-/-–" transform="translate(309.714003, 334.914003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-70)" xlink:href="#path-69"></use>
-                    <use fill="#245633" fill-rule="evenodd" xlink:href="#path-69"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-71)" xlink:href="#path-69"></use>
-                </g>
-                <g id="icon" transform="translate(14.400000, 14.400000)" fill="#FFFFFF">
-                    <path d="M18,13.8 C18.6624,13.8 19.2,14.3376 19.2,15 C19.2,15.6624 18.6624,16.2 18,16.2 L18,16.2 L12,16.2 C11.3376,16.2 10.8,15.6624 10.8,15 C10.8,14.3376 11.3376,13.8 12,13.8 L12,13.8 Z M14.1516,3.3516 C14.6208,2.8824 15.3792,2.8824 15.8484,3.3516 C16.3176,3.8208 16.3176,4.5792 15.8484,5.0484 L15.8484,5.0484 L5.0484,15.8484 C4.8144,16.0824 4.5072,16.2 4.2,16.2 C3.8928,16.2 3.5856,16.0824 3.3516,15.8484 C2.8824,15.3792 2.8824,14.6208 3.3516,14.1516 L3.3516,14.1516 Z M4.2,4.36894965e-12 C4.8624,4.36894965e-12 5.4,0.5376 5.4,1.2 L5.4,1.2 L5.4,3 L7.2,3 C7.8624,3 8.4,3.5376 8.4,4.2 C8.4,4.8624 7.8624,5.4 7.2,5.4 L7.2,5.4 L5.4,5.4 L5.4,7.2 C5.4,7.8624 4.8624,8.4 4.2,8.4 C3.5376,8.4 3,7.8624 3,7.2 L3,7.2 L3,5.4 L1.2,5.4 C0.5376,5.4 -1.09690035e-12,4.8624 -1.09690035e-12,4.2 C-1.09690035e-12,3.5376 0.5376,3 1.2,3 L1.2,3 L3,3 L3,1.2 C3,0.5376 3.5376,4.36894965e-12 4.2,4.36894965e-12 Z" id="Combined-Shape"></path>
-                </g>
-            </g>
-            <g id="mc" transform="translate(242.514003, 334.914003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-73)" xlink:href="#path-72"></use>
-                    <use fill="#245633" fill-rule="evenodd" xlink:href="#path-72"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-74)" xlink:href="#path-72"></use>
-                </g>
-                <path d="M15.252,28.8 L15.252,21.5712 L18.1176,28.8 L18.8808,28.8 L21.732,21.5712 L21.732,28.8 L24.0504,28.8 L24.0504,18.504 L21.0264,18.504 L18.6504,24.912 L16.2456,18.504 L13.164,18.504 L13.164,28.8 L15.252,28.8 Z M30.9192,28.9584 C33.4536,28.9584 35.2824,27.648 35.5416,25.0992 L33.252,25.0992 C33.0648,26.424 32.172,27.072 30.8904,27.072 C29.1912,27.072 28.212,25.8336 28.212,23.7024 L28.212,23.5872 C28.212,21.456 29.2488,20.1888 30.876,20.1888 C32.172,20.1888 32.8632,20.8512 33.036,22.0896 L35.4264,22.0896 C35.1816,19.5552 33.3384,18.3456 30.8616,18.3456 C27.9384,18.3456 25.7496,20.4768 25.7496,23.6016 L25.7496,23.7168 C25.7496,26.8848 27.5496,28.9584 30.9192,28.9584 Z" id="MC" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="mr" transform="translate(175.314003, 334.914003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-76)" xlink:href="#path-75"></use>
-                    <use fill="#245633" fill-rule="evenodd" xlink:href="#path-75"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-77)" xlink:href="#path-75"></use>
-                </g>
-                <path d="M15.7992,28.8 L15.7992,21.5712 L18.6648,28.8 L19.428,28.8 L22.2792,21.5712 L22.2792,28.8 L24.5976,28.8 L24.5976,18.504 L21.5736,18.504 L19.1976,24.912 L16.7928,18.504 L13.7112,18.504 L13.7112,28.8 L15.7992,28.8 Z M29.148,28.8 L29.148,24.8256 L30.156,24.8256 L32.6184,28.8 L35.0952,28.8 L32.3736,24.4224 C33.5832,24.0624 34.4904,23.2416 34.4904,21.6864 L34.4904,21.6288 C34.4904,19.4976 32.9496,18.504 30.516,18.504 L26.8296,18.504 L26.8296,28.8 L29.148,28.8 Z M30.4584,23.2416 L29.148,23.2416 L29.148,20.2896 L30.4584,20.2896 C31.5816,20.2896 32.2152,20.6496 32.2152,21.7008 L32.2152,21.7584 C32.2152,22.752 31.6248,23.2416 30.4584,23.2416 Z" id="MR" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="m-" transform="translate(108.114003, 334.914003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-79)" xlink:href="#path-78"></use>
-                    <use fill="#245633" fill-rule="evenodd" xlink:href="#path-78"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-80)" xlink:href="#path-78"></use>
-                </g>
-                <path d="M16.7856,28.8 L16.7856,21.5712 L19.6512,28.8 L20.4144,28.8 L23.2656,21.5712 L23.2656,28.8 L25.584,28.8 L25.584,18.504 L22.56,18.504 L20.184,24.912 L17.7792,18.504 L14.6976,18.504 L14.6976,28.8 L16.7856,28.8 Z M33.7632,25.344 L33.7632,24.0192 L27.3552,24.0192 L27.3552,25.344 L33.7632,25.344 Z" id="M–" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <g id="m+" transform="translate(40.914003, 334.914003)">
-                <g id="button">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-82)" xlink:href="#path-81"></use>
-                    <use fill="#245633" fill-rule="evenodd" xlink:href="#path-81"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-83)" xlink:href="#path-81"></use>
-                </g>
-                <path d="M16.6704,28.8 L16.6704,21.5712 L19.536,28.8 L20.2992,28.8 L23.1504,21.5712 L23.1504,28.8 L25.4688,28.8 L25.4688,18.504 L22.4448,18.504 L20.0688,24.912 L17.664,18.504 L14.5824,18.504 L14.5824,28.8 L16.6704,28.8 Z M31.416,27.4896 L31.416,24.6816 L34.008,24.6816 L34.008,23.112 L31.416,23.112 L31.416,20.304 L29.7168,20.304 L29.7168,23.112 L27.1248,23.112 L27.1248,24.6816 L29.7168,24.6816 L29.7168,27.4896 L31.416,27.4896 Z" id="M+" fill="#FFFFFF" fill-rule="nonzero"></path>
-            </g>
-            <path d="M275.8272,261.6 L275.8272,257.856 L277.1376,257.856 C279.4848,257.856 280.9968,256.8192 280.9968,254.6448 L280.9968,254.5872 C280.9968,252.4128 279.5712,251.304 277.0656,251.304 L273.5088,251.304 L273.5088,261.6 L275.8272,261.6 Z M277.008,256.2288 L275.8272,256.2288 L275.8272,253.0752 L277.008,253.0752 C278.1168,253.0752 278.7504,253.5072 278.7504,254.6016 L278.7504,254.6592 C278.7504,255.6816 278.1456,256.2288 277.008,256.2288 Z M284.856,261.6 L284.856,257.352 L288.9888,257.352 L288.9888,261.6 L291.3216,261.6 L291.3216,251.304 L288.9888,251.304 L288.9888,255.5088 L284.856,255.5088 L284.856,251.304 L282.5232,251.304 L282.5232,261.6 L284.856,261.6 Z M298.2768,261.7584 C301.488,261.7584 303.5904,259.5264 303.5904,256.4592 L303.5904,256.344 C303.5904,253.248 301.3872,251.16 298.2912,251.16 C295.2384,251.16 292.992,253.3344 292.992,256.4016 L292.992,256.5168 C292.992,259.5264 295.0512,261.7584 298.2768,261.7584 Z M298.32,259.9008 C296.6352,259.9008 295.4256,258.6048 295.4256,256.5024 L295.4256,256.3872 C295.4256,254.3136 296.5056,253.0032 298.2912,253.0032 C300.0912,253.0032 301.1568,254.3712 301.1568,256.3728 L301.1568,256.488 C301.1568,258.5616 300.0624,259.9008 298.32,259.9008 Z M308.8752,261.7584 C311.3088,261.7584 312.8064,260.304 312.8064,258.4752 C312.8064,256.344 311.5248,255.6672 309.0336,255.3504 C307.4496,255.12 307.1184,254.7744 307.1184,254.04 C307.1184,253.3488 307.6368,252.8736 308.6592,252.8736 C309.6816,252.8736 310.2288,253.3056 310.3728,254.2416 L312.5184,254.2416 C312.3312,252.1968 310.9776,251.16 308.6592,251.16 C306.384,251.16 304.9152,252.4704 304.9152,254.2272 C304.9152,256.2144 305.9952,257.0064 308.6304,257.352 C310.1424,257.5824 310.5744,257.8704 310.5744,258.6912 C310.5744,259.4976 309.8976,260.0592 308.8752,260.0592 C307.3488,260.0592 306.96,259.296 306.8592,258.3744 L304.6272,258.3744 C304.7568,260.4336 306.0528,261.7584 308.8752,261.7584 Z M316.8096,261.6 L316.8096,257.856 L318.12,257.856 C320.4672,257.856 321.9792,256.8192 321.9792,254.6448 L321.9792,254.5872 C321.9792,252.4128 320.5536,251.304 318.048,251.304 L314.4912,251.304 L314.4912,261.6 L316.8096,261.6 Z M317.9904,256.2288 L316.8096,256.2288 L316.8096,253.0752 L317.9904,253.0752 C319.0992,253.0752 319.7328,253.5072 319.7328,254.6016 L319.7328,254.6592 C319.7328,255.6816 319.128,256.2288 317.9904,256.2288 Z M325.8384,261.6 L325.8384,257.352 L329.9712,257.352 L329.9712,261.6 L332.304,261.6 L332.304,251.304 L329.9712,251.304 L329.9712,255.5088 L325.8384,255.5088 L325.8384,251.304 L323.5056,251.304 L323.5056,261.6 L325.8384,261.6 Z M339.2592,261.7584 C342.4704,261.7584 344.5728,259.5264 344.5728,256.4592 L344.5728,256.344 C344.5728,253.248 342.3696,251.16 339.2736,251.16 C336.2208,251.16 333.9744,253.3344 333.9744,256.4016 L333.9744,256.5168 C333.9744,259.5264 336.0336,261.7584 339.2592,261.7584 Z M339.3024,259.9008 C337.6176,259.9008 336.408,258.6048 336.408,256.5024 L336.408,256.3872 C336.408,254.3136 337.488,253.0032 339.2736,253.0032 C341.0736,253.0032 342.1392,254.3712 342.1392,256.3728 L342.1392,256.488 C342.1392,258.5616 341.0448,259.9008 339.3024,259.9008 Z M348.576,261.6 L348.576,257.6256 L349.584,257.6256 L352.0464,261.6 L354.5232,261.6 L351.8016,257.2224 C353.0112,256.8624 353.9184,256.0416 353.9184,254.4864 L353.9184,254.4288 C353.9184,252.2976 352.3776,251.304 349.944,251.304 L346.2576,251.304 L346.2576,261.6 L348.576,261.6 Z M349.8864,256.0416 L348.576,256.0416 L348.576,253.0896 L349.8864,253.0896 C351.0096,253.0896 351.6432,253.4496 351.6432,254.5008 L351.6432,254.5584 C351.6432,255.552 351.0528,256.0416 349.8864,256.0416 Z" id="PHOSPHOR" fill="#FFFFFF" fill-rule="nonzero" opacity="0.200000003"></path>
-        </g>
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#35313D" d="M25.2,6 L385.2,6 C395.803867,6 404.4,14.5961328 404.4,25.2 L404.4,654 C404.4,687.137085 377.537085,714 344.4,714 L66,714 C32.862915,714 6,687.137085 6,654 L6,25.2 C6,14.5961328 14.5961328,6 25.2,6 Z" opacity=".1"/>
+    <path fill="#1F1F1F" d="M19.2,0 L379.2,0 C389.803867,-1.9478988e-15 398.4,8.5961328 398.4,19.2 L398.4,648 C398.4,681.137085 371.537085,708 338.4,708 L60,708 C26.862915,708 -1.66472134e-13,681.137085 -1.70530257e-13,648 L-1.70530257e-13,19.2 C-1.75381569e-13,8.5961328 8.5961328,-8.71024223e-15 19.2,0 Z"/>
+    <g transform="translate(43.2 100.8)">
+      <rect width="312" height="96" fill="#5893BB" opacity=".4"/>
+      <polygon fill="#000" points="0 0 9.6 9.6 9.6 86.4 0 96" opacity=".2"/>
+      <polygon fill="#FFF" points="302.4 0 312 9.6 312 86.4 302.4 96" opacity=".2" transform="matrix(-1 0 0 1 614.4 0)"/>
+      <polygon fill="#000" points="0 0 312 0 302.4 9.6 9.6 9.6" opacity=".2"/>
+      <polygon fill="#FFF" points="0 86.4 312 86.4 302.4 96 9.6 96" opacity=".2" transform="matrix(1 0 0 -1 0 182.4)"/>
+      <path fill="#1F1707" d="M253.8,47.7 L255.6,49.5 L253.8,51.3 L235.8,51.3 L234,49.5 L235.8,47.7 L253.8,47.7 Z M215.4,47.7 L217.2,49.5 L215.4,51.3 L197.4,51.3 L195.6,49.5 L197.4,47.7 L215.4,47.7 Z M177,47.7 L178.8,49.5 L177,51.3 L159,51.3 L157.2,49.5 L159,47.7 L177,47.7 Z M138.6,47.7 L140.4,49.5 L138.6,51.3 L120.6,51.3 L118.8,49.5 L120.6,47.7 L138.6,47.7 Z M100.2,47.7 L102,49.5 L100.2,51.3 L82.2,51.3 L80.4,49.5 L82.2,47.7 L100.2,47.7 Z M61.8,47.7 L63.6,49.5 L61.8,51.3 L43.8,51.3 L42,49.5 L43.8,47.7 L61.8,47.7 Z M23.4,47.7 L25.2,49.5 L23.4,51.3 L5.4,51.3 L3.6,49.5 L5.4,47.7 L23.4,47.7 Z M219,27 L220.8,28.8 L220.8,46.8 L219,48.6 L217.2,46.8 L217.2,28.8 L219,27 Z M155.4,27 L157.2,28.8 L157.2,46.8 L155.4,48.6 L153.6,46.8 L153.6,28.8 L155.4,27 Z M180.6,27 L182.4,28.8 L182.4,46.8 L180.6,48.6 L178.8,46.8 L178.8,28.8 L180.6,27 Z M117,27 L118.8,28.8 L118.8,46.8 L117,48.6 L115.2,46.8 L115.2,28.8 L117,27 Z M142.2,27 L144,28.8 L144,46.8 L142.2,48.6 L140.4,46.8 L140.4,28.8 L142.2,27 Z M78.6,27 L80.4,28.8 L80.4,46.8 L78.6,48.6 L76.8,46.8 L76.8,28.8 L78.6,27 Z M103.8,27 L105.6,28.8 L105.6,46.8 L103.8,48.6 L102,46.8 L102,28.8 L103.8,27 Z M232.2,27 L234,28.8 L234,46.8 L232.2,48.6 L230.4,46.8 L230.4,28.8 L232.2,27 Z M40.2,27 L42,28.8 L42,46.8 L40.2,48.6 L38.4,46.8 L38.4,28.8 L40.2,27 Z M65.4,27 L67.2,28.8 L67.2,46.8 L65.4,48.6 L63.6,46.8 L63.6,28.8 L65.4,27 Z M257.4,27 L259.2,28.8 L259.2,46.8 L257.4,48.6 L255.6,46.8 L255.6,28.8 L257.4,27 Z M1.8,27 L3.6,28.8 L3.6,46.8 L1.8,48.6 L-2.84217094e-13,46.8 L-2.84217094e-13,28.8 L1.8,27 Z M27,27 L28.8,28.8 L28.8,46.8 L27,48.6 L25.2,46.8 L25.2,28.8 L27,27 Z M193.8,27 L195.6,28.8 L195.6,46.8 L193.8,48.6 L192,46.8 L192,28.8 L193.8,27 Z M138.6,24.3 L140.4,26.1 L138.6,27.9 L120.6,27.9 L118.8,26.1 L120.6,24.3 L138.6,24.3 Z M253.8,24.3 L255.6,26.1 L253.8,27.9 L235.8,27.9 L234,26.1 L235.8,24.3 L253.8,24.3 Z M177,24.3 L178.8,26.1 L177,27.9 L159,27.9 L157.2,26.1 L159,24.3 L177,24.3 Z M100.2,24.3 L102,26.1 L100.2,27.9 L82.2,27.9 L80.4,26.1 L82.2,24.3 L100.2,24.3 Z M61.8,24.3 L63.6,26.1 L61.8,27.9 L43.8,27.9 L42,26.1 L43.8,24.3 L61.8,24.3 Z M23.4,24.3 L25.2,26.1 L23.4,27.9 L5.4,27.9 L3.6,26.1 L5.4,24.3 L23.4,24.3 Z M215.4,24.3 L217.2,26.1 L215.4,27.9 L197.4,27.9 L195.6,26.1 L197.4,24.3 L215.4,24.3 Z M232.2,3.6 L234,5.4 L234,23.4 L232.2,25.2 L230.4,23.4 L230.4,5.4 L232.2,3.6 Z M117,3.6 L118.8,5.4 L118.8,23.4 L117,25.2 L115.2,23.4 L115.2,5.4 L117,3.6 Z M142.2,3.6 L144,5.4 L144,23.4 L142.2,25.2 L140.4,23.4 L140.4,5.4 L142.2,3.6 Z M78.6,3.6 L80.4,5.4 L80.4,23.4 L78.6,25.2 L76.8,23.4 L76.8,5.4 L78.6,3.6 Z M103.8,3.6 L105.6,5.4 L105.6,23.4 L103.8,25.2 L102,23.4 L102,5.4 L103.8,3.6 Z M40.2,3.6 L42,5.4 L42,23.4 L40.2,25.2 L38.4,23.4 L38.4,5.4 L40.2,3.6 Z M257.4,3.6 L259.2,5.4 L259.2,23.4 L257.4,25.2 L255.6,23.4 L255.6,5.4 L257.4,3.6 Z M65.4,3.6 L67.2,5.4 L67.2,23.4 L65.4,25.2 L63.6,23.4 L63.6,5.4 L65.4,3.6 Z M193.8,3.6 L195.6,5.4 L195.6,23.4 L193.8,25.2 L192,23.4 L192,5.4 L193.8,3.6 Z M219,3.6 L220.8,5.4 L220.8,23.4 L219,25.2 L217.2,23.4 L217.2,5.4 L219,3.6 Z M1.8,3.6 L3.6,5.4 L3.6,23.4 L1.8,25.2 L-2.84217094e-13,23.4 L-2.84217094e-13,5.4 L1.8,3.6 Z M155.4,3.6 L157.2,5.4 L157.2,23.4 L155.4,25.2 L153.6,23.4 L153.6,5.4 L155.4,3.6 Z M27,3.6 L28.8,5.4 L28.8,23.4 L27,25.2 L25.2,23.4 L25.2,5.4 L27,3.6 Z M180.6,3.6 L182.4,5.4 L182.4,23.4 L180.6,25.2 L178.8,23.4 L178.8,5.4 L180.6,3.6 Z M253.8,1.09079814e-12 L255.6,1.8 L253.8,3.6 L235.8,3.6 L234,1.8 L235.8,1.09190032e-12 L253.8,1.09079814e-12 Z M215.4,1.09079814e-12 L217.2,1.8 L215.4,3.6 L197.4,3.6 L195.6,1.8 L197.4,1.09190032e-12 L215.4,1.09079814e-12 Z M177,1.09079814e-12 L178.8,1.8 L177,3.6 L159,3.6 L157.2,1.8 L159,1.09190032e-12 L177,1.09079814e-12 Z M138.6,1.09079814e-12 L140.4,1.8 L138.6,3.6 L120.6,3.6 L118.8,1.8 L120.6,1.09190032e-12 L138.6,1.09079814e-12 Z M100.2,1.09079814e-12 L102,1.8 L100.2,3.6 L82.2,3.6 L80.4,1.8 L82.2,1.09190032e-12 L100.2,1.09079814e-12 Z M61.8,1.09079814e-12 L63.6,1.8 L61.8,3.6 L43.8,3.6 L42,1.8 L43.8,1.09190032e-12 L61.8,1.09079814e-12 Z M23.4,1.09079814e-12 L25.2,1.8 L23.4,3.6 L5.4,3.6 L3.6,1.8 L5.4,1.09190032e-12 L23.4,1.09079814e-12 Z" opacity=".2" transform="translate(26.4 22.2)"/>
+      <path fill="#1F1707" d="M241.8,69.9 L243.6,71.7 L241.8,73.5 L223.8,73.5 L222,71.7 L223.8,69.9 L241.8,69.9 Z M203.4,69.9 L205.2,71.7 L203.4,73.5 L185.4,73.5 L183.6,71.7 L185.4,69.9 L203.4,69.9 Z M283.8,49.2 L285.6,51 L285.6,69 L283.8,70.8 L282,69 L282,51 L283.8,49.2 Z M245.4,49.2 L247.2,51 L247.2,69 L245.4,70.8 L243.6,69 L243.6,51 L245.4,49.2 Z M207,49.2 L208.8,51 L208.8,69 L207,70.8 L205.2,69 L205.2,51 L207,49.2 Z M168.6,49.2 L170.4,51 L170.4,69 L168.6,70.8 L166.8,69 L166.8,51 L168.6,49.2 Z M241.8,46.5 L243.6,48.3 L241.8,50.1 L223.8,50.1 L222,48.3 L223.8,46.5 L241.8,46.5 Z M203.4,46.5 L205.2,48.3 L203.4,50.1 L185.4,50.1 L183.6,48.3 L185.4,46.5 L203.4,46.5 Z M258.6,25.8 L260.4,27.6 L260.4,45.6 L258.6,47.4 L256.8,45.6 L256.8,27.6 L258.6,25.8 Z M283.8,25.8 L285.6,27.6 L285.6,45.6 L283.8,47.4 L282,45.6 L282,27.6 L283.8,25.8 Z M245.4,25.8 L247.2,27.6 L247.2,45.6 L245.4,47.4 L243.6,45.6 L243.6,27.6 L245.4,25.8 Z M207,25.8 L208.8,27.6 L208.8,45.6 L207,47.4 L205.2,45.6 L205.2,27.6 L207,25.8 Z M168.6,25.8 L170.4,27.6 L170.4,45.6 L168.6,47.4 L166.8,45.6 L166.8,27.6 L168.6,25.8 Z M280.2,22.2 L282,24 L280.2,25.8 L262.2,25.8 L260.4,24 L262.2,22.2 L280.2,22.2 Z M241.8,22.2 L243.6,24 L241.8,25.8 L223.8,25.8 L222,24 L223.8,22.2 L241.8,22.2 Z M203.4,22.2 L205.2,24 L203.4,25.8 L185.4,25.8 L183.6,24 L185.4,22.2 L203.4,22.2 Z"/>
+    </g>
+    <g transform="translate(55.314 247.2)">
+      <circle cx="76.8" cy="50.4" r="4.2" stroke="#FFF" stroke-width="1.2"/>
+      <circle cx="76.8" cy="30" r="1.2" fill="#FFF"/>
+      <use fill="#000" filter="url(#calculator-a)" xlink:href="#calculator-b"/>
+      <use fill="#FF8E51" xlink:href="#calculator-b"/>
+      <use fill="#000" filter="url(#calculator-c)" xlink:href="#calculator-b"/>
+      <circle cx="9.486" cy="50.4" r="4.8" fill="#FFF"/>
+      <circle cx="9.6" cy="30" r="1.2" fill="#FFF"/>
+      <use fill="#000" filter="url(#calculator-d)" xlink:href="#calculator-e"/>
+      <use fill="#245633" xlink:href="#calculator-e"/>
+      <use fill="#000" filter="url(#calculator-f)" xlink:href="#calculator-e"/>
+    </g>
+    <g transform="translate(309.714 603.714)">
+      <use fill="#000" filter="url(#calculator-g)" xlink:href="#calculator-h"/>
+      <use fill="#512A1A" xlink:href="#calculator-h"/>
+      <use fill="#000" filter="url(#calculator-i)" xlink:href="#calculator-h"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M10.0109375,2.1875 C10.4917211,2.1875 10.8879755,2.54941268 10.9421303,3.01566769 L10.9484375,3.125 L10.9475,9.0725 L16.875,9.0734375 C17.392767,9.0734375 17.8125,9.49317055 17.8125,10.0109375 C17.8125,10.4917211 17.4505873,10.8879755 16.9843323,10.9421303 L16.875,10.9484375 L10.9475,10.9475 L10.9484375,16.875 C10.9484375,17.392767 10.5287045,17.8125 10.0109375,17.8125 C9.5301539,17.8125 9.13389954,17.4505873 9.07974475,16.9843323 L9.0734375,16.875 L9.0725,10.9475 L3.125,10.9484375 C2.60723305,10.9484375 2.1875,10.5287045 2.1875,10.0109375 C2.1875,9.5301539 2.54941268,9.13389954 3.01566769,9.07974475 L3.125,9.0734375 L9.0725,9.0725 L9.0734375,3.125 C9.0734375,2.60723305 9.49317055,2.1875 10.0109375,2.1875 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(242.514 603.714)">
+      <use fill="#000" filter="url(#calculator-j)" xlink:href="#calculator-k"/>
+      <use fill="#FFD171" xlink:href="#calculator-k"/>
+      <use fill="#000" filter="url(#calculator-l)" xlink:href="#calculator-k"/>
+      <path fill="#000" fill-rule="nonzero" d="M16.875 11.5734375C17.392767 11.5734375 17.8125 11.9931705 17.8125 12.5109375 17.8125 12.9917211 17.4505873 13.3879755 16.9843323 13.4421303L16.875 13.4484375 3.125 13.4484375C2.60723305 13.4484375 2.1875 13.0287045 2.1875 12.5109375 2.1875 12.0301539 2.54941268 11.6338995 3.01566769 11.5797447L3.125 11.5734375 16.875 11.5734375zM16.875 6.5734375C17.392767 6.5734375 17.8125 6.99317055 17.8125 7.5109375 17.8125 7.9917211 17.4505873 8.38797546 16.9843323 8.44213025L16.875 8.4484375 3.125 8.4484375C2.60723305 8.4484375 2.1875 8.02870445 2.1875 7.5109375 2.1875 7.0301539 2.54941268 6.63389954 3.01566769 6.57974475L3.125 6.5734375 16.875 6.5734375z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(175.314 603.714)">
+      <use fill="#000" filter="url(#calculator-m)" xlink:href="#calculator-n"/>
+      <use fill="#512A1A" xlink:href="#calculator-n"/>
+      <use fill="#000" filter="url(#calculator-o)" xlink:href="#calculator-n"/>
+      <use fill="#FFF" xlink:href="#calculator-p"/>
+      <use fill="#000" filter="url(#calculator-q)" xlink:href="#calculator-p"/>
+    </g>
+    <g transform="translate(108.114 603.714)">
+      <use fill="#000" filter="url(#calculator-r)" xlink:href="#calculator-s"/>
+      <use fill="#000" xlink:href="#calculator-s"/>
+      <use fill="#000" filter="url(#calculator-t)" xlink:href="#calculator-s"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M6,-0.0625 C1.84224383,-0.0625 -0.5625,3.90662115 -0.5625,9 C-0.5625,14.0930871 1.8423281,18.0625 6,18.0625 C10.1576719,18.0625 12.5625,14.0930871 12.5625,9 C12.5625,3.90662115 10.1577562,-0.0625 6,-0.0625 Z M6,1.8125 C8.87253733,1.8125 10.6875,4.80816491 10.6875,9 C10.6875,13.1915465 8.87243227,16.1875 6,16.1875 C3.12756773,16.1875 1.3125,13.1915465 1.3125,9 C1.3125,4.80816491 3.12746267,1.8125 6,1.8125 Z" transform="translate(18.4 15.4)"/>
+    </g>
+    <g transform="translate(40.914 536.514)">
+      <use fill="#000" filter="url(#calculator-u)" xlink:href="#calculator-v"/>
+      <use fill="#512A1A" xlink:href="#calculator-v"/>
+      <use fill="#000" filter="url(#calculator-w)" xlink:href="#calculator-v"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M20.148,28.644 C22.596,28.644 24.3528,27.3912 24.6552,24.9144 L22.7832,24.9144 C22.5816,26.3688 21.5736,27.0888 20.148,27.0888 C18.2472,27.0888 17.1384,25.7208 17.1384,23.4024 L17.1384,23.2872 C17.1384,20.9832 18.3192,19.572 20.1336,19.572 C21.6168,19.572 22.38,20.2776 22.596,21.6456 L24.54,21.6456 C24.3096,19.2264 22.4808,18.0456 20.1192,18.0456 C17.2536,18.0456 15.1224,20.2056 15.1224,23.3016 L15.1224,23.4168 C15.1224,26.5848 16.9224,28.644 20.148,28.644 Z M32.9928,28.5 L32.9928,26.988 L28.2264,26.988 L28.2264,23.9784 L31.8552,23.9784 L31.8552,22.5384 L28.2264,22.5384 L28.2264,19.716 L32.748,19.716 L32.748,18.204 L26.3112,18.204 L26.3112,28.5 L32.9928,28.5 Z"/>
+    </g>
+    <g transform="translate(40.914 603.714)">
+      <use fill="#000" filter="url(#calculator-x)" xlink:href="#calculator-y"/>
+      <use fill="#512A1A" xlink:href="#calculator-y"/>
+      <use fill="#000" filter="url(#calculator-z)" xlink:href="#calculator-y"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M24.3528,28.644 C26.8008,28.644 28.5576,27.3912 28.86,24.9144 L26.988,24.9144 C26.7864,26.3688 25.7784,27.0888 24.3528,27.0888 C22.452,27.0888 21.3432,25.7208 21.3432,23.4024 L21.3432,23.2872 C21.3432,20.9832 22.524,19.572 24.3384,19.572 C25.8216,19.572 26.5848,20.2776 26.8008,21.6456 L28.7448,21.6456 C28.5144,19.2264 26.6856,18.0456 24.324,18.0456 C21.4584,18.0456 19.3272,20.2056 19.3272,23.3016 L19.3272,23.4168 C19.3272,26.5848 21.1272,28.644 24.3528,28.644 Z"/>
+    </g>
+    <g transform="translate(309.714 536.514)">
+      <use fill="#000" filter="url(#calculator-A)" xlink:href="#calculator-B"/>
+      <use fill="#512A1A" xlink:href="#calculator-B"/>
+      <use fill="#000" filter="url(#calculator-C)" xlink:href="#calculator-B"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M16.875,9.0734375 C17.392767,9.0734375 17.8125,9.49317055 17.8125,10.0109375 C17.8125,10.4917211 17.4505873,10.8879755 16.9843323,10.9421303 L16.875,10.9484375 L3.125,10.9484375 C2.60723305,10.9484375 2.1875,10.5287045 2.1875,10.0109375 C2.1875,9.5301539 2.54941268,9.13389954 3.01566769,9.07974475 L3.125,9.0734375 L16.875,9.0734375 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(242.514 536.514)">
+      <use fill="#000" filter="url(#calculator-D)" xlink:href="#calculator-E"/>
+      <use fill="#000" xlink:href="#calculator-E"/>
+      <use fill="#000" filter="url(#calculator-F)" xlink:href="#calculator-E"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M13.7495391,1.56128125 C14.4699961,1.56128125 14.9072143,2.33165626 14.5763663,2.94144116 L14.5176736,3.03625271 L10.997,8.066 L11.1767017,8.12587053 C11.8269457,8.36000639 12.4265184,8.72005045 12.9425036,9.18798278 L13.1320156,9.36847947 C14.1212488,10.3578103 14.6879766,11.6977326 14.6879766,13.1250312 C14.6879766,14.5522649 14.1212401,15.8921828 13.1320156,16.8815049 C12.142841,17.8707772 10.8028813,18.4375312 9.37547656,18.4375312 C7.94815737,18.4375312 6.60821859,17.870786 5.61897021,16.8815376 C5.25285368,16.5154211 5.25285368,15.9218289 5.61897021,15.5557124 C5.98508673,15.1895959 6.5786789,15.1895959 6.94479542,15.5557124 C7.58589859,16.1968156 8.4505492,16.5625312 9.37547656,16.5625312 C10.3004746,16.5625312 11.1651124,16.196821 11.806125,15.5557451 C12.4472554,14.9145514 12.8129766,14.0498879 12.8129766,13.1250312 C12.8129766,12.2001049 12.4472611,11.3354386 11.806125,10.6942393 C11.1651535,10.0532045 10.300527,9.68753125 9.37547656,9.68753125 C8.65501949,9.68753125 8.21780131,8.91715624 8.54864935,8.30737134 L8.60734202,8.21255979 L11.949,3.436 L6.24953906,3.43628125 C5.76875546,3.43628125 5.3725011,3.07436857 5.31834631,2.60811356 L5.31203906,2.49878125 C5.31203906,2.01799765 5.67395174,1.62174329 6.14020676,1.5675885 L6.24953906,1.56128125 L13.7495391,1.56128125 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(175.314 536.514)">
+      <use fill="#000" filter="url(#calculator-G)" xlink:href="#calculator-H"/>
+      <use fill="#000" xlink:href="#calculator-H"/>
+      <use fill="#000" filter="url(#calculator-I)" xlink:href="#calculator-H"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M10.0000391,1.56252344 C10.3192073,1.56252344 10.6348995,1.59458669 10.943556,1.65770076 C11.2467101,1.71968971 11.5417476,1.81145954 11.8247691,1.93123359 C12.1039532,2.04928636 12.3707494,2.19420755 12.6215356,2.36365766 C12.8703631,2.53181596 13.1024576,2.72333552 13.3145923,2.93547021 C13.5267668,3.14764475 13.7183584,3.37977751 13.8864678,3.62857948 C14.0558502,3.87936356 14.2007326,4.14611301 14.3186429,4.42496016 C14.4385248,4.70823679 14.5302947,5.00327432 14.5922259,5.30614633 C14.6554437,5.61482694 14.6875391,5.93061913 14.6875391,6.25002344 C14.6875391,6.56939846 14.6554336,6.88528977 14.5922836,7.19354033 C14.5302947,7.49669443 14.4385248,7.79173196 14.3187964,8.07464565 C14.2303083,8.28398487 14.1266934,8.486346 13.9976657,8.69611079 L13.8597862,8.90887613 L8.125,16.561 L13.7500391,16.5615859 C14.2308227,16.5615859 14.627077,16.9234986 14.6812318,17.3897536 L14.6875391,17.4990859 C14.6875391,17.9798695 14.3256264,18.3761239 13.8593714,18.4302787 L13.7500391,18.4365859 L6.331,18.436 C5.85371032,18.4687884 5.37624023,18.1454647 5.31838776,17.6099198 L5.31253906,17.5000234 C5.31253906,17.3141692 5.36607644,17.1417567 5.45849654,16.9965033 L5.4998232,16.9378114 L12.3326728,7.82193886 C12.4344024,7.67132004 12.5211917,7.51154324 12.591904,7.34425703 C12.6634906,7.17510054 12.718266,6.99899923 12.7553641,6.81757292 C12.793247,6.632657 12.8125391,6.44283877 12.8125391,6.25002344 C12.8125391,6.05715926 12.793253,5.86740043 12.7552945,5.68205595 C12.718266,5.50096952 12.6634906,5.32486821 12.5917961,5.15545663 C12.5211618,4.98841301 12.4343253,4.82853451 12.3327682,4.67817101 C12.2317745,4.52870046 12.1164753,4.38900368 11.9887671,4.26129542 C11.8611252,4.13365355 11.7214326,4.01838207 11.5717352,3.91721622 C11.4214052,3.81564185 11.261579,3.72882575 11.0942727,3.65808038 C10.9251162,3.58649378 10.7490149,3.53171842 10.5679284,3.49468986 C10.3826577,3.4568057 10.1928061,3.43752344 10.0000391,3.43752344 C9.80720147,3.43752344 9.6173494,3.45680425 9.43207158,3.49468986 C9.25098514,3.53171842 9.07488383,3.58649378 8.90547225,3.65818829 C8.73842105,3.72882575 8.57859483,3.81564185 8.42833248,3.91717046 C8.27856744,4.01838207 8.13887479,4.13365355 8.01123292,4.26129542 C7.88352466,4.38900368 7.76822546,4.52870046 7.66732718,4.67802989 C7.56567468,4.82853451 7.47883817,4.98841301 7.40820391,5.15545663 C7.20655332,5.632342 6.65649124,5.85546388 6.17960587,5.65381329 C5.7027205,5.4521627 5.47959862,4.90210062 5.68124921,4.42521525 C5.79926737,4.14611301 5.94414984,3.87936356 6.11362753,3.62843836 C6.28164162,3.37977751 6.47323316,3.14764475 6.68540771,2.93547021 C6.89754239,2.72333552 7.12963689,2.53181596 7.37853211,2.3636119 C7.62925056,2.19420755 7.89604677,2.04928636 8.17497578,1.9313415 C8.45825242,1.81145954 8.75328995,1.71968971 9.05644405,1.65770076 C9.36511231,1.59458428 9.68080518,1.56252344 10.0000391,1.56252344 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(108.114 536.514)">
+      <use fill="#000" filter="url(#calculator-J)" xlink:href="#calculator-K"/>
+      <use fill="#000" xlink:href="#calculator-K"/>
+      <use fill="#000" filter="url(#calculator-L)" xlink:href="#calculator-K"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M9.79087038,1.72000008 C10.3827332,1.32533438 11.1655533,1.70866465 11.2423556,2.39000549 L11.2484844,2.49999219 L11.2484844,17.4991328 C11.2484844,18.0168998 10.8287513,18.4366328 10.3109844,18.4366328 C9.83020078,18.4366328 9.43394641,18.0747201 9.37979162,17.6084651 L9.37348438,17.4991328 L9.373,4.251 L7.08383274,5.77873429 C6.68619174,6.04388909 6.15963276,5.96514596 5.85504588,5.6126443 L5.78372664,5.51885618 C5.51857185,5.12121518 5.59731498,4.5946562 5.94981663,4.29006932 L6.04360476,4.21875008 L9.79087038,1.72000008 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(40.914 469.314)">
+      <use fill="#000" filter="url(#calculator-M)" xlink:href="#calculator-N"/>
+      <use fill="#512A1A" xlink:href="#calculator-N"/>
+      <use fill="#000" filter="url(#calculator-O)" xlink:href="#calculator-N"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M26.2527749,26.2527827 C27.4731883,25.0323693 29.4517805,25.0323693 30.6721939,26.2527827 C31.8926073,27.4731961 31.8926073,29.4517883 30.6721939,30.6722017 C29.4517805,31.8926151 27.4731883,31.8926151 26.2527749,30.6722017 C25.0323615,29.4517883 25.0323615,27.4731961 26.2527749,26.2527827 Z M30.6879126,18.1120874 C31.0258663,18.4500411 31.0518628,18.9818202 30.7659019,19.3495932 L30.6879126,19.4379126 L19.4379126,30.6879126 C19.0717961,31.0540291 18.4782039,31.0540291 18.1120874,30.6879126 C17.7741337,30.3499589 17.7481372,29.8181798 18.0340981,29.4504068 L18.1120874,29.3620874 L29.3620874,18.1120874 C29.7282039,17.7459709 30.3217961,17.7459709 30.6879126,18.1120874 Z M29.3463686,27.5786079 C28.8581883,27.0904276 28.0667805,27.0904276 27.5786001,27.5786079 C27.0904198,28.0667883 27.0904198,28.8581961 27.5786001,29.3463765 C28.0667805,29.8345568 28.8581883,29.8345568 29.3463686,29.3463765 C29.834549,28.8581961 29.834549,28.0667883 29.3463686,27.5786079 Z M18.1277749,18.1277827 C19.3481883,16.9073693 21.3267805,16.9073693 22.5471939,18.1277827 C23.7676073,19.3481961 23.7676073,21.3267883 22.5471939,22.5472017 C21.3267805,23.7676151 19.3481883,23.7676151 18.1277749,22.5472017 C16.9073615,21.3267883 16.9073615,19.3481961 18.1277749,18.1277827 Z M21.1198692,19.3624809 C20.6290149,18.9675973 19.9092351,18.9979729 19.4536001,19.4536079 C18.9654198,19.9417883 18.9654198,20.7331961 19.4536001,21.2213765 C19.9417805,21.7095568 20.7331883,21.7095568 21.2213686,21.2213765 C21.709549,20.7331961 21.709549,19.9417883 21.2213686,19.4536079 L21.2213686,19.4536079 Z"/>
+    </g>
+    <g transform="translate(309.714 469.314)">
+      <use fill="#000" filter="url(#calculator-P)" xlink:href="#calculator-Q"/>
+      <use fill="#512A1A" xlink:href="#calculator-Q"/>
+      <use fill="#000" filter="url(#calculator-R)" xlink:href="#calculator-Q"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M4.94959323,3.63409807 L5.03791261,3.71208739 L9.9995,8.6735 L14.9620874,3.71208739 C15.3282039,3.34597087 15.9217961,3.34597087 16.2879126,3.71208739 C16.6258663,4.05004111 16.6518628,4.58182022 16.3659019,4.94959323 L16.2879126,5.03791261 L11.3255,9.9995 L16.2879126,14.9620874 C16.6540291,15.3282039 16.6540291,15.9217961 16.2879126,16.2879126 C15.9499589,16.6258663 15.4181798,16.6518628 15.0504068,16.3659019 L14.9620874,16.2879126 L9.9995,11.3255 L5.03791261,16.2879126 C4.67179608,16.6540291 4.07820392,16.6540291 3.71208739,16.2879126 C3.37413368,15.9499589 3.34813724,15.4181798 3.63409807,15.0504068 L3.71208739,14.9620874 L8.6735,9.9995 L3.71208739,5.03791261 C3.34597087,4.67179608 3.34597087,4.07820392 3.71208739,3.71208739 C4.05004111,3.37413368 4.58182022,3.34813724 4.94959323,3.63409807 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(242.514 469.314)">
+      <use fill="#000" filter="url(#calculator-S)" xlink:href="#calculator-T"/>
+      <use fill="#000" xlink:href="#calculator-T"/>
+      <use fill="#000" filter="url(#calculator-U)" xlink:href="#calculator-T"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M7.00395933,0.265356862 C7.41787148,0.504317441 7.58062743,1.01124479 7.39960625,1.44050219 L7.34713533,1.5459984 L4.50060934,6.47492293 C5.72627355,6.25075962 7.00121003,6.46099468 8.10924288,7.10077588 C9.34527231,7.81440935 10.2222296,8.97516086 10.5842893,10.3264666 C10.9464379,11.6778373 10.7672894,13.1216249 10.0536327,14.3576946 C9.34005223,15.5937921 8.17927505,16.4709065 6.82802855,16.8329766 C5.47683014,17.1950337 4.03314883,17.015886 2.79701775,16.3022862 C1.5609792,15.5886474 0.684011186,14.4278317 0.321949472,13.0765185 C-0.0401872821,11.7252897 0.138993261,10.28142 0.852601657,9.04527415 C0.854959197,9.04119031 0.857321619,9.03711039 0.859688913,9.03303439 L5.7233178,0.608532855 C5.98219176,0.160128026 6.5555545,0.00648290085 7.00395933,0.265356862 Z M6.96883548,8.6161511 C6.21588866,8.24524663 5.36623559,8.16602128 4.56355834,8.38108521 C3.68781866,8.6158052 2.93881465,9.18175663 2.47644522,9.9826946 C2.01399068,10.78378 1.89836426,11.7155189 2.13305126,12.5911987 C2.36771279,13.4670196 2.93360504,14.2160739 3.73448366,14.6784688 C4.53551778,15.1408938 5.46710456,15.2564952 6.34273707,15.0218672 C7.21837164,14.7872386 7.96739347,14.2212576 8.42981541,13.4202287 C8.89228968,12.6192127 9.00788856,11.6875819 8.77318312,10.81177 C8.53853144,9.93598593 7.97265899,9.18699013 7.17170525,8.72455178 L7.17170525,8.72455178 Z" transform="translate(18.947 15.822)"/>
+    </g>
+    <g transform="translate(175.314 469.314)">
+      <use fill="#000" filter="url(#calculator-V)" xlink:href="#calculator-W"/>
+      <use fill="#000" xlink:href="#calculator-W"/>
+      <use fill="#000" filter="url(#calculator-X)" xlink:href="#calculator-W"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M13.7342109,1.56179687 C14.2519779,1.56179687 14.6717109,1.98152992 14.6717109,2.49929687 C14.6717109,2.98008047 14.3097983,3.37633484 13.8435432,3.43048963 L13.7342109,3.43679687 L8.283,3.436 L7.521,8.139 L7.55802365,8.1253072 C8.04570612,7.94969821 8.56188071,7.84491388 9.09266537,7.81855936 L9.35921094,7.81195313 C10.7865301,7.81195313 12.1264689,8.37869838 13.1157173,9.36794677 C14.1049173,10.3571468 14.6717109,11.6970908 14.6717109,13.1242969 C14.6717109,14.5515346 14.1049548,15.89139 13.1156846,16.8807578 C12.12642,17.8699248 10.7864916,18.4366406 9.35921094,18.4366406 C7.93186526,18.4366406 6.59193243,17.8699335 5.60265916,16.8807578 C5.23652458,16.5146594 5.23649529,15.9210672 5.60259375,15.5549326 C5.96869221,15.188798 6.56228437,15.1887687 6.92841896,15.5548672 C7.56955345,16.1959384 8.43422649,16.5616406 9.35921094,16.5616406 C10.2841257,16.5616406 11.1487959,16.1959328 11.7898594,15.5549326 C12.4309835,14.9137452 12.7967109,14.0491372 12.7967109,13.1242969 C12.7967109,12.199503 12.4309603,11.3348402 11.7898921,10.693772 C11.1487889,10.0526688 10.2841383,9.68695313 9.35921094,9.68695313 C8.50536753,9.68695313 7.70294113,9.99856407 7.08029382,10.5507536 L6.92845167,10.693772 C6.31085748,11.3113662 5.28122499,10.8218799 5.32846385,9.9871408 L5.34008512,9.88105533 L6.55922575,2.34949283 C6.62659591,1.93329591 6.96161271,1.61824327 7.37125413,1.56862475 L7.48467969,1.56179687 L13.7342109,1.56179687 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(108.114 469.314)">
+      <use fill="#000" filter="url(#calculator-Y)" xlink:href="#calculator-Z"/>
+      <use fill="#000" xlink:href="#calculator-Z"/>
+      <use fill="#000" filter="url(#calculator-aa)" xlink:href="#calculator-Z"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M5.0617974,0.115932738 C5.51517076,0.275949807 5.76838025,0.74911285 5.664266,1.20681003 L5.63382507,1.31200834 L2.325,10.686 L7.57272791,10.6862289 L7.5734375,6.62410156 C7.5734375,6.10633461 7.99317055,5.68660156 8.5109375,5.68660156 C8.9917211,5.68660156 9.38797546,6.04851424 9.44213025,6.51476926 L9.4484375,6.62410156 L9.4484375,16.6241016 C9.4484375,17.1418685 9.02870445,17.5616016 8.5109375,17.5616016 C8.0301539,17.5616016 7.63389954,17.1996889 7.57974475,16.7334339 L7.5734375,16.6241016 L7.57272791,12.5612289 L1.00000781,12.561625 C0.39122264,12.561625 -0.0454190218,11.9950884 0.0848007031,11.4199117 L0.115956175,11.312101 L3.8657218,0.687960414 C4.03804788,0.199712176 4.57354916,-0.0563933378 5.0617974,0.115932738 Z" transform="translate(19.338 15.275)"/>
+    </g>
+    <g transform="translate(40.914 402.114)">
+      <use fill="#000" filter="url(#calculator-ab)" xlink:href="#calculator-ac"/>
+      <use fill="#512A1A" xlink:href="#calculator-ac"/>
+      <use fill="#000" filter="url(#calculator-ad)" xlink:href="#calculator-ac"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M32.125,18.6849922 C32.6070657,18.6849922 33.0043767,19.04787 33.0586759,19.5153683 L33.065,19.6249922 L33.065,21.4999922 C33.065,22.0191399 32.6441477,22.4399922 32.125,22.4399922 C31.6429343,22.4399922 31.2456233,22.0771144 31.1913241,21.609616 L31.185,21.4999922 L31.184,20.564 L24.027,20.564 L20.5051494,29.9550482 C20.215426,30.7276439 19.1627446,30.7662737 18.7967254,30.0709376 L18.7448506,29.9550482 L14.9948506,19.9550482 C14.8125657,19.4689551 15.0588509,18.9271277 15.544944,18.7448428 C15.9963161,18.5755782 16.495745,18.775846 16.7107365,19.1945127 L16.7551494,19.2949362 L19.625,26.946 L22.4948506,19.2949362 C22.6186744,18.9647392 22.9151509,18.7348422 23.2588549,18.6921647 L23.375,18.6849922 L32.125,18.6849922 Z"/>
+    </g>
+    <g transform="translate(309.714 402.114)">
+      <use fill="#000" filter="url(#calculator-ae)" xlink:href="#calculator-af"/>
+      <use fill="#512A1A" xlink:href="#calculator-af"/>
+      <use fill="#000" filter="url(#calculator-ag)" xlink:href="#calculator-af"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M10,13.75 C11.0355469,13.75 11.875,14.5894531 11.875,15.625 C11.875,16.6605469 11.0355469,17.5 10,17.5 C8.96445313,17.5 8.125,16.6605469 8.125,15.625 C8.125,14.5894531 8.96445313,13.75 10,13.75 Z M16.875,9.0734375 C17.392767,9.0734375 17.8125,9.49317055 17.8125,10.0109375 C17.8125,10.4917211 17.4505873,10.8879755 16.9843323,10.9421303 L16.875,10.9484375 L3.125,10.9484375 C2.60723305,10.9484375 2.1875,10.5287045 2.1875,10.0109375 C2.1875,9.5301539 2.54941268,9.13389954 3.01566769,9.07974475 L3.125,9.0734375 L16.875,9.0734375 Z M10,2.5 C11.0355469,2.5 11.875,3.33945313 11.875,4.375 C11.875,5.41054687 11.0355469,6.25 10,6.25 C8.96445313,6.25 8.125,5.41054687 8.125,4.375 C8.125,3.33945313 8.96445313,2.5 10,2.5 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(242.514 402.114)">
+      <use fill="#000" filter="url(#calculator-ah)" xlink:href="#calculator-ai"/>
+      <use fill="#000" xlink:href="#calculator-ai"/>
+      <use fill="#000" filter="url(#calculator-aj)" xlink:href="#calculator-ai"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M8.62509645,1.74423437 C9.97629486,1.38217723 11.4199762,1.56132491 12.6560618,2.27489853 C13.8921458,2.98856352 14.7691138,4.14937928 15.1311799,5.50070875 C15.4933076,6.85200136 15.3141345,8.29578618 14.6005233,9.53193678 L14.6005122,9.53195608 L9.72980908,17.968753 C9.47093692,18.4171588 8.89757479,18.5708062 8.44916892,18.3119341 C8.03525582,18.0729752 7.87249783,17.5660485 8.0535173,17.1367903 L8.10598779,17.0312939 L10.952527,12.102286 C9.72689287,12.3264469 8.45196491,12.1162405 7.34390837,11.4765283 C6.10786983,10.7628896 5.23090181,9.60207385 4.86883571,8.25074438 C4.5066871,6.89937363 4.68583556,5.45558603 5.39949228,4.21951634 C6.11304115,2.9834736 7.27376436,2.10642495 8.62509645,1.74423437 Z M11.5157709,3.79036331 C10.7627318,3.41948229 9.91305615,3.34026671 9.11044896,3.55532739 C8.23470929,3.79004739 7.48570527,4.35599882 7.02330959,5.15698225 C6.56083532,5.95799821 6.44523644,6.88962904 6.67994188,7.76544093 C6.91460341,8.64126178 7.48049567,9.39031606 8.28140054,9.85272619 C9.08235158,10.3151377 10.0139295,10.430738 10.8896277,10.1961094 C11.7652623,9.96148081 12.5142841,9.39549978 12.9766798,8.59451634 C13.4391405,7.79342021 13.5547601,6.86175278 13.3200737,5.9860122 C13.0854122,5.11019135 12.51952,4.36113707 11.7185959,3.89871584 L11.7185959,3.89871584 Z" transform="translate(14 14)"/>
+    </g>
+    <g transform="translate(175.314 402.114)">
+      <use fill="#000" filter="url(#calculator-ak)" xlink:href="#calculator-al"/>
+      <use fill="#000" xlink:href="#calculator-al"/>
+      <use fill="#000" filter="url(#calculator-am)" xlink:href="#calculator-al"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M5.68746094,0.0624609375 C6.99249739,0.0624609375 8.22116668,0.55041904 9.1338652,1.40729077 C10.0580916,2.27507971 10.5913672,3.45877868 10.5913672,4.72394531 C10.5913672,5.98912347 10.0580801,7.17289982 9.13382808,8.04071283 C9.01033636,8.15665097 8.88105818,8.26583455 8.74658726,8.36796873 C9.06735495,8.56527206 9.3681802,8.79474987 9.6438254,9.05354007 C10.7023829,10.0474551 11.3125,11.4017748 11.3125,12.8489453 C11.3125,14.2961282 10.7023709,15.650525 9.64376258,16.6444877 C8.59672038,17.6274095 7.18635051,18.1874609 5.6875,18.1874609 C4.18864949,18.1874609 2.77827962,17.6274095 1.7311746,16.6444287 C0.672629141,15.650525 0.0625,14.2961282 0.0625,12.8489453 C0.0625,11.4017748 0.67261708,10.0474551 1.73120397,9.0535125 C2.00684143,8.79472956 2.30766099,8.56525709 2.62864814,8.36759753 C2.49452067,8.26632075 2.36492117,8.15689274 2.2411348,8.04067798 C1.31691987,7.17289982 0.783632813,5.98912347 0.783632813,4.72394531 C0.783632813,3.45877868 1.31690838,2.27507971 2.24117192,1.40725592 C3.15382444,0.550427372 4.38248943,0.0624609375 5.68746094,0.0624609375 Z M5.6875,9.38542969 C4.66616371,9.38542969 3.7145001,9.76334754 3.01460665,10.4204443 C2.32643821,11.0665886 1.9375,11.9299421 1.9375,12.8489453 C1.9375,13.767971 2.32645665,14.6313974 3.01454383,15.2774655 C3.71449482,15.9345518 4.66617823,16.3124609 5.6875,16.3124609 C6.70882177,16.3124609 7.66050518,15.9345518 8.36039335,15.2775244 C9.04854335,14.6313974 9.4375,13.767971 9.4375,12.8489453 C9.4375,11.9299421 9.04856179,11.0665886 8.36042272,10.4204719 C7.6604999,9.76334754 6.70883629,9.38542969 5.6875,9.38542969 Z M5.68746094,1.93746094 C4.86006298,1.93746094 4.0901011,2.24325263 3.52456833,2.77419361 C2.97072256,3.29421904 2.65863281,3.98695714 2.65863281,4.72394531 C2.65863281,5.46095688 2.97074158,6.15376757 3.52453121,6.67374029 C4.0900564,7.20467415 4.86000702,7.51042969 5.68746094,7.51042969 C6.51498456,7.51042969 7.28493816,7.20467926 7.85043167,6.67377514 C8.40425842,6.15376757 8.71636719,5.46095688 8.71636719,4.72394531 C8.71636719,3.98695714 8.40427744,3.29421904 7.85046879,2.77422846 C7.28489346,2.24324752 6.5149286,1.93746094 5.68746094,1.93746094 Z" transform="translate(18.713 15.275)"/>
+    </g>
+    <g transform="translate(108.114 402.114)">
+      <use fill="#000" filter="url(#calculator-an)" xlink:href="#calculator-ao"/>
+      <use fill="#000" xlink:href="#calculator-ao"/>
+      <use fill="#000" filter="url(#calculator-ap)" xlink:href="#calculator-ao"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M13.75,2.1868125 C14.3522568,2.1868125 14.787935,2.74213152 14.6684039,3.31357338 L14.6393906,3.42077603 L9.63939059,18.420776 C9.47565831,18.9119729 8.94473333,19.1774354 8.45353647,19.0137031 C7.9974251,18.861666 7.73595204,18.3930188 7.83201908,17.9335652 L7.86060941,17.827849 L12.449,4.061 L6.25,4.0618125 C5.7692164,4.0618125 5.37296204,3.69989982 5.31880725,3.23364481 L5.3125,3.1243125 C5.3125,2.6435289 5.67441268,2.24727454 6.14066769,2.19311975 L6.25,2.1868125 L13.75,2.1868125 Z" transform="translate(14.4 14.4)"/>
+    </g>
+    <g transform="translate(309.714 334.914)">
+      <use fill="#000" filter="url(#calculator-aq)" xlink:href="#calculator-ar"/>
+      <use fill="#245633" xlink:href="#calculator-ar"/>
+      <use fill="#000" filter="url(#calculator-as)" xlink:href="#calculator-ar"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M30.2879126,17.7120874 C30.6258663,18.0500411 30.6518628,18.5818202 30.3659019,18.9495932 L30.2879126,19.0379126 L19.0379126,30.2879126 C18.6717961,30.6540291 18.0782039,30.6540291 17.7120874,30.2879126 C17.3741337,29.9499589 17.3481372,29.4181798 17.6340981,29.0504068 L17.7120874,28.9620874 L28.9620874,17.7120874 C29.3282039,17.3459709 29.9217961,17.3459709 30.2879126,17.7120874 Z M31.5,27.4484375 C32.017767,27.4484375 32.4375,27.8681705 32.4375,28.3859375 C32.4375,28.8667211 32.0755873,29.2629755 31.6093323,29.3171303 L31.5,29.3234375 L25.25,29.3234375 C24.732233,29.3234375 24.3125,28.9037045 24.3125,28.3859375 C24.3125,27.9051539 24.6744127,27.5088995 25.1406677,27.4547447 L25.25,27.4484375 L31.5,27.4484375 Z M19.6359375,15.5625 C20.1167211,15.5625 20.5129755,15.9244127 20.5671303,16.3906677 L20.5734375,16.5 L20.5725,18.6975 L22.75,18.6984375 C23.267767,18.6984375 23.6875,19.1181705 23.6875,19.6359375 C23.6875,20.1167211 23.3255873,20.5129755 22.8593323,20.5671303 L22.75,20.5734375 L20.5725,20.5725 L20.5734375,22.75 C20.5734375,23.267767 20.1537045,23.6875 19.6359375,23.6875 C19.1551539,23.6875 18.7588995,23.3255873 18.7047447,22.8593323 L18.6984375,22.75 L18.6975,20.5725 L16.5,20.5734375 C15.982233,20.5734375 15.5625,20.1537045 15.5625,19.6359375 C15.5625,19.1551539 15.9244127,18.7588995 16.3906677,18.7047447 L16.5,18.6984375 L18.6975,18.6975 L18.6984375,16.5 C18.6984375,15.982233 19.1181705,15.5625 19.6359375,15.5625 Z"/>
+    </g>
+    <g transform="translate(242.514 334.914)">
+      <use fill="#000" filter="url(#calculator-at)" xlink:href="#calculator-au"/>
+      <use fill="#245633" xlink:href="#calculator-au"/>
+      <use fill="#000" filter="url(#calculator-av)" xlink:href="#calculator-au"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M15.1656,28.5 L15.1656,20.724 L18.2904,28.5 L18.9096,28.5 L21.9768,20.724 L21.9768,28.5 L23.892,28.5 L23.892,18.204 L21.3576,18.204 L18.708,25.2312 L16.0008,18.204 L13.4376,18.204 L13.4376,28.5 L15.1656,28.5 Z M30.7608,28.644 C33.2088,28.644 34.9656,27.3912 35.268,24.9144 L33.396,24.9144 C33.1944,26.3688 32.1864,27.0888 30.7608,27.0888 C28.86,27.0888 27.7512,25.7208 27.7512,23.4024 L27.7512,23.2872 C27.7512,20.9832 28.932,19.572 30.7464,19.572 C32.2296,19.572 32.9928,20.2776 33.2088,21.6456 L35.1528,21.6456 C34.9224,19.2264 33.0936,18.0456 30.732,18.0456 C27.8664,18.0456 25.7352,20.2056 25.7352,23.3016 L25.7352,23.4168 C25.7352,26.5848 27.5352,28.644 30.7608,28.644 Z"/>
+    </g>
+    <g transform="translate(175.314 334.914)">
+      <use fill="#000" filter="url(#calculator-aw)" xlink:href="#calculator-ax"/>
+      <use fill="#245633" xlink:href="#calculator-ax"/>
+      <use fill="#000" filter="url(#calculator-ay)" xlink:href="#calculator-ax"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M15.7848,28.5 L15.7848,20.724 L18.9096,28.5 L19.5288,28.5 L22.596,20.724 L22.596,28.5 L24.5112,28.5 L24.5112,18.204 L21.9768,18.204 L19.3272,25.2312 L16.62,18.204 L14.0568,18.204 L14.0568,28.5 L15.7848,28.5 Z M28.788,28.5 L28.788,24.3384 L30.012,24.3384 L32.7048,28.5 L34.7784,28.5 L31.884,24.0504 C33.1656,23.7192 34.1736,22.8984 34.1736,21.2856 L34.1736,21.228 C34.1736,19.1256 32.5896,18.204 30.3288,18.204 L26.8728,18.204 L26.8728,28.5 L28.788,28.5 Z M30.3288,22.9704 L28.788,22.9704 L28.788,19.6872 L30.3288,19.6872 C31.5528,19.6872 32.2872,20.0904 32.2872,21.2712 L32.2872,21.3288 C32.2872,22.4232 31.6104,22.9704 30.3288,22.9704 Z"/>
+    </g>
+    <g transform="translate(108.114 334.914)">
+      <use fill="#000" filter="url(#calculator-az)" xlink:href="#calculator-aA"/>
+      <use fill="#245633" xlink:href="#calculator-aA"/>
+      <use fill="#000" filter="url(#calculator-aB)" xlink:href="#calculator-aA"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M16.6704,28.5 L16.6704,20.724 L19.7952,28.5 L20.4144,28.5 L23.4816,20.724 L23.4816,28.5 L25.3968,28.5 L25.3968,18.204 L22.8624,18.204 L20.2128,25.2312 L17.5056,18.204 L14.9424,18.204 L14.9424,28.5 L16.6704,28.5 Z M33.576,25.044 L33.576,23.8344 L27.2256,23.8344 L27.2256,25.044 L33.576,25.044 Z"/>
+    </g>
+    <g transform="translate(40.914 334.914)">
+      <use fill="#000" filter="url(#calculator-aC)" xlink:href="#calculator-aD"/>
+      <use fill="#245633" xlink:href="#calculator-aD"/>
+      <use fill="#000" filter="url(#calculator-aE)" xlink:href="#calculator-aD"/>
+      <path fill="#FFF" fill-rule="nonzero" d="M16.62,28.5 L16.62,20.724 L19.7448,28.5 L20.364,28.5 L23.4312,20.724 L23.4312,28.5 L25.3464,28.5 L25.3464,18.204 L22.812,18.204 L20.1624,25.2312 L17.4552,18.204 L14.892,18.204 L14.892,28.5 L16.62,28.5 Z M31.1352,27.1176 L31.1352,24.2664 L33.7704,24.2664 L33.7704,22.9128 L31.1352,22.9128 L31.1352,20.0616 L29.6808,20.0616 L29.6808,22.9128 L27.06,22.9128 L27.06,24.2664 L29.6808,24.2664 L29.6808,27.1176 L31.1352,27.1176 Z"/>
+    </g>
+    <path fill="#FFF" fill-rule="nonzero" d="M275.8272,261.6 L275.8272,257.856 L277.1376,257.856 C279.4848,257.856 280.9968,256.8192 280.9968,254.6448 L280.9968,254.5872 C280.9968,252.4128 279.5712,251.304 277.0656,251.304 L273.5088,251.304 L273.5088,261.6 L275.8272,261.6 Z M277.008,256.2288 L275.8272,256.2288 L275.8272,253.0752 L277.008,253.0752 C278.1168,253.0752 278.7504,253.5072 278.7504,254.6016 L278.7504,254.6592 C278.7504,255.6816 278.1456,256.2288 277.008,256.2288 Z M284.856,261.6 L284.856,257.352 L288.9888,257.352 L288.9888,261.6 L291.3216,261.6 L291.3216,251.304 L288.9888,251.304 L288.9888,255.5088 L284.856,255.5088 L284.856,251.304 L282.5232,251.304 L282.5232,261.6 L284.856,261.6 Z M298.2768,261.7584 C301.488,261.7584 303.5904,259.5264 303.5904,256.4592 L303.5904,256.344 C303.5904,253.248 301.3872,251.16 298.2912,251.16 C295.2384,251.16 292.992,253.3344 292.992,256.4016 L292.992,256.5168 C292.992,259.5264 295.0512,261.7584 298.2768,261.7584 Z M298.32,259.9008 C296.6352,259.9008 295.4256,258.6048 295.4256,256.5024 L295.4256,256.3872 C295.4256,254.3136 296.5056,253.0032 298.2912,253.0032 C300.0912,253.0032 301.1568,254.3712 301.1568,256.3728 L301.1568,256.488 C301.1568,258.5616 300.0624,259.9008 298.32,259.9008 Z M308.8752,261.7584 C311.3088,261.7584 312.8064,260.304 312.8064,258.4752 C312.8064,256.344 311.5248,255.6672 309.0336,255.3504 C307.4496,255.12 307.1184,254.7744 307.1184,254.04 C307.1184,253.3488 307.6368,252.8736 308.6592,252.8736 C309.6816,252.8736 310.2288,253.3056 310.3728,254.2416 L312.5184,254.2416 C312.3312,252.1968 310.9776,251.16 308.6592,251.16 C306.384,251.16 304.9152,252.4704 304.9152,254.2272 C304.9152,256.2144 305.9952,257.0064 308.6304,257.352 C310.1424,257.5824 310.5744,257.8704 310.5744,258.6912 C310.5744,259.4976 309.8976,260.0592 308.8752,260.0592 C307.3488,260.0592 306.96,259.296 306.8592,258.3744 L304.6272,258.3744 C304.7568,260.4336 306.0528,261.7584 308.8752,261.7584 Z M316.8096,261.6 L316.8096,257.856 L318.12,257.856 C320.4672,257.856 321.9792,256.8192 321.9792,254.6448 L321.9792,254.5872 C321.9792,252.4128 320.5536,251.304 318.048,251.304 L314.4912,251.304 L314.4912,261.6 L316.8096,261.6 Z M317.9904,256.2288 L316.8096,256.2288 L316.8096,253.0752 L317.9904,253.0752 C319.0992,253.0752 319.7328,253.5072 319.7328,254.6016 L319.7328,254.6592 C319.7328,255.6816 319.128,256.2288 317.9904,256.2288 Z M325.8384,261.6 L325.8384,257.352 L329.9712,257.352 L329.9712,261.6 L332.304,261.6 L332.304,251.304 L329.9712,251.304 L329.9712,255.5088 L325.8384,255.5088 L325.8384,251.304 L323.5056,251.304 L323.5056,261.6 L325.8384,261.6 Z M339.2592,261.7584 C342.4704,261.7584 344.5728,259.5264 344.5728,256.4592 L344.5728,256.344 C344.5728,253.248 342.3696,251.16 339.2736,251.16 C336.2208,251.16 333.9744,253.3344 333.9744,256.4016 L333.9744,256.5168 C333.9744,259.5264 336.0336,261.7584 339.2592,261.7584 Z M339.3024,259.9008 C337.6176,259.9008 336.408,258.6048 336.408,256.5024 L336.408,256.3872 C336.408,254.3136 337.488,253.0032 339.2736,253.0032 C341.0736,253.0032 342.1392,254.3712 342.1392,256.3728 L342.1392,256.488 C342.1392,258.5616 341.0448,259.9008 339.3024,259.9008 Z M348.576,261.6 L348.576,257.6256 L349.584,257.6256 L352.0464,261.6 L354.5232,261.6 L351.8016,257.2224 C353.0112,256.8624 353.9184,256.0416 353.9184,254.4864 L353.9184,254.4288 C353.9184,252.2976 352.3776,251.304 349.944,251.304 L346.2576,251.304 L346.2576,261.6 L348.576,261.6 Z M349.8864,256.0416 L348.576,256.0416 L348.576,253.0896 L349.8864,253.0896 C351.0096,253.0896 351.6432,253.4496 351.6432,254.5008 L351.6432,254.5584 C351.6432,255.552 351.0528,256.0416 349.8864,256.0416 Z" opacity=".2"/>
   </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 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">
-    <title>marker-green</title>
-    <g id="marker-green" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="marker" transform="translate(63.574467, 230.673339) rotate(190.000000) translate(-63.574467, -230.673339) translate(39.574467, 0.673339)">
-            <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>
-            <g id="body" transform="translate(5.424000, 6.000150)">
-                <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 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 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>
+<svg xmlns="http://www.w3.org/2000/svg" width="118" height="462" viewBox="0 0 118 462">
+  <g fill="none" fill-rule="evenodd" transform="rotate(-170 43.817 228.606)">
+    <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>
 </svg>

src/assets/marker-purple.svg

@@ -1,22 +1,15 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<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">
-    <title>marker-purple</title>
-    <g id="marker-purple" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="marker">
-            <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>
-            <g id="body" transform="translate(0.000000, 0.000150)">
-                <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 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>
-                <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>
-                <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>
-                <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>
-            </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>
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="458" viewBox="0 0 45 458">
+  <g fill="none" fill-rule="evenodd">
+    <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"/>
+    <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"/>
+    <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 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"/>
+    <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 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)"/>
+    <g fill="#FFF" opacity=".1">
+      <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 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>
 </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/warning.svg

@@ -1,14 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<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">
-    <title>warning</title>
-    <g id="warning" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(111.166399, 221.889681) rotate(280.000000) translate(-111.166399, -221.889681) translate(-100.833601, 146.389681)">
-            <rect id="shadow" fill="#35313D" opacity="0.100000001" x="0.133042548" y="6.95073558" width="418.5" height="144"></rect>
-            <rect id="body" stroke="#000000" stroke-width="4.5" fill="#FF8E51" x="7.25" y="2.25" width="414" height="139.5"></rect>
-            <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>
-            <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>
+<svg xmlns="http://www.w3.org/2000/svg" width="279" height="555" viewBox="0 0 279 555">
+  <g fill="none" fill-rule="evenodd" transform="rotate(-80 311.017 260.974)">
+    <rect width="523.125" height="180" x=".166" y="8.688" fill="#35313D" opacity=".1"/>
+    <rect width="517.5" height="174.375" x="9.063" y="2.813" fill="#FF8E51" stroke="#000" stroke-width="5.625"/>
+    <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"/>
+    <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)"/>
   </g>
 </svg>

src/components/App/App.css

@@ -14,11 +14,17 @@ 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;
-  color: "black";
 }
 
 pre {
@@ -28,6 +34,7 @@ pre {
   background-color: white;
   border-radius: 6px;
   border: 1px solid #e1d4d7;
+  white-space: pre-wrap;
 }
 
 input {
@@ -42,9 +49,9 @@ button {
   justify-content: flex-start;
 }
 
+input.main-button,
 button.main-button {
   height: 64px;
-  margin: 16px 24px 0 0;
   padding: 0 48px 0 40px;
   background-color: white;
   border-radius: 8px;
@@ -59,23 +66,46 @@ 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;
 }
 
+input.main-button:active,
 button.main-button:active {
   transform: translate(4px, 4px);
-  /* background-color: #DDDDDD; */
   box-shadow: 0 0 0 0 black;
 }
 
+input.main-button:focus,
 button.main-button:focus {
   outline: none;
 }
 
+input.main-button:disabled,
+button.main-button:disabled {
+  border: 2px solid gray;
+  box-shadow: 4px 4px 0 0 gray;
+  cursor: not-allowed;
+}
+
+/* button.main-button:not(:last-child) {
+  margin: 0 24px 24px 0;
+} */
+
+input.main-button,
 button.main-button svg {
   margin-right: 12px;
 }
 
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  /* gap: 24px; */
+}
+
 a.main-link {
   text-decoration: none;
   position: relative;
@@ -95,3 +125,55 @@ a.main-link:after {
 a.main-link:hover:after {
   width: 0%;
 }
+
+button.text-button {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  background-color: transparent;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+button.text-button svg {
+  margin: 8px;
+}
+
+.radio-group {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  row-gap: 8px;
+}
+
+.radio-button input[type="radio"] {
+  display: none;
+}
+
+.radio-button label {
+  display: inline-block;
+  padding: 8px;
+  min-width: 50px;
+  background-color: white;
+  border-radius: 8px;
+  border: 2px solid black;
+  font-weight: bold;
+  cursor: pointer;
+  text-align: center;
+  user-select: none;
+}
+
+.radio-button label:hover {
+  background-color: #E0E0E0;
+}
+
+.radio-button input[type="radio"]:checked + label {
+  color: white;
+  background-color: black;
+
+}
+
+.radio-button label input {
+  margin-left: 8px;
+}

src/components/App/App.tsx

@@ -1,25 +1,38 @@
 import React, { Suspense } from "react";
 
+import Header from "components/Header";
+import Modal from "components/Modal";
+import Toolbar from "components/Toolbar";
+import IconGrid from "components/IconGrid";
+import Footer from "components/Footer";
+import ErrorBoundary from "components/ErrorBoundary";
+import Notice from "components/Notice";
+
+import useIconParameters from "hooks/useIconParameters";
+
 import "./App.css";
-import Header from "../Header/Header";
-import Toolbar from "../Toolbar/Toolbar";
-import IconGrid from "../IconGrid/IconGrid";
-import Footer from "../Footer/Footer";
-import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
-import Warn from "../Warn/Warn";
+
+const errorFallback = <Notice message="Search error" />;
+const paymentFallback = <Notice message="Could not connect to payments" />;
+const waitingFallback = <Notice type="none" message="" />;
 
 const App: React.FC<any> = () => {
+  useIconParameters();
+
   return (
     <React.StrictMode>
       <Header />
       <main>
         <Toolbar />
-        <ErrorBoundary fallback={<Warn message="Search error"/>}>
-          <Suspense fallback={<div>Loading...</div>}>
+        <ErrorBoundary fallback={errorFallback}>
+          <Suspense fallback={waitingFallback}>
             <IconGrid />
           </Suspense>
         </ErrorBoundary>
       </main>
+      <Suspense fallback={paymentFallback}>
+        <Modal />
+      </Suspense>
       <Footer />
     </React.StrictMode>
   );

src/components/App/index.ts

@@ -0,0 +1,2 @@
+import App from "./App";
+export default App;

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,9 +1,10 @@
 import React, { useCallback } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
-import { iconColorAtom } from "../../state/atoms";
-import { isDarkThemeSelector } from "../../state/selectors";
-import useThrottled from "../../hooks/useThrottled";
+import { iconColorAtom } from "state/atoms";
+import { isDarkThemeSelector } from "state/selectors";
+import useThrottled from "hooks/useThrottled";
+
 import "./ColorInput.css";
 
 type ColorInputProps = {};

src/components/ColorInput/index.ts

@@ -0,0 +1,2 @@
+import ColorInput from "./ColorInput";
+export default ColorInput;

src/components/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+import ErrorBoundary from "./ErrorBoundary";
+export default ErrorBoundary;

src/components/Footer/Footer.css

@@ -1,14 +1,5 @@
 footer {
-  width: 100%;
-  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;
 }
 
-@media screen and (max-width: 759px) {
-  .outro h2 {
+.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: 38px;
-    margin-bottom: 32px;
+  line-height: 40px;
+  margin: 0 0 32px;
+}
+
+footer .links {
+  margin: 56px 0 48px;
 }
 
 .fine-print {
-    margin: 80px 0 0;
+  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;
+  }
+
+  #back-to-top-button img {
+    width: 28px;
+    height: 28px;
+  }
+
+  footer .links {
+    margin: 0 0 64px;
+  }
+
+  #command {
+    display: none;
+  }
+
   #marker-green {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(324px, 510px);
+    display: none;
   }
 
-  #phone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-140px, 470px);
-    touch-action: none;
+  .illustrations-footer {
+    max-width: 100%;
+    height: 440px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
   }
 }
 
-@media screen and (min-width: 760px) and (max-width: 1023px) {
-  .outro h2 {
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 32px;
+@media screen and (min-width: 720px) {
+  .outro {
+    margin: 0 auto;
   }
 
   .fine-print {
-    margin: 80px 0 0;
-    font-size: 20px;
-    line-height: 30px;
+    margin-top: 96px;
+    padding-bottom: 96px;
+  }
+
+  #back-to-top-button {
+    position: absolute;
+    left: 70px;
+    top: -56px;
   }
 
   #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: 292px 10% 292px;
-  }
-
-  #back-to-top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-48px, -196px);
+    left: 678px;
+    top: -218px;
   }
 
   #command {
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(640px, -228px);
+    right: -18px;
+    top: 144px;
   }
 }
 
-
-
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  footer {
-    height: 920px;
-  }
-
+@media screen and (min-width: 1239px) {
   .outro {
-    position: relative;
-    width: 666px;
-    margin: 160px auto 324px;
+    margin-left: 462px;
   }
 
-  .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 {
+  #back-to-top-button {
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-212px, 0);
+    left: 190px;
+    top: 276px;
   }
 
-  #marker-green {
+  /* #command {
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(384px, 512px);
-  }
+    left: 532px;
+    top: 150px;
+  } */
 
-  #phone {
+  .illustrations-footer {
+    display: initial;
     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);
+    left: -240px;
+    top: 656px;
+    height: 584px;
+    overflow: hidden;
   }
 }

src/components/Footer/Footer.tsx

@@ -1,78 +1,20 @@
-import React, { useState } from "react";
-import { motion } from "framer-motion";
-import { Heart } from "phosphor-react";
+import React from "react";
+import { Coffee, Heart } from "phosphor-react";
+
+import uArrowUpLeft from "assets/u-arrow-up-left.svg";
+import markerGreen from "assets/marker-green.svg";
+import postIt from "assets/footer-mobile.svg";
+
+import Links from "components/Links";
 
-import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
-import markerGreen from "../../assets/marker-green.svg";
-import phone from "../../assets/phone.svg";
-import phoneSpec from "../../assets/phone-spec.svg";
-import commandKey from "../../assets/command-key.svg";
-import commandKeySpec from "../../assets/command-key-spec.svg";
 import "./Footer.css";
 
 type FooterProps = {};
 
-const variants = {
-  hidden: { opacity: 0, transition: { duration: 0.2 } },
-  visible: { opacity: 1, transition: { duration: 0.2 } },
-};
-
 const Footer: React.FC<FooterProps> = () => {
-  const [phoneHovered, setPhoneHovered] = useState<boolean>(false);
-
   return (
     <footer>
       <div className="container">
-        <div className="outro">
-          <h2>
-            Phosphor is free and open source software. If you enjoy these icons,
-            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"
@@ -85,47 +27,96 @@ const Footer: React.FC<FooterProps> = () => {
         >
           <img src={uArrowUpLeft} alt="" />
         </button>
+        <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 && (
-            <motion.img
-              id="phone"
-              className="inspectable"
-              variants={variants}
-              initial="hidden"
-              animate={phoneHovered ? "visible" : "hidden"}
-              src={phoneSpec}
-              alt=""
-            />
-          )}
-          <motion.img
-            id="phone"
-            className="inspectable"
-            variants={variants}
-            initial="visible"
-            whileHover="hidden"
-            onHoverStart={() => setPhoneHovered(true)}
-            onHoverEnd={() => setPhoneHovered(false)}
-            src={phone}
-            alt=""
-          />
-          <img
-            id="command"
-            className="inspectable"
-            src={commandKeySpec}
-            alt=""
-          />
-          <motion.img
-            id="command"
-            className="inspectable"
-            variants={variants}
-            initial="visible"
-            whileHover="hidden"
-            src={commandKey}
-            alt=""
-          />
+          <div className="fine-print">
+            <p>
+              Phosphor Icons is designed by{" "}
+              <a className="main-link" href="https://helenazhang.com">
+                Helena Zhang
+              </a>{" "}
+              and built by{" "}
+              <a className="main-link" href="https://tobiasfried.com">
+                Toby Fried
+              </a>{" "}
+              <span
+                role="img"
+                aria-label="Emoji of woman technologist, man technologist, and cat"
+              >
+                🙇🏻‍♀️👨‍💻🐈
+              </span>
+              . Contact us at{" "}
+              <a className="main-link" href="mailto:hello@phosphoricons.com">
+                hello@phosphoricons.com
+              </a>
+              . Check out our sister project:{" "}
+              <a
+                className="main-link"
+                href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
+              >
+                Phosphor for Android
+              </a>
+              . Type set in{" "}
+              <a className="main-link" href="https://manropefont.com/">
+                Manrope
+              </a>{" "}
+              by Mikhail Sharanda.
+            </p>
             <img id="marker-green" src={markerGreen} alt="" />
           </div>
         </div>
+        <div className="illustrations-footer">
+          <img id="post-it" src={postIt} width="878" height="667" alt="" />
+        </div>
+      </div>
     </footer>
   );
 };

src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+import Footer from "./Footer";
+export default 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;
+.header-contents {
   position: relative;
-  color: black;
-  margin-bottom: 16px;
-}
-
-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%;
+  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 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: auto;
+.xray {
+  opacity: 1;
+  transition: opacity 200ms ease;
 }
 
-.button-container {
-  display: flex;
-  flex-wrap: wrap;
+.xray:hover {
+  opacity: 0;
 }
 
-#cutting-mat {
-  position: absolute;
-  /* transform: translate(120px, 824px); */
+#paperclips-three {
+  display: none;
 }
 
-#receipt {
-  position: absolute;
-  transform: translate(-138px, 190px);
-}
-
-#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;
+@media screen and (max-width: 1239px) {
+  .illustrations-top {
+    height: 382px;
   }
 
   #marker-purple {
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(40px, -158px);
+    left: 28px;
+    top: -158px;
   }
 
-  #billiard-ball {
+  .billiard-ball {
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(130px, -98px);
+    left: 132px;
+    top: -98px;
   }
 
   #paperclips {
     position: absolute;
-    transform: translate(176px, 152px);
+    left: 110px;
+    top: 152px;
   }
 
-  #warning {
+  .warning {
     position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(398px, -116px);
+    left: 394px;
+    top: -304px;
   }
 
-  #tablet {
+  .tablet {
     position: absolute;
-    transform: translate(672px, -900px);
-  }
-
-  #calculator {
-    position: absolute;
-    transform: translate(534px, 240px);
+    left: 672px;
+    top: -900px;
   }
 }
 
-@media screen and (min-width: 760px) and (max-width: 1023px) {
-  .intro h2 {
-    font-size: 40px;
-    line-height: 52px;
-    margin-bottom: 32px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .image-container {
-    width: 1366px;
-  }
-
+@media screen and (min-width: 720px) and (max-width: 1239px) {
   .intro {
-    margin: 0;
-    width: 660px;
-    position: absolute;
-    transform: translate(144px, 386px);
+    margin: 0 auto;
   }
 
-  .intro h2 {
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 32px;
+  .illustrations-bottom {
+    height: 612px;
+  }
+
+  .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);
-  }
-
-  #billiard-ball {
-    position: absolute;
-    transform: translate(918px, 360px);
-  }
-
-  #warning {
-    position: absolute;
-    transform: translate(1184px, 424px);
+    left: 900px;
+    top: 400px;
   }
 
   #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;
-    margin-bottom: 32px;
+    line-height: 40px;
+  }
+
+  .illustrations-top {
+    height: 352px;
+  }
+
+  .illustrations-bottom {
+    display: none;
+  }
+
+  .links {
+    display: block;
+    max-height: initial;
   }
 }

src/components/Header/Header.tsx

@@ -1,33 +1,31 @@
 import React from "react";
-import { motion } from "framer-motion";
 import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
 
+import markerPurple from "assets/marker-purple.svg";
+import paperclips from "assets/paperclips-header-mobile.svg";
+import paperclipsThree from "assets/paperclips-header.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";
+
+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/phosphor-home#phosphor-icons",
     "_blank",
     "noopener noreferrer"
   );
@@ -40,126 +38,58 @@ const handleScrollToIcons = () =>
 const Header: React.FC<HeaderProps> = () => {
   return (
     <header>
-      <div className="image-container">
+      <div className="header-contents">
+        <div className="illustrations-top">
           <img src={markerPurple} id="marker-purple" alt="" />
           <img src={paperclips} id="paperclips" alt="" />
+          <img src={paperclipsThree} id="paperclips-three" alt="" />
+          <img className="tablet" src={tabletSpec} alt="" />
+          <img className="tablet inspectable xray" src={tablet} alt="" />
+          <img className="billiard-ball" src={billiardBallSpec} alt="" />
+          <img
+            className="billiard-ball inspectable xray"
+            src={billiardBall}
+            alt=""
+          />
+
+          <img className="warning" src={warningSpec} alt="" />
+          <img className="warning inspectable xray" src={warning} alt="" />
+        </div>
         <div className="intro">
           <h2>
-            Phosphor Icons is a flexible icon family for interfaces, diagrams,
-            presentations — whatever really.
+            Phosphor is a flexible icon family for interfaces, diagrams,
+            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">
-            <a
-              className="nav-link"
-              href="https://phosphoricons.com/assets/phosphor-icons.zip"
-              download
-            >
-              Download all
-            </a>
-            <a
-              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>
+          <Links />
         </div>
+        <div className="illustrations-bottom">
+          <img className="cutting-mat" src={cuttingMatSpec} alt="" />
           <img
-            id="cutting-mat"
-            className="inspectable"
-            src={cuttingMatSpec}
-            alt=""
-          />
-          <motion.img
-            id="cutting-mat"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
+            className="cutting-mat inspectable xray"
             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 className="receipt" src={receiptSpec} alt="" />
+          <img className="receipt inspectable xray" src={receipt} alt="" />
+          <img className="calculator" src={calculatorSpec} alt="" />
           <img
-            id="calculator"
-            className="inspectable"
-            src={calculatorSpec}
-            alt=""
-          />
-          <motion.img
-            id="calculator"
-            className="inspectable"
-            variants={illustrationVariants}
-            initial="visible"
-            whileHover="hidden"
+            className="calculator inspectable xray"
             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,2 @@
+import Header from "./Header";
+export default Header;

src/components/IconGrid/DetailsPanel.tsx

@@ -0,0 +1,264 @@
+import React, { useRef, useEffect } from "react";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { motion } from "framer-motion";
+import { Svg2Png } from "svg2png-converter";
+import { saveAs } from "file-saver";
+import ReactGA from "react-ga";
+import { Copy, X, CheckCircle, Download } from "phosphor-react";
+
+import {
+  iconWeightAtom,
+  iconSizeAtom,
+  iconColorAtom,
+  iconPreviewOpenAtom,
+} from "state/atoms";
+import { IconEntry } from "lib";
+import useTransientState from "hooks/useTransientState";
+
+import TagCloud from "./TagCloud";
+
+const panelVariants = {
+  open: {
+    opacity: 1,
+    height: "100%",
+    marginTop: "4px",
+    marginBottom: "4px",
+    transition: { type: "tween", duration: 0.1 },
+  },
+  collapsed: {
+    opacity: 0,
+    height: "0px",
+    marginTop: "0px",
+    marginBottom: "0px",
+    transition: { type: "tween", duration: 0.1 },
+  },
+};
+
+const contentVariants = {
+  open: { opacity: 1, transition: { duration: 0.2, delay: 0.1 } },
+  collapsed: { opacity: 0, transition: { duration: 0 } },
+};
+
+const buttonColor = "#35313D";
+const successColor = "#1FA647";
+const disabledColor = "#B7B7B7";
+
+interface InfoPanelProps {
+  index: number;
+  spans: number;
+  isDark: boolean;
+  entry: IconEntry;
+}
+
+const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
+  const { index, spans, isDark, entry } = props;
+  const { name, Icon, categories, tags } = entry;
+  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);
+
+  useEffect(
+    () => ReactGA.event({ category: "Grid", action: "Details", label: name }),
+    [name]
+  );
+
+  const buttonBarStyle: React.CSSProperties = {
+    color: isDark ? "white" : buttonColor,
+  };
+  const snippetButtonStyle: React.CSSProperties =
+    weight === "duotone"
+      ? { color: disabledColor, userSelect: "none" }
+      : { color: buttonColor };
+
+  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!!.replace(
+      /([a-z0-9]|(?=[A-Z]))([A-Z])/g,
+      "$1-$2"
+    ).toLowerCase()} :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 handleCopySVG = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.currentTarget.blur();
+    setCopied("svg");
+    ref.current && void navigator.clipboard?.writeText(ref.current.outerHTML);
+  };
+
+  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 handleDownloadPNG = async (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.currentTarget.blur();
+    if (!ref.current?.outerHTML) return;
+    Svg2Png.save(
+      ref.current,
+      `${name}${weight === "regular" ? "" : `-${weight}`}.png`,
+      { scaleX: 2.667, scaleY: 2.667 }
+    );
+  };
+
+  return (
+    <motion.section
+      className="info-box"
+      animate="open"
+      exit="collapsed"
+      variants={panelVariants}
+      style={{
+        order: index + (spans - (index % spans)),
+        color: isDark ? "white" : "black",
+      }}
+    >
+      <motion.div
+        initial="collapsed"
+        animate="open"
+        exit="collapsed"
+        variants={contentVariants}
+        className="icon-preview"
+      >
+        <Icon ref={ref} color={color} weight={weight} size={192} />
+        <p>{name}</p>
+        <TagCloud
+          name={name}
+          tags={Array.from(
+            new Set<string>([...categories, ...name.split("-"), ...tags])
+          )}
+          isDark={isDark}
+        />
+      </motion.div>
+      <motion.div
+        initial="collapsed"
+        animate="open"
+        exit="collapsed"
+        variants={contentVariants}
+        className="icon-usage"
+      >
+        <div className="snippet">
+          React
+          <pre tabIndex={0}>
+            <span>{snippets.react}</span>
+            <button
+              title="Copy snippet"
+              onClick={(e) => handleCopySnippet(e, "react")}
+            >
+              {copied === "react" ? (
+                <CheckCircle size={24} color={successColor} weight="fill" />
+              ) : (
+                <Copy size={24} color={buttonColor} weight="fill" />
+              )}
+            </button>
+          </pre>
+        </div>
+        <div className="snippet">
+          Vue
+          <pre tabIndex={0}>
+            <span>{snippets.vue}</span>
+            <button
+              title="Copy snippet"
+              onClick={(e) => handleCopySnippet(e, "vue")}
+            >
+              {copied === "vue" ? (
+                <CheckCircle size={24} color={successColor} weight="fill" />
+              ) : (
+                <Copy size={24} color={buttonColor} weight="fill" />
+              )}
+            </button>
+          </pre>
+        </div>
+        <div className="snippet">
+          HTML/CSS
+          <pre tabIndex={0} style={snippetButtonStyle}>
+            <span>{snippets.html}</span>
+            <button
+              title="Copy snippet"
+              onClick={(e) => handleCopySnippet(e, "html")}
+              disabled={weight === "duotone"}
+              style={snippetButtonStyle}
+            >
+              {copied === "html" ? (
+                <CheckCircle size={24} color={successColor} weight="fill" />
+              ) : (
+                <Copy
+                  size={24}
+                  color={snippetButtonStyle.color}
+                  weight="fill"
+                />
+              )}
+            </button>
+          </pre>
+        </div>
+        <div className="button-row">
+          <button style={buttonBarStyle} onClick={handleDownloadPNG}>
+            <Download size={32} color="currentColor" weight="fill" /> Download
+            PNG
+          </button>
+          <button style={buttonBarStyle} onClick={handleDownloadSVG}>
+            <Download size={32} color="currentColor" weight="fill" /> Download
+            SVG
+          </button>
+          <button style={buttonBarStyle} onClick={handleCopySVG}>
+            {copied === "svg" ? (
+              <CheckCircle size={32} color={successColor} weight="fill" />
+            ) : (
+              <Copy size={32} color="currentColor" weight="fill" />
+            )}
+            {copied === "svg" ? "Copied!" : "Copy SVG"}
+          </button>
+        </div>
+      </motion.div>
+      <motion.span
+        initial="collapsed"
+        animate="open"
+        exit="collapsed"
+        variants={contentVariants}
+        title="Close"
+      >
+        <X
+          className="close-icon"
+          tabIndex={0}
+          color={buttonBarStyle.color}
+          size={32}
+          weight="fill"
+          onClick={() => setOpen(false)}
+          onKeyDown={(e) => {
+            e.key === "Enter" && setOpen(false);
+          }}
+        />
+      </motion.span>
+    </motion.section>
+  );
+};
+
+export default DetailsPanel;

src/components/IconGrid/IconGrid.css

@@ -1,6 +1,7 @@
 .grid-container {
-  padding: 0px 16px 4px;
+  padding: 32px 16px;
   min-height: 80vh;
+  content-visibility: auto;
 }
 
 .grid {
@@ -21,13 +22,15 @@
   justify-content: center;
   margin: 4px;
   border-radius: 16px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
+  /* transition: background-color 100ms ease; */
 }
 
 .grid-item:hover {
   background-color: rgba(163, 159, 171, 0.1);
-  transition: background-color 0.2s;
 }
 
 .grid-item:focus {
@@ -43,16 +46,32 @@
   text-align: center;
 }
 
+@media screen and (max-width: 536px) {
+  .grid-container {
+    padding: 32px 8px;
+  }
+
+  .grid-item {
+    width: 108px;
+    height: unset;
+    padding: 4px 0;
+    justify-content: flex-start;
+    border: 2px solid transparent;
+  }
+
+  .grid-item p {
+    padding: 0 4px;
+  }
+}
+
 .info-box {
   position: relative;
   display: flex;
   width: 100%;
   height: 0px;
-  margin: 0px;
+  margin: 0 4px;
   border-radius: 16px;
   background-color: rgba(163, 159, 171, 0.1);
-  overflow-y: hidden;
-  overflow-x: auto;
 }
 
 @media screen and (max-width: 1023px) {
@@ -63,20 +82,23 @@
   .icon-usage {
     padding-left: 10% !important;
   }
+
+  .snippet pre {
+    padding: 12px 8px 12px 20px;
+  }
 }
 
 .icon-preview {
-  height: 396px;
   width: 30%;
   display: flex;
   text-align: center;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  margin-top: 72px;
 }
 
 .icon-preview p {
-  margin: 12px 0 0;
+  margin: 0;
   font-size: 12px;
   line-height: 16px;
 }
@@ -91,13 +113,13 @@
 }
 
 .snippet pre {
-  /* white-space: nowrap; */
-  /* overflow: hidden; */
+  display: flex;
+  align-items: center;
   text-overflow: ellipsis;
   color: black;
-  user-select: all;
   -moz-user-select: all;
   -webkit-user-select: all;
+  user-select: all;
 }
 
 .snippet pre:focus {
@@ -106,18 +128,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 +152,7 @@
 
 .button-row {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .button-row button {
@@ -156,10 +182,11 @@
   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 +194,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 0;
 }
 
 .beacon {
   position: relative;
-  top: -64px;
+  top: -96px;
 }

src/components/IconGrid/IconGrid.tsx

@@ -3,16 +3,28 @@ import { useRecoilValue } from "recoil";
 import { motion, useAnimation } from "framer-motion";
 import { IconContext } from "phosphor-react";
 
-import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
+import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "state/atoms";
 import {
   filteredQueryResultsSelector,
   isDarkThemeSelector,
-} from "../../state/selectors";
-import useGridSpans from "../../hooks/useGridSpans";
+} from "state/selectors";
+import useGridSpans from "hooks/useGridSpans";
+
 import IconGridItem from "./IconGridItem";
-import Warn from "../Warn/Warn";
+import TagCloud from "./TagCloud";
+import Notice from "components/Notice";
+
 import "./IconGrid.css";
 
+const defaultSearchTags = [
+  "*new*",
+  "communication",
+  "editor",
+  "emoji",
+  "maps",
+  "weather",
+];
+
 type IconGridProps = {};
 
 const IconGrid: React.FC<IconGridProps> = () => {
@@ -31,7 +43,13 @@ 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" isDark={isDark} tags={defaultSearchTags} />
+      </Notice>
+    );
 
   return (
     <IconContext.Provider value={{ weight, size, color, mirrored: false }}>
@@ -52,7 +70,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
               index={index}
               spans={spans}
               isDark={isDark}
-              {...iconEntry}
+              entry={iconEntry}
               originOffset={originOffset}
             />
           ))}

src/components/IconGrid/IconGridItem.tsx

@@ -6,17 +6,16 @@ import React, {
 } from "react";
 import { useRecoilState } from "recoil";
 import { motion, AnimatePresence } from "framer-motion";
-import { IconProps, Icon } from "phosphor-react";
 
-import { iconPreviewOpenAtom } from "../../state/atoms";
-import InfoPanel from "./InfoPanel";
+import { IconEntry } from "lib";
+import { iconPreviewOpenAtom } from "state/atoms";
+import DetailsPanel from "./DetailsPanel";
 
-interface IconGridItemProps extends IconProps {
+interface IconGridItemProps {
   index: number;
   spans: number;
   isDark: boolean;
-  name: string;
-  Icon: Icon;
+  entry: IconEntry;
   originOffset: MutableRefObject<{ top: number; left: number }>;
 }
 
@@ -33,7 +32,8 @@ const itemVariants = {
 };
 
 const IconGridItem: React.FC<IconGridItemProps> = (props) => {
-  const { index, originOffset, name, Icon } = props;
+  const { index, originOffset, entry } = props;
+  const { name, Icon } = entry;
   const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
   const isOpen = open === name;
   const delayRef = useRef<number>(0);
@@ -87,7 +87,7 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         <p>{name}</p>
       </motion.div>
       <AnimatePresence initial={false}>
-          {isOpen && <InfoPanel {...props} />}
+        {isOpen && <DetailsPanel {...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,32 @@
+.tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 24px;
+}
+
+button.tag-button {
+  margin: 4px;
+  border-radius: 4px;
+  background-color: rgba(194, 186, 196, 0.25);
+  outline: none;
+  cursor: pointer;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+}
+
+button.tag-button:hover {
+  background-color: rgba(194, 186, 196, 0.7);
+}
+
+button.tag-button:focus {
+  box-shadow: 0 0 0 1px rgba(194, 186, 196, 0.7);
+}
+
+.tag-button code {
+  padding: 4px;
+  font-size: 12px;
+}
+
+.dark {
+  color: white;
+}

src/components/IconGrid/TagCloud.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { useSetRecoilState } from "recoil";
+
+import { searchQueryAtom } from "state/atoms";
+
+import "./TagCloud.css";
+
+interface TagCloudProps {
+  name: string;
+  tags: string[];
+  isDark: boolean;
+}
+
+const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
+  const setQuery = useSetRecoilState(searchQueryAtom);
+  const handleTagClick = useCallback(
+    (tag: string) => {
+      setQuery(tag);
+      document.getElementById("search-input")?.focus();
+    },
+    [setQuery]
+  );
+
+  return (
+    <div className="tag-cloud">
+      {tags.map((tag) => (
+        <button
+          key={`${name}-tag-${tag}`}
+          className="tag-button"
+          onClick={() => void handleTagClick(tag)}
+        >
+          <code className={`${isDark ? "dark" : ""}`}>{tag}</code>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TagCloud;

src/components/IconGrid/index.ts

@@ -0,0 +1,2 @@
+import IconGrid from "./IconGrid";
+export default 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;
+}
+
+.nav-link {
+  text-decoration: none;
+  position: relative;
+  color: black;
+  cursor: pointer;
+}
+
+.nav-link:after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0%;
+  border-bottom: 1px solid black;
+  transition: 0.2s;
+}
+
+.nav-link:hover:after {
+  width: 100%;
+}

src/components/Links/Links.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { OutboundLink } from "react-ga";
+import { useSetRecoilState } from "recoil";
+import { ArrowElbowDownRight } from "phosphor-react";
+
+import { iconCount } from "lib/icons";
+import { modalSelector } from "state/selectors";
+import DonationModal from "components/Modal/DonationModal";
+
+import "./Links.css";
+
+interface LinksProps {}
+
+const Links: React.FC<LinksProps> = () => {
+  const openModal = useSetRecoilState(modalSelector);
+  const openDonationModal = () => openModal({ type: DonationModal });
+
+  const delayedOpenDonationModal = () => setTimeout(openDonationModal, 2000);
+
+  return (
+    <div className="links">
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          className="nav-link"
+          to="https://phosphoricons.com/assets/phosphor-icons.zip"
+          eventLabel="Download all"
+          download
+          type="application/zip"
+          onClick={delayedOpenDonationModal}
+        >
+          Download all ({iconCount})
+        </OutboundLink>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <span>
+          <OutboundLink
+            className="nav-link"
+            to="https://www.figma.com/community/file/903830135544202908/Phosphor-Icons"
+            eventLabel="Figma library"
+          >
+            Figma library
+          </OutboundLink>
+          {" / "}
+          <OutboundLink
+            className="nav-link"
+            to="https://www.figma.com/community/plugin/898620911119764089/Phosphor-Icons"
+            eventLabel="Figma plugin"
+          >
+            plugin
+          </OutboundLink>
+        </span>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <a
+          className="nav-link"
+          href="https://github.com/phosphor-icons/phosphor-home/issues"
+        >
+          Request an icon
+        </a>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <span className="nav-link" onClick={openDonationModal}>
+          Donate
+        </span>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <a className="nav-link" href="https://patreon.com/phosphoricons">
+          Support us on Patreon
+        </a>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <a
+          className="nav-link"
+          href="https://github.com/phosphor-icons/phosphor-home"
+        >
+          GitHub
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Links;

src/components/Links/index.ts

@@ -0,0 +1,2 @@
+import Links from "./Links";
+export default Links;

src/components/Modal/DonationModal/DonationModal.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+
+import { ModalInstance } from "../Modal";
+import DonationStepMethod from "./DonationStepMethod";
+import DonationStepDropin from "./DonationStepDropin";
+import DonationStepThanks from "./DonationStepThanks";
+
+const routes = [DonationStepMethod, DonationStepDropin, DonationStepThanks];
+
+export enum DonationType {
+  FIVE_DOLLARS = 5,
+  TEN_DOLLARS = 10,
+  TWENTY_DOLLARS = 20,
+  FIFTY_DOLLARS = 50,
+  ONE_HUNDRED_DOLLARS = 100,
+  CUSTOM = -1,
+}
+
+interface RouteProps {
+  donationType: DonationType | undefined;
+  setDonationType: React.Dispatch<
+    React.SetStateAction<DonationType | undefined>
+  >;
+  donationAmount: number;
+  setDonationAmount: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export interface StepProps {
+  previousStep: () => void;
+  nextStep: () => void;
+  close: () => void;
+  routeProps: RouteProps;
+}
+
+interface StepperProps {
+  routes: Array<React.FC<StepProps>>;
+  routeProps: RouteProps;
+  close: () => void;
+}
+
+const Stepper: React.FC<StepperProps> = ({ routes, routeProps, close }) => {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  const previousStep = () => {
+    if (currentStep <= 0) return;
+    setTimeout(() => setCurrentStep((c) => c - 1), 500);
+  };
+
+  const nextStep = () => {
+    if (currentStep >= routes.length - 1) return;
+    setTimeout(() => setCurrentStep((c) => c + 1), 500);
+  };
+
+  const Component = routes[currentStep];
+
+  return (
+    <>
+      <Component
+        previousStep={previousStep}
+        nextStep={nextStep}
+        close={close}
+        routeProps={routeProps}
+      />
+    </>
+  );
+};
+
+const DonationModal = ({ close }: ModalInstance): JSX.Element => {
+  const [donationType, setDonationType] = useState<DonationType | undefined>();
+  const [donationAmount, setDonationAmount] = useState<number>(0);
+
+  return (
+    <>
+      <div className="modal-titlebar">
+        <h2>Donate</h2>
+      </div>
+      <Stepper
+        routes={routes}
+        routeProps={{
+          donationType,
+          setDonationType,
+          donationAmount,
+          setDonationAmount,
+        }}
+        close={close}
+      />
+    </>
+  );
+};
+
+export default DonationModal;

src/components/Modal/DonationModal/DonationStepDropin.tsx

@@ -0,0 +1,128 @@
+import React, { useRef, useState, useEffect } from "react";
+import dropin, { Dropin } from "braintree-web-drop-in";
+import axios from "axios";
+import { CurrencyCircleDollar } from "phosphor-react";
+
+import { StepProps } from "./DonationModal";
+
+const PaymentServer = axios.create({
+  baseURL: "https://us-central1-phosphor-14c61.cloudfunctions.net/paymentsApi",
+});
+
+const BT_PAYMENT_FIELDS = {
+  number: {
+    placeholder: "4111 1111 1111 1111",
+  },
+  cvv: {
+    placeholder: "123",
+  },
+  expirationDate: {
+    placeholder: "10/22",
+  },
+  cardholderName: {
+    placeholder: "Person McFace",
+  },
+};
+
+const PaymentModal: React.FC<StepProps> = ({
+  nextStep,
+  previousStep,
+  routeProps,
+}) => {
+  const instance = useRef<Dropin>();
+  const [isValid, setIsValid] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(false);
+
+  const { donationAmount } = routeProps;
+
+  const submit = async () => {
+    if (!instance.current) return;
+
+    setLoading(true);
+
+    try {
+      const payload = await instance.current.requestPaymentMethod();
+      console.log({ ...payload, donationAmount });
+      const response = await PaymentServer.post("/", {
+        ...payload,
+        donationAmount,
+      });
+
+      console.log({ response });
+      if (!!response.data?.success) {
+        nextStep();
+      } else {
+        setIsValid(false);
+      }
+    } catch (_e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const initializePayments = async () => {
+      try {
+        instance.current = await dropin.create({
+          authorization: "sandbox_246jdjxq_8h7hm5rvngkykjds",
+          container: "#braintree-dropin",
+          card: {
+            cardholderName: {
+              required: true,
+            },
+            overrides: {
+              fields: BT_PAYMENT_FIELDS,
+            },
+          },
+          paypal: {
+            flow: "checkout",
+            amount: donationAmount.toFixed(2).toString(),
+            currency: "USD",
+            commit: false,
+          },
+          paypalCredit: {
+            flow: "checkout",
+            amount: donationAmount.toFixed(2).toString(),
+            currency: "USD",
+            commit: false,
+          },
+          venmo: { allowNewBrowserTab: false },
+        });
+        instance.current.on("paymentMethodRequestable", () => setIsValid(true));
+        instance.current.on("noPaymentMethodRequestable", () =>
+          setIsValid(false)
+        );
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    initializePayments();
+  }, [donationAmount]);
+
+  return (
+    <>
+      <div id="braintree-dropin"></div>
+      <div className="donation-details">
+        <CurrencyCircleDollar size={64} weight="duotone" />
+        <span>
+          Preparing your ${routeProps.donationAmount.toFixed(2)} donation...
+        </span>
+      </div>
+      <div className="step-button-container">
+        <button className="main-button" onClick={previousStep}>
+          Back
+        </button>
+        <button
+          className="main-button"
+          onClick={submit}
+          disabled={isLoading || !isValid}
+        >
+          {isLoading ? "Processing..." : "Donate"}
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default PaymentModal;

src/components/Modal/DonationModal/DonationStepMethod.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+
+import { StepProps, DonationType } from "./DonationModal";
+
+const DonationStepMethod: React.FC<StepProps> = ({
+  previousStep,
+  nextStep,
+  close,
+  routeProps,
+}) => {
+  const { donationType, donationAmount, setDonationType, setDonationAmount } =
+    routeProps;
+
+  const onDonationChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDonationType(+e.target.value as DonationType);
+    if (!(+e.target.value === DonationType.CUSTOM))
+      setDonationAmount(+e.target.value);
+  };
+
+  void previousStep;
+
+  return (
+    <>
+      <h3>
+        Thanks for using Phosphor! Would you like to make a donation to help
+        support our work?
+      </h3>
+      <div className="radio-group">
+        <div className="radio-button">
+          <input
+            type="radio"
+            id="donate-5"
+            name="donation-type"
+            value={DonationType.FIVE_DOLLARS}
+            checked={donationType === DonationType.FIVE_DOLLARS}
+            onChange={onDonationChange}
+          />
+          <label htmlFor="donate-5">$5</label>
+        </div>
+        <div className="radio-button">
+          <input
+            type="radio"
+            id="donate-10"
+            name="donation-type"
+            value={DonationType.TEN_DOLLARS}
+            checked={donationType === DonationType.TEN_DOLLARS}
+            onChange={onDonationChange}
+          />
+          <label htmlFor="donate-10">$10</label>
+        </div>
+        <div className="radio-button">
+          <input
+            type="radio"
+            id="donate-20"
+            name="donation-type"
+            value={DonationType.TWENTY_DOLLARS}
+            checked={donationType === DonationType.TWENTY_DOLLARS}
+            onChange={onDonationChange}
+          />
+          <label htmlFor="donate-20">$20</label>
+        </div>
+        <div className="radio-button">
+          <input
+            type="radio"
+            id="donate-50"
+            name="donation-type"
+            value={DonationType.FIFTY_DOLLARS}
+            checked={donationType === DonationType.FIFTY_DOLLARS}
+            onChange={onDonationChange}
+          />
+          <label htmlFor="donate-50">$50</label>
+        </div>
+        <div className="radio-button">
+          <input
+            type="radio"
+            id="donate-100"
+            name="donation-type"
+            value={DonationType.ONE_HUNDRED_DOLLARS}
+            checked={donationType === DonationType.ONE_HUNDRED_DOLLARS}
+            onChange={onDonationChange}
+          />
+          <label htmlFor="donate-100">$100</label>
+        </div>
+        <div className="radio-button">
+          <input
+            type="radio"
+            id="donate-custom"
+            name="donation-type"
+            value={DonationType.CUSTOM}
+            checked={donationType === DonationType.CUSTOM}
+            onChange={onDonationChange}
+          />
+          <label htmlFor="donate-custom">
+            Other: $
+            <input
+              type="number"
+              min={2}
+              max={1000000}
+              id="donate-custom"
+              value={donationAmount}
+              disabled={donationType !== DonationType.CUSTOM}
+              onChange={(e) => setDonationAmount(+e.target.value)}
+            />
+          </label>
+        </div>
+      </div>
+      <div className="step-button-container">
+        <button className="main-button" onClick={close}>
+          No thanks
+        </button>
+        <button
+          className="main-button"
+          onClick={nextStep}
+          disabled={!(donationType && donationAmount)}
+        >
+          Next
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default DonationStepMethod;

src/components/Modal/DonationModal/DonationStepThanks.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const DonationStepThanks: React.FC<{}> = () => {
+  return null;
+};
+
+export default DonationStepThanks;

src/components/Modal/DonationModal/index.ts

@@ -0,0 +1,2 @@
+import DonationModal from "./DonationModal";
+export default DonationModal;

src/components/Modal/Modal.css

@@ -0,0 +1,85 @@
+.modal-container {
+  position: fixed;
+  display: grid;
+  place-items: center;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 10;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  min-height: 600px;
+  background-color: white;
+  border-radius: 8px;
+  border: 2px solid black;
+  padding: 24px;
+}
+
+@media screen and (max-width: 480px) {
+  .modal-content {
+    position: fixed;
+    inset: 0;
+    width: unset;
+    min-height: unset;
+    border: none;
+    border-radius: 0;
+  }
+}
+
+.step-button-container {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.donation-details {
+  display: grid;
+  place-items: center;
+  padding: 32px;
+}
+
+button.modal-close-button {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  box-sizing: content-box;
+  z-index: 1;
+}
+
+.modal-titlebar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-titlebar > * {
+  margin: 0;
+}
+
+.payment-methods {
+  display: grid;
+  gap: 16px;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.payment-methods button {
+  margin: 0;
+  padding: 0;
+  justify-content: center;
+  height: 96px;
+}
+
+.payment-methods button > svg {
+  margin: 0;
+}

src/components/Modal/Modal.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { useLockBodyScroll } from "react-use";
+import { useHotkeys } from "react-hotkeys-hook";
+import { X } from "phosphor-react";
+
+import { modalAtom, modalOpenAtom } from "state/atoms";
+
+import "./Modal.css";
+
+export interface ModalInstance {
+  close: () => void;
+  children?: JSX.Element;
+}
+
+const Modal = (): JSX.Element | null => {
+  const Instance = useRecoilValue(modalAtom);
+  const [isModalOpen, setModalOpen] = useRecoilState(modalOpenAtom);
+  useHotkeys("esc", () => isModalOpen && setModalOpen(false), [isModalOpen]);
+  useLockBodyScroll(isModalOpen);
+
+  const close = () => setModalOpen(false);
+
+  if (!Instance || !isModalOpen) return null;
+
+  return (
+    <div className="modal-container">
+      <div className="modal-content">
+        <button className="modal-close-button" onClick={close}>
+          <X size={32} />
+        </button>
+        <Instance close={close} />
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/Modal/index.ts

@@ -0,0 +1,3 @@
+import Modal from "./Modal";
+export default Modal;
+

src/components/Notice/Notice.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useRecoilValue } from "recoil";
+import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
+
+import { isDarkThemeSelector } from "state/selectors";
+import { searchQueryAtom } from "state/atoms";
+
+interface NoticeProps {
+  message?: string;
+  type?: "wait" | "help" | "warn" | "none";
+}
+
+const Notice: React.FC<NoticeProps> = ({
+  message,
+  type = "warn",
+  children,
+}) => {
+  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 }}
+      >
+        {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,2 @@
+import Notice from "./Notice";
+export default Notice;

src/components/SearchInput/SearchInput.css

@@ -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,60 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef, MutableRefObject } 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-react";
+import ReactGA from "react-ga";
+
+import { searchQueryAtom } from "state/atoms";
 
-import { searchQueryAtom } from "../../state/atoms";
 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 [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(
     () => {
+      if (value !== query) {
         setQuery(value);
-      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 +69,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"
@@ -49,6 +83,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
           key === "Enter" && currentTarget.blur()
         }
       />
+      {!value && !isMobile && <Keys>{isApple ? <Command /> : "Ctrl + "}K</Keys>}
       {value ? (
         isReady() ? (
           <X className="clear-icon" size={18} onClick={handleCancelSearch} />
@@ -60,4 +95,8 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   );
 };
 
+const Keys: React.FC<{}> = ({ children }) => (
+  <div className="keys">{children}</div>
+);
+
 export default SearchInput;

src/components/SearchInput/index.ts

@@ -0,0 +1,2 @@
+import SearchInput from "./SearchInput";
+export default SearchInput;

src/components/SizeInput/SizeInput.css

@@ -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 */

src/components/SizeInput/SizeInput.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from "react";
 import { useRecoilState } from "recoil";
 
-import { iconSizeAtom } from "../../state/atoms";
+import { iconSizeAtom } from "state/atoms";
+
 import "./SizeInput.css";
 
 type SizeInputProps = {};

src/components/SizeInput/index.ts

@@ -0,0 +1,2 @@
+import SizeInput from "./SizeInput";
+export default SizeInput;

src/components/StyleInput/StyleInput.tsx

@@ -1,10 +1,11 @@
-import React from "react";
-import { useSetRecoilState } from "recoil";
+import React, { useMemo } from "react";
+import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
 
-import { iconWeightAtom } from "../../state/atoms";
-import { IconStyle } from "../../lib";
+import { iconWeightAtom } from "state/atoms";
+import { IconStyle } from "lib";
+
 import "./StyleInput.css";
 
 type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
@@ -45,7 +46,12 @@ const options: WeightOption[] = [
 type StyleInputProps = {};
 
 const StyleInput: React.FC<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,2 @@
+import StyleInput from "./StyleInput";
+export default StyleInput;

src/components/Toolbar/Toolbar.css

@@ -1,4 +1,5 @@
-menu.toolbar {
+nav.toolbar {
+  position: -webkit-sticky;
   position: sticky;
   top: -1px;
   padding: 0;

src/components/Toolbar/Toolbar.tsx

@@ -1,23 +1,24 @@
 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 "./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 />
       </div>
-    </menu>
+    </nav>
   );
 };
 

src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+import Toolbar from "./Toolbar";
+export default 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,8 @@
+export { default as useDebounce } from "./useDebounce";
+export { default as useGridSpans } from "./useGridSpans";
+export { default as useIconParameters } from "./useIconParameters";
+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/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/useGridSpans.ts

@@ -1,13 +1,18 @@
 import { useWindowSize } from "react-use";
 
+const MOBILE_BREAKPOINT = 536;
+
 const GRID_PADDING = 32; // .grid-container { padding }
 const TOOLBAR_WIDTH = 17; // IS THIS BROWSER-SPECIFIC?
 const MAX_GRID_WIDTH = 1120; // .grid { max-width }
 const ITEM_WIDTH = 168; // .grid-item { width; height; margin }
+const ITEM_WIDTH_MOBILE = 108; // .grid-item { width; height; margin }
 
 export default (): number => {
   const { width } = useWindowSize();
+  const itemWidth = width <= MOBILE_BREAKPOINT ? ITEM_WIDTH_MOBILE : ITEM_WIDTH;
+
   return Math.floor(
-    Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / ITEM_WIDTH
+    Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / itemWidth
   );
 };

src/hooks/useIconParameters.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useSearchParam } from "react-use";
+import { useSetRecoilState } from "recoil";
+import TinyColor from "tinycolor2";
+import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms";
+import { IconStyle } from "../lib";
+
+export default () => {
+  const weight = useSearchParam("weight")?.replace(/["']/g, "");
+  const size = useSearchParam("size")?.replace(/["']/g, "");
+  const color = useSearchParam("color")?.replace(/["']/g, "");
+
+  const setColor = useSetRecoilState(iconColorAtom);
+  const setWeight = useSetRecoilState(iconWeightAtom);
+  const setSize = useSetRecoilState(iconSizeAtom);
+
+  useEffect(() => {
+    if (weight) {
+      if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle);
+    }
+  }, [weight, setWeight]);
+
+  useEffect(() => {
+    if (size) {
+      const normalizedSize = parseInt(size);
+      if (typeof normalizedSize === "number" && isFinite(normalizedSize))
+        setSize(Math.min(Math.max(normalizedSize, 16), 96));
+    }
+  }, [size, setSize]);
+
+  useEffect(() => {
+    if (color) {
+      const normalizedColor = TinyColor(color);
+      if (normalizedColor.isValid()) setColor(normalizedColor.toHexString());
+    }
+  }, [color, setColor]);
+};

src/hooks/useThrottle.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react";
+import useUnmount from "./useUnmount";
+
+const useThrottle = <T>(value: T, ms: number = 200) => {
+  const [state, setState] = useState<T>(value);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const nextValue = useRef(null) as any;
+  const hasNextValue = useRef(0) as any;
+
+  useEffect(() => {
+    if (!timeout.current) {
+      setState(value);
+      const timeoutCallback = () => {
+        if (hasNextValue.current) {
+          hasNextValue.current = false;
+          setState(nextValue.current);
+          timeout.current = setTimeout(timeoutCallback, ms);
+        } else {
+          timeout.current = undefined;
+        }
+      };
+      timeout.current = setTimeout(timeoutCallback, ms);
+    } else {
+      nextValue.current = value;
+      hasNextValue.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  useUnmount(() => {
+    timeout.current && clearTimeout(timeout.current);
+  });
+
+  return state;
+};
+
+export default useThrottle;

src/hooks/useTimeoutFn.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+
+export default function useTimeoutFn(
+  fn: Function,
+  ms: number = 0
+): UseTimeoutFnReturn {
+  const ready = useRef<boolean | null>(false);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const callback = useRef(fn);
+
+  const isReady = useCallback(() => ready.current, []);
+
+  const set = useCallback(() => {
+    ready.current = false;
+    timeout.current && clearTimeout(timeout.current);
+
+    timeout.current = setTimeout(() => {
+      ready.current = true;
+      callback.current();
+    }, ms);
+  }, [ms]);
+
+  const clear = useCallback(() => {
+    ready.current = null;
+    timeout.current && clearTimeout(timeout.current);
+  }, []);
+
+  // update ref when function changes
+  useEffect(() => {
+    callback.current = fn;
+  }, [fn]);
+
+  // set on mount, clear on unmount
+  useEffect(() => {
+    set();
+
+    return clear;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ms]);
+
+  return [isReady, clear, set];
+}

src/hooks/useUnmount.ts

@@ -0,0 +1,12 @@
+import { useRef, useEffect } from "react";
+
+const useUnmount = (fn: () => any): void => {
+  const fnRef = useRef(fn);
+
+  // update the ref each render so if it change the newest callback will be invoked
+  fnRef.current = fn;
+
+  useEffect(() => () => fnRef.current(), []);
+};
+
+export default useUnmount;

src/index.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import * as serviceWorker from "./serviceWorker";
-import App from "./components/App/App";
 import { RecoilRoot } from "recoil";
+import * as serviceWorker from "./serviceWorker";
+import App from "./components/App";
+import ReactGA from "react-ga";
+
+ReactGA.initialize("UA-179205759-1", { titleCase: false });
+ReactGA.pageview(window.location.pathname);
 
 ReactDOM.render(
   <React.StrictMode>
@@ -17,3 +21,54 @@ ReactDOM.render(
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
+
+// prettier-ignore
+console.log(`
+%c  sphorphosphor  %co%cspho
+%c  s%cphorphosphor  %co%csphorpho%cs
+%c o %cp%chorphosphor  %co%csphorphosph%co
+%ch%co%cs %ch%corphosphor  %co%csphorphosphor%cp
+%ch%cos%cp  %cr%cphosphor  %co%csphorphosphorp%ch
+%ch%cosp%ch  %cp%chosphor  %co%csphorphosphorph%co
+%ch%cosph%co  %ch%cosphor  %co%csphorphosphorph%co
+%ch%cospho%cr  %co%csphor  %co%csphorphosphorph%co
+%ch%cosphor%cp  %cs%cphor  %co%csphorphosphorph%co
+%ch%cosphorph%co  %ch%cor  %co%csphorphosphorp%ch
+%ch%cosphorpho%cs  %co%cr  %co%csphorphosphor%cp
+%ch%cosphorphos%cp  %cr  %co%csphorphosph%co
+%ch%cosphorphosp%ch    %co%csphorphos%cp
+%ch%cosphorphosph%co   %co%cspho%crph
+%c osphorphospho%cr
+%c o%csphorphospho%cr
+%c o%csphorphospho%cr
+%c  s%cphorphospho%cr
+%c    h%corphospho%cr
+%c      r%cphospho%cr
+%c          s%cpho%cr
+
+%cThanks for your interest in Phosphor <3
+Hire me at https://tobiasfried.com
+`,
+"color: #8861A8;", "color: #442B78;", "color: #5B399F;",
+"color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #8861A8;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #CE93FE;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #F7AC49;", "color: #65461E;", "color: #442B78;", "color: #925BFF;", "color: #442B78;",
+"color: #65461E;", "color: #A17030;", "color: #65461E;", "color: #442B78;", "color: #5B399F;", "color: #442B78;",
+"color: #0E481F;", "color: #0E481E;",
+"color: #0E481F;", "color: #0EA147;", "color: #19873A;",
+"color: #0E481F;", "color: #0EA147;", "color: #19873A;",
+"color: #0E481F;", "color: #0EA147;", "color: #19873A;",
+"color: #0E481F;", "color: #0EA147;", "color: #19873A;",
+"color: #0E481F;", "color: #0EA147;", "color: #19873A;",
+"color: #0E481F;", "color: #0EA147;", "color: #19873A;",
+"color: #A17030;"
+);

src/lib/index.ts

@@ -10,22 +10,24 @@ export enum IconStyle {
 }
 
 export enum IconCategory {
-  BRAND = "Brands",
-  BUSINESS = "Businesses",
-  COMMUNICATION = "Communications",
-  DESIGN = "Design",
-  DEVELOPMENT = "Development",
-  DEVICE = "Devices",
-  DOCUMENT = "Documents",
-  EDITOR = "Editors",
-  FINANCE = "Finances",
-  HEALTH = "Health & Medical",
-  MAP = "Maps",
-  MEDIA = "Media",
-  SYSTEM = "System",
-  USERS = "Users",
-  WEATHER = "Weather",
-  OTHER = "Other",
+  ARROWS = "arrows",
+  BRAND = "brands",
+  COMMERCE = "commerce",
+  COMMUNICATION = "communications",
+  DESIGN = "design",
+  DEVELOPMENT = "technology & development",
+  OFFICE = "office",
+  EDITOR = "editor",
+  FINANCE = "finances",
+  GAMES = "games",
+  HEALTH = "health & wellness",
+  MAP = "maps & travel",
+  MEDIA = "media",
+  NATURE = "nature",
+  OBJECTS = "objects",
+  PEOPLE = "people",
+  SYSTEM = "system",
+  WEATHER = "weather",
 }
 
 export interface IconEntry {

src/state/atoms.ts

@@ -1,4 +1,5 @@
 import { atom } from "recoil";
+import { ModalInstance } from "../components/Modal/Modal";
 import { IconStyle } from "../lib";
 
 export const searchQueryAtom = atom<string>({
@@ -25,3 +26,13 @@ export const iconPreviewOpenAtom = atom<string | false>({
   key: "iconPreviewOpenAtom",
   default: false,
 });
+
+export const modalAtom = atom<((props: ModalInstance) => JSX.Element) | null>({
+  key: "modalAtom",
+  default: null,
+});
+
+export const modalOpenAtom = atom<boolean>({
+  key: "modalOpenAtom",
+  default: false,
+});

src/state/selectors.ts

@@ -1,10 +1,16 @@
-import { selector, selectorFamily } from "recoil";
+import { DefaultValue, selector, selectorFamily } from "recoil";
 import TinyColor from "tinycolor2";
 import Fuse from "fuse.js";
 
-import { searchQueryAtom, iconColorAtom } from "./atoms";
+import {
+  searchQueryAtom,
+  iconColorAtom,
+  modalAtom,
+  modalOpenAtom,
+} from "./atoms";
 import { IconEntry, IconCategory } from "../lib";
 import { icons } from "../lib/icons";
+import { ModalInstance } from "../components/Modal/Modal";
 
 const fuse = new Fuse(icons, {
   keys: [{ name: "name", weight: 4 }, "tags", "categories"],
@@ -52,7 +58,9 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
   IconCategory
 >({
   key: "singleCategoryQueryResultsSelector",
-  get: (category: IconCategory) => ({ get }) => {
+  get:
+    (category: IconCategory) =>
+    ({ get }) => {
       const filteredResults = get(filteredQueryResultsSelector);
       return new Promise((resolve) =>
         resolve(
@@ -66,3 +74,24 @@ export const isDarkThemeSelector = selector<boolean>({
   key: "isDarkThemeSelector",
   get: ({ get }) => TinyColor(get(iconColorAtom)).isLight(),
 });
+
+export const modalSelector = selector<{
+  type: (props: ModalInstance) => JSX.Element;
+} | null>({
+  key: "openModalSelector",
+  set: ({ set }, instance) => {
+    if (instance instanceof DefaultValue || instance === null) {
+      set(modalAtom, null);
+      set(modalOpenAtom, false);
+      return;
+    }
+
+    set(modalAtom, () => instance.type!!);
+    set(modalOpenAtom, true);
+  },
+  get: ({ get }) => {
+    const currentModal = get(modalAtom);
+    if (!currentModal) return null;
+    return { type: currentModal };
+  },
+});