migrate cube overviewpage

public/css/stylesheet.css

@@ -713,6 +713,10 @@ video {
   bottom: 0px;
 }
 
+.bottom-full {
+  bottom: 100%;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -975,6 +979,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -1095,6 +1103,10 @@ video {
   width: 100%;
 }
 
+.w-max {
+  width: max-content;
+}
+
 .min-w-fit {
   min-width: fit-content;
 }
@@ -1698,6 +1710,11 @@ video {
   background-color: rgb(var(--bg-secondary) / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -2252,11 +2269,6 @@ video {
   --tw-ring-color: rgb(var(--focus-ring) / var(--tw-ring-opacity));
 }
 
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .invert {
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

src/analytics/AnalyticTable.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 
-import AsfanDropdown from 'components/AsfanDropdown';
+import AsfanDropdown from 'components/analytics/AsfanDropdown';
 import ErrorBoundary from 'components/ErrorBoundary';
 import { compareStrings, SortableTable, valueRenderer } from 'components/SortableTable';
 import { calculateAsfans } from 'drafting/createdraft';

src/analytics/Asfans.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 
-import AsfanDropdown from 'components/AsfanDropdown';
+import AsfanDropdown from 'components/analytics/AsfanDropdown';
 import ErrorBoundary from 'components/ErrorBoundary';
 import { compareStrings, SortableTable } from 'components/SortableTable';
 import { calculateAsfans } from 'drafting/createdraft';

src/analytics/Averages.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 
-import AsfanDropdown from 'components/AsfanDropdown';
+import AsfanDropdown from 'components/analytics/AsfanDropdown';
 import { Col, Flexbox, Row } from 'components/base/Layout';
 import Select from 'components/base/Select';
 import ErrorBoundary from 'components/ErrorBoundary';

src/analytics/Chart.tsx

@@ -12,7 +12,7 @@ import {
   BarElement,
 } from 'chart.js';
 
-import AsfanDropdown from 'components/AsfanDropdown';
+import AsfanDropdown from 'components/analytics/AsfanDropdown';
 import useQueryParam from 'hooks/useQueryParam';
 import { calculateAsfans } from 'drafting/createdraft';
 import { sortIntoGroups, SORTS } from 'utils/Sort';

src/analytics/ImageSuggestion.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AddToCubeModal from 'components/AddToCubeModal';
+import AddToCubeModal from 'components/modals/AddToCubeModal';
 import withAutocard from 'components/WithAutocard';
 import withModal from 'components/WithModal';
 import Card from 'datatypes/Card';
@@ -30,7 +30,7 @@ const ImageSuggestion: React.FC<ImageSuggestionProps> = ({ card, cube }) => {
       href={`/tool/card/${encodeName(card.cardID)}`}
       modalprops={{ card: details, hideAnalytics: false, cubeContext: cube.id }}
     >
-      <img className="card-border pr-1 w-100" src={details.image_normal} />
+      <img className="card-border pr-1 w-full" src={details.image_normal} />
     </AddModal>
   );
 };

src/analytics/Suggestion.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AddToCubeModal from 'components/AddToCubeModal';
+import AddToCubeModal from 'components/modals/AddToCubeModal';
 import withAutocard from 'components/WithAutocard';
 import withModal from 'components/WithModal';
 import { encodeName } from 'utils/Card';

src/components/Banner.tsx

@@ -5,8 +5,8 @@ import Link from 'components/base/Link';
 
 import Advertisment from 'components/Advertisment';
 import UserContext, { UserContextValue } from 'contexts/UserContext';
-import { Flexbox } from './base/Layout';
-import ResponsiveDiv from './base/ResponsiveDiv';
+import { Flexbox } from 'components/base/Layout';
+import ResponsiveDiv from 'components/base/ResponsiveDiv';
 
 const BANNER_RATE: number = 1; // an alternate message appears with probability of 1/BANNER_RATE
 

src/components/Changelist.tsx

@@ -4,7 +4,7 @@ import { Card, Col, Row, Spinner } from 'reactstrap';
 import { ArrowRightIcon, ArrowSwitchIcon, NoEntryIcon, PlusCircleIcon, ToolsIcon } from '@primer/octicons-react';
 
 import withAutocard from 'components/WithAutocard';
-import withCardModal from 'components/WithCardModal';
+import withCardModal from 'components/modals/WithCardModal';
 import CubeContext from 'contexts/CubeContext';
 import CardData, { boardTypes } from 'datatypes/Card';
 import CardDetails from 'datatypes/CardDetails';

src/components/CompareView.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { Col, ListGroup, ListGroupItem, Row } from 'reactstrap';
 
-import AutocardListItem from 'components/AutocardListItem';
-import withCardModal from 'components/WithCardModal';
+import AutocardListItem from 'components/card/AutocardListItem';
+import withCardModal from 'components/modals/WithCardModal';
 import CubeContext from 'contexts/CubeContext';
 import Card from 'datatypes/Card';
 import { getLabels, sortIntoGroups } from 'utils/Sort';

src/components/CubeCompareNavbar.js

@@ -4,7 +4,7 @@ import { Collapse, Nav, Navbar, NavbarToggler, NavItem, NavLink } from 'reactstr
 
 import FilterCollapse from 'components/FilterCollapse';
 import SortCollapse from 'components/SortCollapse';
-import TagColorsModal from 'components/TagColorsModal';
+import TagColorsModal from 'components/modals/TagColorsModal';
 
 class CubeCompareNavbar extends Component {
   constructor(props) {

src/components/CubeHistory.js

@@ -4,7 +4,7 @@ import { Card, CardBody, CardHeader, Col, Row, Spinner } from 'reactstrap';
 import PropTypes from 'prop-types';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
-import BlogPostChangelog from 'components/BlogPostChangelog';
+import BlogPostChangelog from 'components/blog/BlogPostChangelog';
 import CubeContext from 'contexts/CubeContext';
 import { csrfFetch } from 'utils/CSRF';
 import { formatDateTime } from 'utils/Date';

src/components/CubeListNavbar.js

@@ -22,12 +22,12 @@ import PropTypes from 'prop-types';
 
 import EditCollapse from 'components/EditCollapse';
 import FilterCollapse from 'components/FilterCollapse';
-import PasteBulkModal from 'components/PasteBulkModal';
+import PasteBulkModal from 'components/modals/PasteBulkModal';
 import SortCollapse from 'components/SortCollapse';
-import TagColorsModal from 'components/TagColorsModal';
-import Tooltip from 'components/Tooltip';
-import UploadBulkModal from 'components/UploadBulkModal';
-import UploadBulkReplaceModal from 'components/UploadBulkReplaceModal';
+import TagColorsModal from 'components/modals/TagColorsModal';
+import Tooltip from 'components/base/Tooltip';
+import UploadBulkModal from 'components/modals/UploadBulkModal';
+import UploadBulkReplaceModal from 'components/modals/UploadBulkReplaceModal';
 import withModal from 'components/WithModal';
 import CubeContext from 'contexts/CubeContext';
 import FilterContext from 'contexts/FilterContext';

src/components/CubePreview.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import Cube from 'datatypes/Cube';
 import { getCubeDescription, getCubeId } from 'utils/Util';
-import { Flexbox } from './base/Layout';
-import Text from './base/Text';
-import { Tile } from './base/Tile';
+import { Flexbox } from 'components/base/Layout';
+import Text from 'components/base/Text';
+import { Tile } from 'components/base/Tile';
 
 interface CubePreviewProps {
   cube: Cube;

src/components/CubeSearchNavBar.tsx

@@ -6,7 +6,7 @@ import Input from 'components/base/Input';
 import Select from 'components/base/Select';
 import Text from 'components/base/Text';
 import Controls from 'components/base/Controls';
-import { Flexbox } from './base/Layout';
+import { Flexbox } from 'components/base/Layout';
 
 interface CubeSearchNavBarProps {
   query?: string;

src/components/CubeSubtitle.tsx

@@ -2,9 +2,9 @@ import React, { useContext, useMemo } from 'react';
 
 import CubeContext from 'contexts/CubeContext';
 import { getCubeDescription } from 'utils/Util';
-import ResponsiveDiv from './base/ResponsiveDiv';
-import Text from './base/Text';
-import { Flexbox } from './base/Layout';
+import ResponsiveDiv from 'components/base/ResponsiveDiv';
+import Text from 'components/base/Text';
+import { Flexbox } from 'components/base/Layout';
 
 const CubeSubtitle: React.FC = () => {
   const { cube, unfilteredChangedCards } = useContext(CubeContext);

src/components/CubesCard.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import CubePreview from 'components/CubePreview';
 import Cube from 'datatypes/Cube';
 import Text from 'components/base/Text';
-import Link from './base/Link';
-import { Card, CardBody, CardHeader } from './base/Card';
-import { Row, Col } from './base/Layout';
-import Button from './base/Button';
-import Collapse from './base/Collapse';
+import Link from 'components/base/Link';
+import { Card, CardBody, CardHeader } from 'components/base/Card';
+import { Row, Col } from 'components/base/Layout';
+import Button from 'components/base/Button';
+import Collapse from 'components/base/Collapse';
 
 interface CubesCardProps {
   cubes: Cube[];

src/components/CurveView.js

@@ -3,7 +3,7 @@ import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 
-import AutocardListGroup from 'components/AutocardListGroup';
+import AutocardListGroup from 'components/card/AutocardListGroup';
 import CubeContext from 'contexts/CubeContext';
 import { getLabels, sortDeep } from 'utils/Sort';
 import { fromEntries } from 'utils/Util';

src/components/CustomDraftCard.tsx

@@ -3,14 +3,14 @@ import Markdown from 'components/Markdown';
 import CubeContext from 'contexts/CubeContext';
 import { DraftFormat } from 'datatypes/Draft';
 import React, { useContext, useMemo, useState } from 'react';
-import Button from './base/Button';
-import { Card, CardBody, CardFooter, CardHeader } from './base/Card';
-import Select from './base/Select';
-import Text from './base/Text';
-import ConfirmActionModal from './ConfirmActionModal';
-import CustomDraftFormatModal from './CustomDraftFormatModal';
+import Button from 'components/base/Button';
+import { Card, CardBody, CardFooter, CardHeader } from 'components/base/Card';
+import Select from 'components/base/Select';
+import Text from 'components/base/Text';
+import ConfirmActionModal from './modals/ConfirmActionModal';
+import CustomDraftFormatModal from './modals/CustomDraftFormatModal';
 import withModal from './WithModal';
-import { Flexbox } from './base/Layout';
+import { Flexbox } from 'components/base/Layout';
 
 const EditFormatButton = withModal(Button, CustomDraftFormatModal);
 const DeleteFormatButton = withModal(Button, ConfirmActionModal);

src/components/CustomPackCard.tsx

@@ -3,13 +3,13 @@ import React, { useMemo } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react';
 import { buildDefaultSteps, DEFAULT_STEPS, DraftAction, Pack } from 'datatypes/Draft';
 import useToggle from 'hooks/UseToggle';
-import Button from './base/Button';
-import { Card, CardBody, CardFooter, CardHeader } from './base/Card';
-import Collapse from './base/Collapse';
-import Input from './base/Input';
-import { Flexbox } from './base/Layout';
-import Select from './base/Select';
-import Text from './base/Text';
+import Button from 'components/base/Button';
+import { Card, CardBody, CardFooter, CardHeader } from 'components/base/Card';
+import Collapse from 'components/base/Collapse';
+import Input from 'components/base/Input';
+import { Flexbox } from 'components/base/Layout';
+import Select from 'components/base/Select';
+import Text from 'components/base/Text';
 
 interface CustomPackCardProps {
   packIndex: number;

src/components/DeckCard.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import DeckPropType from 'proptypes/DeckPropType';
 import DeckSeatPropType from 'proptypes/DeckSeatPropType';
 
-import CardGrid from 'components/CardGrid';
-import CardImage from 'components/CardImage';
-import CommentsSection from 'components/CommentsSection';
+import CardGrid from 'components/card/CardGrid';
+import CardImage from 'components/card/CardImage';
+import CommentsSection from 'components/comments/CommentsSection';
 import DecksPickBreakdown from 'components/DecksPickBreakdown';
 import FoilCardImage from 'components/FoilCardImage';
 import Markdown from 'components/Markdown';
@@ -21,7 +21,7 @@ const DeckStacksStatic = ({ piles, cards }) => (
       <Row key={index} className="row-low-padding">
         {row.map((column, index2) => (
           <Col key={index2} className="card-stack col-md-1-5 col-lg-1-5 col-xl-1-5 col-low-padding" xs={3}>
-            <div className="w-100 text-center mb-1">
+            <div className="w-full text-center mb-1">
               <b>{column.length > 0 ? column.length : ''}</b>
             </div>
             <div className="stack">

src/components/DeckPreview.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import UserContext from 'contexts/UserContext';
 import TimeAgo from 'react-timeago';
-import DeckDeleteModal from 'components/DeckDeleteModal';
+import DeckDeleteModal from 'components/modals/DeckDeleteModal';
 import Deck from 'datatypes/Deck';
 import Text from 'components/base/Text';
 import { Flexbox } from 'components/base/Layout';

src/components/DeckStacks.js

@@ -4,7 +4,7 @@ import { CardBody, CardHeader, CardTitle, Row } from 'reactstrap';
 import PropTypes from 'prop-types';
 import CardPropType from 'proptypes/CardPropType';
 
-import CardStack from 'components/CardStack';
+import CardStack from 'components/card/CardStack';
 import DraggableCard from 'components/DraggableCard';
 import Location from 'drafting/DraftLocation';
 

src/components/DeckbuilderNavbar.js

@@ -4,10 +4,10 @@ import { Collapse, Input, Nav, Navbar, NavbarToggler, NavItem, NavLink } from 'r
 import PropTypes from 'prop-types';
 import DeckPropType from 'proptypes/DeckPropType';
 
-import BasicsModal from 'components/BasicsModal';
+import BasicsModal from 'components/modals/BasicsModal';
 import CSRFForm from 'components/CSRFForm';
 import CustomImageToggler from 'components/CustomImageToggler';
-import DeckDeleteModal from 'components/DeckDeleteModal';
+import DeckDeleteModal from 'components/modals/DeckDeleteModal';
 import withModal from 'components/WithModal';
 import { cardsAreEquivalent } from 'utils/Card';
 import { csrfFetch } from 'utils/CSRF';

src/components/EditCollapse.tsx

@@ -13,7 +13,7 @@ import {
   UncontrolledAlertProps,
 } from 'reactstrap';
 
-import AutocompleteInput from 'components/AutocompleteInput';
+import AutocompleteInput from 'components/base/AutocompleteInput';
 import Changelist from 'components/Changelist';
 import LoadingButton from 'components/LoadingButton';
 import TextEntry from 'components/TextEntry';

src/components/EloGraph.tsx

@@ -15,10 +15,10 @@ import History from 'datatypes/History';
 
 import { csrfFetch } from 'utils/CSRF';
 import { formatDate } from 'utils/Date';
-import { Row, Col, Flexbox } from './base/Layout';
-import Select from './base/Select';
-import Spinner from './base/Spinner';
-import Text from './base/Text';
+import { Row, Col, Flexbox } from 'components/base/Layout';
+import Select from 'components/base/Select';
+import Spinner from 'components/base/Spinner';
+import Text from 'components/base/Text';
 
 interface EloGraphProps {
   defaultHistories: History[];

src/components/Feed.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useContext, useState } from 'react';
-import BlogPost from 'components/BlogPost';
+import BlogPost from 'components/blog/BlogPost';
 import UserContext from 'contexts/UserContext';
 import { csrfFetch } from 'utils/CSRF';
 import Spinner from 'components/base/Spinner';
 import BlogPostType from 'datatypes/BlogPost';
-import { Flexbox } from './base/Layout';
-import Button from './base/Button';
+import { Flexbox } from 'components/base/Layout';
+import Button from 'components/base/Button';
 
 interface FeedProps {
   items: BlogPostType[];