Skip to content

Commit b6b2570

Browse files
mingrammermingrammer
committed
fix: improve mobile input and action layouts
1 parent 1ffdd60 commit b6b2570

13 files changed

Lines changed: 59 additions & 49 deletions

‎src/components/MobileIconLabel.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { LucideIcon } from 'lucide-react';
2+
import { cn } from '@/lib/utils';
3+
4+
interface MobileIconLabelProps {
5+
icon: LucideIcon;
6+
label: string;
7+
className?: string;
8+
}
9+
10+
const MobileIconLabel = ({ icon: Icon, label, className }: MobileIconLabelProps) => {
11+
return (
12+
<div
13+
className={cn(
14+
'flex min-h-10 items-center justify-center rounded-md border bg-slate-50 px-3 text-sm text-slate-500',
15+
className,
16+
)}
17+
aria-label={label}
18+
title={label}
19+
>
20+
<Icon className="h-4 w-4 shrink-0" />
21+
<span className="sr-only sm:not-sr-only sm:ml-2">{label}</span>
22+
</div>
23+
);
24+
};
25+
26+
export default MobileIconLabel;

‎src/components/tools/CsvToYaml.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
55
import { Textarea } from "@/components/ui/textarea";
66
import { toast } from "sonner";
77
import { useLanguage } from "@/contexts/LanguageContext";
8+
import MobileIconLabel from "@/components/MobileIconLabel";
89

910
const CsvToYaml = () => {
1011
const { t } = useLanguage();
@@ -169,10 +170,7 @@ const CsvToYaml = () => {
169170
</div>
170171
</div>
171172

172-
<div className="flex justify-center text-sm text-slate-500">
173-
<RefreshCw className="w-4 h-4 mr-2" />
174-
<span>{t("csvtoyaml_convert")}</span>
175-
</div>
173+
<MobileIconLabel icon={RefreshCw} label={t("csvtoyaml_convert")} className="border-0 bg-transparent" />
176174

177175
<div className="mt-8 p-6 bg-pink-50 rounded-lg">
178176
<h3 className="text-lg font-semibold mb-3">{t("csvtoyaml_what")}</h3>

‎src/components/tools/EscapeUnescape.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from "@/components/ui/select";
1313
import { toast } from "sonner";
1414
import { useLanguage } from "@/contexts/LanguageContext";
15+
import MobileIconLabel from "@/components/MobileIconLabel";
1516

1617
const EscapeUnescape = () => {
1718
const [input, setInput] = useState("");
@@ -211,10 +212,11 @@ const EscapeUnescape = () => {
211212
</div>
212213

213214
{/* Convert Button */}
214-
<div className="flex items-center justify-center text-sm text-slate-500">
215-
<Code className="w-4 h-4 mr-2" />
216-
<span>{mode === "escape" ? t("escape_button") : t("escape_unescape_button")}</span>
217-
</div>
215+
<MobileIconLabel
216+
icon={Code}
217+
label={mode === "escape" ? t("escape_button") : t("escape_unescape_button")}
218+
className="border-0 bg-transparent"
219+
/>
218220
</div>
219221
);
220222
};

‎src/components/tools/JsonToCsv.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
55
import { Textarea } from "@/components/ui/textarea";
66
import { toast } from "sonner";
77
import { useLanguage } from "@/contexts/LanguageContext";
8+
import MobileIconLabel from "@/components/MobileIconLabel";
89

910
const JsonToCsv = () => {
1011
const { t } = useLanguage();
@@ -104,10 +105,7 @@ const JsonToCsv = () => {
104105
</div>
105106
</div>
106107

107-
<div className="flex justify-center text-sm text-slate-500">
108-
<RefreshCw className="w-4 h-4 mr-2" />
109-
<span>{t("jsontocsv_convert")}</span>
110-
</div>
108+
<MobileIconLabel icon={RefreshCw} label={t("jsontocsv_convert")} className="border-0 bg-transparent" />
111109

112110
<div className="mt-8 p-6 bg-blue-50 rounded-lg">
113111
<h3 className="text-lg font-semibold mb-3">{t("jsontocsv_what")}</h3>

‎src/components/tools/JsonToYaml.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
55
import { Textarea } from "@/components/ui/textarea";
66
import { toast } from "sonner";
77
import { useLanguage } from "@/contexts/LanguageContext";
8+
import MobileIconLabel from "@/components/MobileIconLabel";
89

910
const JsonToYaml = () => {
1011
const { t } = useLanguage();
@@ -114,10 +115,7 @@ const JsonToYaml = () => {
114115
</div>
115116
</div>
116117

117-
<div className="flex justify-center text-sm text-slate-500">
118-
<RefreshCw className="w-4 h-4 mr-2" />
119-
<span>{t("jsontoyaml_convert")}</span>
120-
</div>
118+
<MobileIconLabel icon={RefreshCw} label={t("jsontoyaml_convert")} className="border-0 bg-transparent" />
121119

122120
<div className="mt-8 p-6 bg-purple-50 rounded-lg">
123121
<h3 className="text-lg font-semibold mb-3">{t("jsontoyaml_what")}</h3>

‎src/components/tools/LocaleConverter.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Label } from "@/components/ui/label";
66
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
77
import { toast } from "sonner";
88
import { useLanguage } from "@/contexts/LanguageContext";
9+
import { cn } from "@/lib/utils";
910

1011
const LocaleConverter = () => {
1112
const { t } = useLanguage();
@@ -132,9 +133,9 @@ const LocaleConverter = () => {
132133
: t("localeconverter_hyphen_example")
133134
}
134135
/>
135-
<Button onClick={convertLocale}>
136-
<Globe className="w-4 h-4 mr-2" />
137-
{t("localeconverter_convert")}
136+
<Button onClick={convertLocale} className="shrink-0 px-3" aria-label={t("localeconverter_convert")} title={t("localeconverter_convert")}>
137+
<Globe className="h-4 w-4 shrink-0" />
138+
<span className="sr-only sm:not-sr-only sm:ml-2">{t("localeconverter_convert")}</span>
138139
</Button>
139140
</div>
140141
</div>
@@ -143,9 +144,9 @@ const LocaleConverter = () => {
143144
<div className="space-y-3">
144145
<div className="flex items-center justify-between">
145146
<Label>{t("localeconverter_result")}</Label>
146-
<Button variant="outline" size="sm" onClick={handleCopy}>
147-
<Copy className="w-4 h-4 mr-2" />
148-
{t("localeconverter_copy_button")}
147+
<Button variant="outline" size="sm" onClick={handleCopy} aria-label={t("localeconverter_copy_button")} title={t("localeconverter_copy_button")}>
148+
<Copy className="h-4 w-4" />
149+
<span className="sr-only sm:not-sr-only sm:ml-2">{t("localeconverter_copy_button")}</span>
149150
</Button>
150151
</div>
151152
<Input value={result} readOnly className="font-mono" />
@@ -163,7 +164,7 @@ const LocaleConverter = () => {
163164
onClick={() =>
164165
setInputLocale(fromFormat === "hyphen" ? locale.replace('_', '-') : locale)
165166
}
166-
className="text-xs"
167+
className={cn("text-xs", "min-h-9")}
167168
>
168169
{locale}
169170
</Button>

‎src/components/tools/NumberConverter.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
77
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
88
import { toast } from "sonner";
99
import { useLanguage } from "@/contexts/LanguageContext";
10+
import MobileIconLabel from "@/components/MobileIconLabel";
1011

1112
const NumberConverter = () => {
1213
const [input, setInput] = useState("");
@@ -127,10 +128,7 @@ const NumberConverter = () => {
127128
</Select>
128129
</div>
129130

130-
<div className="flex items-center justify-center text-sm text-slate-500">
131-
<Calculator className="w-4 h-4 mr-2" />
132-
<span>{t("numberconverter_convert")}</span>
133-
</div>
131+
<MobileIconLabel icon={Calculator} label={t("numberconverter_convert")} className="border-0 bg-transparent" />
134132
{error && <p className="text-sm text-red-500">{error}</p>}
135133
</CardContent>
136134
</Card>

‎src/components/tools/TimezoneConverter.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Label } from "@/components/ui/label";
66
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
77
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
88
import { useLanguage } from "@/contexts/LanguageContext";
9+
import MobileIconLabel from "@/components/MobileIconLabel";
910

1011
const TimezoneConverter = () => {
1112
const { t } = useLanguage();
@@ -128,10 +129,7 @@ const TimezoneConverter = () => {
128129
</div>
129130
</div>
130131

131-
<div className="flex items-center justify-center text-sm text-slate-500 border rounded-md bg-slate-50 py-2">
132-
<Clock className="w-4 h-4 mr-2" />
133-
<span>{t("timezoneconverter_convert")}</span>
134-
</div>
132+
<MobileIconLabel icon={Clock} label={t("timezoneconverter_convert")} />
135133
{error && <p className="text-sm text-red-500">{error}</p>}
136134
</CardContent>
137135
</Card>

‎src/components/tools/UnixTimeConverter.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Label } from "@/components/ui/label";
66
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
77
import { toast } from "sonner";
88
import { useLanguage } from "@/contexts/LanguageContext";
9+
import MobileIconLabel from "@/components/MobileIconLabel";
910

1011
const toLocalISOString = (date: Date): string => {
1112
const pad = (n: number) => n.toString().padStart(2, '0');
@@ -151,10 +152,7 @@ const UnixTimeConverter = () => {
151152
placeholder={t("unixtimeconverter_input_placeholder")}
152153
className="font-mono"
153154
/>
154-
<div className="flex items-center px-3 text-sm text-slate-500 border rounded-md bg-slate-50">
155-
<Clock className="w-4 h-4 mr-2" />
156-
<span>{t("unixtimeconverter_convert")}</span>
157-
</div>
155+
<MobileIconLabel icon={Clock} label={t("unixtimeconverter_convert")} className="shrink-0" />
158156
</div>
159157

160158
<div className="grid md:grid-cols-2 gap-4">
@@ -192,10 +190,7 @@ const UnixTimeConverter = () => {
192190
value={dateTime}
193191
onChange={(e) => setDateTime(e.target.value)}
194192
/>
195-
<div className="flex items-center px-3 text-sm text-slate-500 border rounded-md bg-slate-50">
196-
<Clock className="w-4 h-4 mr-2" />
197-
<span>{t("unixtimeconverter_convert")}</span>
198-
</div>
193+
<MobileIconLabel icon={Clock} label={t("unixtimeconverter_convert")} className="shrink-0" />
199194
</div>
200195

201196
<div className="space-y-2">

‎src/components/tools/YamlToCsv.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
55
import { Textarea } from "@/components/ui/textarea";
66
import { toast } from "sonner";
77
import { useLanguage } from "@/contexts/LanguageContext";
8+
import MobileIconLabel from "@/components/MobileIconLabel";
89

910
const YamlToCsv = () => {
1011
const { t } = useLanguage();
@@ -205,10 +206,7 @@ const YamlToCsv = () => {
205206
</div>
206207
</div>
207208

208-
<div className="flex justify-center text-sm text-slate-500">
209-
<RefreshCw className="w-4 h-4 mr-2" />
210-
<span>{t("yamltocsv_convert")}</span>
211-
</div>
209+
<MobileIconLabel icon={RefreshCw} label={t("yamltocsv_convert")} className="border-0 bg-transparent" />
212210

213211
<div className="mt-8 p-6 bg-indigo-50 rounded-lg">
214212
<h3 className="text-lg font-semibold mb-3">{t("yamltocsv_what")}</h3>

0 commit comments

Comments
 (0)