updated UI of enter dialog

apps/remix-ide/src/app.js

@@ -130,8 +130,8 @@ class AppComponent {
       'remix.ethereum.org': 23,
       '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
     }
-    this.showMatamo = matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
-    this.showEnter = this.showMatamo && !localStorage.getItem('hadUsageTypeAsked')
+    this.showMatamo = true /*matomoDomains[window.location.hostname]*/ && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
+    this.showEnter = !this.showMatamo && !localStorage.getItem('hadUsageTypeAsked')
     
     this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
 

apps/remix-ide/src/walkthroughService.js

@@ -49,7 +49,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderSave'),
         title: 'Transactions Recorder',
-        intro: 'Once there is a Once one or a few transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
+        intro: 'Once there is a one or a few transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'
@@ -89,21 +89,24 @@ export class WalkthroughService extends Plugin {
           intro: 'Click to launch the Home tab that contains links, tips, and shortcuts..',
           element: document.querySelector('#verticalIconsHomeIcon'),
           tooltipClass: 'bg-light text-dark',
-          position: 'right'
+          position: 'right',
+          highlightClass: 'bg-light border border-warning'
         },
         {
           element: document.querySelector('#verticalIconsKindsolidity'),
           title: 'Solidity Compiler',
           intro: 'Having selected a .sol file in the File Explorer (the icon above), compile it with the Solidity Compiler.',
           tooltipClass: 'bg-light text-dark',
-          position: 'right'
+          position: 'right',
+          highlightClass: 'bg-light border border-warning'
         },
         {
           title: 'Deploy your contract',
           element: document.querySelector('#verticalIconsKindudapp'),
           intro: 'Choose a chain, deploy a contract and play with your functions.',
           tooltipClass: 'bg-light text-dark',
-          position: 'right'
+          position: 'right',
+          highlightClass: 'bg-light border border-warning'
         }
         ]
       }).onafterchange((targetElement) => {

libs/remix-ui/app/src/lib/remix-app/components/modals/enter.tsx

@@ -4,7 +4,7 @@ import {UsageTypes} from '../../types'
 import { type } from 'os'
 
 interface EnterDialogProps {
-  hide: boolean,
+  show: boolean,
   handleUserChoice: (userChoice: UsageTypes) => void,
 }
 
@@ -13,14 +13,16 @@ const EnterDialog = (props: EnterDialogProps) => {
   const {showEnter} = useContext(AppContext)
 
   useEffect(() => {
-    setVisibility(!props.hide)
-  }, [props.hide])
+    setVisibility(props.show)
+    console.log("useeff vis in enter", props.show, " showEnter ", showEnter)
+  }, [props.show])
 
   const enterAs = async (uType) => {
     props.handleUserChoice(uType)
   }
 
   const modalClass = (visibility && showEnter) ? "d-flex" : "d-none"
+  console.log("enterDialog class ", modalClass)
   return (
     <div
       data-id={`EnterModalDialogContainer-react`}
@@ -39,17 +41,17 @@ const EnterDialog = (props: EnterDialogProps) => {
           <div className="modal-header d-flex flex-column">
             <h3 className='text-dark'>Welcome to Remix IDE</h3>
             <div className='d-flex flex-row pt-2'>
-              <h6 className="modal-title" data-id={`EnterModalDialogModalTitle-react`}>
-                To load the project with the most efficient setup we would like to know your experience type.
+              <h6 className="modal-title text-dark" data-id={`EnterModalDialogModalTitle-react`}>
+                In order to understand your needs better, we would like to know how you typically use Remix
               </h6>
               <i className="text-dark fal fa-door-open text-center" style={{minWidth: "100px", fontSize: "xxx-large"}}></i>
             </div>
           </div>
-          <div className="modal-body text-break remixModalBody d-flex flex-row p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
-            <button className="btn btn-secondary" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Beginner</button>
-            <button className="btn btn-secondary" data-id="tutorbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Tutor)}}>Teacher</button>
-            <button className="btn btn-secondary" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototyper</button>
-            <button className="btn btn-secondary" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production User</button>
+          <div className="modal-body text-break remixModalBody d-flex flex-column p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
+            <button className="btn btn-secondary text-left" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Learning - discovering web3 development</button>
+            <button className="btn btn-secondary my-1 text-left" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototyping - trying out concepts and techniques</button>
+            <button className="btn btn-secondary text-left" data-id="advanceUserbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Advance)}}>Developing  projects - Remix as your main dev tool</button>
+            <button className="btn btn-secondary mt-1 text-left" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production - only deployments</button>
           </div>
         </div>
       </div>

libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx

@@ -8,7 +8,12 @@ declare global {
 }
 const _paq = (window._paq = window._paq || [])
 
-const MatomoDialog = (props) => {
+interface MatomoDialogProps {
+  okFn: () => void,
+  hide: boolean
+}
+
+const MatomoDialog = (props: MatomoDialogProps) => {
   const {settings, showMatamo, appManager} = useContext(AppContext)
   const {modal} = useDialogDispatchers()
   const [visible, setVisible] = useState<boolean>(props.hide)
@@ -68,6 +73,7 @@ const MatomoDialog = (props) => {
     _paq.push(['setConsentGiven']);
     settings.updateMatomoAnalyticsChoice(true)
     setVisible(false)
+    props.okFn()
   }
 
   return <></>

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -113,7 +113,7 @@ const RemixApp = (props: IRemixAppUi) => {
       _paq.push(['trackEvent', 'enterDialog', 'usageType', 'beginner'])
       break
     }
-    case UsageTypes.Tutor: {
+    case UsageTypes.Advance: {
       _paq.push(['trackEvent', 'enterDialog', 'usageType', 'tutor'])
       break
     }
@@ -135,8 +135,8 @@ const RemixApp = (props: IRemixAppUi) => {
     <IntlProvider locale={locale.code} messages={locale.messages}>
       <AppProvider value={value}>
         <OriginWarning></OriginWarning>
-        <MatomoDialog hide={!appReady} okFn={() => {setShowEnterDialog(true)}}></MatomoDialog>
-        <EnterDialog hide={!showEnterDialog} handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>
+        <MatomoDialog hide={!appReady} okFn={() => {console.log("ok"); setShowEnterDialog(true)}}></MatomoDialog>
+        <EnterDialog show={showEnterDialog} handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>
         <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
           <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
             {props.app.menuicons.render()}

libs/remix-ui/app/src/lib/remix-app/types/index.ts

@@ -10,7 +10,7 @@ export const enum ModalTypes {
 
 export const enum UsageTypes {
   Beginner = 1,
-  Tutor,
   Prototyper,
-  Production,
+  Advance,
+  Production
 }