fix: minor project creation modifications (#894)

* changed create project design * use translation for texts * remove divider * use theme for colors
unstructuredstudio · Oct 13, 2023 · ba048ab · ba048ab
1 parent 43456fd
commit ba048ab
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 22 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -345,6 +345,18 @@
       "primary": "Create Project",
       "secondary": "Tell us about your project!"
     },
+    "selectMode": {
+      "description": "Select what kind of project it is, if you worked on the project alone select Personal project, if you worked on your project with other creators select Team project.",
+      "personalMode": {
+        "title": "Personal Project",
+        "description": "Select this if you worked on this project alone"
+      },
+      "teamMode": {
+        "title": "Team Project",
+        "description": "Select this if you worked on this project with other creators"
+      },
+      "submit": "Create Project"
+    },
     "inputs": {
       "title": {
         "label": "Name your project",

diff --git a/zubhub_frontend/zubhub/public/locales/hi/translation.json b/zubhub_frontend/zubhub/public/locales/hi/translation.json
@@ -292,6 +292,18 @@
       "primary": "प्रोजेक्ट बनाएं",
       "secondary": "हमें अपनी परियोजना के बारे में बताएं!"
     },
+    "selectMode": {
+      "description": "चुनें कि यह किस प्रकार का प्रोजेक्ट है, यदि आपने अकेले प्रोजेक्ट पर काम किया है तो व्यक्तिगत प्रोजेक्ट चुनें, यदि आपने अपने प्रोजेक्ट पर अन्य रचनाकारों के साथ काम किया है तो टीम प्रोजेक्ट चुनें।",
+      "personalMode": {
+        "title": "व्यक्तिगत परियोजना",
+        "description": "यदि आपने इस प्रोजेक्ट पर अकेले काम किया है तो इसे चुनें"
+      },
+      "teamMode": {
+        "title": "टीम प्रोजेक्ट",
+        "description": "यदि आपने इस प्रोजेक्ट पर अन्य रचनाकारों के साथ काम किया है तो इसे चुनें"
+      },
+      "submit": "प्रोजेक्ट बनाएं"
+    },
     "inputs": {
       "title": {
         "label": "अपने प्रोजेक्ट का नाम बताइए",

diff --git a/zubhub_frontend/zubhub/src/assets/js/colors.js b/zubhub_frontend/zubhub/src/assets/js/colors.js
@@ -9,7 +9,9 @@ export const colors = {
     light: '#C4C4C4',
     white: '#fff',
     green: '#22C55E',
-    red: '#f44336'
+    red: '#f44336',
+    'blue-light': '#00B8C433',
+    'blue-dark': '#7BA8AB'
 }
 
 export const borders = {

diff --git a/zubhub_frontend/zubhub/src/views/create_project/CreateProject.jsx b/zubhub_frontend/zubhub/src/views/create_project/CreateProject.jsx
@@ -15,8 +15,10 @@ import {
 import {
   ArrowBackIosRounded,
   ArrowForwardIosRounded,
+  CheckCircle,
   CloseOutlined,
   CloudDoneOutlined,
+  PeopleAltSharp,
   Person,
 } from '@material-ui/icons';
 import DoneRounded from '@material-ui/icons/DoneRounded';
@@ -244,7 +246,7 @@ function CreateProject(props) {
 
   if (TEAM_ENABLED) {
     if (!['team', 'personal'].includes(mode)) {
-      return <SelectModeUI setMode={mode => setMode(mode)} />;
+      return <SelectModeUI setMode={mode => setMode(mode)} t={props.t} />;
     }
 
     if (mode.length == 0) return null;
@@ -388,7 +390,7 @@ function CreateProject(props) {
   );
 }
 
-const SelectModeUI = ({ setMode }) => {
+const SelectModeUI = ({ setMode, t }) => {
   const classes = makeStyles(createProjectStyle)();
   const commonClasses = makeStyles(styles)();
   const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm'));
@@ -406,39 +408,44 @@ const SelectModeUI = ({ setMode }) => {
   return (
     <div className={classes.container}>
       <Box className={clsx(classes.selectMode)}>
-        <Box sx={{ textAlign: isSmallScreen ? 'left' : 'center' }}>
-          <Typography className={clsx(commonClasses.title1)}>Create Project</Typography>
+        <Box className={classes.selectModeTextContainer}>
+          <Typography className={clsx(commonClasses.title1)}>{t('createProject.welcomeMsg.primary')}</Typography>
           <Typography>
-            Select what kind of project it is, if you worked on the project alone select Personal project, if you worked
-            on your project with other creators select Team project.
+            {t('createProject.selectMode.description')}
           </Typography>
         </Box>
         <div className={clsx(classes.modeItemContainer)}>
           <div
             onClick={() => setModeItem(modes.personal)}
             className={clsx(classes.modeItem, mode == modes.personal ? classes.modeItemSelected : null)}
           >
-            <Person style={{ color: colors.primary, marginBottom: 5, fontSize: 30 }} />
-            <Typography className={clsx(commonClasses.title2, classes.modeItemTitle)}>Personal Project</Typography>
-            <Typography>If you worked on the project alone </Typography>
+            <div className={classes.checkBoxContainer}>
+              <CheckCircle className={clsx(mode === modes.personal ? classes.checkBoxSelected : classes.checkBoxDefault)} />
+            </div>
+            <Person className={classes.modeItemIcon} />
+            <Typography className={clsx(commonClasses.title2, classes.modeItemTitle)}>{t('createProject.selectMode.personalMode.title')}</Typography>
+            <Typography className={classes.modeItemDescription}>{t('createProject.selectMode.personalMode.description')}</Typography>
           </div>
 
           <div
             onClick={() => setModeItem(modes.team)}
             className={clsx(classes.modeItem, mode == modes.team && classes.modeItemSelected)}
           >
-            <Person style={{ color: colors.primary, marginBottom: 5, fontSize: 30 }} />
-            <Typography className={clsx(commonClasses.title2, classes.modeItemTitle)}>Team Project</Typography>
-            <Typography>If you worked on the project with other creators </Typography>
+            <div className={classes.checkBoxContainer}>
+              <CheckCircle className={clsx(mode === modes.team ? classes.checkBoxSelected : classes.checkBoxDefault)} />
+            </div>
+            <PeopleAltSharp className={classes.modeItemIcon} />
+            <Typography className={clsx(commonClasses.title2, classes.modeItemTitle)}>{t('createProject.selectMode.teamMode.title')}</Typography>
+            <Typography className={classes.modeItemDescription}>{t('createProject.selectMode.teamMode.description')}</Typography>
           </div>
         </div>
         <CustomButton
+          className={classes.modeSubmitButton}
           onClick={handleCreate}
           primaryButtonStyle
-          style={{ marginTop: 40, alignSelf: 'center' }}
           disabled={mode.length === 0}
         >
-          Create Project
+          {t('createProject.selectMode.submit')}
         </CustomButton>
       </Box>
     </div>

diff --git a/zubhub_frontend/zubhub/src/views/create_project/createProject.style.js b/zubhub_frontend/zubhub/src/views/create_project/createProject.style.js
@@ -41,31 +41,76 @@ export const createProjectStyle = theme => ({
             textDecoration: 'underline',
         },
     },
+    selectModeTextContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '750px',
+        textAlign: 'center',
+    },
     modeItemContainer: {
         display: 'flex',
+        justifyContent: 'space-between',
         gap: 20,
-        marginTop: 40,
+        paddingRight: 40,
+        paddingLeft: 40, 
+        marginTop: 60,
         [theme.breakpoints.down('md')]: {
-            flexDirection: 'column'
+            flexDirection: 'column',
+            alignItems: 'center'
         },
     },
     modeItemSelected: {
         border: `solid 1.5px ${colors.primary} !important`
     },
     modeItem: {
+        width: '260px',
+        height: '220px',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
         backgroundColor: colors.white,
         borderRadius: 8,
-        padding: '16px 24px',
+        padding: '18px 24px',
         border: `solid 1.5px transparent`,
-        width: '50%',
+        boxShadow: '2px 4px 5px 0px #00B8C41A',
         '&:hover': {
             border: `solid 1.5px ${colors.primary}`,
             cursor: 'pointer'
         },
         [theme.breakpoints.down('md')]: {
-            width: '100%'
+            width: '100%',
+            maxWidth: '500px',
         },
     },
+    modeItemDescription: {
+        textAlign: 'center',
+        fontSize: '12px',
+        fontWeight: '300'
+    },
+    modeItemIcon: {
+        color: colors.primary,
+        marginBottom: 2,
+        fontSize: 40,
+    },
+    modeSubmitButton: {
+        width: '150px',
+        height: '40px',
+        fontFamily: 'Raleway, Roboto, sans-serif',
+        fontSize: '16px',
+        fontWeight: 600,
+        lineHeight: '20px',
+        letterSpacing: 0,
+        marginTop: 60,
+        marginBottom: 60,
+        padding: 4,
+        alignSelf: 'center',
+        '&:disabled': {
+            backgroundColor: colors["blue-light"],
+            color: colors["blue-dark"],
+        }
+    },
     dialogTitle1: {
         fontSize: '18px !important',
         lineHeight: '26px !important',
@@ -79,6 +124,29 @@ export const createProjectStyle = theme => ({
         marginBottom: 5,
         marginTop: 10
     },
+    checkBoxContainer: {
+        position: 'absolute',
+        right: '12px',
+        top: '14px',
+        width: '30px',
+        height: '30px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checkBoxDefault: {
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        borderRadius: '50%',
+        border: `solid 2px ${colors.primary}`,
+        color: colors.white,
+    },
+    checkBoxSelected: {
+        borderRadius: '50%',
+        fontSize: '36px',
+        color: colors.primary,
+    },
     formContainer: {
         borderRadius: 10,
         backgroundColor: colors.white,
@@ -154,6 +222,4 @@ export const createProjectStyle = theme => ({
         display: 'flex',
         marginTop: 40
     },
-
-
 })