updated rest of panel

src/components/HTTPFetchView.jsx

@@ -119,12 +119,14 @@ 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}
-
+        <Panel.Body>
           <div>
             <p>Fetch data from</p>
             {this.renderDropdownButton()}
@@ -139,14 +141,15 @@ class Component extends PureComponent {
                 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>
+              <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
+              <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}>
+      <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 }
+            {loading}
             {this.getErrorMessage()}
             <Table striped bordered condensed hover>
               <tbody>
               {headers}
               </tbody>
             </Table>
-          <pre>{ bodystr }</pre>
+            <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}>
-
+      <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;
+}