From d2c4bb4410e8ad45f440d2f7b4eaceab2cce7d64 Mon Sep 17 00:00:00 2001 From: draxvint Date: Tue, 14 Jan 2025 09:41:54 +0100 Subject: [PATCH] Refactored code and implemented several enhancements: - Removed unnecessary CSS for cleaner styling. - Created an Icon component for easier icon usage. - Fixed variations of the Button component to ensure consistent behavior. - Updated boards for icons and buttons to improve organization. - Implemented and refined fixes based on designer's feedback. - Integrated improvements and new utilities from the Wix team, addressing the product options select bug and image sizing in the categories section. - Further removed unused code and replaced non-standard icons with our own where applicable. - Improved the appearance of the user menu trigger button in the navigation for logged-in users. --- _codux/boards-global-setup.ts | 1 + .../ui-kit/buttons/buttons.board.module.scss | 9 - _codux/ui-kit/buttons/buttons.board.tsx | 67 +- .../components/components.board.module.scss | 4 - _codux/ui-kit/components/components.board.tsx | 27 +- .../sections/sections.board.module.scss | 3 - app/routes/about-us/route.module.scss | 23 - app/routes/cart/route.module.scss | 8 - .../members-area.my-orders/route.module.scss | 4 - app/routes/members-area/route.module.scss | 3 - .../route.module.scss | 7 - .../product-details.$productSlug/route.tsx | 9 +- .../products.$categorySlug/route.module.scss | 45 - .../accordion/accordion.module.scss | 14 +- src/components/accordion/accordion.tsx | 11 +- .../applied-filter/applied-filter.tsx | 5 +- src/components/avatar/avatar.module.scss | 4 +- src/components/avatar/avatar.tsx | 4 +- .../cart-item-options.module.scss | 7 - .../cart-item-options/cart-item-options.tsx | 5 +- .../cart/cart-item/cart-item.module.scss | 30 - src/components/cart/cart-item/cart-item.tsx | 55 +- .../cart/cart-view/cart-view.module.scss | 14 - .../categories-section/categories-section.tsx | 6 +- src/components/dialog/dialog.tsx | 5 +- .../featured-products-section.module.scss | 14 - src/components/footer/footer.module.scss | 15 - src/components/header/header.module.scss | 24 +- src/components/header/header.tsx | 7 +- src/components/icons/arrow-right-icon.tsx | 10 - .../icons/cart-icon/cart-icon.module.scss | 24 - src/components/icons/cart-icon/cart-icon.tsx | 16 - src/components/icons/chevron-right-icon.tsx | 7 - src/components/icons/cross-icon.tsx | 7 - src/components/icons/cross-small-icon.tsx | 8 - src/components/icons/dropdown-icon.tsx | 12 - src/components/icons/error-icon.tsx | 10 - src/components/icons/facebook-icon.tsx | 16 - src/components/icons/icon.tsx | 17 + src/components/icons/iconNames.ts | 3902 +++++++++++++++++ .../icons/image-placeholder-icon.tsx | 14 - src/components/icons/index.ts | 18 - src/components/icons/lock-icon.tsx | 11 - src/components/icons/menu-icon.tsx | 14 - src/components/icons/minus-icon.tsx | 7 - src/components/icons/pinterest-icon.tsx | 16 - src/components/icons/plus-icon.tsx | 7 - src/components/icons/search-icon.tsx | 8 - src/components/icons/trash-icon.tsx | 10 - src/components/icons/user-icon.tsx | 7 - src/components/icons/whatsapp-icon.tsx | 16 - .../label-with-arrow/label-with-arrow.tsx | 5 +- .../navigation-menu.module.scss | 10 +- .../navigation-menu/navigation-menu.tsx | 2 +- .../navigation-progress-bar.module.scss | 16 - .../order-item/order-item.module.scss | 19 +- .../order-summary/order-item/order-item.tsx | 5 +- .../order-summary/order-summary.module.scss | 7 - .../product-card/product-card.module.scss | 29 +- src/components/product-card/product-card.tsx | 68 +- .../product-filters/product-filters.tsx | 34 +- .../product-grid/product-grid.module.scss | 12 - .../product-images/product-images.module.scss | 6 - .../product-images/product-images.tsx | 7 +- .../product-option/product-option.tsx | 16 +- .../products-spotlight.module.scss | 7 +- .../quantity-input/quantity-input.tsx | 5 +- src/components/search-input/search-input.tsx | 1 - src/components/select/select.tsx | 22 +- .../share-product-links.tsx | 7 +- .../sidebar-navigation-menu.tsx | 5 +- src/components/toast/toast.module.scss | 13 - src/components/toast/toast.tsx | 5 +- src/components/user-menu/user-menu.tsx | 9 +- src/styles/colors.scss | 1 + src/styles/utils.scss | 87 +- src/wix/categories/category-details.ts | 13 + src/wix/categories/index.ts | 1 + src/wix/products/product-details.ts | 2 +- src/wix/utils/media.ts | 5 + 80 files changed, 4179 insertions(+), 827 deletions(-) delete mode 100644 src/components/icons/arrow-right-icon.tsx delete mode 100644 src/components/icons/cart-icon/cart-icon.module.scss delete mode 100644 src/components/icons/cart-icon/cart-icon.tsx delete mode 100644 src/components/icons/chevron-right-icon.tsx delete mode 100644 src/components/icons/cross-icon.tsx delete mode 100644 src/components/icons/cross-small-icon.tsx delete mode 100644 src/components/icons/dropdown-icon.tsx delete mode 100644 src/components/icons/error-icon.tsx delete mode 100644 src/components/icons/facebook-icon.tsx create mode 100644 src/components/icons/icon.tsx create mode 100644 src/components/icons/iconNames.ts delete mode 100644 src/components/icons/image-placeholder-icon.tsx delete mode 100644 src/components/icons/index.ts delete mode 100644 src/components/icons/lock-icon.tsx delete mode 100644 src/components/icons/menu-icon.tsx delete mode 100644 src/components/icons/minus-icon.tsx delete mode 100644 src/components/icons/pinterest-icon.tsx delete mode 100644 src/components/icons/plus-icon.tsx delete mode 100644 src/components/icons/search-icon.tsx delete mode 100644 src/components/icons/trash-icon.tsx delete mode 100644 src/components/icons/user-icon.tsx delete mode 100644 src/components/icons/whatsapp-icon.tsx create mode 100644 src/wix/categories/category-details.ts diff --git a/_codux/boards-global-setup.ts b/_codux/boards-global-setup.ts index 18f0a2b..aa86def 100644 --- a/_codux/boards-global-setup.ts +++ b/_codux/boards-global-setup.ts @@ -3,3 +3,4 @@ import '~/src/styles/colors.scss'; import '~/src/styles/typography.scss'; import '~/src/styles/global.scss'; import '~/src/styles/utils.scss'; +import 'material-symbols'; diff --git a/_codux/ui-kit/buttons/buttons.board.module.scss b/_codux/ui-kit/buttons/buttons.board.module.scss index d1048d6..9f6fcf9 100644 --- a/_codux/ui-kit/buttons/buttons.board.module.scss +++ b/_codux/ui-kit/buttons/buttons.board.module.scss @@ -11,11 +11,6 @@ width: max(45px, 5vw); } -.itemsGroup .icon { - height: 30px; - overflow: hidden; -} - .demoWidth :global(.button) { width: 250px; } @@ -25,7 +20,3 @@ width: 100%; } } - -.icon.menuIcon { - padding-top: 4px; -} diff --git a/_codux/ui-kit/buttons/buttons.board.tsx b/_codux/ui-kit/buttons/buttons.board.tsx index bdf7c53..8513633 100644 --- a/_codux/ui-kit/buttons/buttons.board.tsx +++ b/_codux/ui-kit/buttons/buttons.board.tsx @@ -1,16 +1,9 @@ -import { createBoard, Variant } from '@wixc3/react-board'; -import { CartIcon, FacebookIcon, PinterestIcon, WhatsAppIcon } from '~/src/components/icons'; -import { LabelWithArrow } from '~/src/components/label-with-arrow/label-with-arrow'; -import { TrashIcon } from '../../../src/components/icons/trash-icon'; -import { LockIcon } from '../../../src/components/icons/lock-icon'; -import { ErrorIcon } from '../../../src/components/icons/error-icon'; -import { MenuIcon } from '../../../src/components/icons/menu-icon'; -import { ChevronRightIcon } from '../../../src/components/icons/chevron-right-icon'; -import { ArrowRightIcon } from '../../../src/components/icons/arrow-right-icon'; import { Kit } from '../ui-kit-utils/kit'; import classNames from 'classnames'; import styles from './buttons.board.module.scss'; +import { createBoard, Variant } from '@wixc3/react-board'; +import Icon from '~/src/components/icons/icon'; export default createBoard({ name: 'Buttons & Icons', @@ -19,36 +12,31 @@ export default createBoard({ - + Primary Button - + Primary Muted Button - + Secondary Button - - - Shop Now - - Label With Arrow - + You can use any Material Symbols icon from the Material Symbols library.
- +
Cart @@ -56,7 +44,7 @@ export default createBoard({
- +
Trash @@ -64,7 +52,7 @@ export default createBoard({
- +
Lock @@ -72,7 +60,7 @@ export default createBoard({
- +
Error @@ -80,7 +68,7 @@ export default createBoard({
- +
Menu @@ -88,7 +76,7 @@ export default createBoard({
- +
Chevron @@ -96,42 +84,13 @@ export default createBoard({
- +
Arrow
- - -
- -
- - - -
- WhatsApp - - -
- - - -
- Facebook - - -
- - - -
- Pinterest - -
- ), environmentProps: { diff --git a/_codux/ui-kit/components/components.board.module.scss b/_codux/ui-kit/components/components.board.module.scss index 79cf6b8..b3ff43e 100644 --- a/_codux/ui-kit/components/components.board.module.scss +++ b/_codux/ui-kit/components/components.board.module.scss @@ -2,10 +2,6 @@ width: 250px; } -.linkCardWrapper :global(.linkCard) { - aspect-ratio: 0.75; -} - @media (max-width: 480px) { .demoWidth { width: 100%; diff --git a/_codux/ui-kit/components/components.board.tsx b/_codux/ui-kit/components/components.board.tsx index 900e5b0..e050c19 100644 --- a/_codux/ui-kit/components/components.board.tsx +++ b/_codux/ui-kit/components/components.board.tsx @@ -3,8 +3,6 @@ import { Accordion } from '~/src/components/accordion/accordion'; import { ProductCard } from '~/src/components/product-card/product-card'; import { QuantityInput } from '~/src/components/quantity-input/quantity-input'; import { Select, SelectItem } from '~/src/components/select/select'; -import classNames from 'classnames'; -import { CategoryLink } from '~/src/components/category-link/category-link'; import { ColorSelect } from '~/src/components/color-select/color-select'; import ComponentWrapper from '_codux/board-wrappers/component-wrapper'; import { Kit } from '../ui-kit-utils/kit'; @@ -164,11 +162,17 @@ export default createBoard({ productOptions: [ { name: 'Color', - choices: ['Green' as products.Choice, 'Blue' as products.Choice], + choices: [ + 'Green' as products.Choice, + 'Blue' as products.Choice, + ], }, { name: 'Size', - choices: ['Small' as products.Choice, 'Medium' as products.Choice], + choices: [ + 'Small' as products.Choice, + 'Medium' as products.Choice, + ], }, ], } satisfies products.Product @@ -177,25 +181,12 @@ export default createBoard({ Product Card - - - - -
All Products
- - - Link Card - ), environmentProps: { - windowWidth: 588, + windowWidth: 550, windowHeight: 800, }, isSnippet: true, diff --git a/_codux/ui-kit/sections/sections.board.module.scss b/_codux/ui-kit/sections/sections.board.module.scss index 4836c4e..4386ec8 100644 --- a/_codux/ui-kit/sections/sections.board.module.scss +++ b/_codux/ui-kit/sections/sections.board.module.scss @@ -3,6 +3,3 @@ padding: 16px var(--pagePaddingHoriz); } -.container :global(.heroBanner) { - height: 600px; -} diff --git a/app/routes/about-us/route.module.scss b/app/routes/about-us/route.module.scss index 1aa669f..0bd0439 100644 --- a/app/routes/about-us/route.module.scss +++ b/app/routes/about-us/route.module.scss @@ -39,23 +39,10 @@ object-fit: cover; } -.aboutSection { - display: flex; - flex-direction: column; - justify-content: center; -} - .title { text-transform: uppercase; } -.subtitle { - font: var(--heading2); - font-size: 60px; - max-width: 600px; - margin-bottom: 6%; -} - .description { font-size: 22px; max-width: 80%; @@ -101,11 +88,6 @@ margin-bottom: 40px; } - .subtitle { - font: var(--heading3); - max-width: unset; - } - .description { font-size: 18px; } @@ -116,11 +98,6 @@ flex-direction: column; } - .subtitle { - font-size: 40px; - margin-bottom: 5%; - } - .description { max-width: unset; font-size: 14px; diff --git a/app/routes/cart/route.module.scss b/app/routes/cart/route.module.scss index 4e79e17..9e8af99 100644 --- a/app/routes/cart/route.module.scss +++ b/app/routes/cart/route.module.scss @@ -78,14 +78,6 @@ margin-bottom: 14px; } -.secureCheckout { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - font: var(--paragraph3); -} - /* Fallback for loading, error, and empty cart states */ .cartFallback { min-height: 300px; diff --git a/app/routes/members-area.my-orders/route.module.scss b/app/routes/members-area.my-orders/route.module.scss index 8b97a3e..a596ffb 100644 --- a/app/routes/members-area.my-orders/route.module.scss +++ b/app/routes/members-area.my-orders/route.module.scss @@ -67,10 +67,6 @@ border-bottom: 1px solid var(--border); } -.orderList { - border-top: 1px solid var(--primary5); -} - .emptyStateContainer { display: flex; flex-direction: column; diff --git a/app/routes/members-area/route.module.scss b/app/routes/members-area/route.module.scss index 3c866e1..a941507 100644 --- a/app/routes/members-area/route.module.scss +++ b/app/routes/members-area/route.module.scss @@ -30,6 +30,3 @@ width: 100%; border-bottom: 1px solid var(--border); } -.div2 { - gap: 12px; -} diff --git a/app/routes/product-details.$productSlug/route.module.scss b/app/routes/product-details.$productSlug/route.module.scss index 5734043..d052a65 100644 --- a/app/routes/product-details.$productSlug/route.module.scss +++ b/app/routes/product-details.$productSlug/route.module.scss @@ -25,13 +25,6 @@ font: var(--heading3); } -.sku { - margin-top: 8px; - font: var(--paragraph3); - line-height: 1; - color: var(--primary4); -} - .price { margin-top: 8px; font: var(--heading3); diff --git a/app/routes/product-details.$productSlug/route.tsx b/app/routes/product-details.$productSlug/route.tsx index f5e9761..110c865 100644 --- a/app/routes/product-details.$productSlug/route.tsx +++ b/app/routes/product-details.$productSlug/route.tsx @@ -34,11 +34,17 @@ export const getStaticRoutes: GetStaticRoutes = async () => { export default function ProductDetailsPage() { const { product } = useLoaderData(); + // The `key` ensures the component state, such as selected options or + // quantity, resets when navigating between products. + return ; +} + +function ProductDetails() { + const { product } = useLoaderData(); const { outOfStock, priceData, - sku, media, productOptions, quantity, @@ -62,7 +68,6 @@ export default function ProductDetailsPage() {

{product.name}

- {sku &&

SKU: {sku}

} {priceData && ( {isOpen ? collapseIcon || ( - + ) - : expandIcon || } + : expandIcon || ( + + )}
diff --git a/src/components/applied-filter/applied-filter.tsx b/src/components/applied-filter/applied-filter.tsx index e49312c..c63f2f4 100644 --- a/src/components/applied-filter/applied-filter.tsx +++ b/src/components/applied-filter/applied-filter.tsx @@ -1,5 +1,4 @@ import { getClickableElementAttributes } from '~/src/wix/utils'; -import { CrossIcon } from '../icons'; import styles from './applied-filter.module.scss'; @@ -12,7 +11,9 @@ export const AppliedFilter = ({ children, onClick }: AppliedFilterProps) => { return (
{children} - + + close +
); }; diff --git a/src/components/avatar/avatar.module.scss b/src/components/avatar/avatar.module.scss index b3c208e..b3ef8fd 100644 --- a/src/components/avatar/avatar.module.scss +++ b/src/components/avatar/avatar.module.scss @@ -1,6 +1,6 @@ .root { - width: 22px; - height: 22px; + width: 20px; + height: 20px; } .root :is(img, svg) { diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 624eed1..d0d6aef 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import { UserIcon } from '../icons'; import styles from './avatar.module.scss'; @@ -12,7 +11,8 @@ export interface AvatarProps { export const Avatar = ({ className, imageSrc }: AvatarProps) => { return (
- {imageSrc ? : } + {imageSrc ? : + person}
); }; diff --git a/src/components/cart/cart-item-options/cart-item-options.module.scss b/src/components/cart/cart-item-options/cart-item-options.module.scss index c01b903..6fe216d 100644 --- a/src/components/cart/cart-item-options/cart-item-options.module.scss +++ b/src/components/cart/cart-item-options/cart-item-options.module.scss @@ -19,10 +19,3 @@ color: var(--secondary3); } -.moreOptionsIcon { - width: 12px; -} - -.root.expanded .moreOptionsIcon { - transform: rotate(180deg); -} diff --git a/src/components/cart/cart-item-options/cart-item-options.tsx b/src/components/cart/cart-item-options/cart-item-options.tsx index 2c5dc58..658613c 100644 --- a/src/components/cart/cart-item-options/cart-item-options.tsx +++ b/src/components/cart/cart-item-options/cart-item-options.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import { cart } from '@wix/ecom'; import classNames from 'classnames'; -import { DropdownIcon } from '~/src/components/icons'; import styles from './cart-item-options.module.scss'; @@ -38,7 +37,9 @@ export const CartItemOptions = ({ onClick={toggleIsExpanded} > {isExpanded ? 'Less Details' : 'More Details'} - + + expand_more + )} diff --git a/src/components/cart/cart-item/cart-item.module.scss b/src/components/cart/cart-item/cart-item.module.scss index dcb8cea..eccad80 100644 --- a/src/components/cart/cart-item/cart-item.module.scss +++ b/src/components/cart/cart-item/cart-item.module.scss @@ -31,12 +31,6 @@ background: #000; } -.imagePlaceholderIcon { - color: #fff; - width: 37px; - height: 37px; -} - .productInfo { display: grid; width: 100%; @@ -115,12 +109,6 @@ font: var(--paragraph3); } -.unavailableIcon { - color: var(--error-color); - width: 20px; - height: 20px; -} - @media (min-width: 768px){ .root{ min-width: 314px; @@ -130,27 +118,9 @@ @container (max-width: 565px) { - .itemContent { - grid-template-columns: 144px 1fr; - } - - .productInfo { - grid-template-rows: min-content auto min-content; - grid-template-areas: - 'productName price' - 'productOptions priceBreakdown' - 'quantity removeButton'; - } .quantity { justify-self: start; } - .priceBreakdown { - - } - .removeButton{ - justify-self: end; - align-self: center; - } } diff --git a/src/components/cart/cart-item/cart-item.tsx b/src/components/cart/cart-item/cart-item.tsx index 4c28f99..4310bbd 100644 --- a/src/components/cart/cart-item/cart-item.tsx +++ b/src/components/cart/cart-item/cart-item.tsx @@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from 'react'; import { cart } from '@wix/ecom'; import { media } from '@wix/sdk'; import { QuantityInput } from '~/src/components/quantity-input/quantity-input'; -import { ImagePlaceholderIcon, ErrorIcon } from '~/src/components/icons'; import { Spinner } from '~/src/components/spinner/spinner'; import { ProductPrice } from '~/src/components/product-price/product-price'; import classNames from 'classnames'; @@ -61,7 +60,9 @@ export const CartItem = ({ ) : (
- + + image +
)} @@ -72,37 +73,37 @@ export const CartItem = ({
{item.descriptionLines && item.descriptionLines.length > 0 && ( - + )}
{item.fullPrice?.formattedConvertedAmount && ( - + )}
{priceBreakdown?.lineItemPrice?.formattedConvertedAmount}
Remove @@ -110,16 +111,18 @@ export const CartItem = ({ {isUnavailable && ( -
- - Sorry, this item is no longer available. -
+
+ + error + + Sorry, this item is no longer available. +
)} {isUpdating && ( -
- -
+
+ +
)} ); diff --git a/src/components/cart/cart-view/cart-view.module.scss b/src/components/cart/cart-view/cart-view.module.scss index 7db2629..016e8e4 100644 --- a/src/components/cart/cart-view/cart-view.module.scss +++ b/src/components/cart/cart-view/cart-view.module.scss @@ -61,22 +61,8 @@ } } -.checkoutButton, -.viewCartButton { - width: 100%; -} - .viewCartButton { margin-top: 12px; } -.secureCheckout { - margin-top: 12px; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - font: var(--paragraph3); -} - diff --git a/src/components/categories-section/categories-section.tsx b/src/components/categories-section/categories-section.tsx index 0985c70..e03c2c3 100644 --- a/src/components/categories-section/categories-section.tsx +++ b/src/components/categories-section/categories-section.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { FadeIn, Reveal } from '~/src/components/visual-effects'; -import { useCategoryDetails } from '~/src/wix/categories'; +import { getCategoryImageUrl, useCategoryDetails } from '~/src/wix/categories'; import styles from './categories-section.module.scss'; import React, { useEffect, useState } from 'react'; import { useNavigate } from '@remix-run/react'; @@ -41,10 +41,10 @@ export const Category = ({categorySlug}: CategoryProps) => { useEffect(() => { if (category?.media?.mainMedia?.image?.url) { const img = new Image(); - img.src = category?.media?.mainMedia?.image?.url; + img.src = getCategoryImageUrl(category, { maxWidth: 400, maxHeight: 400, quality: 100 })??''; img.onload = () => setPreloadedImage(img.src); } - }, [category?.media?.mainMedia?.image?.url]); + }, [category, category?.media?.mainMedia?.image?.url]); const handleMouseMove = (event: React.MouseEvent) => { setMousePosition({ x: event.clientX, y: event.clientY }); diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index ed8052f..ec1c598 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames'; import React from 'react'; import * as RadixDialog from '@radix-ui/react-dialog'; -import { CrossIcon } from '../icons'; import styles from './dialog.module.scss'; @@ -36,7 +35,9 @@ export const Dialog = ({ className={classNames('iconButton', styles.closeButton)} aria-label="Close dialog" > - + + close + )} diff --git a/src/components/featured-products-section/featured-products-section.module.scss b/src/components/featured-products-section/featured-products-section.module.scss index 13fbdab..4f401f2 100644 --- a/src/components/featured-products-section/featured-products-section.module.scss +++ b/src/components/featured-products-section/featured-products-section.module.scss @@ -15,13 +15,6 @@ flex-direction: column; } -.headerDescription { - width: 83%; - font: var(--paragraph1); - font-size: 20px; - text-wrap: balance; -} - .products { display: grid; grid-auto-columns: minmax(0, 640px); @@ -31,9 +24,6 @@ } @media (max-width: 1024px) { - .headerDescription { - font-size: 16px; - } } @media (max-width: 768px) { @@ -53,10 +43,6 @@ margin-bottom: 16px; } - .headerDescription { - font-size: 14px; - } - .products { grid-template-columns: 1fr 1fr; grid-auto-flow: row; diff --git a/src/components/footer/footer.module.scss b/src/components/footer/footer.module.scss index 922487b..b2680ee 100644 --- a/src/components/footer/footer.module.scss +++ b/src/components/footer/footer.module.scss @@ -38,17 +38,6 @@ white-space: nowrap; } -.navItem.active { - color: #5b4b34; -} - -.bottomBar { - display: flex; - align-items: baseline; - justify-content: space-between; - flex-wrap: wrap; -} - .logo { height: auto; } @@ -60,10 +49,6 @@ }; } -.coduxLink { - text-decoration: underline; -} - .description { width: 320px; font: var(--body2); diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss index 7b1d34f..dcb572d 100644 --- a/src/components/header/header.module.scss +++ b/src/components/header/header.module.scss @@ -3,6 +3,8 @@ width: 100%; background-color: var(--surface-light); z-index: 100; + top: 0; + left: 0; } .announcementBar { @@ -22,12 +24,6 @@ align-items: center; } -.advertisingText { - display: inline-block; - margin-right: 16px; - white-space: nowrap; -} - .navigation { z-index: 100; height: var(--header-height); @@ -103,22 +99,6 @@ transform: translateY(-2px); } -.shopNow { - text-align: center; - line-height: 1; - color: #000; - padding: 3px 11px 4px; - border-radius: 50px; - border: 1px solid #000; - cursor: pointer; - white-space: nowrap; - - &:hover { - background: var(--primary2); - color: #000; - } -} - .openMenuButton { display: none; padding: 0; diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 457b762..0851f59 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -8,6 +8,7 @@ import { SidebarNavigationMenu } from '../sidebar-navigation-menu/sidebar-naviga import { UserMenu } from '../user-menu/user-menu'; import styles from './header.module.scss'; +import { RemoveScroll } from 'react-remove-scroll'; export interface HeaderProps { className?: string; @@ -37,10 +38,6 @@ export const Header = ({ className }: HeaderProps) => { if (isSearchOpen && searchInputRef.current) { searchInputRef.current.focus(); // Focus the input when isSearchOpen is true } - const html = document.querySelector("html"); - if (html) { - html.style.overflow = isSearchOpen ? "hidden" : "auto"; - } }, [isSearchOpen]); const searchButtonOnClickHandler = () => { setIsSearchOpen(!isSearchOpen) @@ -134,7 +131,7 @@ export const Header = ({ className }: HeaderProps) => { - {isSearchOpen && } + {isSearchOpen && } setIsSidebarOpen(false)} /> ); diff --git a/src/components/icons/arrow-right-icon.tsx b/src/components/icons/arrow-right-icon.tsx deleted file mode 100644 index 0d24fc1..0000000 --- a/src/components/icons/arrow-right-icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const ArrowRightIcon = (props: React.SVGProps) => ( - - - -); diff --git a/src/components/icons/cart-icon/cart-icon.module.scss b/src/components/icons/cart-icon/cart-icon.module.scss deleted file mode 100644 index be77ef6..0000000 --- a/src/components/icons/cart-icon/cart-icon.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.root { - width: 21px; - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; -} - -.handle { - width: 9px; - height: 7px; - border: 1px solid #000; - border-radius: 10px 10px 0 0; - border-bottom: none; -} - -.bag { - border: 1px solid #000; - width: 21px; - line-height: 15px; - text-align: center; - font-size: 11px; - color: var(--action2); -} diff --git a/src/components/icons/cart-icon/cart-icon.tsx b/src/components/icons/cart-icon/cart-icon.tsx deleted file mode 100644 index a2a8327..0000000 --- a/src/components/icons/cart-icon/cart-icon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import classNames from 'classnames'; -import styles from './cart-icon.module.scss'; - -interface CartIconProps { - className?: string; - count: number; -} - -export const CartIcon = (props: CartIconProps) => { - return ( -
-
-
{props.count}
-
- ); -}; diff --git a/src/components/icons/chevron-right-icon.tsx b/src/components/icons/chevron-right-icon.tsx deleted file mode 100644 index d6446d8..0000000 --- a/src/components/icons/chevron-right-icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const ChevronRightIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/cross-icon.tsx b/src/components/icons/cross-icon.tsx deleted file mode 100644 index f703601..0000000 --- a/src/components/icons/cross-icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const CrossIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/cross-small-icon.tsx b/src/components/icons/cross-small-icon.tsx deleted file mode 100644 index 1fab076..0000000 --- a/src/components/icons/cross-small-icon.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export const CrossSmallIcon = (props: React.SVGProps) => ( - - - -); diff --git a/src/components/icons/dropdown-icon.tsx b/src/components/icons/dropdown-icon.tsx deleted file mode 100644 index c91daca..0000000 --- a/src/components/icons/dropdown-icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export const DropdownIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/error-icon.tsx b/src/components/icons/error-icon.tsx deleted file mode 100644 index e5dcfcd..0000000 --- a/src/components/icons/error-icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const ErrorIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/facebook-icon.tsx b/src/components/icons/facebook-icon.tsx deleted file mode 100644 index 515fc9b..0000000 --- a/src/components/icons/facebook-icon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const FacebookIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/icon.tsx b/src/components/icons/icon.tsx new file mode 100644 index 0000000..135f967 --- /dev/null +++ b/src/components/icons/icon.tsx @@ -0,0 +1,17 @@ +import { type IconName } from "./iconNames" +import classNames from 'classnames'; +import { type HTMLAttributes } from 'react'; + +type IconProps = { + name: IconName + className?: string + size?: number +} + +export default function Icon({ name, size = 20, className, style, ...props }: IconProps & HTMLAttributes) { + return ( + + {name} + + ) +} diff --git a/src/components/icons/iconNames.ts b/src/components/icons/iconNames.ts new file mode 100644 index 0000000..cc12695 --- /dev/null +++ b/src/components/icons/iconNames.ts @@ -0,0 +1,3902 @@ +export type IconName = + | '10k' + | '10mp' + | '11mp' + | '123' + | '12mp' + | '13mp' + | '14mp' + | '15mp' + | '16mp' + | '17mp' + | '18_up_rating' + | '18mp' + | '19mp' + | '1k' + | '1k_plus' + | '1x_mobiledata' + | '1x_mobiledata_badge' + | '20mp' + | '21mp' + | '22mp' + | '23mp' + | '24fps_select' + | '24mp' + | '2d' + | '2k' + | '2k_plus' + | '2mp' + | '30fps' + | '30fps_select' + | '360' + | '3d_rotation' + | '3g_mobiledata' + | '3g_mobiledata_badge' + | '3k' + | '3k_plus' + | '3mp' + | '3p' + | '4g_mobiledata' + | '4g_mobiledata_badge' + | '4g_plus_mobiledata' + | '4k' + | '4k_plus' + | '4mp' + | '50mp' + | '5g' + | '5g_mobiledata_badge' + | '5k' + | '5k_plus' + | '5mp' + | '60fps' + | '60fps_select' + | '6_ft_apart' + | '6k' + | '6k_plus' + | '6mp' + | '7k' + | '7k_plus' + | '7mp' + | '8k' + | '8k_plus' + | '8mp' + | '9k' + | '9k_plus' + | '9mp' + | 'abc' + | 'ac_unit' + | 'access_alarm' + | 'access_alarms' + | 'access_time' + | 'access_time_filled' + | 'accessibility' + | 'accessibility_new' + | 'accessible' + | 'accessible_forward' + | 'account_balance' + | 'account_balance_wallet' + | 'account_box' + | 'account_child' + | 'account_child_invert' + | 'account_circle' + | 'account_circle_full' + | 'account_circle_off' + | 'account_tree' + | 'action_key' + | 'activity_zone' + | 'acute' + | 'ad' + | 'ad_group' + | 'ad_group_off' + | 'ad_off' + | 'ad_units' + | 'adaptive_audio_mic' + | 'adaptive_audio_mic_off' + | 'adb' + | 'add' + | 'add_2' + | 'add_a_photo' + | 'add_ad' + | 'add_alarm' + | 'add_alert' + | 'add_box' + | 'add_business' + | 'add_call' + | 'add_card' + | 'add_chart' + | 'add_circle' + | 'add_circle_outline' + | 'add_column_left' + | 'add_column_right' + | 'add_comment' + | 'add_diamond' + | 'add_home' + | 'add_home_work' + | 'add_ic_call' + | 'add_link' + | 'add_location' + | 'add_location_alt' + | 'add_moderator' + | 'add_notes' + | 'add_photo_alternate' + | 'add_reaction' + | 'add_road' + | 'add_row_above' + | 'add_row_below' + | 'add_shopping_cart' + | 'add_shortcut_to_drive' + | 'add_task' + | 'add_to_drive' + | 'add_to_home_screen' + | 'add_to_photos' + | 'add_to_queue' + | 'add_triangle' + | 'addchart' + | 'adf_scanner' + | 'adjust' + | 'admin_meds' + | 'admin_panel_settings' + | 'ads_click' + | 'agender' + | 'agriculture' + | 'air' + | 'air_freshener' + | 'air_purifier' + | 'air_purifier_gen' + | 'airline_seat_flat' + | 'airline_seat_flat_angled' + | 'airline_seat_individual_suite' + | 'airline_seat_legroom_extra' + | 'airline_seat_legroom_normal' + | 'airline_seat_legroom_reduced' + | 'airline_seat_recline_extra' + | 'airline_seat_recline_normal' + | 'airline_stops' + | 'airlines' + | 'airplane_ticket' + | 'airplanemode_active' + | 'airplanemode_inactive' + | 'airplay' + | 'airport_shuttle' + | 'airware' + | 'airwave' + | 'alarm' + | 'alarm_add' + | 'alarm_off' + | 'alarm_on' + | 'alarm_smart_wake' + | 'album' + | 'align_center' + | 'align_end' + | 'align_flex_center' + | 'align_flex_end' + | 'align_flex_start' + | 'align_horizontal_center' + | 'align_horizontal_left' + | 'align_horizontal_right' + | 'align_items_stretch' + | 'align_justify_center' + | 'align_justify_flex_end' + | 'align_justify_flex_start' + | 'align_justify_space_around' + | 'align_justify_space_between' + | 'align_justify_space_even' + | 'align_justify_stretch' + | 'align_self_stretch' + | 'align_space_around' + | 'align_space_between' + | 'align_space_even' + | 'align_start' + | 'align_stretch' + | 'align_vertical_bottom' + | 'align_vertical_center' + | 'align_vertical_top' + | 'all_inbox' + | 'all_inclusive' + | 'all_match' + | 'all_out' + | 'allergies' + | 'allergy' + | 'alt_route' + | 'alternate_email' + | 'altitude' + | 'ambient_screen' + | 'ambulance' + | 'amend' + | 'amp_error' + | 'amp_stories' + | 'analytics' + | 'anchor' + | 'android' + | 'animated_images' + | 'animation' + | 'announcement' + | 'aod' + | 'aod_tablet' + | 'aod_watch' + | 'apartment' + | 'api' + | 'apk_document' + | 'apk_install' + | 'app_badging' + | 'app_blocking' + | 'app_promo' + | 'app_registration' + | 'app_settings_alt' + | 'app_shortcut' + | 'apparel' + | 'approval' + | 'approval_delegation' + | 'apps' + | 'apps_outage' + | 'aq' + | 'aq_indoor' + | 'ar_on_you' + | 'ar_stickers' + | 'architecture' + | 'archive' + | 'area_chart' + | 'arming_countdown' + | 'arrow_and_edge' + | 'arrow_back' + | 'arrow_back_2' + | 'arrow_back_ios' + | 'arrow_back_ios_new' + | 'arrow_circle_down' + | 'arrow_circle_left' + | 'arrow_circle_right' + | 'arrow_circle_up' + | 'arrow_cool_down' + | 'arrow_downward' + | 'arrow_downward_alt' + | 'arrow_drop_down' + | 'arrow_drop_down_circle' + | 'arrow_drop_up' + | 'arrow_forward' + | 'arrow_forward_ios' + | 'arrow_insert' + | 'arrow_left' + | 'arrow_left_alt' + | 'arrow_menu_close' + | 'arrow_menu_open' + | 'arrow_or_edge' + | 'arrow_outward' + | 'arrow_range' + | 'arrow_right' + | 'arrow_right_alt' + | 'arrow_selector_tool' + | 'arrow_split' + | 'arrow_top_left' + | 'arrow_top_right' + | 'arrow_upload_progress' + | 'arrow_upload_ready' + | 'arrow_upward' + | 'arrow_upward_alt' + | 'arrow_warm_up' + | 'arrows_input' + | 'arrows_more_down' + | 'arrows_more_up' + | 'arrows_output' + | 'arrows_outward' + | 'art_track' + | 'article' + | 'article_shortcut' + | 'artist' + | 'aspect_ratio' + | 'assessment' + | 'assignment' + | 'assignment_add' + | 'assignment_ind' + | 'assignment_late' + | 'assignment_return' + | 'assignment_returned' + | 'assignment_turned_in' + | 'assist_walker' + | 'assistant' + | 'assistant_device' + | 'assistant_direction' + | 'assistant_navigation' + | 'assistant_on_hub' + | 'assistant_photo' + | 'assured_workload' + | 'asterisk' + | 'astrophotography_auto' + | 'astrophotography_off' + | 'atm' + | 'atr' + | 'attach_email' + | 'attach_file' + | 'attach_file_add' + | 'attach_file_off' + | 'attach_money' + | 'attachment' + | 'attractions' + | 'attribution' + | 'audio_description' + | 'audio_file' + | 'audio_video_receiver' + | 'audiotrack' + | 'auto_activity_zone' + | 'auto_awesome' + | 'auto_awesome_mosaic' + | 'auto_awesome_motion' + | 'auto_delete' + | 'auto_detect_voice' + | 'auto_fix' + | 'auto_fix_high' + | 'auto_fix_normal' + | 'auto_fix_off' + | 'auto_graph' + | 'auto_label' + | 'auto_meeting_room' + | 'auto_mode' + | 'auto_read_pause' + | 'auto_read_play' + | 'auto_schedule' + | 'auto_stories' + | 'auto_timer' + | 'auto_towing' + | 'auto_transmission' + | 'auto_videocam' + | 'autofps_select' + | 'automation' + | 'autopause' + | 'autopay' + | 'autoplay' + | 'autorenew' + | 'autostop' + | 'av1' + | 'av_timer' + | 'avc' + | 'avg_pace' + | 'avg_time' + | 'award_star' + | 'azm' + | 'baby_changing_station' + | 'back_hand' + | 'back_to_tab' + | 'background_blur_full' + | 'background_blur_light' + | 'background_dot_large' + | 'background_dot_small' + | 'background_grid_small' + | 'background_replace' + | 'backlight_high' + | 'backlight_high_off' + | 'backlight_low' + | 'backpack' + | 'backspace' + | 'backup' + | 'backup_table' + | 'badge' + | 'badge_critical_battery' + | 'bakery_dining' + | 'balance' + | 'balcony' + | 'ballot' + | 'bar_chart' + | 'bar_chart_4_bars' + | 'bar_chart_off' + | 'barcode' + | 'barcode_reader' + | 'barcode_scanner' + | 'barefoot' + | 'batch_prediction' + | 'bath_outdoor' + | 'bath_private' + | 'bath_public_large' + | 'bathroom' + | 'bathtub' + | 'battery_0_bar' + | 'battery_1_bar' + | 'battery_20' + | 'battery_2_bar' + | 'battery_30' + | 'battery_3_bar' + | 'battery_4_bar' + | 'battery_50' + | 'battery_5_bar' + | 'battery_60' + | 'battery_6_bar' + | 'battery_80' + | 'battery_90' + | 'battery_alert' + | 'battery_change' + | 'battery_charging_20' + | 'battery_charging_30' + | 'battery_charging_50' + | 'battery_charging_60' + | 'battery_charging_80' + | 'battery_charging_90' + | 'battery_charging_full' + | 'battery_error' + | 'battery_full' + | 'battery_full_alt' + | 'battery_horiz_000' + | 'battery_horiz_050' + | 'battery_horiz_075' + | 'battery_low' + | 'battery_plus' + | 'battery_profile' + | 'battery_saver' + | 'battery_share' + | 'battery_status_good' + | 'battery_std' + | 'battery_unknown' + | 'battery_vert_005' + | 'battery_vert_020' + | 'battery_vert_050' + | 'battery_very_low' + | 'beach_access' + | 'bed' + | 'bedroom_baby' + | 'bedroom_child' + | 'bedroom_parent' + | 'bedtime' + | 'bedtime_off' + | 'beenhere' + | 'bento' + | 'bia' + | 'bid_landscape' + | 'bid_landscape_disabled' + | 'bigtop_updates' + | 'bike_dock' + | 'bike_lane' + | 'bike_scooter' + | 'biotech' + | 'blanket' + | 'blender' + | 'blind' + | 'blinds' + | 'blinds_closed' + | 'block' + | 'block_flipped' + | 'blood_pressure' + | 'bloodtype' + | 'bluenote' + | 'bluetooth' + | 'bluetooth_audio' + | 'bluetooth_connected' + | 'bluetooth_disabled' + | 'bluetooth_drive' + | 'bluetooth_searching' + | 'blur_circular' + | 'blur_linear' + | 'blur_medium' + | 'blur_off' + | 'blur_on' + | 'blur_short' + | 'bnagent' + | 'boat_bus' + | 'boat_railway' + | 'body_fat' + | 'body_system' + | 'bolt' + | 'bomb' + | 'book' + | 'book_2' + | 'book_3' + | 'book_4' + | 'book_4_spark' + | 'book_5' + | 'book_6' + | 'book_online' + | 'book_ribbon' + | 'bookmark' + | 'bookmark_add' + | 'bookmark_added' + | 'bookmark_bag' + | 'bookmark_border' + | 'bookmark_check' + | 'bookmark_flag' + | 'bookmark_heart' + | 'bookmark_manager' + | 'bookmark_remove' + | 'bookmark_star' + | 'bookmarks' + | 'books_movies_and_music' + | 'border_all' + | 'border_bottom' + | 'border_clear' + | 'border_color' + | 'border_horizontal' + | 'border_inner' + | 'border_left' + | 'border_outer' + | 'border_right' + | 'border_style' + | 'border_top' + | 'border_vertical' + | 'borg' + | 'bottom_app_bar' + | 'bottom_drawer' + | 'bottom_navigation' + | 'bottom_panel_close' + | 'bottom_panel_open' + | 'bottom_right_click' + | 'bottom_sheets' + | 'box' + | 'box_add' + | 'box_edit' + | 'boy' + | 'brand_awareness' + | 'brand_family' + | 'branding_watermark' + | 'breakfast_dining' + | 'breaking_news' + | 'breaking_news_alt_1' + | 'breastfeeding' + | 'brick' + | 'brightness_1' + | 'brightness_2' + | 'brightness_3' + | 'brightness_4' + | 'brightness_5' + | 'brightness_6' + | 'brightness_7' + | 'brightness_alert' + | 'brightness_auto' + | 'brightness_empty' + | 'brightness_high' + | 'brightness_low' + | 'brightness_medium' + | 'bring_your_own_ip' + | 'broadcast_on_home' + | 'broadcast_on_personal' + | 'broken_image' + | 'browse' + | 'browse_activity' + | 'browse_gallery' + | 'browser_not_supported' + | 'browser_updated' + | 'brunch_dining' + | 'brush' + | 'bubble' + | 'bubble_chart' + | 'bubbles' + | 'bug_report' + | 'build' + | 'build_circle' + | 'bungalow' + | 'burst_mode' + | 'bus_alert' + | 'bus_railway' + | 'business' + | 'business_center' + | 'business_chip' + | 'business_messages' + | 'buttons_alt' + | 'cabin' + | 'cable' + | 'cable_car' + | 'cached' + | 'cadence' + | 'cake' + | 'cake_add' + | 'calculate' + | 'calendar_add_on' + | 'calendar_apps_script' + | 'calendar_clock' + | 'calendar_month' + | 'calendar_today' + | 'calendar_view_day' + | 'calendar_view_month' + | 'calendar_view_week' + | 'call' + | 'call_end' + | 'call_log' + | 'call_made' + | 'call_merge' + | 'call_missed' + | 'call_missed_outgoing' + | 'call_quality' + | 'call_received' + | 'call_split' + | 'call_to_action' + | 'camera' + | 'camera_alt' + | 'camera_enhance' + | 'camera_front' + | 'camera_indoor' + | 'camera_outdoor' + | 'camera_rear' + | 'camera_roll' + | 'camera_video' + | 'cameraswitch' + | 'campaign' + | 'camping' + | 'cancel' + | 'cancel_presentation' + | 'cancel_schedule_send' + | 'candle' + | 'candlestick_chart' + | 'captive_portal' + | 'capture' + | 'car_crash' + | 'car_rental' + | 'car_repair' + | 'car_tag' + | 'card_giftcard' + | 'card_membership' + | 'card_travel' + | 'cardio_load' + | 'cardiology' + | 'cards' + | 'cards_star' + | 'carpenter' + | 'carry_on_bag' + | 'carry_on_bag_checked' + | 'carry_on_bag_inactive' + | 'carry_on_bag_question' + | 'cases' + | 'casino' + | 'cast' + | 'cast_connected' + | 'cast_for_education' + | 'cast_pause' + | 'cast_warning' + | 'castle' + | 'catching_pokemon' + | 'category' + | 'category_search' + | 'celebration' + | 'cell_merge' + | 'cell_tower' + | 'cell_wifi' + | 'center_focus_strong' + | 'center_focus_weak' + | 'chair' + | 'chair_alt' + | 'chalet' + | 'change_circle' + | 'change_history' + | 'charger' + | 'charging_station' + | 'chart_data' + | 'chat' + | 'chat_add_on' + | 'chat_apps_script' + | 'chat_bubble' + | 'chat_bubble_outline' + | 'chat_error' + | 'chat_info' + | 'chat_paste_go' + | 'chat_paste_go_2' + | 'check' + | 'check_box' + | 'check_box_outline_blank' + | 'check_circle' + | 'check_circle_outline' + | 'check_in_out' + | 'check_indeterminate_small' + | 'check_small' + | 'checkbook' + | 'checked_bag' + | 'checked_bag_question' + | 'checklist' + | 'checklist_rtl' + | 'checkroom' + | 'cheer' + | 'chess' + | 'chess_pawn' + | 'chevron_backward' + | 'chevron_forward' + | 'chevron_left' + | 'chevron_right' + | 'child_care' + | 'child_friendly' + | 'chip_extraction' + | 'chips' + | 'chrome_maximize' + | 'chrome_minimize' + | 'chrome_reader_mode' + | 'chrome_restore' + | 'chrome_tote' + | 'chromecast_2' + | 'chromecast_device' + | 'chronic' + | 'church' + | 'cinematic_blur' + | 'circle' + | 'circle_notifications' + | 'circles' + | 'circles_ext' + | 'clarify' + | 'class' + | 'clean_hands' + | 'cleaning' + | 'cleaning_bucket' + | 'cleaning_services' + | 'clear' + | 'clear_all' + | 'clear_day' + | 'clear_night' + | 'climate_mini_split' + | 'clinical_notes' + | 'clock_arrow_down' + | 'clock_arrow_up' + | 'clock_loader_10' + | 'clock_loader_20' + | 'clock_loader_40' + | 'clock_loader_60' + | 'clock_loader_80' + | 'clock_loader_90' + | 'close' + | 'close_fullscreen' + | 'close_small' + | 'closed_caption' + | 'closed_caption_add' + | 'closed_caption_disabled' + | 'closed_caption_off' + | 'cloud' + | 'cloud_alert' + | 'cloud_circle' + | 'cloud_domains' + | 'cloud_done' + | 'cloud_download' + | 'cloud_lock' + | 'cloud_off' + | 'cloud_queue' + | 'cloud_sync' + | 'cloud_upload' + | 'cloudbuild' + | 'cloudy' + | 'cloudy_filled' + | 'cloudy_snowing' + | 'co2' + | 'co_present' + | 'code' + | 'code_blocks' + | 'code_off' + | 'coffee' + | 'coffee_maker' + | 'cognition' + | 'cognition_2' + | 'collapse_all' + | 'collapse_content' + | 'collections' + | 'collections_bookmark' + | 'color_lens' + | 'colorize' + | 'colors' + | 'combine_columns' + | 'comedy_mask' + | 'comic_bubble' + | 'comment' + | 'comment_bank' + | 'comments_disabled' + | 'commit' + | 'communication' + | 'communities' + | 'commute' + | 'compare' + | 'compare_arrows' + | 'compass_calibration' + | 'component_exchange' + | 'compost' + | 'compress' + | 'computer' + | 'concierge' + | 'conditions' + | 'confirmation_number' + | 'congenital' + | 'connect_without_contact' + | 'connected_tv' + | 'connecting_airports' + | 'construction' + | 'contact_emergency' + | 'contact_mail' + | 'contact_page' + | 'contact_phone' + | 'contact_support' + | 'contactless' + | 'contactless_off' + | 'contacts' + | 'contacts_product' + | 'content_copy' + | 'content_cut' + | 'content_paste' + | 'content_paste_go' + | 'content_paste_off' + | 'content_paste_search' + | 'contextual_token' + | 'contextual_token_add' + | 'contract' + | 'contract_delete' + | 'contract_edit' + | 'contrast' + | 'contrast_circle' + | 'contrast_rtl_off' + | 'contrast_square' + | 'control_camera' + | 'control_point' + | 'control_point_duplicate' + | 'controller_gen' + | 'conversion_path' + | 'conversion_path_off' + | 'convert_to_text' + | 'conveyor_belt' + | 'cookie' + | 'cookie_off' + | 'cooking' + | 'cool_to_dry' + | 'copy_all' + | 'copyright' + | 'coronavirus' + | 'corporate_fare' + | 'cottage' + | 'counter_0' + | 'counter_1' + | 'counter_2' + | 'counter_3' + | 'counter_4' + | 'counter_5' + | 'counter_6' + | 'counter_7' + | 'counter_8' + | 'counter_9' + | 'countertops' + | 'create' + | 'create_new_folder' + | 'credit_card' + | 'credit_card_clock' + | 'credit_card_gear' + | 'credit_card_heart' + | 'credit_card_off' + | 'credit_score' + | 'crib' + | 'crisis_alert' + | 'crop' + | 'crop_16_9' + | 'crop_3_2' + | 'crop_5_4' + | 'crop_7_5' + | 'crop_9_16' + | 'crop_din' + | 'crop_free' + | 'crop_landscape' + | 'crop_original' + | 'crop_portrait' + | 'crop_rotate' + | 'crop_square' + | 'crossword' + | 'crowdsource' + | 'crown' + | 'cruelty_free' + | 'css' + | 'csv' + | 'currency_bitcoin' + | 'currency_exchange' + | 'currency_franc' + | 'currency_lira' + | 'currency_pound' + | 'currency_ruble' + | 'currency_rupee' + | 'currency_rupee_circle' + | 'currency_yen' + | 'currency_yuan' + | 'curtains' + | 'curtains_closed' + | 'custom_typography' + | 'cut' + | 'cycle' + | 'cyclone' + | 'dangerous' + | 'dark_mode' + | 'dashboard' + | 'dashboard_2' + | 'dashboard_customize' + | 'data_alert' + | 'data_array' + | 'data_check' + | 'data_exploration' + | 'data_info_alert' + | 'data_loss_prevention' + | 'data_object' + | 'data_saver_off' + | 'data_saver_on' + | 'data_table' + | 'data_thresholding' + | 'data_usage' + | 'database' + | 'database_off' + | 'database_search' + | 'database_upload' + | 'dataset' + | 'dataset_linked' + | 'date_range' + | 'deblur' + | 'deceased' + | 'decimal_decrease' + | 'decimal_increase' + | 'deck' + | 'dehaze' + | 'delete' + | 'delete_forever' + | 'delete_history' + | 'delete_outline' + | 'delete_sweep' + | 'delivery_dining' + | 'delivery_truck_bolt' + | 'delivery_truck_speed' + | 'demography' + | 'density_large' + | 'density_medium' + | 'density_small' + | 'dentistry' + | 'departure_board' + | 'deployed_code' + | 'deployed_code_account' + | 'deployed_code_alert' + | 'deployed_code_history' + | 'deployed_code_update' + | 'dermatology' + | 'description' + | 'deselect' + | 'design_services' + | 'desk' + | 'deskphone' + | 'desktop_access_disabled' + | 'desktop_cloud' + | 'desktop_cloud_stack' + | 'desktop_landscape' + | 'desktop_landscape_add' + | 'desktop_mac' + | 'desktop_portrait' + | 'desktop_windows' + | 'destruction' + | 'details' + | 'detection_and_zone' + | 'detector' + | 'detector_alarm' + | 'detector_battery' + | 'detector_co' + | 'detector_offline' + | 'detector_smoke' + | 'detector_status' + | 'developer_board' + | 'developer_board_off' + | 'developer_guide' + | 'developer_mode' + | 'developer_mode_tv' + | 'device_hub' + | 'device_reset' + | 'device_thermostat' + | 'device_unknown' + | 'devices' + | 'devices_fold' + | 'devices_fold_2' + | 'devices_off' + | 'devices_other' + | 'devices_wearables' + | 'dew_point' + | 'diagnosis' + | 'diagonal_line' + | 'dialer_sip' + | 'dialogs' + | 'dialpad' + | 'diamond' + | 'dictionary' + | 'difference' + | 'digital_out_of_home' + | 'digital_wellbeing' + | 'dining' + | 'dinner_dining' + | 'directions' + | 'directions_alt' + | 'directions_alt_off' + | 'directions_bike' + | 'directions_boat' + | 'directions_boat_filled' + | 'directions_bus' + | 'directions_bus_filled' + | 'directions_car' + | 'directions_car_filled' + | 'directions_off' + | 'directions_railway' + | 'directions_railway_2' + | 'directions_railway_filled' + | 'directions_run' + | 'directions_subway' + | 'directions_subway_filled' + | 'directions_transit' + | 'directions_transit_filled' + | 'directions_walk' + | 'directory_sync' + | 'dirty_lens' + | 'disabled_by_default' + | 'disabled_visible' + | 'disc_full' + | 'discount' + | 'discover_tune' + | 'dishwasher' + | 'dishwasher_gen' + | 'display_external_input' + | 'display_settings' + | 'distance' + | 'diversity_1' + | 'diversity_2' + | 'diversity_3' + | 'diversity_4' + | 'dns' + | 'do_disturb' + | 'do_disturb_alt' + | 'do_disturb_off' + | 'do_disturb_on' + | 'do_not_disturb' + | 'do_not_disturb_alt' + | 'do_not_disturb_off' + | 'do_not_disturb_on' + | 'do_not_disturb_on_total_silence' + | 'do_not_step' + | 'do_not_touch' + | 'dock' + | 'dock_to_bottom' + | 'dock_to_left' + | 'dock_to_right' + | 'docs' + | 'docs_add_on' + | 'docs_apps_script' + | 'document_scanner' + | 'document_search' + | 'domain' + | 'domain_add' + | 'domain_disabled' + | 'domain_verification' + | 'domain_verification_off' + | 'domino_mask' + | 'done' + | 'done_all' + | 'done_outline' + | 'donut_large' + | 'donut_small' + | 'door_back' + | 'door_front' + | 'door_open' + | 'door_sensor' + | 'door_sliding' + | 'doorbell' + | 'doorbell_3p' + | 'doorbell_chime' + | 'double_arrow' + | 'downhill_skiing' + | 'download' + | 'download_2' + | 'download_done' + | 'download_for_offline' + | 'downloading' + | 'draft' + | 'draft_orders' + | 'drafts' + | 'drag_click' + | 'drag_handle' + | 'drag_indicator' + | 'drag_pan' + | 'draw' + | 'draw_abstract' + | 'draw_collage' + | 'dresser' + | 'drive_eta' + | 'drive_export' + | 'drive_file_move' + | 'drive_file_move_outline' + | 'drive_file_move_rtl' + | 'drive_file_rename_outline' + | 'drive_folder_upload' + | 'drive_shortcut' + | 'dropdown' + | 'dry' + | 'dry_cleaning' + | 'dual_screen' + | 'duo' + | 'dvr' + | 'dynamic_feed' + | 'dynamic_form' + | 'e911_avatar' + | 'e911_emergency' + | 'e_mobiledata' + | 'e_mobiledata_badge' + | 'earbuds' + | 'earbuds_battery' + | 'early_on' + | 'earthquake' + | 'east' + | 'ecg' + | 'ecg_heart' + | 'eco' + | 'eda' + | 'edgesensor_high' + | 'edgesensor_low' + | 'edit' + | 'edit_arrow_down' + | 'edit_arrow_up' + | 'edit_attributes' + | 'edit_audio' + | 'edit_calendar' + | 'edit_document' + | 'edit_location' + | 'edit_location_alt' + | 'edit_note' + | 'edit_notifications' + | 'edit_off' + | 'edit_road' + | 'edit_square' + | 'editor_choice' + | 'egg' + | 'egg_alt' + | 'eject' + | 'elderly' + | 'elderly_woman' + | 'electric_bike' + | 'electric_bolt' + | 'electric_car' + | 'electric_meter' + | 'electric_moped' + | 'electric_rickshaw' + | 'electric_scooter' + | 'electrical_services' + | 'elevation' + | 'elevator' + | 'email' + | 'emergency' + | 'emergency_heat' + | 'emergency_heat_2' + | 'emergency_home' + | 'emergency_recording' + | 'emergency_share' + | 'emergency_share_off' + | 'emoji_emotions' + | 'emoji_events' + | 'emoji_flags' + | 'emoji_food_beverage' + | 'emoji_language' + | 'emoji_nature' + | 'emoji_objects' + | 'emoji_people' + | 'emoji_symbols' + | 'emoji_transportation' + | 'emoticon' + | 'empty_dashboard' + | 'enable' + | 'encrypted' + | 'encrypted_add' + | 'encrypted_add_circle' + | 'encrypted_minus_circle' + | 'encrypted_off' + | 'endocrinology' + | 'energy' + | 'energy_program_saving' + | 'energy_program_time_used' + | 'energy_savings_leaf' + | 'engineering' + | 'enhanced_encryption' + | 'ent' + | 'enterprise' + | 'enterprise_off' + | 'equal' + | 'equalizer' + | 'eraser_size_1' + | 'eraser_size_2' + | 'eraser_size_3' + | 'eraser_size_4' + | 'eraser_size_5' + | 'error' + | 'error_circle_rounded' + | 'error_med' + | 'error_outline' + | 'escalator' + | 'escalator_warning' + | 'euro' + | 'euro_symbol' + | 'ev_charger' + | 'ev_mobiledata_badge' + | 'ev_shadow' + | 'ev_shadow_add' + | 'ev_shadow_minus' + | 'ev_station' + | 'event' + | 'event_available' + | 'event_busy' + | 'event_list' + | 'event_note' + | 'event_repeat' + | 'event_seat' + | 'event_upcoming' + | 'exclamation' + | 'exercise' + | 'exit_to_app' + | 'expand' + | 'expand_all' + | 'expand_circle_down' + | 'expand_circle_right' + | 'expand_circle_up' + | 'expand_content' + | 'expand_less' + | 'expand_more' + | 'expansion_panels' + | 'experiment' + | 'explicit' + | 'explore' + | 'explore_nearby' + | 'explore_off' + | 'explosion' + | 'export_notes' + | 'exposure' + | 'exposure_neg_1' + | 'exposure_neg_2' + | 'exposure_plus_1' + | 'exposure_plus_2' + | 'exposure_zero' + | 'extension' + | 'extension_off' + | 'eye_tracking' + | 'eyeglasses' + | 'face' + | 'face_2' + | 'face_3' + | 'face_4' + | 'face_5' + | 'face_6' + | 'face_down' + | 'face_left' + | 'face_nod' + | 'face_retouching_natural' + | 'face_retouching_off' + | 'face_right' + | 'face_shake' + | 'face_unlock' + | 'face_up' + | 'facebook' + | 'fact_check' + | 'factory' + | 'falling' + | 'familiar_face_and_zone' + | 'family_history' + | 'family_home' + | 'family_link' + | 'family_restroom' + | 'family_star' + | 'farsight_digital' + | 'fast_forward' + | 'fast_rewind' + | 'fastfood' + | 'faucet' + | 'favorite' + | 'favorite_border' + | 'fax' + | 'feature_search' + | 'featured_play_list' + | 'featured_seasonal_and_gifts' + | 'featured_video' + | 'feed' + | 'feedback' + | 'female' + | 'femur' + | 'femur_alt' + | 'fence' + | 'fertile' + | 'festival' + | 'fiber_dvr' + | 'fiber_manual_record' + | 'fiber_new' + | 'fiber_pin' + | 'fiber_smart_record' + | 'file_copy' + | 'file_copy_off' + | 'file_download' + | 'file_download_done' + | 'file_download_off' + | 'file_export' + | 'file_json' + | 'file_map' + | 'file_map_stack' + | 'file_open' + | 'file_png' + | 'file_present' + | 'file_save' + | 'file_save_off' + | 'file_upload' + | 'file_upload_off' + | 'files' + | 'filter' + | 'filter_1' + | 'filter_2' + | 'filter_3' + | 'filter_4' + | 'filter_5' + | 'filter_6' + | 'filter_7' + | 'filter_8' + | 'filter_9' + | 'filter_9_plus' + | 'filter_alt' + | 'filter_alt_off' + | 'filter_arrow_right' + | 'filter_b_and_w' + | 'filter_center_focus' + | 'filter_drama' + | 'filter_frames' + | 'filter_hdr' + | 'filter_list' + | 'filter_list_alt' + | 'filter_list_off' + | 'filter_none' + | 'filter_retrolux' + | 'filter_tilt_shift' + | 'filter_vintage' + | 'finance' + | 'finance_chip' + | 'finance_mode' + | 'find_in_page' + | 'find_replace' + | 'fingerprint' + | 'fingerprint_off' + | 'fire_extinguisher' + | 'fire_hydrant' + | 'fire_hydrant_alt' + | 'fire_truck' + | 'fireplace' + | 'first_page' + | 'fishfood' + | 'fit_page' + | 'fit_page_height' + | 'fit_page_width' + | 'fit_screen' + | 'fit_width' + | 'fitbit' + | 'fitbit_arrow_downward' + | 'fitbit_arrow_upward' + | 'fitbit_check_small' + | 'fitness_center' + | 'fitness_tracker' + | 'flag' + | 'flag_2' + | 'flag_check' + | 'flag_circle' + | 'flaky' + | 'flare' + | 'flash_auto' + | 'flash_off' + | 'flash_on' + | 'flashlight_off' + | 'flashlight_on' + | 'flatware' + | 'flex_direction' + | 'flex_no_wrap' + | 'flex_wrap' + | 'flight' + | 'flight_class' + | 'flight_land' + | 'flight_takeoff' + | 'flights_and_hotels' + | 'flightsmode' + | 'flip' + | 'flip_camera_android' + | 'flip_camera_ios' + | 'flip_to_back' + | 'flip_to_front' + | 'float_landscape' + | 'float_landscape_2' + | 'float_portrait' + | 'float_portrait_2' + | 'flood' + | 'floor' + | 'floor_lamp' + | 'flourescent' + | 'flowchart' + | 'flowsheet' + | 'fluid' + | 'fluid_balance' + | 'fluid_med' + | 'fluorescent' + | 'flutter' + | 'flutter_dash' + | 'flyover' + | 'fmd_bad' + | 'fmd_good' + | 'foggy' + | 'folded_hands' + | 'folder' + | 'folder_check' + | 'folder_check_2' + | 'folder_code' + | 'folder_copy' + | 'folder_data' + | 'folder_delete' + | 'folder_eye' + | 'folder_info' + | 'folder_limited' + | 'folder_managed' + | 'folder_match' + | 'folder_off' + | 'folder_open' + | 'folder_shared' + | 'folder_special' + | 'folder_supervised' + | 'folder_zip' + | 'follow_the_signs' + | 'font_download' + | 'font_download_off' + | 'food_bank' + | 'foot_bones' + | 'footprint' + | 'for_you' + | 'forest' + | 'fork_left' + | 'fork_right' + | 'fork_spoon' + | 'forklift' + | 'format_align_center' + | 'format_align_justify' + | 'format_align_left' + | 'format_align_right' + | 'format_bold' + | 'format_clear' + | 'format_color_fill' + | 'format_color_reset' + | 'format_color_text' + | 'format_h1' + | 'format_h2' + | 'format_h3' + | 'format_h4' + | 'format_h5' + | 'format_h6' + | 'format_image_left' + | 'format_image_right' + | 'format_indent_decrease' + | 'format_indent_increase' + | 'format_ink_highlighter' + | 'format_italic' + | 'format_letter_spacing' + | 'format_letter_spacing_2' + | 'format_letter_spacing_standard' + | 'format_letter_spacing_wide' + | 'format_letter_spacing_wider' + | 'format_line_spacing' + | 'format_list_bulleted' + | 'format_list_bulleted_add' + | 'format_list_numbered' + | 'format_list_numbered_rtl' + | 'format_overline' + | 'format_paint' + | 'format_paragraph' + | 'format_quote' + | 'format_quote_off' + | 'format_shapes' + | 'format_size' + | 'format_strikethrough' + | 'format_text_clip' + | 'format_text_overflow' + | 'format_text_wrap' + | 'format_textdirection_l_to_r' + | 'format_textdirection_r_to_l' + | 'format_textdirection_vertical' + | 'format_underlined' + | 'format_underlined_squiggle' + | 'forms_add_on' + | 'forms_apps_script' + | 'fort' + | 'forum' + | 'forward' + | 'forward_10' + | 'forward_30' + | 'forward_5' + | 'forward_circle' + | 'forward_media' + | 'forward_to_inbox' + | 'foundation' + | 'frame_inspect' + | 'frame_person' + | 'frame_person_mic' + | 'frame_person_off' + | 'frame_reload' + | 'frame_source' + | 'free_breakfast' + | 'free_cancellation' + | 'front_hand' + | 'front_loader' + | 'full_coverage' + | 'full_hd' + | 'full_stacked_bar_chart' + | 'fullscreen' + | 'fullscreen_exit' + | 'fullscreen_portrait' + | 'function' + | 'functions' + | 'funicular' + | 'g_mobiledata' + | 'g_mobiledata_badge' + | 'g_translate' + | 'gallery_thumbnail' + | 'gamepad' + | 'games' + | 'garage' + | 'garage_door' + | 'garage_home' + | 'garden_cart' + | 'gas_meter' + | 'gastroenterology' + | 'gate' + | 'gavel' + | 'gbadge' + | 'general_device' + | 'generating_tokens' + | 'genetics' + | 'genres' + | 'gesture' + | 'gesture_select' + | 'get_app' + | 'gif' + | 'gif_2' + | 'gif_box' + | 'girl' + | 'gite' + | 'glass_cup' + | 'gleaf' + | 'globe' + | 'globe_asia' + | 'globe_book' + | 'globe_uk' + | 'glucose' + | 'glyphs' + | 'gmail_add_on' + | 'gmail_apps_script' + | 'gmail_rooms' + | 'go_to_line' + | 'golf_course' + | 'gondola_lift' + | 'google_guarantee' + | 'google_home_devices' + | 'google_plus_reshare' + | 'google_travel' + | 'google_travel_outline' + | 'google_tv_remote' + | 'google_wifi' + | 'googler_travel' + | 'gpp_bad' + | 'gpp_good' + | 'gpp_maybe' + | 'gps_fixed' + | 'gps_not_fixed' + | 'gps_off' + | 'grade' + | 'gradient' + | 'grading' + | 'grain' + | 'graph_1' + | 'graph_2' + | 'graph_3' + | 'graph_4' + | 'graph_5' + | 'graph_6' + | 'graphic_eq' + | 'grass' + | 'grid_3x3' + | 'grid_3x3_off' + | 'grid_4x4' + | 'grid_goldenratio' + | 'grid_guides' + | 'grid_off' + | 'grid_on' + | 'grid_view' + | 'grocery' + | 'group' + | 'group_add' + | 'group_auto' + | 'group_off' + | 'group_remove' + | 'group_search' + | 'group_work' + | 'grouped_bar_chart' + | 'groups' + | 'groups_2' + | 'groups_3' + | 'guardian' + | 'gynecology' + | 'h_mobiledata' + | 'h_mobiledata_badge' + | 'h_plus_mobiledata' + | 'h_plus_mobiledata_badge' + | 'hail' + | 'hallway' + | 'hand_bones' + | 'hand_gesture' + | 'hand_gesture_off' + | 'handheld_controller' + | 'handshake' + | 'handyman' + | 'hangout_meeting' + | 'hangout_video' + | 'hangout_video_off' + | 'hard_disk' + | 'hard_drive' + | 'hard_drive_2' + | 'hardware' + | 'hd' + | 'hdr_auto' + | 'hdr_auto_select' + | 'hdr_enhanced_select' + | 'hdr_off' + | 'hdr_off_select' + | 'hdr_on' + | 'hdr_on_select' + | 'hdr_plus' + | 'hdr_plus_off' + | 'hdr_strong' + | 'hdr_weak' + | 'head_mounted_device' + | 'headphones' + | 'headphones_battery' + | 'headset' + | 'headset_mic' + | 'headset_off' + | 'healing' + | 'health_and_beauty' + | 'health_and_safety' + | 'health_metrics' + | 'heap_snapshot_large' + | 'heap_snapshot_multiple' + | 'heap_snapshot_thumbnail' + | 'hearing' + | 'hearing_aid' + | 'hearing_aid_disabled' + | 'hearing_disabled' + | 'heart_broken' + | 'heart_check' + | 'heart_minus' + | 'heart_plus' + | 'heat' + | 'heat_pump' + | 'heat_pump_balance' + | 'height' + | 'helicopter' + | 'help' + | 'help_center' + | 'help_clinic' + | 'help_outline' + | 'hematology' + | 'hevc' + | 'hexagon' + | 'hide' + | 'hide_image' + | 'hide_source' + | 'high_density' + | 'high_quality' + | 'high_res' + | 'highlight' + | 'highlight_alt' + | 'highlight_keyboard_focus' + | 'highlight_mouse_cursor' + | 'highlight_off' + | 'highlight_text_cursor' + | 'highlighter_size_1' + | 'highlighter_size_2' + | 'highlighter_size_3' + | 'highlighter_size_4' + | 'highlighter_size_5' + | 'hiking' + | 'history' + | 'history_2' + | 'history_edu' + | 'history_off' + | 'history_toggle_off' + | 'hive' + | 'hls' + | 'hls_off' + | 'holiday_village' + | 'home' + | 'home_and_garden' + | 'home_app_logo' + | 'home_filled' + | 'home_health' + | 'home_improvement_and_tools' + | 'home_iot_device' + | 'home_max' + | 'home_max_dots' + | 'home_mini' + | 'home_pin' + | 'home_repair_service' + | 'home_speaker' + | 'home_storage' + | 'home_work' + | 'horizontal_distribute' + | 'horizontal_rule' + | 'horizontal_split' + | 'host' + | 'hot_tub' + | 'hotel' + | 'hotel_class' + | 'hourglass' + | 'hourglass_arrow_down' + | 'hourglass_arrow_up' + | 'hourglass_bottom' + | 'hourglass_disabled' + | 'hourglass_empty' + | 'hourglass_full' + | 'hourglass_pause' + | 'hourglass_top' + | 'house' + | 'house_siding' + | 'house_with_shield' + | 'houseboat' + | 'household_supplies' + | 'hov' + | 'how_to_reg' + | 'how_to_vote' + | 'hr_resting' + | 'html' + | 'http' + | 'https' + | 'hub' + | 'humerus' + | 'humerus_alt' + | 'humidity_helper' + | 'humidity_high' + | 'humidity_indoor' + | 'humidity_low' + | 'humidity_mid' + | 'humidity_percentage' + | 'hvac' + | 'ice_skating' + | 'icecream' + | 'id_card' + | 'identity_aware_proxy' + | 'identity_platform' + | 'ifl' + | 'iframe' + | 'iframe_off' + | 'image' + | 'image_aspect_ratio' + | 'image_not_supported' + | 'image_search' + | 'imagesearch_roller' + | 'imagesmode' + | 'immunology' + | 'import_contacts' + | 'import_export' + | 'important_devices' + | 'in_home_mode' + | 'inactive_order' + | 'inbox' + | 'inbox_customize' + | 'inbox_text' + | 'incomplete_circle' + | 'indeterminate_check_box' + | 'indeterminate_question_box' + | 'info' + | 'info_i' + | 'info_outline' + | 'infrared' + | 'ink_eraser' + | 'ink_eraser_off' + | 'ink_highlighter' + | 'ink_highlighter_move' + | 'ink_marker' + | 'ink_pen' + | 'ink_selection' + | 'inpatient' + | 'input' + | 'input_circle' + | 'insert_chart' + | 'insert_chart_outlined' + | 'insert_comment' + | 'insert_drive_file' + | 'insert_emoticon' + | 'insert_invitation' + | 'insert_link' + | 'insert_page_break' + | 'insert_photo' + | 'insert_text' + | 'insights' + | 'install_desktop' + | 'install_mobile' + | 'instant_mix' + | 'integration_instructions' + | 'interactive_space' + | 'interests' + | 'interpreter_mode' + | 'inventory' + | 'inventory_2' + | 'invert_colors' + | 'invert_colors_off' + | 'ios' + | 'ios_share' + | 'iron' + | 'iso' + | 'jamboard_kiosk' + | 'javascript' + | 'join' + | 'join_full' + | 'join_inner' + | 'join_left' + | 'join_right' + | 'joystick' + | 'jump_to_element' + | 'kayaking' + | 'kebab_dining' + | 'keep' + | 'keep_off' + | 'keep_public' + | 'kettle' + | 'key' + | 'key_off' + | 'key_vertical' + | 'key_visualizer' + | 'keyboard' + | 'keyboard_alt' + | 'keyboard_arrow_down' + | 'keyboard_arrow_left' + | 'keyboard_arrow_right' + | 'keyboard_arrow_up' + | 'keyboard_backspace' + | 'keyboard_capslock' + | 'keyboard_capslock_badge' + | 'keyboard_command_key' + | 'keyboard_control_key' + | 'keyboard_double_arrow_down' + | 'keyboard_double_arrow_left' + | 'keyboard_double_arrow_right' + | 'keyboard_double_arrow_up' + | 'keyboard_external_input' + | 'keyboard_full' + | 'keyboard_hide' + | 'keyboard_keys' + | 'keyboard_lock' + | 'keyboard_lock_off' + | 'keyboard_off' + | 'keyboard_onscreen' + | 'keyboard_option_key' + | 'keyboard_previous_language' + | 'keyboard_return' + | 'keyboard_tab' + | 'keyboard_tab_rtl' + | 'keyboard_voice' + | 'kid_star' + | 'king_bed' + | 'kitchen' + | 'kitesurfing' + | 'kormo' + | 'lab_panel' + | 'lab_profile' + | 'lab_research' + | 'label' + | 'label_important' + | 'label_important_outline' + | 'label_off' + | 'label_outline' + | 'labs' + | 'lan' + | 'landscape' + | 'landscape_2' + | 'landscape_2_off' + | 'landslide' + | 'language' + | 'language_chinese_array' + | 'language_chinese_cangjie' + | 'language_chinese_dayi' + | 'language_chinese_pinyin' + | 'language_chinese_quick' + | 'language_chinese_wubi' + | 'language_french' + | 'language_gb_english' + | 'language_international' + | 'language_japanese_kana' + | 'language_korean_latin' + | 'language_pinyin' + | 'language_spanish' + | 'language_us' + | 'language_us_colemak' + | 'language_us_dvorak' + | 'laps' + | 'laptop' + | 'laptop_car' + | 'laptop_chromebook' + | 'laptop_mac' + | 'laptop_windows' + | 'lasso_select' + | 'last_page' + | 'launch' + | 'launcher_assistant_off' + | 'launcher_assistant_on' + | 'laundry' + | 'layers' + | 'layers_clear' + | 'lda' + | 'leaderboard' + | 'leaf_spark' + | 'leak_add' + | 'leak_remove' + | 'left_click' + | 'left_panel_close' + | 'left_panel_open' + | 'legend_toggle' + | 'lens' + | 'lens_blur' + | 'letter_switch' + | 'library_add' + | 'library_add_check' + | 'library_books' + | 'library_music' + | 'license' + | 'lift_to_talk' + | 'light' + | 'light_group' + | 'light_mode' + | 'light_off' + | 'lightbulb' + | 'lightbulb_2' + | 'lightbulb_circle' + | 'lightbulb_outline' + | 'lightning_stand' + | 'line_axis' + | 'line_curve' + | 'line_end' + | 'line_end_arrow' + | 'line_end_arrow_notch' + | 'line_end_circle' + | 'line_end_diamond' + | 'line_end_square' + | 'line_start' + | 'line_start_arrow' + | 'line_start_arrow_notch' + | 'line_start_circle' + | 'line_start_diamond' + | 'line_start_square' + | 'line_style' + | 'line_weight' + | 'linear_scale' + | 'link' + | 'link_off' + | 'linked_camera' + | 'linked_services' + | 'liquor' + | 'list' + | 'list_alt' + | 'list_alt_add' + | 'list_alt_check' + | 'lists' + | 'live_help' + | 'live_tv' + | 'living' + | 'local_activity' + | 'local_airport' + | 'local_atm' + | 'local_bar' + | 'local_cafe' + | 'local_car_wash' + | 'local_convenience_store' + | 'local_dining' + | 'local_drink' + | 'local_fire_department' + | 'local_florist' + | 'local_gas_station' + | 'local_grocery_store' + | 'local_hospital' + | 'local_hotel' + | 'local_laundry_service' + | 'local_library' + | 'local_mall' + | 'local_movies' + | 'local_offer' + | 'local_parking' + | 'local_pharmacy' + | 'local_phone' + | 'local_pizza' + | 'local_play' + | 'local_police' + | 'local_post_office' + | 'local_printshop' + | 'local_see' + | 'local_shipping' + | 'local_taxi' + | 'location_automation' + | 'location_away' + | 'location_chip' + | 'location_city' + | 'location_disabled' + | 'location_home' + | 'location_off' + | 'location_on' + | 'location_pin' + | 'location_searching' + | 'lock' + | 'lock_clock' + | 'lock_open' + | 'lock_open_right' + | 'lock_outline' + | 'lock_person' + | 'lock_reset' + | 'login' + | 'logo_dev' + | 'logout' + | 'looks' + | 'looks_3' + | 'looks_4' + | 'looks_5' + | 'looks_6' + | 'looks_one' + | 'looks_two' + | 'loop' + | 'loupe' + | 'low_density' + | 'low_priority' + | 'lowercase' + | 'loyalty' + | 'lte_mobiledata' + | 'lte_mobiledata_badge' + | 'lte_plus_mobiledata' + | 'lte_plus_mobiledata_badge' + | 'luggage' + | 'lunch_dining' + | 'lyrics' + | 'machine_image' + | 'macro_auto' + | 'macro_off' + | 'magic_button' + | 'magic_exchange' + | 'magic_tether' + | 'magnification_large' + | 'magnification_small' + | 'magnify_docked' + | 'magnify_fullscreen' + | 'mail' + | 'mail_lock' + | 'mail_off' + | 'mail_outline' + | 'male' + | 'man' + | 'man_2' + | 'man_3' + | 'man_4' + | 'manage_accounts' + | 'manage_history' + | 'manage_search' + | 'manga' + | 'manufacturing' + | 'map' + | 'map_search' + | 'maps_home_work' + | 'maps_ugc' + | 'margin' + | 'mark_as_unread' + | 'mark_chat_read' + | 'mark_chat_unread' + | 'mark_email_read' + | 'mark_email_unread' + | 'mark_unread_chat_alt' + | 'markdown' + | 'markdown_copy' + | 'markdown_paste' + | 'markunread' + | 'markunread_mailbox' + | 'masked_transitions' + | 'masked_transitions_add' + | 'masks' + | 'match_case' + | 'match_case_off' + | 'match_word' + | 'matter' + | 'maximize' + | 'measuring_tape' + | 'media_bluetooth_off' + | 'media_bluetooth_on' + | 'media_link' + | 'media_output' + | 'media_output_off' + | 'mediation' + | 'medical_information' + | 'medical_mask' + | 'medical_services' + | 'medication' + | 'medication_liquid' + | 'meeting_room' + | 'memory' + | 'memory_alt' + | 'menstrual_health' + | 'menu' + | 'menu_book' + | 'menu_open' + | 'merge' + | 'merge_type' + | 'message' + | 'metabolism' + | 'metro' + | 'mfg_nest_yale_lock' + | 'mic' + | 'mic_alert' + | 'mic_double' + | 'mic_external_off' + | 'mic_external_on' + | 'mic_noise_cancel_high' + | 'mic_noise_cancel_low' + | 'mic_noise_cancel_off' + | 'mic_none' + | 'mic_off' + | 'microbiology' + | 'microwave' + | 'microwave_gen' + | 'military_tech' + | 'mimo' + | 'mimo_disconnect' + | 'mindfulness' + | 'minimize' + | 'minor_crash' + | 'mintmark' + | 'miscellaneous_services' + | 'missed_video_call' + | 'missing_controller' + | 'mist' + | 'mitre' + | 'mixture_med' + | 'mms' + | 'mobile_friendly' + | 'mobile_off' + | 'mobile_screen_share' + | 'mobiledata_off' + | 'mode' + | 'mode_comment' + | 'mode_cool' + | 'mode_cool_off' + | 'mode_dual' + | 'mode_edit' + | 'mode_edit_outline' + | 'mode_fan' + | 'mode_fan_off' + | 'mode_heat' + | 'mode_heat_cool' + | 'mode_heat_off' + | 'mode_night' + | 'mode_of_travel' + | 'mode_off_on' + | 'mode_standby' + | 'model_training' + | 'modeling' + | 'monetization_on' + | 'money' + | 'money_bag' + | 'money_off' + | 'money_off_csred' + | 'monitor' + | 'monitor_heart' + | 'monitor_weight' + | 'monitor_weight_gain' + | 'monitor_weight_loss' + | 'monitoring' + | 'monochrome_photos' + | 'monorail' + | 'mood' + | 'mood_bad' + | 'mop' + | 'moped' + | 'more' + | 'more_down' + | 'more_horiz' + | 'more_time' + | 'more_up' + | 'more_vert' + | 'mosque' + | 'motion_blur' + | 'motion_mode' + | 'motion_photos_auto' + | 'motion_photos_off' + | 'motion_photos_on' + | 'motion_photos_pause' + | 'motion_photos_paused' + | 'motion_play' + | 'motion_sense' + | 'motion_sensor_active' + | 'motion_sensor_alert' + | 'motion_sensor_idle' + | 'motion_sensor_urgent' + | 'motorcycle' + | 'mountain_flag' + | 'mouse' + | 'mouse_lock' + | 'mouse_lock_off' + | 'move' + | 'move_down' + | 'move_group' + | 'move_item' + | 'move_location' + | 'move_selection_down' + | 'move_selection_left' + | 'move_selection_right' + | 'move_selection_up' + | 'move_to_inbox' + | 'move_up' + | 'moved_location' + | 'movie' + | 'movie_creation' + | 'movie_edit' + | 'movie_filter' + | 'movie_info' + | 'movie_off' + | 'moving' + | 'moving_beds' + | 'moving_ministry' + | 'mp' + | 'multicooker' + | 'multiline_chart' + | 'multimodal_hand_eye' + | 'multiple_airports' + | 'multiple_stop' + | 'museum' + | 'music_cast' + | 'music_note' + | 'music_note_add' + | 'music_off' + | 'music_video' + | 'my_location' + | 'mystery' + | 'nat' + | 'nature' + | 'nature_people' + | 'navigate_before' + | 'navigate_next' + | 'navigation' + | 'near_me' + | 'near_me_disabled' + | 'nearby' + | 'nearby_error' + | 'nearby_off' + | 'nearby_share' + | 'nephrology' + | 'nest_audio' + | 'nest_cam_floodlight' + | 'nest_cam_indoor' + | 'nest_cam_iq' + | 'nest_cam_iq_outdoor' + | 'nest_cam_magnet_mount' + | 'nest_cam_outdoor' + | 'nest_cam_stand' + | 'nest_cam_wall_mount' + | 'nest_cam_wired_stand' + | 'nest_clock_farsight_analog' + | 'nest_clock_farsight_digital' + | 'nest_connect' + | 'nest_detect' + | 'nest_display' + | 'nest_display_max' + | 'nest_doorbell_visitor' + | 'nest_eco' + | 'nest_eco_leaf' + | 'nest_farsight_weather' + | 'nest_found_savings' + | 'nest_gale_wifi' + | 'nest_heat_link_e' + | 'nest_heat_link_gen_3' + | 'nest_hello_doorbell' + | 'nest_locator_tag' + | 'nest_mini' + | 'nest_multi_room' + | 'nest_protect' + | 'nest_remote' + | 'nest_remote_comfort_sensor' + | 'nest_secure_alarm' + | 'nest_sunblock' + | 'nest_tag' + | 'nest_thermostat' + | 'nest_thermostat_e_eu' + | 'nest_thermostat_gen_3' + | 'nest_thermostat_sensor' + | 'nest_thermostat_sensor_eu' + | 'nest_thermostat_zirconium_eu' + | 'nest_true_radiant' + | 'nest_wake_on_approach' + | 'nest_wake_on_press' + | 'nest_wifi_gale' + | 'nest_wifi_mistral' + | 'nest_wifi_point' + | 'nest_wifi_point_vento' + | 'nest_wifi_pro' + | 'nest_wifi_pro_2' + | 'nest_wifi_router' + | 'network_cell' + | 'network_check' + | 'network_intel_node' + | 'network_intelligence' + | 'network_intelligence_history' + | 'network_intelligence_update' + | 'network_locked' + | 'network_manage' + | 'network_node' + | 'network_ping' + | 'network_wifi' + | 'network_wifi_1_bar' + | 'network_wifi_1_bar_locked' + | 'network_wifi_2_bar' + | 'network_wifi_2_bar_locked' + | 'network_wifi_3_bar' + | 'network_wifi_3_bar_locked' + | 'network_wifi_locked' + | 'neurology' + | 'new_label' + | 'new_releases' + | 'new_window' + | 'news' + | 'newsmode' + | 'newspaper' + | 'newsstand' + | 'next_plan' + | 'next_week' + | 'nfc' + | 'night_shelter' + | 'night_sight_auto' + | 'night_sight_auto_off' + | 'night_sight_max' + | 'nightlife' + | 'nightlight' + | 'nightlight_badge' + | 'nightlight_off' + | 'nightlight_round' + | 'nights_stay' + | 'no_accounts' + | 'no_adult_content' + | 'no_backpack' + | 'no_cell' + | 'no_crash' + | 'no_drinks' + | 'no_encryption' + | 'no_encryption_gmailerrorred' + | 'no_flash' + | 'no_food' + | 'no_luggage' + | 'no_meals' + | 'no_meals_ouline' + | 'no_meeting_room' + | 'no_photography' + | 'no_sim' + | 'no_sound' + | 'no_stroller' + | 'no_transfer' + | 'noise_aware' + | 'noise_control_off' + | 'noise_control_on' + | 'nordic_walking' + | 'north' + | 'north_east' + | 'north_west' + | 'not_accessible' + | 'not_accessible_forward' + | 'not_interested' + | 'not_listed_location' + | 'not_started' + | 'note' + | 'note_add' + | 'note_alt' + | 'note_stack' + | 'note_stack_add' + | 'notes' + | 'notification_add' + | 'notification_important' + | 'notification_multiple' + | 'notifications' + | 'notifications_active' + | 'notifications_none' + | 'notifications_off' + | 'notifications_paused' + | 'notifications_unread' + | 'numbers' + | 'nutrition' + | 'ods' + | 'odt' + | 'offline_bolt' + | 'offline_pin' + | 'offline_pin_off' + | 'offline_share' + | 'oil_barrel' + | 'on_device_training' + | 'on_hub_device' + | 'oncology' + | 'ondemand_video' + | 'online_prediction' + | 'onsen' + | 'opacity' + | 'open_in_browser' + | 'open_in_full' + | 'open_in_new' + | 'open_in_new_down' + | 'open_in_new_off' + | 'open_in_phone' + | 'open_jam' + | 'open_run' + | 'open_with' + | 'ophthalmology' + | 'oral_disease' + | 'orbit' + | 'order_approve' + | 'order_play' + | 'orders' + | 'orthopedics' + | 'other_admission' + | 'other_houses' + | 'outbond' + | 'outbound' + | 'outbox' + | 'outbox_alt' + | 'outdoor_garden' + | 'outdoor_grill' + | 'outgoing_mail' + | 'outlet' + | 'outlined_flag' + | 'outpatient' + | 'outpatient_med' + | 'output' + | 'output_circle' + | 'oven' + | 'oven_gen' + | 'overview' + | 'overview_key' + | 'owl' + | 'oxygen_saturation' + | 'p2p' + | 'pace' + | 'pacemaker' + | 'package' + | 'package_2' + | 'packet_mirroring' + | 'padding' + | 'page_control' + | 'page_footer' + | 'page_header' + | 'page_info' + | 'pageless' + | 'pages' + | 'pageview' + | 'paid' + | 'palette' + | 'pallet' + | 'pan_tool' + | 'pan_tool_alt' + | 'pan_zoom' + | 'panorama' + | 'panorama_fish_eye' + | 'panorama_horizontal' + | 'panorama_horizontal_select' + | 'panorama_photosphere' + | 'panorama_photosphere_select' + | 'panorama_vertical' + | 'panorama_vertical_select' + | 'panorama_wide_angle' + | 'panorama_wide_angle_select' + | 'paragliding' + | 'park' + | 'partly_cloudy_day' + | 'partly_cloudy_night' + | 'partner_exchange' + | 'partner_reports' + | 'party_mode' + | 'passkey' + | 'password' + | 'password_2' + | 'password_2_off' + | 'patient_list' + | 'pattern' + | 'pause' + | 'pause_circle' + | 'pause_circle_filled' + | 'pause_circle_outline' + | 'pause_presentation' + | 'payment' + | 'payments' + | 'pdf_off' + | 'pedal_bike' + | 'pediatrics' + | 'pen_size_1' + | 'pen_size_2' + | 'pen_size_3' + | 'pen_size_4' + | 'pen_size_5' + | 'pending' + | 'pending_actions' + | 'pentagon' + | 'people' + | 'people_alt' + | 'people_outline' + | 'percent' + | 'performance_max' + | 'pergola' + | 'perm_camera_mic' + | 'perm_contact_calendar' + | 'perm_data_setting' + | 'perm_device_information' + | 'perm_identity' + | 'perm_media' + | 'perm_phone_msg' + | 'perm_scan_wifi' + | 'person' + | 'person_2' + | 'person_3' + | 'person_4' + | 'person_add' + | 'person_add_alt' + | 'person_add_alt_1' + | 'person_add_disabled' + | 'person_alert' + | 'person_apron' + | 'person_book' + | 'person_cancel' + | 'person_celebrate' + | 'person_check' + | 'person_edit' + | 'person_filled' + | 'person_off' + | 'person_outline' + | 'person_pin' + | 'person_pin_circle' + | 'person_play' + | 'person_raised_hand' + | 'person_remove' + | 'person_remove_alt_1' + | 'person_search' + | 'personal_bag' + | 'personal_bag_off' + | 'personal_bag_question' + | 'personal_injury' + | 'personal_places' + | 'personal_video' + | 'pest_control' + | 'pest_control_rodent' + | 'pet_supplies' + | 'pets' + | 'phishing' + | 'phone' + | 'phone_android' + | 'phone_bluetooth_speaker' + | 'phone_callback' + | 'phone_disabled' + | 'phone_enabled' + | 'phone_forwarded' + | 'phone_in_talk' + | 'phone_in_talk_watchface_indicator' + | 'phone_iphone' + | 'phone_locked' + | 'phone_missed' + | 'phone_paused' + | 'phonelink' + | 'phonelink_erase' + | 'phonelink_lock' + | 'phonelink_off' + | 'phonelink_ring' + | 'phonelink_ring_off' + | 'phonelink_setup' + | 'photo' + | 'photo_album' + | 'photo_auto_merge' + | 'photo_camera' + | 'photo_camera_back' + | 'photo_camera_front' + | 'photo_filter' + | 'photo_frame' + | 'photo_library' + | 'photo_prints' + | 'photo_size_select_actual' + | 'photo_size_select_large' + | 'photo_size_select_small' + | 'php' + | 'physical_therapy' + | 'piano' + | 'piano_off' + | 'picture_as_pdf' + | 'picture_in_picture' + | 'picture_in_picture_alt' + | 'picture_in_picture_center' + | 'picture_in_picture_large' + | 'picture_in_picture_medium' + | 'picture_in_picture_mobile' + | 'picture_in_picture_off' + | 'picture_in_picture_small' + | 'pie_chart' + | 'pie_chart_outline' + | 'pie_chart_outlined' + | 'pill' + | 'pill_off' + | 'pin' + | 'pin_drop' + | 'pin_end' + | 'pin_invoke' + | 'pinboard' + | 'pinboard_unread' + | 'pinch' + | 'pinch_zoom_in' + | 'pinch_zoom_out' + | 'pip' + | 'pip_exit' + | 'pivot_table_chart' + | 'pix' + | 'pixel_3_3xl_3a' + | 'pixel_9_pro_fold' + | 'place' + | 'place_item' + | 'plagiarism' + | 'planet' + | 'planner_banner_ad_pt' + | 'planner_review' + | 'play_arrow' + | 'play_circle' + | 'play_circle_filled' + | 'play_circle_outline' + | 'play_disabled' + | 'play_for_work' + | 'play_lesson' + | 'play_pass' + | 'play_pause' + | 'play_shapes' + | 'playing_cards' + | 'playlist_add' + | 'playlist_add_check' + | 'playlist_add_check_circle' + | 'playlist_add_circle' + | 'playlist_play' + | 'playlist_remove' + | 'plumbing' + | 'plus_one' + | 'podcasts' + | 'podiatry' + | 'podium' + | 'point_of_sale' + | 'point_scan' + | 'poker_chip' + | 'policy' + | 'policy_alert' + | 'poll' + | 'polyline' + | 'polymer' + | 'pool' + | 'portable_wifi_off' + | 'portrait' + | 'portrait_lighting' + | 'portrait_lighting_off' + | 'position_bottom_left' + | 'position_bottom_right' + | 'position_top_right' + | 'post' + | 'post_add' + | 'potted_plant' + | 'power' + | 'power_input' + | 'power_off' + | 'power_rounded' + | 'power_settings_circle' + | 'power_settings_new' + | 'prayer_times' + | 'precision_manufacturing' + | 'pregnancy' + | 'pregnant_woman' + | 'preliminary' + | 'prescriptions' + | 'present_to_all' + | 'preview' + | 'preview_off' + | 'price_change' + | 'price_check' + | 'print' + | 'print_add' + | 'print_connect' + | 'print_disabled' + | 'print_error' + | 'print_lock' + | 'priority' + | 'priority_high' + | 'privacy' + | 'privacy_screen' + | 'privacy_screen_off' + | 'privacy_tip' + | 'private_connectivity' + | 'problem' + | 'procedure' + | 'process_chart' + | 'production_quantity_limits' + | 'productivity' + | 'progress_activity' + | 'prompt_suggestion' + | 'propane' + | 'propane_tank' + | 'psychiatry' + | 'psychology' + | 'psychology_alt' + | 'public' + | 'public_off' + | 'publish' + | 'published_with_changes' + | 'pulmonology' + | 'pulse_alert' + | 'punch_clock' + | 'push_pin' + | 'qr_code' + | 'qr_code_2' + | 'qr_code_2_add' + | 'qr_code_scanner' + | 'query_builder' + | 'query_stats' + | 'question_answer' + | 'question_exchange' + | 'question_mark' + | 'queue' + | 'queue_music' + | 'queue_play_next' + | 'quick_phrases' + | 'quick_reference' + | 'quick_reference_all' + | 'quick_reorder' + | 'quickreply' + | 'quiet_time' + | 'quiet_time_active' + | 'quiz' + | 'r_mobiledata' + | 'radar' + | 'radio' + | 'radio_button_checked' + | 'radio_button_partial' + | 'radio_button_unchecked' + | 'radiology' + | 'railway_alert' + | 'railway_alert_2' + | 'rainy' + | 'rainy_heavy' + | 'rainy_light' + | 'rainy_snow' + | 'ramen_dining' + | 'ramp_left' + | 'ramp_right' + | 'range_hood' + | 'rate_review' + | 'raven' + | 'raw_off' + | 'raw_on' + | 'read_more' + | 'readiness_score' + | 'real_estate_agent' + | 'rear_camera' + | 'rebase' + | 'rebase_edit' + | 'receipt' + | 'receipt_long' + | 'receipt_long_off' + | 'recent_actors' + | 'recent_patient' + | 'recenter' + | 'recommend' + | 'record_voice_over' + | 'rectangle' + | 'recycling' + | 'redeem' + | 'redo' + | 'reduce_capacity' + | 'refresh' + | 'reg_logo_ift' + | 'regular_expression' + | 'relax' + | 'release_alert' + | 'remember_me' + | 'reminder' + | 'remote_gen' + | 'remove' + | 'remove_circle' + | 'remove_circle_outline' + | 'remove_done' + | 'remove_from_queue' + | 'remove_moderator' + | 'remove_red_eye' + | 'remove_road' + | 'remove_selection' + | 'remove_shopping_cart' + | 'reopen_window' + | 'reorder' + | 'repartition' + | 'repeat' + | 'repeat_on' + | 'repeat_one' + | 'repeat_one_on' + | 'replace_audio' + | 'replace_image' + | 'replace_video' + | 'replay' + | 'replay_10' + | 'replay_30' + | 'replay_5' + | 'replay_circle_filled' + | 'reply' + | 'reply_all' + | 'report' + | 'report_gmailerrorred' + | 'report_off' + | 'report_problem' + | 'request_page' + | 'request_quote' + | 'reset_brightness' + | 'reset_focus' + | 'reset_image' + | 'reset_iso' + | 'reset_settings' + | 'reset_shadow' + | 'reset_shutter_speed' + | 'reset_tv' + | 'reset_white_balance' + | 'reset_wrench' + | 'resize' + | 'respiratory_rate' + | 'responsive_layout' + | 'restart_alt' + | 'restaurant' + | 'restaurant_menu' + | 'restore' + | 'restore_from_trash' + | 'restore_page' + | 'resume' + | 'retention' + | 'reviews' + | 'rewarded_ads' + | 'rheumatology' + | 'rib_cage' + | 'rice_bowl' + | 'right_click' + | 'right_panel_close' + | 'right_panel_open' + | 'ring_volume' + | 'ripples' + | 'road' + | 'robot' + | 'robot_2' + | 'rocket' + | 'rocket_launch' + | 'roller_shades' + | 'roller_shades_closed' + | 'roller_skating' + | 'roofing' + | 'room' + | 'room_preferences' + | 'room_service' + | 'rotate_90_degrees_ccw' + | 'rotate_90_degrees_cw' + | 'rotate_auto' + | 'rotate_left' + | 'rotate_right' + | 'roundabout_left' + | 'roundabout_right' + | 'rounded_corner' + | 'route' + | 'router' + | 'routine' + | 'rowing' + | 'rss_feed' + | 'rsvp' + | 'rtt' + | 'rubric' + | 'rule' + | 'rule_folder' + | 'rule_settings' + | 'run_circle' + | 'running_with_errors' + | 'rv_hookup' + | 'sad_tab' + | 'safety_check' + | 'safety_check_off' + | 'safety_divider' + | 'sailing' + | 'salinity' + | 'sanitizer' + | 'satellite' + | 'satellite_alt' + | 'sauna' + | 'save' + | 'save_alt' + | 'save_as' + | 'save_clock' + | 'saved_search' + | 'savings' + | 'scale' + | 'scan' + | 'scan_delete' + | 'scanner' + | 'scatter_plot' + | 'scene' + | 'schedule' + | 'schedule_send' + | 'schema' + | 'school' + | 'science' + | 'science_off' + | 'scooter' + | 'score' + | 'scoreboard' + | 'screen_attention' + | 'screen_attention_off' + | 'screen_lock_landscape' + | 'screen_lock_portrait' + | 'screen_lock_rotation' + | 'screen_record' + | 'screen_rotation' + | 'screen_rotation_alt' + | 'screen_rotation_up' + | 'screen_search_desktop' + | 'screen_share' + | 'screencast' + | 'screenshot' + | 'screenshot_frame' + | 'screenshot_frame_2' + | 'screenshot_keyboard' + | 'screenshot_monitor' + | 'screenshot_region' + | 'screenshot_tablet' + | 'script' + | 'scrollable_header' + | 'scuba_diving' + | 'sd' + | 'sd_card' + | 'sd_card_alert' + | 'sd_storage' + | 'sdk' + | 'search' + | 'search_activity' + | 'search_check' + | 'search_check_2' + | 'search_hands_free' + | 'search_insights' + | 'search_off' + | 'security' + | 'security_key' + | 'security_pro_monitoring' + | 'security_update' + | 'security_update_good' + | 'security_update_warning' + | 'segment' + | 'select' + | 'select_all' + | 'select_check_box' + | 'select_to_speak' + | 'select_window' + | 'select_window_2' + | 'select_window_off' + | 'self_care' + | 'self_improvement' + | 'sell' + | 'send' + | 'send_and_archive' + | 'send_money' + | 'send_time_extension' + | 'send_to_mobile' + | 'sensor_door' + | 'sensor_occupied' + | 'sensor_window' + | 'sensors' + | 'sensors_krx' + | 'sensors_krx_off' + | 'sensors_off' + | 'sentiment_calm' + | 'sentiment_content' + | 'sentiment_dissatisfied' + | 'sentiment_excited' + | 'sentiment_extremely_dissatisfied' + | 'sentiment_frustrated' + | 'sentiment_neutral' + | 'sentiment_sad' + | 'sentiment_satisfied' + | 'sentiment_satisfied_alt' + | 'sentiment_stressed' + | 'sentiment_very_dissatisfied' + | 'sentiment_very_satisfied' + | 'sentiment_worried' + | 'serif' + | 'server_person' + | 'service_directory' + | 'service_toolbox' + | 'set_meal' + | 'settings' + | 'settings_accessibility' + | 'settings_account_box' + | 'settings_alert' + | 'settings_applications' + | 'settings_b_roll' + | 'settings_backup_restore' + | 'settings_bluetooth' + | 'settings_brightness' + | 'settings_cell' + | 'settings_cinematic_blur' + | 'settings_ethernet' + | 'settings_heart' + | 'settings_input_antenna' + | 'settings_input_component' + | 'settings_input_composite' + | 'settings_input_hdmi' + | 'settings_input_svideo' + | 'settings_motion_mode' + | 'settings_night_sight' + | 'settings_overscan' + | 'settings_panorama' + | 'settings_phone' + | 'settings_photo_camera' + | 'settings_power' + | 'settings_remote' + | 'settings_slow_motion' + | 'settings_suggest' + | 'settings_system_daydream' + | 'settings_timelapse' + | 'settings_video_camera' + | 'settings_voice' + | 'settop_component' + | 'severe_cold' + | 'shadow' + | 'shadow_add' + | 'shadow_minus' + | 'shape_line' + | 'shapes' + | 'share' + | 'share_eta' + | 'share_location' + | 'share_off' + | 'share_reviews' + | 'share_windows' + | 'sheets_add_on' + | 'sheets_apps_script' + | 'sheets_rtl' + | 'shelf_auto_hide' + | 'shelf_position' + | 'shelves' + | 'shield' + | 'shield_lock' + | 'shield_locked' + | 'shield_moon' + | 'shield_person' + | 'shield_question' + | 'shield_spark' + | 'shield_with_heart' + | 'shield_with_house' + | 'shift' + | 'shift_lock' + | 'shift_lock_off' + | 'shop' + | 'shop_2' + | 'shop_two' + | 'shopping_bag' + | 'shopping_bag_speed' + | 'shopping_basket' + | 'shopping_cart' + | 'shopping_cart_checkout' + | 'shopping_cart_off' + | 'shoppingmode' + | 'short_stay' + | 'short_text' + | 'shortcut' + | 'show_chart' + | 'shower' + | 'shuffle' + | 'shuffle_on' + | 'shutter_speed' + | 'shutter_speed_add' + | 'shutter_speed_minus' + | 'sick' + | 'side_navigation' + | 'sign_language' + | 'signal_cellular_0_bar' + | 'signal_cellular_1_bar' + | 'signal_cellular_2_bar' + | 'signal_cellular_3_bar' + | 'signal_cellular_4_bar' + | 'signal_cellular_add' + | 'signal_cellular_alt' + | 'signal_cellular_alt_1_bar' + | 'signal_cellular_alt_2_bar' + | 'signal_cellular_connected_no_internet_0_bar' + | 'signal_cellular_connected_no_internet_1_bar' + | 'signal_cellular_connected_no_internet_2_bar' + | 'signal_cellular_connected_no_internet_3_bar' + | 'signal_cellular_connected_no_internet_4_bar' + | 'signal_cellular_no_sim' + | 'signal_cellular_nodata' + | 'signal_cellular_null' + | 'signal_cellular_off' + | 'signal_cellular_pause' + | 'signal_disconnected' + | 'signal_wifi_0_bar' + | 'signal_wifi_1_bar' + | 'signal_wifi_1_bar_lock' + | 'signal_wifi_2_bar' + | 'signal_wifi_2_bar_lock' + | 'signal_wifi_3_bar' + | 'signal_wifi_3_bar_lock' + | 'signal_wifi_4_bar' + | 'signal_wifi_4_bar_lock' + | 'signal_wifi_bad' + | 'signal_wifi_connected_no_internet_0' + | 'signal_wifi_connected_no_internet_1' + | 'signal_wifi_connected_no_internet_2' + | 'signal_wifi_connected_no_internet_3' + | 'signal_wifi_connected_no_internet_4' + | 'signal_wifi_off' + | 'signal_wifi_statusbar_1_bar' + | 'signal_wifi_statusbar_2_bar' + | 'signal_wifi_statusbar_3_bar' + | 'signal_wifi_statusbar_4_bar' + | 'signal_wifi_statusbar_connected_no_internet' + | 'signal_wifi_statusbar_connected_no_internet_1' + | 'signal_wifi_statusbar_connected_no_internet_2' + | 'signal_wifi_statusbar_connected_no_internet_3' + | 'signal_wifi_statusbar_connected_no_internet_4' + | 'signal_wifi_statusbar_not_connected' + | 'signal_wifi_statusbar_null' + | 'signature' + | 'signpost' + | 'sim_card' + | 'sim_card_alert' + | 'sim_card_download' + | 'simulation' + | 'single_bed' + | 'sip' + | 'siren' + | 'siren_check' + | 'siren_open' + | 'siren_question' + | 'skateboarding' + | 'skeleton' + | 'skillet' + | 'skillet_cooktop' + | 'skip_next' + | 'skip_previous' + | 'skull' + | 'skull_list' + | 'slab_serif' + | 'sledding' + | 'sleep' + | 'sleep_score' + | 'slide_library' + | 'sliders' + | 'slides_add_on' + | 'slides_apps_script' + | 'slideshow' + | 'slow_motion_video' + | 'smart_button' + | 'smart_card_reader' + | 'smart_card_reader_off' + | 'smart_display' + | 'smart_outlet' + | 'smart_screen' + | 'smart_toy' + | 'smart_ventilation' + | 'smartphone' + | 'smartphone_camera' + | 'smb_share' + | 'smoke_free' + | 'smoking_rooms' + | 'sms' + | 'sms_failed' + | 'snippet_folder' + | 'snooze' + | 'snowboarding' + | 'snowing' + | 'snowing_heavy' + | 'snowmobile' + | 'snowshoeing' + | 'soap' + | 'social_distance' + | 'social_leaderboard' + | 'solar_power' + | 'sort' + | 'sort_by_alpha' + | 'sos' + | 'sound_detection_dog_barking' + | 'sound_detection_glass_break' + | 'sound_detection_loud_sound' + | 'sound_sampler' + | 'sound_sensing' + | 'soup_kitchen' + | 'source' + | 'source_environment' + | 'source_notes' + | 'south' + | 'south_america' + | 'south_east' + | 'south_west' + | 'spa' + | 'space_bar' + | 'space_dashboard' + | 'spatial_audio' + | 'spatial_audio_off' + | 'spatial_speaker' + | 'spatial_tracking' + | 'speaker' + | 'speaker_group' + | 'speaker_notes' + | 'speaker_notes_off' + | 'speaker_phone' + | 'special_character' + | 'specific_gravity' + | 'speech_to_text' + | 'speed' + | 'speed_0_25' + | 'speed_0_2x' + | 'speed_0_5' + | 'speed_0_5x' + | 'speed_0_75' + | 'speed_0_7x' + | 'speed_1_2' + | 'speed_1_25' + | 'speed_1_2x' + | 'speed_1_5' + | 'speed_1_5x' + | 'speed_1_75' + | 'speed_1_7x' + | 'speed_2x' + | 'speed_camera' + | 'spellcheck' + | 'split_scene' + | 'splitscreen' + | 'splitscreen_add' + | 'splitscreen_bottom' + | 'splitscreen_landscape' + | 'splitscreen_left' + | 'splitscreen_portrait' + | 'splitscreen_right' + | 'splitscreen_top' + | 'splitscreen_vertical_add' + | 'spo2' + | 'spoke' + | 'spoof' + | 'sports' + | 'sports_and_outdoors' + | 'sports_bar' + | 'sports_baseball' + | 'sports_basketball' + | 'sports_cricket' + | 'sports_esports' + | 'sports_football' + | 'sports_golf' + | 'sports_gymnastics' + | 'sports_handball' + | 'sports_hockey' + | 'sports_kabaddi' + | 'sports_martial_arts' + | 'sports_mma' + | 'sports_motorsports' + | 'sports_rugby' + | 'sports_score' + | 'sports_soccer' + | 'sports_tennis' + | 'sports_volleyball' + | 'sprinkler' + | 'sprint' + | 'square' + | 'square_dot' + | 'square_foot' + | 'ssid_chart' + | 'stabilization' + | 'stabilization_action' + | 'stabilization_lock' + | 'stabilization_pan' + | 'stack' + | 'stack_hexagon' + | 'stack_off' + | 'stack_star' + | 'stacked_bar_chart' + | 'stacked_email' + | 'stacked_inbox' + | 'stacked_line_chart' + | 'stacks' + | 'stadia_controller' + | 'stadium' + | 'stairs' + | 'stairs_2' + | 'star' + | 'star_border' + | 'star_border_purple500' + | 'star_half' + | 'star_outline' + | 'star_purple500' + | 'star_rate' + | 'star_rate_half' + | 'stars' + | 'start' + | 'stat_0' + | 'stat_1' + | 'stat_2' + | 'stat_3' + | 'stat_minus_1' + | 'stat_minus_2' + | 'stat_minus_3' + | 'stateful' + | 'stay_current_landscape' + | 'stay_current_portrait' + | 'stay_primary_landscape' + | 'stay_primary_portrait' + | 'step' + | 'step_into' + | 'step_out' + | 'step_over' + | 'steppers' + | 'steps' + | 'stethoscope' + | 'stethoscope_arrow' + | 'stethoscope_check' + | 'sticky_note' + | 'sticky_note_2' + | 'stock_media' + | 'stockpot' + | 'stop' + | 'stop_circle' + | 'stop_screen_share' + | 'storage' + | 'store' + | 'store_mall_directory' + | 'storefront' + | 'storm' + | 'straight' + | 'straighten' + | 'strategy' + | 'stream' + | 'stream_apps' + | 'streetview' + | 'stress_management' + | 'strikethrough_s' + | 'stroke_full' + | 'stroke_partial' + | 'stroller' + | 'style' + | 'styler' + | 'stylus' + | 'stylus_laser_pointer' + | 'stylus_note' + | 'subdirectory_arrow_left' + | 'subdirectory_arrow_right' + | 'subheader' + | 'subject' + | 'subscript' + | 'subscriptions' + | 'subtitles' + | 'subtitles_off' + | 'subway' + | 'summarize' + | 'sunny' + | 'sunny_snowing' + | 'superscript' + | 'supervised_user_circle' + | 'supervised_user_circle_off' + | 'supervisor_account' + | 'support' + | 'support_agent' + | 'surfing' + | 'surgical' + | 'surround_sound' + | 'swap_calls' + | 'swap_driving_apps' + | 'swap_driving_apps_wheel' + | 'swap_horiz' + | 'swap_horizontal_circle' + | 'swap_vert' + | 'swap_vertical_circle' + | 'sweep' + | 'swipe' + | 'swipe_down' + | 'swipe_down_alt' + | 'swipe_left' + | 'swipe_left_alt' + | 'swipe_right' + | 'swipe_right_alt' + | 'swipe_up' + | 'swipe_up_alt' + | 'swipe_vertical' + | 'switch' + | 'switch_access' + | 'switch_access_2' + | 'switch_access_shortcut' + | 'switch_access_shortcut_add' + | 'switch_account' + | 'switch_camera' + | 'switch_left' + | 'switch_right' + | 'switch_video' + | 'switches' + | 'sword_rose' + | 'swords' + | 'symptoms' + | 'synagogue' + | 'sync' + | 'sync_alt' + | 'sync_arrow_down' + | 'sync_arrow_up' + | 'sync_desktop' + | 'sync_disabled' + | 'sync_lock' + | 'sync_problem' + | 'sync_saved_locally' + | 'syringe' + | 'system_security_update' + | 'system_security_update_good' + | 'system_security_update_warning' + | 'system_update' + | 'system_update_alt' + | 'tab' + | 'tab_close' + | 'tab_close_inactive' + | 'tab_close_right' + | 'tab_duplicate' + | 'tab_group' + | 'tab_inactive' + | 'tab_move' + | 'tab_new_right' + | 'tab_recent' + | 'tab_unselected' + | 'table' + | 'table_bar' + | 'table_chart' + | 'table_chart_view' + | 'table_convert' + | 'table_edit' + | 'table_eye' + | 'table_lamp' + | 'table_restaurant' + | 'table_rows' + | 'table_rows_narrow' + | 'table_view' + | 'tablet' + | 'tablet_android' + | 'tablet_camera' + | 'tablet_mac' + | 'tabs' + | 'tactic' + | 'tag' + | 'tag_faces' + | 'takeout_dining' + | 'tamper_detection_off' + | 'tamper_detection_on' + | 'tap_and_play' + | 'tapas' + | 'target' + | 'task' + | 'task_alt' + | 'taunt' + | 'taxi_alert' + | 'team_dashboard' + | 'temp_preferences_custom' + | 'temp_preferences_eco' + | 'temple_buddhist' + | 'temple_hindu' + | 'tenancy' + | 'terminal' + | 'terrain' + | 'text_ad' + | 'text_compare' + | 'text_decrease' + | 'text_fields' + | 'text_fields_alt' + | 'text_format' + | 'text_increase' + | 'text_rotate_up' + | 'text_rotate_vertical' + | 'text_rotation_angledown' + | 'text_rotation_angleup' + | 'text_rotation_down' + | 'text_rotation_none' + | 'text_select_end' + | 'text_select_jump_to_beginning' + | 'text_select_jump_to_end' + | 'text_select_move_back_character' + | 'text_select_move_back_word' + | 'text_select_move_down' + | 'text_select_move_forward_character' + | 'text_select_move_forward_word' + | 'text_select_move_up' + | 'text_select_start' + | 'text_snippet' + | 'text_to_speech' + | 'text_up' + | 'textsms' + | 'texture' + | 'texture_add' + | 'texture_minus' + | 'theater_comedy' + | 'theaters' + | 'thermometer' + | 'thermometer_add' + | 'thermometer_gain' + | 'thermometer_loss' + | 'thermometer_minus' + | 'thermostat' + | 'thermostat_arrow_down' + | 'thermostat_arrow_up' + | 'thermostat_auto' + | 'thermostat_carbon' + | 'things_to_do' + | 'thread_unread' + | 'threat_intelligence' + | 'thumb_down' + | 'thumb_down_alt' + | 'thumb_down_off' + | 'thumb_down_off_alt' + | 'thumb_up' + | 'thumb_up_alt' + | 'thumb_up_off' + | 'thumb_up_off_alt' + | 'thumbnail_bar' + | 'thumbs_up_down' + | 'thunderstorm' + | 'tibia' + | 'tibia_alt' + | 'tile_large' + | 'tile_medium' + | 'tile_small' + | 'time_auto' + | 'time_to_leave' + | 'timelapse' + | 'timeline' + | 'timer' + | 'timer_10' + | 'timer_10_alt_1' + | 'timer_10_select' + | 'timer_3' + | 'timer_3_alt_1' + | 'timer_3_select' + | 'timer_5' + | 'timer_5_shutter' + | 'timer_arrow_down' + | 'timer_arrow_up' + | 'timer_off' + | 'timer_pause' + | 'timer_play' + | 'tips_and_updates' + | 'tire_repair' + | 'title' + | 'titlecase' + | 'toast' + | 'toc' + | 'today' + | 'toggle_off' + | 'toggle_on' + | 'token' + | 'toll' + | 'tonality' + | 'toolbar' + | 'tools_flat_head' + | 'tools_installation_kit' + | 'tools_ladder' + | 'tools_level' + | 'tools_phillips' + | 'tools_pliers_wire_stripper' + | 'tools_power_drill' + | 'tools_wrench' + | 'tooltip' + | 'tooltip_2' + | 'top_panel_close' + | 'top_panel_open' + | 'topic' + | 'tornado' + | 'total_dissolved_solids' + | 'touch_app' + | 'touch_double' + | 'touch_long' + | 'touch_triple' + | 'touchpad_mouse' + | 'touchpad_mouse_off' + | 'tour' + | 'toys' + | 'toys_and_games' + | 'toys_fan' + | 'track_changes' + | 'trackpad_input' + | 'trackpad_input_2' + | 'trackpad_input_3' + | 'traffic' + | 'traffic_jam' + | 'trail_length' + | 'trail_length_medium' + | 'trail_length_short' + | 'train' + | 'tram' + | 'transcribe' + | 'transfer_within_a_station' + | 'transform' + | 'transgender' + | 'transit_enterexit' + | 'transit_ticket' + | 'transition_chop' + | 'transition_dissolve' + | 'transition_fade' + | 'transition_push' + | 'transition_slide' + | 'translate' + | 'transportation' + | 'travel' + | 'travel_explore' + | 'travel_luggage_and_bags' + | 'trending_down' + | 'trending_flat' + | 'trending_up' + | 'trip' + | 'trip_origin' + | 'trolley' + | 'trolley_cable_car' + | 'trophy' + | 'troubleshoot' + | 'try' + | 'tsunami' + | 'tsv' + | 'tty' + | 'tune' + | 'tungsten' + | 'turn_left' + | 'turn_right' + | 'turn_sharp_left' + | 'turn_sharp_right' + | 'turn_slight_left' + | 'turn_slight_right' + | 'turned_in' + | 'turned_in_not' + | 'tv' + | 'tv_displays' + | 'tv_gen' + | 'tv_guide' + | 'tv_next' + | 'tv_off' + | 'tv_options_edit_channels' + | 'tv_options_input_settings' + | 'tv_remote' + | 'tv_signin' + | 'tv_with_assistant' + | 'two_pager' + | 'two_pager_store' + | 'two_wheeler' + | 'type_specimen' + | 'u_turn_left' + | 'u_turn_right' + | 'ulna_radius' + | 'ulna_radius_alt' + | 'umbrella' + | 'unarchive' + | 'unblock_flipped' + | 'undo' + | 'unfloat_landscape' + | 'unfloat_portrait' + | 'unfold_less' + | 'unfold_less_double' + | 'unfold_more' + | 'unfold_more_double' + | 'ungroup' + | 'universal_currency' + | 'universal_currency_alt' + | 'universal_local' + | 'unknown_2' + | 'unknown_5' + | 'unknown_7' + | 'unknown_document' + | 'unknown_med' + | 'unlicense' + | 'unpaved_road' + | 'unpin' + | 'unpublished' + | 'unsubscribe' + | 'upcoming' + | 'update' + | 'update_disabled' + | 'upgrade' + | 'upi_pay' + | 'upload' + | 'upload_2' + | 'upload_file' + | 'uppercase' + | 'urology' + | 'usb' + | 'usb_off' + | 'user_attributes' + | 'vaccines' + | 'vacuum' + | 'valve' + | 'vape_free' + | 'vaping_rooms' + | 'variable_add' + | 'variable_insert' + | 'variable_remove' + | 'variables' + | 'ventilator' + | 'verified' + | 'verified_user' + | 'vertical_align_bottom' + | 'vertical_align_center' + | 'vertical_align_top' + | 'vertical_distribute' + | 'vertical_shades' + | 'vertical_shades_closed' + | 'vertical_split' + | 'vibration' + | 'video_audio_call' + | 'video_call' + | 'video_camera_back' + | 'video_camera_back_add' + | 'video_camera_front' + | 'video_camera_front_off' + | 'video_chat' + | 'video_file' + | 'video_label' + | 'video_library' + | 'video_search' + | 'video_settings' + | 'video_stable' + | 'videocam' + | 'videocam_alert' + | 'videocam_off' + | 'videogame_asset' + | 'videogame_asset_off' + | 'view_agenda' + | 'view_apps' + | 'view_array' + | 'view_carousel' + | 'view_column' + | 'view_column_2' + | 'view_comfy' + | 'view_comfy_alt' + | 'view_compact' + | 'view_compact_alt' + | 'view_cozy' + | 'view_day' + | 'view_headline' + | 'view_in_ar' + | 'view_in_ar_new' + | 'view_in_ar_off' + | 'view_kanban' + | 'view_list' + | 'view_module' + | 'view_object_track' + | 'view_quilt' + | 'view_real_size' + | 'view_sidebar' + | 'view_stream' + | 'view_timeline' + | 'view_week' + | 'vignette' + | 'villa' + | 'visibility' + | 'visibility_lock' + | 'visibility_off' + | 'vital_signs' + | 'vitals' + | 'vo2_max' + | 'voice_chat' + | 'voice_over_off' + | 'voice_selection' + | 'voice_selection_off' + | 'voicemail' + | 'volcano' + | 'volume_down' + | 'volume_down_alt' + | 'volume_mute' + | 'volume_off' + | 'volume_up' + | 'volunteer_activism' + | 'voting_chip' + | 'vpn_googleone' + | 'vpn_key' + | 'vpn_key_alert' + | 'vpn_key_off' + | 'vpn_lock' + | 'vr180_create2d' + | 'vr180_create2d_off' + | 'vrpano' + | 'wall_art' + | 'wall_lamp' + | 'wallet' + | 'wallpaper' + | 'wallpaper_slideshow' + | 'ward' + | 'warehouse' + | 'warning' + | 'warning_amber' + | 'warning_off' + | 'wash' + | 'watch' + | 'watch_button_press' + | 'watch_check' + | 'watch_later' + | 'watch_off' + | 'watch_screentime' + | 'watch_vibration' + | 'watch_wake' + | 'water' + | 'water_bottle' + | 'water_bottle_large' + | 'water_damage' + | 'water_do' + | 'water_drop' + | 'water_ec' + | 'water_full' + | 'water_heater' + | 'water_lock' + | 'water_loss' + | 'water_lux' + | 'water_medium' + | 'water_orp' + | 'water_ph' + | 'water_pump' + | 'water_voc' + | 'waterfall_chart' + | 'waves' + | 'waving_hand' + | 'wb_auto' + | 'wb_cloudy' + | 'wb_incandescent' + | 'wb_iridescent' + | 'wb_shade' + | 'wb_sunny' + | 'wb_twighlight' + | 'wb_twilight' + | 'wc' + | 'weather_hail' + | 'weather_mix' + | 'weather_snowy' + | 'web' + | 'web_asset' + | 'web_asset_off' + | 'web_stories' + | 'web_traffic' + | 'webhook' + | 'weekend' + | 'weight' + | 'west' + | 'whatsapp' + | 'whatshot' + | 'wheelchair_pickup' + | 'where_to_vote' + | 'whiteboard' + | 'widget_medium' + | 'widget_small' + | 'widget_width' + | 'widgets' + | 'width' + | 'width_full' + | 'width_normal' + | 'width_wide' + | 'wifi' + | 'wifi_1_bar' + | 'wifi_2_bar' + | 'wifi_add' + | 'wifi_calling' + | 'wifi_calling_1' + | 'wifi_calling_2' + | 'wifi_calling_3' + | 'wifi_calling_bar_1' + | 'wifi_calling_bar_2' + | 'wifi_calling_bar_3' + | 'wifi_channel' + | 'wifi_find' + | 'wifi_home' + | 'wifi_lock' + | 'wifi_notification' + | 'wifi_off' + | 'wifi_password' + | 'wifi_protected_setup' + | 'wifi_proxy' + | 'wifi_tethering' + | 'wifi_tethering_error' + | 'wifi_tethering_error_rounded' + | 'wifi_tethering_off' + | 'wind_power' + | 'window' + | 'window_closed' + | 'window_open' + | 'window_sensor' + | 'wine_bar' + | 'woman' + | 'woman_2' + | 'work' + | 'work_alert' + | 'work_history' + | 'work_off' + | 'work_outline' + | 'work_update' + | 'workspace_premium' + | 'workspaces' + | 'workspaces_filled' + | 'workspaces_outline' + | 'wounds_injuries' + | 'wrap_text' + | 'wrist' + | 'wrong_location' + | 'wysiwyg' + | 'yard' + | 'your_trips' + | 'youtube_activity' + | 'youtube_searched_for' + | 'zone_person_alert' + | 'zone_person_idle' + | 'zone_person_urgent' + | 'zoom_in' + | 'zoom_in_map' + | 'zoom_out' + | 'zoom_out_map'; diff --git a/src/components/icons/image-placeholder-icon.tsx b/src/components/icons/image-placeholder-icon.tsx deleted file mode 100644 index f41bba0..0000000 --- a/src/components/icons/image-placeholder-icon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const ImagePlaceholderIcon = ({ className }: { className?: string }) => { - return ( - - - - - - ); -}; diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts deleted file mode 100644 index bff8f31..0000000 --- a/src/components/icons/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -export { ArrowRightIcon } from './arrow-right-icon'; -export { CartIcon } from './cart-icon/cart-icon'; -export { ChevronRightIcon } from './chevron-right-icon'; -export { CrossSmallIcon } from './cross-small-icon'; -export { CrossIcon } from './cross-icon'; -export { DropdownIcon } from './dropdown-icon'; -export { ErrorIcon } from './error-icon'; -export { FacebookIcon } from './facebook-icon'; -export { ImagePlaceholderIcon } from './image-placeholder-icon'; -export { LockIcon } from './lock-icon'; -export { MenuIcon } from './menu-icon'; -export { MinusIcon } from './minus-icon'; -export { PinterestIcon } from './pinterest-icon'; -export { PlusIcon } from './plus-icon'; -export { SearchIcon } from './search-icon'; -export { TrashIcon } from './trash-icon'; -export { UserIcon } from './user-icon'; -export { WhatsAppIcon } from './whatsapp-icon'; diff --git a/src/components/icons/lock-icon.tsx b/src/components/icons/lock-icon.tsx deleted file mode 100644 index 4e411a2..0000000 --- a/src/components/icons/lock-icon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export const LockIcon = (props: React.SVGProps) => { - return ( - - - - - ); -}; diff --git a/src/components/icons/menu-icon.tsx b/src/components/icons/menu-icon.tsx deleted file mode 100644 index 9a0a68c..0000000 --- a/src/components/icons/menu-icon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const MenuIcon = (props: React.SVGProps) => { - return ( - - - - - - ); -}; diff --git a/src/components/icons/minus-icon.tsx b/src/components/icons/minus-icon.tsx deleted file mode 100644 index 8011695..0000000 --- a/src/components/icons/minus-icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const MinusIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/pinterest-icon.tsx b/src/components/icons/pinterest-icon.tsx deleted file mode 100644 index e6f31a4..0000000 --- a/src/components/icons/pinterest-icon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const PinterestIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/plus-icon.tsx b/src/components/icons/plus-icon.tsx deleted file mode 100644 index 5068ee9..0000000 --- a/src/components/icons/plus-icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const PlusIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/search-icon.tsx b/src/components/icons/search-icon.tsx deleted file mode 100644 index e87ef3a..0000000 --- a/src/components/icons/search-icon.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export const SearchIcon = (props: React.SVGProps) => ( - - - -); diff --git a/src/components/icons/trash-icon.tsx b/src/components/icons/trash-icon.tsx deleted file mode 100644 index a065889..0000000 --- a/src/components/icons/trash-icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const TrashIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/user-icon.tsx b/src/components/icons/user-icon.tsx deleted file mode 100644 index 906c577..0000000 --- a/src/components/icons/user-icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const UserIcon = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/whatsapp-icon.tsx b/src/components/icons/whatsapp-icon.tsx deleted file mode 100644 index 73478e2..0000000 --- a/src/components/icons/whatsapp-icon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const WhatsAppIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; diff --git a/src/components/label-with-arrow/label-with-arrow.tsx b/src/components/label-with-arrow/label-with-arrow.tsx index d183f98..cba1631 100644 --- a/src/components/label-with-arrow/label-with-arrow.tsx +++ b/src/components/label-with-arrow/label-with-arrow.tsx @@ -1,5 +1,4 @@ import styles from './label-with-arrow.module.scss'; -import { ArrowRightIcon } from '~/src/components/icons'; import classNames from 'classnames'; import { FC, HTMLAttributes } from 'react'; @@ -14,7 +13,9 @@ export const LabelWithArrow: FC> = ({ {children}
{children}
- + + arrow_forward + ); }; diff --git a/src/components/navigation-menu/navigation-menu.module.scss b/src/components/navigation-menu/navigation-menu.module.scss index 130a5e2..ad1027e 100644 --- a/src/components/navigation-menu/navigation-menu.module.scss +++ b/src/components/navigation-menu/navigation-menu.module.scss @@ -13,10 +13,6 @@ height: 100%; } -.menuList.vertical { - flex-direction: column; -} - .menuItem { padding: 0 12px; white-space: nowrap; @@ -25,7 +21,7 @@ align-items: center; } -.menuItem:hover, -.menuItem.active { - text-decoration: none; +.menuList.vertical { + flex-direction: column; } + diff --git a/src/components/navigation-menu/navigation-menu.tsx b/src/components/navigation-menu/navigation-menu.tsx index ea68f33..aa7c7da 100644 --- a/src/components/navigation-menu/navigation-menu.tsx +++ b/src/components/navigation-menu/navigation-menu.tsx @@ -43,7 +43,7 @@ export const NavigationMenu = ({ className, vertical = false }: NavigationMenuPr
  • - + About
    • diff --git a/src/components/navigation-progress-bar/navigation-progress-bar.module.scss b/src/components/navigation-progress-bar/navigation-progress-bar.module.scss index 832837b..4c1a59e 100644 --- a/src/components/navigation-progress-bar/navigation-progress-bar.module.scss +++ b/src/components/navigation-progress-bar/navigation-progress-bar.module.scss @@ -1,7 +1,3 @@ -:where(.progressBar) { - --color: #007bff; -} - .progressBar { position: fixed; top: 0; @@ -16,18 +12,6 @@ animation: loadingAnimation 100s forwards; } -.progressBar.finished { - /** - * By combining the 'loading' and 'finished' animations here, we ensure that - * when the .loading class is replaced with the .finished class, the browser - * retains the progress of the 'loading' animation, and uses as the starting - * point for the 'finished' animation. - */ - animation: - loadingAnimation 100s forwards, - finishedAnimation 0.3s forwards; -} - @keyframes loadingAnimation { /** Start quickly to make the progress bar clearly visible */ 0% { diff --git a/src/components/order-summary/order-item/order-item.module.scss b/src/components/order-summary/order-item/order-item.module.scss index 35601c1..696a957 100644 --- a/src/components/order-summary/order-item/order-item.module.scss +++ b/src/components/order-summary/order-item/order-item.module.scss @@ -21,12 +21,6 @@ object-fit: cover; } -.imagePlaceholderIcon { - width: 50px; - height: 50px; - color: #fff; -} - .main { display: flex; justify-content: space-between; @@ -39,24 +33,13 @@ gap: 2px; } -.orderInfo { - width: calc(100% / 2); - flex-shrink: 0; - display: flex; - justify-content: space-between; -} - @media (max-width: 480px) { .main { flex-direction: column; } - .orderInfo { - width: 100%; - } -} -.productName { } + .productNameAndPrice { display: flex; flex-direction: column; diff --git a/src/components/order-summary/order-item/order-item.tsx b/src/components/order-summary/order-item/order-item.tsx index 03f0c0b..eb544b3 100644 --- a/src/components/order-summary/order-item/order-item.tsx +++ b/src/components/order-summary/order-item/order-item.tsx @@ -3,7 +3,6 @@ import { orders } from '@wix/ecom'; import type { SerializeFrom } from '@remix-run/node'; import { media } from '@wix/sdk'; import styles from './order-item.module.scss'; -import { ImagePlaceholderIcon } from '~/src/components/icons'; interface OrderItemProps { item: SerializeFrom; @@ -23,7 +22,9 @@ export const OrderItem = ({ item }: OrderItemProps) => { alt={image.altText ?? productName} /> ) : ( - + + image + )} diff --git a/src/components/order-summary/order-summary.module.scss b/src/components/order-summary/order-summary.module.scss index af7de17..8f71888 100644 --- a/src/components/order-summary/order-summary.module.scss +++ b/src/components/order-summary/order-summary.module.scss @@ -20,10 +20,6 @@ gap: 24px; } -.summary { - gap: 24px; -} - .orderDetailsRow { display: flex; justify-content: space-between; @@ -91,9 +87,6 @@ } @media (max-width: 480px) { - .summary { - grid-template-columns: 1fr; - } .priceSummary { grid-column: auto; diff --git a/src/components/product-card/product-card.module.scss b/src/components/product-card/product-card.module.scss index d0892ad..ff8f23b 100644 --- a/src/components/product-card/product-card.module.scss +++ b/src/components/product-card/product-card.module.scss @@ -14,6 +14,10 @@ align-items: center; justify-content: center; background: var(--primary2); + overflow: hidden; +} +.imageWrapper:hover img { + transform: scale(1.05); } .imageWrapper > a{ width: 100%; @@ -21,19 +25,13 @@ } .image { + transition: transform 0.3s; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; } -.imagePlaceholderIcon { - width: 60%; - max-width: 100px; - min-width: 50px; - color: var(--primary4); -} - .ribbon { padding: 10px 12px; background: var(--surface-dark); @@ -62,10 +60,6 @@ text-transform: uppercase; } -.outOfStock { - color: var(--primary4); -} - .skeleton > .imageWrapper { background: var(--surface-mid); } @@ -90,20 +84,7 @@ flex-direction: column; gap: 12px; } -.quickViewRow{ - display: flex; - gap: 8px; - align-items: center; - justify-content: space-between; -} -.quickViewSizes{ - display: flex; - gap: 8px; - align-items: center; - font: var(--body2); - text-transform: uppercase; -} .quickViewSizes > span{ padding: 3.5px 2px; } diff --git a/src/components/product-card/product-card.tsx b/src/components/product-card/product-card.tsx index bf16495..eb9f89d 100644 --- a/src/components/product-card/product-card.tsx +++ b/src/components/product-card/product-card.tsx @@ -1,6 +1,5 @@ import styles from './product-card.module.scss'; import { ProductPrice } from '../product-price/product-price'; -import { ImagePlaceholderIcon } from '../icons'; import { ProductLink } from '~/src/components/product-link/product-link'; import { getProductImageUrl, useProductDetails } from '~/src/wix/products'; import classNames from 'classnames'; @@ -9,6 +8,7 @@ import { getErrorMessage } from '~/src/wix/utils'; import { ProductOption } from '~/src/components/product-option/product-option'; import { type JsonifyObject } from 'type-fest/source/jsonify'; import { Product } from '~/src/wix/ecom'; +import Icon from '../icons/icon'; interface ProductCardProps { product: Product; @@ -50,12 +50,12 @@ export const ProductCard = ({ {imageUrl ? ( {product.name!} ) : ( - + )}
    {product.ribbon && {product.ribbon}} - {product.stock?.inventoryStatus !== "OUT_OF_STOCK" && + {product.stock?.inventoryStatus !== 'OUT_OF_STOCK' && discountedPrice && price && price !== discountedPrice && ( @@ -68,37 +68,39 @@ export const ProductCard = ({ )}
    -
    - {productOptions && productOptions.length > 0 && ( -
    - {productOptions.map((option) => ( - - handleOptionChange(option.name!, choice) - } - /> - ))} -
    - )} +
    + {productOptions && productOptions.length > 0 && ( +
    + {productOptions.map((option) => ( + handleOptionChange(option.name!, choice)} + /> + ))} +
    + )} - -
    + +
    {product.name!}
    diff --git a/src/components/product-filters/product-filters.tsx b/src/components/product-filters/product-filters.tsx index e009c66..16f4adb 100644 --- a/src/components/product-filters/product-filters.tsx +++ b/src/components/product-filters/product-filters.tsx @@ -5,7 +5,6 @@ import { mergeUrlSearchParams, useSearchParamsOptimistic } from '~/src/wix/utils import { PriceFilter } from './price-filter'; import { DropdownMenu } from '~/src/components/dropdown-menu/dropdown-menu'; import styles from './product-filters.module.scss'; -import { DropdownIcon } from '~/src/components/icons'; interface ProductFiltersProps { minAvailablePrice: number; @@ -32,17 +31,26 @@ export const ProductFilters = ({ }; return ( - Price} contentProps={{ align: 'end', className: styles.content}}> - - - + + Price + + expand_more + + + } + contentProps={{ align: 'end', className: styles.content }} + > + + ); }; diff --git a/src/components/product-grid/product-grid.module.scss b/src/components/product-grid/product-grid.module.scss index b034fa0..23da430 100644 --- a/src/components/product-grid/product-grid.module.scss +++ b/src/components/product-grid/product-grid.module.scss @@ -10,11 +10,6 @@ gap: 40px 4px; } -.productLink { - display: block; - max-width: var(--maxColumnWidth); -} - .clearFiltersButton { margin-top: 32px; } @@ -23,13 +18,6 @@ color: rgba(23, 17, 13, 0.7); } -.loadMoreWrapper{ - display: flex; - justify-content: center; - align-items: center; - padding: 24px; -} - @media (max-width: 767px){ .productGrid{ grid-template-columns: repeat(2, 1fr); diff --git a/src/components/product-images/product-images.module.scss b/src/components/product-images/product-images.module.scss index b2c5f2e..be3f005 100644 --- a/src/components/product-images/product-images.module.scss +++ b/src/components/product-images/product-images.module.scss @@ -19,12 +19,6 @@ object-fit: cover; } -.imagePlaceholderIcon { - width: 210px; - height: 210px; - color: #646464; -} - @media (max-width: 1023px) { .imagesWrapper { grid-template-columns: 1fr; diff --git a/src/components/product-images/product-images.tsx b/src/components/product-images/product-images.tsx index 6e52e6a..603912a 100644 --- a/src/components/product-images/product-images.tsx +++ b/src/components/product-images/product-images.tsx @@ -1,6 +1,5 @@ import { products } from '@wix/stores'; import classNames from 'classnames'; -import { ImagePlaceholderIcon } from '../icons'; import styles from './product-images.module.scss'; @@ -25,8 +24,10 @@ export const ProductImages = ({ media }: ProductImagesProps) => { alt={item.image!.altText ?? ''} /> - )):( - + )): ( + + image + ) } diff --git a/src/components/product-option/product-option.tsx b/src/components/product-option/product-option.tsx index e755431..0dd1bcc 100644 --- a/src/components/product-option/product-option.tsx +++ b/src/components/product-option/product-option.tsx @@ -2,7 +2,6 @@ import { products } from '@wix/stores'; import { ColorSelect } from '~/src/components/color-select/color-select'; import { getChoiceValue } from '~/src/wix/products'; import { Select, SelectItem } from '~/src/components/select/select'; -import { ErrorIcon } from '../icons'; import styles from './product-option.module.scss'; import classNames from 'classnames'; @@ -55,6 +54,7 @@ export const ProductOption = ({ isQuickView = false, option, selectedChoice, err /> ) : ( - + add ); diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx index 30ef104..35f1e3d 100644 --- a/src/components/search-input/search-input.tsx +++ b/src/components/search-input/search-input.tsx @@ -44,7 +44,6 @@ export const SearchInput = forwardRef(functi - ); }); diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index 2874ef7..327eb96 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -1,9 +1,9 @@ import * as RadixSelect from '@radix-ui/react-select'; import classNames from 'classnames'; -import { DropdownIcon } from '../icons'; import styles from './select.module.scss'; import React from 'react'; +import Icon from '../icons/icon'; export interface SelectProps { value: V; @@ -36,13 +36,13 @@ export const Select = ({ > {renderValue?.(value)} - + @@ -58,10 +58,24 @@ export interface SelectItemProps { className?: string; } -export const SelectItem = ({ value, children, className }: SelectItemProps) => { +export const SelasdectItem = ({ value, children, className }: SelectItemProps) => { return ( {children} ); }; + +export const SelectItem = React.forwardRef( + function SelectItem({ children, className, ...props }, forwardedRef) { + return ( + + {children} + + ); + } +); diff --git a/src/components/share-product-links/share-product-links.tsx b/src/components/share-product-links/share-product-links.tsx index e469028..8dae518 100644 --- a/src/components/share-product-links/share-product-links.tsx +++ b/src/components/share-product-links/share-product-links.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import { FacebookIcon, PinterestIcon, WhatsAppIcon } from '../icons'; import styles from './share-product-links.module.scss'; interface ShareProductLinksProps { @@ -16,7 +15,7 @@ export const ShareProductLinks = ({ productCanonicalUrl, className }: ShareProdu target="_blank" rel="noreferrer" > - + whatsapp - + facebook - + pinterest ); diff --git a/src/components/sidebar-navigation-menu/sidebar-navigation-menu.tsx b/src/components/sidebar-navigation-menu/sidebar-navigation-menu.tsx index eff28f9..71beb70 100644 --- a/src/components/sidebar-navigation-menu/sidebar-navigation-menu.tsx +++ b/src/components/sidebar-navigation-menu/sidebar-navigation-menu.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames'; import { useNavigation } from '@remix-run/react'; import { Drawer } from '../drawer/drawer'; -import { CrossIcon } from '../icons'; import { NavigationMenu } from '../navigation-menu/navigation-menu'; import styles from './sidebar-navigation-menu.module.scss'; import { useEffect } from 'react'; @@ -25,7 +24,9 @@ export const SidebarNavigationMenu = ({ open, onClose }: SidebarNavigationMenuPr ); diff --git a/src/components/toast/toast.module.scss b/src/components/toast/toast.module.scss index 34fce27..670b3c4 100644 --- a/src/components/toast/toast.module.scss +++ b/src/components/toast/toast.module.scss @@ -9,9 +9,6 @@ } /** Toast type: success */ -.root.success { - background-color: #767f53; -} /** Toast type: error */ .root.error { @@ -19,9 +16,6 @@ } /** Toast type: unspecified */ -.root.blank { - background-color: #7d6283; -} /** Toast type: loading */ .root.loading { @@ -78,10 +72,3 @@ } } -.enterAnimation { - animation: fadeIn 0.5s ease forwards; -} - -.exitAnimation { - animation: fadeOut 0.5s ease forwards; -} diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx index 0d1e842..bce9ce7 100644 --- a/src/components/toast/toast.tsx +++ b/src/components/toast/toast.tsx @@ -1,6 +1,5 @@ import classNames from 'classnames'; import { Toast as ToastData, toast, resolveValue } from 'react-hot-toast'; -import { CrossIcon } from '~/src/components/icons'; import styles from './toast.module.scss'; @@ -33,7 +32,9 @@ export const Toast = ({ toast }: { toast: ToastData }) => {
    {resolveValue(toast.message, toast)}
    {toast.type === 'loading' ? null : ( )} diff --git a/src/components/user-menu/user-menu.tsx b/src/components/user-menu/user-menu.tsx index 908a5e7..ffaa37f 100644 --- a/src/components/user-menu/user-menu.tsx +++ b/src/components/user-menu/user-menu.tsx @@ -5,7 +5,6 @@ import { DropdownMenuItem, DropdownMenuSeparator, } from '~/src/components/dropdown-menu/dropdown-menu'; -import { DropdownIcon } from '~/src/components/icons'; import { useUserInfo } from '~/src/wix/users'; import styles from './user-menu.module.scss'; @@ -27,10 +26,12 @@ export const UserMenu = () => { return ( +
    - - + + expand_more + +
    } contentProps={{ align: 'end', diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 146381e..cdd28bf 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -30,6 +30,7 @@ --text-secondary: #666666; --focus: #000000; --input-border: #3b3b3b; + --input-border-disabled: #E5E5E5; --input-surface: #f7f7f7; --icon-primary: #000000; --overlay: rgba(0, 0, 0, 0.2); diff --git a/src/styles/utils.scss b/src/styles/utils.scss index 691c698..d362095 100644 --- a/src/styles/utils.scss +++ b/src/styles/utils.scss @@ -60,13 +60,6 @@ text-decoration-skip-ink: none; } -.body2-caps { - font: var(--body2-caps); - text-transform: uppercase; - text-underline-position: from-font; - text-decoration-skip-ink: none; -} - .body3 { font: var(--body3); text-transform: none; @@ -104,14 +97,6 @@ text-transform: uppercase; } -.lowercase { - text-transform: lowercase; -} - -.capitalize { - text-transform: capitalize; -} - /* Buttons ********************************************************************/ .button { @@ -155,25 +140,17 @@ background: rgba(255, 255, 255, 0.2); } -.button.active { - background: var(--button-primary-surface-selected); - color: var(--text-invert); -} - -.button.active:hover { - background: var(--button-primary-surface-selected); - color: var(--text-invert); +.button.muted { + border-color: transparent; + color: var(--text-secondary); } -.mutedPrimaryButton { - border-color: transparent; - background: var(--secondary3); - color: var(--primary1); +.button.muted:not(:disabled):hover { + background: var(--button-primary-surface-hover); } -.mutedPrimaryButton:not(:disabled):hover { - background: rgba(112, 115, 101, 0.7); - color: var(--primary1); +.button.muted:not(:disabled):active { + background: unset; } .button.button-secondary { @@ -211,7 +188,7 @@ padding: 5px 16px; } -/* Inputs ********************************************************************/ +/* Badge ********************************************************************/ .badge{ padding: 8px 10px; @@ -232,36 +209,34 @@ } .textInput { - border: none; - background: transparent; - color: var(--primary5); - font: var(--paragraph1); - padding: 8px 0; - border-bottom: solid 1px rgba(23, 17, 13, 0.4); + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + background: var(--input-surface); + color: var(--text-primary); + font: var(--body2); + padding: 14px 12px; + border-radius: 2px; + border: 1px solid var(--input-border); box-shadow: none; &:disabled { - color: var(--primary4); - opacity: 0.5; + color: var(--text-disabled); + border-color: var(--input-border-disabled); } &:focus, &:hover:not(:disabled) { - border-bottom-color: var(--primary5); + outline: var(--focus) solid 1px; } &::placeholder { - color: var(--primary4); + color: var(--text-secondary); } } /* Icons **********************************************************************/ -.smallIcon { - width: 20px; - height: 20px; -} - /* Recommended icon sizes */ span.size-20 { font-size: 20px; @@ -275,10 +250,6 @@ span.size-40 { font-size: 40px; font-variation-settings: 'OPSZ' 40; } -span.size-48 { - font-size: 48px; - font-variation-settings: 'OPSZ' 48; -} /* Text Page ******************************************************************/ @@ -562,31 +533,15 @@ span.size-48 { border-bottom-color: var(--secondary2); } -.tab.active { - border-bottom-color: var(--secondary3); -} - @media (max-width: 768px) { .tab { padding: 14px 20px; } - .tab.active { - color: var(--primary4); - } - - .tab.active, - .tab:hover { - border-bottom-color: transparent; - } } /* Miscellaneous **************************************************************/ -.alternateBackground { - background: var(--primary3); -} - .ribbon { display: inline-block; vertical-align: middle; diff --git a/src/wix/categories/category-details.ts b/src/wix/categories/category-details.ts new file mode 100644 index 0000000..233a2b2 --- /dev/null +++ b/src/wix/categories/category-details.ts @@ -0,0 +1,13 @@ +import { CollectionDetails } from '../ecom'; +import { getWixImageIdFromUrl, getWixImageUrl, WixImageTransformOptions } from '../utils'; + +export function getCategoryImageUrl( + category: CollectionDetails, + options: WixImageTransformOptions = {}, +): string | undefined { + const image = category.media?.mainMedia?.image; + if (!image) return; + const id = getWixImageIdFromUrl(image.url); + if (!id) return; + return getWixImageUrl({ id, width: image.width, height: image.height }, options); +} diff --git a/src/wix/categories/index.ts b/src/wix/categories/index.ts index 13730cb..3356efb 100644 --- a/src/wix/categories/index.ts +++ b/src/wix/categories/index.ts @@ -1 +1,2 @@ +export * from './category-details'; export * from './use-category-details'; diff --git a/src/wix/products/product-details.ts b/src/wix/products/product-details.ts index 84329ef..2bef07a 100644 --- a/src/wix/products/product-details.ts +++ b/src/wix/products/product-details.ts @@ -173,7 +173,7 @@ export function formatPrice(price: number, currency: string): string { export function getProductImageUrl( item: wixStoresProducts.MediaItem | Product | SerializeFrom, - options: WixImageTransformOptions, + options: WixImageTransformOptions = {}, ): string | undefined { if ('media' in item && item.media?.mainMedia) { item = item.media.mainMedia; diff --git a/src/wix/utils/media.ts b/src/wix/utils/media.ts index 8f5a1b8..90831bf 100644 --- a/src/wix/utils/media.ts +++ b/src/wix/utils/media.ts @@ -47,3 +47,8 @@ export const getWixImageUrl = (image: WixImage, options: WixImageTransformOption // crops the image instead of fitting it. return `https://static.wixstatic.com/media/${id}/v1/fit/w_${size},h_${size},q_${quality}/${id}`; }; + +export const getWixImageIdFromUrl = (url: string): string | undefined => { + if (!url.startsWith('https://static.wixstatic.com/media/')) return; + return new URL(url).pathname.split('/').at(2); +};