diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss index b6fd7dc910..a2b4508b84 100644 --- a/apps/block_scout_web/assets/css/_mixins.scss +++ b/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%); diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index dcaddd91dd..73875e39e8 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/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; diff --git a/apps/block_scout_web/assets/css/components/_btn_add_line.scss b/apps/block_scout_web/assets/css/components/_btn_add_line.scss new file mode 100644 index 0000000000..609564478c --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes_empty_content.scss b/apps/block_scout_web/assets/css/components/_stakes_empty_content.scss new file mode 100644 index 0000000000..1108e24707 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex new file mode 100644 index 0000000000..35cb792152 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_empty_content.html.eex @@ -0,0 +1,21 @@ +
+
+ + + + + + +
+
+

Lorem Ipsum

+

Lorem ipsum dolor sit amet, consect adipiscing elit, sed do +eiusmod temp incididunt ut labore et dolore magna.

+ + + + + <%= gettext "Become Candidate" %> + +
+
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex index 97d54b6a12..d87d446fde 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex @@ -14,7 +14,7 @@ <%= if @empty_content do %> - empty + <%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %> <%= end %>