From ca93b0de7b36e19e5d1328c4c0e1d02ea45f7bb1 Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Thu, 17 Dec 2020 14:24:59 +0200 Subject: [PATCH] weapon select fancy initial --- components/common/MySelect.tsx | 174 +++++++++++++++++--- components/common/WeaponSelector.tsx | 105 +++++++----- components/u/BuildModal.tsx | 35 +--- locale/de/messages.json | 3 - locale/el/messages.json | 3 - locale/en/messages.json | 3 - locale/es/messages.json | 3 - locale/fr/messages.json | 3 - locale/it/messages.json | 3 - locale/ja/messages.json | 3 - locale/ko/messages.json | 3 - locale/nl/messages.json | 3 - locale/pt/messages.json | 3 - locale/ru/messages.json | 3 - locale/sv/messages.json | 3 - package-lock.json | 233 +++++++++++++++++++++++++++ package.json | 2 + pages/builds/[[...slug]].tsx | 13 +- theme.ts | 30 +--- 19 files changed, 468 insertions(+), 160 deletions(-) diff --git a/components/common/MySelect.tsx b/components/common/MySelect.tsx index 6a3d14dfa..9f59a6c94 100644 --- a/components/common/MySelect.tsx +++ b/components/common/MySelect.tsx @@ -1,30 +1,160 @@ -import { Select } from "@chakra-ui/react"; +import { useColorMode } from "@chakra-ui/react"; +import { useMyTheme } from "lib/useMyTheme"; +import { useState } from "react"; +import ReactSelect, { + GroupedOptionsType, + OptionsType, + OptionTypeBase, + ValueType, +} from "react-select"; +import { SelectComponents } from "react-select/src/components"; -interface Props { - value: string; - setValue: (value?: string) => void; - placeholder?: string; - name?: string; - children: React.ReactNode; +interface SelectProps { + options?: + | OptionsType<{ + label: string; + value: string; + }> + | GroupedOptionsType<{ + label: string; + value: string; + }>; + width?: string; + value: ValueType; + setValue?: (value: any) => void; + autoFocus?: boolean; + components?: Partial>; + isClearable?: boolean; + isMulti?: boolean; + isLoading?: boolean; + isDisabled?: boolean; + isSearchable?: boolean; + menuIsOpen?: boolean; + hideMenuBeforeTyping?: boolean; } -const MySelect: React.FC = ({ +const MySelect: React.FC = ({ + options, + components, value, setValue, - placeholder, - children, - name, -}) => ( - -); + if (Array.isArray(selectedOption)) { + setValue(selectedOption.map((obj) => obj.value)); + } else { + setValue(selectedOption?.value); + } + }; + + const getOptionColor = (focused: boolean) => { + if (focused) return "black"; + + return colorMode === "light" ? "black" : "white"; + }; + + const menuIsOpenCheck = () => { + if (menuIsOpen) return true; + if (hideMenuBeforeTyping) { + return !!(inputValue.length >= 3); + } + + return undefined; + }; + + console.log({ borderColor }); + + return ( + setInputValue(newValue)} + menuIsOpen={menuIsOpenCheck()} + onChange={handleChange} + placeholder={null} + isSearchable={!!isSearchable} + isMulti={!!isMulti} + isLoading={isLoading} + isDisabled={isDisabled} + isClearable={isClearable} + options={options} + components={ + hideMenuBeforeTyping + ? { + IndicatorSeparator: () => null, + DropdownIndicator: () => null, + ...components, + } + : { + IndicatorSeparator: () => null, + ...components, + } + } + theme={(theme) => ({ + ...theme, + borderRadius: 5, + colors: { + ...theme.colors, + primary25: `${themeColorHex}`, + primary: themeColorHex, + neutral0: bgColor, + neutral5: bgColor, + }, + })} + autoFocus={autoFocus} + styles={{ + singleValue: (base) => ({ + ...base, + padding: 5, + borderRadius: 5, + color: colorMode === "light" ? "black" : "white", + display: "flex", + }), + input: (base) => ({ + ...base, + color: colorMode === "light" ? "black" : "white", + }), + multiValue: (base) => ({ + ...base, + background: themeColorHex, + color: "black", + }), + option: (styles, { isFocused }) => { + return { + ...styles, + backgroundColor: isFocused ? themeColorHex : undefined, + color: getOptionColor(isFocused), + }; + }, + menu: (styles) => ({ ...styles, zIndex: 999 }), + control: (base) => ({ + ...base, + borderColor, + height: "2.5rem", + background: "hsla(0, 0%, 0%, 0)", + }), + }} + /> + ); +}; export default MySelect; diff --git a/components/common/WeaponSelector.tsx b/components/common/WeaponSelector.tsx index fbd92c20d..e8b7451e6 100644 --- a/components/common/WeaponSelector.tsx +++ b/components/common/WeaponSelector.tsx @@ -1,53 +1,76 @@ -import { Select } from "@chakra-ui/react"; -import { t } from "@lingui/macro"; +import { Box, Flex } from "@chakra-ui/react"; import { useLingui } from "@lingui/react"; import { weaponsWithHeroCategorized } from "lib/lists/weaponsWithHero"; +import { components } from "react-select"; +import MySelect from "./MySelect"; +import WeaponImage from "./WeaponImage"; -interface Props { - name?: string; - value: string; - onChange: (value: string) => void; - excludeAlt?: boolean; - isHeader?: boolean; +interface WeaponSelectorProps { + value?: string; + setValue: (value: string) => void; + autoFocus?: boolean; + isClearable?: boolean; + isMulti?: boolean; + menuIsOpen?: boolean; + showAlts?: boolean; } -const WeaponSelector: React.FC = ({ - name, +const WeaponSelector: React.FC = ({ value, - onChange, - excludeAlt = false, - isHeader = false, + setValue, + isClearable, + autoFocus, + isMulti, + menuIsOpen, + showAlts, }) => { const { i18n } = useLingui(); + const singleOption = (props: any) => ( + + + + + + {props.label} + + + ); + return ( - <> - - + ({ + label: i18n._(category.name), + options: category.weapons.map((weapon) => ({ + value: weapon, + label: i18n._(weapon), + })), + })) + : weaponsWithHeroCategorized.map((category) => ({ + label: i18n._(category.name), + options: category.weapons + .filter( + (wpn) => !wpn.includes("Hero") && !wpn.includes("Octo Shot") + ) + .map((weapon) => ({ + value: weapon, + label: i18n._(weapon), + })), + })) + } + value={value ? { value, label: i18n._(value) } : undefined} + setValue={setValue} + isClearable={isClearable} + isSearchable + isMulti={isMulti} + menuIsOpen={menuIsOpen} + components={{ + IndicatorSeparator: () => null, + Option: singleOption, + }} + autoFocus={autoFocus} + /> ); }; diff --git a/components/u/BuildModal.tsx b/components/u/BuildModal.tsx index f3ab20825..b5aa0acfe 100644 --- a/components/u/BuildModal.tsx +++ b/components/u/BuildModal.tsx @@ -15,6 +15,7 @@ import { ModalFooter, ModalHeader, ModalOverlay, + Select, Stack, Textarea, useToast, @@ -23,7 +24,6 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { t, Trans } from "@lingui/macro"; import { Ability } from "@prisma/client"; import ViewSlots from "components/builds/ViewSlots"; -import MySelect from "components/common/MySelect"; import WeaponSelector from "components/common/WeaponSelector"; import { getToastOptions } from "lib/getToastOptions"; import { gear } from "lib/lists/gear"; @@ -175,11 +175,7 @@ const BuildModal: React.FC = ({ onClose, build }) => { control={control} defaultValue={null} render={({ onChange, value }) => ( - + )} /> @@ -301,12 +297,7 @@ const BuildModal: React.FC = ({ onClose, build }) => { control={control} defaultValue="" render={({ onChange, value, name }) => ( - + )} /> @@ -329,12 +320,7 @@ const BuildModal: React.FC = ({ onClose, build }) => { control={control} defaultValue="" render={({ onChange, value, name }) => ( - + )} /> @@ -357,12 +343,7 @@ const BuildModal: React.FC = ({ onClose, build }) => { control={control} defaultValue="" render={({ onChange, value, name }) => ( - + )} /> diff --git a/locale/de/messages.json b/locale/de/messages.json index 40d63e366..ed7e4103b 100644 --- a/locale/de/messages.json +++ b/locale/de/messages.json @@ -89,11 +89,8 @@ "Title": "Titel", "Description": "Beschreibung", "Head": "", - "Select gear (head)": "", "Clothing": "Kleidung", - "Select gear (clothing)": "", "Shoes": "Schuhe", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/el/messages.json b/locale/el/messages.json index 7f6173478..caa744dff 100644 --- a/locale/el/messages.json +++ b/locale/el/messages.json @@ -89,11 +89,8 @@ "Title": "Τίτλος", "Description": "Περιγραφή", "Head": "", - "Select gear (head)": "", "Clothing": "Ρούχα", - "Select gear (clothing)": "", "Shoes": "Παπούτσια", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/en/messages.json b/locale/en/messages.json index 17f5db31a..0e4829263 100644 --- a/locale/en/messages.json +++ b/locale/en/messages.json @@ -89,11 +89,8 @@ "Title": "Title", "Description": "Description", "Head": "Head", - "Select gear (head)": "Select gear (head)", "Clothing": "Clothing", - "Select gear (clothing)": "Select gear (clothing)", "Shoes": "Shoes", - "Select gear (shoes)": "Select gear (shoes)", "Modes": "Modes", "TW": "TW", "SZ": "SZ", diff --git a/locale/es/messages.json b/locale/es/messages.json index bbd01837e..2ace30707 100644 --- a/locale/es/messages.json +++ b/locale/es/messages.json @@ -89,11 +89,8 @@ "Title": "Título", "Description": "Descripción", "Head": "", - "Select gear (head)": "", "Clothing": "Ropa", - "Select gear (clothing)": "", "Shoes": "Calzado", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/fr/messages.json b/locale/fr/messages.json index 32b725c68..f0a34f52b 100644 --- a/locale/fr/messages.json +++ b/locale/fr/messages.json @@ -89,11 +89,8 @@ "Title": "Titre", "Description": "Description", "Head": "", - "Select gear (head)": "", "Clothing": "Vêtements", - "Select gear (clothing)": "", "Shoes": "Chaussures", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/it/messages.json b/locale/it/messages.json index f2cc3cf25..dbdb84b46 100644 --- a/locale/it/messages.json +++ b/locale/it/messages.json @@ -89,11 +89,8 @@ "Title": "Titolo", "Description": "Descrizione", "Head": "", - "Select gear (head)": "", "Clothing": "Vestiti", - "Select gear (clothing)": "", "Shoes": "Scarpe", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/ja/messages.json b/locale/ja/messages.json index 9044e1f51..cc8b4d23c 100644 --- a/locale/ja/messages.json +++ b/locale/ja/messages.json @@ -89,11 +89,8 @@ "Title": "", "Description": "", "Head": "", - "Select gear (head)": "", "Clothing": "", - "Select gear (clothing)": "", "Shoes": "", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/ko/messages.json b/locale/ko/messages.json index 7e8f2988f..ef86b1af2 100644 --- a/locale/ko/messages.json +++ b/locale/ko/messages.json @@ -89,11 +89,8 @@ "Title": "제목", "Description": "설명", "Head": "", - "Select gear (head)": "", "Clothing": "옷", - "Select gear (clothing)": "", "Shoes": "신발", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/nl/messages.json b/locale/nl/messages.json index 9044e1f51..cc8b4d23c 100644 --- a/locale/nl/messages.json +++ b/locale/nl/messages.json @@ -89,11 +89,8 @@ "Title": "", "Description": "", "Head": "", - "Select gear (head)": "", "Clothing": "", - "Select gear (clothing)": "", "Shoes": "", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/pt/messages.json b/locale/pt/messages.json index 9c4cd8c97..adb0b3412 100644 --- a/locale/pt/messages.json +++ b/locale/pt/messages.json @@ -89,11 +89,8 @@ "Title": "Título", "Description": "Descrição", "Head": "", - "Select gear (head)": "", "Clothing": "Roupa", - "Select gear (clothing)": "", "Shoes": "Calçado", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/ru/messages.json b/locale/ru/messages.json index 9044e1f51..cc8b4d23c 100644 --- a/locale/ru/messages.json +++ b/locale/ru/messages.json @@ -89,11 +89,8 @@ "Title": "", "Description": "", "Head": "", - "Select gear (head)": "", "Clothing": "", - "Select gear (clothing)": "", "Shoes": "", - "Select gear (shoes)": "", "Modes": "", "TW": "", "SZ": "", diff --git a/locale/sv/messages.json b/locale/sv/messages.json index 312b5f078..09f93beda 100644 --- a/locale/sv/messages.json +++ b/locale/sv/messages.json @@ -89,11 +89,8 @@ "Title": "Titel", "Description": "Beskrivning", "Head": "Huvud", - "Select gear (head)": "Välj huvudbonad", "Clothing": "Kläder", - "Select gear (clothing)": "Välj kläder", "Shoes": "Skor", - "Select gear (shoes)": "Välj skor", "Modes": "Spellägen", "TW": "TW", "SZ": "SZ", diff --git a/package-lock.json b/package-lock.json index 66977d277..64b4723c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1372,6 +1372,93 @@ } } }, + "@emotion/core": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz", + "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + }, + "dependencies": { + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + } + } + }, + "@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "requires": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + }, + "dependencies": { + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + } + } + }, "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", @@ -1444,6 +1531,11 @@ } } }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -1937,6 +2029,15 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.0.tgz", + "integrity": "sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-infinite-scroller": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.1.tgz", @@ -1946,6 +2047,26 @@ "@types/react": "*" } }, + "@types/react-select": { + "version": "3.0.28", + "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.28.tgz", + "integrity": "sha512-Gfg3a/EPLyUQkfezcCQkmLW1Vz6+ziclJhn8dpBUEYJF3IUoxS81ToAi3ky2xtnAyk2wJFMXLvE73KiUd56yTA==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/react-dom": "*", + "@types/react-transition-group": "*" + } + }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/recharts": { "version": "1.8.18", "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.18.tgz", @@ -2492,6 +2613,47 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "babel-plugin-emotion": { + "version": "10.0.33", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz", + "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + }, + "dependencies": { + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + } + } + }, "babel-plugin-macros": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", @@ -6742,6 +6904,11 @@ "unist-util-visit-parents": "1.1.2" } }, + "memoize-one": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -8526,6 +8693,14 @@ "prop-types": "^15.5.8" } }, + "react-input-autosize": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz", + "integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==", + "requires": { + "prop-types": "^15.5.8" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -8588,6 +8763,64 @@ "resize-observer-polyfill": "^1.5.0" } }, + "react-select": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.1.tgz", + "integrity": "sha512-HjC6jT2BhUxbIbxMZWqVcDibrEpdUJCfGicN0MMV+BQyKtCaPTgFekKWiOizSCy4jdsLMGjLqcFGJMhVGWB0Dg==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/cache": "^10.0.9", + "@emotion/core": "^10.0.9", + "@emotion/css": "^10.0.9", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-input-autosize": "^2.2.2", + "react-transition-group": "^4.3.0" + }, + "dependencies": { + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + } + } + }, "react-smooth": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz", diff --git a/package.json b/package.json index ffb16f2b6..18a64395b 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "react-icons": "^4.1.0", "react-infinite-scroller": "^1.2.4", "react-markdown": "^4.3.1", + "react-select": "^3.1.1", "react-string-replace": "^0.4.4", "recharts": "^1.8.5", "swr": "^0.3.9", @@ -64,6 +65,7 @@ "@types/nprogress": "^0.2.0", "@types/react": "^17.0.0", "@types/react-infinite-scroller": "^1.2.1", + "@types/react-select": "^3.0.28", "@types/recharts": "^1.8.18", "cypress": "^6.1.0", "husky": "^5.0.4", diff --git a/pages/builds/[[...slug]].tsx b/pages/builds/[[...slug]].tsx index a47a5995b..2fc241cee 100644 --- a/pages/builds/[[...slug]].tsx +++ b/pages/builds/[[...slug]].tsx @@ -22,12 +22,13 @@ const BuildsPage = () => { return ( <> - dispatch({ type: "SET_WEAPON", weapon })} - excludeAlt - isHeader - /> + + dispatch({ type: "SET_WEAPON", weapon })} + menuIsOpen={!state.weapon} + /> + <> {state.weapon && ( <> diff --git a/theme.ts b/theme.ts index c5c6152c6..99dc44035 100644 --- a/theme.ts +++ b/theme.ts @@ -1,31 +1,3 @@ -/* - const theme = { - light: { - colorMode: "light", - bgColor: "#eff0f3", - darkerBgColor: "#FFFAFA", - textColor: "blackAlpha.900", - borderStyle: "1px solid rgba(0, 0, 0, .2)", - themeColorWithShade: `${themeColor}.500`, - grayWithShade: "gray.600", - themeColorHex: chakraTheme.colors[themeColor]["500"], - themeColorHexLighter: chakraTheme.colors[themeColor]["200"], - themeColor, - } as Theme, - dark: { - colorMode: "dark", - bgColor: "#031e3e", - darkerBgColor: "#0e2a56", - textColor: "whiteAlpha.900", - borderStyle: "1px solid rgba(255, 255, 255, .2)", - themeColorWithShade: `${themeColor}.200`, - grayWithShade: "gray.300", - themeColorHex: chakraTheme.colors[themeColor]["500"], - themeColorHexLighter: chakraTheme.colors[themeColor]["200"], - themeColor, - } as Theme, - }; */ - export const theme = { light: { themeColorShade: "theme.600", @@ -34,6 +6,7 @@ export const theme = { secondaryBgColor: "#FFFAFA", textColor: "blackAlpha.900", gray: "gray.600", + borderColor: "#2e466c", }, dark: { themeColorShade: "theme.200", @@ -42,5 +15,6 @@ export const theme = { secondaryBgColor: "#0e2a56", textColor: "whiteAlpha.900", gray: "gray.300", + borderColor: "#2e466c", }, } as const;