Merge pull request #1771 from gustavomm19/fixes

Fixes
breatheco-de · Jan 14, 2025 · 8448d9a · 8448d9a
2 parents a7651d8 + 71f8d0e
commit 8448d9a
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 68 deletions.
diff --git a/public/locales/en/dashboard.json b/public/locales/en/dashboard.json
@@ -44,7 +44,7 @@
   },
   "saasCohortcallToAction": {
     "title": "Last worked module",
-    "buttonText": "Retake where you left"
+    "buttonText": "Continue where you left"
   },
   "cohortSideBar": {
     "title": "About your cohort",
@@ -122,7 +122,7 @@
     "how-to-deliver-text": "Please submit a Github URL that points to your project as a Github repository. <a class='link' target='blank' href='{{link}}'>How to deliver projects</a>",
     "handler-text": "Deliver assignment",
     "mandatory-message": "It looks like you need to complete at least {{count}} open projects before you can earn you certificate",
-    "deliver-confirm": "I confirm that this submission is entirely my own work, and I understand the consequences of violating the academy terms and conditions.",
+    "deliver-confirm": "I confirm that this submission is entirely my own work, and I understand the consequences of violating the terms and conditions.",
     "see-mandatory-projects": " See mandatory projects",
     "file-upload": "Upload one or more files with no more than 10MB in the following formats: ",
     "error-file-format": "File format is not correct.",
@@ -205,4 +205,4 @@
     "title": "Welcome to 4Geeks!",
     "description": "Watch this short video that explains how to get the most out of 4Geeks and enhance your learning experience"
   }
-}
+}
diff --git a/public/locales/en/exercises.json b/public/locales/en/exercises.json
@@ -12,9 +12,9 @@
   "created": "Created by:",
   "description": "Choose one of the following tutorials and learn with step-by-step interactive tutorials, instant grading, and get help from <a class=\"link\" href='https://4geeks.com/rigobot'>Rigobot</a>; Our internally developed AI for learning technical skills",
   "backToExercises": "Back to Exercises",
-  "direct-access-interactive": "Sign up and get access to interactive tutorial",
-  "direct-access-solution": "Sign up and get access to solution files and videos",
-  "direct-access-similar": "Signup and get access to similar projects",
+  "direct-access-interactive": "Sign up and get access to this free interactive tutorial",
+  "direct-access-solution": "Sign up and get access to solution files and videos for free",
+  "direct-access-similar": "Signup and get access to this project for free",
   "thanks": "Thanks!",
   "register": "Register to 4Geeks",
   "create-account": "Create account",

diff --git a/public/locales/es/dashboard.json b/public/locales/es/dashboard.json
@@ -123,7 +123,7 @@
     "how-to-deliver-text": "Envíe una URL de Github que apunte a su proyecto como un repositorio de Github. <a class='link' target='blank' href='{{link}}'>Cómo entregar proyectos</a>",
     "handler-text": "Entregar proyecto",
     "mandatory-message": "Parece que necesitas completar al menos {{count}} proyectos abiertos antes de poder obtener tu certificado.",
-    "deliver-confirm": "Confirmo que esta entrega es completamente mi propio trabajo y entiendo las consecuencias de violar los términos y condiciones de la academia.",
+    "deliver-confirm": "Confirmo que esta entrega es completamente mi propio trabajo y entiendo las consecuencias de violar los términos y condiciones.",
     "see-mandatory-projects": " Ver proyectos obligatorios",
     "file-upload": "Sube uno o más archivos con un máximo de 10 MB en los siguientes formatos: ",
     "error-file-format": "El formato de archivo es incorrecto.",

diff --git a/public/locales/es/exercises.json b/public/locales/es/exercises.json
@@ -12,9 +12,9 @@
   "created": "Creado por:",
   "description": "Los siguientes ejercicios explican conceptos diferentes de programación y han sido publicados por miembros de BreatheCode, ahora 4Geeks, busca un ejercicio usando los filtros",
   "backToExercises": "Volver a ejercicios",
-  "direct-access-interactive": "Regístrate para obtener acceso al tutorial interactivo",
-  "direct-access-solution": "Regístrate para obtener acceso a archivos y video de la solución",
-  "direct-access-similar": "Regístrate para obtener acceso a proyectos similares",
+  "direct-access-interactive": "Regístrate para obtener acceso gratis al tutorial interactivo",
+  "direct-access-solution": "Regístrate para obtener acceso gratis a archivos y video de la solución",
+  "direct-access-similar": "Regístrate para obtener acceso gratis a este proyecto",
   "thanks": "¡Gracias!",
   "register": "Regístrate en 4Geeks",
   "create-account": "Crear cuenta",

diff --git a/src/js_modules/syllabus/ProjectBoardGuidedExperience.jsx b/src/js_modules/syllabus/ProjectBoardGuidedExperience.jsx
@@ -20,6 +20,7 @@ function ProjectHeading({ currentAsset, isDelivered, handleStartLearnpack }) {
 
   const title = currentAsset?.title;
   const assetType = currentAsset?.asset_type;
+  const includesVideo = currentAsset?.intro_video_url;
   const assetTypeIcons = {
     LESSON: 'book',
     EXERCISE: 'strength',
@@ -44,22 +45,22 @@ function ProjectHeading({ currentAsset, isDelivered, handleStartLearnpack }) {
         flexDirection={{ base: 'column', sm: isDelivered ? 'column' : 'row' }}
       >
         <Box display="flex" flexDirection="column" gap="16px" width="100%">
-          <Box display="flex" flexDirection="column" justifyContent="space-between" height="100%" gap="20px">
+          <Box display="flex" flexDirection={includesVideo ? 'column' : 'row'} flexWrap={!includesVideo && 'wrap'} justifyContent="space-between" height="100%" gap="20px">
             <Box>
-              <Box mb="16px" display="flex" gridGap="16px" alignItems="center">
+              <Box mb={includesVideo && '16px'} display="flex" gridGap="16px" alignItems="center" height={!includesVideo && '100%'}>
                 <Icon icon={assetTypeIcons[assetType] || 'book'} height="30px" color={hexColor.blueDefault} width="28px" style={{ margin: 'auto', marginRight: '0.4rem' }} />
                 <Heading style={{ fontWeight: '400' }} size="sm" display="inline-flex" gridGap="10px" margin="0 0 0 0 !important">
                   {title}
                 </Heading>
               </Box>
-              {currentAsset?.description && (
+              {currentAsset?.description && includesVideo && (
                 <Text style={{ margin: '0px' }} size="l">
                   {currentAsset.description}
                 </Text>
               )}
             </Box>
             <Box>
-              <ProjectInstructions variant="small" currentAsset={currentAsset} handleStartLearnpack={handleStartLearnpack} />
+              <ProjectInstructions variant={includesVideo ? 'small' : 'extra-small'} currentAsset={currentAsset} handleStartLearnpack={handleStartLearnpack} />
             </Box>
           </Box>
         </Box>
@@ -124,7 +125,6 @@ function ProjectBoardGuidedExperience({ currentAsset, handleStartLearnpack }) {
         gap="20px"
         mb={isDelivered && '1.5rem'}
         flexDirection={{ base: 'column', md: 'row' }}
-      // margin={{ base: '0px -10px', md: '0px -2rem' }}
       >
         <Box display="flex" flexDirection="column" gap="20px" width="100%">
           <ProjectHeading currentAsset={currentAsset} isDelivered={isDelivered} handleStartLearnpack={handleStartLearnpack} />

diff --git a/src/js_modules/syllabus/ProjectInstructions.jsx b/src/js_modules/syllabus/ProjectInstructions.jsx
@@ -91,6 +91,7 @@ function ButtonsHandler({ currentAsset, setShowCloneModal, vendors, handleStartL
 
   const showProvisioningLinks = vendors.length > 0 && currentAsset?.gitpod && !cohortSession.available_as_saas;
   const isExternalExercise = currentAsset.external && currentAsset.asset_type === 'EXERCISE';
+  const canSeeInstructions = variant !== 'small' || variant !== 'extra-small';
 
   if (isExternalExercise) {
     return (
@@ -123,9 +124,11 @@ function ButtonsHandler({ currentAsset, setShowCloneModal, vendors, handleStartL
           padding="4px 8px"
           fontSize="14px"
           fontWeight="500"
-          background="gray.200"
-          color="blue.default"
-          display={!isForOpenLocaly && variant !== 'small' && 'none'}
+          background={variant === 'extra-small' ? 'none' : 'gray.200'}
+          color={variant === 'extra-small' ? 'white' : 'blue.default'}
+          _hover={variant === 'extra-small' && 'none'}
+          _active={variant === 'extra-small' && 'none'}
+          display={!isForOpenLocaly && !canSeeInstructions && 'none'}
           onClick={() => {
             if (isForOpenLocaly) setShowCloneModal(true);
             else scrollToMarkdown();
@@ -171,6 +174,37 @@ function ProjectInstructions({ currentAsset, variant, handleStartLearnpack }) {
 
   const startWithLearnpack = learnpackDeployUrl && cohortSession.available_as_saas && !noLearnpackIncluded.includes(currentAsset.slug);
 
+  if (variant === 'extra-small') {
+    return (
+      <Box background="blue.default" padding="8px" borderRadius="8px" display={!startWithLearnpack && !isForOpenLocaly ? 'none' : 'flex'} alignItems="center" gap="10px">
+        {(!isForOpenLocaly || startWithLearnpack) && (
+          <Icon icon="learnpack" />
+        )}
+        <Box>
+          <Box
+            display="flex"
+            gap="10px"
+            flexDirection={{
+              base: 'column',
+              md: 'row',
+            }}
+          >
+            <ButtonsHandler
+              currentAsset={currentAsset}
+              handleStartLearnpack={handleStartLearnpack}
+              setShowCloneModal={setShowCloneModal}
+              vendors={vendors}
+              isForOpenLocaly={isForOpenLocaly}
+              startWithLearnpack={startWithLearnpack}
+              variant={variant}
+            />
+          </Box>
+        </Box>
+        <ModalToCloneProject currentAsset={currentAsset} isOpen={showCloneModal} onClose={setShowCloneModal} />
+      </Box>
+    );
+  }
+
   if (variant === 'small') {
     return (
       <>

diff --git a/src/pages/how-to/[slug]/index.jsx b/src/pages/how-to/[slug]/index.jsx
@@ -20,6 +20,7 @@ import GridContainer from '../../../common/components/GridContainer';
 import MktSideRecommendations from '../../../common/components/MktSideRecommendations';
 import { cleanObject } from '../../../utils/index';
 import { ORIGIN_HOST, categoriesFor } from '../../../utils/variables';
+import useAuth from '../../../common/hooks/useAuth';
 import useStyle from '../../../common/hooks/useStyle';
 import RelatedContent from '../../../common/components/RelatedContent';
 import MktEventCards from '../../../common/components/MktEventCards';
@@ -151,6 +152,7 @@ export const getStaticProps = async ({ params, locale, locales }) => {
 
 export default function HowToSlug({ data, markdown }) {
   const { t, lang } = useTranslation('how-to');
+  const { isAuthenticated } = useAuth();
   const [neverLoaded, setNeverLoaded] = useState(false);
   const title = data?.title || '';
   const author = data?.author || '';
@@ -222,13 +224,14 @@ export default function HowToSlug({ data, markdown }) {
               gap="10px"
               paddingX="0"
             />
-            <Box display={{ base: 'flex', md: 'block' }} margin={{ base: '0 0 1rem 0', md: '0px' }} width={{ base: '100%', md: '172px' }} height="auto" top="0px" right="32px" background={featuredLight} borderRadius="4px" color={fontColor}>
-              <Link display="flex" target="_blank" rel="noopener noreferrer" width="100%" gridGap="8px" padding={{ base: '8px 12px', md: '8px' }} background="transparent" href={data?.readme_url} _hover={{ opacity: 0.7 }} style={{ color: fontColor, textDecoration: 'none' }}>
-                <Icon icon="pencil" color="#A0AEC0" width="20px" height="20px" />
-                {t('common:edit-on-github')}
-              </Link>
-
-            </Box>
+            {isAuthenticated && (
+              <Box display={{ base: 'flex', md: 'block' }} margin={{ base: '0 0 1rem 0', md: '0px' }} width={{ base: '100%', md: '172px' }} height="auto" top="0px" right="32px" background={featuredLight} borderRadius="4px" color={fontColor}>
+                <Link display="flex" target="_blank" rel="noopener noreferrer" width="100%" gridGap="8px" padding={{ base: '8px 12px', md: '8px' }} background="transparent" href={data?.readme_url} _hover={{ opacity: 0.7 }} style={{ color: fontColor, textDecoration: 'none' }}>
+                  <Icon icon="pencil" color="#A0AEC0" width="20px" height="20px" />
+                  {t('common:edit-on-github')}
+                </Link>
+              </Box>
+            )}
           </Box>
           {title ? (
             <Heading size="l" as="h1" fontWeight="700">

diff --git a/src/pages/interactive-coding-tutorial/[slug].jsx b/src/pages/interactive-coding-tutorial/[slug].jsx
@@ -9,7 +9,9 @@ import Head from 'next/head';
 import Heading from '../../common/components/Heading';
 import Link from '../../common/components/NextChakraLink';
 import Text from '../../common/components/Text';
+import Icon from '../../common/components/Icon';
 import useAuth from '../../common/hooks/useAuth';
+import useStyle from '../../common/hooks/useStyle';
 import FixedBottomCta from '../../js_modules/projects/FixedBottomCta';
 import SimpleTable from '../../js_modules/projects/SimpleTable';
 import TabletWithForm from '../../js_modules/projects/TabletWithForm';
@@ -195,6 +197,7 @@ function TableInfo({ t, project, commonTextColor }) {
 function ProjectSlug({ project, markdown }) {
   const { t } = useTranslation('projects');
   const { isAuthenticated } = useAuth();
+  const { fontColor, featuredLight } = useStyle();
   const [isCtaVisible, setIsCtaVisible] = useState(true);
   const markdownData = markdown ? getMarkDownContent(markdown) : '';
   const { colorMode } = useColorMode();
@@ -257,18 +260,28 @@ function ProjectSlug({ project, markdown }) {
         // display={{ base: 'block', sm: 'grid' }}
       >
         <Flex display={{ base: 'block', lg: 'flex' }} gridColumn={{ base: '2 / span 10', lg: '2 / span 7' }} height="100%" gridGap="26px">
-          <Box flex="1" width="-webkit-fill-available">
-            <Link
-              margin="3rem 0 32px 0"
-              href="/interactive-coding-tutorials"
-              color={useColorModeValue('blue.default', 'blue.300')}
-              display="inline-block"
-              letterSpacing="0.05em"
-              width="fit-content"
-              fontWeight="700"
-            >
-              {`← ${t('projects:backToProjects')}`}
-            </Link>
+          <Box width="-webkit-fill-available">
+            <Box display={{ base: 'block', md: 'flex' }} justifyContent="space-between" alignItems="center">
+              <Link
+                margin="3rem 0 32px 0"
+                href="/interactive-coding-tutorials"
+                color={useColorModeValue('blue.default', 'blue.300')}
+                display="inline-block"
+                letterSpacing="0.05em"
+                width="fit-content"
+                fontWeight="700"
+              >
+                {`← ${t('projects:backToProjects')}`}
+              </Link>
+              {isAuthenticated && project?.readme_url && (
+                <Box height="fit-content" width="172px" background={featuredLight} borderRadius="4px">
+                  <Link display="flex" target="_blank" rel="noopener noreferrer" gridGap="8px" padding={{ base: '8px 12px', md: '8px' }} background="transparent" href={project.readme_url} textDecoration="none" _hover={{ opacity: 0.7 }} color={fontColor}>
+                    <Icon icon="pencil" color="#A0AEC0" width="20px" height="20px" />
+                    {t('common:edit-on-github')}
+                  </Link>
+                </Box>
+              )}
+            </Box>
             {project?.title ? (
               <Heading
                 as="h1"

diff --git a/src/pages/interactive-exercise/[slug]/index.jsx b/src/pages/interactive-exercise/[slug]/index.jsx
@@ -169,7 +169,7 @@ function Exercise({ exercise, markdown }) {
   const { colorMode } = useColorMode();
   const tabletWithFormRef = useRef(null);
   const bullets = t('exercises:bullets', {}, { returnObjects: true });
-  const { hexColor } = useStyle();
+  const { hexColor, fontColor, featuredLight } = useStyle();
 
   const getElementTopOffset = (elem) => {
     if (elem && isWindow) {
@@ -232,29 +232,41 @@ function Exercise({ exercise, markdown }) {
           position="relative"
         >
           <Flex flexDirection="column" gridColumn={{ base: '2 / span 6', lg: '2 / span 7' }}>
-            <Link
-              href="/interactive-exercises"
-              color={useColorModeValue('blue.default', 'blue.300')}
-              display="inline-block"
-              letterSpacing="0.05em"
-              fontWeight="700"
-              paddingBottom="10px"
-              width="fit-content"
-            >
-              {`← ${t('exercises:backToExercises')}`}
-            </Link>
-            <TagCapsule
-              isLink
-              variant="rounded"
-              tags={exercise?.technologies}
-              marginY="8px"
-              style={{
-                padding: '2px 10px',
-                margin: '0',
-              }}
-              gap="10px"
-              paddingX="0"
-            />
+            <Box display={{ base: 'block', md: 'flex' }} justifyContent="space-between" alignItems="center">
+              <Box>
+                <Link
+                  href="/interactive-exercises"
+                  color={useColorModeValue('blue.default', 'blue.300')}
+                  display="inline-block"
+                  letterSpacing="0.05em"
+                  fontWeight="700"
+                  paddingBottom="10px"
+                  width="fit-content"
+                >
+                  {`← ${t('exercises:backToExercises')}`}
+                </Link>
+                <TagCapsule
+                  isLink
+                  variant="rounded"
+                  tags={exercise?.technologies}
+                  marginY="8px"
+                  style={{
+                    padding: '2px 10px',
+                    margin: '0',
+                  }}
+                  gap="10px"
+                  paddingX="0"
+                />
+              </Box>
+              {isAuthenticated && exercise?.readme_url && (
+                <Box height="fit-content" width="172px" background={featuredLight} borderRadius="4px">
+                  <Link display="flex" target="_blank" rel="noopener noreferrer" gridGap="8px" padding={{ base: '8px 12px', md: '8px' }} background="transparent" href={exercise.readme_url} textDecoration="none" _hover={{ opacity: 0.7 }} color={fontColor}>
+                    <Icon icon="pencil" color="#A0AEC0" width="20px" height="20px" />
+                    {t('common:edit-on-github')}
+                  </Link>
+                </Box>
+              )}
+            </Box>
             {exercise?.title ? (
               <Heading
                 as="h1"