Deploy organization and bug fixes (#299)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Added World Series to weapon series empty state (#293)

* Push 2023/03 updates to main (#292)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Add World series to empty state

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Enables advanced filters in collections (#289)

* Add skeleton of FilterModal

* Install react-slider from Radix

* Move AccountModal styles to more generic place

* Make generic TableField and move styles

This is so we have a base for other table rows that use different interactive elements

* Implement custom Slider component

This inherits from Radix's Slider

* Implement SliderTableField

* Implemented SwitchTableField

* Change enabled switch color

* Implement InputTableField

* Update modal skeleton

* Added localizations for Advanced filters

* Update styles for various components

Added some new colors and fixed spacing

* Added value reporting and fixed a cycle error

* Added default values, clearing filters, etc

* Default values
* Ability to clear filters
* Receiving values from components

* Fix maximum cycle depth exceeded error

* Update TableFields to not error

Also optional value is required

* Create FilterSet.d.ts

* Send filtersets to FilterModal

This sends the default filterset and the user's filterset to the filter modal.

The default filterset is used when resetting all filters. The users filterset is used so that it is populated with the user's values when they open the modal

* Add new localizations

* Change types and add default filterset object

* Add fast-deep-equal package

* Change value in table fields

* Input table fields need to be able to be empty
* Slider table fields should default to 0 if value isn't provided

* Set width of Select in table field in Filter dialog

* Add style for filter button with filters active

* Swap to using selects for some boolean fields

Charge Attack, Full Auto, and Auto Guard are not boolean values since the user can select (and the default should be) to show both on and off values. We swap to using a SelectTableField here to represent this difference.

We also added logic for Full Auto and Auto Guard fields since they are tied together in some cases (you can't show Auto Guard teams that have Full Auto disabled)

* Populate values from defaultFilterSet

* Update how we save and propagate filters

We save filterset in a local state, because the FilterBar will send it down to us from cookies.

We then set each individual property from that filter set.

We set inputs to have a placeholder, as max buttons and max turns could not be set (null). Then, we only send those fields when they have a value provided by the user.

* Remove default filterset

This was moved to a utils/ file

* Propagate filters from modal

This updates how we handle filter propagation to accommodate the advanced ones. The icon lights up when filters are active.

* Implement advanced filters on Teams page

* Add skeleton of FilterModal

* Make generic TableField and move styles

This is so we have a base for other table rows that use different interactive elements

* Implement custom Slider component

This inherits from Radix's Slider

* Implement SliderTableField

* Implemented SwitchTableField

* Implement InputTableField

* Update modal skeleton

* Added localizations for Advanced filters

* Update styles for various components

Added some new colors and fixed spacing

* Added value reporting and fixed a cycle error

* Added default values, clearing filters, etc

* Default values
* Ability to clear filters
* Receiving values from components

* Fix maximum cycle depth exceeded error

* Update TableFields to not error

Also optional value is required

* Create FilterSet.d.ts

* Send filtersets to FilterModal

This sends the default filterset and the user's filterset to the filter modal.

The default filterset is used when resetting all filters. The users filterset is used so that it is populated with the user's values when they open the modal

* Add new localizations

* Change types and add default filterset object

* Change value in table fields

* Input table fields need to be able to be empty
* Slider table fields should default to 0 if value isn't provided

* Set width of Select in table field in Filter dialog

* Add style for filter button with filters active

* Swap to using selects for some boolean fields

Charge Attack, Full Auto, and Auto Guard are not boolean values since the user can select (and the default should be) to show both on and off values. We swap to using a SelectTableField here to represent this difference.

We also added logic for Full Auto and Auto Guard fields since they are tied together in some cases (you can't show Auto Guard teams that have Full Auto disabled)

* Populate values from defaultFilterSet

* Update how we save and propagate filters

We save filterset in a local state, because the FilterBar will send it down to us from cookies.

We then set each individual property from that filter set.

We set inputs to have a placeholder, as max buttons and max turns could not be set (null). Then, we only send those fields when they have a value provided by the user.

* Remove default filterset

This was moved to a utils/ file

* Propagate filters from modal

This updates how we handle filter propagation to accommodate the advanced ones. The icon lights up when filters are active.

* GridRep adjustments

* Properly unset mainhand when cells get reused and the new team doesnt have one
* Slightly better styling to make the grid more correct

* Fix bad merge

* Add advanced filter support to saved and profile pages

* Fix auto guard text

* Ensure fetchTeams callback is updated with filters

* Add auto guard icon to GridRep

* Disable max buttons and turns

* Fix build errors

* Organize components (#298)

* Deploy advanced filters (#297)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Added World Series to weapon series empty state (#293)

* Push 2023/03 updates to main (#292)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Add World series to empty state

* Added items from 2023/03 Legfest and 2023/03/30 update (#290)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Missed items (#291)

* Added avatars (#286)

* Deploy #287 (#288)

* Added avatars

* Added content from the 2023/03/22 update (#287)

* Added avatars (#286)

* Added localizations

* Added update, changed CSS

* Add logic for showing Lucifer uncap and 250 art

* Added new weapon series

* Added updates

* Add more items

* Enables advanced filters in collections (#289)

* Add skeleton of FilterModal

* Install react-slider from Radix

* Move AccountModal styles to more generic place

* Make generic TableField and move styles

This is so we have a base for other table rows that use different interactive elements

* Implement custom Slider component

This inherits from Radix's Slider

* Implement SliderTableField

* Implemented SwitchTableField

* Change enabled switch color

* Implement InputTableField

* Update modal skeleton

* Added localizations for Advanced filters

* Update styles for various components

Added some new colors and fixed spacing

* Added value reporting and fixed a cycle error

* Added default values, clearing filters, etc

* Default values
* Ability to clear filters
* Receiving values from components

* Fix maximum cycle depth exceeded error

* Update TableFields to not error

Also optional value is required

* Create FilterSet.d.ts

* Send filtersets to FilterModal

This sends the default filterset and the user's filterset to the filter modal.

The default filterset is used when resetting all filters. The users filterset is used so that it is populated with the user's values when they open the modal

* Add new localizations

* Change types and add default filterset object

* Add fast-deep-equal package

* Change value in table fields

* Input table fields need to be able to be empty
* Slider table fields should default to 0 if value isn't provided

* Set width of Select in table field in Filter dialog

* Add style for filter button with filters active

* Swap to using selects for some boolean fields

Charge Attack, Full Auto, and Auto Guard are not boolean values since the user can select (and the default should be) to show both on and off values. We swap to using a SelectTableField here to represent this difference.

We also added logic for Full Auto and Auto Guard fields since they are tied together in some cases (you can't show Auto Guard teams that have Full Auto disabled)

* Populate values from defaultFilterSet

* Update how we save and propagate filters

We save filterset in a local state, because the FilterBar will send it down to us from cookies.

We then set each individual property from that filter set.

We set inputs to have a placeholder, as max buttons and max turns could not be set (null). Then, we only send those fields when they have a value provided by the user.

* Remove default filterset

This was moved to a utils/ file

* Propagate filters from modal

This updates how we handle filter propagation to accommodate the advanced ones. The icon lights up when filters are active.

* Implement advanced filters on Teams page

* Add skeleton of FilterModal

* Make generic TableField and move styles

This is so we have a base for other table rows that use different interactive elements

* Implement custom Slider component

This inherits from Radix's Slider

* Implement SliderTableField

* Implemented SwitchTableField

* Implement InputTableField

* Update modal skeleton

* Added localizations for Advanced filters

* Update styles for various components

Added some new colors and fixed spacing

* Added value reporting and fixed a cycle error

* Added default values, clearing filters, etc

* Default values
* Ability to clear filters
* Receiving values from components

* Fix maximum cycle depth exceeded error

* Update TableFields to not error

Also optional value is required

* Create FilterSet.d.ts

* Send filtersets to FilterModal

This sends the default filterset and the user's filterset to the filter modal.

The default filterset is used when resetting all filters. The users filterset is used so that it is populated with the user's values when they open the modal

* Add new localizations

* Change types and add default filterset object

* Change value in table fields

* Input table fields need to be able to be empty
* Slider table fields should default to 0 if value isn't provided

* Set width of Select in table field in Filter dialog

* Add style for filter button with filters active

* Swap to using selects for some boolean fields

Charge Attack, Full Auto, and Auto Guard are not boolean values since the user can select (and the default should be) to show both on and off values. We swap to using a SelectTableField here to represent this difference.

We also added logic for Full Auto and Auto Guard fields since they are tied together in some cases (you can't show Auto Guard teams that have Full Auto disabled)

* Populate values from defaultFilterSet

* Update how we save and propagate filters

We save filterset in a local state, because the FilterBar will send it down to us from cookies.

We then set each individual property from that filter set.

We set inputs to have a placeholder, as max buttons and max turns could not be set (null). Then, we only send those fields when they have a value provided by the user.

* Remove default filterset

This was moved to a utils/ file

* Propagate filters from modal

This updates how we handle filter propagation to accommodate the advanced ones. The icon lights up when filters are active.

* GridRep adjustments

* Properly unset mainhand when cells get reused and the new team doesnt have one
* Slightly better styling to make the grid more correct

* Fix bad merge

* Add advanced filter support to saved and profile pages

* Fix auto guard text

* Ensure fetchTeams callback is updated with filters

* Add auto guard icon to GridRep

* Disable max buttons and turns

* Fix build errors

* Organize components into folders

* Fix transcendence popover levels

* Remove extra styles

* Add Storybook

* Delete Home.module.css

* Update paths

* Fix popover arrow

* Fix import paths

* Fix scrollbars in search

* Add type to further fix TranscendencePopover

* Add background-size to 1x in hidpiImage mixin

* Fix hovercard scrollbar

* Move components

* Fix ElementToggle on smaller devices

* Change default filterset

Min characters should be 2, not 3

.eslintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    // Other rules
     "@next/next/no-img-element": "off"
   }
 }

.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+const path = require('path')
+
+const config: StorybookConfig = {
+  stories: [
+    '../components/**/*.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        sass: {
+          // Require your Sass preprocessor here
+          implementation: require('sass'),
+          additionalData: `
+              @import "./styles/variables.scss";
+            `,
+        },
+      },
+    },
+  ],
+  staticDirs: ['../public'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config: any, { configType }) => {
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ]
+    config.resolve.fallback.fs = false
+    return config
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from '@storybook/react'
+
+import '../styles/globals.scss'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

components/ElementToggle/index.scss

@@ -8,6 +8,12 @@
   height: $height;
   gap: calc($unit / 4);
   padding: calc($unit / 2);
+  flex-wrap: wrap;
+
+  @include breakpoint(phone) {
+    border-radius: $unit-2x;
+    height: auto;
+  }
 
   .ToggleItem {
     background: var(--toggle-bg);
@@ -16,7 +22,14 @@
     color: var(--input-secondary);
     flex-grow: 1;
     font-size: $font-regular;
-    padding: ($unit) $unit * 2;
+    padding-top: $unit;
+    padding-bottom: $unit;
+
+    @include breakpoint(phone) {
+      border-radius: $card-corner;
+      padding-left: $unit-2x;
+      padding-right: $unit-2x;
+    }
 
     &.ja {
       padding-top: 6px;

components/ErrorSection/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 
-import Button from '~components/Button'
+import Button from '~components/common/Button'
 import { ResponseStatus } from '~types'
 
 import './index.scss'

components/FilterBar/index.tsx

@@ -5,9 +5,9 @@ import equals from 'fast-deep-equal'
 
 import FilterModal from '~components/FilterModal'
 import RaidDropdown from '~components/RaidDropdown'
-import Select from '~components/Select'
-import SelectItem from '~components/SelectItem'
-import Button from '~components/Button'
+import Select from '~components/common/Select'
+import SelectItem from '~components/common/SelectItem'
+import Button from '~components/common/Button'
 
 import { defaultFilterset } from '~utils/defaultFilters'
 

components/FilterModal/index.tsx

@@ -8,15 +8,15 @@ import {
   DialogTrigger,
   DialogClose,
   DialogTitle,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
+} from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
 
-import Button from '~components/Button'
-import InputTableField from '~components/InputTableField'
-import SelectTableField from '~components/SelectTableField'
-import SliderTableField from '~components/SliderTableField'
-import SwitchTableField from '~components/SwitchTableField'
-import SelectItem from '~components/SelectItem'
+import Button from '~components/common/Button'
+import InputTableField from '~components/common/InputTableField'
+import SelectTableField from '~components/common/SelectTableField'
+import SliderTableField from '~components/common/SliderTableField'
+import SwitchTableField from '~components/common/SwitchTableField'
+import SelectItem from '~components/common/SelectItem'
 
 import type { DialogProps } from '@radix-ui/react-dialog'
 

components/GridRep/index.tsx

@@ -9,7 +9,7 @@ import 'fix-date'
 import { accountState } from '~utils/accountState'
 import { formatTimeAgo } from '~utils/timeAgo'
 
-import Button from '~components/Button'
+import Button from '~components/common/Button'
 
 import SaveIcon from '~public/icons/Save.svg'
 import ShieldIcon from '~public/icons/Shield.svg'

components/Header/index.tsx

@@ -22,13 +22,13 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuLabel,
-} from '~components/DropdownMenuContent'
-import LoginModal from '~components/LoginModal'
-import SignupModal from '~components/SignupModal'
-import AccountModal from '~components/AccountModal'
-import Toast from '~components/Toast'
-import Button from '~components/Button'
-import Tooltip from '~components/Tooltip'
+} from '~components/common/DropdownMenuContent'
+import LoginModal from '~components/auth/LoginModal'
+import SignupModal from '~components/auth/SignupModal'
+import AccountModal from '~components/auth/AccountModal'
+import Toast from '~components/common/Toast'
+import Button from '~components/common/Button'
+import Tooltip from '~components/common/Tooltip'
 import * as Switch from '@radix-ui/react-switch'
 
 import ArrowIcon from '~public/icons/Arrow.svg'

components/Layout/index.tsx

@@ -6,7 +6,7 @@ import { getCookie } from 'cookies-next'
 import { appState } from '~utils/appState'
 
 import TopHeader from '~components/Header'
-import UpdateToast from '~components/UpdateToast'
+import UpdateToast from '~components/about/UpdateToast'
 
 import './index.scss'
 

components/RaidDropdown/index.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import Select from '~components/Select'
-import SelectItem from '~components/SelectItem'
-import SelectGroup from '~components/SelectGroup'
+import Select from '~components/common/Select'
+import SelectItem from '~components/common/SelectItem'
+import SelectGroup from '~components/common/SelectGroup'
 
 import api from '~utils/api'
 import organizeRaids from '~utils/organizeRaids'

components/about/ContentUpdate/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import ChangelogUnit from '~components/ChangelogUnit'
+import ChangelogUnit from '~components/about/ChangelogUnit'
 
 import './index.scss'
 

components/about/UpdateToast/index.tsx

@@ -4,8 +4,8 @@ import { setCookie } from 'cookies-next'
 import { add, format } from 'date-fns'
 import classNames from 'classnames'
 
-import Button from '~components/Button'
-import Toast from '~components/Toast'
+import Button from '~components/common/Button'
+import Toast from '~components/common/Toast'
 
 import './index.scss'
 import { useTranslation } from 'next-i18next'

components/about/UpdatesPage/index.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { useTranslation } from 'next-i18next'
 
-import ContentUpdate from '~components/ContentUpdate'
-import ChangelogUnit from '~components/ChangelogUnit'
+import ContentUpdate from '~components/about/ContentUpdate'
+import ChangelogUnit from '~components/about/ChangelogUnit'
 
 import './index.scss'
 

components/auth/AccountModal/index.tsx

@@ -9,12 +9,12 @@ import {
   DialogClose,
   DialogTitle,
   DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-import Button from '~components/Button'
-import SelectItem from '~components/SelectItem'
-import PictureSelectItem from '~components/PictureSelectItem'
-import SelectTableField from '~components/SelectTableField'
+} from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
+import Button from '~components/common/Button'
+import SelectItem from '~components/common/SelectItem'
+import PictureSelectItem from '~components/common/PictureSelectItem'
+import SelectTableField from '~components/common/SelectTableField'
 // import * as Switch from '@radix-ui/react-switch'
 
 import api from '~utils/api'

components/auth/LoginModal/index.tsx

@@ -8,10 +8,10 @@ import api from '~utils/api'
 import { setHeaders } from '~utils/userToken'
 import { accountState } from '~utils/accountState'
 
-import Button from '~components/Button'
-import Input from '~components/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
+import Button from '~components/common/Button'
+import Input from '~components/common/Input'
+import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
 
 import CrossIcon from '~public/icons/Cross.svg'

components/auth/SignupModal/index.tsx

@@ -8,10 +8,10 @@ import api from '~utils/api'
 import { setHeaders } from '~utils/userToken'
 import { accountState } from '~utils/accountState'
 
-import Button from '~components/Button'
-import Input from '~components/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
+import Button from '~components/common/Button'
+import Input from '~components/common/Input'
+import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 

components/character/CharacterConflictModal/index.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'next-i18next'
 
-import { Dialog } from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-import Button from '~components/Button'
-import Overlay from '~components/Overlay'
+import { Dialog } from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
+import Button from '~components/common/Button'
+import Overlay from '~components/common/Overlay'
 
 import { appState } from '~utils/appState'
 

components/character/CharacterGrid/index.tsx

@@ -7,10 +7,10 @@ import { useTranslation } from 'next-i18next'
 import { AxiosError, AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
-import Alert from '~components/Alert'
-import JobSection from '~components/JobSection'
-import CharacterUnit from '~components/CharacterUnit'
-import CharacterConflictModal from '~components/CharacterConflictModal'
+import Alert from '~components/common/Alert'
+import JobSection from '~components/job/JobSection'
+import CharacterUnit from '~components/character/CharacterUnit'
+import CharacterConflictModal from '~components/character/CharacterConflictModal'
 
 import type { DetailsObject, JobSkillObject, SearchableObject } from '~types'
 

components/character/CharacterHovercard/index.tsx

@@ -6,10 +6,10 @@ import {
   Hovercard,
   HovercardContent,
   HovercardTrigger,
-} from '~components/Hovercard'
-import Button from '~components/Button'
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
-import UncapIndicator from '~components/UncapIndicator'
+} from '~components/common/Hovercard'
+import Button from '~components/common/Button'
+import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
+import UncapIndicator from '~components/uncap/UncapIndicator'
 
 import {
   overMastery,

components/character/CharacterModal/index.tsx

@@ -16,13 +16,13 @@ import {
   DialogClose,
   DialogTitle,
   DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-import Button from '~components/Button'
-import SelectWithInput from '~components/SelectWithInput'
-import AwakeningSelect from '~components/AwakeningSelect'
-import RingSelect from '~components/RingSelect'
-import Switch from '~components/Switch'
+} from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
+import Button from '~components/common/Button'
+import SelectWithInput from '~components/common/SelectWithInput'
+import AwakeningSelect from '~components/mastery/AwakeningSelect'
+import RingSelect from '~components/mastery/RingSelect'
+import Switch from '~components/common/Switch'
 
 // Utilities
 import api from '~utils/api'

components/character/CharacterResult/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
-import UncapIndicator from '~components/UncapIndicator'
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
+import UncapIndicator from '~components/uncap/UncapIndicator'
+import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
 import './index.scss'
 

components/character/CharacterSearchFilterBar/index.tsx

@@ -5,8 +5,8 @@ import cloneDeep from 'lodash.clonedeep'
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
-import SearchFilter from '~components/SearchFilter'
-import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
+import SearchFilter from '~components/search/SearchFilter'
+import SearchFilterCheckboxItem from '~components/search/SearchFilterCheckboxItem'
 
 import './index.scss'
 import {

components/character/CharacterUnit/index.tsx

@@ -5,18 +5,18 @@ import { Trans, useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 import classNames from 'classnames'
 
-import Alert from '~components/Alert'
-import Button from '~components/Button'
-import CharacterHovercard from '~components/CharacterHovercard'
-import CharacterModal from '~components/CharacterModal'
+import Alert from '~components/common/Alert'
+import Button from '~components/common/Button'
+import CharacterHovercard from '~components/character/CharacterHovercard'
+import CharacterModal from '~components/character/CharacterModal'
 import {
   ContextMenu,
   ContextMenuTrigger,
   ContextMenuContent,
-} from '~components/ContextMenu'
-import ContextMenuItem from '~components/ContextMenuItem'
-import SearchModal from '~components/SearchModal'
-import UncapIndicator from '~components/UncapIndicator'
+} from '~components/common/ContextMenu'
+import ContextMenuItem from '~components/common/ContextMenuItem'
+import SearchModal from '~components/search/SearchModal'
+import UncapIndicator from '~components/uncap/UncapIndicator'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'

components/common/Alert/index.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import * as AlertDialog from '@radix-ui/react-alert-dialog'
 
 import './index.scss'
-import Button from '~components/Button'
-import Overlay from '~components/Overlay'
+import Button from '~components/common/Button'
+import Overlay from '~components/common/Overlay'
 
 // Props
 interface Props {

components/common/DialogContent/index.scss

@@ -29,7 +29,7 @@
     height: auto;
     min-width: $unit * 48;
     // min-height: $unit-12x;
-    overflow-y: scroll;
+    overflow-y: auto;
     // height: 80vh;
     max-height: 80vh;
     min-width: 580px;

components/common/DialogContent/index.tsx

@@ -3,7 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import classNames from 'classnames'
 import debounce from 'lodash.debounce'
 
-import Overlay from '~components/Overlay'
+import Overlay from '~components/common/Overlay'
 import './index.scss'
 
 interface Props

components/common/DurationInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, ChangeEvent, KeyboardEvent } from 'react'
 import classNames from 'classnames'
 
-import Input from '~components/Input'
+import Input from '~components/common/Input'
 import './index.scss'
 
 interface Props

components/common/Hovercard/index.scss

@@ -12,7 +12,7 @@ div[data-radix-popper-content-wrapper] {
   flex-direction: column;
   gap: $unit-2x;
   max-height: 30vh;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: $unit-2x;
   width: 300px;
 

components/common/InputTableField/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import Input from '~components/Input'
-import TableField from '~components/TableField'
+import Input from '~components/common/Input'
+import TableField from '~components/common/TableField'
 
 import './index.scss'
 

components/common/PopoverContent/index.scss

@@ -8,4 +8,10 @@
   padding: $unit;
   transform-origin: var(--radix-popover-content-transform-origin);
   z-index: 5;
+
+  .Arrow {
+    fill: var(--dialog-bg);
+    filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));
+    margin-top: -1px;
+  }
 }

components/common/Select/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 import classNames from 'classnames'
 
-import Overlay from '~components/Overlay'
+import Overlay from '~components/common/Overlay'
 
 import ArrowIcon from '~public/icons/Arrow.svg'
 

components/common/SelectTableField/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
-import Select from '~components/Select'
-import TableField from '~components/TableField'
+import Select from '~components/common/Select'
+import TableField from '~components/common/TableField'
 
 import './index.scss'
 

components/common/SelectWithInput/index.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
 // UI Dependencies
-import Input from '~components/Input'
-import Select from '~components/Select'
-import SelectItem from '~components/SelectItem'
+import Input from '~components/common/Input'
+import Select from '~components/common/Select'
+import SelectItem from '~components/common/SelectItem'
 
 // Styles and icons
 import './index.scss'

components/common/SliderTableField/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import Input from '~components/Input'
-import Slider from '~components/Slider'
-import TableField from '~components/TableField'
+import Input from '~components/common/Input'
+import Slider from '~components/common/Slider'
+import TableField from '~components/common/TableField'
 
 import './index.scss'
 

components/common/SwitchTableField/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import Switch from '~components/Switch'
-import TableField from '~components/TableField'
+import Switch from '~components/common/Switch'
+import TableField from '~components/common/TableField'
 
 import './index.scss'