Update header to bootstrap nav component and include GitHub and optio…

…ns modal button
RESTEDClient · Nov 3, 2024 · f34f7aa · f34f7aa
1 parent 208cdb6
commit f34f7aa
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 29 deletions.
diff --git a/src/components/Fonticon/StyledComponents.js b/src/components/Fonticon/StyledComponents.js
@@ -7,7 +7,7 @@ export const StyledFonticon = styled(Clearfix)`
     display: inline-block;
   }
   i {
-    margin-right: 2px;
+    margin-right: 4px;
   }
 `;
 
diff --git a/src/components/Header/StyledComponents.js b/src/components/Header/StyledComponents.js
@@ -2,21 +2,23 @@ import styled, { css } from 'styled-components';
 
 /* eslint-disable import/prefer-default-export */
 export const StyledHeader = styled.header`
-  margin-top: 20px;
-  margin-bottom: 30px;
+  margin: 20px 0px 0px 0px;
+  color: black;
 
-  img {
-    margin-top: -7px;
-    margin-right: 10px;
+  .navbar-brand {
+    display: flex;
+    alignItems: center;
+    gap: 8px;
   }
 
-  h1 {
-    color: black;
+  h3, li a {
+    color: rgb(51, 51, 51) !important;
+    margin: 0;
   }
 
   ${props => props.darkMode && css`
-    h1 {
-      color: white;
+    h3, li a {
+      color: white !important;
     }
     img {
       filter: invert(100%);

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -1,21 +1,42 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { Nav, Navbar, NavItem } from 'react-bootstrap';
+
 import { isDarkTheme } from 'store/options/selectors';
+import { showOptionsModal } from 'utils/modal';
+import Fonticon from 'components/Fonticon';
+import * as modalActions from 'store/modal/actions';
 
 import { StyledHeader } from './StyledComponents';
 
-export function Header({ darkMode }) {
+export function Header({ darkMode, ...props }) {
   return (
     <StyledHeader darkMode={darkMode}>
-      <h1>
-        <img
-          className="logo"
-          role="presentation"
-          height="40"
-          src="img/rested-logo.png"
-        />
-        <span>RESTED</span>
-      </h1>
+      <Navbar fluid inverse={darkMode}>
+        <Navbar.Header>
+          <Navbar.Brand>
+            <img
+              className="logo"
+              role="presentation"
+                  height="30"
+              src="img/rested-logo.png"
+            />
+            <h3>RESTED</h3>
+          </Navbar.Brand>
+        </Navbar.Header>
+        <Nav pullRight>
+          <NavItem onClick={() => {
+            showOptionsModal(props)
+          }}>
+            <Fonticon icon="cog" />
+            Options
+          </NavItem>
+          <NavItem href="https://github.com/RESTEDClient/RESTED" target="_blank">
+            <Fonticon icon="github" />
+            GitHub
+          </NavItem>
+        </Nav>
+      </Navbar>
     </StyledHeader>
   );
 }
@@ -28,5 +49,4 @@ const mapStateToProps = state => ({
   darkMode: isDarkTheme(state),
 });
 
-export default connect(mapStateToProps)(Header);
-
+export default connect(mapStateToProps, modalActions)(Header);
diff --git a/src/components/Request/Titlebar.js b/src/components/Request/Titlebar.js
@@ -7,7 +7,7 @@ import UUID from 'uuid-js';
 
 import { immutableCollectionShape } from 'propTypes/collection';
 import IconButton from 'components/IconButton';
-import { showChooseCollectionModal, showOptionsModal } from 'utils/modal';
+import { showChooseCollectionModal } from 'utils/modal';
 import { getCollections } from 'store/collections/selectors';
 import { getCollectionsMinimized } from 'store/options/selectors';
 import { getEditingRequest, isEditMode } from 'store/config/selectors';
@@ -86,12 +86,6 @@ function Titlebar(props) {
         icon="plus"
         className="pull-right hidden-xs"
       />
-      <IconButton
-        onClick={() => showOptionsModal(props)}
-        tooltip="Options"
-        icon="cog"
-        className="pull-right"
-      />
       <IconButton
         onClick={() => toggleCollectionsExpanded(props)}
         tooltip={`${collectionsMinimized ? 'Show' : 'Hide'} collections`}

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -132,10 +132,14 @@ export const THEMES = [
  * being darker than the others
  */
 export const DARK_THEMES = [
+  'cosmo',
   'cyborg',
   'darkly',
+  'flatly',
+  'sandstone',
   'slate',
   'superhero',
+  'yeti'
 ];
 
 /**