updated rest of panel

src/components/HTTPFetchView.jsx

@@ -119,34 +119,37 @@ class Component extends PureComponent {
     // }
 
 
-
     return (
-      <Panel header="HTTP Client using OAuth Access Token" eventKey="1" collapsible={true} defaultExpanded={true}>
+      <Panel eventKey="1" collapsible={true} defaultExpanded={true}>
+        <Panel.Heading className={'panel-title'}>
+          HTTP Client using OAuth Access Token
+        </Panel.Heading>
 
         {userinfo}
-
-        <div>
-          <p>Fetch data from</p>
-          {this.renderDropdownButton()}
-          <FormGroup
-            className="gutter"
-            controlId="formBasicText"
-          >
-            <FormControl
-              type="text"
-              bsSize="large"
-              placeholder="http://httpjs.net/foo"
-              value={this.state.customEndpoint}
-              onChange={this.updateAPIendpoint.bind(this)}
-            />
-            <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID Connect Discovery. If not, please enter configuration manually.</HelpBlock>
-          </FormGroup>
-
-          <Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
-            <FontAwesome name='arrow-circle-o-right' /> Perform HTTP call
-          </Button>
-        </div>
-
+        <Panel.Body>
+          <div>
+            <p>Fetch data from</p>
+            {this.renderDropdownButton()}
+            <FormGroup
+              className="gutter"
+              controlId="formBasicText"
+            >
+              <FormControl
+                type="text"
+                bsSize="large"
+                placeholder="http://httpjs.net/foo"
+                value={this.state.customEndpoint}
+                onChange={this.updateAPIendpoint.bind(this)}
+              />
+              <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID
+                Connect Discovery. If not, please enter configuration manually.</HelpBlock>
+            </FormGroup>
+
+            <Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
+              <FontAwesome name='arrow-circle-o-right'/> Perform HTTP call
+            </Button>
+          </div>
+        </Panel.Body>
       </Panel>
     )
   }

src/components/HTTPResponseView.jsx

@@ -25,8 +25,6 @@ class Component extends PureComponent {
   updateAPIendpoint() {
 
 
-
-
   }
 
   fetchUserinfo() {
@@ -54,6 +52,7 @@ class Component extends PureComponent {
     }
     return null
   }
+
   render() {
     // console.error("Component", this.props)
 
@@ -79,24 +78,29 @@ class Component extends PureComponent {
     let loading = null
     if (this.props.http.isLoading) {
       loading = (
-        <LoadingIndicator />
+        <LoadingIndicator/>
       )
     }
 
 
     return (
-      <Panel header="HTTP Response" eventKey="1" collapsible={true} defaultExpanded={true}>
-        <div>
-          <p><code>GET</code> request to <code>{this.props.http.url}</code></p>
-          { loading }
-          {this.getErrorMessage()}
-          <Table striped bordered condensed hover>
-            <tbody>
+      <Panel eventKey="1" collapsible={true} defaultExpanded={true}>
+        <Panel.Heading className={"panel-title"}>
+          HTTP Reponse
+        </Panel.Heading>
+        <Panel.Body>
+          <div>
+            <p><code>GET</code> request to <code>{this.props.http.url}</code></p>
+            {loading}
+            {this.getErrorMessage()}
+            <Table striped bordered condensed hover>
+              <tbody>
               {headers}
-            </tbody>
-          </Table>
-          <pre>{ bodystr }</pre>
-        </div>
+              </tbody>
+            </Table>
+            <pre>{bodystr}</pre>
+          </div>
+        </Panel.Body>
       </Panel>
     )
   }

src/components/HostnameInput.jsx

@@ -6,11 +6,6 @@ import FontAwesome from 'react-fontawesome'
 
 const defaultHost = "https://auth.dataporten.no"
 
-const fontStyling = {
-  fontWeight: 'bold',
-  fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
-}
-
 class Component extends PureComponent {
 
   constructor(props) {
@@ -78,7 +73,7 @@ class Component extends PureComponent {
     console.log("STATE", this.state)
     return (
       <Panel eventKey="1" collapsible={true} expanded={expanded}>
-        <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
+        <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"}>
           OpenID Connect Discovery
         </Panel.Heading>
         <Panel.Collapse>

src/components/ServerConfigInput.jsx

@@ -5,11 +5,6 @@ import FontAwesome from 'react-fontawesome'
 
 import WhiteBox from './WhiteBox'
 
-const fontStyling = {
-  fontWeight: 'bold',
-  fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
-}
-
 class Component extends PureComponent {
 
   constructor(props) {
@@ -110,7 +105,7 @@ class Component extends PureComponent {
     let expanded = (this.state.overrideToggle === true) || this.props.expanded
     return (
       <Panel eventKey="2" collapsible={true} expanded={expanded}>
-        <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
+        <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"}>
           Configuration
         </Panel.Heading>
         <Panel.Collapse>

src/components/TokenView.jsx

@@ -35,7 +35,6 @@ class Component extends PureComponent {
     // console.error("Component", this.props)
 
 
-
     if (!this.props.token) {
       return (
         <p>No token</p>
@@ -51,13 +50,16 @@ class Component extends PureComponent {
     }
 
     return (
-      <Panel header="Access Token" eventKey="1" collapsible={true} defaultExpanded={true}>
-
-        <p>This access token expires {extxt}</p>
-        <pre>{this.props.tokenstring}</pre>
-
-        {idtokenView}
-
+      <Panel eventKey="1" collapsible={true} defaultExpanded={true}>
+        <Panel.Heading className={"panel-title"}>
+          Access Token
+        </Panel.Heading>
+        <Panel.Body>
+          <p>This access token expires {extxt}</p>
+          <pre>{this.props.tokenstring}</pre>
+
+          {idtokenView}
+        </Panel.Body>
       </Panel>
     )
   }

src/css/style.css

@@ -37,3 +37,8 @@
 	transition: all 80ms ease-in;
 	transform: scale(1.05);
 }
+
+.panel-title {
+	font-weight: bold;
+	font-family: 'colfaxBold', Helvetica, Arial, sans-serif;
+}