Merge pull request #30 from sean1292/staging

Edited styling for the  component cards

Author: ibeeliot

src/components/LeftColExpansionPanel.tsx

@@ -65,8 +65,9 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
       container
       spacing={16}
       direction="row"
-      justify="flex-start"
+      justify="center"
       alignItems="center"
+      style={{ minWidth: '320px' }}
     >
       <Grid item xs={9}>
         <div
@@ -90,6 +91,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                 color: 'red',
                 backgroundColor: color,
                 borderRadius: '10px',
+                minWidth: '320px',
               }}
             >
               <List style={{ color: 'red' }}>
@@ -122,42 +124,33 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                       */}
 
                         {/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
-                        {focusedToggle ? (
-                          <InputLabel
-                            htmlFor="stateful"
-                            style={{
-                              color: '#fff',
-                              marginBottom: '10px',
-                              marginTop: '0px',
-                              marginLeft: '11px',
-                              padding: '0px',
-                              fontSize: '18px',
-                              textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
-                            }}
-                          >
-                            State?
-                          </InputLabel>
-                        ) : (
-                          ''
-                        )}
 
                         {focusedToggle ? (
-                          <Switch
-                            checked={stateful}
-                            onChange={e => {
-                              toggleComponentState(id);
-                              changeFocusComponent({ title });
-                            }}
-                            value="stateful"
-                            color="primary"
-                            // id={props.id.toString()}
-                          />
-                        ) : (
-                          ''
-                        )}
-                        <div>
-                          {/* LABEL/TOGGLE(SWITCH) FOR CLASS BASED */}
-                          {focusedToggle ? (
+                          <span>
+                            <InputLabel
+                              htmlFor="stateful"
+                              style={{
+                                color: '#fff',
+                                marginBottom: '10px',
+                                marginTop: '0px',
+                                marginLeft: '11px',
+                                padding: '0px',
+                                fontSize: '18px',
+                                textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
+                              }}
+                            >
+                              State?
+                            </InputLabel>
+                            <Switch
+                              checked={stateful}
+                              onChange={e => {
+                                toggleComponentState(id);
+                                changeFocusComponent({ title });
+                              }}
+                              value="stateful"
+                              color="primary"
+                              // id={props.id.toString()}
+                            />
                             <InputLabel
                               htmlFor="classBased"
                               style={{
@@ -171,11 +164,8 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                               }}
                             >
                               Class?
-                            </InputLabel>
-                          ) : (
-                            ''
-                          )}
-                          {focusedToggle ? (
+                            </InputLabel>{' '}
+                            (
                             <Switch
                               checked={classBased}
                               onChange={e => {
@@ -185,48 +175,49 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                               value="classBased"
                               color="primary"
                             />
-                          ) : (
-                            ''
-                          )}
-                          {focusedToggle && component.id !== 1 ? (
-                            <Button
-                              variant="text"
-                              size="small"
-                              color="default"
-                              aria-label="Delete"
-                              className={classes.margin}
-                              onClick={() =>
-                                deleteComponent({
-                                  componentId: id,
-                                  stateComponents: components,
-                                })
-                              }
+                          </span>
+                        ) : (
+                          ''
+                        )}
+
+                        {focusedToggle && component.id !== 1 ? (
+                          <Button
+                            variant="text"
+                            size="small"
+                            color="default"
+                            aria-label="Delete"
+                            className={classes.margin}
+                            onClick={() =>
+                              deleteComponent({
+                                componentId: id,
+                                stateComponents: components,
+                              })
+                            }
+                            style={{
+                              color: 'white',
+                              marginBottom: '0px',
+                              marginTop: '4px',
+                            }}
+                          >
+                            <DeleteIcon
+                              style={{
+                                color: '#b30000',
+                                textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
+                              }}
+                            />
+                            <div
                               style={{
-                                color: 'white',
-                                marginBottom: '0px',
-                                marginTop: '4px',
+                                marginTop: '3px',
+                                fontSize: '15px',
+                                textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)',
                               }}
                             >
-                              <DeleteIcon
-                                style={{
-                                  color: '#b30000',
-                                  textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
-                                }}
-                              />
-                              <span
-                                style={{
-                                  marginTop: '3px',
-                                  fontSize: '15px',
-                                  textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)',
-                                }}
-                              >
-                                Delete Component
-                              </span>
-                            </Button>
-                          ) : (
-                            ''
-                          )}
-                        </div>
+                              Delete Component
+                            </div>
+                          </Button>
+                        ) : (
+                          ''
+                        )}
                       </div>
                     }
                     style={{ color }}

src/containers/LeftContainer.tsx

@@ -250,7 +250,7 @@ class LeftContainer extends Component<LeftContPropsInt, StateInt> {
     const { addImage } = this;
 
     return (
-      <div className="column left">
+      <div className="column left" style={{ minWidth: '466px' }}>
         <Grid
           container
           spacing={8}