Merge pull request #2483 from LD4P/sidebar-color

src/components/editor/leftNav/PanelResourceNav.jsx

@@ -1,14 +1,19 @@
 // Copyright 2019 Stanford University see LICENSE for license
 
 import React from 'react'
+import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import PanelPropertyNav from './PanelPropertyNav'
 import ActivePanelPropertyNav from './ActivePanelPropertyNav'
 import { selectCurrentPropertyKey } from 'selectors/index'
-import { useSelector } from 'react-redux'
 
 const PanelResourceNav = (props) => {
   const currentPropertyKey = useSelector((state) => selectCurrentPropertyKey(state, props.resource?.key))
+  const isTemplate = props.resource.subjectTemplateKey === 'sinopia:template:resource'
+  const classNames = ['resource-nav-list-group']
+  if (isTemplate) {
+    classNames.push('template')
+  }
 
   const navItems = props.resource.propertyKeys.map((propertyKey) => {
     if (propertyKey === currentPropertyKey) {
@@ -17,8 +22,8 @@ const PanelResourceNav = (props) => {
     return (<PanelPropertyNav key={propertyKey} propertyKey={propertyKey} />)
   })
   return (
-    <div className="col-sm-3">
-      <div className="resource-nav-list-group">
+    <div className="col-sm-3 left-nav">
+      <div className={classNames.join(' ')}>
         <ul>
           { navItems }
         </ul>

src/styles/main.scss

@@ -1,5 +1,4 @@
  /* Copyright 2019 Stanford University see LICENSE for license */
-
 // Color palette:
 $swirl: #d7cec4;
 $pampas: #f7f4f1;
@@ -8,6 +7,8 @@ $reno-sand: #b26f16;
 $orient: #00548f;
 $spring-wood: #f8f6ef;
 $bright-red: #b1020f;
+$vanilla: #d0c1a8;
+$blue: #00548f;
 
 $modal-backdrop-bg: white;
 $modal-backdrop-opacity: 80%;
@@ -37,6 +38,11 @@ $lookup-search-result-bg: $pampas;
 @import "~bootstrap/scss/bootstrap";
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
 
+// So that the primary button matches the links, rather than $reno-sand
+.btn-primary {
+  @include button-variant($blue, $blue);
+}
+
 .left-space {
     margin-left: 3px;
 }

src/styles/resourceNav.scss

@@ -1,15 +1,30 @@
-.resource-nav-list-group {
-  position: sticky;
-  top: 0;
-  overflow-y: auto;
-  height: 100vh;
+.left-nav {
+  .resource-nav-list-group {
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    height: 100vh;
 
-  li {
-    list-style-type: none;
+    // Templates have a different color than
+    .template {
+      .btn-primary {
+        background-color: $reno-sand;
+        border-color: $reno-sand;
+      }
+    }
 
-    &.li-checked {
-      list-style-type: '\2713';
+    .btn-primary {
+      background-color: $vanilla;
+      border-color: $vanilla;
     }
-  }
 
+    li {
+      list-style-type: none;
+
+      &.li-checked {
+        list-style-type: '\2713';
+      }
+    }
+
+  }
 }