Rename all files and fix imports

* Renaming index.scss files to index.module.scss
* Changing `import from` to `import styles from`

components/ElementToggle/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next'
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   currentElement: number

components/ErrorSection/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 import Button from '~components/common/Button'
 import { ResponseStatus } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   status: ResponseStatus

components/FilterBar/index.tsx

@@ -12,7 +12,7 @@ import { defaultFilterset } from '~utils/defaultFilters'
 
 import FilterIcon from '~public/icons/Filter.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 import { getCookie } from 'cookies-next'
 import RaidCombobox from '~components/raids/RaidCombobox'
 import { appState } from '~utils/appState'

components/FilterModal/index.tsx

@@ -21,7 +21,7 @@ import SelectItem from '~components/common/SelectItem'
 import type { DialogProps } from '@radix-ui/react-dialog'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DialogProps {
   defaultFilterSet: FilterSet

components/GridRep/index.tsx

@@ -13,7 +13,7 @@ import Button from '~components/common/Button'
 
 import SaveIcon from '~public/icons/Save.svg'
 import ShieldIcon from '~public/icons/Shield.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   shortcode: string

components/GridRepCollection/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   children: React.ReactNode

components/Header/index.tsx

@@ -34,7 +34,7 @@ import ChevronIcon from '~public/icons/Chevron.svg'
 import MenuIcon from '~public/icons/Menu.svg'
 import PlusIcon from '~public/icons/Add.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const Header = () => {
   // Localization

components/Layout/index.scss

@@ -1,15 +0,0 @@
-.ToastViewport {
-  position: fixed;
-  bottom: 0px;
-  right: 0px;
-  display: flex;
-  flex-direction: column;
-  width: 340px;
-  max-width: 100vw;
-  z-index: 2147483647;
-  padding: 25px;
-  gap: 10px;
-  margin: 0px;
-  list-style: none;
-  outline: none;
-}

components/Layout/index.tsx

@@ -8,8 +8,6 @@ import { appState } from '~utils/appState'
 import TopHeader from '~components/Header'
 import UpdateToast from '~components/toasts/UpdateToast'
 
-import './index.scss'
-
 interface Props {}
 
 const Layout = ({ children }: PropsWithChildren<Props>) => {

components/RaidSelect/index.tsx

@@ -7,7 +7,7 @@ import Overlay from '~components/common/Overlay'
 
 import ChevronIcon from '~public/icons/Chevron.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 import SegmentedControl from '~components/common/SegmentedControl'
 import Segment from '~components/common/Segment'
 import Input from '~components/common/Input'

components/about/AboutPage/index.tsx

@@ -6,7 +6,7 @@ import ShareIcon from '~public/icons/Share.svg'
 import DiscordIcon from '~public/icons/discord.svg'
 import GithubIcon from '~public/icons/github.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {}
 

components/about/ChangelogUnit/index.tsx

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import api from '~utils/api'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   id: string

components/about/ContentUpdate/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'next-i18next'
 import ChangelogUnit from '~components/about/ChangelogUnit'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface UpdateObject {
   character?: string[]

components/about/RoadmapPage/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'next-i18next'
 import ShareIcon from '~public/icons/Share.svg'
 import GithubIcon from '~public/icons/github.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const ROADMAP_ITEMS = 6
 

components/about/UpdatesPage/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 import ContentUpdate from '~components/about/ContentUpdate'
 import ChangelogUnit from '~components/about/ChangelogUnit'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const UpdatesPage = () => {
   const { t: common } = useTranslation('common')

components/auth/AccountModal/index.tsx

@@ -23,7 +23,7 @@ import { accountState } from '~utils/accountState'
 import { pictureData } from '~utils/pictureData'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 type StateVariables = {
   [key: string]: boolean

components/auth/LoginModal/index.tsx

@@ -10,12 +10,12 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import { Dialog, DialogClose } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface ErrorMap {
   [index: string]: string

components/auth/SignupModal/index.tsx

@@ -10,10 +10,10 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import { Dialog, DialogClose } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   open: boolean

components/character/CharacterConflictModal/index.tsx

@@ -9,7 +9,7 @@ import Overlay from '~components/common/Overlay'
 
 import { appState } from '~utils/appState'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   open: boolean

components/character/CharacterGrid/index.tsx

@@ -17,7 +17,7 @@ import type { DetailsObject, JobSkillObject, SearchableObject } from '~types'
 import api from '~utils/api'
 import { appState } from '~utils/appState'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {

components/character/CharacterHovercard/index.tsx

@@ -18,7 +18,7 @@ import {
 } from '~data/overMastery'
 import { ExtendedMastery } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridCharacter: GridCharacter

components/character/CharacterModal/index.tsx

@@ -30,7 +30,7 @@ const MAX_AWAKENING_LEVEL = 9
 
 // Styles and icons
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 import {

components/character/CharacterResult/index.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   data: Character

components/character/CharacterSearchFilterBar/index.tsx

@@ -8,7 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import SearchFilter from '~components/search/SearchFilter'
 import SearchFilterCheckboxItem from '~components/search/SearchFilterCheckboxItem'
 
-import './index.scss'
+import styles from './index.module.scss'
 import {
   emptyElementState,
   emptyProficiencyState,

components/character/CharacterUnit/index.tsx

@@ -31,7 +31,7 @@ import type {
   SearchableObject,
 } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridCharacter?: GridCharacter

components/common/Alert/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as AlertDialog from '@radix-ui/react-alert-dialog'
 
-import './index.scss'
+import styles from './index.module.scss'
 import Button from '~components/common/Button'
 import Overlay from '~components/common/Overlay'
 

components/common/Button/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/CharLimitedFieldset/index.tsx

@@ -6,7 +6,7 @@ import React, {
 } from 'react'
 
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends React.HTMLProps<HTMLInputElement> {
   fieldName: string

components/common/Command/index.tsx

@@ -5,7 +5,7 @@ import { Command as CommandPrimitive } from 'cmdk'
 import { Dialog } from '../Dialog'
 import { DialogContent, DialogProps } from '@radix-ui/react-dialog'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const Command = forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

components/common/ContextMenu/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/ContextMenuItem/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   className?: string

components/common/Dialog/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useEffect, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { useLockedBody } from 'usehooks-ts'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DialogPrimitive.DialogProps {}
 

components/common/DialogContent/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import debounce from 'lodash.debounce'
 
 import Overlay from '~components/common/Overlay'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/DropdownMenuContent/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
 

components/common/DurationInput/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, ChangeEvent, KeyboardEvent } from 'react'
 import classNames from 'classnames'
 
 import Input from '~components/common/Input'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/Hovercard/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends HoverCardPrimitive.HoverCardContentProps {}
 

components/common/Input/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/InputTableField/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import Input from '~components/common/Input'
 import TableField from '~components/common/TableField'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props

components/common/LabelledInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/Overlay/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   visible: boolean

components/common/PictureSelectItem/index.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react'
 import * as Select from '@radix-ui/react-select'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {

components/common/Popover/index.tsx

@@ -10,7 +10,7 @@ import classNames from 'classnames'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import ChevronIcon from '~public/icons/Chevron.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends ComponentProps<'div'> {
   open: boolean

components/common/PopoverContent/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import classnames from 'classnames'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<

components/common/Segment/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   groupName: string

components/common/SegmentedControl/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   className?: string

components/common/Select/index.tsx

@@ -6,7 +6,7 @@ import Overlay from '~components/common/Overlay'
 
 import ChevronIcon from '~public/icons/Chevron.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props

components/common/SelectGroup/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {

components/common/SelectItem/index.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react'
 import * as Select from '@radix-ui/react-select'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {

components/common/SelectTableField/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import Select from '~components/common/Select'
 import TableField from '~components/common/TableField'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   name: string

components/common/SelectWithInput/index.tsx

@@ -10,7 +10,7 @@ import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 
 // Styles and icons
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 interface Props {

components/common/Slider/index.tsx

@@ -3,7 +3,7 @@ import * as SliderPrimitive from '@radix-ui/react-slider'
 import type { SliderProps } from '@radix-ui/react-slider'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {}