Merge pull request #2091 from poanetwork/feature/#2089-question-modal

(add) question status modal

CHANGELOG.md

@@ -9,6 +9,7 @@
 ## 2.0.0-beta
 
 ### Features
+- [#2091](https://github.com/poanetwork/blockscout/pull/2091) - Added "Question" modal.
 - [#1963](https://github.com/poanetwork/blockscout/pull/1963), [#1959](https://github.com/poanetwork/blockscout/pull/1959), [#1948](https://github.com/poanetwork/blockscout/pull/1948), [#1936](https://github.com/poanetwork/blockscout/pull/1936), [#1925](https://github.com/poanetwork/blockscout/pull/1925), [#1922](https://github.com/poanetwork/blockscout/pull/1922), [#1903](https://github.com/poanetwork/blockscout/pull/1903), [#1874](https://github.com/poanetwork/blockscout/pull/1874), [#1895](https://github.com/poanetwork/blockscout/pull/1895), [#2031](https://github.com/poanetwork/blockscout/pull/2031), [#2073](https://github.com/poanetwork/blockscout/pull/2073), [#2074](https://github.com/poanetwork/blockscout/pull/2074),  - added new themes and logos for poa, eth, rinkeby, goerli, ropsten, kovan, sokol, xdai, etc, rsk and default theme
 - [#1726](https://github.com/poanetwork/blockscout/pull/2071) - Updated styles for the new smart contract page.
 - [#2081](https://github.com/poanetwork/blockscout/pull/2081) - Tooltip for 'more' button, explorers logos added

apps/block_scout_web/assets/css/components/_modal_status.scss

@@ -1,6 +1,7 @@
 $modal-status-graph-error: #ff0d51 !default;
 $modal-status-graph-warning: #ff8502 !default;
 $modal-status-graph-success: $primary !default;
+$modal-status-graph-question: #329ae9 !default;
 
 .modal-status {
   max-width: 100%;
@@ -32,6 +33,10 @@ $modal-status-graph-success: $primary !default;
     background-color: $modal-status-graph-success;
   }
 
+  &-question {
+    background-color: $modal-status-graph-question;
+  }
+
   svg {
     margin-top: 15px;
   }
@@ -62,3 +67,18 @@ $modal-status-graph-success: $primary !default;
   margin: 0 0 25px;
   text-align: center;
 }
+
+.modal-status-button-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .btn-line {
+    flex-grow: 1;
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

apps/block_scout_web/lib/block_scout_web/templates/common_components/_icon_question_modal.html.eex

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="85">
+    <defs>
+        <filter id="questiona" width="62" height="85" x="0" y="0" filterUnits="userSpaceOnUse">
+            <feOffset dy="6" in="SourceAlpha"/>
+            <feGaussianBlur result="blurOut" stdDeviation="3.464"/>
+            <feFlood flood-color="#2674AF" result="floodOut"/>
+            <feComposite in="floodOut" in2="blurOut" operator="atop"/>
+            <feComponentTransfer>
+                <feFuncA slope=".6" type="linear"/>
+            </feComponentTransfer>
+            <feMerge>
+                <feMergeNode/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+        <filter id="questionb">
+            <feOffset dy="-4" in="SourceAlpha"/>
+            <feGaussianBlur result="blurOut" stdDeviation="2.828"/>
+            <feFlood flood-color="#329AE9" result="floodOut"/>
+            <feComposite in="floodOut" in2="blurOut" operator="out" result="compOut"/>
+            <feComposite in="compOut" in2="SourceAlpha" operator="in"/>
+            <feComponentTransfer>
+                <feFuncA slope=".5" type="linear"/>
+            </feComponentTransfer>
+            <feBlend in2="SourceGraphic"/>
+        </filter>
+    </defs>
+    <path fill="#FFF" fill-rule="evenodd" d="M30.385 46.419c1.149 0 2.146-.344 2.995-1.033.847-.689 1.381-1.664 1.6-2.928.273-1.205.889-2.368 1.846-3.487.957-1.119 2.339-2.454 4.144-4.004 1.915-1.779 3.474-3.3 4.678-4.563 1.203-1.262 2.228-2.784 3.077-4.564.848-1.779 1.272-3.731 1.272-5.855 0-2.87-.794-5.438-2.38-7.707-1.587-2.267-3.774-4.046-6.565-5.338-2.79-1.292-5.963-1.937-9.518-1.937-3.174 0-6.333.531-9.478 1.593-3.147 1.062-5.95 2.54-8.412 4.434-.931.747-1.6 1.522-2.01 2.325-.41.804-.616 1.808-.616 3.013 0 1.78.479 3.287 1.436 4.521.957 1.235 2.12 1.851 3.488 1.851 1.149 0 2.653-.545 4.513-1.636l1.97-1.033c1.531-.918 2.913-1.621 4.144-2.11a10.075 10.075 0 0 1 3.734-.732c1.53 0 2.734.374 3.61 1.12.875.747 1.313 1.752 1.313 3.014 0 1.263-.315 2.41-.943 3.444-.63 1.033-1.574 2.268-2.832 3.702-1.751 1.895-3.118 3.746-4.103 5.554-.984 1.808-1.477 4.062-1.477 6.759 0 1.78.397 3.158 1.19 4.133.793.977 1.9 1.464 3.324 1.464zm.164 20.579c2.297 0 4.198-.803 5.703-2.411 1.504-1.606 2.257-3.587 2.257-5.941 0-2.353-.753-4.334-2.257-5.941-1.505-1.607-3.406-2.411-5.703-2.411-2.244 0-4.117.804-5.621 2.411-1.506 1.607-2.257 3.588-2.257 5.941 0 2.354.751 4.335 2.257 5.941 1.504 1.608 3.377 2.411 5.621 2.411z" filter="url(#questionb)"/>
+</svg>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_modal_status.html.eex

@@ -17,6 +17,11 @@
             render BlockScoutWeb.CommonComponentsView, "_icon_warning_modal.html"
           end
         %>
+        <%=
+          if @status == "question" do
+            render BlockScoutWeb.CommonComponentsView, "_icon_question_modal.html"
+          end
+        %>
       </div>
       <%= render BlockScoutWeb.CommonComponentsView, "_modal_close_button.html" %>
       <div class="modal-body modal-status-body">
@@ -26,9 +31,20 @@
         <%= if assigns[:text] do %>
         <p class="modal-status-text"><%= @text %></p>
         <% end %>
+        <div class="modal-status-button-wrapper">
+          <%= if @status !== "question" do %>
             <button class="btn-line" type="button" data-dismiss="modal">
               <span class="btn-line-text">Ok</span>
             </button>
+          <% else %>
+            <button class="btn-line except" type="button" data-dismiss="modal">
+              <span class="btn-line-text">No</span>
+            </button>
+            <button class="btn-line accept" type="button" data-dismiss="modal">
+              <span class="btn-line-text">Yes</span>
+            </button>
+          <% end %>
+        </div>
       </div>
     </div>
   </div>