stage

3 files changed, 82 insertions, 34 deletions

diff --git a/client/src/components/manageserver/ManageServerSettings.js b/client/src/components/manageserver/ManageServerSettings.js
index 66a5fe5..cafa00c 100644
--- a/client/src/components/manageserver/ManageServerSettings.js
+++ b/client/src/components/manageserver/ManageServerSettings.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { MDBCard, MDBCardHeader, MDBCardBody, MDBInput, MDBAlert, MDBBtn } from 'mdbreact';
 import fetch from 'node-fetch';
+import { Card, Alert, Button, InputGroup, FormControl } from 'react-bootstrap';
 
 export default class ManageServerSettings extends Component {
     state = {
@@ -43,7 +43,26 @@ export default class ManageServerSettings extends Component {
     render() {
         return(
             <React.Fragment>
-                <MDBCard>
+                <Card style={{ width: '18rem' }}>
+                    <Card.Body>
+                        <Card.Title>Server Settings</Card.Title>
+                        <Card.Text>
+                            {this.state.error &&
+                                <Alert variant="danger">{this.state.error}</Alert>
+                            }
+                            {this.state.success &&
+                                <Alert variant="success">Updated server settings successfully.</Alert>
+                            }
+                            
+                            <InputGroup aria-label="Server name" value={this.props.data.name} onChange={this.props.handleInput} className="mb-3">
+                                <FormControl id="name" placeholder="Server name" aria-label="Server name"/>
+                            </InputGroup>
+                            <Button variant="primary" onClick={this.handleSave.bind(this)} disabled={this.state.disabled}>Save</Button>
+                        </Card.Text>
+                    </Card.Body>
+                </Card>
+
+                {/* <MDBCard>
                     <MDBCardHeader>
                         <h3>Server Settings</h3>
                     </MDBCardHeader>
@@ -58,7 +77,7 @@ export default class ManageServerSettings extends Component {
                         <MDBInput id="name" label="Server name" value={this.props.data.name} onChange={this.props.handleInput} />
                         <MDBBtn color="dark" onClick={this.handleSave.bind(this)} disabled={this.state.disabled}>Save</MDBBtn>
                     </MDBCardBody>
-                </MDBCard>
+                </MDBCard> */}
             </React.Fragment>
         )
     }
diff --git a/client/src/components/navigation/NavigationBar.js b/client/src/components/navigation/NavigationBar.js
index 3962aae..0b90958 100644
--- a/client/src/components/navigation/NavigationBar.js
+++ b/client/src/components/navigation/NavigationBar.js
@@ -1,8 +1,5 @@
 import React, { Component } from 'react';
-import {
-    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBIcon,
-    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBCol
-} from 'mdbreact'
+import { Navbar, NavDropdown, Nav } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 export default class NavigationBar extends Component {
@@ -16,31 +13,48 @@ export default class NavigationBar extends Component {
     
     render() {
         return(
-            <MDBNavbar color="black" dark expand="md">
-                <MDBNavbarBrand>
-                    <strong className="white-text">Bot Dashboard</strong>
-                </MDBNavbarBrand>
-                <MDBNavbarToggler onClick={this.toggleCollapse} />
-                <MDBCollapse id="navbarCollapse" isOpen={this.state.isOpen} navbar>
-                    <MDBNavbarNav left>
-                        <MDBNavItem>
-                            <MDBNavLink to="/">Server Selection</MDBNavLink>
-                        </MDBNavItem>
-                    </MDBNavbarNav>
-                    <MDBNavbarNav right>
-                        <MDBNavItem>
-                            <MDBDropdown>
-                                <MDBDropdownToggle nav caret>
-                                    <MDBIcon icon='user' />
-                                </MDBDropdownToggle>
-                                <MDBDropdownMenu className="dropdown-default">
-                                    <MDBDropdownItem href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</MDBDropdownItem>
-                                </MDBDropdownMenu>
-                            </MDBDropdown>
-                        </MDBNavItem>
-                    </MDBNavbarNav>
-                </MDBCollapse>
-            </MDBNavbar>
+            <Navbar bg="dark" className="dark-navbar" expand="lg">
+                <Navbar.Brand>Aki Dashboard</Navbar.Brand>
+                <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                <Navbar.Collapse id="basic-navbar-nav">
+                    <Nav className="mr-auto">
+                        <Nav.Link href="/">Home</Nav.Link>
+                        <Nav.Link href="/">Server Selection</Nav.Link>
+                    </Nav>
+                    <NavDropdown title={<img
+                        src={`https://cdn.discordapp.com/avatars/${this.props.user.id}/${this.props.user.avatar}.png?size=32`}
+                        alt="Discord profile picture" className="user-icon-image" />}
+                        id="basic=nav-dropdown">
+                        <NavDropdown.Item href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</NavDropdown.Item>
+                    </NavDropdown>
+                </Navbar.Collapse>
+            </Navbar>
+
+            // <MDBNavbar color="black" dark expand="md">
+            //     <MDBNavbarBrand>
+            //         <strong className="white-text">Bot Dashboard</strong>
+            //     </MDBNavbarBrand>
+            //     <MDBNavbarToggler onClick={this.toggleCollapse} />
+            //     <MDBCollapse id="navbarCollapse" isOpen={this.state.isOpen} navbar>
+            //         <MDBNavbarNav left>
+            //             <MDBNavItem>
+            //                 <MDBNavLink to="/">Server Selection</MDBNavLink>
+            //             </MDBNavItem>
+            //         </MDBNavbarNav>
+            //         <MDBNavbarNav right>
+            //             <MDBNavItem>
+            //                 <MDBDropdown>
+            //                     <MDBDropdownToggle nav caret>
+            //                         <MDBIcon icon='user' />
+            //                     </MDBDropdownToggle>
+            //                     <MDBDropdownMenu className="dropdown-default">
+            //                         <MDBDropdownItem href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</MDBDropdownItem>
+            //                     </MDBDropdownMenu>
+            //                 </MDBDropdown>
+            //             </MDBNavItem>
+            //         </MDBNavbarNav>
+            //     </MDBCollapse>
+            // </MDBNavbar>
         );
     }
 }
diff --git a/client/src/components/selection/ServerCard.js b/client/src/components/selection/ServerCard.js
index 93c7ad6..9357374 100644
--- a/client/src/components/selection/ServerCard.js
+++ b/client/src/components/selection/ServerCard.js
@@ -2,12 +2,27 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { MDBBtn, MDBCard, MDBCardBody, MDBCardTitle, MDBCol } from 'mdbreact';
+import { Card, Col, Button, CardColumns } from 'react-bootstrap';
 
 export default class ServerCard extends Component {
     render() {
         return(
             <React.Fragment>
-                <MDBCol size={6}>
+                <Card className="p-3 dark-card" style={{ width: '18rem' }}>
+                    <Card.Img variant="top" src={this.props.guild.icon ?
+                        `https://cdn.discordapp.com/icons/${this.props.guild.id}/${this.props.guild.icon}.png?size=4096` :
+                        `https://cdn.discordapp.com/embed/avatars/3.png` } />
+                    <Card.Body>
+                        <Card.Title>{this.props.guild.name}</Card.Title>
+                        <Link to={`/server/${this.props.guild.id}`}>
+                            <Button variant="primary">Manage</Button>
+                        </Link>
+                    </Card.Body>
+                </Card>
+                
+                
+
+                {/* <MDBCol size={6}>
                     <MDBCard className="server-card">
                         <MDBCardBody>
                             <img
@@ -26,7 +41,7 @@ export default class ServerCard extends Component {
                             </Link>
                         </MDBCardBody>
                     </MDBCard>
-                </MDBCol>
+                </MDBCol> */}
             </React.Fragment>
         )
     }