update topic buttons

Citizen-Knowledge-Graph · Nov 11, 2024 · 8e0111b · 8e0111b
1 parent fe9dc21
commit 8e0111b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/src/components/AppScreenWrapper.js b/src/components/AppScreenWrapper.js
@@ -4,12 +4,12 @@ import AppScreenHeader from "./AppScreenHeader";
 import globalStyles from "../styles/styles";
 
 const AppScreenWrapper = ({isDesktop, children, back = false}) => {
-    const horizontalPadding = isDesktop ? '15px' : '16px';
-    const verticalPadding = isDesktop ? '15px' : '16px';
+    const horizontalPadding = isDesktop ? '20px' : '16px';
+    const verticalPadding = isDesktop ? '20px' : '16px';
     const desktopGradient = isDesktop ? `linear-gradient(
                         to bottom,
                             ${globalStyles.primaryColor}33 0%,
-                            ${globalStyles.primaryColor}80 100%)` : 'none';
+                            ${globalStyles.primaryColor}99 100%)` : 'none';
     return (
         <VStack alignItems={'center'} sx={{
             paddingLeft: horizontalPadding,

diff --git a/src/screens/onboarding-welcome/OnboardingWelcomeTopics.js b/src/screens/onboarding-welcome/OnboardingWelcomeTopics.js
@@ -8,9 +8,11 @@ import globalStyles from "../../styles/styles";
 import useTopicSelectionHandlers from "./hooks/useTopicSelectionHandlers";
 import useTranslation from "../../language/useTranslation";
 import {LanguageContext} from "../../language/LanguageContext";
+import {useStore} from "../../components/ViewportUpdater";
 
 const OnboardingWelcomeTopics = () => {
     const { t } = useTranslation();
+    const isDesktop = useStore((state) => state.isDesktop);
     const { language } = useContext(LanguageContext);
     const [topicsData, setTopicsData] = useState([]);
     const [selectedTopicsBoolean, setSelectedTopicsBoolean] = useState([]);
@@ -43,22 +45,19 @@ const OnboardingWelcomeTopics = () => {
             </Typography>
             {
                 setSelectedTopicsBoolean.length > 0 && (
-                    <VStack alignItems={'center'}>
+                    <VStack alignItems={'center'} sx={isDesktop ? styles.gridContainer : styles.singleColumnContainer}>
                         {topicsData.map((topic, index) => (
                             <Button
                                 key={index}
                                 onClick={() => handleButtonClick(topic, index)}
                                 sx={{
                                     ...styles.topicItemButton,
-                                    backgroundColor: selectedTopicsBoolean[index] ? globalStyles.primaryColor : globalStyles.colorDarkGreyTransparent,
-                                    '&:hover': {
-                                        backgroundColor: selectedTopicsBoolean[index] ? globalStyles.primaryColor : globalStyles.colorDarkGreyTransparent,
-                                    },
+                                    backgroundColor: selectedTopicsBoolean[index] && globalStyles.primaryColor,
                                     '&:active': {
-                                        backgroundColor: selectedTopicsBoolean[index] ? globalStyles.primaryColor : globalStyles.colorDarkGreyTransparent,
+                                        backgroundColor: selectedTopicsBoolean[index] && globalStyles.primaryColor,
                                     },
                                     '&:focus': {
-                                        backgroundColor: selectedTopicsBoolean[index] ? globalStyles.primaryColor : globalStyles.colorDarkGreyTransparent,
+                                        backgroundColor: selectedTopicsBoolean[index] && globalStyles.primaryColor,
                                     },
                                 }}>
                                 <Typography sx={styles.topicText}>
@@ -80,16 +79,13 @@ const styles = {
     },
     topicItemButton: {
         width: '100%',
-        borderRadius: '12px',
-        padding: '8px',
+        borderRadius: '4px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: globalStyles.primaryColor,
+        padding: '16px',
         '&:hover': {
-            backgroundColor: 'inherit',
-        },
-        '&:active': {
-            backgroundColor: 'inherit',
-        },
-        '&:focus': {
-            backgroundColor: 'inherit',
+            backgroundColor: globalStyles.primaryColor,
         },
     },
     topicText: {
@@ -98,6 +94,14 @@ const styles = {
         textAlign: 'left',
         textTransform: 'none',
         color: 'black',
+    },
+    gridContainer: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        width: '100%',
+    },
+    singleColumnContainer: {
+        width: '100%',
     }
 };