input error

packages/rocketchat-theme/client/imports/general/forms.css

@@ -233,6 +233,35 @@
 	&__description {
 		color: #9ea2a8;
 		font-size: var(--input-font-size);
+		margin-bottom: 0.25rem;
+	}
+
+	&__error {
+		color: #f5455c;
+		display: flex;
+		align-items: center;
+
+		&-icon {
+			width: 20px;
+
+			&--warning {
+				width: 20px;
+				height: 20px;
+				stroke: currentColor;
+			}
+		}
+
+		&-message {
+			margin-left: 0.5rem;
+		}
+	}
+
+	&--error {
+		& .rc-input {
+			&__element {
+				border-color: #f5455c;
+			}
+		}
 	}
 }
 

packages/rocketchat-ui/client/views/app/createChannel.html

@@ -32,7 +32,7 @@
 				</div>
 			</div>
 			<div class="create-channel__inputs">
-				<div class="rc-input">
+				<div class="rc-input rc-input--error">
 					<label class="rc-input__label">
 						<div class="rc-input__title">Channel name</div>
 						<div class="rc-input__wrapper">
@@ -45,6 +45,14 @@
 						</div>
 					</label>
 					<div class="rc-input__description">Names must be all lower case and shorter than 22 characters</div>
+					<div class="rc-input__error">
+						<div class="rc-input__error-icon">
+							<svg class="rc-input__error-icon-svg rc-input__error-icon--warning">
+								<use href="/images/icons.svg#warning"></use>
+							</svg>
+						</div>
+						<div class="rc-input__error-message">ERROR</div>
+					</div>
 				</div>
 				<div class="rc-input">
 					<label class="rc-input__label">

public/images/icons.svg

@@ -10,4 +10,5 @@
 <symbol id="plus" viewBox="0 0 14 14"><title>plus</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M7 1v12M13 7H1"/></g></symbol>
 <symbol id="user" viewBox="0 0 18 19"><title>user</title><path d="M1 16.832c0-4.948 6-3.958 6-5.937 0 0 .115-1.314-.546-1.98C5.63 8.092 5 7.102 5 5.454 5 2.993 6.79 1 9 1s4 1.994 4 4.453c0 1.625-.614 2.637-1.474 3.463-.628.648-.526 1.979-.526 1.979 0 1.979 6 .99 6 5.937 0 0-1.593 1.168-8 1.168s-8-1.168-8-1.168z" stroke-width="1.5" fill="none" fill-rule="evenodd"/></symbol>
 <symbol id="user-rounded" viewBox="0 0 18 18"><title>user-rounded</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><rect x=".75" y=".75" width="16.5" height="16.5" rx="2"/><path d="M3.002 17c0-3.75 4.499-3 4.499-4.5 0 0 .086-.996-.41-1.5-.618-.625-1.09-1.376-1.09-2.625C6.001 6.511 7.344 5 9 5c1.656 0 2.999 1.511 2.999 3.375 0 1.232-.46 2-1.105 2.625-.471.491-.395 1.5-.395 1.5 0 1.5 4.499.75 4.499 4.5"/></g></symbol>
+<symbol id="warning" viewBox="0 0 20 20"><title>warning</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M10 3l8 14H2z"/><path d="M10 9v5" stroke-linecap="square"/></g></symbol>
 </svg>