Different versions buttons

src/common/components/AttendanceModal/index.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import useTranslation from 'next-translate/useTranslation';
 import PropTypes from 'prop-types';
 import {
-  Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, Button, Box,
+  Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, Button as ChakraButton, Box,
   NumberInput, NumberInputStepper, NumberDecrementStepper, NumberIncrementStepper, NumberInputField,
   FormControl, FormLabel, Flex, Grid, useCheckbox, useCheckboxGroup, Avatar,
   useColorMode, useToast, Select, ModalCloseButton,
@@ -15,6 +15,7 @@ import ModalInfo from '../../../js_modules/moduleMap/modalInfo';
 import useStyle from '../../hooks/useStyle';
 import useCohortHandler from '../../hooks/useCohortHandler';
 import handlers from '../../handlers';
+import Button from '../Button';
 
 function AttendanceModal({
   title, message, isOpen, onClose, students,
@@ -310,9 +311,9 @@ function AttendanceModal({
               })}
             </Grid>
           </Box>
-          <Button variant="link" fontSize="13px" fontWeight={400} onClick={() => setChecked(students.map((l) => String(l?.user?.id)))}>
+          <ChakraButton variant="link" fontSize="13px" fontWeight={400} onClick={() => setChecked(students.map((l) => String(l?.user?.id)))}>
             {t('common:select-all')}
-          </Button>
+          </ChakraButton>
         </ModalBody>
         <ModalFooter justifyContent="space-between">
           <Text
@@ -328,9 +329,9 @@ function AttendanceModal({
             textTransform="uppercase"
             fontSize="13px"
             isDisabled={checked.length < 1 || isLoading}
-            variant="default"
+            variant="primary"
             onClick={handleAttendance}
-            rightIcon={<Icon icon="longArrowRight" width="15px" color={checked.length < 1 ? 'black' : 'white'} />}
+            rightIcon={<Icon icon="longArrowRight" width="15px" color={checked.length < 1 ? 'disable' : 'primary'} />}
           >
             {t('attendance-modal.apply-changes')}
           </Button>
@@ -381,12 +382,12 @@ function AttendanceModal({
                 minWidth="173.4px"
                 textTransform="uppercase"
                 fontSize="13px"
-                variant="default"
+                variant="primary"
                 onClick={() => {
                   setOpenAttendanceTakenWarn(false);
                   updateCohortDay();
                 }}
-                rightIcon={<Icon icon="longArrowRight" width="15px" color={checked.length < 1 ? 'black' : 'white'} />}
+                rightIcon={<Icon icon="longArrowRight" width="15px" color={checked.length < 1 ? 'disabled' : 'primary'} />}
               >
                 {t('attendance-modal.apply-changes')}
               </Button>

src/common/components/Button.jsx

@@ -3,25 +3,86 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-function Button({ to, onClick, children, ...rest }) {
+function Button({ to, onClick, children, variant = 'primary', disabled = false, hasLoading = true, ...rest }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const existsHash = to.includes('#');
-
   const clickHandler = () => {
-    if (!existsHash) {
+    if (!existsHash && hasLoading) {
       setIsLoading(true);
     }
     if (to) {
       router.push(to);
     } else {
-      setIsLoading(true);
+      if (hasLoading) {
+        setIsLoading(true);
+      }
       onClick();
     }
   };
 
+  const variants = {
+    primary: {
+      background: '#0097CF',
+      color: 'white',
+      borderRadius: '4px',
+      hover: { background: '#02A9EA', color: 'white' },
+      disabled: { background: '#DADADA', color: 'white', cursor: 'not-allowed' },
+      active: { background: '#0084FF', color: 'white' },
+    },
+    success: {
+      background: '#25BF6C',
+      color: 'white',
+      borderRadius: '4px',
+      hover: { background: '#2CE883', color: 'white' },
+      disabled: { background: '#A9A9A9', color: 'white', cursor: 'not-allowed' },
+      active: { background: '#06AB52', color: 'white' },
+    },
+    outline: {
+      background: '#FFFFFF',
+      color: '#0097CF',
+      borderColor: '#0097CF',
+      borderRadius: '4px',
+      hover: { background: '#EEF9FE', color: '#02A9EA', borderColor: '#02A9EA' },
+      disabled: { background: '#F9F9F9', color: '#DADADA', borderColor: '#F9F9F9', cursor: 'not-allowed' },
+      active: { background: '#EEF9FE', color: '#0084FF', borderColor: '#0084FF' },
+    },
+    ghost: {
+      background: 'transparent',
+      color: '#0097CF',
+      borderRadius: '4px',
+      hover: { background: '#FFFFFF', color: '#02A9EA' },
+      disabled: { background: 'transparent', color: '#DADADA', cursor: 'not-allowed' },
+      active: { background: '#EEF9FE', color: '#0084FF' },
+    },
+    outlineWhite: {
+      background: '#FFFFFF',
+      color: '#000000',
+      borderColor: 'transparent',
+      borderRadius: '4px',
+      disabled: { background: 'transparent', color: '#DADADA', cursor: 'not-allowed' },
+    },
+    unstyled: {},
+  };
+
+  const customStyles = variants[variant] || {};
+
   return (
-    <ChakraButton isLoading={isLoading} onClick={clickHandler} {...rest}>
+    <ChakraButton
+      isLoading={isLoading}
+      onClick={clickHandler}
+      borderRadius={customStyles.borderRadius}
+      _hover={customStyles.hover}
+      _active={customStyles.active}
+      _disabled={customStyles.disabled}
+      backgroundColor={customStyles.background}
+      color={customStyles.color}
+      border={variant === 'outline' ? '1px solid' : undefined}
+      borderColor={customStyles.borderColor}
+      isDisabled={disabled}
+      variant={variant === 'unstyled' ? 'unstyled' : undefined}
+      {...rest}
+    >
       {children}
     </ChakraButton>
   );
@@ -31,10 +92,16 @@ Button.propTypes = {
   to: PropTypes.string,
   onClick: PropTypes.func,
   children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['primary', 'success', 'outline', 'ghost', 'unstyled']),
+  disabled: PropTypes.bool,
+  hasLoading: PropTypes.bool,
 };
 Button.defaultProps = {
   to: '',
   onClick: () => {},
+  variant: 'primary',
+  disabled: false,
+  hasLoading: true,
 };
 
 export default Button;

src/common/components/CallToAction.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Box, Heading, Button, Image,
+  Box, Heading, Button as ChakraButton, Image,
   Popover,
   PopoverTrigger,
   PopoverContent,
@@ -12,6 +12,7 @@ import {
 import PropTypes from 'prop-types';
 import Text from './Text';
 import Icon from './Icon';
+import Button from './Button';
 
 function CallToAction({
   background, imageSrc, icon, href, styleContainer, isExternalLink, title, text,
@@ -87,7 +88,7 @@ function CallToAction({
           {...buttonsContainerStyles}
         >
           {buttonText && !buttonsData?.length > 0 && (
-            <Button width="max-content" isLoading={isLoading} whiteSpace="wrap" as="a" style={buttonStyle} href={href} target={isExternalLink ? '_blank' : '_self'} padding="0.5rem 1rem" height="auto" marginY="auto" textTransform="uppercase" borderColor="white" color="white" variant="outline" onClick={onClick}>
+            <Button width="max-content" isLoading={isLoading} whiteSpace="wrap" as="a" border="1px solid" href={href} target={isExternalLink ? '_blank' : '_self'} padding="0.5rem 1rem" height="auto" marginY="auto" textTransform="uppercase" borderColor="white" variant="primary" onClick={onClick}>
               {buttonText}
             </Button>
           )}
@@ -97,7 +98,7 @@ function CallToAction({
 
             if (isButton) {
               return (
-                <Button
+                <ChakraButton
                   style={buttonStyle}
                   isLoading={isLoading}
                   target={element.isExternalLink ? '_blank' : '_self'}
@@ -111,15 +112,15 @@ function CallToAction({
                   width="max-content"
                 >
                   {element.text}
-                </Button>
+                </ChakraButton>
               );
             }
 
             if (isDropdown) {
               return (
                 <Popover>
                   <PopoverTrigger>
-                    <Button width="max-content" variant="default" textTransform="uppercase" background="blue.400">{element?.text}</Button>
+                    <ChakraButton width="max-content" variant="default" textTransform="uppercase" background="blue.400">{element?.text}</ChakraButton>
                   </PopoverTrigger>
                   <PopoverContent width="min-content">
                     <PopoverArrow />
@@ -132,7 +133,7 @@ function CallToAction({
                         style={{ margin: 0 }}
                       />
                       {element?.links?.length > 0 && element.links.map((link) => (
-                        <Button
+                        <ChakraButton
                           key={link.text}
                           as="a"
                           display="flex"
@@ -154,7 +155,7 @@ function CallToAction({
                         >
                           {link.title}
                           <Icon color="currentColor" icon="longArrowRight" />
-                        </Button>
+                        </ChakraButton>
                       ))}
                     </PopoverBody>
                   </PopoverContent>
@@ -163,7 +164,7 @@ function CallToAction({
             }
 
             return (
-              <Button
+              <ChakraButton
                 style={buttonStyle}
                 key={element.text}
                 as="a"
@@ -179,7 +180,7 @@ function CallToAction({
                 variant="outline"
               >
                 {element.text}
-              </Button>
+              </ChakraButton>
             );
           })}
         </Box>

src/common/components/FinalProject/Form.jsx

@@ -1,4 +1,4 @@
-import { Button, Flex, useToast, Box, Image } from '@chakra-ui/react';
+import { Flex, useToast, Box, Image } from '@chakra-ui/react';
 import { Form, Formik } from 'formik';
 import PropTypes from 'prop-types';
 import useTranslation from 'next-translate/useTranslation';
@@ -13,6 +13,7 @@ import useStyle from '../../hooks/useStyle';
 import { isNumber } from '../../../utils';
 import useFinalProjectProps from '../../store/actions/finalProjectAction';
 import Icon from '../Icon';
+import Button from '../Button';
 
 function FinalProjectForm({ cohortData, studentsData, handleClose, defaultValues, refreshFinalProject }) {
   const { t } = useTranslation('final-project');
@@ -334,7 +335,7 @@ function FinalProjectForm({ cohortData, studentsData, handleClose, defaultValues
               />
               <Button
                 type="submit"
-                variant="default"
+                variant="primary"
                 isLoading={isSubmitting}
               >
                 {t('common:submit-project')}

src/common/components/FinalProject/Modal.jsx

@@ -1,11 +1,12 @@
-import { Box, Button, Flex, Image, Modal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react';
+import { Box, Flex, Image, Modal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react';
 import useTranslation from 'next-translate/useTranslation';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import useStyle from '../../hooks/useStyle';
 import Heading from '../Heading';
 import Text from '../Text';
 import FinalProjectForm from './Form';
+import Button from '../Button';
 
 function FinalProjectModal({ isOpen, cohortData, studentsData, closeModal, closeOnOverlayClick }) {
   const { t } = useTranslation('final-project');
@@ -41,7 +42,7 @@ function FinalProjectModal({ isOpen, cohortData, studentsData, closeModal, close
                 ))}
               </Flex>
               <Button
-                variant="default"
+                variant="primary"
                 width="fit-content"
                 margin="auto 0 0 0"
                 padding="0 1.8rem"

src/common/components/FinalProject/index.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-unsafe-optional-chaining */
-import { Box, Button, Link, Modal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react';
+import { Box, Button as ChakraButton, Link, Modal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
@@ -14,6 +14,7 @@ import bc from '../../services/breathecode';
 import FinalProjectForm from './Form';
 import useStyle from '../../hooks/useStyle';
 import useFinalProjectProps from '../../store/actions/finalProjectAction';
+import Button from '../Button';
 
 function FinalProject({ storyConfig, studentAndTeachers, tasks, isStudent }) {
   const { t } = useTranslation('final-project');
@@ -24,7 +25,7 @@ function FinalProject({ storyConfig, studentAndTeachers, tasks, isStudent }) {
   const { cohortSession } = state;
 
   const router = useRouter();
-  const { modal, hexColor } = useStyle();
+  const { modal } = useStyle();
   const { finalProjectData, setFinalProjectData } = useFinalProjectProps();
   const storyConfigExists = Object.keys(storyConfig).length > 0;
   const repoUrl = finalProjectData?.repo_url || finalProject?.currentProject?.repo_url;
@@ -132,7 +133,7 @@ function FinalProject({ storyConfig, studentAndTeachers, tasks, isStudent }) {
           <Box display="flex" flexDirection="column" gridGap="20px" padding="0 24px" mt="2rem">
             {isStudent ? (
               <>
-                <Button
+                <ChakraButton
                   display="flex"
                   height="45px"
                   gridGap="10px"
@@ -149,7 +150,7 @@ function FinalProject({ storyConfig, studentAndTeachers, tasks, isStudent }) {
                   {repoUrl
                     ? t('edit-final-project')
                     : t('add-final-project')}
-                </Button>
+                </ChakraButton>
                 <Box display="flex" flexDirection="column" gridGap="10px" borderColor="white" border="1px solid" padding="10px 22px" borderRadius="4px">
                   <Text size="l" fontWeight={700}>
                     {progressPercent === 100
@@ -176,9 +177,8 @@ function FinalProject({ storyConfig, studentAndTeachers, tasks, isStudent }) {
                 onClick={() => {
                   window.open(`/cohort/${cohortSlug}/assignments?academy=${cohortSession?.academy?.id}&view=2`, '_blank');
                 }}
-                variant="unstyled"
-                background={hexColor.blueDefault}
-                color="white"
+                hasLoading={false}
+                variant="primary"
                 padding="0 27px"
                 whiteSpace="normal"
               >