From 3002da387197ef74b36f34c0f20a0fe641ebd522 Mon Sep 17 00:00:00 2001
From: Chesterkxng <cgoita00@gmail.com>
Date: Sat, 14 Mar 2026 03:35:10 +0100
Subject: [PATCH 1/2] chore: margin bottom added on option components (for
 visual separation)

---
 src/components/options/CheckboxWithDesc.tsx   | 2 +-
 src/components/options/ColorSelector.tsx      | 4 ++--
 src/components/options/RadioWithTextField.tsx | 2 +-
 src/components/options/SelectWithDesc.tsx     | 2 +-
 src/components/options/TextFieldWithDesc.tsx  | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/options/CheckboxWithDesc.tsx b/src/components/options/CheckboxWithDesc.tsx
index e991c3a..8b02598 100644
--- a/src/components/options/CheckboxWithDesc.tsx
+++ b/src/components/options/CheckboxWithDesc.tsx
@@ -19,7 +19,7 @@ const CheckboxWithDesc = ({
   };
 
   return (
-    <Box>
+    <Box mb={3}>
       <FormControlLabel
         control={
           <Checkbox
diff --git a/src/components/options/ColorSelector.tsx b/src/components/options/ColorSelector.tsx
index a24cf40..0c0bf0f 100644
--- a/src/components/options/ColorSelector.tsx
+++ b/src/components/options/ColorSelector.tsx
@@ -27,7 +27,7 @@ const ColorSelector: React.FC<ColorSelectorProps & TextFieldProps> = ({
   };
 
   return (
-    <Box mb={1}>
+    <Box mb={3}>
       <Stack direction={'row'}>
         <TextField
           sx={{ backgroundColor: 'background.paper' }}
@@ -46,7 +46,7 @@ const ColorSelector: React.FC<ColorSelectorProps & TextFieldProps> = ({
           onChange={handleColorChange}
         />
       </Stack>
-      <Typography fontSize={globalDescriptionFontSize}>
+      <Typography fontSize={globalDescriptionFontSize} mt={1}>
         {description}
       </Typography>
     </Box>
diff --git a/src/components/options/RadioWithTextField.tsx b/src/components/options/RadioWithTextField.tsx
index 75da087..2992b4d 100644
--- a/src/components/options/RadioWithTextField.tsx
+++ b/src/components/options/RadioWithTextField.tsx
@@ -22,7 +22,7 @@ const RadioWithTextField = ({
   radioDescription?: string;
 }) => {
   return (
-    <Box>
+    <Box mb={3}>
       <SimpleRadio
         checked={checked}
         onClick={onRadioClick}
diff --git a/src/components/options/SelectWithDesc.tsx b/src/components/options/SelectWithDesc.tsx
index f0a5a23..67a1700 100644
--- a/src/components/options/SelectWithDesc.tsx
+++ b/src/components/options/SelectWithDesc.tsx
@@ -32,7 +32,7 @@ const SelectWithDesc = <T extends string | boolean>({
   };
 
   return (
-    <Box>
+    <Box mb={3}>
       <Select value={selected} onChange={handleChange}>
         {options.map((option) => (
           <MenuItem key={option.label} value={option.value.toString()}>
diff --git a/src/components/options/TextFieldWithDesc.tsx b/src/components/options/TextFieldWithDesc.tsx
index f060ed6..afff967 100644
--- a/src/components/options/TextFieldWithDesc.tsx
+++ b/src/components/options/TextFieldWithDesc.tsx
@@ -16,7 +16,7 @@ const TextFieldWithDesc = ({
   ...props
 }: TextFieldProps & OwnProps) => {
   return (
-    <Box>
+    <Box mb={3}>
       <TextField
         placeholder={placeholder}
         sx={{ backgroundColor: 'background.paper' }}

From b39ca80f0c3bf74fd0dd8895505f7cd8267eede8 Mon Sep 17 00:00:00 2001
From: Chesterkxng <cgoita00@gmail.com>
Date: Sat, 14 Mar 2026 03:48:27 +0100
Subject: [PATCH 2/2] chore: - Select component used instead of menuItem - i8n
 added to options

---
 public/locales/en/image.json                  |  23 +++-
 .../tools/image/generic/qr-code/index.tsx     | 115 +++++++++---------
 2 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/public/locales/en/image.json b/public/locales/en/image.json
index 9a03c73..12deca1 100644
--- a/public/locales/en/image.json
+++ b/public/locales/en/image.json
@@ -63,7 +63,28 @@
   "qrCode": {
     "description": "Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more.",
     "shortDescription": "Create customized QR codes for various data formats.",
-    "title": "QR Code Generator"
+    "title": "QR Code Generator",
+    "resultOutput": "Generated QR code",
+    "options": {
+      "qrType": "Select QR Code Type",
+      "encryptionType": "Encryption Type",
+      "email": "Email",
+      "emailBody": "Email Body (optional)",
+      "emailSubject": "Email Subject (optional)",
+      "text": "Enter the text",
+      "name": "Name",
+      "fullName": "Full Name",
+      "address": "Address",
+      "company": "Company (optional)",
+      "job": "Job Title (optional)",
+      "website": "Website (optional)",
+      "message": "Message (optional)",
+      "phone": "Phone Number",
+      "url": "Enter the URL",
+      "ssid": "Network Name (SSID)",
+      "password": "Password",
+      "size": "Size in pixels (100-1000)"
+    }
   },
   "removeBackground": {
     "description": "World",
diff --git a/src/pages/tools/image/generic/qr-code/index.tsx b/src/pages/tools/image/generic/qr-code/index.tsx
index 26f8305..5d6a021 100644
--- a/src/pages/tools/image/generic/qr-code/index.tsx
+++ b/src/pages/tools/image/generic/qr-code/index.tsx
@@ -1,13 +1,15 @@
 import React, { useCallback, useState } from 'react';
-import { Box, MenuItem, TextField } from '@mui/material';
+import { Box } from '@mui/material';
 import * as Yup from 'yup';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import SelectWithDesc from '@components/options/SelectWithDesc';
 import { InitialValuesType, QRCodeType, WifiEncryptionType } from './types';
 import ColorSelector from '@components/options/ColorSelector';
 import ToolFileResult from '@components/result/ToolFileResult';
+import { useTranslation } from 'react-i18next';
 import * as QRCode from 'qrcode';
 import { debounce } from 'lodash';
 
@@ -166,6 +168,7 @@ const validationSchema = Yup.object().shape({
 });
 
 export default function QRCodeGenerator({ title }: ToolComponentProps) {
+  const { t } = useTranslation('image');
   const [result, setResult] = useState<File | null>(null);
   const getGroups: GetGroupsType<InitialValuesType> = ({
     values,
@@ -176,24 +179,22 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
         title: 'QR Code Type',
         component: (
           <Box>
-            <TextField
-              select
-              fullWidth
-              value={values.qrCodeType}
-              onChange={(e) =>
-                updateField('qrCodeType', e.target.value as QRCodeType)
+            <SelectWithDesc
+              selected={values.qrCodeType}
+              onChange={(value) =>
+                updateField('qrCodeType', value as QRCodeType)
               }
-              label="Select QR Code Type"
-              margin="normal"
-            >
-              <MenuItem value="URL">URL</MenuItem>
-              <MenuItem value="Text">Text</MenuItem>
-              <MenuItem value="Email">Email</MenuItem>
-              <MenuItem value="Phone">Phone</MenuItem>
-              <MenuItem value="SMS">SMS</MenuItem>
-              <MenuItem value="WiFi">WiFi</MenuItem>
-              <MenuItem value="vCard">vCard (Contact)</MenuItem>
-            </TextField>
+              options={[
+                { label: 'URL', value: 'URL' },
+                { label: 'Text', value: 'Text' },
+                { label: 'Email', value: 'Email' },
+                { label: 'Phone', value: 'Phone' },
+                { label: 'SMS', value: 'SMS' },
+                { label: 'WiFi', value: 'WiFi' },
+                { label: 'vCard', value: 'vCard' }
+              ]}
+              description={t('qrCode.options.qrType')}
+            />
           </Box>
         )
       },
@@ -204,7 +205,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
             <TextFieldWithDesc
               value={values.size}
               onOwnChange={(val) => updateField('size', val)}
-              description="Size in pixels (100-1000)"
+              description={t('qrCode.options.size')}
               inputProps={{
                 type: 'number',
                 min: 100,
@@ -233,7 +234,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
               <TextFieldWithDesc
                 value={values.url}
                 onOwnChange={(val) => updateField('url', val)}
-                description="Enter the URL"
+                description={t('qrCode.options.url')}
                 inputProps={{
                   placeholder: 'https://example.com'
                 }}
@@ -244,11 +245,11 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
               <TextFieldWithDesc
                 value={values.text}
                 onOwnChange={(val) => updateField('text', val)}
-                description="Enter the text"
+                description={t('qrCode.options.text')}
                 multiline
                 rows={4}
                 inputProps={{
-                  placeholder: 'Enter your text here'
+                  placeholder: 'Lorem Ipsum'
                 }}
               />
             )}
@@ -258,7 +259,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.emailAddress}
                   onOwnChange={(val) => updateField('emailAddress', val)}
-                  description="Email Address"
+                  description={t('qrCode.options.email')}
                   inputProps={{
                     placeholder: 'example@example.com',
                     type: 'email'
@@ -267,7 +268,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.emailSubject}
                   onOwnChange={(val) => updateField('emailSubject', val)}
-                  description="Email Subject (optional)"
+                  description={t('qrCode.options.emailSubject')}
                   inputProps={{
                     placeholder: 'Subject line'
                   }}
@@ -275,7 +276,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.emailBody}
                   onOwnChange={(val) => updateField('emailBody', val)}
-                  description="Email Body (optional)"
+                  description={t('qrCode.options.emailBody')}
                   multiline
                   rows={4}
                   inputProps={{
@@ -289,7 +290,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
               <TextFieldWithDesc
                 value={values.phoneNumber}
                 onOwnChange={(val) => updateField('phoneNumber', val)}
-                description="Phone Number"
+                description={t('qrCode.options.phone')}
                 inputProps={{
                   placeholder: '+1234567890',
                   type: 'tel'
@@ -302,7 +303,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.smsNumber}
                   onOwnChange={(val) => updateField('smsNumber', val)}
-                  description="Phone Number"
+                  description={t('qrCode.options.phone')}
                   inputProps={{
                     placeholder: '+1234567890',
                     type: 'tel'
@@ -311,11 +312,11 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.smsMessage}
                   onOwnChange={(val) => updateField('smsMessage', val)}
-                  description="Message (optional)"
+                  description={t('qrCode.options.message')}
                   multiline
                   rows={4}
                   inputProps={{
-                    placeholder: 'Your message here'
+                    placeholder: 'Lorem Ipsum'
                   }}
                 />
               </>
@@ -326,37 +327,32 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.wifiSsid}
                   onOwnChange={(val) => updateField('wifiSsid', val)}
-                  description="Network Name (SSID)"
+                  description={t('qrCode.options.ssid')}
                   inputProps={{
-                    placeholder: 'Network name'
+                    placeholder: 'WIFI name'
                   }}
                 />
                 <TextFieldWithDesc
                   value={values.wifiPassword}
                   onOwnChange={(val) => updateField('wifiPassword', val)}
-                  description="Password"
+                  description={t('qrCode.options.password')}
                   inputProps={{
-                    placeholder: 'Password',
+                    placeholder: '******',
                     type: 'password'
                   }}
                 />
-                <TextField
-                  select
-                  fullWidth
-                  value={values.wifiEncryption}
-                  onChange={(e) =>
-                    updateField(
-                      'wifiEncryption',
-                      e.target.value as WifiEncryptionType
-                    )
+                <SelectWithDesc
+                  selected={values.wifiEncryption}
+                  onChange={(value) =>
+                    updateField('wifiEncryption', value as WifiEncryptionType)
                   }
-                  label="Encryption Type"
-                  margin="normal"
-                >
-                  <MenuItem value="WPA">WPA</MenuItem>
-                  <MenuItem value="WEP">WEP</MenuItem>
-                  <MenuItem value="None">None</MenuItem>
-                </TextField>
+                  options={[
+                    { label: 'WPA', value: 'WPA' },
+                    { label: 'WEP', value: 'WEP' },
+                    { label: 'None', value: 'None' }
+                  ]}
+                  description={t('qrCode.options.encryptionType')}
+                />
               </>
             )}
 
@@ -365,7 +361,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardName}
                   onOwnChange={(val) => updateField('vCardName', val)}
-                  description="Full Name"
+                  description={t('qrCode.options.fullName')}
                   inputProps={{
                     placeholder: 'John Doe'
                   }}
@@ -373,7 +369,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardEmail}
                   onOwnChange={(val) => updateField('vCardEmail', val)}
-                  description="Email"
+                  description={t('qrCode.options.email')}
                   inputProps={{
                     placeholder: 'john@example.com',
                     type: 'email'
@@ -382,7 +378,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardPhone}
                   onOwnChange={(val) => updateField('vCardPhone', val)}
-                  description="Phone"
+                  description={t('qrCode.options.phone')}
                   inputProps={{
                     placeholder: '+1234567890',
                     type: 'tel'
@@ -391,7 +387,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardAddress}
                   onOwnChange={(val) => updateField('vCardAddress', val)}
-                  description="Address"
+                  description={t('qrCode.options.address')}
                   inputProps={{
                     placeholder: '123 Main St, City, Country'
                   }}
@@ -399,7 +395,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardCompany}
                   onOwnChange={(val) => updateField('vCardCompany', val)}
-                  description="Company (optional)"
+                  description={t('qrCode.options.company')}
                   inputProps={{
                     placeholder: 'Company name'
                   }}
@@ -407,7 +403,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardTitle}
                   onOwnChange={(val) => updateField('vCardTitle', val)}
-                  description="Job Title (optional)"
+                  description={t('qrCode.options.job')}
                   inputProps={{
                     placeholder: 'Software Developer'
                   }}
@@ -415,7 +411,7 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.vCardWebsite}
                   onOwnChange={(val) => updateField('vCardWebsite', val)}
-                  description="Website (optional)"
+                  description={t('qrCode.options.website')}
                   inputProps={{
                     placeholder: 'https://example.com'
                   }}
@@ -460,12 +456,11 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
       validationSchema={validationSchema}
       compute={debouncedCompute}
       resultComponent={
-        <ToolFileResult title={'Generated QR code'} value={result} />
+        <ToolFileResult title={t('qrCode.resultOutput')} value={result} />
       }
       toolInfo={{
-        title: 'QR Code Generator',
-        description:
-          'Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more. Customize the size and colors to create the perfect QR code for your needs.'
+        title: t('qrCode.title'),
+        description: t('qrCode.description')
       }}
     />
   );