chore: Improve the feature management styles in super admin (#7920)

app/assets/stylesheets/administrate/application.scss

@@ -29,3 +29,5 @@
 @import 'components/pagination';
 @import 'components/search';
 @import 'components/reports';
+
+@import 'custom_styles';

app/assets/stylesheets/administrate/custom_styles.scss

@@ -0,0 +1,24 @@
+// custom styles for the dashboard
+
+.feature-cell {
+  background: $color-extra-light-blue;
+  border-radius: 10px;
+  float: left;
+  margin-left: 8px;
+  margin-top: 6px;
+  padding: 4px 12px;
+
+  .icon-container {
+    margin-right: 4px;
+
+  }
+
+  .value-container {
+    margin-left: 6px;
+  }
+}
+
+
+.feature-container {
+  max-width: 100rem;
+}

app/views/fields/account_features_field/_form.html.erb

@@ -1,9 +1,14 @@
 <div class="field-unit__label">
   <%= f.label field.attribute %>
 </div>
-<div class="field-unit__field">
+<div class="field-unit__field feature-container">
     <% field.data.each do |key,val| %>
-    <%= key %>: <%= check_box "enabled_features", "feature_#{key}", { checked: val }, true, false  %>
-    <br/>
+    <div class='feature-cell'>
+    <% if ['audit_logs', 'response_bot'].include? key %>
+    <span class='icon-container'><i class="ion ion-asterisk"></i></span>
+    <% end %>
+    <span><%= key %></span> 
+    <span class='value-container'><%= check_box "enabled_features", "feature_#{key}", { checked: val }, true, false  %> </span>
+    </div>
   <% end %>
 </div>

app/views/fields/account_features_field/_show.html.erb

@@ -1,6 +1,12 @@
-<div class="field-unit__field">
-    <% field.data.each do |key,val| %>
-    <%= key %>: <%= val %> <br/>
+<div class='feature-container'>
+  <% field.data.each do |key,val| %>
+    <div class='feature-cell'>
+    <% if ['audit_logs', 'response_bot'].include? key %>
+    <span class='icon-container'><i class="ion ion-asterisk"></i></span>
+    <% end %>
+    <span><%= key %></span> 
+    <span class='value-container'><%= val.present? ? '✅' : '❌' %> </span>
+    </div>
   <% end %>
 </div>