Merge branch 'dev' into victor/sidebar

Author: martins5225

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -198,7 +198,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
           />
           <TextField
             id="textfield-value"
-            label="initial value:"
+            label="initial value"
             variant="outlined"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
@@ -218,11 +218,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
           >
             <InputLabel
               id="select-required-label"
-              className={
-                isThemeLight
-                  ? classes.greyThemeFontColor
-                  : classes.darkThemeFontColor
-              }
+              style={{color: 'black'}}
             >
               Type
             </InputLabel>
@@ -509,7 +505,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '90%',
     textAlign: 'center',
     margin: '-20px 0px 5px 150px',
-    borderStyle: 'none',
+    border: ' 1px solid #186BB4',
     transition: '0.3s',
     // borderRadius: "25px",
   },
@@ -524,7 +520,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: '#fff'
   },
   greyThemeFontColor: {
-    color: 'rgba(0,0,0,0.54)'
+    color: 'white'
   },
   formControl: {
     margin: '8px',
@@ -538,7 +534,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   rootLight: {
     '& .MuiFormLabel-root': {
-      color: 'rgba(0,0,0,0.54)'
+      color: 'white'
     }
   },
   rootDark: {

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -57,7 +57,7 @@ const TableParentProps = props => {
       renderCell: function renderCell(params: any) {
         return (
           <Button
-            style={{ width: `${3}px`, color: 'black'}}
+            style={{ width: `${3}px`, color: 'white'}}
             onClick={() => {
               addProps(params.row, params.id - 1);
             }}

app/src/components/bottom/BottomTabs.tsx

@@ -130,9 +130,9 @@ const BottomTabs = (props): JSX.Element => {
         {tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
         {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
         {/* {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />} */}
-        {tab === 4 && <Tree data={components} />}
-        {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
-        {tab === 6 && (
+        {tab === 3 && <Tree data={components} />}
+        {tab === 4 && <ContextManager theme={theme} setTheme={setTheme} />}
+        {tab === 5 && (
           <StateManager
             theme={theme}
             setTheme={setTheme}

app/src/components/left/HTMLPanel.tsx

@@ -199,7 +199,7 @@ const HTMLPanel = (props): JSX.Element => {
               style={{ margin: '10px' }}
               InputProps={{
                 style: {
-                  color: !isDarkMode ? 'black' : 'white'
+                  color: !isDarkMode ? 'white' : 'white'
                 }
               }}
             />
@@ -247,7 +247,7 @@ const HTMLPanel = (props): JSX.Element => {
               style={{}}
               InputProps={{
                 style: {
-                  color: !isDarkMode ? 'black' : 'white'
+                  color: !isDarkMode ? 'white' : 'white'
                 }
               }}
             />

app/src/components/main/DirectChildComponent.tsx

@@ -70,7 +70,7 @@ function DirectChildComponent({
       ref={drag}
     >
         <span>
-          <strong>{name}</strong>
+          <strong style={{ color: 'white' }}>{name}</strong>
           <DeleteButton id={childId} name={name} />  
         </span>
 

app/src/components/main/DirectChildHTML.tsx

@@ -53,7 +53,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
     border:
       state.canvasFocus.childId === childId
         ? '4px solid #186BB4'
-        : '2px solid #4d8cc4'
+        : '1px solid grey'
   };
 
   const combinedStyle = combineStyles(

app/src/components/main/RouteLink.tsx

@@ -56,7 +56,7 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
         ? '3px solid #a7cced'
         : '1px Solid grey',
     boxShadow:
-      state.canvasFocus.childId === childId ? '1px 1px 3px rgb(11,212,112)' : ''
+      state.canvasFocus.childId === childId ? '1px 5px 3px rgb(11,212,112)' : ''
   };
   const combinedStyle = combineStyles(
     combineStyles(combineStyles(globalDefaultStyle, routeStyle), style),

app/src/components/main/SeparatorChild.tsx

@@ -103,11 +103,11 @@ function DirectChildHTMLNestable({
   // priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
   const defaultNestableStyle = { ...globalDefaultStyle };
   const separatorStyle = {
-    padding: '5px 10px',
+    padding: '2px 10px',
     margin: '1px 10px',
   };
 
-  defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : 'rgba(0, 0, 255, 0.0)';
+  defaultNestableStyle['backgroundColor'] = isOver ? '#cee2f5' : 'rgba(0, 0, 255, 0.0)';
 
   const combinedStyle = combineStyles(
     combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),

app/src/components/right/ComponentPanel.tsx

@@ -170,7 +170,7 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
                 style={{}}
                 InputProps={{
                   style: {
-                    color: isThemeLight ? 'black' : 'white'
+                    color: isThemeLight ? 'white' : 'white'
                   }
                 }}
               />