Learneth UI fixes

apps/learneth/src/components/BackButton/index.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react'
 import {Link, useLocation, useNavigate} from 'react-router-dom'
-import {Button, Modal, Tooltip, OverlayTrigger} from 'react-bootstrap'
+import {Button, Modal } from 'react-bootstrap'
+import { CustomTooltip } from "@remix-ui/helper"
 import './index.scss'
 
 function BackButton({entity}: any) {
@@ -14,8 +15,8 @@ function BackButton({entity}: any) {
   const previousStep = entity && entity.steps[stepId - 1]
 
   return (
-    <nav className="navbar navbar-light bg-light justify-content-between pt-1 pb-1 ps-1">
-      <ul className="nav me-auto">
+    <nav className="navbar navbar-light bg-light d-flex justify-content-between pt-1 pb-1 ps-1">
+      <ul className="d-flex nav me-auto">
         <li className="nav-item">
           <div
             className="btn back"
@@ -24,23 +25,27 @@ function BackButton({entity}: any) {
             }}
             role="button"
           >
-            <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-right">Leave tutorial</Tooltip>}>
+            <CustomTooltip
+              placement={"right"}
+              tooltipId="learnethHomeIconTooltip"
+              tooltipText='Leave tutorial'
+            >
               <i className="fas fa-home ps-1" />
-            </OverlayTrigger>
+            </CustomTooltip>
           </div>
         </li>
         {isDetailPage && (
           <li className="nav-item">
-            <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-rightTutorialMenu">Tutorial menu</Tooltip>}>
+            <CustomTooltip placement="right" tooltipId="learnethBarsIconTooltip" tooltipText='Tutorial menu'>
               <Link className="btn" to={`/list?id=${entity.id}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'back_to_menu_step', entity && entity.name])}>
                 <i className="fas fa-bars" />
               </Link>
-            </OverlayTrigger>
+            </CustomTooltip>
           </li>
         )}
       </ul>
       {isDetailPage && (
-        <form className="form-inline">
+        <form className="form d-flex">
           {stepId > 0 && (
             <Link to={`/detail?id=${entity.id}&stepId=${stepId - 1}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'previous_step', `${entity.name}/${previousStep && previousStep.name}`])}>
               <i className="fas fa-chevron-left pe-1" />
@@ -49,7 +54,7 @@ function BackButton({entity}: any) {
           {stepId + 1}/{entity && <div className="">{entity.steps.length}</div>}
           {stepId < entity.steps.length - 1 && (
             <Link to={`/detail?id=${entity.id}&stepId=${stepId + 1}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'next_step', `${entity.name}/${nextStep && nextStep.name}`])} >
-              <i className="fas fa-chevron-right ps-1" />
+              <i className="fas fa-chevron-right ps-1 pe-1" />
             </Link>
           )}
         </form>

apps/learneth/src/components/RepoImporter/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Dropdown, Form, Tooltip, OverlayTrigger } from 'react-bootstrap'
+import { Button, Dropdown, Form } from 'react-bootstrap'
+import { CustomTooltip } from "@remix-ui/helper"
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
 import './index.css'
 
@@ -48,7 +49,7 @@ function RepoImporter({ list, selectedRepo }: any): JSX.Element {
 
       <div onClick={panelChange} style={{ cursor: 'pointer' }} className="container-fluid d-flex mb-3 small">
         <div className="d-flex pe-2 ps-2">
-          <i className={`arrow-icon pt-1 fas fa-xs ${open ? 'fa-chevron-down' : 'fa-chevron-right'}`}></i>
+          <i className={`arrow-icon pt-2 fas fa-xs ${open ? 'fa-chevron-down' : 'fa-chevron-right'}`}></i>
         </div>
         <div className="d-flex">Import another tutorial repo</div>
       </div>
@@ -85,9 +86,9 @@ function RepoImporter({ list, selectedRepo }: any): JSX.Element {
               <Form.Label className="me-2" htmlFor="name">
                 REPO
               </Form.Label>
-              <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-right">ie username/repository</Tooltip>}>
+              <CustomTooltip placement="right" tooltipId="learnethQuestionIconTooltip" tooltipText='i.e. username/repository'>
                 <i className="fas fa-question-circle" />
-              </OverlayTrigger>
+              </CustomTooltip>
               <Form.Control
                 id="name"
                 required

apps/learneth/src/index.css

@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem !important ;
 }
 
 code {