Initial version of the user-callouts

3 files changed, 53 insertions, 0 deletions

diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
new file mode 100644
index 00000000000..b91fc698629
--- /dev/null
+++ b/app/assets/javascripts/user_callout.js
@@ -0,0 +1,22 @@
+/* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */
+/* global Cookies */
+
+((global) => {
+  const userCalloutElementName = '#user-callout';
+
+  class UserCallout {
+    constructor() {
+      this.init();
+    }
+
+    init() {
+      $(document)
+        .on('DOMContentLoaded', () => {
+          const element = $(userCalloutElementName);
+          console.log('element:', element);
+        });
+    }
+  }
+
+  global.UserCallout = UserCallout;
+})(window.gl || (window.gl = {}));
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ba0af072716..1de05112fa7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -201,6 +201,7 @@ $table-permission-x-bg: #d9edf7;
 $username-color: #666;
 $description-color: #666;
 $profiler-border: #eee;
+$user-callout-right: 120px;
 
 /* tanuki logo colors */
 $tanuki-red: #e24329;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8031c4467a4..9add1bafdb3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -277,3 +277,33 @@ table.u2f-registrations {
     padding-left: 18px;
   }
 }
+
+#user-callout {
+  margin: 24px auto 0;
+
+  .bordered-box {
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+  }
+
+  .landing {
+    margin-bottom: $gl-padding;
+    overflow: hidden;
+
+    .dismiss-icon {
+      position: absolute;
+      right: $user-callout-right;
+      cursor: pointer;
+      color: $cycle-analytics-dismiss-icon-color;
+    }
+
+    .svg-container {
+      text-align: center;
+
+      svg {
+        width: 136px;
+        height: 136px;
+      }
+    }
+  }
+}