refactor(client): Replace <Fragment> tags to <> (#42796)

* refactor(40115): Replace <Fragment> tags to <>

client/src/assets/icons/API-icon.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function APIIcon(
@@ -7,12 +7,12 @@ function APIIcon(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.api')}</span>
       <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 208v96a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 304v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/D3-icon.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function D3Icon(
@@ -7,7 +7,7 @@ function D3Icon(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.d3')}</span>
       <svg
         viewBox='-10 -10 116 111'
@@ -16,7 +16,7 @@ function D3Icon(
       >
         <path d='M0 0h7.75a45.5 45.5 0 110 91H0V71h7.75a25.5 25.5 0 100-51H0zm36.251 0h32a27.75 27.75 0 0121.331 45.5A27.75 27.75 0 0168.251 91h-32a53.69 53.69 0 0018.746-20H68.25a7.75 7.75 0 100-15.5H60.5a53.69 53.69 0 000-20h7.75a7.75 7.75 0 100-15.5H54.997A53.69 53.69 0 0036.251 0z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/JavaScript-icon.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function JavaScriptIcon(
@@ -7,12 +7,12 @@ function JavaScriptIcon(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.javascript')}</span>
       <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/React-icon.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function ReactIcon(
@@ -7,12 +7,12 @@ function ReactIcon(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.react')}</span>
       <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/Tensorflow-icon.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function TensorflowIcon(
@@ -7,12 +7,12 @@ function TensorflowIcon(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.tensorflow')}</span>
       <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M1.292 5.856L11.54 0v24l-4.095-2.378V7.603l-6.168 3.564.015-5.31zm21.43 5.311l-.014-5.31L12.46 0v24l4.095-2.378V14.87l3.092 1.788-.018-4.618-3.074-1.756V7.603l6.168 3.564z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/algorithm.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function Algorithm(
@@ -7,12 +7,12 @@ function Algorithm(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.algorithm')}</span>
       <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M568 368c-19.1 0-36.3 7.6-49.2 19.7L440.6 343c4.5-12.2 7.4-25.2 7.4-39 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-32.2-69c15-13.2 24.6-32.3 24.6-53.8 0-39.8-32.2-72-72-72s-72 32.2-72 72 32.2 72 72 72c.9 0 1.8-.2 2.7-.3l33.5 71.7C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 30.7 0 58.6-12.4 78.8-32.5l82.2 47c-.4 3.1-1 6.3-1 9.5 0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72zM232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm104 272c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm-54.4-261.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM152 320h48v-32h-48v32zm-88-80c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/analytics.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function Analytics(
@@ -7,12 +7,12 @@ function Analytics(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.analytics')}</span>
       <svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M510.62 92.63C516.03 94.74 521.85 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 2.43.37 4.76.71 7.09l-95.34 76.27c-5.4-2.11-11.23-3.37-17.38-3.37s-11.97 1.26-17.38 3.37L255.29 55.1c.35-2.33.71-4.67.71-7.1 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 4.27.74 8.34 1.78 12.28l-101.5 101.5C56.34 160.74 52.27 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-4.27-.74-8.34-1.78-12.28l101.5-101.5C199.66 95.26 203.73 96 208 96c6.15 0 11.97-1.26 17.38-3.37l95.34 76.27c-.35 2.33-.71 4.67-.71 7.1 0 26.51 21.49 48 48 48s48-21.49 48-48c0-2.43-.37-4.76-.71-7.09l95.32-76.28zM400 320h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm160-128h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-320 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zM80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/clipboard.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function Clipboard(
@@ -7,12 +7,12 @@ function Clipboard(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.clipboard')}</span>
       <svg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M126.2 286.4l64.2-63.6c2.1-2.1 2.1-5.5 0-7.6l-12.6-12.7c-2.1-2.1-5.5-2.1-7.6 0l-47.6 47.2-20.6-20.9c-2.1-2.1-5.5-2.1-7.6 0l-12.7 12.6c-2.1 2.1-2.1 5.5 0 7.6l37.1 37.4c1.9 2.1 5.3 2.1 7.4 0zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336zM112 328c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm168-88h-63.3c-1.3 1.8-2.1 3.9-3.7 5.5L186.2 272H280c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/cup.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function Cup(
@@ -7,7 +7,7 @@ function Cup(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.gold-cup')}</span>
       <svg
         height={200}
@@ -51,7 +51,7 @@ function Cup(
           </g>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/donate-with-PayPal.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function DonateWithPayPal(
@@ -7,7 +7,7 @@ function DonateWithPayPal(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.donate')}</span>
       <svg
         height={31}
@@ -50,7 +50,7 @@ function DonateWithPayPal(
           </text>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/green-not-completed.tsx

@@ -7,7 +7,7 @@ function GreenNotCompleted(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.not-passed')}</span>
       <svg
         height='50'
@@ -29,7 +29,7 @@ function GreenNotCompleted(
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/green-pass.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function GreenPass(
@@ -7,7 +7,7 @@ function GreenPass(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.passed')}</span>
       <svg
         height='50'
@@ -48,7 +48,7 @@ function GreenPass(
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/heart.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function Heart(
@@ -7,7 +7,7 @@ function Heart(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.heart')}</span>
       <svg
         height={184}
@@ -31,7 +31,7 @@ function Heart(
           </g>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/intro-information.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function IntroInformation(
@@ -7,7 +7,7 @@ function IntroInformation(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.info')}</span>
       <svg
         height='50'
@@ -38,7 +38,7 @@ function IntroInformation(
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/python-icon.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function PythonIcon(
@@ -7,12 +7,12 @@ function PythonIcon(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.python')}</span>
       <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/responsive-design.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function ResponsiveDesign(
@@ -7,12 +7,12 @@ function ResponsiveDesign(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.responsive-design')}</span>
       <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/shield.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function Shield(
@@ -7,12 +7,12 @@ function Shield(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.shield')}</span>
       <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M466.5 83.7l-192-80a48.15 48.15 0 00-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zm-47.2 114.2l-184 184c-6.2 6.2-16.4 6.2-22.6 0l-104-104c-6.2-6.2-6.2-16.4 0-22.6l22.6-22.6c6.2-6.2 16.4-6.2 22.6 0l70.1 70.1 150.1-150.1c6.2-6.2 16.4-6.2 22.6 0l22.6 22.6c6.3 6.3 6.3 16.4 0 22.6z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/spacer.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface SpacerPropTypes {
@@ -9,7 +9,7 @@ function Spacer(props: SpacerPropTypes): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.spacer')}</span>
       <svg
         className='tick'
@@ -24,7 +24,7 @@ function Spacer(props: SpacerPropTypes): JSX.Element {
           <rect fillOpacity='0' height='200' width='200' />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/toggle-check.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function ToggleCheck(
@@ -7,7 +7,7 @@ function ToggleCheck(
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.toggle')}</span>
       <svg
         className='tick'
@@ -57,7 +57,7 @@ function ToggleCheck(
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/client-only-routes/show-settings.tsx

@@ -129,7 +129,7 @@ export function ShowSettings(props: IShowSettingsProps): JSX.Element {
   }
 
   return (
-    <Fragment>
+    <>
       <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
       <Grid>
         <main>
@@ -197,7 +197,7 @@ export function ShowSettings(props: IShowSettingsProps): JSX.Element {
           <DangerZone />
         </main>
       </Grid>
-    </Fragment>
+    </>
   );
 }
 

client/src/client-only-routes/show-unsubscribed.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Grid, Panel, Button } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,7 @@ function ShowUnsubscribed({
 }): JSX.Element {
   const { t } = useTranslation();
   return (
-    <Fragment>
+    <>
       <Helmet>
         <title>{t('metaTags:youre-unsubscribed')} | freeCodeCamp.org</title>
       </Helmet>
@@ -45,7 +45,7 @@ function ShowUnsubscribed({
           <Spacer size={2} />
         </main>
       </Grid>
-    </Fragment>
+    </>
   );
 }
 

client/src/client-only-routes/show-user.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
@@ -120,7 +120,7 @@ class ShowUser extends Component<IShowUserProps> {
     const { textarea } = this.state;
     const placeholderText = t('report.details');
     return (
-      <Fragment>
+      <>
         <Helmet>
           <title>{t('report.portfolio')} | freeCodeCamp.org</title>
         </Helmet>
@@ -157,7 +157,7 @@ class ShowUser extends Component<IShowUserProps> {
             {/* eslint-disable @typescript-eslint/unbound-method */}
           </Col>
         </Row>
-      </Fragment>
+      </>
     );
   }
 }

client/src/components/Donation/assets/ApplePay.js

@@ -1,11 +1,11 @@
 /* eslint-disable max-len */
-import React, { Fragment } from 'react';
+import React from 'react';
 
 const propTypes = {};
 
 function ApplePay(props) {
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>Apple Pay Logo</span>
       <svg
         height={272}
@@ -32,7 +32,7 @@ function ApplePay(props) {
           </g>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/components/Donation/assets/GooglePay.js

@@ -1,11 +1,11 @@
 /* eslint-disable max-len */
-import React, { Fragment } from 'react';
+import React from 'react';
 
 const propTypes = {};
 
 function GooglePay(props) {
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>Google Pay Logo</span>
       <svg
         height={272}
@@ -63,7 +63,7 @@ function GooglePay(props) {
           </g>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/components/helpers/toggle-button.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   ToggleButtonGroup as BSBG,
   ToggleButton as TB
@@ -36,40 +36,38 @@ export default function ToggleButton({
     width: '20px'
   };
   return (
-    <Fragment>
+    <BSBG name={name} onChange={onChange} type='radio'>
-      <BSBG name={name} onChange={onChange} type='radio'>
+      <TB
-        <TB
+        bsSize='sm'
-          bsSize='sm'
+        bsStyle='primary'
-          bsStyle='primary'
+        className={`toggle-${getActiveClass(value)}`}
-          className={`toggle-${getActiveClass(value)}`}
+        disabled={value}
-          disabled={value}
+        type='radio'
-          type='radio'
+        value={1}
-          value={1}
+      >
-        >
+        {value ? (
-          {value ? (
+          <ToggleCheck style={checkIconStyle} />
-            <ToggleCheck style={checkIconStyle} />
+        ) : (
-          ) : (
+          <Spacer style={checkIconStyle} />
-            <Spacer style={checkIconStyle} />
+        )}
-          )}
+        {onLabel}
-          {onLabel}
+      </TB>
-        </TB>
+      <TB
-        <TB
+        bsSize='sm'
-          bsSize='sm'
+        bsStyle='primary'
-          bsStyle='primary'
+        className={`toggle-${getActiveClass(!value)}`}
-          className={`toggle-${getActiveClass(!value)}`}
+        disabled={!value}
-          disabled={!value}
+        type='radio'
-          type='radio'
+        value={2}
-          value={2}
+      >
-        >
+        {offLabel}
-          {offLabel}
+        {!value ? (
-          {!value ? (
+          <ToggleCheck style={checkIconStyle} />
-            <ToggleCheck style={checkIconStyle} />
+        ) : (
-          ) : (
+          <Spacer style={checkIconStyle} />
-            <Spacer style={checkIconStyle} />
+        )}
-          )}
+      </TB>
-        </TB>
+    </BSBG>
-      </BSBG>
-    </Fragment>
   );
 }
 

client/src/components/landing/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Grid } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
@@ -19,7 +19,7 @@ export const Landing = ({ page = 'landing' }) => {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <Helmet>
         <title>{t('metaTags:title')}</title>
       </Helmet>
@@ -35,7 +35,7 @@ export const Landing = ({ page = 'landing' }) => {
           <Certifications />
         </Grid>
       </main>
-    </Fragment>
+    </>
   );
 };
 

client/src/components/layouts/Certification.js

@@ -1,4 +1,4 @@
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
@@ -25,10 +25,10 @@ class CertificationLayout extends Component {
     const { children } = this.props;
 
     return (
-      <Fragment>
+      <>
         <Helmet bodyAttributes={{ class: 'light-palette' }} />
         {children}
-      </Fragment>
+      </>
     );
   }
 }

client/src/components/layouts/learn.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
@@ -83,7 +83,7 @@ class LearnLayout extends Component<LearnLayoutProps> {
     }
 
     return (
-      <Fragment>
+      <>
         <Helmet>
           <meta content='noindex' name='robots' />
         </Helmet>
@@ -91,7 +91,7 @@ class LearnLayout extends Component<LearnLayoutProps> {
         {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
         /* @ts-ignore  */}
         <DonateModal />
-      </Fragment>
+      </>
     );
   }
 }

client/src/components/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Grid, Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import { TFunction, useTranslation } from 'react-i18next';
@@ -58,7 +58,7 @@ function renderMessage(
   t: TFunction<'translation'>
 ): JSX.Element {
   return isSessionUser ? (
-    <Fragment>
+    <>
       <FullWidthRow>
         <h2 className='text-center'>{t('profile.you-not-public')}</h2>
       </FullWidthRow>
@@ -66,9 +66,9 @@ function renderMessage(
         <p className='alert alert-info'>{t('profile.you-change-privacy')}</p>
       </FullWidthRow>
       <Spacer />
-    </Fragment>
+    </>
   ) : (
-    <Fragment>
+    <>
       <FullWidthRow>
         <h2 className='text-center' style={{ overflowWrap: 'break-word' }}>
           {t('profile.username-not-public', { username: username })}
@@ -84,7 +84,7 @@ function renderMessage(
         <CurrentChallengeLink>{t('buttons.take-me')}</CurrentChallengeLink>
       </FullWidthRow>
       <Spacer />
-    </Fragment>
+    </>
   );
 }
 
@@ -124,7 +124,7 @@ function renderProfile(user: IProfileProps['user']): JSX.Element {
     isDonating
   } = user;
   return (
-    <Fragment>
+    <>
       <Camper
         about={showAbout ? about : ''}
         githubProfile={githubProfile}
@@ -152,7 +152,7 @@ function renderProfile(user: IProfileProps['user']): JSX.Element {
         <Timeline completedMap={completedChallenges} username={username} />
       ) : null}
       <Spacer />
-    </Fragment>
+    </>
   );
 }
 
@@ -164,7 +164,7 @@ function Profile({ user, isSessionUser }: IProfileProps): JSX.Element {
   } = user;
 
   return (
-    <Fragment>
+    <>
       <Helmet>
         <title>{t('buttons.profile')} | freeCodeCamp.org</title>
       </Helmet>
@@ -182,7 +182,7 @@ function Profile({ user, isSessionUser }: IProfileProps): JSX.Element {
         )}
         <Spacer />
       </Grid>
-    </Fragment>
+    </>
   );
 }
 

client/src/components/search/WithInstantSearch.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { Location } from '@reach/router';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -139,14 +139,14 @@ class InstantSearchRoot extends Component {
         {this.isSearchPage() ? (
           <Configure hitsPerPage={15} />
         ) : (
-          <Fragment>
+          <>
             <Media maxHeight={MAX_MOBILE_HEIGHT}>
               <Configure hitsPerPage={5} />
             </Media>
             <Media minHeight={MAX_MOBILE_HEIGHT + 1}>
               <Configure hitsPerPage={8} />
             </Media>
-          </Fragment>
+          </>
         )}
         {this.props.children}
       </InstantSearch>

client/src/components/settings/internet.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import {
@@ -190,7 +190,7 @@ class InternetSettings extends Component<InternetProps, InternetState> {
       this.getValidationStateFor(website);
 
     return (
-      <Fragment>
+      <>
         <SectionHeader>{t('settings.headings.internet')}</SectionHeader>
         <FullWidthRow>
           <form id='internet-presence' onSubmit={this.handleSubmit}>
@@ -255,7 +255,7 @@ class InternetSettings extends Component<InternetProps, InternetState> {
             />
           </form>
         </FullWidthRow>
-      </Fragment>
+      </>
     );
   }
 }

client/src/components/settings/portfolio.tsx

@@ -1,4 +1,4 @@
-import React, { Component, FormEvent, Fragment } from 'react';
+import React, { Component, FormEvent } from 'react';
 import { nanoid } from 'nanoid';
 import {
   Button,
@@ -303,11 +303,11 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
             </Button>
           </form>
           {index + 1 !== arr.length && (
-            <Fragment>
+            <>
               <Spacer />
               <hr />
               <Spacer />
-            </Fragment>
+            </>
           )}
         </FullWidthRow>
       </div>

client/src/components/settings/toggle-setting.tsx

@@ -31,7 +31,7 @@ export default function ToggleSetting({
   ...restProps
 }: ToggleSettingProps): JSX.Element {
   return (
-    <Fragment>
+    <>
       <div className='toggle-setting-container'>
         <FormGroup>
           <ControlLabel className='toggle-label' htmlFor={flagName}>
@@ -51,7 +51,7 @@ export default function ToggleSetting({
         </FormGroup>
       </div>
       <ButtonSpacer />
-    </Fragment>
+    </>
   );
 }
 

client/src/components/settings/username.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
@@ -203,31 +203,29 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
     const { isValidUsername, t, validating } = this.props;
 
     return (
-      <Fragment>
+      <form id='usernameSettings' onSubmit={this.handleSubmit}>
-        <form id='usernameSettings' onSubmit={this.handleSubmit}>
+        <FullWidthRow>
-          <FullWidthRow>
+          <FormGroup>
-            <FormGroup>
+            <ControlLabel htmlFor='username-settings'>
-              <ControlLabel htmlFor='username-settings'>
+              <strong>{t('settings.labels.username')}</strong>
-                <strong>{t('settings.labels.username')}</strong>
+            </ControlLabel>
-              </ControlLabel>
+            <FormControl
-              <FormControl
+              name='username-settings'
-                name='username-settings'
+              onChange={this.handleChange}
-                onChange={this.handleChange}
+              value={formValue}
-                value={formValue}
-              />
-            </FormGroup>
-          </FullWidthRow>
-          {!isFormPristine &&
-            this.renderAlerts(validating, error, isValidUsername)}
-          <FullWidthRow>
-            <BlockSaveButton
-              disabled={
-                !(isValidUsername && valid && !isFormPristine) || submitClicked
-              }
             />
-          </FullWidthRow>
+          </FormGroup>
-        </form>
+        </FullWidthRow>
-      </Fragment>
+        {!isFormPristine &&
+          this.renderAlerts(validating, error, isValidUsername)}
+        <FullWidthRow>
+          <BlockSaveButton
+            disabled={
+              !(isValidUsername && valid && !isFormPristine) || submitClicked
+            }
+          />
+        </FullWidthRow>
+      </form>
     );
   }
 }

client/src/resources/honesty-policy.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 const HonestyPolicy = (): JSX.Element => {
@@ -6,7 +6,7 @@ const HonestyPolicy = (): JSX.Element => {
   const email = 'team@freecodecamp.org';
 
   return (
-    <Fragment>
+    <>
       <p key={1}>{t('settings.honesty.p1')}</p>
       <p key={2}>{t('settings.honesty.p2')}</p>
       <p key={3}>{t('settings.honesty.p3')}</p>
@@ -19,7 +19,7 @@ const HonestyPolicy = (): JSX.Element => {
           <h1>test</h1>
         </Trans>
       </p>
-    </Fragment>
+    </>
   );
 };
 

client/src/templates/Challenges/classic/DesktopLayout.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import PropTypes from 'prop-types';
 import { first } from 'lodash-es';
@@ -83,82 +83,77 @@ class DesktopLayout extends Component {
       layoutState;
 
     return (
-      <Fragment>
+      <ReflexContainer className='desktop-layout' orientation='horizontal'>
-        <ReflexContainer className='desktop-layout' orientation='horizontal'>
+        {projectBasedChallenge && (
-          {projectBasedChallenge && (
+          <ActionRow switchDisplayTab={this.switchDisplayTab} {...this.state} />
-            <ActionRow
+        )}
-              switchDisplayTab={this.switchDisplayTab}
+        <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
-              {...this.state}
+          <ReflexContainer orientation='vertical'>
-            />
+            {!projectBasedChallenge && (
-          )}
-          <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
-            <ReflexContainer orientation='vertical'>
-              {!projectBasedChallenge && (
-                <ReflexElement
-                  flex={instructionPane.flex}
-                  name='instructionPane'
-                  {...resizeProps}
-                >
-                  {instructions}
-                </ReflexElement>
-              )}
-              {!projectBasedChallenge && (
-                <ReflexSplitter propagate={true} {...resizeProps} />
-              )}
-
               <ReflexElement
-                flex={editorPane.flex}
+                flex={instructionPane.flex}
-                name='editorPane'
+                name='instructionPane'
                 {...resizeProps}
               >
-                {challengeFile &&
+                {instructions}
-                  showUpcomingChanges &&
+              </ReflexElement>
-                  !hasEditableBoundries && <EditorTabs />}
+            )}
-                {challengeFile && (
+            {!projectBasedChallenge && (
-                  <ReflexContainer
+              <ReflexSplitter propagate={true} {...resizeProps} />
-                    key={challengeFile.key}
+            )}
-                    orientation='horizontal'
+
+            <ReflexElement
+              flex={editorPane.flex}
+              name='editorPane'
+              {...resizeProps}
+            >
+              {challengeFile &&
+                showUpcomingChanges &&
+                !hasEditableBoundries && <EditorTabs />}
+              {challengeFile && (
+                <ReflexContainer
+                  key={challengeFile.key}
+                  orientation='horizontal'
+                >
+                  <ReflexElement
+                    flex={codePane.flex}
+                    name='codePane'
+                    {...reflexProps}
+                    {...resizeProps}
                   >
+                    {editor}
+                  </ReflexElement>
+                  {isConsoleDisplayable && (
+                    <ReflexSplitter propagate={true} {...resizeProps} />
+                  )}
+                  {isConsoleDisplayable && (
                     <ReflexElement
-                      flex={codePane.flex}
+                      flex={testsPane.flex}
-                      name='codePane'
+                      name='testsPane'
                       {...reflexProps}
                       {...resizeProps}
                     >
-                      <Fragment>{editor}</Fragment>
+                      {testOutput}
                     </ReflexElement>
-                    {isConsoleDisplayable && (
+                  )}
-                      <ReflexSplitter propagate={true} {...resizeProps} />
+                </ReflexContainer>
-                    )}
+              )}
-                    {isConsoleDisplayable && (
+            </ReflexElement>
-                      <ReflexElement
+            {isPreviewDisplayable && (
-                        flex={testsPane.flex}
+              <ReflexSplitter propagate={true} {...resizeProps} />
-                        name='testsPane'
+            )}
-                        {...reflexProps}
+            {isPreviewDisplayable && (
-                        {...resizeProps}
+              <ReflexElement
-                      >
+                flex={previewPane.flex}
-                        {testOutput}
+                name='previewPane'
-                      </ReflexElement>
+                {...resizeProps}
-                    )}
+              >
-                  </ReflexContainer>
+                {preview}
-                )}
               </ReflexElement>
-              {isPreviewDisplayable && (
+            )}
-                <ReflexSplitter propagate={true} {...resizeProps} />
+          </ReflexContainer>
-              )}
+        </ReflexElement>
-              {isPreviewDisplayable && (
+      </ReflexContainer>
-                <ReflexElement
-                  flex={previewPane.flex}
-                  name='previewPane'
-                  {...resizeProps}
-                >
-                  {preview}
-                </ReflexElement>
-              )}
-            </ReflexContainer>
-          </ReflexElement>
-        </ReflexContainer>
-      </Fragment>
     );
   }
 }

client/src/templates/Challenges/classic/MobileLayout.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
@@ -60,7 +60,7 @@ class MobileLayout extends Component {
     };
 
     return (
-      <Fragment>
+      <>
         <Tabs
           activeKey={currentTab}
           defaultActiveKey={1}
@@ -95,7 +95,7 @@ class MobileLayout extends Component {
           )}
         </Tabs>
         <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
-      </Fragment>
+      </>
     );
   }
 }

client/src/templates/Challenges/components/Challenge-Description.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import PrismFormatted from './prism-formatted';
 import './challenge-description.css';
@@ -18,10 +18,10 @@ function ChallengeDescription(challenge: Challenge): JSX.Element {
     >
       {challenge.description && <PrismFormatted text={challenge.description} />}
       {challenge.instructions && (
-        <Fragment>
+        <>
           <hr />
           <PrismFormatted text={challenge.instructions} />
-        </Fragment>
+        </>
       )}
       <hr />
     </div>

client/src/templates/Challenges/components/Tool-Panel.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -49,59 +49,57 @@ function ToolPanel({
   };
   const { t } = useTranslation();
   return (
-    <Fragment>
+    <div
-      <div
+      className={`tool-panel-group button-group ${
-        className={`tool-panel-group button-group ${
+        isMobile ? 'tool-panel-group-mobile' : ''
-          isMobile ? 'tool-panel-group-mobile' : ''
+      }`}
-        }`}
+    >
+      <Button block={true} bsStyle='primary' onClick={handleRunTests}>
+        {isMobile ? t('buttons.run') : t('buttons.run-test')}
+      </Button>
+      <Button
+        block={true}
+        bsStyle='primary'
+        className='btn-invert'
+        onClick={openResetModal}
       >
-        <Button block={true} bsStyle='primary' onClick={handleRunTests}>
+        {isMobile ? t('buttons.reset') : t('buttons.reset-code')}
-          {isMobile ? t('buttons.run') : t('buttons.run-test')}
+      </Button>
-        </Button>
+      <DropdownButton
-        <Button
+        block={true}
-          block={true}
+        bsStyle='primary'
-          bsStyle='primary'
+        className='btn-invert'
-          className='btn-invert'
+        id='get-help-dropdown'
-          onClick={openResetModal}
+        title={isMobile ? t('buttons.help') : t('buttons.get-help')}
-        >
+      >
-          {isMobile ? t('buttons.reset') : t('buttons.reset-code')}
+        {guideUrl ? (
-        </Button>
-        <DropdownButton
-          block={true}
-          bsStyle='primary'
-          className='btn-invert'
-          id='get-help-dropdown'
-          title={isMobile ? t('buttons.help') : t('buttons.get-help')}
-        >
-          {guideUrl ? (
-            <MenuItem
-              bsStyle='primary'
-              className='btn-invert'
-              href={guideUrl}
-              target='_blank'
-            >
-              {t('buttons.get-hint')}
-            </MenuItem>
-          ) : null}
-          {videoUrl ? (
-            <MenuItem
-              bsStyle='primary'
-              className='btn-invert'
-              onClick={openVideoModal}
-            >
-              {t('buttons.watch-video')}
-            </MenuItem>
-          ) : null}
           <MenuItem
             bsStyle='primary'
             className='btn-invert'
-            onClick={openHelpModal}
+            href={guideUrl}
+            target='_blank'
           >
-            {t('buttons.ask-for-help')}
+            {t('buttons.get-hint')}
           </MenuItem>
-        </DropdownButton>
+        ) : null}
-      </div>
+        {videoUrl ? (
-    </Fragment>
+          <MenuItem
+            bsStyle='primary'
+            className='btn-invert'
+            onClick={openVideoModal}
+          >
+            {t('buttons.watch-video')}
+          </MenuItem>
+        ) : null}
+        <MenuItem
+          bsStyle='primary'
+          className='btn-invert'
+          onClick={openHelpModal}
+        >
+          {t('buttons.ask-for-help')}
+        </MenuItem>
+      </DropdownButton>
+    </div>
   );
 }