add size medium to product image

app/frontend/src/javascript/components/form/form-image-upload.tsx

@@ -21,7 +21,7 @@ interface FormImageUploadProps<TFieldValues> extends FormComponent<TFieldValues>
   setValue: UseFormSetValue<TFieldValues>,
   defaultImage?: ImageType,
   accept?: string,
-  size?: 'small' | 'large'
+  size?: 'small' | 'medium' | 'large'
   mainOption?: boolean,
   onFileChange?: (value: ImageType) => void,
   onFileRemove?: () => void,

app/frontend/src/stylesheets/modules/form/form-image-upload.scss

@@ -7,13 +7,18 @@
     display: inline-block;
 
     &--small img {
-      width: 50px;
-      height: 50px;
+      width: 80px;
+      height: 80px;
+    }
+
+    &--medium img {
+      width: 200px;
+      height: 200px;
     }
 
     &--large img {
-      width: 180px;
-      height: 180px;
+      width: 400px;
+      height: 400px;
     }
   }
 
@@ -42,6 +47,10 @@
     margin: 80px 40px;
   }
 
+  &--medium {
+    margin: 80px 40px;
+  }
+
   &--small {
     text-align: center;
   }

app/uploaders/product_image_uploader.rb

@@ -49,6 +49,10 @@ class ProductImageUploader < CarrierWave::Uploader::Base
     process resize_to_fit: [700, 400]
   end
 
+  version :small do
+    process resize_to_fit: [400, 250]
+  end
+
   # Add a white list of extensions which are allowed to be uploaded.
   # For images you might use something like this:
   def extension_whitelist