Merge pull request spekt8#6 from spekt8/color-design

updated color styling
solyuan · Nov 19, 2018 · bcca6a5 · bcca6a5
2 parents be93727 + bf0c5cc
commit bcca6a5
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 59 deletions.
diff --git a/src/client/app.js b/src/client/app.js
@@ -22,6 +22,7 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import MenuIcon from '@material-ui/icons/Menu';
 import GithubCorner from 'react-github-corner';
+import Divider from '@material-ui/core/Divider';
 
 // drop-down menu
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
@@ -42,8 +43,8 @@ const customStyles = {
     left: '73%',
 		right: '2%',
     bottom: '5%',
-		background: 'rgba(55, 145, 170, 0.8)',
-		color: 'white',
+		background: 'white',
+		color: 'black',
 		fontFamily: 'Roboto',
   }
 };
@@ -142,6 +143,7 @@ class App extends React.Component {
 	}
 	dragEnd = () => {
 		document.body.style.cursor = "default";
+
 	}
 
 	// when an item is selected, it will open a modal window and show information related to that item 
@@ -242,13 +244,15 @@ class App extends React.Component {
 			type =
 			<Modal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} style={customStyles} >
 				<h2 ref={subtitle => this.subtitle = subtitle}>{this.state.kind}</h2>
+				<Divider style={{'background-color':'#9CABB8'}} />
 				<div>Name: {this.state.label}</div>
 				<div>Created on: {this.state.timeStamp}</div>
 				<div>Phase: {this.state.statusPhase}</div>
 				<div>Port: {this.state.port}</div>
 				<div>Target Port: {this.state.targetPort}</div>
 				<div>Cluster IP: {this.state.clusterIP}</div>
 				<Button 
+					id="serviceModalButton"
 					variant="contained" 
 					color="default" 
 					onClick={this.closeModal} 
@@ -261,6 +265,7 @@ class App extends React.Component {
 			type = 
 			<Modal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} style={customStyles}>
         <h2 ref={subtitle => this.subtitle = subtitle}>{this.state.kind}</h2>
+				<Divider style={{'background-color':'#9CABB8'}} />
         <div>Name: {this.state.metadataName}</div>
 				<div>Created on: {this.state.timeStamp}</div>
 				<div>Phase: {this.state.statusPhase}</div>
@@ -274,7 +279,8 @@ class App extends React.Component {
 				<div className="PVC">Volumes</div>
 				<div>Name: {this.state.volumeName}</div>
 				<div>PVC: {this.state.pvcName ? this.state.pvcName : "Not applicable"}</div>
-        <Button 
+				<Button 
+					id="podModalButton"
 					variant="contained" 
 					color="default" 
 					onClick={this.closeModal} 
@@ -288,17 +294,19 @@ class App extends React.Component {
 			type = 
 			<Modal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} style={customStyles}>
         <h2 ref={subtitle => this.subtitle = subtitle}>{this.state.kind}</h2>
+				<Divider style={{'background-color':'#9CABB8'}} />
         <div>Name: {this.state.name}</div>
 				<div>Created on: {this.state.timeStamp}</div>
 				<br/>
 				<div className="serviceLeft">Services 
 					<ul>
 				  	{this.state.services.map((obj,i) => {
-						return <li key={i}>{obj.serviceName} {obj.servicePort}</li>
+						return <div key={i}>{obj.serviceName} {obj.servicePort}</div>
 						})}
 					</ul>
 				</div>
-        <Button 
+				<Button 
+					id="ingressModalButton"
 					variant="contained" 
 					color="default" 
 					onClick={this.closeModal} 
@@ -338,10 +346,11 @@ class App extends React.Component {
 								color="primary"
 							>
 							{/* can add any titles here */}
-
+							<div id="kubernetestitle">Kubernetes and Docker Visualization</div>
 								{/* View Menu */}
 								<div className="viewMenu">
 									<Button
+										id="viewButton"
 										buttonRef={node => {
 											this.anchorEl = node;
 										}}
@@ -350,7 +359,7 @@ class App extends React.Component {
 										onClick={this.handleToggle}
 										variant="contained"
 									>
-										<KeyboardArrowDown />View
+										<KeyboardArrowDown id="viewArrow"/>View
 									</Button>
 									<Popper open={menuOpen} anchorEl={this.anchorEl} transition disablePortal>
 										{({ TransitionProps, placement }) => (
@@ -361,9 +370,9 @@ class App extends React.Component {
 											>
 												<Paper>
 													<ClickAwayListener onClickAway={this.handleClose}>
-														<MenuList>
-															<MenuItem onClick={this.handleGraphClose}>Graph</MenuItem>
-															<MenuItem onClick={this.handleTableClose}>Table</MenuItem>
+														<MenuList id="menuListButton">
+															<MenuItem id="graphLabel" onClick={this.handleGraphClose}>Graph</MenuItem>
+															<MenuItem id="tableLabel" onClick={this.handleTableClose}>Table</MenuItem>
 														</MenuList>
 													</ClickAwayListener>
 												</Paper>
@@ -376,7 +385,7 @@ class App extends React.Component {
 						</Toolbar>
 						{/* Github banner on the top right */}
 						<div className={classes.githubWrapper}>
-							<GithubCorner href="https://github.com/spekt8/spekt8" size="65" bannerColor="white" octoColor="#2196f3"/>
+							<GithubCorner href="https://github.com/spekt8/spekt8" size="65" bannerColor="rgb(233, 227, 202)" octoColor="#08182E"/>
 						</div>
           </AppBar>
 					{before}

diff --git a/src/client/components/leftPanel.js b/src/client/components/leftPanel.js
@@ -25,7 +25,7 @@ const LeftPanel = (props) => {
       >
       <div className='leftheader'>
       <div className={props.classes.drawerHeader}>
-        <div id="leftheadertitle" >SPEKT8</div>
+        <div id="leftheadertitle" >S P E K T 8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
         <IconButton id="handledrawerbutton" onClick={props.handleDrawerClose}>
           {props.theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
         </IconButton>

diff --git a/src/client/components/legend.js b/src/client/components/legend.js
@@ -28,7 +28,7 @@ const styles = theme => ({
     width: '100%',
     height: '40%',
     maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: 'theme.palette.background.paper',
   },
   typo: {
     margin: theme.spacing.unit,
@@ -62,7 +62,7 @@ class Legend extends React.Component {
               disableTypography
               primary={<Typography variant="body1" style={{color: '#b4c5d3' }}>&nbsp;Pod</Typography>}
             />
-            <ListItemSecondaryAction>
+            <ListItemSecondaryAction >
               <Switch
                 classes={{
                   bar: classes.colorBar
@@ -101,7 +101,7 @@ class Legend extends React.Component {
             <ListItemSecondaryAction >
               <Switch 
                 classes={{
-                  bar: classes.colorBar
+                  bar: classes.colorBar,
                 }}
                 onChange={() => this.props.handleLegendToggle('ingress')}
                 checked={this.props.checked.indexOf('ingress') !== -1}

diff --git a/src/client/components/monitoring.js b/src/client/components/monitoring.js
@@ -29,7 +29,7 @@ const Monitoring = (props) => {
   return (
     <div className="monitoring">
       {/* Title */}
-      <Typography variant="h6" style={{color: '#9CABB8' }} className={classes.paper}>Monitoring</Typography>
+      <Typography id="monitoringlabel" variant="h6" className={classes.paper}>Monitoring</Typography>
 
       {/* Sets up Horizontal Row */}
       <Grid

diff --git a/src/client/styles/drawerStyles.js b/src/client/styles/drawerStyles.js
@@ -37,6 +37,8 @@ const styles = theme => ({
     marginLeft: 0,
     marginRight: 0,
     width: '100%',
+    color: 'white',
+    backgroundColor:'#2196f3',
   },
   github: {
     width: 40,
@@ -94,9 +96,6 @@ const styles = theme => ({
   'contentShift-right': {
     marginRight: 0,
   },
-  drawerTitle: {
-
-  }
 });
 
 export default styles;
diff --git a/src/client/styles/styles.scss b/src/client/styles/styles.scss
@@ -9,51 +9,81 @@ body {
     font-family: Roboto;
 }
 
+// -----------------------------------------
+// modal
 .modalContainer {
-    background: rgba(55, 145, 170, 0.8);
+    background-color: rgba(55, 145, 170, 0.8);
 }
-
-
 .closeButton:hover {
-    background: rgba(105, 181, 202, 0.8);
+    background-color: rgba(105, 181, 202, 0.8);
     color:white;
     // color:rgb(235, 235, 235);
-
-}
-
-.closeButton {
-    width: 100%;
-    display: block;
-    height: 50px;
-    color:rgba(105, 181, 202, 0.8);
-    font-size: 14pt;
-    font-family:sans-serif;
-    font-weight: bold;
-    margin-top: 15px;
 }
-
+#podModalButton:hover {
+    background-color: #1b7ac7;
+}
+#serviceModalButton:hover {
+    background-color: #1b7ac7;
+}
+#ingressModalButton:hover {
+    background-color: #1b7ac7;
+}
+// .closeButton {
+//     width: 100%;
+//     display: block;
+//     height: 50px;
+//     color:rgba(105, 181, 202, 0.8);
+//     font-size: 14pt;
+//     font-family:sans-serif;
+//     font-weight: bold;
+//     margin-top: 15px;
+// }
 .containerinfo {
     text-decoration: underline;
 }
-
 .PVC {
     text-decoration: underline;
 }
-
 .serviceLeft {
     float:left;
 }
-
 .serviceRight {
     float:right;
 }
 
-// Header
-.header {
-    display: flex;
-    justify-content: space-between;
-    padding: 15px;
-    border-bottom: 1px solid black;
+// --------------------------------------------------
+// Header / App Bar
+// .header {
+//     display: flex;
+//     justify-content: space-between;
+//     padding: 15px;
+//     border-bottom: 1px solid black;
+// }
+
+#kubernetestitle {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+    font-style: italic;
+}
+#appbar {
+    background-image: -webkit-linear-gradient(bottom left, #102139 30%,rgb(233, 227, 202) );
+}
+#viewButton {
+    color: white;
+    background-color: #102139;
+}
+#viewArrow {
+    color: white;
+}
+#menuListButton {
+    background-color: #102139;
+}
+#graphLabel {
+    color: white;
+}
+
+#tableLabel {
+    color: white;
 }
 
 // ---------------------------------------------------
@@ -67,6 +97,7 @@ body {
     color: #F8F8F8;
     text-align: left;
     font-weight: bold;
+    font-size: 20px;
     font-family: Arial, Helvetica, sans-serif;
 }
 #handledrawerbutton {
@@ -78,38 +109,36 @@ body {
     background-color: #08182E;
 }
 #legendtitle {
-    color: #b4c5d3;
-}
-#podlabel {
     color: #F8F8F8;
 }
-.divider {
-    color:black;
-}
+
 
 // monitoring 
 .monitoring {
     background-color: #08182E;
 }
+#monitoringlabel {
+    color: #F8F8F8;
+}
 #refreshbutton {
-    background-color: #b4c5d3;
+    background-color: #d3e0eb;
 }
 #refreshbutton:hover {
-    background-color: #6699CC;
+    background-color: #7794b1;
 }
 #monitorbutton {
-    background-color: #b4c5d3;
+    background-color: #d3e0eb;
 }
 #monitorbutton:hover {
-    background-color: #6699CC;
+    background-color: #7794b1;
 }
 
 // directions
 .directions {
     background-color: #08182E;
 }
 #pageslabel {
-    color: #b4c5d3;
+    color: #F8F8F8;
 }
 
 .viewMenu {
@@ -125,12 +154,10 @@ body {
 .tableRight {
     margin-bottom: 10%;
 }
-
 .monitoring {
     height: 25%;
     padding: 0 15px;
 }
-
 .directions {
     padding: 0 25px;
     text-align: center;

diff --git a/src/client/supplement/graphOptions.js b/src/client/supplement/graphOptions.js
@@ -61,7 +61,7 @@ const options = {
       hover: {
         border: '#2B7CE9',
         background: '#D2E5FF'
-      }
+      },
     },
   },
   groups: {

diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,8 @@ import App from './client/app';
 import './client/styles/styles.scss';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import blue from '@material-ui/core/colors/blue';
+import yellow from '@material-ui/core/colors/yellow';
+
 import { Provider } from 'react-redux'; 
 import store from './client/reducers/store';
 
@@ -13,6 +15,9 @@ const theme = createMuiTheme({
 	},
 	palette: {
 		primary: blue,
+		secondary: {
+			main: '#ffd54f',
+		}
 	},
 });