#1525 some fixes

frontend/css/colors.scss

@@ -46,6 +46,7 @@ $panel_light_green: #f3f9f1;
 $panel_yellow: #e99d18;
 $panel_light_yellow: #fffaf0;
 $panel_gray: #92a7b3;
+$panel_medium_light_gray: #e6e6e6;
 $panel_light_gray: #f9fbfc;
 $panel_blue: #026365;
 $panel_light_blue: #f0f8f8;

frontend/css/farm_designer/farm_designer_panels.scss

@@ -92,7 +92,7 @@
     background-color: $magenta;
   }
   &.gray-panel {
-    background-color: $gray;
+    background-color: $panel_medium_light_gray;
   }
   &.yellow-panel {
     background-color: $panel_yellow;
@@ -150,13 +150,21 @@
 .panel-title {
   height: 50px;
   .back-arrow {
+    &.black-text{
+      color: $medium_gray;
+    }
     float: left;
     text-align: center;
     font-size: 1.8rem;
     width: 50px;
     line-height: 50px;
     &:hover {
-      color: $white;
+      &.black-text{
+        color: $darker_gray !important;
+      }
+      &.white-text{
+        color: $white;
+      }
     }
   }
   .title {
@@ -226,12 +234,18 @@
     position: absolute;
     z-index: 9;
     width: 100%;
-    background: $gray;
+    background: $panel_medium_light_gray;
     padding: 0.5rem;
     button {
       margin: 0.5rem;
+      float: left;
     }
-    .buttonrow{
+    label {
+      min-width: -webkit-fill-available;
+      margin-bottom: 0px;
+      margin-left: .5rem;
+    }
+    .buttonrow {
       float:left;
     }
   }
@@ -240,7 +254,7 @@
     padding-right: 0;
     padding-left: 0;
     padding-bottom: 5rem;
-    max-height: calc(100vh - 10rem);
+    max-height: calc(100vh - 13rem);
     overflow-y: auto;
     overflow-x: hidden;
     .plant-search-item,

frontend/farm_designer/plants/designer_panel.tsx

@@ -39,25 +39,30 @@ const backToText = (to: string | undefined): string => {
   return s ? ` ${t("to")} ${s}` : "";
 };
 
+const textcolor = (color: boolean | undefined) => {
+  const coloring = color ? "black" : "white";
+  return coloring;
+};
+
 export const DesignerPanelHeader = (props: DesignerPanelHeaderProps) =>
   <div className={`panel-header ${props.panelColor}-panel`}
     style={props.style || {}}>
     <p className="panel-title">
-      <i className={`fa fa-arrow-left back-arrow ${props.blackText ? "black" : "white"}-text`}
+      <i className={`fa fa-arrow-left back-arrow ${textcolor(props.blackText)}-text`}
         title={t("go back") + backToText(props.backTo)}
         onClick={() => {
           props.backTo ? routeHistory.push(props.backTo) : history.back();
           props.onBack && props.onBack();
         }} />
       {props.title &&
-        <span className={`title ${props.blackText ? "black" : "white"}-text`}
+        <span className={`title ${textcolor(props.blackText)}-text`}
         >{t(props.title)}</span>}
       {props.children}
     </p>
 
     {(props.description || props.descriptionElement) &&
       <div
-        className={`panel-header-description ${props.panelName}-description ${props.blackText ? "black" : "white"}-text`}>
+        className={`panel-header-description ${props.panelName}-description ${textcolor(props.blackText)}-text`}>
         {props.description && t(props.description)}
         {props.descriptionElement}
       </div>}