diff --git a/src/Components/StarPrompt/index.css b/src/Components/StarPrompt/index.css
deleted file mode 100644
index 29c5e4706..000000000
--- a/src/Components/StarPrompt/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.star-prompt .MuiTypography-root {
- font-size: var(--env-var-font-size-medium);
-}
-
-.star-prompt .description {
- font-family: Inter;
- font-weight: 400;
- font-size: 12px;
- line-height: 14.53px;
- letter-spacing: 0%;
-}
diff --git a/src/Components/StarPrompt/index.jsx b/src/Components/StarPrompt/index.jsx
index 59ee4a796..74362c64c 100644
--- a/src/Components/StarPrompt/index.jsx
+++ b/src/Components/StarPrompt/index.jsx
@@ -1,111 +1,100 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Typography, IconButton } from '@mui/material';
+import React from 'react';
+import { Typography, IconButton, Stack, Box } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { useTheme } from '@emotion/react';
-import './index.css';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { setStarPromptClosed } from '../../Features/UI/uiSlice';
-const StarPrompt = () => {
- const [isVisible, setIsVisible] = useState(false);
- const STORAGE_KEY = 'starPromptClosed';
+const StarPrompt = ({
+ repoUrl = 'https://github.com/bluewave-labs/checkmate'
+}) => {
const theme = useTheme();
-
- useEffect(() => {
- const hasClosedPrompt = localStorage.getItem(STORAGE_KEY);
- if (!hasClosedPrompt) {
- setIsVisible(true);
- }
- }, []);
+ const dispatch = useDispatch();
+ const { t } = useTranslation();
+ const isClosed = useSelector((state) => state.ui?.starPrompt?.closed ?? false);
+ const mode = useSelector((state) => state.ui.mode);
const handleClose = () => {
- localStorage.setItem(STORAGE_KEY, 'true');
- setIsVisible(false);
+ dispatch(setStarPromptClosed(true));
};
const handleStarClick = () => {
- window.open('https://github.com/bluewave-labs/checkmate', '_blank');
+ window.open(repoUrl, '_blank');
};
- if (!isVisible) return null;
+ if (isClosed) return null;
return (
-
-
-
-
- Star Checkmate
-
-
-
-
-
-
+
- See the latest releases and help grow the community on GitHub
+ {t('starPrompt.title')}
-
-
-
-
+ >
+
+
+
+
+
+ {t('starPrompt.description')}
+
+
+
+
);
};
diff --git a/src/Features/UI/uiSlice.js b/src/Features/UI/uiSlice.js
index ebafdbbf6..8f0e38ff1 100644
--- a/src/Features/UI/uiSlice.js
+++ b/src/Features/UI/uiSlice.js
@@ -24,6 +24,9 @@ const initialState = {
timezone: "America/Toronto",
distributedUptimeEnabled: false,
language: "gb",
+ starPrompt: {
+ closed: false
+ },
};
const uiSlice = createSlice({
@@ -55,6 +58,9 @@ const uiSlice = createSlice({
setLanguage(state, action) {
state.language = action.payload;
},
+ setStarPromptClosed(state, action) {
+ state.starPrompt.closed = action.payload;
+ },
},
});
@@ -67,4 +73,5 @@ export const {
setTimezone,
setDistributedUptimeEnabled,
setLanguage,
+ setStarPromptClosed,
} = uiSlice.actions;
diff --git a/src/locales/gb.json b/src/locales/gb.json
index cf7711fa8..36cc1d9ad 100644
--- a/src/locales/gb.json
+++ b/src/locales/gb.json
@@ -107,5 +107,9 @@
"settingsDemoMonitorsAdded": "Successfully added demo monitors",
"settingsFailedToAddDemoMonitors": "Failed to add demo monitors",
"settingsMonitorsDeleted": "Successfully deleted all monitors",
- "settingsFailedToDeleteMonitors": "Failed to delete all monitors"
+ "settingsFailedToDeleteMonitors": "Failed to delete all monitors",
+ "starPrompt": {
+ "title": "Star Checkmate",
+ "description": "See the latest releases and help grow the community on GitHub"
+ }
}
diff --git a/src/locales/tr.json b/src/locales/tr.json
index abd358548..c88287151 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -101,5 +101,9 @@
"settingsDemoMonitorsAdded": "Demo monitörler başarıyla eklendi",
"settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi",
"settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi",
- "settingsFailedToDeleteMonitors": "Monitörler silinemedi"
+ "settingsFailedToDeleteMonitors": "Monitörler silinemedi",
+ "starPrompt": {
+ "title": "Checkmate yıldızla değerlendirin",
+ "description": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun"
+ }
}