remove strong and weak labels on gradient strength (#159)

* switch sides of strong and weak on gradient strength

* remove weak and strong labels

* update wording for decay length

* update strength description text (also we should be pulling this from firebase when available

* try removing gradient description

* remove unused prop

* fix re-run button position

* set default strength_max to 1

* account for expanded description

Author: ascibisz

src/App.css

@@ -4,6 +4,7 @@
     --recipe-select-height: 52px;
     --tab-height: 62px;
     --footer-height: 64px;
+    --description-height: 102px;
 }
 
 .app-container {

src/components/GradientInput/index.tsx

@@ -16,7 +16,7 @@ interface GradientInputProps {
 };
 
 const GradientInput = (props: GradientInputProps): JSX.Element => {
-    const { displayName, description, gradientOptions, defaultValue } = props;
+    const { displayName, gradientOptions, defaultValue } = props;
     const selectedRecipeId = useSelectedRecipeId();
     const editRecipe = useEditRecipe();
     const getCurrentValue = useGetCurrentValue();
@@ -55,7 +55,6 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
             <div className="input-switch">
                 <div className="input-label">
                     <strong>{displayName}</strong>
-                    <small>{description}</small>
                 </div>
                 <div className="input-content">
                     <Select
@@ -85,11 +84,9 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
                         <div className="slider-labels">
                             <small className="slider-label-left">
                                 <span>{gradientStrengthData.min}</span>
-                                <span>weak</span>
                             </small>
                             <small className="slider-label-right" style={{ marginRight: "5px" }}>
                                 <span>{gradientStrengthData.max}</span>
-                                <span>strong</span>
                             </small>
                         </div>
                     </div>

src/components/RecipeForm/style.css

@@ -4,6 +4,6 @@
     justify-content: space-between;
     height: calc(
         100vh - var(--header-height) - var(--recipe-select-height) -
-            var(--tab-height) - var(--footer-height)
+            var(--tab-height) - var(--footer-height) - var(--description-height)
     );
 }

src/utils/gradient.ts

@@ -69,7 +69,7 @@ export function deriveGradientStrength(
     if (!opt?.strength_path) return undefined;
 
     const storeMin = opt.strength_min ?? 0;
-    const storeMax = opt.strength_max ?? 5;
+    const storeMax = opt.strength_max ?? 1;
 
     const uiMin = storeMin;
     const uiMax = storeMax;
@@ -81,10 +81,11 @@ export function deriveGradientStrength(
             ? storeRaw
             : opt.strength_default ?? storeMin;
     const uiValue = round2(clampUi(storeNum));
+    const strengthDescription = opt.strength_description || "Smaller decay length indicates stronger bias"
 
     return {
         displayName: `Decay Length`,
-        description: "Higher values will increase the decay length",
+        description: strengthDescription,
         path: opt.strength_path,
         uiValue,
         min: uiMin,