Release/5.4.0 (#155)

* Adding font size switch * Updating release notes * Updating packages * Changing release notes expiration date * Fixing issue witch fsevents platform * fixing pipeline
mmolenda · Jul 21, 2023 · 540e0a1 · 540e0a1
1 parent 9a59af1
commit 540e0a1
Show file tree

Hide file tree

Showing 12 changed files with 2,493 additions and 2,082 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -53,7 +53,7 @@ jobs:
         with:
           command: |
             docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
-            docker stop $(docker ps | grep ${{ env.IMAGE_NAME }} | cut -d' ' -f1) || true
+            contid=$(docker ps | grep ${{ env.IMAGE_NAME }} | cut -d' ' -f1); if [ ! -z $contid ]; then docker stop $contid; fi
             docker run -d -e GTAG_ID=${{ secrets.GTAG_ID }} -p ${{ vars.DOCKER_EXPOSED_PORT }}:8000 ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
           host: ${{ vars.DEPLOY_HOST }}
           port: ${{ vars.DEPLOY_PORT }}

diff --git a/Dockerfile b/Dockerfile
@@ -2,7 +2,7 @@ FROM node:alpine as build
 WORKDIR .
 COPY ./frontend/package.json ./
 COPY ./frontend/package-lock.json ./
-RUN npm install
+RUN npm install --omit=optional
 COPY ./frontend/public ./public
 COPY ./frontend/src ./src
 RUN npm run build

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "missalemeum",
-  "version": "5.1.0",
+  "version": "5.4.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -12,6 +12,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-router-dom": "^5.3.3",
+    "fsevents": "^2.3.2",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-cookie-consent": "^8.0.1",

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -41,7 +41,7 @@ import {
   MENUITEM_ORATIO,
   MENUITEM_ORDO,
   MENUITEM_PROPER, MENUITEM_SUPPLEMENT,
-  MENUITEM_VOTIVE, MSG_COOKIES, MSG_POLICY_DECLINE_BUTTON, MSG_POLICY_LINK
+  MENUITEM_VOTIVE, MENUITEM_WHATSNEW, MSG_COOKIES, MSG_POLICY_DECLINE_BUTTON, MSG_POLICY_LINK
 } from "./intl";
 import NotFound from "./components/NotFound";
 import Error from "./components/Error";
@@ -51,6 +51,7 @@ import {ContainerMedium} from "./components/styledComponents/ContainerMedium";
 import WidgetPropers from "./components/WidgetPropers";
 import {appbarDarkGrey, getDesignTokens} from "./designTokens";
 import {myLocalStorage} from "./myLocalStorage";
+import ReleaseNotes from "./components/ReleaseNotes";
 
 const debug = process.env.REACT_APP_DEBUG === "true"
 const supportedLanguages = ["en", "pl"]
@@ -88,6 +89,8 @@ const Layout = (props) => {
   const location = useLocation();
   const [drawerOpened, setDrawerOpened] = useState(false)
   const [darkMode, setDarkMode] = useState(undefined)
+  const [fontSize, setFontSize] = useState()
+  const [releaseNotesOpened, setReleaseNotesOpened] = useState(false)
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
   const toggleDrawer = (open) => () => {
     setDrawerOpened(open)
@@ -98,6 +101,7 @@ const Layout = (props) => {
       navigate(`/${defaultLanguage}/404`)
     }
     setDarkMode({"true": true, "false": false, null: undefined}[myLocalStorage.getItem("darkMode")])
+    setFontSize(myLocalStorage.getItem("fontSize"))
   }, [lang, navigate])
 
   useEffect(() => {
@@ -115,10 +119,6 @@ const Layout = (props) => {
     }
   }
 
-  const getThemeMode = () => {
-    return ((darkMode === undefined && prefersDark) || darkMode) ? "dark" : "light"
-  }
-
   const toggleDarkMode = (darkModeNew) => {
     if (darkModeNew === false && darkMode !== false) {
       setDarkMode(false)
@@ -132,8 +132,17 @@ const Layout = (props) => {
     }
   }
 
+  const switchFontSize = (fontSizeNew) => {
+    setFontSize(fontSizeNew)
+    myLocalStorage.setItem("fontSize", fontSizeNew)
+  }
+
+  const getThemeMode = () => {
+    return ((darkMode === undefined && prefersDark) || darkMode) ? "dark" : "light"
+  }
+
   const mode = getThemeMode()
-  const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
+  const theme = React.useMemo(() => createTheme(getDesignTokens(mode, fontSize)), [mode, fontSize]);
 
 
   return (
@@ -153,7 +162,7 @@ const Layout = (props) => {
           ".react-datepicker__current-month": {color: theme.palette.text.primary},
         })}
       />
-      {/*<ReleaseNotes lang={lang} version={props.version} debug={debug} />*/}
+      <ReleaseNotes lang={lang} version={props.version} debug={debug} open={releaseNotesOpened} setOpen={setReleaseNotesOpened} />
       <Container disableGutters sx={{backgroundColor: "background.default"}}>
         <AppBar sx={{backgroundColor: appbarDarkGrey}}>
           <Toolbar>
@@ -165,7 +174,8 @@ const Layout = (props) => {
                 sx={{color: "yellowish.main"}}
                 onClick={toggleDrawer(true)}
               >
-                <MenuIcon/>
+                {/* fixed fontSize to prevent resizing when switching font size from the menu */}
+                <MenuIcon sx={{ fontSize: 24 }}/>
               </IconButton>
               <Drawer
                 variant="temporary"
@@ -177,6 +187,9 @@ const Layout = (props) => {
                   toggleDrawer={toggleDrawer}
                   darkMode={darkMode}
                   toggleDarkMode={toggleDarkMode}
+                  fontSize={fontSize}
+                  switchFontSize={switchFontSize}
+                  setReleaseNotesOpened={setReleaseNotesOpened}
                 />
               </Drawer>
             </>
@@ -252,7 +265,11 @@ const LeftHandMenu = (props) => {
             </ListItemButton>
           </ListItem>
         ))}
-
+        <ListItem key="whatsnew">
+          <ListItemButton onClick={() => props.setReleaseNotesOpened(true)}>
+            <DrawerListItemText primary={MENUITEM_WHATSNEW[props.lang]}/>
+          </ListItemButton>
+        </ListItem>
         <Divider/>
         <ListItem key="lang">
           <ToggleButtonGroup color="secondary" variant="outlined" aria-label="outlined secondary button group">
@@ -266,13 +283,13 @@ const LeftHandMenu = (props) => {
             <ToggleButton onClick={() => props.toggleDarkMode(true)} value="dark" selected={props.darkMode === true}><DarkModeIcon /></ToggleButton>
           </ToggleButtonGroup>
         </ListItem>
-        {/*<ListItem key="font">*/}
-        {/*  <ToggleButtonGroup color="secondary" variant="outlined" aria-label="outlined secondary button group">*/}
-        {/*    <ToggleButton sx={{px: "1rem", fontSize: "0.5rem", fontWeight: "600"}} onClick={() => alert("Not implemented")} value="small"> A </ToggleButton>*/}
-        {/*    <ToggleButton sx={{px: "1rem", fontWeight: "600"}} onClick={() => alert("Not implemented")} value="normal" selected={true}>A</ToggleButton>*/}
-        {/*    <ToggleButton sx={{px: "1rem", fontSize: "1.25rem", fontWeight: "600"}} onClick={() => alert("Not implemented")} value="large">A</ToggleButton>*/}
-        {/*  </ToggleButtonGroup>*/}
-        {/*</ListItem>*/}
+        <ListItem key="font">
+          <ToggleButtonGroup color="secondary" variant="outlined" aria-label="outlined secondary button group">
+            <ToggleButton sx={{px: "1rem", fontSize: "0.5rem", fontWeight: "600"}} onClick={() => props.switchFontSize("small")} value="small" selected={props.fontSize === "small"}>A</ToggleButton>
+            <ToggleButton sx={{px: "1rem", fontWeight: "600"}} onClick={() => props.switchFontSize("medium")} value="medium" selected={["medium", undefined, null].includes(props.fontSize)}>A</ToggleButton>
+            <ToggleButton sx={{px: "1rem", fontSize: "1.25rem", fontWeight: "600"}} onClick={() => props.switchFontSize("large")} value="large" selected={props.fontSize === "large"}>A</ToggleButton>
+          </ToggleButtonGroup>
+        </ListItem>
       </List>
     </Box>
 )}

diff --git a/frontend/src/components/ArticleTags.js b/frontend/src/components/ArticleTags.js
@@ -83,7 +83,8 @@ export default function ArticleTags(props) {
             sx={{
               borderRadius: 10,
               fontFamily: "Arial",
-              fontSize: "0.85rem",
+              fontSize: theme.typography.fontSize / 18 + "rem",
+              height: (theme) => theme.typography.fontSize / 7 + "rem",
               color: (theme) => theme.palette.secondary.main,
               "& .MuiSvgIcon-root": {
                   color: (theme) => theme.palette.secondary.main,

diff --git a/frontend/src/components/ReleaseNotes.js b/frontend/src/components/ReleaseNotes.js
@@ -6,18 +6,30 @@ import DialogTitle from '@mui/material/DialogTitle';
 import {IconButton} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import {myLocalStorage} from "../myLocalStorage";
+import MyLink from "./MyLink";
+import moment from "moment";
+import {useEffect} from "react";
 
 export default function ReleaseNotes(props) {
   const storageKey = `releaseDialogSeen-${props.lang}`
-  const [open, setOpen] = React.useState(myLocalStorage.getItem(storageKey) !== props.version || props.debug === true)
+  const expirationDate = "2023-07-29 00:00:00"
+  useEffect(() => {
+    // must be before the date AND storage says its not seen  OR
+    // debug always opens
+    let isNotSeen= myLocalStorage.getItem(storageKey) !== props.version
+    let isNotExpired = moment(expirationDate) > moment()
+    // if open state is provided from the outside - open; otherwise evaluate if it should be opened
+    props.open || props.setOpen((isNotSeen && isNotExpired) || props.debug === true)
+  }, [])
+
   const handleClose = () => {
     myLocalStorage.setItem(storageKey, props.version)
-    setOpen(false);
+    props.setOpen(false);
   };
 
   return (
       <Dialog
-        open={open}
+        open={props.open}
         onClose={handleClose}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
@@ -34,35 +46,32 @@ export default function ReleaseNotes(props) {
         >
           <CloseIcon />
         </IconButton>
-        <DialogTitle id="alert-dialog-title">{(props.lang === "pl") ? "Missale Meum w nowej odsłonie" : "Missale Meum in a new version"}</DialogTitle>
+        <DialogTitle id="alert-dialog-title">{(props.lang === "pl") ? "Missale Meum 5.4.0" : "Missale Meum 5.4.0"}</DialogTitle>
         <DialogContent>
           {(props.lang === "en")
             ? <DialogContentText id="alert-dialog-description">
             Laudetur Iesus Christus!<br/>
-            We are happy to present you with the next edition of the online missal.<br/><br />
+            We are happy to announce the next release of the online missal.<br/><br />
 
             <strong>What's new</strong><br />
-            - Refreshed design<br/>
-            - Added several popular songs and prayers in English and in Latin, with the same language switch as in masses<br/><br/>
+            - You can now adjust the font size in the application! Take a look at the bottom of the main menu.<br/>
+            - Missale Meum widget with daily propers that can be embedded on your website as an iframe. More details on <MyLink href="/en/supplement/index" text="Supplement" /> page.<br/>
+            - We have fixed several errors and typos reported by the users.<br/><br/>
 
-            Although the list of new features is not spectacular, over the last few months we have made thorough changes
-              to the application that will facilitate further development and work on new functionalities that we hope
-              will start to appear soon.<br /><br />
-            Any comments on the operation of the new website, suggestions, etc. are welcome at   marcin@missalemeum.com.
+            More details can be found on the project's <MyLink href="https://github.com/mmolenda/missalemeum/releases" text="GitHub page" />.<br />
+            Any comments on the operation of the website, suggestions, etc. are welcome at marcin@missalemeum.com.
           </DialogContentText>
           : <DialogContentText id="alert-dialog-description">
             Laudetur Iesus Christus!<br/>
             Prezentujemy Państwu kolejne wydanie mszalika online.<br/><br />
 
             <strong>Co nowego</strong><br />
-            - Odświeżony wygląd<br/>
-            - Pieśni i modlitwy polsko-łacińskie mają przełącznik języka, tak jak msze<br/>
-            - Komentarze do ewanelii przeniesione do aplikacji (zamiast linku do zewnętrznego źródła)<br/><br />
+            - Rozmiar tekstu w aplikacji można dostosować za pomocą przełącznika w głównym menu.<br/>
+            - Widget Missale Meum z tekstami na dziś, który można umieścić na własnej stronie internetowej jako iframe. Więcej szczegółów w zakładce <MyLink href="/pl/supplement/index" text="Suplement" />.<br/>
+            - Poprawiliśmy kilka błędów i literówek zgłoszonych przez użytkowników.<br/><br/>
 
-            Chociaż lista nowości nie jest spektakularna, przez ostatnich kilka miesięcy przeprowadziliśmy
-            gruntowne zmiany w aplikaci, które ułatwią dalszy rozwój i prace nad nowymi funkcjonalnościami,
-            które, mamy nadzieję, wkrótce zaczną się pojawiać.<br /><br />
-            Wszelkie uwagi na temat działania nowego serwisu, sugestie, etc. są mile widziane pod adresem marcin@missalemeum.com.
+            Po więcej szczegółów odsyłamy do <MyLink href="https://github.com/mmolenda/missalemeum/releases" text="strony projektu na GitHubie" />.<br />
+            Wszelkie uwagi na temat działania serwisu, sugestie, etc. są mile widziane pod adresem marcin@missalemeum.com.
           </DialogContentText>}
         </DialogContent>
       </Dialog>

diff --git a/frontend/src/components/styledComponents/Tag.js b/frontend/src/components/styledComponents/Tag.js
@@ -7,7 +7,11 @@ export default function Tag(props) {
       color={props.color ? props.color : "secondary"}
       icon={props.icon ? props.icon : null}
       variant="outlined"
-      sx={{margin: "0.15rem"}}
+      sx={{
+        margin: "0.15rem",
+        borderRadius: 10,
+        height: (theme) => theme.typography.fontSize / 7 + "rem"
+      }}
       label={props.label}
     />
   )

diff --git a/frontend/src/designTokens.js b/frontend/src/designTokens.js
@@ -3,8 +3,14 @@ import {createTheme} from "@mui/material";
 
 const defaultTheme = createTheme()
 export const yellowish = '#fcfbf9'
+const darkRedLightMode = '#b76d6d'
+const darkRedDarkMode = '#e49086'
 export const appbarDarkGrey = '#424242'
-export const getDesignTokens = (mode) => ({
+
+const translateFontSize = (fontSizeName) => {
+  return {"small": 12, "medium": 14, "large": 18}[fontSizeName] || 14
+}
+export const getDesignTokens = (mode, fontSizeName) => ({
   palette: {
     mode,
     ...(mode === 'light'
@@ -20,7 +26,7 @@ export const getDesignTokens = (mode) => ({
             dark: '#1b1b1b',
           },
           secondary: {
-            main: '#b76d6d',
+            main: darkRedLightMode,
             light: '#eb9c9b',
             dark: '#854042',
           },
@@ -33,7 +39,7 @@ export const getDesignTokens = (mode) => ({
             contrastText: '#fff'
           },
           vestmentr: {
-            main: '#b76d6d',
+            main: darkRedLightMode,
             contrastText: '#fff',
           },
           vestmentv: {
@@ -57,7 +63,7 @@ export const getDesignTokens = (mode) => ({
             dark: '#c9c8c6',
           },
           secondary: {
-            main: '#e49086',
+            main: darkRedDarkMode,
             light: '#ffc1b6',
             dark: '#b06159',
           },
@@ -71,7 +77,7 @@ export const getDesignTokens = (mode) => ({
             contrastText: '#fff'
           },
           vestmentr: {
-            main: '#e49086',
+            main: darkRedDarkMode,
             contrastText: '#fff',
           },
           vestmentv: {
@@ -112,24 +118,24 @@ export const getDesignTokens = (mode) => ({
           color: yellowish
         },
         h2: {
-          fontSize: "1.25rem",
+          fontSize: translateFontSize(fontSizeName) * 1.5,
           fontFamily: "Merriweather",
           fontWeight: 800,
           color: grey[900]
         },
         h3: {
-          fontSize: "1rem",
+          fontSize: translateFontSize(fontSizeName) * 1.2,
           fontFamily: "Merriweather",
           textTransform: "uppercase",
           fontWeight: 800,
-          color: grey[900]
+          color: darkRedLightMode
         },
         h4: {
-          fontSize: "1rem",
+          fontSize: translateFontSize(fontSizeName) * 1.2,
           fontFamily: "Merriweather",
           textTransform: "uppercase",
           fontWeight: 400,
-          color: grey[900]
+          color: darkRedLightMode
         },
         body1: {
           fontFamily: "Merriweather",
@@ -144,36 +150,37 @@ export const getDesignTokens = (mode) => ({
           color: yellowish
         },
         h2: {
-          fontSize: "1.25rem",
+          fontSize: translateFontSize(fontSizeName) * 1.5,
           fontFamily: "Merriweather",
           fontWeight: 800,
           color: yellowish
         },
         h3: {
-          fontSize: "1rem",
+          fontSize: translateFontSize(fontSizeName) * 1.2,
           fontFamily: "Merriweather",
           textTransform: "uppercase",
           fontWeight: 800,
-          color: yellowish
+          color: darkRedDarkMode
         },
         h4: {
-          fontSize: "1rem",
+          fontSize: translateFontSize(fontSizeName) * 1.2,
           fontFamily: "Merriweather",
           textTransform: "uppercase",
           fontWeight: 400,
-          color: yellowish
+          color: darkRedDarkMode
         },
         body1: {
           fontFamily: "Merriweather",
           color: yellowish
         },
     }),
+    fontSize: translateFontSize(fontSizeName),
     subtitle1: {
       fontWeight: 400,
     },
     subtitle2: {
       fontWeight: 400,
-      color: '#b76d6d'
+      color: darkRedLightMode
     },
   },
   components: {

diff --git a/frontend/src/intl.js b/frontend/src/intl.js
@@ -17,6 +17,7 @@ export const MENUITEM_ORATIO = {"en": "Prayers", "pl": "Modlitwy"}
 export const MENUITEM_CANTICUM = {"en": "Chants", "pl": "Pieśni"}
 export const MENUITEM_SUPPLEMENT = {"en": "Supplement", "pl": "Suplement"}
 export const MENUITEM_INFO = {"en": "About", "pl": "Informacje"}
+export const MENUITEM_WHATSNEW = {"en": "What's new", "pl": "Co nowego?"}
 export const MSG_ADDRESS_COPIED = {"en": "Address copied to clipboard", "pl": "Adres skopiowany do schowka"}
 export const MSG_COOKIES = {"en": "This website uses cookies. ",
 														"pl": "Ta strona wykorzystuje ciasteczka (cookies). "}