New warning icon and tooltip text

src/cljs/commiteth/core.cljs

@@ -41,31 +41,40 @@
         hide-gh-repos-warning (rf/subscribe [:get-in [:user :hide_gh_repos_warning]])
         warning-open? (rf/subscribe [:warning-open?])]
     (fn []
-      (let [[warning-kw warning-text] 
+      (let [[kw title description description-link description-url] 
             (cond 
               (and (not @hide-address-warning) (str/blank? @eth-address)) 
-              [:hide_address_warning "Please set your Ethereum account address"]
+              [:hide_address_warning 
+               "Your ETH address is missing" 
+               "In order to get your rewards, " 
+               "update your Ethereum address" "/app#/settings"]
               (and (not @hide-gh-repos-warning) (or (nil? @repo-count) (= 0 @repo-count))) 
-              [:hide_gh_repos_warning "Please add OpenBounty GitHub App to one of your repos"]
+              [:hide_gh_repos_warning 
+               "GitHub App is not installed"
+               "Please add OpenBounty GitHub App to one of your repos. Check "
+               "this guide on how to setup your account" "https://wiki.status.im/Status_Open_Bounty"]
               :else nil)
             dialog (if @warning-open?
-                     [:div.ui.menu.transition.warning.visible {:tab-index -1}]
+                     [:div.ui.menu.transition.warning.warning-tooltip.visible]
-                     [:div.ui.menu.transition.warning.hidden])
+                     [:div.ui.menu.transition.warning.warning-tooltip.hidden])
             on-change-fn (fn [e]
                            (let [value (-> e .-target .-checked)]
-                             (rf/dispatch [:save-user-fields {warning-kw value}])))]
+                             (rf/dispatch [:save-user-fields {kw value}])))]
-        (when warning-text
+        (when title
           [:div#warning_tooltip.ui.inline.dropdown
            {:on-click #(rf/dispatch [:warning-open])}
-           [:img {:src "warning.png"
+           [:img.warning-img {:src "warning.png"
-                  :height "32px"
+                              :height "25px"
-                  :width "32px" }] 
+                              :width "22px" }] 
            (into dialog 
-                 [ [:div warning-text]
+                 [[:div.title-text title]
-                  [:div [:input {:type "checkbox"
+                  [:div.title-text
-                                 :id :hide-warning
+                   [:div.description-text description
-                                 :on-change on-change-fn}]
+                    [:a#description-link {:href description-url} description-link]]
-                   [:label {:for :hide-warning} "Do not show this again"]]])])))))
+                   [:div.description-text [:input {:type "checkbox"
+                                                   :id :hide-warning
+                                                   :on-change on-change-fn}]
+                    [:label {:for :hide-warning} "Do not show this again"]]]])])))))
 
 (defn user-dropdown [user items mobile?]
   (let [menu (if @(rf/subscribe [:user-dropdown-open?])
@@ -97,7 +106,7 @@
   (let [user (rf/subscribe [:user])]
     (fn []
       (if @user
-        [:div.ui.container.user-component
+        [:div.user-component
          [warning-icon]
          [user-dropdown
           @user

src/less/style.less

@@ -199,12 +199,18 @@ label[for="input-hidden"] {
 }
 
 .user-component {
-    margin-top: 5px!important;
+  margin-top: 5px!important;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 
     .item {
         padding-top: 0px !important;
     }
 }
+.user-component:first-child {
+}
 
 .ui.text.menu {
     .item:hover {
@@ -1268,5 +1274,64 @@ body {
     padding-top: 20px;
 }
 
+#warning_tooltip {
+  margin-right: 28px;
+}
+.warning-img {
+  cursor: pointer;
+}
 
-@import (inline) "tachyons-utils.css";
+.warning-tooltip {
+  width: 246px;
+  height: 99px;
+  border-radius: 8px;
+  background-color: #ffffff;
+  background-color: var(--white);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
+  display: flex;
+  flex-direction: column;
+  
+
+  .title-text {
+    width: 189px;
+    height: 16px;
+    font-family: PostGrotesk-Book;
+    font-size: 14px;
+    font-weight: 900;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.14;
+    letter-spacing: normal;
+    text-align: left;
+    color: #42505c;
+  white-space: normal !important;
+    /*color: var(--dark-gray);*/
+  }
+
+  .description-text {
+    width: 189px;
+    /*height: 64px;*/
+    font-family: PostGrotesk-Book;
+    font-size: 14px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.14;
+    letter-spacing: normal;
+    text-align: left;
+    color: #8d99a4;
+    /*color: var(--gray);*/
+  white-space: normal !important;
+    #description-link {
+  white-space: normal !important;
+      color: #57a7ed;
+      /*color: var(--main-blue);*/
+    }
+  }
+}
+
+.warning-tooltip.hidden {
+  display: none;
+}
+
+@import (inline) "tachyons-utils.css";