1.4.7

ReStartQ · Feb 2, 2024 · 0aacdd5 · 0aacdd5
1 parent 0aaca90
commit 0aacdd5
Show file tree

Hide file tree

Showing 13 changed files with 200 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changes
 
+## 1.4.7
+
+- Redesigned the season search menu. The year select is now an input to allow for easier entry. Moved the search bar to the bottom. Colors were changed in the season search menu for the inputs and search.
+- Tooltips for top sidebar are now outlined blue to be a similar style with the rest of the app.
+
 ## 1.4.6
 
 - Advanced anime window now shows an info icon w/ tooltip showing number of episodes aired for currently releasing anime.

diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ You can download the app [here](https://github.com/ReStartQ/AniCour/releases). C
 
 1. Download the setup file from the latest release and install it on your computer.
 2. The setup file is labeled as AniCour-Setup-x.x.x.exe, where x denotes a number for the version.
-   <br/> **Ex: AniCour-Setup-1.4.6.exe**
+   <br/> **Ex: AniCour-Setup-1.4.7.exe**
 3. When you run the exe file, Windows will give a message like below because there is no code signing certificate, click on "More info" <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourNoCodeSigningInitial.png" alt="Hello" /></a></p>
 4. A new option will appear, "Run anyway". Click on it. <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourNoCodeSigning.png" alt="Hello" /></a></p>
 5. The installer menu will open up to allow you to install it on your computer. <p align="center"><a href="#"><img src="https://github.com/ReStartQ/anicour/blob/main/images/help/AniCourInstallationMenu2.png" alt="Hello" /></a></p>

diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anicour",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "Anime, Manga, and Light Novel Tracker Desktop Application for Windows. A fast and interactive way for AniList users to track and manage their anime/manga lists. ",
   "license": "GPL-3.0",
   "author": {

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -480,7 +480,7 @@ const Hello = () => {
                 display: 'flex',
                 ml: `${drawerWidth}px`,
                 boxSizing: 'border-box',
-                background: '#2E3B55', // original #2E3B55
+                background: '#2E3B55', // original #2E3B55 #102a43 #486581
               }}
             >
               <Toolbar

diff --git a/src/renderer/components/app/etc/CustomTooltip1.tsx b/src/renderer/components/app/etc/CustomTooltip1.tsx
@@ -0,0 +1,16 @@
+import { styled } from '@mui/material';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: '#0b0d0e',
+    color: '#86b9db', // #86b9db
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #4383ce', // #4383ce
+  },
+}));
+
+export default HtmlTooltip;
diff --git a/src/renderer/components/app/news/NewsRefresh.tsx b/src/renderer/components/app/news/NewsRefresh.tsx
@@ -1,10 +1,11 @@
 import RefreshIcon from '@mui/icons-material/Refresh';
-import { IconButton, ToggleButton, Tooltip } from '@mui/material';
+import { IconButton, ToggleButton, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useNews } from 'renderer/context/NewsContext';
 import { useNewsServiceType } from 'renderer/context/NewsServiceTypeContext';
 import { useNewsQuery } from 'renderer/functions/NewsFunctions';
 import isOnline from 'is-online';
+import HtmlTooltip from '../etc/CustomTooltip1';
 
 export default function NewsRefresh({ props }: any) {
   const newsCards: any = useNews();
@@ -34,7 +35,16 @@ export default function NewsRefresh({ props }: any) {
   };
 
   return (
-    <Tooltip title="Refresh News" placement="top">
+    <HtmlTooltip
+      title={
+        <>
+          <Typography color="inherit" fontSize="14px">
+            Refresh News
+          </Typography>
+        </>
+      }
+      placement="top"
+    >
       <ToggleButton
         value="right"
         aria-label="right aligned"
@@ -43,6 +53,6 @@ export default function NewsRefresh({ props }: any) {
       >
         <RefreshIcon />
       </ToggleButton>
-    </Tooltip>
+    </HtmlTooltip>
   );
 }
diff --git a/src/renderer/components/app/search/FilterSelect.tsx b/src/renderer/components/app/search/FilterSelect.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { useAtom } from 'jotai';
 import { filterTypeAtom } from 'renderer/store';
-import { Box } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { useSidebarButton } from 'renderer/context/SidebarContext';
 import { Tooltip } from '@mui/joy';
 import { StyledMenu } from '../styled/StyledComponents';

diff --git a/src/renderer/components/app/seasons/SeasonSearch.tsx b/src/renderer/components/app/seasons/SeasonSearch.tsx
@@ -1,12 +1,16 @@
 import SearchIcon from '@mui/icons-material/Search';
+import { KeyboardArrowDown } from '@mui/icons-material';
 import {
-  Button,
   FormControl,
+  FormLabel,
+  Input,
+  Select,
+  Option,
+  Box,
+  Button,
   IconButton,
-  InputLabel,
-  NativeSelect,
-} from '@mui/material';
-import Box from '@mui/material/Box';
+} from '@mui/joy';
+import { InputLabel, NativeSelect, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useSeasonInput } from 'renderer/context/SeasonInputContext';
 
@@ -32,6 +36,7 @@ export default function SeasonSearch({ props }: any) {
       seasonInput.seasonInput[1],
     ]);
     */
+    console.log('change');
     setMySeason(event.target.value);
   };
 
@@ -42,23 +47,28 @@ export default function SeasonSearch({ props }: any) {
       event.target.value,
     ]);
     */
-    setMyYear(event.target.value);
+    console.log(`change year${event.target.value}`);
+    if (event.target.value > currentYear + 1) {
+      setMyYear(currentYear + 1);
+    } else {
+      setMyYear(event.target.value);
+    }
   };
 
   const handleOnClick = () => {
     if (
       mySeason !== seasonInput.seasonInput[0] ||
       myYear !== seasonInput.seasonInput[1]
     ) {
-      seasonInput.setSeasonInput([mySeason, myYear]);
+      if (myYear < 1960) {
+        setMyYear(currentYear);
+        seasonInput.setSeasonInput([mySeason, currentYear]);
+      } else {
+        seasonInput.setSeasonInput([mySeason, myYear]);
+      }
     }
   };
 
-  const handleKeyboard = (e: any) => {
-    console.log(e.key);
-    // e.preventDefault();
-  };
-
   return (
     <Box
       display="flex"
@@ -68,23 +78,30 @@ export default function SeasonSearch({ props }: any) {
       flexWrap="wrap"
       gap="10px"
       my="10px"
-      ml="10px"
+      mx="5px"
     >
-      <FormControl sx={{ flexBasis: '42%' }}>
-        <InputLabel
-          variant="standard"
-          htmlFor="uncontrolled-nativeSeasonSelect"
-        >
-          Season
-        </InputLabel>
+      <FormControl>
+        <FormLabel>Season</FormLabel>
         <NativeSelect
           value={mySeason}
           inputProps={{
             name: 'Season',
             id: 'uncontrolled-nativeSeasonSelect',
           }}
+          sx={{
+            border: '1px solid #03a9f4',
+            borderRadius: '5px',
+            mt: '1px',
+            pl: '10px',
+            pr: '10px',
+            color: ' #81d4fa',
+            '&:hover': {
+              backgroundColor: '#1F242F',
+            },
+            backgroundColor: '#0b0d0e',
+          }}
+          disableUnderline
           onChange={handleChange}
-          onKeyDown={handleKeyboard}
         >
           <option value="WINTER" key="WINTER">
             Winter
@@ -100,41 +117,50 @@ export default function SeasonSearch({ props }: any) {
           </option>
         </NativeSelect>
       </FormControl>
-      <FormControl sx={{ flexBasis: '30%' }}>
-        <InputLabel variant="standard" htmlFor="uncontrolled-nativeYearSelect">
-          Year
-        </InputLabel>
-        <NativeSelect
+      <FormControl>
+        <FormLabel>Year</FormLabel>
+        <Input
+          variant="outlined"
+          color="primary"
+          size="md"
+          type="number"
           value={myYear}
-          inputProps={{
-            name: 'Year',
-            id: 'uncontrolled-nativeYearSelect',
-          }}
           onChange={handleChange2}
-          onKeyDown={handleKeyboard}
-        >
-          {years.map((year: any) => {
-            return (
-              <option value={year} key={year}>
-                {year}
-              </option>
-            );
-          })}
-        </NativeSelect>
+          onKeyDown={(evt) =>
+            ['e', 'E', '+', '-', '.'].includes(evt.key) && evt.preventDefault()
+          }
+          sx={{ width: '90px' }}
+          slotProps={{
+            input: {
+              pattern: '[0-9]',
+              min: 1960,
+              max: currentYear + 1,
+              step: 1,
+            },
+          }}
+        />
       </FormControl>
-      <IconButton
+      <Button
+        onClick={handleOnClick}
+        size="sm"
+        color="primary"
+        fullWidth
         sx={{
-          flexBasis: '15%',
+          px: '2px',
+          // height: '28px',
+          // width: '28px',
+          mx: '12px',
           alignSelf: 'flex-end',
-          borderRadius: 1,
-          backgroundColor: '#1873CC',
-          ':hover': { backgroundColor: 'dodgerblue' },
+          mb: '2px',
+          '&:hover': {
+            backgroundColor: '#213963', // #1F242F
+          },
+          backgroundColor: '#142543',
         }}
-        onClick={handleOnClick}
-        size="small"
+        variant="soft"
       >
-        <SearchIcon fontSize="medium" />
-      </IconButton>
+        <Typography fontSize="16px">Search</Typography>
+      </Button>
     </Box>
   );
 }
diff --git a/src/renderer/components/app/sidebar/FeatureButtonGroup.tsx b/src/renderer/components/app/sidebar/FeatureButtonGroup.tsx
@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react';
 import CachedIcon from '@mui/icons-material/Cached';
 import SettingsIcon from '@mui/icons-material/Settings';
 import HistoryIcon from '@mui/icons-material/History';
-import { ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import {
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { useMainMediaList } from 'renderer/functions/MainMediaListFunctions';
 import { useAniListToken } from 'renderer/context/services/AniListTokenContext';
 import { useAniListUsername } from 'renderer/context/services/AniListUsernameContext';
@@ -18,6 +23,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useAdvancedMedia } from 'renderer/context/advanced/AdvancedMediaContext';
 import { getTitle } from 'renderer/functions/view/TitlePreferenceFunctions';
 import { useTitle } from 'renderer/context/TitleContext';
+import HtmlTooltip from '../etc/CustomTooltip1';
 
 export default function FeatureButtonGroup() {
   const myToken: any = useAniListToken();
@@ -83,7 +89,16 @@ export default function FeatureButtonGroup() {
       aria-label="text alignment"
       sx={{ flexBasis: '40%' }}
     >
-      <Tooltip title="Sync" placement="top">
+      <HtmlTooltip
+        title={
+          <>
+            <Typography color="inherit" fontSize="14px">
+              Sync
+            </Typography>
+          </>
+        }
+        placement="top"
+      >
         <ToggleButton
           value="center"
           aria-label="centered"
@@ -94,8 +109,17 @@ export default function FeatureButtonGroup() {
         >
           <CachedIcon />
         </ToggleButton>
-      </Tooltip>
-      <Tooltip title="Settings" placement="top">
+      </HtmlTooltip>
+      <HtmlTooltip
+        title={
+          <>
+            <Typography color="inherit" fontSize="14px">
+              Settings
+            </Typography>
+          </>
+        }
+        placement="top"
+      >
         <ToggleButton
           value="left"
           aria-label="left aligned"
@@ -105,7 +129,7 @@ export default function FeatureButtonGroup() {
         >
           <SettingsIcon />
         </ToggleButton>
-      </Tooltip>
+      </HtmlTooltip>
     </ToggleButtonGroup>
   );
 }