web: update buttons

web/frontend/src/components/CaseBuilder/Buses.tsx

@@ -6,11 +6,7 @@
 
 import SectionHeader from "../Common/SectionHeader/SectionHeader";
 import SectionButton from "../Common/Buttons/SectionButton";
-import {
+import { faDownload, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
-  faDownload,
-  faPlus,
-  faUpload,
-} from "@fortawesome/free-solid-svg-icons";
 import { offerDownload } from "../Common/io";
 import FileUploadElement from "../Common/Buttons/FileUploadElement";
 import { useRef } from "react";
@@ -20,16 +16,11 @@ import DataTable, {
   generateCsv,
   generateTableColumns,
   generateTableData,
-  parseCsv,
+  parseCsv
 } from "../Common/Forms/DataTable";
 
 import { ColumnDefinition } from "tabulator-tables";
-import {
+import { changeBusData, createBus, deleteBus, renameBus } from "../../core/Operations/busOps";
-  changeBusData,
-  createBus,
-  deleteBus,
-  renameBus,
-} from "../../core/Operations/busOps";
 import { CaseBuilderSectionProps } from "./CaseBuilder";
 import { UnitCommitmentScenario } from "../../core/Data/types";
 
@@ -128,13 +119,13 @@ function BusesComponent(props: CaseBuilderSectionProps) {
   return (
     <div>
       <SectionHeader title="Buses">
-        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
         <SectionButton
           icon={faDownload}
           tooltip="Download"
           onClick={onDownload}
         />
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
       <DataTable
         onRowDeleted={onDelete}

web/frontend/src/components/CaseBuilder/Header.tsx

@@ -9,6 +9,7 @@ import SiteHeaderButton from "../Common/Buttons/SiteHeaderButton";
 import { useRef } from "react";
 import FileUploadElement from "../Common/Buttons/FileUploadElement";
 import { UnitCommitmentScenario } from "../../core/Data/types";
+import { faDownload, faGear, faRotateLeft, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
 
 interface HeaderProps {
   onClear: () => void;
@@ -33,13 +34,26 @@ function Header(props: HeaderProps) {
         <h1>UnitCommitment.jl</h1>
         <h2>Case Builder</h2>
         <div className={styles.buttonContainer}>
-          <SiteHeaderButton title="Undo" onClick={props.onUndo} />
+          <SiteHeaderButton title="Load" icon={faUpload} onClick={onLoad} />
-          <SiteHeaderButton title="Clear" onClick={props.onClear} />
+          <SiteHeaderButton
-          <SiteHeaderButton title="Load" onClick={onLoad} />
+            title="Save"
-          <SiteHeaderButton title="Save" onClick={props.onSave} />
+            icon={faDownload}
+            onClick={props.onSave}
+          />
+          <SiteHeaderButton
+            title="Undo"
+            icon={faRotateLeft}
+            onClick={props.onUndo}
+          />
+          <SiteHeaderButton
+            title="Clear"
+            icon={faTrash}
+            onClick={props.onClear}
+          />
           <SiteHeaderButton
             title="Solve"
             variant="primary"
+            icon={faGear}
             onClick={props.onSolve}
           />
         </div>

web/frontend/src/components/CaseBuilder/ProfiledUnits.tsx

@@ -175,13 +175,13 @@ const ProfiledUnitsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Profiled units">
-        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
         <SectionButton
           icon={faDownload}
           tooltip="Download"
           onClick={onDownload}
         />
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
       <DataTable
         onRowDeleted={onDelete}

web/frontend/src/components/CaseBuilder/Psload.tsx

@@ -153,13 +153,13 @@ const PriceSensitiveLoadsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Price-sensitive loads">
-        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
         <SectionButton
           icon={faDownload}
           tooltip="Download"
           onClick={onDownload}
         />
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
       <DataTable
         onRowDeleted={onDelete}

web/frontend/src/components/CaseBuilder/StorageUnits.tsx

@@ -213,13 +213,13 @@ const StorageUnitsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Storage units">
-        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
         <SectionButton
           icon={faDownload}
           tooltip="Download"
           onClick={onDownload}
         />
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
       <DataTable
         onRowDeleted={onDelete}

web/frontend/src/components/CaseBuilder/ThermalUnits.tsx

@@ -229,13 +229,13 @@ const ThermalUnitsComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Thermal units">
-        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
         <SectionButton
           icon={faDownload}
           tooltip="Download"
           onClick={onDownload}
         />
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
       <DataTable
         onRowDeleted={onDelete}

web/frontend/src/components/CaseBuilder/TransmissionLines.tsx

@@ -181,13 +181,13 @@ const TransmissionLinesComponent = (props: CaseBuilderSectionProps) => {
   return (
     <div>
       <SectionHeader title="Transmission lines">
-        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
+        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
         <SectionButton
           icon={faDownload}
           tooltip="Download"
           onClick={onDownload}
         />
-        <SectionButton icon={faUpload} tooltip="Upload" onClick={onUpload} />
+        <SectionButton icon={faPlus} tooltip="Add" onClick={onAdd} />
       </SectionHeader>
       <DataTable
         onRowDeleted={onDelete}

web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css

@@ -5,16 +5,33 @@
  */
 
 .SiteHeaderButton {
-  padding: 6px 24px;
+  padding: 6px 20px;
-  margin: 0 0 0 8px;
+  margin: 0 0 0 0px;
   line-height: 24px;
   border: var(--box-border);
   box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
+  border-radius: 0;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
-  font-size: 12px;
+  font-size: 14px;
+}
+
+.SiteHeaderButton:not(:last-child) {
+  border-right: none;
+}
+
+.SiteHeaderButton:first-child {
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+
+.SiteHeaderButton:last-child {
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.SiteHeaderButton:only-child {
+  border-radius: var(--border-radius);
+  border-right: var(--box-border);
 }
 
 .light {

web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx

@@ -5,13 +5,17 @@
  */
 
 import styles from "./SiteHeaderButton.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 function SiteHeaderButton({
   title,
+  icon,
   onClick,
   variant = "light",
 }: {
   title: string;
+  icon: IconDefinition;
   onClick?: () => void;
   variant?: "light" | "primary";
 }) {
@@ -20,9 +24,10 @@ function SiteHeaderButton({
   return (
     <button
       className={`${styles.SiteHeaderButton} ${variantClass}`}
+      title={title}
       onClick={onClick}
     >
-      {title}
+      <FontAwesomeIcon icon={icon} />
     </button>
   );
 }