Merge pull request #19 from jzuniga206/feature

Added Better Visuals to Component Cards

Author: tonyito

package-lock.json

@@ -1,5 +1,9 @@
 import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt, Action
+  ComponentInt,
+  ComponentsInt,
+  PropInt,
+  ChildInt,
+  Action
 } from '../utils/Interfaces';
 
 import {
@@ -26,7 +30,7 @@ import {
   ADD_PROP,
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
- // UPDATE_CHILDREN_SORT, --The reason why this is commented out is because of the unused reducer of the same name, for the component that is unfinished with the same name. Check out the Sort Children component to see what it does.
+  // UPDATE_CHILDREN_SORT, --The reason why this is commented out is because of the unused reducer of the same name, for the component that is unfinished with the same name. Check out the Sort Children component to see what it does.
   CHANGE_IMAGE_SOURCE,
   DELETE_IMAGE
 } from '../actionTypes/index';
@@ -51,7 +55,9 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
   });
 };
 
-export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
+export const addComponent = ({ title }: { title: string }) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
@@ -81,7 +87,7 @@ export const deleteComponent = ({
 }) => (dispatch: (arg: Action) => void) => {
   // find all places where the "to be deleted" is a child and do what u gotta do
   stateComponents.forEach((parent: ComponentInt) => {
-    parent.childrenArrayChildInt
+    parent.childrenArray
       .filter((child: ChildInt) => child.childComponentId === componentId)
       .forEach((child: ChildInt) => {
         dispatch({
@@ -169,7 +175,12 @@ export const handleClose = () => ({
 export const handleTransform = (
   componentId: number,
   childId: number,
-  { x, y, width, height }: { x: number; y: number; width: number; height: number }
+  {
+    x,
+    y,
+    width,
+    height
+  }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
   payload: {
@@ -246,15 +257,21 @@ export const deleteAllData = () => ({
   type: DELETE_ALL_DATA
 });
 
-export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void) => {
+export const deleteProp = (propId: number) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (id: string) => (dispatch: (arg: Action) => void) => {
+export const toggleComponentState = (id: string) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({ type: TOGGLE_STATE, payload: id });
 };
 
-export const toggleComponentClass = (id: string) => (dispatch: (arg: Action) => void) => {
+export const toggleComponentClass = (id: string) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({ type: TOGGLE_CLASS, payload: id });
 };
 
@@ -263,9 +280,13 @@ export const addProp = (prop: PropInt) => ({
   payload: { ...prop }
 });
 
-export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
-  dispatch: (arg: Action) => void
-) => {
+export const updateHtmlAttr = ({
+  attr,
+  value
+}: {
+  attr: string;
+  value: string;
+}) => (dispatch: (arg: Action) => void) => {
   dispatch({
     type: UPDATE_HTML_ATTR,
     payload: { attr, value }

src/actions/components.ts

@@ -51,7 +51,7 @@ const LeftColExpansionPanel = (props: any) => {
             !isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }
           }
         >
-          <Grid item xs={12} style={{ color: 'red' }}>
+          <Grid item xs={12} style={{ color: 'red', backgroundColor: color }}>
             <List style={{ color: 'red' }}>
               <ListItem
                 button
@@ -65,7 +65,14 @@ const LeftColExpansionPanel = (props: any) => {
                   className={classes.light}
                   primary={
                     <div>
-                      <Typography type='body2' style={{ color }}>
+                      <Typography
+                        type='body2'
+                        style={{
+                          color: '#fff',
+                          textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',
+                          fontSize: '1.40rem'
+                        }}
+                      >
                         {title}
                       </Typography>
                       {/* TOGGLE FOR STATEFULNESS */}
@@ -93,8 +100,8 @@ const LeftColExpansionPanel = (props: any) => {
                           toggleComponentState(id);
                           changeFocusComponent(title);
                         }}
-                        value="stateful"
-                        color="primary"
+                        value='stateful'
+                        color='primary'
                         id={props.id.toString()}
                         // id={props.index.toString()}
                       />
@@ -119,8 +126,8 @@ const LeftColExpansionPanel = (props: any) => {
                             toggleComponentClass(id);
                             changeFocusComponent(title);
                           }}
-                          value="classBased"
-                          color="primary"
+                          value='classBased'
+                          color='primary'
                         />
                       </div>
                     </div>
@@ -149,7 +156,7 @@ const LeftColExpansionPanel = (props: any) => {
                 style={{
                   color: '#D3D3D3',
                   marginBottom: '10px',
-                  marginTop: '0px',
+                  marginTop: '4px',
                   marginLeft: '11px',
                   padding: '0px'
                 }}

src/components/LeftColExpansionPanel.tsx

@@ -102,7 +102,7 @@ LEFT COLUMN
   display: flex;
   /* max-height: 80%; */
   height: 60%;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
   padding: 1%;
 }

src/public/styles/style.css

@@ -55,8 +55,8 @@ import {
   updateChildrenSort,
   toggleComponentState,
   toggleComponentClass
-} from '../utils/componentReducer.util.ts';
-import cloneDeep from '../utils/cloneDeep.ts';
+} from '../utils/componentReducer.util';
+import cloneDeep from '../utils/cloneDeep';
 
 const appComponent: ComponentInt = {
   id: 1,

src/reducers/componentReducer.ts

@@ -1,29 +1,30 @@
-const colors: Array<string> = [
-  '#E27D60',
-  '#E3AFBC',
-  '#E8A87C',
-  '#C38D9E',
-  '#41B3A3',
-  '#D12FA2',
-  '#F64C72',
-  '#DAAD86',
-  '#8EE4AF',
-  '#5CDB95',
-  '#7395AE', // light grey
-  '#b90061',
-  '#AFD275',
-  '#45A29E',
-  '#D79922',
-  '#C5CBE3', // lightish grey
-  '#FFCB9A',
-  '#E98074',
-  '#8860D0',
-  '#5AB9EA',
-  '#5860E9',
-  '#84CEEB',
-  '#61892F',
+const colors: string[] = [
+  '#e27d60',
+  '#575757',
+  '#e8a87c',
+  '#c38d9e',
+  '#41b3a3',
+  '#d12fa2',
+  '#f64c72',
+  '#c99261',
+  '#355586',
+  '#5cdb95',
+  '#7395ae',
+  '#981d5c',
+  '#556738',
+  '#45a29e',
+  '#d79922',
+  '#0a2aa9',
+  '#9f2b17',
+  '#e98074',
+  '#8860d0',
+  '#5ab9ea',
+  '#5860e9',
+  '#84ceeb',
+  '#61892f'
 ];
 
-const getColor = (): string => colors[Math.floor(Math.random() * colors.length)];
+const getColor = (): string =>
+  colors[Math.floor(Math.random() * colors.length)];
 
 export default getColor;