Refactor Bootcamp tile and Bootcamp components

src/component/form/form-field/form-field.tsx

@@ -20,6 +20,8 @@ interface ExtendedFormFieldProps extends FormFieldProps {
   errors?: any
   helperText?: string
   defaultValue?: string
+  isAccount?: boolean
+  disabled?: boolean
   setValue?: (value: string) => void
 }
 
@@ -37,6 +39,8 @@ const FormField = forwardRef(
       helperText,
       isGithub,
       errors,
+      isAccount = false,
+      disabled = false,
       required = false
     }: ExtendedFormFieldProps,
     ref
@@ -56,10 +60,10 @@ const FormField = forwardRef(
 
     return (
       <TextField
-        variant='filled'
+        variant={isAccount ? 'outlined' : 'filled'}
         color='primary'
         autoComplete={autoComplete}
-        disabled={submitting || sent}
+        disabled={submitting || sent || disabled}
         label={label}
         placeholder={placeholder}
         type={showPassword ? type : isPassword ? KEY.PASSWORD : type}
@@ -95,26 +99,50 @@ const FormField = forwardRef(
         fullWidth
         {...register(name)}
         sx={{
-          color: 'common.white',
-          '& .MuiFilledInput-root': {
-            color: 'common.black',
-            backgroundColor: 'common.white',
-            '& .MuiInputLabel-root': {
+          ...(!isAccount && {
+            color: 'common.white',
+            '& .MuiFilledInput-root': {
+              color: 'common.black',
+              backgroundColor: 'common.white',
+              '& .MuiInputLabel-root': {
+                color: 'common.white'
+              },
+              '&.Mui-focused .MuiInputBase-input': {
+                color: 'common.black'
+              },
+              '&.Mui-focused': {
+                backgroundColor: 'secondary.main'
+              },
+              '&:hover': {
+                backgroundColor: 'secondary.main'
+              }
+            },
+            '&:active': {
               color: 'common.white'
+            }
+          }),
+          // if isAccount is true, then apply the following styles
+          ...(isAccount && {
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: 'none',
+              fontWeight: 'bold'
+            },
+            '&.Mui-focused': {
+              backgroundColor: 'transparent'
             },
-            '&.Mui-focused .MuiInputBase-input': {
+            // edit label color
+            '& .MuiInputLabel-root': {
               color: 'common.black'
             },
-            '&.Mui-focused': {
-              backgroundColor: 'secondary.main'
+            // disabled text color
+            '& .MuiInputBase-input ': {
+              color: 'grey.800',
+              opacity: 1,
+              fontWeight: 'bold'
             },
-            '&:hover': {
-              backgroundColor: 'secondary.main'
-            }
-          },
-          '&:active': {
-            color: 'common.white'
-          },
+            backgroundColor: 'transparent',
+            fontWeight: 'bold'
+          }),
           padding: 1,
           marginY: 1
         }}

src/component/setting/style.tsx

@@ -18,7 +18,6 @@ export const SCard = styled(CardActionArea, {
   border: `solid 1px ${alpha(theme.palette.grey[800], 0.22)}`,
   ...(selected && {
     color: theme.palette.primary.main,
-    // boxShadow: theme.customShadow.z12,
     borderColor: alpha(theme.palette.grey[800], 0.22)
   })
 }))

src/config/category.ts

@@ -0,0 +1,7 @@
+export const CATEGORY = {
+  GENERAL: 'General',
+  AI_DIGITAL_TRANSFORMATION: 'AI & Digital Transformation',
+  SUSTAINABILITY: 'Sustainability',
+  LEADERSHIP_INTERPERSONAL_SKILLS: 'Leadership & Interpersonal Skills',
+  DATABASES: 'Databases'
+}

src/config/icon-directory.ts

@@ -40,6 +40,7 @@ const ICON_WEB = {
   MODE_LIGHT: _getWebIcon('sun'),
   MODE_DARK: _getWebIcon('moon'),
 
+  SAVE: _getWebIcon('save-outline'),
   SUCCESS: _getWebIcon('checkmark-circle-2'),
   SETTING: _getWebIcon('cog'),
   WARNING: _getWebIcon('alert-triangle'),
@@ -87,6 +88,7 @@ export enum ICON_WEB_NAME {
   FULLSCREEN_EXIT = 'FULLSCREEN_EXIT',
   REFRESH = 'REFRESH',
 
+  SAVE = 'SAVE',
   SUCCESS = 'SUCCESS',
   SETTING = 'SETTING',
   WARNING = 'WARNING',

src/config/index.ts

@@ -2,3 +2,4 @@ export { default as GLOBAL } from './global'
 export { default as ASSET } from './asset-directory'
 export * from './icon-directory'
 export * from './dimension'
+export * from './category'

src/constant/aria.ts

@@ -3,7 +3,9 @@ enum ARIA {
   NEW_PASSWORD = 'new-password',
   FIRST_NAME = 'First name',
   LAST_NAME = 'Last name',
-  TOGGLE_PASSWORD = 'toggle password visibility'
+  TOGGLE_PASSWORD = 'toggle password visibility',
+  TABS = 'tabs',
+  COMPANY_BADGE = 'company badge'
 }
 
 export default ARIA

src/constant/button.ts

@@ -81,7 +81,8 @@ enum BUTTON {
   //  @auth
   LOG_IN = 'Log In',
   LOG_OUT = 'Log Out',
-  REGISTER = 'Register'
+  REGISTER = 'Register',
+  START_APPLICATION = ' Start your Application'
 }
 
 export { BUTTON }

src/constant/component.ts

@@ -0,0 +1,14 @@
+export enum COMPONENT {
+  GS_LOADING_BUTTON = 'GSLoadingButton',
+  S_TOOLBAR = 'SToolbar',
+  S_BADGE_HEADER = 'SBadgeHeader',
+  S_CARD = 'SCard',
+  S_SCROLL_BOX = 'SScrollBox',
+  S_SCROLL_GRID = 'SScrollGrid',
+  GS_CONTAINER_GRID = 'GSContainerGrid',
+  SECTION = 'section',
+  GRID = 'Grid',
+  DIV = 'div',
+  IMG = 'img',
+  A = 'a'
+}

src/constant/index.ts

@@ -15,3 +15,6 @@ export { BUTTON } from './button'
 export * from './typography'
 export * from './size'
 export * from './color'
+export * from './component'
+export * from './variant'
+export * from './sx'

src/constant/key.ts

@@ -9,6 +9,7 @@ enum KEY {
   PHOTO_DEFAULT = 'no-photo.jpeg',
   BADGE_DEFAULT = 'no-badge.png',
   // @form
+  FULL_NAME = 'fullname',
   FIRST_NAME = 'firstname',
   LAST_NAME = 'lastname',
   EMAIL = 'email',
@@ -28,6 +29,7 @@ enum KEY {
   TEXT = 'text',
   AUTO = 'auto',
   END = 'end',
+  IMAGE = 'img',
   // modes
   LIGHT = 'light',
   DARK = 'dark',
@@ -43,7 +45,9 @@ enum KEY {
   TOP = 'top',
   BOTTOM = 'bottom',
   LEFT = 'left',
-  RIGHT = 'right'
+  RIGHT = 'right',
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
 }
 
 export default KEY

src/constant/label.ts

@@ -27,7 +27,9 @@ const LABEL = {
   TRAINER: 'Trainer',
 
   BOOTCAMP_PAGE_TITLE: 'Worldclass Bootcamps Worldwide',
-  COURSE_PAGE_TITLE: 'World Class Courses'
+  COURSE_PAGE_TITLE: 'World Class Courses',
+
+  NEW_BOOTCAMPS: 'New Bootcamps'
 }
 
 export default LABEL

src/constant/placeholder.ts

@@ -10,6 +10,11 @@ enum PLACEHOLDER {
   COUNTRY = 'Country',
   ZIP_CODE = 'Zip Code',
 
+  BOOTCAMP_NAME = 'TCCP Exclusive',
+  NO_DURATION = 'No duration specified',
+  NO_TUITION = 'No tuition specified',
+  NO_MINIMUM_SKILL = 'No minimum skill required',
+
   // @bootcamp search form
   MILES_FROM = 'Miles From',
   ENTER_ZIPCODE = 'Enter Zipcode',

src/constant/sx.ts

@@ -0,0 +1,13 @@
+export enum FLEX {
+  FLEX = 'flex',
+  INLINE_FLEX = 'inline-flex',
+  FLEX_ROW = 'row',
+  FLEX_COLUMN = 'column',
+  FLEX_ROW_REVERSE = 'row-reverse',
+  FLEX_COLUMN_REVERSE = 'column-reverse',
+  FLEX_WRAP = 'wrap',
+  FLEX_NOWRAP = 'nowrap',
+  FLEX_WRAP_REVERSE = 'wrap-reverse',
+  FLEX_END = 'flex-end',
+  FLEX_START = 'flex-start'
+}

src/constant/variant.ts

@@ -0,0 +1,33 @@
+export enum BUTTON_VARIANT {
+  CONTAINED = 'contained',
+  OUTLINED = 'outlined',
+  TEXT = 'text'
+}
+
+export enum TYPOGRAPHY_VARIANT {
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+  H6 = 'h6',
+  SUBTITLE1 = 'subtitle1',
+  SUBTITLE2 = 'subtitle2',
+  BODY1 = 'body1',
+  BODY2 = 'body2',
+  CAPTION = 'caption',
+  OVERLINE = 'overline'
+}
+
+export enum SKELETON_VARIANT {
+  RECTANGULAR = 'rectangular',
+  CIRCULAR = 'circular',
+  TEXT = 'text'
+}
+
+export enum VARIANT {
+  RECTANGULAR = 'rectangular',
+  CIRCULAR = 'circular',
+  OUTLINED = 'outlined',
+  COVER = 'cover'
+}