Fix welcome page action items alignment

5 files changed, 40 insertions, 92 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index c0224d3bfa9..6bb096fc5bd 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -1,9 +1,5 @@
 .blank-state-parent-container {
-  display: flex;
-
   .section-container {
-    display: flex;
-    flex: 1;
     padding: 10px;
   }
 
@@ -13,91 +9,42 @@
     padding-bottom: 25px;
     border: 1px solid $border-color;
     border-radius: $border-radius-default;
-
-    &.section-ee-trial {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.blank-state-welcome {
-  text-align: center;
-
-  .blank-state-text {
-    margin-bottom: 0;
   }
 }
 
 .blank-state {
   padding-top: 20px;
   padding-bottom: 20px;
-}
-
-.blank-state.ee-trial {
-  padding: 20px;
   text-align: center;
-}
-
-.blank-state-no-icon {
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
-.blank-state-icon {
-  padding-bottom: 20px;
-  font-size: 56px;
 
-  svg {
-    display: block;
-    margin: auto;
-  }
-}
-
-@media (min-width: $screen-sm-max) {
-  .section-welcome .blank-state-icon svg {
-    width: 130%;
-  }
-}
-
-.blank-state-title {
-  margin-top: 0;
-  margin-bottom: 10px;
-  font-size: 18px;
-}
-
-.blank-state-text {
-  margin-top: 0;
-  margin-bottom: $gl-padding;
-  font-size: 14px;
+  &.blank-state-welcome {
+    .blank-state-welcome-title {
+      font-size: 24px;
+    }
 
-  > strong {
-    font-weight: 600;
+    .blank-state-text {
+      margin-bottom: 0;
+    }
   }
-}
 
-.blank-state-welcome-title {
-  font-size: 24px;
-}
+  .blank-state-icon {
+    padding-bottom: 20px;
 
-@media (max-width: $screen-md-min) {
-  .blank-state-parent-container {
-    &,
-    .section-container {
+    svg {
       display: block;
+      margin: auto;
     }
   }
 
-  .blank-state {
-    text-align: center;
+  .blank-state-title {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 18px;
   }
 
-  .blank-state-icon {
-    padding-bottom: 0;
-  }
-
-  .blank-state-body {
-    margin-top: 15px;
+  .blank-state-text {
+    max-width: $container-text-max-width;
+    margin: 0 auto $gl-padding;
+    font-size: 14px;
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3f032776d82..52519b1149c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -176,6 +176,7 @@ $header-height: 50px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $limited-layout-width-sm: 790px;
+$container-text-max-width: 540px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
 $border-radius-default: 3px;
diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
index 0319838bdb4..209afd4aab4 100644
--- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
@@ -1,7 +1,7 @@
-.row.blank-state.clearfix
-  .col-md-1.col-md-offset-3.blank-state-icon
+.blank-state
+  .blank-state-icon
     = custom_icon("add_new_user", size: 50)
-  .col-md-5.blank-state-body
+  .blank-state-body
     %h3.blank-state-title
       Add user
     %p.blank-state-text
@@ -9,10 +9,10 @@
     = link_to new_admin_user_path, class: "btn btn-new" do
       New user
 
-.row.blank-state.clearfix
-  .col-md-1.col-md-offset-3.blank-state-icon
+.blank-state
+  .blank-state-icon
     = custom_icon("configure_server", size: 50)
-  .col-md-5.blank-state-body
+  .blank-state-body
     %h3.blank-state-title
       Configure GitLab
     %p.blank-state-text
@@ -21,10 +21,10 @@
       Configure
 
 - if current_user.can_create_group?
-  .row.blank-state.clearfix
-    .col-md-1.col-md-offset-3.blank-state-icon
+  .blank-state
+    .blank-state-icon
       = custom_icon("add_new_group", size: 50)
-    .col-md-5.blank-state-body
+    .blank-state-body
       %h3.blank-state-title
         Create a group
       %p.blank-state-text
diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml
index a079f0ac1a4..a93a3415ee1 100644
--- a/app/views/dashboard/projects/_blank_state_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml
@@ -1,10 +1,10 @@
 - public_project_count = ProjectsFinder.new(current_user: current_user).execute.count
 
 - if current_user.can_create_group?
-  .row.blank-state.clearfix
-    .col-md-1.col-md-offset-3.blank-state-icon
+  .blank-state
+    .blank-state-icon
       = custom_icon("add_new_group", size: 50)
-    .col-md-5.blank-state-body
+    .blank-state-body
       %h3.blank-state-title
         Create a group for several dependent projects.
       %p.blank-state-text
@@ -12,10 +12,10 @@
       = link_to new_group_path, class: "btn btn-new" do
         New group
 
-.row.blank-state.clearfix
-  .col-md-1.col-md-offset-3.blank-state-icon
+.blank-state
+  .blank-state-icon
     = custom_icon("add_new_project", size: 50)
-  .col-md-5.blank-state-body
+  .blank-state-body
     %h3.blank-state-title
       Create a project
     %p.blank-state-text
@@ -32,10 +32,10 @@
         New project
 
 - if public_project_count > 0
-  .row.blank-state.clearfix
-    .col-md-1.col-md-offset-3.blank-state-icon
+  .blank-state
+    .blank-state-icon
       = custom_icon("globe", size: 50)
-    .col-md-5.blank-state-body
+    .blank-state-body
       %h3.blank-state-title
         Explore public projects
       %p.blank-state-text
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index 94af033c1e3..ad3fac6d164 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -1,6 +1,6 @@
 .row.blank-state-parent-container
-  .section-container
-    .container.section-body.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
+  .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
+    .container.section-body
       .blank-state.blank-state-welcome
         %h2.blank-state-welcome-title
           Welcome to GitLab