expanding the name and collor function to use the custom grain (still need to return the color for custom)

src/component/UnitMeasurementSummary.tsx

@@ -100,13 +100,26 @@ export default function UnitMeasurementSummary(props: Props) {
     );
   };
 
+  const grainName = () => {
+    if(component.settings.grainType === pond.Grain.GRAIN_CUSTOM && component.settings.customGrain?.name){
+      return component.settings.customGrain.name
+    }
+    return GrainDescriber(component.settings.grainType).name
+  }
+
+  const grainColor = () => {
+    if(component.settings.grainType === pond.Grain.GRAIN_CUSTOM && component.settings.customGrain?.name){
+      return 
+    }
+    return GrainDescriber(component.settings.grainType).colour
+  }
+
   const getSummaryComponent = (summaries: Summary[]): any => {
     if (summaries.length < 1) {
       return noSummary();
     }
 
     let overlays: JSX.Element[] = [];
-    let grain = GrainDescriber(component.settings.grainType);
     return (
       <Grid container>
         <Grid size={{ xs: 12 }}>
@@ -170,7 +183,7 @@ export default function UnitMeasurementSummary(props: Props) {
           component.settings.grainType !== pond.Grain.GRAIN_INVALID && (
             <Typography variant={largeText ? "body1" : "caption"} color="textPrimary">
               <span key={"grainType"}>
-                Grain Type: <span style={{ color: grain.colour }}>{grain.name}</span>
+                Grain Type: <span style={{ color: grainColor() }}>{grainName()}</span>
               </span>
             </Typography>
           )}