Fix for #1770 with Tailwind

package.json

@@ -8,7 +8,7 @@
     "node": ">=20.0.0 <21.0.0"
   },
   "scripts": {
-    "build": "yarn run nearley && yarn run sass && tsc -b && yarn run webpack &&  && npx tailwindcss -i ./src/css/stylesheet.css -o ./public/css/stylesheet.css",
+    "build": "yarn run nearley && yarn run sass && tsc -b && yarn run webpack && npx tailwindcss -i ./src/css/stylesheet.css -o ./public/css/stylesheet.css",
     "lint": "yarn run prettier-base --check && yarn run eslint --max-warnings 0",
     "bash": "bash",
     "beautify": "yarn run prettier",
@@ -25,7 +25,7 @@
     "test:watch": "yarn run webpack --watch & yarn run test-loud --watch --verbose false",
     "nearley": "sh nearley/helper.sh",
     "ci-build": "yarn run nearley && yarn run sass && tsc -b && NODE_OPTIONS=--max_old_space_size=16384 node_modules/.bin/webpack --mode production --config webpack.prod.mjs",
-    "devstart": "yarn run nearley && yarn run sass --watch & yarn run nodemon & yarn run webpack-dev-server & yarn run webpack --watch  & npx tailwindcss -i ./src/css/stylesheet.css -o ./public/css/stylesheet.css --watch",
+    "devstart": "yarn run nearley && yarn run sass --watch & yarn run nodemon & yarn run webpack-dev-server & yarn run tailwind:watch & yarn run webpack --watch & npx tailwindcss -i ./src/css/stylesheet.css -o ./public/css/stylesheet.css --watch=always",
     "setup": "yarn run nearley && yarn run webpack --progress && node --max-old-space-size=8192 force_update.js",
     "cards": "node --max-old-space-size=8192 force_update.js",
     "download-model": "node --max-old-space-size=8192 jobs/download_model.js",

public/css/stylesheet.css

@@ -619,6 +619,7 @@ video {
   --card-multi: 92 88 9;
   --card-colorless: 60 58 64;
   --card-lands: 95 58 36;
+  color-scheme: dark;
 }
 
 .container {

src/components/CubeCompareNavbar.js

@@ -2,9 +2,10 @@
 import React, { Component } from 'react';
 import { Collapse, Nav, Navbar, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 
+import Text from 'components/base/Text';
 import FilterCollapse from 'components/FilterCollapse';
-import SortCollapse from 'components/SortCollapse';
 import TagColorsModal from 'components/modals/TagColorsModal';
+import SortCollapse from 'components/SortCollapse';
 
 class CubeCompareNavbar extends Component {
   constructor(props) {

src/components/CubeDraftError.js

@@ -3,6 +3,8 @@ import { Card, CardBody, CardHeader } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 
+import Text from 'components/base/Text';
+
 const CubeDraftError = ({ message }) => {
   return (
     <Card className="mt-4">

src/components/CubeDraftStaging.js

@@ -5,6 +5,7 @@ import { LockIcon, PasteIcon } from '@primer/octicons-react';
 import PropTypes from 'prop-types';
 import DraftPropType from 'proptypes/DraftPropType';
 
+import Text from 'components/base/Text';
 import Username from 'components/Username';
 import DomainContext from 'contexts/DomainContext';
 import UserContext from 'contexts/UserContext';

src/components/CubeHistory.js

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

src/components/CubeIdModal.js

@@ -4,6 +4,8 @@ import { Button, Input, InputGroup, Label, Modal, ModalBody, ModalFooter, ModalH
 import { PasteIcon } from '@primer/octicons-react';
 import PropTypes from 'prop-types';
 
+import Text from 'components/base/Text';
+
 const CubeIdModal = ({ toggle, isOpen, shortId, fullID, alert }) => {
   const onCopyClick = async (id, label) => {
     await navigator.clipboard.writeText(id);

src/components/CurveView.js

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

src/components/DeckCard.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import DeckPropType from 'proptypes/DeckPropType';
 import DeckSeatPropType from 'proptypes/DeckSeatPropType';
 
+import Text from 'components/base/Text';
 import CardGrid from 'components/card/CardGrid';
 import CardImage from 'components/card/CardImage';
 import CommentsSection from 'components/comments/CommentsSection';

src/components/DeckStacks.js

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

src/components/DecksPickBreakdown.js

@@ -4,6 +4,7 @@ import { Col, ListGroup, ListGroupItem, Row } from 'reactstrap';
 import PropTypes from 'prop-types';
 import DraftPropType from 'proptypes/DraftPropType';
 
+import Text from 'components/base/Text';
 import FoilCardImage from 'components/FoilCardImage';
 import withAutocard from 'components/WithAutocard';
 import { getDrafterState } from 'drafting/draftutil';

src/components/Pack.js

@@ -4,6 +4,7 @@ import { Card, CardBody, CardHeader, CardTitle, Col, Row, Spinner } from 'reacts
 import PropTypes from 'prop-types';
 import CardPropType from 'proptypes/CardPropType';
 
+import Text from 'components/base/Text';
 import DraggableCard from 'components/DraggableCard';
 import FoilCardImage from 'components/FoilCardImage';
 import DraftLocation from 'drafting/DraftLocation';

src/components/SortCollapse.js

@@ -3,6 +3,7 @@ import { Button, Col, Collapse, Input, Row } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 
+import Text from 'components/base/Text';
 import Tooltip from 'components/base/Tooltip';
 import CubeContext from 'contexts/CubeContext';
 import { ORDERED_SORTS, SORTS } from 'utils/Sort';

src/components/TableView.js

@@ -4,6 +4,7 @@ import { Col, Row } from 'reactstrap';
 import PropTypes from 'prop-types';
 import CardPropType from 'proptypes/CardPropType';
 
+import Text from 'components/base/Text';
 import AutocardListGroup from 'components/card/AutocardListGroup';
 import CubeContext from 'contexts/CubeContext';
 import DisplayContext from 'contexts/DisplayContext';

src/components/UserPreview.js

@@ -4,6 +4,7 @@ import { Card } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import AspectRatioBox from 'components/base/AspectRatioBox';
+import Text from 'components/base/Text';
 import MtgImage from 'components/MtgImage';
 import Username from 'components/Username';
 

src/components/content/Podcast.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import ContentPropType from 'proptypes/ContentPropType';
 
 import AspectRatioBox from 'components/base/AspectRatioBox';
+import Text from 'components/base/Text';
 import CommentsSection from 'components/comments/CommentsSection';
 import PodcastEpisodePreview from 'components/content/PodcastEpisodePreview';
 import Username from 'components/Username';

src/components/content/Video.js

@@ -5,6 +5,7 @@ import ContentPropType from 'proptypes/ContentPropType';
 import ReactPlayer from 'react-player';
 import TimeAgo from 'react-timeago';
 
+import Text from 'components/base/Text';
 import CommentsSection from 'components/comments/CommentsSection';
 import Markdown from 'components/Markdown';
 import Username from 'components/Username';

src/components/nav/Notification.js

@@ -3,6 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TimeAgo from 'react-timeago';
 
+import Text from 'components/base/Text';
+
 const Notification = ({ notification }) => {
   const texts = notification.body.split(notification.fromUsername);
   return (

src/css/stylesheet.css

@@ -78,6 +78,7 @@
 		--card-multi: 92 88 9;
 		--card-colorless: 60 58 64;
 		--card-lands: 95 58 36;
+		color-scheme: dark;
   }
 }
 

src/pages/BulkUploadPage.js

@@ -4,6 +4,7 @@ import { Card, CardBody, CardHeader, Col, Label, Row, UncontrolledAlert } from '
 import PropTypes from 'prop-types';
 
 import AutocompleteInput from 'components/base/AutocompleteInput';
+import Text from 'components/base/Text';
 import Changelist from 'components/Changelist';
 import DynamicFlash from 'components/DynamicFlash';
 import { getCard } from 'components/EditCollapse';

src/pages/CubeDecksPage.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import CubePropType from 'proptypes/CubePropType';
 import DeckPropType from 'proptypes/DeckPropType';
 
+import Paginate from 'components/base/Pagination';
+import Text from 'components/base/Text';
 import DeckPreview from 'components/DeckPreview';
 import DynamicFlash from 'components/DynamicFlash';
-import Paginate from 'components/base/Pagination';
 import RenderToRoot from 'components/RenderToRoot';
 import CubeLayout from 'layouts/CubeLayout';
 import MainLayout from 'layouts/MainLayout';

src/pages/CubeListPage.js

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import CubePropType from 'proptypes/CubePropType';
 
+import Text from 'components/base/Text';
 import CubeListNavbar from 'components/CubeListNavbar';
 import CurveView from 'components/CurveView';
 import DynamicFlash from 'components/DynamicFlash';

src/pages/GridDraftPage.js

@@ -19,6 +19,7 @@ import CardPropType from 'proptypes/CardPropType';
 import CubePropType from 'proptypes/CubePropType';
 import DraftPropType from 'proptypes/DraftPropType';
 
+import Text from 'components/base/Text';
 import CSRFForm from 'components/CSRFForm';
 import CustomImageToggler from 'components/CustomImageToggler';
 import DeckStacks from 'components/DeckStacks';

src/pages/InfoPage.js

@@ -4,6 +4,7 @@ import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';
 import MainLayout from 'layouts/MainLayout';

src/pages/LoginPage.js

@@ -4,6 +4,7 @@ import { Button, Card, CardBody, CardHeader, Col, FormGroup, Input, Label, Row }
 import PropTypes from 'prop-types';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import CSRFForm from 'components/CSRFForm';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/LostPasswordPage.js

@@ -4,6 +4,7 @@ import { Button, Card, CardBody, CardHeader, Col, FormGroup, Input, Label, Row }
 import PropTypes from 'prop-types';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import CSRFForm from 'components/CSRFForm';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/MarkdownPage.js

@@ -4,6 +4,7 @@ import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import DynamicFlash from 'components/DynamicFlash';
 import Markdown from 'components/Markdown';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/NotificationsPage.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import DynamicFlash from 'components/DynamicFlash';
 import Notification from 'components/nav/Notification';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/PasswordResetPage.js

@@ -4,6 +4,7 @@ import { Button, Card, CardBody, CardHeader, Col, FormGroup, Input, Label, Row }
 import PropTypes from 'prop-types';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import CSRFForm from 'components/CSRFForm';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/PodcastEpisodePage.js

@@ -7,6 +7,7 @@ import ReactAudioPlayer from 'react-audio-player';
 import TimeAgo from 'react-timeago';
 
 import AspectRatioBox from 'components/base/AspectRatioBox';
+import Text from 'components/base/Text';
 import CommentsSection from 'components/comments/CommentsSection';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/PodcastsPage.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 import Banner from 'components/Banner';
-import DynamicFlash from 'components/DynamicFlash';
+import Text from 'components/base/Text';
 import PodcastEpisodePreview from 'components/content/PodcastEpisodePreview';
 import PodcastPreview from 'components/content/PodcastPreview';
+import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';
 import MainLayout from 'layouts/MainLayout';
 import { csrfFetch } from 'utils/CSRF';

src/pages/RecentDraftsPage.js

@@ -6,6 +6,7 @@ import DeckPropType from 'proptypes/DeckPropType';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import DeckPreview from 'components/DeckPreview';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/RegisterPage.js

@@ -4,6 +4,7 @@ import { Button, Card, CardBody, CardHeader, Col, FormGroup, Input, Label, Row }
 import PropTypes from 'prop-types';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import CSRFForm from 'components/CSRFForm';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/SearchPage.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import CubePropType from 'proptypes/CubePropType';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
+import Text from 'components/base/Text';
 import CubePreview from 'components/CubePreview';
 import CubeSearchNavBar from 'components/CubeSearchNavBar';
 import DynamicFlash from 'components/DynamicFlash';

src/pages/UserDecksPage.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import DeckPropType from 'proptypes/DeckPropType';
 
 import Banner from 'components/Banner';
+import Paginate from 'components/base/Pagination';
+import Text from 'components/base/Text';
 import DeckPreview from 'components/DeckPreview';
 import DynamicFlash from 'components/DynamicFlash';
-import Paginate from 'components/base/Pagination';
 import RenderToRoot from 'components/RenderToRoot';
 import MainLayout from 'layouts/MainLayout';
 import UserLayout from 'layouts/UserLayout';

src/pages/UserSocialPage.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import CubePropType from 'proptypes/CubePropType';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
 import CubePreview from 'components/CubePreview';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';

src/pages/VersionPage.js

@@ -3,6 +3,7 @@ import { Card, CardBody, CardHeader } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 
+import Text from 'components/base/Text';
 import RenderToRoot from 'components/RenderToRoot';
 import MainLayout from 'layouts/MainLayout';
 

src/pages/VideosPage.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 import Banner from 'components/Banner';
+import Text from 'components/base/Text';
+import VideoPreview from 'components/content/VideoPreview';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';
-import VideoPreview from 'components/content/VideoPreview';
 import MainLayout from 'layouts/MainLayout';
 import { csrfFetch } from 'utils/CSRF';
 import { wait } from 'utils/Util';