settings/group checkboxes

src/views/admin/settings/group.tpl

@@ -5,25 +5,29 @@
 	<div class="col-xs-10">
 		<form role="form">
 			<div class="checkbox">
-				<label>
-					<input type="checkbox" data-field="allowPrivateGroups" checked> <strong>Private Groups</strong>
-					<p class="help-block">
-						If enabled, joining of groups requires the approval of the group owner <em>(Default: enabled)</em>
-					</p>
-					<p class="help-block">
-						<strong>Beware!</strong> If this option is disabled and you have private groups, they automatically become public.
-					</p>
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" data-field="allowPrivateGroups" checked>
+					<span class="mdl-switch__label"><strong>Private Groups</strong></span>
 				</label>
 			</div>
 
+			<p class="help-block">
+				If enabled, joining of groups requires the approval of the group owner <em>(Default: enabled)</em>
+			</p>
+			<p class="help-block">
+				<strong>Beware!</strong> If this option is disabled and you have private groups, they automatically become public.
+			</p>
+
 			<div class="checkbox">
-				<label>
-					<input type="checkbox" data-field="allowGroupCreation"> <strong>Allow Group Creation</strong>
-					<p class="help-block">
-						If enabled, users can create groups <em>(Default: disabled)</em>
-					</p>
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" data-field="allowGroupCreation">
+					<span class="mdl-switch__label"><strong>Allow Group Creation</strong></span>
 				</label>
 			</div>
+
+			<p class="help-block">
+				If enabled, users can create groups <em>(Default: disabled)</em>
+			</p>
 		</form>
 	</div>
 </div>