(add) stakes empty content

apps/block_scout_web/assets/css/_mixins.scss

@@ -66,6 +66,37 @@
     justify-content: space-between;
     padding: 0 15px;
     transition: all 0.25s;
+    width: fit-content;
+
+    &:hover {
+        background-color: darken($bg-color, 10%);
+    }
+
+    &-text {
+        color: $text-color;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 12px;
+        text-align: left;
+    }
+
+    path {
+        fill: $text-color;
+    }
+}
+
+@mixin btn-line($bg-color: #fff, $text-color: $secondary) {
+    align-items: center;
+    background-color: $bg-color;
+    border-radius: 2px;
+    border: 1px solid $text-color;
+    cursor: pointer;
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+    padding: 0 15px;
+    transition: all 0.25s;
+    width: fit-content;
 
     &:hover {
         background-color: darken($bg-color, 10%);

apps/block_scout_web/assets/css/app.scss

@@ -91,6 +91,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/highlight";
 @import "components/copy_icon";
 @import "components/btn_add_full";
+@import "components/btn_add_line";
 @import "components/stakes";
 @import "components/check";
 @import "components/stakes_table";
@@ -98,6 +99,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/check_tooltip";
 @import "components/tooltip";
 @import "components/progress_from_to";
+@import "components/stakes_empty_content";
 
 :export {
   primary: $primary;

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

@@ -0,0 +1,6 @@
+$btn-add-line-bg: #fff !default;
+$btn-add-line-color: $secondary !default;
+
+.btn-add-line {
+    @include btn-line($btn-add-line-bg, $btn-add-line-color);
+}

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

@@ -0,0 +1,35 @@
+.stakes-empty-content {
+    display: flex;
+    justify-content: center;
+    padding: 100px 15px;
+}
+
+.stakes-empty-content-pic {
+    flex-shrink: 0;
+    margin: 0 50px 0 0;
+}
+
+.stakes-empty-content-pic-svg-path {
+    fill: $primary;
+}
+
+.stakes-empty-content-info {
+    max-width: 300px;
+}
+
+.stakes-empty-content-title {
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 1.2;
+    margin: 0 0 15px;
+    text-align: left;
+}
+
+.stakes-empty-content-text {
+    color: #a3a9b5;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.71;
+    margin: 0 0 25px;
+    text-align: left;
+}

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex

@@ -0,0 +1,21 @@
+<div class="stakes-empty-content">
+    <div class="stakes-empty-content-pic">
+        <svg class="stakes-empty-content-pic-svg" xmlns="http://www.w3.org/2000/svg" width="94" height="121">
+            <path class="stakes-empty-content-pic-svg-path" fill-rule="evenodd" d="M40 1.47l48 27.759c3.314 1.916 6 6.156 6 9.47v57.999c0 3.314-2.686 4.447-6 2.531L40 71.47c-3.314-1.916-6-6.156-6-9.47V4c0-3.314 2.686-4.446 6-2.53z" opacity=".2"/>
+            <path class="stakes-empty-content-pic-svg-path" fill-rule="evenodd" d="M23 11.47l48 27.759c3.314 1.916 6 6.156 6 9.47v58c0 3.313-2.686 4.446-6 2.53L23 81.47c-3.314-1.917-6-6.156-6-9.47V14c0-3.314 2.686-4.446 6-2.53z" opacity=".6"/>
+            <path class="stakes-empty-content-pic-svg-path" fill-rule="evenodd" d="M6 21.47l48 27.759c3.314 1.916 6 6.156 6 9.469v58.001c0 3.313-2.686 4.446-6 2.53L6 91.47C2.686 89.553 0 85.314 0 82V24c0-3.314 2.686-4.447 6-2.53z"/>
+            <path fill="#FFF" fill-rule="evenodd" d="M39 78.814l-9-5.18v11c0 1.104-.895 1.484-2 .849-1.105-.636-2-2.047-2-3.152v-11l-9-5.18c-1.105-.636-2-2.046-2-3.151s.895-1.485 2-.849l9 5.18v-11c0-1.104.895-1.484 2-.848 1.105.635 2 2.046 2 3.151v11l9 5.18c1.105.636 2 2.047 2 3.151 0 1.105-.895 1.485-2 .849z"/>
+        </svg>
+    </div>
+    <div class="stakes-empty-content-info">
+        <h1 class="stakes-empty-content-title">Lorem Ipsum</h1>
+        <p class="stakes-empty-content-text">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do
+eiusmod temp incididunt ut labore et dolore magna.</p>
+        <span class="btn-add-line">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+            <path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
+            </svg>
+            <span class="btn-add-line-text"><%= gettext "Become Candidate" %></span>
+        </span>
+    </div>
+</div>

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex

@@ -14,7 +14,7 @@
             <%= if @empty_content do %>
             <tr>
                 <td colspan="6">
-                    empty
+                    <%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %>
                 </td>
             </tr>
             <%= end %>