improved user context

[alttp.git] / resources / js / components / episodes / Crew.js

diff --git a/resources/js/components/episodes/Crew.js b/resources/js/components/episodes/Crew.js
index e645edbba17108a5344688ef60be85a9ce5d2a90..d0698419c35ae2d12dcda568b17d94430b4de900 100644 (file)
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -13,10 +13,11 @@ import {
        hasSGRestream,
 } from '../../helpers/Episode';
 import { canApplyForEpisode } from '../../helpers/permissions';
-import { withUser } from '../../helpers/UserContext';
+import { useUser } from '../../hooks/user';
 
-const Crew = ({ episode, onApply, user }) => {
+const Crew = ({ episode, onApply }) => {
        const { t } = useTranslation();
+       const { user } = useUser();
 
        const commentators = React.useMemo(() =>
                episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
@@ -48,8 +49,8 @@ const Crew = ({ episode, onApply, user }) => {
 
        return <Row className="episode-crew">
                {showCommentators ?
-                       <Col md>
-                               <div className="fs-5">
+                       <Col xs={6} md>
+                               <div className="fs-6 fs-md-5">
                                        <Icon.MICROPHONE className="ms-3 me-2" title="" />
                                        {t('episodes.commentary')}
                                </div>
@@ -83,8 +84,8 @@ const Crew = ({ episode, onApply, user }) => {
                        </Col>
                : null}
                {showTracker ?
-                       <Col md>
-                               <div className="fs-5">
+                       <Col xs={6} md>
+                               <div className="fs-6 fs-md-5">
                                        <Icon.MOUSE className="ms-3 me-2" title="" />
                                        {t('episodes.tracking')}
                                </div>
@@ -118,8 +119,8 @@ const Crew = ({ episode, onApply, user }) => {
                        </Col>
                : null}
                {techies.length ?
-                       <Col md>
-                               <div className="fs-5">
+                       <Col xs={6} md>
+                               <div className="fs-6 fs-md-5">
                                        <Icon.MONITOR className="ms-3 me-2" title="" />
                                        {t('episodes.setup')}
                                </div>
@@ -140,8 +141,6 @@ Crew.propTypes = {
                })),
        }),
        onApply: PropTypes.func,
-       user: PropTypes.shape({
-       }),
 };
 
-export default withUser(Crew);
+export default Crew;