dce-reactkit 3.2.2-beta.7 → 3.2.2-beta.9

package/dist/esm/types/components/ItemPicker/index.d.ts

@@ -13,6 +13,7 @@ declare type Props = {
      *   values updated
      */
     onChanged: (updatedItems: PickableItem[]) => void;
+    noBottomMargin?: boolean;
 };
 declare const ItemPicker: React.FC<Props>;
 export default ItemPicker;

package/dist/index.d.ts

@@ -364,6 +364,7 @@ declare type Props$3 = {
      *   values updated
      */
     onChanged: (updatedItems: PickableItem[]) => void;
+    noBottomMargin?: boolean;
 };
 declare const ItemPicker: React.FC<Props$3>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.2.2-beta.7",
+  "version": "3.2.2-beta.9",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ItemPicker/index.tsx

@@ -31,6 +31,8 @@ type Props = {
    *   values updated
    */
   onChanged: (updatedItems: PickableItem[]) => void,
+  // If true, don't add margin to bottom of item picker
+  noBottomMargin?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -49,6 +51,7 @@ const ItemPicker: React.FC<Props> = (props) => {
     title,
     items,
     onChanged,
+    noBottomMargin,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -66,6 +69,7 @@ const ItemPicker: React.FC<Props> = (props) => {
   return (
     <TabBox
       title={title}
+      noBottomMargin={noBottomMargin}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList

package/src/components/LogReviewer.tsx

@@ -206,6 +206,7 @@ const style = `
     border: 0.05rem solid black;
     border-radius: 0.5rem;
     overflow: hidden;
+    padding: 0.7rem;
 
     /* Solid background */
     background-color: white;
@@ -236,6 +237,23 @@ const style = `
     /* Vertical scroll */
     overflow-y: auto;
   }
+
+  .LogReviewer-header-close-button {
+    border: 0 !important;
+    background-color: transparent !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin: 0 !important;
+    color: #333 !important;
+  }
+  .LogReviewer-header-close-button:hover {
+    border: 0 !important;
+    background-color: transparent !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin: 0 !important;
+    color: #000 !important;
+  }
 `;
 
 /*------------------------------------------------------------------------*/
@@ -735,12 +753,12 @@ const LogReviewer: React.FC<Props> = (props) => {
         <h3 className="m-0">
           Filters:
         </h3>
-        <div className="LogReviewer-filter-toggle-buttons">
+        <div className="LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0">
           {/* Date */}
           <button
             type="button"
             id="LogReviewer-toggle-date-filter-drawer"
-            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle date filter drawer"
             onClick={() => {
               dispatch({
@@ -759,7 +777,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-context-filter-drawer"
-            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle context filter drawer"
             onClick={() => {
               dispatch({
@@ -780,7 +798,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             <button
               type="button"
               id="LogReviewer-toggle-tag-filter-drawer"
-              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer} me-2`}
+              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
               aria-label="toggle tag filter drawer"
               onClick={() => {
                 dispatch({
@@ -800,7 +818,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-action-filter-drawer"
-            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle action and error filter drawer"
             onClick={() => {
               dispatch({
@@ -819,7 +837,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-advanced-filter-drawer"
-            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer}`}
+            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'}`}
             aria-label="toggle advanced filter drawer"
             onClick={() => {
               dispatch({
@@ -1993,19 +2011,24 @@ const LogReviewer: React.FC<Props> = (props) => {
     const dataTable = (
       logs.length === 0
         ? (
-          <div className="alert alert-warning">
-            <h4 className="m-1">
-              No Logs to Show
-            </h4>
-            <div>
-              Either your filters are too strict or no matching logs have been
-              created yet.
+          <>
+            <h3 className="m-0">
+              Matching Logs:
+            </h3>
+            <div className="alert alert-warning text-center">
+              <h4 className="m-1">
+                No Logs to Show
+              </h4>
+              <div>
+                Either your filters are too strict or no matching logs have been
+                created yet.
+              </div>
             </div>
-          </div>
+          </>
         )
         : (
           <IntelliTable
-            title="Matching Logs"
+            title="Matching Logs:"
             id="logs"
             data={logs}
             columns={columns}
@@ -2032,7 +2055,7 @@ const LogReviewer: React.FC<Props> = (props) => {
       <div className="LogReviewer-inner-container">
         <div className="LogReviewer-header">
           <div className="LogReviewer-header-title">
-            <h3 className="m-0">
+            <h3 className="text-center m-0">
               Log Review Dashboard
             </h3>
           </div>
@@ -2041,12 +2064,6 @@ const LogReviewer: React.FC<Props> = (props) => {
             className="LogReviewer-header-close-button btn btn-dark btn-lg"
             aria-label="close log reviewer panel"
             onClick={onClose}
-            style={{
-              border: 0,
-              backgroundColor: 'transparent',
-              padding: 0,
-              margin: 0,
-            }}
           >
             <FontAwesomeIcon
               icon={faTimes}