Add the Reset button

Author: aatanasovdev

css/cloudinary.css

@@ -313,8 +313,8 @@ protected function make_input( $name, $value ) {
 		$clear_button['attributes']['type']    = 'button';
 		$clear_button['attributes']['class'][] = 'button';
 		$clear_button['attributes']['class'][] = 'clear-crop-input';
-		$clear_button['attributes']['title']   = __( 'Clear input', 'cloudinary' );
-		$clear_button['content']               = __( 'Clear', 'cloudinary' );
+		$clear_button['attributes']['title']   = __( 'Reset input', 'cloudinary' );
+		$clear_button['content']               = Utils::get_inline_svg( 'css/images/undo.svg', false ) . '<span>' . __( 'Reset', 'cloudinary' ) . '</span>';
 
 		$wrapper['children']['input']  = $input;
 		$wrapper['children']['button'] = $clear_button;

css/images/undo.svg

@@ -89,15 +89,52 @@
 		opacity: 0.5;
 	}
 
+	.disable-toggle {
+		margin: 0;
+	}
+
+	.button.clear-crop-input {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		background: transparent;
+		border: none;
+		color: $color-cld-blue;
+		padding: 0;
+		cursor: pointer;
+		box-shadow: none;
+		font-size: 14px;
+		font-weight: 600;
+		margin-right: 40px;
+
+		svg {
+			width: 16px;
+			height: 16px;
+			fill: currentColor;
+		}
+
+		&:hover {
+			background: transparent;
+			opacity: 0.8;
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
+
 }
 
 &-size-selector {
 	display: flex;
 	flex-wrap: nowrap;
-	overflow-y: scroll;
+	overflow-x: scroll;
 	scrollbar-width: thin;
 	border: 1px solid $color-light-grey;
 	border-radius: 4px;
+	width: fit-content;
+	max-width: 100%;
 
 	margin-bottom: 42px;
 	padding: 4px;