Fix type imports in frontend

frontend/src/lib/react-utils.ts

@@ -7,10 +7,9 @@ import {
 } from '@strimertul/kilovolt-client';
 import { RootState } from '../store';
 import apiReducer, {
-  APIState,
   getUserPoints,
-  LoyaltyStorage,
 } from '../store/api/reducer';
+import {APIState, LoyaltyStorage} from "../store/api/types";
 
 export function useModule<T>({
   key,

frontend/src/overrides.css

@@ -144,7 +144,6 @@ label {
 }
 .tabs.is-boxed li a.is-active {
   border-color: #5e6d6f;
-      border-bottom-color: rgb(94, 109, 111);
   border-bottom-color: transparent !important;
 }
 .tabs li a.is-active {

frontend/src/ui/components/Modal.tsx

@@ -35,7 +35,7 @@ function Modal({
       <div
         className="modal-background"
         onClick={bgDismiss ? () => onClose() : null}
-      ></div>
+      />
       <div className="modal-card">
         <header className="modal-card-head">
           <p className="modal-card-title">{title}</p>
@@ -44,7 +44,7 @@ function Modal({
               className="delete"
               aria-label="close"
               onClick={() => onClose()}
-            ></button>
+            />
           ) : null}
         </header>
         <section className="modal-card-body">{children}</section>

frontend/src/ui/pages/loyalty/Goals.tsx

@@ -4,8 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { useSelector, useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
 import { RootState } from '../../../store';
-import { LoyaltyGoal, modules } from '../../../store/api/reducer';
+import { modules } from '../../../store/api/reducer';
 import Modal from '../../components/Modal';
+import {LoyaltyGoal} from "../../../store/api/types";
 
 interface GoalItemProps {
   item: LoyaltyGoal;
@@ -252,7 +253,7 @@ function GoalModal({
                 placeholder={t('loyalty.goals.description-placeholder')}
                 onChange={(ev) => setDescription(ev.target.value)}
                 value={description}
-              ></textarea>
+              />
             </p>
           </div>
         </div>

frontend/src/ui/pages/loyalty/Queue.tsx

@@ -4,12 +4,12 @@ import { RouteComponentProps } from '@reach/router';
 import { useTranslation } from 'react-i18next';
 import { useModule, useUserPoints } from '../../../lib/react-utils';
 import {
-  LoyaltyRedeem,
   modules,
   removeRedeem,
   setUserPoints,
 } from '../../../store/api/reducer';
 import PageList from '../../components/PageList';
+import {LoyaltyRedeem} from "../../../store/api/types";
 
 interface SortingOrder {
   key: 'user' | 'when';
@@ -154,7 +154,7 @@ export default function LoyaltyRedeemQueuePage(
                 </th>
                 <th>{t('loyalty.queue.reward-name')}</th>
                 <th>{t('loyalty.queue.request')}</th>
-                <th></th>
+                <th />
               </tr>
             </thead>
 

frontend/src/ui/pages/loyalty/Rewards.tsx

@@ -7,11 +7,11 @@ import { useModule } from '../../../lib/react-utils';
 import { RootState } from '../../../store';
 import {
   createRedeem,
-  LoyaltyReward,
   modules,
 } from '../../../store/api/reducer';
 import Modal from '../../components/Modal';
 import { getInterval } from '../../../lib/time-utils';
+import {LoyaltyReward} from "../../../store/api/types";
 
 interface RewardItemProps {
   item: LoyaltyReward;
@@ -262,7 +262,7 @@ function RewardModal({
                 placeholder={t('loyalty.rewards.description-placeholder')}
                 onChange={(ev) => setDescription(ev.target.value)}
                 value={description}
-              ></textarea>
+              />
             </p>
           </div>
         </div>
@@ -289,7 +289,7 @@ function RewardModal({
         </div>
       </div>
       <div className="field is-horizontal">
-        <div className="field-label is-normal"></div>
+        <div className="field-label is-normal" />
         <div className="field-body">
           <div className="field">
             <label className="checkbox">

frontend/src/ui/pages/loyalty/UserList.tsx

@@ -6,11 +6,11 @@ import PageList from '../../components/PageList';
 import { useModule, useUserPoints } from '../../../lib/react-utils';
 import { RootState } from '../../../store';
 import {
-  LoyaltyPointsEntry,
   modules,
   setUserPoints,
 } from '../../../store/api/reducer';
 import Modal from '../../components/Modal';
+import {LoyaltyPointsEntry} from "../../../store/api/types";
 
 interface UserData {
   user: string;
@@ -266,7 +266,7 @@ export default function LoyaltyUserListPage(
                     ) : null}
                   </span>
                 </th>
-                <th style={{ width: '10%' }}></th>
+                <th style={{ width: '10%' }} />
               </tr>
             </thead>
 

frontend/src/ui/pages/stulbe/Webhook.tsx

@@ -147,6 +147,7 @@ export default function StulbeWebhooksPage(
             <img
               style={{ width: '20px', borderRadius: '5px' }}
               src={userStatus.profile_image_url}
+              alt="Profile picture"
             />
             <b>{userStatus.display_name}</b>
           </div>

frontend/src/ui/pages/twitch/Commands.tsx

@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useModule } from '../../../lib/react-utils';
-import { modules, TwitchBotCustomCommand } from '../../../store/api/reducer';
+import { modules } from '../../../store/api/reducer';
 import Modal from '../../components/Modal';
+import {TwitchBotCustomCommand} from "../../../store/api/types";
 
 interface CommandItemProps {
   name: string;
@@ -151,7 +152,7 @@ function CommandModal({
                 rows={1}
                 onChange={(ev) => setDescription(ev.target.value)}
                 value={description}
-              ></textarea>
+              />
             </p>
           </div>
         </div>
@@ -168,7 +169,7 @@ function CommandModal({
                 placeholder={t('twitch.commands.response-help')}
                 onChange={(ev) => setResponse(ev.target.value)}
                 value={response}
-              ></textarea>
+              />
             </p>
           </div>
         </div>