6
6
>
7
7
< form [formGroup] ="form " class ="p-4 md:p-8 w-full ">
8
8
< div class ="w-full max-w-xs text-center mx-auto ">
9
- < h1 class ="mb-4 md:mb-8 text-sm leading-4 text-zinc-300 ">
9
+ < h1 class ="mb-4 md:mb-8 text-sm leading-4 text-white ">
10
10
Just type the data and generate the meta tags for your website
11
11
</ h1 >
12
12
</ div >
@@ -16,13 +16,13 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
16
16
*ngFor ="let field of metatagsList "
17
17
>
18
18
< ng-container *ngIf ="field.type === 'text' || field.type === 'color' ">
19
- < label [for] ="field.name " class ="leading-4 text-xs text-zinc-200 "> {{
19
+ < label [for] ="field.name " class ="leading-4 text-xs text-white "> {{
20
20
field.label
21
21
}}</ label >
22
22
23
23
< div
24
24
*ngIf ="field.name === 'image' && form?.get('image') "
25
- class ="w-full min-h-60 rounded bg-zinc-800 border border-zinc-700 overflow-hidden "
25
+ class ="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden "
26
26
>
27
27
< img *ngIf ="form?.get('image')?.value " [src] ="form.get('image')?.value " width ="100% " alt ="" />
28
28
</ div >
@@ -34,7 +34,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
34
34
[name] ="field.name "
35
35
[placeholder] ="field.label "
36
36
[formControlName] ="field.name "
37
- class ="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out "
37
+ class ="h-8 text-xs w-full bg-zinc-900 rounded border placeholder:text-zinc-500 border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out "
38
38
/>
39
39
< ng-container class ="" *ngIf ="field.name === 'color' ">
40
40
< input
@@ -53,19 +53,19 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
53
53
</ div >
54
54
</ ng-container >
55
55
</ div >
56
- < span class ="text-xs text-zinc-400 leading-4 mt-1 "> {{
56
+ < span class ="text-xs text-zinc-500 leading-4 mt-1 "> {{
57
57
field.description
58
58
}}</ span >
59
59
</ ng-container >
60
60
61
61
< ng-container *ngIf ="field.type === 'select' ">
62
- < label [for] ="field.name " class ="leading-4 text-xs text-zinc-200 "> {{
62
+ < label [for] ="field.name " class ="leading-4 text-xs text-white "> {{
63
63
field.label
64
64
}}</ label >
65
65
< select
66
66
[id] ="field.name "
67
67
[formControlName] ="field.name "
68
- class ="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out "
68
+ class ="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out "
69
69
>
70
70
< option
71
71
*ngFor ="let option of field.options "
@@ -74,7 +74,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
74
74
{{ option.value }}
75
75
</ option >
76
76
</ select >
77
- < span class ="text-xs text-zinc-400 leading-4 mt-1 "> {{
77
+ < span class ="text-xs text-zinc-500 leading-4 mt-1 "> {{
78
78
field.description
79
79
}}</ span >
80
80
</ ng-container >
@@ -86,7 +86,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
86
86
</ div >
87
87
88
88
< div
89
- class ="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-hidden border-r border-zinc-800 "
89
+ class ="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-hidden border-r border-zinc-800 p-4 md:p-0 "
90
90
>
91
91
< app-code-result [code] ="code " class ="h-full " />
92
92
</ div >
0 commit comments