Restyle empty state for feature flags

app/views/projects/feature_flags/_empty_state.html.haml

+.border-top
+  .row.empty-state
+  .col-12
+    .text-content
+      %h4.text-center= s_('FeatureFlags|Get started with feature flags')
+      %p.text-center
+        = s_('FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.')
+        = link_to 'More information', '#'
+
+      .text-center
+        = render 'new_feature_flag_button'

app/views/projects/feature_flags/_new_feature_flag_button.html.haml

+- if can?(current_user, :create_feature_flags, @project)
+  = link_to new_project_feature_flag_path(@project), class: 'btn btn-new' do
+    = s_('FeatureFlags|New Feature Flag')

app/views/projects/feature_flags/_table.html.haml

-
 .table-holder.border-top
   .gl-responsive-table-row.table-row-header{ role: 'row' }
     .table-section.section-10{ role: 'columnheader' }= s_('FeatureFlags|Status')
     .table-section.section-50{ role: 'columnheader' }= s_('FeatureFlags|Feature flag')
-  - if @feature_flags.empty?
-    .nothing-here-block
-      = s_('FeatureFlags|No feature flags found.')
-  - else
-    - @feature_flags.each do |feature_flag|
-      = render 'delete_feature_flag_modal', { feature_flag: feature_flag }
+  - @feature_flags.each do |feature_flag|
+    = render 'delete_feature_flag_modal', { feature_flag: feature_flag }
 
-      .gl-responsive-table-row{ role: 'row' }
-        .table-section.section-10{ role: 'gridcell' }
-          = check_box_tag 'feature_flag_status', nil, feature_flag.active?, disabled: true
+    .gl-responsive-table-row{ role: 'row' }
+      .table-section.section-10{ role: 'gridcell' }
+        = check_box_tag 'feature_flag_status', nil, feature_flag.active?, disabled: true
 
-        .table-section.section-50.d-flex.flex-column{ role: 'gridcell' }
-          .text-monospace= feature_flag.name
-          .text-secondary= feature_flag.description
+      .table-section.section-50.d-flex.flex-column{ role: 'gridcell' }
+        .text-monospace= feature_flag.name
+        .text-secondary= feature_flag.description
 
-        .table-section.section-40.table-button-footer{ role: 'gridcell' }
-          .table-action-buttons
-            = link_to edit_project_feature_flag_path(@project, feature_flag),
-                class: 'btn btn-default has-tooltip',
-                type: 'button',
-                title: _('Edit') do
-              = sprite_icon('pencil', size: 16)
+      .table-section.section-40.table-button-footer{ role: 'gridcell' }
+        .table-action-buttons
+          = link_to edit_project_feature_flag_path(@project, feature_flag),
+              class: 'btn btn-default has-tooltip',
+              type: 'button',
+              title: _('Edit') do
+            = sprite_icon('pencil', size: 16)
 
-            %button.btn.btn-danger.has-tooltip.ml-2{ type: 'button',
-                data: { toggle: 'modal',
-                  target: "#delete-feature-flag-modal-#{feature_flag.id}" },
-                title: _('Delete') }
-              = sprite_icon('remove', size: 16)
+          %button.btn.btn-danger.has-tooltip.ml-2{ type: 'button',
+              data: { toggle: 'modal',
+                target: "#delete-feature-flag-modal-#{feature_flag.id}" },
+              title: _('Delete') }
+            = sprite_icon('remove', size: 16)

app/views/projects/feature_flags/index.html.haml

@@ -7,9 +7,11 @@
     %button.btn.btn-default{ type: 'button', data: { toggle: 'modal', target: '#configure-feature-flags-modal' } }
       = s_('FeatureFlags|Configure')
 
-    - if can?(current_user, :create_feature_flags, @project)
-      = link_to new_project_feature_flag_path(@project), class: 'btn btn-new' do
-        = s_('FeatureFlags|New Feature Flag')
+    = render 'new_feature_flag_button'
 
 = render 'configure_feature_flags_modal'
-= render 'table'
+
+- if @feature_flags.empty?
+  = render 'empty_state'
+- else
+  = render 'table'