Panel polish

ui/src/kapacitor/components/KapacitorRules.js

@@ -54,6 +54,7 @@ const KapacitorRules = ({
 
   return (
     <PageContents source={source}>
+      <div className="panel">
         <div className="panel-heading">
           <h2 className="panel-title">
             {builderHeader}
@@ -68,21 +69,20 @@ const KapacitorRules = ({
             </Link>
           </div>
         </div>
+        <div className="panel-body">
           <KapacitorRulesTable
             source={source}
             rules={builderRules}
             onDelete={onDelete}
             onChangeRuleStatus={onChangeRuleStatus}
           />
-
+        </div>
-      <div className="row">
+      </div>
-        <div className="col-md-12">
       <div className="panel">
         <div className="panel-heading">
           <h2 className="panel-title">
             {scriptsHeader}
           </h2>
-              <div className="u-flex u-ai-center u-jc-space-between">
           <Link
             to={`/sources/${source.id}/tickscript/new`}
             className="btn btn-sm btn-success"
@@ -91,7 +91,7 @@ const KapacitorRules = ({
             <span className="icon plus" /> Write TICKscript
           </Link>
         </div>
-            </div>
+        <div className="panel-body">
           <TasksTable
             source={source}
             tasks={rules}
@@ -100,7 +100,6 @@ const KapacitorRules = ({
           />
         </div>
       </div>
-      </div>
     </PageContents>
   )
 }
@@ -125,12 +124,10 @@ const PageContents = ({children}) =>
       <div className="container-fluid">
         <div className="row">
           <div className="col-md-12">
-            <div className="panel">
             {children}
           </div>
         </div>
       </div>
-      </div>
     </FancyScrollbar>
   </div>
 

ui/src/kapacitor/components/KapacitorRulesTable.js

@@ -15,7 +15,6 @@ const {
 } = TASKS_TABLE
 
 const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
-  <div className="panel-body">
   <table className="table v-center table-highlight">
     <thead>
       <tr>
@@ -43,7 +42,6 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
       })}
     </tbody>
   </table>
-  </div>
 
 const handleDelete = (rule, onDelete) => onDelete(rule)
 

ui/src/kapacitor/components/TasksTable.js

@@ -8,7 +8,6 @@ import {TASKS_TABLE} from 'src/kapacitor/constants/tableSizing'
 const {colName, colType, colEnabled, colActions} = TASKS_TABLE
 
 const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) =>
-  <div className="panel-body">
   <table className="table v-center table-highlight">
     <thead>
       <tr>
@@ -34,7 +33,6 @@ const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) =>
       })}
     </tbody>
   </table>
-  </div>
 
 const handleDelete = (task, onDelete) => onDelete(task)
 

ui/src/style/theme/_panels.scss

@@ -9,6 +9,7 @@ $panel-gutter: 30px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  margin-bottom: $panel-gutter;
 }
 
 .panel-heading {