update web for categories

web/src/components/Add/RightSideComponent.jsx

@@ -3,9 +3,9 @@ import { rgba } from 'polished'
 import { NoImageIcon } from 'icons'
 import {
   FormControl,
+  FormHelperText,
   IconButton,
   InputAdornment,
-  InputLabel,
   MenuItem,
   Select,
   TextField,
@@ -136,19 +136,19 @@ export default function RightSideComponent({
           variant='outlined'
           fullWidth
         />
-
         <FormControl fullWidth>
-          <InputLabel id='torrent-category-select-label'>Torrent category</InputLabel>
+          <FormHelperText style={{ padding: '0.2em 1.2em 0.5em 1.2em' }}>
+            {t('AddDialog.CategoryHelperText')}
+          </FormHelperText>
           <Select
             labelId='torrent-category-select-label'
             id='torrent-category-select'
             value={category}
-            label='Torrent category'
             margin='dense'
             onChange={handleCategoryChange}
             variant='outlined'
             fullWidth
-            defaultValue='Unknown'
+            defaultValue='Other'
           >
             {TORRENT_CATEGORIES.map(category => (
               <MenuItem value={category.name}>{category.name}</MenuItem>

web/src/components/TorrentCard/index.jsx

@@ -116,15 +116,12 @@ const Torrent = ({ torrent }) => {
         </TorrentCardButtons>
 
         <TorrentCardDescription>
-          <div className='description-wrapper'>
-            <div className='description-title-wrapper'>
-              <div className='description-section-name'>{t('Name')}</div>
-              <div className='description-torrent-title'>{parsedTitle}</div>
-            </div>
-            <div className='description-category-wrapper'>
-              <div className='description-section-name'>{t('Category')}</div>
-              <div className='description-torrent-title'>{category}</div>
+          <div className='description-title-wrapper'>
+            <div className='description-section-name'>
+              {t('Name')}
+              <div className='description-category-wrapper'>{category}</div>
             </div>
+            <div className='description-torrent-title'>{parsedTitle}</div>
           </div>
 
           <div className='description-statistics-wrapper'>

web/src/components/TorrentCard/style.js

@@ -94,6 +94,7 @@ export const TorrentCardButtons = styled.div`
 export const TorrentCardDescription = styled.div`
   ${({
     theme: {
+      app: { sidebarBGColor },
       torrentCard: { cardSecondaryColor, accentCardColor },
     },
   }) => css`
@@ -110,21 +111,17 @@ export const TorrentCardDescription = styled.div`
       gap: 3px;
     }
 
-    .description-wrapper {
-      display: flex;
-      flex-direction: row;
-    }
-
-    .description-wrapper > * {
-      flex: 1;
-    }
-
     .description-title-wrapper {
       display: flex;
       flex-direction: column;
     }
 
     .description-section-name {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      self-align: end;
+
       text-transform: uppercase;
       font-size: 10px;
       font-weight: 600;
@@ -138,9 +135,8 @@ export const TorrentCardDescription = styled.div`
     }
 
     .description-category-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: end;
+      display: inline-flex;
+      color: ${sidebarBGColor};
     }
 
     .description-status-wrapper {

web/src/components/categories.jsx

@@ -2,12 +2,12 @@ import MovieCreationIcon from '@material-ui/icons/MovieCreation'
 import LiveTvIcon from '@material-ui/icons/LiveTv'
 import MusicNoteIcon from '@material-ui/icons/MusicNote'
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
-import HelpIcon from '@material-ui/icons/Help'
+// import HelpIcon from '@material-ui/icons/Help'
 
 export const TORRENT_CATEGORIES = [
   { name: 'Movies', icon: <MovieCreationIcon /> },
   { name: 'Series', icon: <LiveTvIcon /> },
   { name: 'Music', icon: <MusicNoteIcon /> },
   { name: 'Other', icon: <MoreHorizIcon /> },
-  { name: 'Unknown', icon: <HelpIcon /> },
+  // { name: 'None', icon: <HelpIcon /> }, // TODO: unset category with this option
 ]