Skip to content

Commit 633e7cc

Browse files
devvaannshdevvaannsh
committed
refactor: error message styling
1 parent 5e48db1 commit 633e7cc

File tree

3 files changed

+105
-70
lines changed

3 files changed

+105
-70
lines changed

‎src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html‎

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -68,39 +68,47 @@
6868
<!--this view will open up when user clicks on add a new snippet button-->
6969
<div id="custom-snippets-add-new" class="custom-snippets-add-new hidden">
7070
<div id="abbr-box-wrapper" class="field-wrapper">
71-
<label for="abbr-box"
72-
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
73-
data-placement="top">
74-
Abbreviation:
75-
</label>
76-
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
71+
<div class="field-row">
72+
<label for="abbr-box"
73+
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
74+
data-placement="top">
75+
Abbreviation:
76+
</label>
77+
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
78+
</div>
7779
</div>
7880

7981
<div id="desc-box-wrapper" class="field-wrapper">
80-
<label for="desc-box"
81-
title="Brief description of what this snippet does. Leave empty if no description needed."
82-
data-placement="top">
83-
Description:
84-
</label>
85-
<input id="desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
82+
<div class="field-row">
83+
<label for="desc-box"
84+
title="Brief description of what this snippet does. Leave empty if no description needed."
85+
data-placement="top">
86+
Description:
87+
</label>
88+
<input id="desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
89+
</div>
8690
</div>
8791

8892
<div id="file-extn-box-wrapper" class="field-wrapper">
89-
<label for="file-extn-box"
90-
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
91-
data-placement="top">
92-
File Extension:
93-
</label>
94-
<input id="file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
93+
<div class="field-row">
94+
<label for="file-extn-box"
95+
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
96+
data-placement="top">
97+
File Extension:
98+
</label>
99+
<input id="file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
100+
</div>
95101
</div>
96102

97103
<div id="template-text-box-wrapper" class="field-wrapper">
98-
<label for="template-text-box"
99-
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
100-
data-placement="top">
101-
Template Text:
102-
</label>
103-
<textarea id="template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
104+
<div class="field-row">
105+
<label for="template-text-box"
106+
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
107+
data-placement="top">
108+
Template Text:
109+
</label>
110+
<textarea id="template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
111+
</div>
104112
</div>
105113

106114
<div id="save-custom-snippet-btn">
@@ -111,39 +119,47 @@
111119
<!--this view will open up when user clicks on a snippet item to edit it-->
112120
<div id="custom-snippets-edit" class="custom-snippets-edit hidden">
113121
<div id="edit-abbr-box-wrapper" class="field-wrapper">
114-
<label for="edit-abbr-box"
115-
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
116-
data-placement="top">
117-
Abbreviation:
118-
</label>
119-
<input id="edit-abbr-box" type="text" placeholder="clg" autocomplete="off" />
122+
<div class="field-row">
123+
<label for="edit-abbr-box"
124+
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
125+
data-placement="top">
126+
Abbreviation:
127+
</label>
128+
<input id="edit-abbr-box" type="text" placeholder="clg" autocomplete="off" />
129+
</div>
120130
</div>
121131

122132
<div id="edit-desc-box-wrapper" class="field-wrapper">
123-
<label for="edit-desc-box"
124-
title="Brief description of what this snippet does. Leave empty if no description needed."
125-
data-placement="top">
126-
Description:
127-
</label>
128-
<input id="edit-desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
133+
<div class="field-row">
134+
<label for="edit-desc-box"
135+
title="Brief description of what this snippet does. Leave empty if no description needed."
136+
data-placement="top">
137+
Description:
138+
</label>
139+
<input id="edit-desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
140+
</div>
129141
</div>
130142

131143
<div id="edit-file-extn-box-wrapper" class="field-wrapper">
132-
<label for="edit-file-extn-box"
133-
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
134-
data-placement="top">
135-
File Extension:
136-
</label>
137-
<input id="edit-file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
144+
<div class="field-row">
145+
<label for="edit-file-extn-box"
146+
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
147+
data-placement="top">
148+
File Extension:
149+
</label>
150+
<input id="edit-file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
151+
</div>
138152
</div>
139153

140154
<div id="edit-template-text-box-wrapper" class="field-wrapper">
141-
<label for="edit-template-text-box"
142-
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
143-
data-placement="top">
144-
Template Text:
145-
</label>
146-
<textarea id="edit-template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
155+
<div class="field-row">
156+
<label for="edit-template-text-box"
157+
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
158+
data-placement="top">
159+
Template Text:
160+
</label>
161+
<textarea id="edit-template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
162+
</div>
147163
</div>
148164

149165
<div id="edit-snippet-buttons">

‎src/styles/Extn-CustomSnippets.less‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -366,20 +366,17 @@
366366
}
367367

368368
.error-message {
369-
color: #dc3545;
369+
color: @bc-text-thin-quiet;
370370
font-size: 12px;
371-
margin-top: 6px;
372-
margin-left: 0;
373-
padding: 6px 8px;
374-
background-color: rgba(220, 53, 69, 0.1);
375-
border: 1px solid #dc3545;
376-
border-radius: @bc-border-radius;
371+
font-style: italic;
372+
margin-left: 132px;
373+
padding: 0;
374+
background: none;
375+
border: none;
377376
animation: fadeIn 0.3s ease;
378377

379378
.dark & {
380-
color: #ff6b6b;
381-
background-color: rgba(220, 53, 69, 0.15);
382-
border: 1px solid #ff6b6b;
379+
color: @dark-bc-text-thin-quiet;
383380
}
384381
}
385382

@@ -427,9 +424,17 @@
427424

428425
.field-wrapper {
429426
display: flex;
430-
align-items: center;
427+
align-items: flex-start;
431428
margin-bottom: 8px;
432-
gap: 12px;
429+
gap: 4px;
430+
flex-direction: column;
431+
432+
.field-row {
433+
display: flex;
434+
align-items: center;
435+
gap: 12px;
436+
width: 100%;
437+
}
433438

434439
label {
435440
flex: 0 0 120px;
@@ -568,9 +573,17 @@
568573

569574
.field-wrapper {
570575
display: flex;
571-
align-items: center;
576+
align-items: flex-start;
572577
margin-bottom: 8px;
573-
gap: 12px;
578+
gap: 4px;
579+
flex-direction: column;
580+
581+
.field-row {
582+
display: flex;
583+
align-items: center;
584+
gap: 12px;
585+
width: 100%;
586+
}
574587

575588
label {
576589
flex: 0 0 120px;
@@ -739,16 +752,21 @@
739752
#custom-snippets-add-new,
740753
#custom-snippets-edit {
741754
.field-wrapper {
742-
flex-direction: column;
743-
align-items: stretch;
744-
gap: 4px;
755+
.field-row {
756+
flex-direction: column;
757+
align-items: stretch;
758+
gap: 4px;
745759

746-
label {
747-
flex: none;
748-
margin-bottom: 4px;
760+
label {
761+
flex: none;
762+
}
749763
}
750764
}
751765
}
766+
767+
.error-message {
768+
margin-left: 0;
769+
}
752770
}
753771

754772
@media (max-width: 400px) {

‎src/styles/brackets_patterns_override.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -756,6 +756,7 @@ a:focus {
756756
white-space: nowrap;
757757
vertical-align: top;
758758
line-height: inherit;
759+
}
759760

760761
.custom-snippet-code-hint {
761762
visibility: hidden;
@@ -2517,5 +2518,5 @@ code {
25172518
input[type='checkbox'] {
25182519
margin-top: 8px;
25192520
}
2520-
}
2521-
}
2521+
}
2522+
}

0 commit comments

Comments
 (0)