Skip to content

Commit

Permalink
updated color styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Elliot Kim authored and Elliot Kim committed Nov 19, 2018
1 parent 6f671e8 commit 1f1841f
Show file tree
Hide file tree
Showing 10 changed files with 102 additions and 67 deletions.
36 changes: 22 additions & 14 deletions src/client/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,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';
Expand All @@ -44,13 +45,13 @@ const customStyles = {
left: '73%',
right: '2%',
bottom: '5%',
background: 'rgba(55, 145, 170, 0.8)',
color: 'white',
background: 'white',
color: 'black',
fontFamily: 'Roboto',
}
};
Modal.setAppElement(document.getElementById('index'))
//dsfas

class App extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -118,10 +119,10 @@ class App extends React.Component {
this.setState({ menuOpen: false });
};
handleGraphClose = () => {
this.setState({ graphTable: 'graph' })
this.setState({ graphTable: 'graph', menuOpen: false })
}
handleTableClose = () => {
this.setState({ graphTable: 'table' })
this.setState({ graphTable: 'table', menuOpen: false })
}

// when an item is selected, it will open a modal window and show information related to that item
Expand Down Expand Up @@ -221,13 +222,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}
Expand All @@ -240,6 +243,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>
Expand All @@ -253,7 +257,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}
Expand All @@ -267,17 +272,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}
Expand Down Expand Up @@ -317,10 +324,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;
}}
Expand All @@ -329,7 +337,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 }) => (
Expand All @@ -340,9 +348,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>
Expand All @@ -355,7 +363,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}
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/leftPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/client/components/legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,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,
Expand Down Expand Up @@ -71,7 +71,7 @@ class Legend extends React.Component {
disableTypography
primary={<Typography variant="body1" style={{color: '#b4c5d3' }}>&nbsp;Pod</Typography>}
/>
<ListItemSecondaryAction>
<ListItemSecondaryAction >
<Switch
classes={{
bar: classes.colorBar
Expand Down Expand Up @@ -110,7 +110,7 @@ class Legend extends React.Component {
<ListItemSecondaryAction >
<Switch
classes={{
bar: classes.colorBar
bar: classes.colorBar,
}}
onChange={this.handleToggle('ingress')}
checked={this.state.checked.indexOf('ingress') !== -1}
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/monitoring.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 0 additions & 4 deletions src/client/components/table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';



const CustomTableCell = withStyles(theme => ({
head: {
backgroundColor: theme.palette.common.black,
Expand Down Expand Up @@ -177,8 +175,6 @@ const TableData = (props) => {
</TableBody>
</Table>
</Paper>


</div>
);
}
Expand Down
5 changes: 2 additions & 3 deletions src/client/styles/drawerStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ const styles = theme => ({
marginLeft: 0,
marginRight: 0,
width: '100%',
color: 'white',
backgroundColor:'#2196f3',
},
github: {
width: 40,
Expand Down Expand Up @@ -94,9 +96,6 @@ const styles = theme => ({
'contentShift-right': {
marginRight: 0,
},
drawerTitle: {

}
});

export default styles;
105 changes: 66 additions & 39 deletions src/client/styles/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

// ---------------------------------------------------
Expand All @@ -67,6 +97,7 @@ body {
color: #F8F8F8;
text-align: left;
font-weight: bold;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
#handledrawerbutton {
Expand All @@ -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 {
Expand All @@ -125,12 +154,10 @@ body {
.tableRight {
margin-bottom: 10%;
}

.monitoring {
height: 25%;
padding: 0 15px;
}

.directions {
padding: 0 25px;
text-align: center;
Expand Down
Loading

0 comments on commit 1f1841f

Please sign in to comment.