change icon button style part III

FarmBot · Dec 7, 2023 · 5cfdb75 · 5cfdb75
1 parent 9c29f88
commit 5cfdb75
Show file tree

Hide file tree

Showing 42 changed files with 208 additions and 130 deletions.
diff --git a/frontend/controls/move/move_controls.tsx b/frontend/controls/move/move_controls.tsx
@@ -20,7 +20,7 @@ export const MoveControls = (props: MoveControlsProps) => {
   const { busy, locked } = props.bot.hardware.informational_settings;
   return <div className={"move"}>
     <Popover position={Position.LEFT_TOP} className={"move-settings"}
-      target={<i className="fa fa-gear" />}
+      target={<i className={"fa fa-gear fb-icon-button"} />}
       content={<MoveWidgetSettingsMenu
         dispatch={props.dispatch}
         getConfigValue={props.getConfigValue}

diff --git a/frontend/css/farm_designer/farm_designer.scss b/frontend/css/farm_designer/farm_designer.scss
@@ -684,7 +684,7 @@
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
-      max-width: 134px;
+      max-width: 140px;
       padding: 1rem;
       background: rgba(255, 255, 255, .75);
       border-radius: 5px;
@@ -775,7 +775,7 @@
   }
   .caret-menu-button {
     display: inline;
-    margin-left: 0.25rem;
+    margin-left: 0.1rem;
     font-weight: bold;
     font-size: medium;
     cursor: pointer;
@@ -979,7 +979,6 @@
   .fa-caret-left,
   .fa-caret-right,
   .fa-step-forward {
-    line-height: 1.3rem;
     font-weight: bold;
     vertical-align: middle;
   }
@@ -993,11 +992,11 @@
   }
   .fa-step-backward,
   .fa-caret-left {
-    margin-right: 1rem;
+    margin-right: 0.1rem;
   }
   .fa-caret-right,
   .fa-step-forward {
-    margin-left: 1rem;
+    margin-left: 0.1rem;
   }
 }
 

diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -536,12 +536,12 @@
     }
     .plant-slug-bulk-update {
       .fa-pencil {
-        margin-left: 1rem;
+        margin-left: 0.25rem;
       }
       .fb-button {
         float: none;
         height: 2rem;
-        line-height: 1.75rem;
+        line-height: 0;
         margin-left: 1rem;
         vertical-align: top;
       }
@@ -1774,7 +1774,7 @@ li {
     .fa-gear {
       color: $dark_gray;
       margin-right: 1rem;
-      margin-top: 2rem;
+      margin-top: 1.5rem;
     }
   }
 }
@@ -1965,6 +1965,7 @@ li {
 }
 
 .non-layer-config-toggle {
+  margin-top: 0.1rem;
   &.disabled {
     input {
       background: $gray !important;
@@ -2742,10 +2743,10 @@ li {
   label {
     margin-top: 0 !important;
   }
-  i {
+  .fa-external-link {
     position: absolute;
-    right: 0.5rem;
-    line-height: 4rem;
+    top: 1rem;
+    right: 0;
   }
   .active-curve-name {
     position: relative;
@@ -3211,17 +3212,6 @@ li {
 }
 
 .designer-sequence-editor-panel {
-  .green,
-  .red {
-    .panel-title {
-      .fa-paint-brush,
-      .fa-expand,
-      .fa-magic,
-      .fa-spinner {
-        color: $white;
-      }
-    }
-  }
   .panel-content {
     .sequence-editor-content {
       hr {
@@ -3247,6 +3237,23 @@ li {
   }
 }
 
+.weed-info-panel,
+.point-info-panel,
+.designer-regimen-editor-panel,
+.designer-sequence-editor-panel {
+  .green,
+  .red {
+    .panel-title {
+      .fa-paint-brush,
+      .fa-expand,
+      .fa-magic,
+      .fa-spinner {
+        color: $white;
+      }
+    }
+  }
+}
+
 .designer-regimen-scheduler-panel {
   .panel-content {
     display: inline-block;

diff --git a/frontend/css/global.scss b/frontend/css/global.scss
@@ -1108,6 +1108,7 @@ ul {
   }
 }
 
+.sequence-description-wrapper,
 .button-group,
 .panel-header-icon-group {
   .fa-spinner {
@@ -1765,8 +1766,8 @@ ul {
       .fa-trash {
         display: inline;
         color: $darkest_red;
-        margin-left: 7px;
-        padding: 0.25rem;
+        margin-left: 6px;
+        padding: 0.5rem;
         line-height: 2rem;
       }
       .log-verbosity-saucer {
@@ -1864,7 +1865,7 @@ ul {
 .logs-tab {
   .thin-search-wrapper {
     display: inline-block;
-    width: 95%;
+    width: 94%;
     background: $white;
   }
   .logs-settings-menu-button {
@@ -2371,9 +2372,6 @@ ul {
 }
 
 .status-icon {
-  padding: 0.5rem;
-  float: right !important;
-  font-size: 1.75rem;
   &.ok {
     color: $green;
   }

diff --git a/frontend/css/image_flipper.scss b/frontend/css/image_flipper.scss
@@ -207,7 +207,6 @@
 .photos-footer,
 .image-show-menu {
   i {
-    margin: 0.25rem;
     background: none !important;
     &.green {
       color: $green;
@@ -216,6 +215,16 @@
       color: $medium_gray;
     }
   }
+  .fb-icon-button {
+    &:hover {
+      background: rgba(255, 255, 255, 0.2) !important;
+    }
+  }
+  .shown-in-map-details {
+    i {
+      margin-right: 0.25rem;
+    }
+  }
 }
 
 .this-image-section {

diff --git a/frontend/css/navbar.scss b/frontend/css/navbar.scss
@@ -194,7 +194,8 @@ nav {
       p {
         color: $white;
       }
-      box-shadow: 0 0 10px $translucent5, 0 0 5px inset rgba(255, 255, 255, 0.2);
+      filter: brightness(1.05);
+      box-shadow: inset 0 -1px 0px 0px $translucent2, 0 0 5px $translucent15, inset 0 0 5px rgba(255, 255, 255, 0.3);
     }
   }
   .nav-coordinates {
@@ -272,9 +273,13 @@ nav {
     }
   }
   .nav-name {
-    padding: 1rem;
-    border-radius: 1rem;
-    margin-top: -1rem;
+    padding: 0.75rem;
+    border-radius: 5px;
+    margin-top: -0.75rem;
+    font-weight: normal;
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
     &:after{
       content: attr(data-title);
       display: block;
@@ -344,6 +349,16 @@ nav {
   .bp5-popover-arrow {
     visibility: hidden;
   }
+  .fa-user {
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: 0.75rem;
+    margin-top: -0.75rem;
+    border-radius: 5px;
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
 }
 
 .mobile-menu {

diff --git a/frontend/css/regimens.scss b/frontend/css/regimens.scss
@@ -137,7 +137,6 @@
 
 .regimen-control {
   position: absolute;
-  top: 1rem;
   right: 1rem;
 }
 

diff --git a/frontend/css/sequences.scss b/frontend/css/sequences.scss
@@ -291,13 +291,13 @@
   .fa-magic,
   .fa-spinner {
     position: absolute;
-    top: 1.25rem;
-    right: 6rem;
+    top: 1rem;
+    right: 6.5rem;
   }
   .fa-pencil,
   .fa-eye {
     position: absolute;
-    top: 1.25rem;
+    top: 1rem;
     right: 4rem;
   }
 }
@@ -742,6 +742,7 @@
     .fa-trash {
       color: $darkest_red;
       margin-top: 0.5rem;
+      margin-left: -1rem;
     }
     .numeric-variable-input,
     .text-variable-input {
@@ -1152,7 +1153,7 @@
       .folder-name-input {
         display: flex;
         button {
-          top: 0.5rem;
+          margin-top: 0.75rem;
           width: auto;
           height: 2rem;
           i {
@@ -1504,4 +1505,9 @@
   &:hover {
     background: rgba(255, 255, 255, 0.2);
   }
+  &.light {
+    &:hover {
+      background: rgba(0, 0, 0, 0.08);
+    }
+  }
 }
diff --git a/frontend/curves/edit_curve.tsx b/frontend/curves/edit_curve.tsx
@@ -165,7 +165,7 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
             <Popover
               isOpen={this.state.scale}
               popoverClassName={"curve-action-popover"}
-              target={<button className={"transparent-button"}
+              target={<button className={"transparent-button light"}
                 onClick={this.toggle("scale")}>
                 {t("scale")}
               </button>}
@@ -174,7 +174,7 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
             <Popover
               isOpen={this.state.templates}
               popoverClassName={"curve-action-popover"}
-              target={<button className={"transparent-button"}
+              target={<button className={"transparent-button light"}
                 onClick={this.toggle("templates")}>
                 {t("templates")}
               </button>}

diff --git a/frontend/devices/connectivity/connectivity_row.tsx b/frontend/devices/connectivity/connectivity_row.tsx
@@ -24,9 +24,9 @@ const colorLookup: Record<string, string> = {
 };
 
 const iconLookup: Record<string, string> = {
-  true: "check",
-  false: "times",
-  undefined: "question"
+  true: "fa-check",
+  false: "fa-times",
+  undefined: "fa-question"
 };
 
 export function ConnectivityRow(props: StatusRowProps) {
@@ -44,7 +44,7 @@ export function ConnectivityRow(props: StatusRowProps) {
     ? "saucer active grey"
     : `diagnosis-indicator saucer active ${colorClass} ${hoverClass}`;
   const icon = iconLookup["" + connectionStatus];
-  const iconClass = syncStatus == "syncing" ? "spinner fa-pulse" : icon;
+  const iconClass = syncStatus == "syncing" ? "fa-spinner fa-pulse" : icon;
 
   const getTitle = (header?: boolean) => {
     if (header) { return t("Status"); }
@@ -65,7 +65,7 @@ export function ConnectivityRow(props: StatusRowProps) {
         title={syncStatus ? syncText(syncStatus) : getTitle(props.header)}
         onMouseEnter={hoverOver(connectionName)}
         onMouseLeave={hoverOver(undefined)}>
-        {!props.header && <i className={`fa fa-${iconClass}`} />}
+        {!props.header && <i className={`fa ${iconClass}`} />}
       </div>
       {!props.header &&
         <div className={`saucer-connector ${connectorColorClass}`} />}

diff --git a/frontend/devices/connectivity/diagnosis.tsx b/frontend/devices/connectivity/diagnosis.tsx
@@ -32,17 +32,17 @@ const diagnosisStatus = (flags: ConnectionStatusFlags): boolean =>
 export const DiagnosisSaucer = (props: DiagnosisSaucerProps) => {
   const diagnosisBoolean = diagnosisStatus(props);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
-  const diagnosisIcon = diagnosisBoolean ? "check" : "times";
+  const diagnosisIcon = diagnosisBoolean ? "fa-check" : "fa-times";
   const spinner = props.syncStatus == "syncing";
-  const diagnosisIconClass = spinner ? "spinner fa-pulse" : diagnosisIcon;
+  const diagnosisIconClass = spinner ? "fa-spinner fa-pulse" : diagnosisIcon;
   const title = diagnosisBoolean ? t("Ok") : t("Error");
   const classes = [
     "diagnosis-indicator", "saucer", "active", diagnosisColor, props.className,
   ];
   return <div className={classes.join(" ")}
     onClick={props.onClick}
     title={props.syncStatus ? syncText(props.syncStatus) : title}>
-    <i className={`fa fa-${diagnosisIconClass}`} />
+    <i className={`fa ${diagnosisIconClass}`} />
   </div>;
 };
 

diff --git a/frontend/farm_designer/map/legend/layer_toggle.tsx b/frontend/farm_designer/map/legend/layer_toggle.tsx
@@ -33,7 +33,8 @@ export function LayerToggle(props: LayerToggleProps) {
           <Popover
             position={Position.BOTTOM_RIGHT}
             className={"caret-menu-button"}
-            target={<i className="fa fa-caret-down" title={t(title)} />}
+            target={<i className={"fa fa-caret-down fb-icon-button"}
+              title={t(title)} />}
             content={popover} />}
       </span>
     </label>

diff --git a/frontend/farm_events/farm_events.tsx b/frontend/farm_events/farm_events.tsx
@@ -36,7 +36,7 @@ const resourceLink =
       onClick={resourceKind == "Regimen"
         ? setActiveRegimenByName
         : setActiveSequenceByName}>
-      <i className="fa fa-external-link" />
+      <i className="fa fa-external-link fb-icon-button" />
     </Link>;
   };
 
@@ -83,7 +83,7 @@ export class RawFarmEvents
           </div>
           <Link className={"edit-link"}
             to={Path.farmEvents(occur.id || "UNSAVED_EVENT")}>
-            <i className="fa fa-pencil-square-o edit-icon" />
+            <i className={"fa fa-pencil-square-o edit-icon fb-icon-button"} />
           </Link>
         </div>;
       });