Fix formatting of welcome screen for external users45797-welcome-screen-ee

Add changelog file
Remove example db file
Revert schema back to master
Restructure HTML to reflect changes in blank-state

5 files changed, 83 insertions, 97 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index cbd390e7145..1961bc2dd16 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -14,13 +14,12 @@
 .blank-state-row {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .blank-state-welcome {
   text-align: center;
-  padding: 20px 0 40px;
+  padding: $gl-padding 0 ($gl-padding * 2);
 
   .blank-state-welcome-title {
     font-size: 24px;
@@ -32,22 +31,13 @@
 }
 
 .blank-state-link {
-  display: block;
   color: $gl-text-color;
   flex: 0 0 100%;
   margin-bottom: 15px;
 
-  @include media-breakpoint-up(sm) {
-    flex: 0 0 49%;
-
-    &:nth-child(odd) {
-      margin-right: 5px;
-    }
-
-    &:nth-child(even) {
-      margin-left: 5px;
-    }
-  }
+  // @include media-breakpoint-up(sm) {
+  //   flex: 0 0 49%;
+  // }
 
   &:hover {
     background-color: $gray-light;
@@ -63,15 +53,20 @@
 }
 
 .blank-state {
-  padding: 20px;
+  display: flex;
+  align-items: center;
+  padding: 20px 50px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 50px 30px;
+  min-height: 240px;
+  margin-bottom: $gl-padding * 2;
+  flex: 0 0 calc(50% - #{$gl-padding});
+
+  @include media-breakpoint-down(sm) {
+    flex: 0 0 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
   }
 }
 
@@ -90,7 +85,7 @@
   }
 
   .blank-state-body {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       text-align: center;
       margin-top: 20px;
     }
@@ -121,9 +116,3 @@
     }
   }
 }
-
-@include media-breakpoint-down(xs) {
-  .blank-state-icon svg {
-    width: 315px;
-  }
-}
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 c50b20a83dc..f78279e4bec 100644
--- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
@@ -1,41 +1,37 @@
 .blank-state-row
-  = link_to new_project_path, class: "blank-state-link" do
-    .blank-state
+  = link_to new_project_path, class: "blank-state blank-state-link" do
+    .blank-state-icon
+      = custom_icon("add_new_project", size: 50)
+    .blank-state-body
+      %h3.blank-state-title
+        Create a project
+      %p.blank-state-text
+        Projects are where you store your code, access issues, wiki and other features of GitLab.
+
+  - if current_user.can_create_group?
+    = link_to new_group_path, class: "blank-state blank-state-link" do
       .blank-state-icon
-        = custom_icon("add_new_project", size: 50)
+        = custom_icon("add_new_group", size: 50)
       .blank-state-body
         %h3.blank-state-title
-          Create a project
+          Create a group
         %p.blank-state-text
-          Projects are where you store your code, access issues, wiki and other features of GitLab.
-
-  - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_group", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Create a group
-          %p.blank-state-text
-            Groups are a great way to organize projects and people.
-
-    = link_to new_admin_user_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_user", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Add people
-          %p.blank-state-text
-            Add your team members and others to GitLab.
+          Groups are a great way to organize projects and people.
 
-  = link_to admin_root_path, class: "blank-state-link" do
-    .blank-state
+    = link_to new_admin_user_path, class: "blank-state blank-state-link" do
       .blank-state-icon
-        = custom_icon("configure_server", size: 50)
+        = custom_icon("add_new_user", size: 50)
       .blank-state-body
         %h3.blank-state-title
-          Configure GitLab
+          Add people
         %p.blank-state-text
-          Make adjustments to how your GitLab instance is set up.
+          Add your team members and others to GitLab.
+
+  = link_to admin_root_path, class: "blank-state blank-state-link" do
+    .blank-state-icon
+      = custom_icon("configure_server", size: 50)
+    .blank-state-body
+      %h3.blank-state-title
+        Configure GitLab
+      %p.blank-state-text
+        Make adjustments to how your GitLab instance is set up.
diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml
index 8d5bddbb288..913f0e8cfae 100644
--- a/app/views/dashboard/projects/_blank_state_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml
@@ -2,15 +2,14 @@
 
 .blank-state-row
   - if current_user.can_create_project?
-    = link_to new_project_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_project", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Create a project
-          %p.blank-state-text
-            Projects are where you store your code, access issues, wiki and other features of GitLab.
+    = link_to new_project_path, class: "blank-state blank-state-link" do
+      .blank-state-icon
+        = custom_icon("add_new_project", size: 50)
+      .blank-state-body
+        %h3.blank-state-title
+          Create a project
+        %p.blank-state-text
+          Projects are where you store your code, access issues, wiki and other features of GitLab.
   - else
     .blank-state
       .blank-state-icon
@@ -22,37 +21,34 @@
           If you are added to a project, it will be displayed here.
 
   - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_group", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Create a group
-          %p.blank-state-text
-            Groups are the best way to manage projects and members.
+    = link_to new_group_path, class: "blank-state blank-state-link" do
+      .blank-state-icon
+        = custom_icon("add_new_group", size: 50)
+      .blank-state-body
+        %h3.blank-state-title
+          Create a group
+        %p.blank-state-text
+          Groups are the best way to manage projects and members.
 
   - if public_project_count > 0
-    = link_to trending_explore_projects_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("globe", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Explore public projects
-          %p.blank-state-text
-            There are
-            = number_with_delimiter(public_project_count)
-            public projects on this server.
-            Public projects are an easy way to allow
-            everyone to have read-only access.
-
-  = link_to "https://docs.gitlab.com/", class: "blank-state-link" do
-    .blank-state
+    = link_to trending_explore_projects_path, class: "blank-state blank-state-link" do
       .blank-state-icon
-        = custom_icon("lightbulb", size: 50)
+        = custom_icon("globe", size: 50)
       .blank-state-body
         %h3.blank-state-title
-          Learn more about GitLab
+          Explore public projects
         %p.blank-state-text
-          Take a look at the documentation to discover all of GitLab's capabilities.
+          There are
+          = number_with_delimiter(public_project_count)
+          public projects on this server.
+          Public projects are an easy way to allow
+          everyone to have read-only access.
+
+  = link_to "https://docs.gitlab.com/", class: "blank-state blank-state-link" do
+    .blank-state-icon
+      = custom_icon("lightbulb", size: 50)
+    .blank-state-body
+      %h3.blank-state-title
+        Learn more about GitLab
+      %p.blank-state-text
+        Take a look at the documentation to discover all of GitLab's capabilities.
diff --git a/changelogs/unreleased/45797-welcome-screen.yml b/changelogs/unreleased/45797-welcome-screen.yml
new file mode 100644
index 00000000000..39677a96050
--- /dev/null
+++ b/changelogs/unreleased/45797-welcome-screen.yml
@@ -0,0 +1,5 @@
+---
+title: Fix formatting welcome screen external users
+merge_request: 32227
+author:
+type: fixed
diff --git a/config/database.yml.example b/config/database.yml.example
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/config/database.yml.example