Added Enter Dialog. Improvement in Light theme

apps/remix-ide-e2e/src/helpers/init.ts

@@ -13,6 +13,8 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
     //.switchBrowserTab(0)
     .waitForElementVisible('[id="remixTourSkipbtn"]')
     .click('[id="remixTourSkipbtn"]')
+    .waitForElementVisible('data-id="EnterModalDialogContainer-react"]')
+    .click('[data-id="beginnerbtn"]')
 
     .perform((done) => {
       if (!loadPlugin) return done()

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -2386,8 +2386,8 @@ fieldset:disabled a.btn {
 
 .btn-secondary {
   color: #fff;
-  background-color: #a8b3bc;
+  background-color: #8b98a3;
-  border-color: #a8b3bc;
+  border-color: #8b98a3;
 }
 .btn-secondary:hover {
   color: #fff;
@@ -2401,8 +2401,8 @@ fieldset:disabled a.btn {
 .btn-secondary.disabled,
 .btn-secondary:disabled {
   color: #fff;
-  background-color: #a8b3bc;
+  background-color: #8b98a3;
-  border-color: #a8b3bc;
+  border-color: #8b98a3;
 }
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
@@ -2656,13 +2656,13 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-secondary {
-  color: #a8b3bc;
+  color: #8b98a3;
-  border-color: #a8b3bc;
+  border-color: #8b98a3;
 }
 .btn-outline-secondary:hover {
   color: #fff;
-  background-color: #a8b3bc;
+  background-color: #8b98a3;
-  border-color: #a8b3bc;
+  border-color: #8b98a3;
 }
 .btn-outline-secondary:focus,
 .btn-outline-secondary.focus {
@@ -2670,15 +2670,15 @@ fieldset:disabled a.btn {
 }
 .btn-outline-secondary.disabled,
 .btn-outline-secondary:disabled {
-  color: #a8b3bc;
+  color: #8b98a3;
   background-color: transparent;
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
   color: #fff;
-  background-color: #a8b3bc;
+  background-color: #8b98a3;
-  border-color: #a8b3bc;
+  border-color: #8b98a3;
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
 .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
@@ -4731,7 +4731,7 @@ a.badge-primary.focus {
 
 .badge-secondary {
   color: #fff;
-  background-color: #a8b3bc;
+  background-color: #8b98a3;
 }
 a.badge-secondary:hover,
 a.badge-secondary:focus {
@@ -6271,7 +6271,7 @@ button.bg-dark:focus {
 }
 
 .border-secondary {
-  border-color: #a8b3bc !important;
+  border-color: #8b98a3 !important;
 }
 
 .border-success {
@@ -9308,7 +9308,7 @@ a.text-primary:focus {
 }
 
 .text-secondary {
-  color: #a8b3bc !important;
+  color: #8b98a3 !important;
 }
 
 a.text-secondary:hover,

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

@@ -0,0 +1,85 @@
+import React, {useContext, useEffect, useState} from 'react'
+import {UsageTypes} from '../../types'
+import { type } from 'os'
+
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+const _paq = (window._paq = window._paq || [])
+
+interface EnterDialogProps {
+  hide: boolean,
+  handleUserChoice: (userChoice: UsageTypes) => void,
+}
+
+const EnterDialog = (props: EnterDialogProps) => {
+  const [visibility, setVisibility] = useState<boolean>(false)
+
+  useEffect(() => {
+    setVisibility(!props.hide)
+  }, [props.hide])
+
+  const enterAs = async (uType) => {
+    props.handleUserChoice(uType)
+
+    switch (uType) {
+    case UsageTypes.Beginner: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'beginner'])
+      break
+    }
+    case UsageTypes.Tutor: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'tutor'])
+      break
+    }
+    case UsageTypes.Prototyper: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'prototyper'])
+      break
+    }
+    case UsageTypes.Production: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'production'])
+      break
+    }
+    default: throw new Error()
+    }
+  }
+
+  const modalClass = !visibility ? "d-none" : "d-flex"
+  return (
+    <div
+      data-id={`EnterModalDialogContainer-react`}
+      data-backdrop="static"
+      data-keyboard="false"
+      className={"modal  " + modalClass}
+      role="dialog"
+    >
+      <div className="modal-dialog align-self-center pb-4" role="document">
+        <div
+          tabIndex={-1}
+          className={'modal-content remixModalContent mb-4'}
+          onKeyDown={({keyCode}) => {
+          }}
+        >
+          <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 efficiant setup we would like to know your experiance type.
+              </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-secondary" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Beginner</button>  
+            <button className="btn-secondary" data-id="tutorbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Tutor)}}>Tutor</button>  
+            <button className="btn-secondary" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototyper</button>  
+            <button className="btn-secondary" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production</button>  
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EnterDialog

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

@@ -25,11 +25,7 @@ const MatomoDialog = (props) => {
         </p>
         <p>We realize that our users have sensitive information in their code and that their privacy - your privacy - must be protected.</p>
         <p>
-          All data collected through Matomo is stored on our own server - no data is ever given to third parties. Our analytics reports are public:{' '}
+          All data collected through Matomo is stored on our own server - no data is ever given to third parties.
-          <a href="https://matomo.ethereum.org/index.php?module=MultiSites&action=index&idSite=23&period=day&date=yesterday" target="_blank" rel="noreferrer">
-            take a look
-          </a>
-          .
         </p>
         <p>We do not collect nor store any personally identifiable information (PII).</p>
         <p>
@@ -61,14 +57,14 @@ const MatomoDialog = (props) => {
   const declineModal = async () => {
     settings.updateMatomoAnalyticsChoice(false)
     _paq.push(['optUserOut'])
-    appManager.call('walkthrough', 'start')
+    //appManager.call('walkthrough', 'start')
     setVisible(false)
   }
 
   const handleModalOkClick = async () => {
     _paq.push(['forgetUserOptOut'])
     settings.updateMatomoAnalyticsChoice(true)
-    appManager.call('walkthrough', 'start')
+    //appManager.call('walkthrough', 'start')
     setVisible(false)
   }
 

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

@@ -37,3 +37,10 @@ export interface ModalState {
     focusModal: AppModal,
     focusToaster:  {message: (string | JSX.Element), timestamp: number }
 }
+
+export interface forceChoiceModal {
+  id: string
+  title?: string,
+  message: string | JSX.Element,
+}
+

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

@@ -2,6 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'
 import './style/remix-app.css'
 import {RemixUIMainPanel} from '@remix-ui/panel'
 import MatomoDialog from './components/modals/matomo'
+import EnterDialog from './components/modals/enter'
 import OriginWarning from './components/modals/origin-warning'
 import DragBar from './components/dragbar/dragbar'
 import {AppProvider} from './context/provider'
@@ -10,12 +11,14 @@ import DialogViewPlugin from './components/modals/dialogViewPlugin'
 import {AppContext} from './context/context'
 import {IntlProvider, FormattedMessage} from 'react-intl'
 import {CustomTooltip} from '@remix-ui/helper'
+import {UsageTypes} from './types'
 
 interface IRemixAppUi {
   app: any
 }
 const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
+  const [showEnterDialog, setShowEnterDialog] = useState<boolean>(true)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
   const [maximiseTrigger, setMaximiseTrigger] = useState<number>(0)
   const [resetTrigger, setResetTrigger] = useState<number>(0)
@@ -37,6 +40,8 @@ const RemixApp = (props: IRemixAppUi) => {
     if (props.app) {
       activateApp()
     }
+    const hadUsageTypeAsked = localStorage.getItem('hadUsageTypeAsked')
+    setShowEnterDialog(!hadUsageTypeAsked)
   }, [])
 
   function setListeners() {
@@ -80,12 +85,20 @@ const RemixApp = (props: IRemixAppUi) => {
     layout: props.app.layout
   }
 
+  const handleUserChosenType = (type) => {
+    setShowEnterDialog(false)
+    localStorage.setItem('hadUsageTypeAsked', "true")
+
+    // Use the type to setup the UI accordingly
+  }
+
   return (
     //@ts-ignore
     <IntlProvider locale={locale.code} messages={locale.messages}>
       <AppProvider value={value}>
         <OriginWarning></OriginWarning>
         <MatomoDialog hide={!appReady}></MatomoDialog>
+        <EnterDialog hide={!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

@@ -1,8 +1,16 @@
 export const enum ModalTypes {
-    alert = 'alert',
+  alert = 'alert',
-    confirm = 'confirm',
+  confirm = 'confirm',
-    prompt = 'prompt',
+  prompt = 'prompt',
-    password = 'password',
+  password = 'password',
-    default = 'default',
+  default = 'default',
-    form = 'form',
+  form = 'form',
+  forceChoice = 'forceChoice'
+}
+
+export const enum UsageTypes {
+  Beginner = 1,
+  Tutor,
+  Prototyper,
+  Production,
 }

libs/remix-ui/home-tab/src/lib/components/workspaceTemplate.tsx

@@ -14,7 +14,6 @@ interface WorkspaceTemplateProps {
 function WorkspaceTemplate({gsID, workspaceTitle, description, projectLogo, callback}: WorkspaceTemplateProps) {
   const themeFilter = useContext(ThemeContext)
 
-  console.log("theme ", themeFilter)
   return (
     <div className="d-flex remixui_home_workspaceTemplate">
       <button