Skip to content

Commit 8a8d13b

Browse files
achen178achen178
committed
Create static toast on Upcase Classic
1 parent c53183c commit 8a8d13b

7 files changed

Lines changed: 110 additions & 3 deletions

File tree

‎app/assets/images/icons/arrow-right.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/icons/info.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/stylesheets/base/_variables.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ $gray-3: #999;
1515
$gray-4: #ddd;
1616
$gray-5: #f3f3f3;
1717
$hero-green: #4dd1aa;
18+
$info-color: #ebf3ff;
1819
$landing-purple-border: #6a5b7d;
1920
$landing-purple: #341642;
2021
$light-brown: #eddaa5;
@@ -63,7 +64,7 @@ $topic-backgrounds: (
6364
rails: #ffecee,
6465
testing: #e5fdf4,
6566
vim: #e1f5ff,
66-
workflow: #fcf5c8
67+
workflow: #fcf5c8,
6768
);
6869
$topic-colors: (
6970
analytics: #a5c236,
@@ -77,11 +78,12 @@ $topic-colors: (
7778
rails: #d5414d,
7879
testing: #34d096,
7980
vim: #2192cf,
80-
workflow: #f4bc15
81+
workflow: #f4bc15,
8182
);
8283

8384
// Font families
84-
$sans-serif: "proxima-nova-1", "proxima-nova-2", "museo-sans-1", "museo-sans-2", helvetica neue, sans-serif;
85+
$sans-serif: "proxima-nova-1", "proxima-nova-2", "museo-sans-1", "museo-sans-2",
86+
helvetica neue, sans-serif;
8587
$serif: "adelle-1", "adelle-2", $font-stack-helvetica;
8688

8789
// Font weights

‎app/assets/stylesheets/marketing.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
@import "marketing/components/page-content";
5050
@import "marketing/components/page-section";
5151
@import "marketing/components/page-split";
52+
@import "marketing/components/persistent-toast";
5253
@import "marketing/components/person";
5354
@import "marketing/components/selling-point";
5455
@import "marketing/components/testimonial-heading";

‎app/assets/stylesheets/marketing/components/_persistent-toast.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.persistent-toast {
2+
align-items: stretch;
3+
background: $info-color;
4+
border-radius: 16px;
5+
bottom: $base-spacing;
6+
box-shadow: 0 12px 12px -6px rgba($black, 0.3), 0 0 1px 0 rgba($black, 0.4);
7+
display: flex;
8+
left: 50%;
9+
max-width: 30rem;
10+
overflow: hidden;
11+
position: fixed;
12+
transform: translateX(-50%);
13+
width: 90vw;
14+
z-index: 999;
15+
}
16+
17+
.icon-container {
18+
align-items: center;
19+
color: #2639c8;
20+
display: flex;
21+
justify-content: center;
22+
padding: $small-spacing;
23+
}
24+
25+
.toast-content {
26+
color: #2639c8;
27+
flex: 1;
28+
height: 100%;
29+
padding: $small-spacing;
30+
}
31+
32+
.toast-cta-container {
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: space-between;
36+
37+
a,
38+
button {
39+
align-items: center;
40+
background: $info-color;
41+
border: solid 1px $search-snippet-border;
42+
border-right: 0;
43+
color: #2639c8;
44+
display: flex;
45+
flex: 1;
46+
font-family: $strong-font-family;
47+
font-size: 1.25rem;
48+
gap: $small-spacing;
49+
margin-left: -1px;
50+
margin-top: -1px;
51+
padding: $small-spacing $base-spacing;
52+
transition: $fast-transition;
53+
54+
&:first-child {
55+
border-top: 0;
56+
}
57+
58+
&:last-child {
59+
border-bottom: 0;
60+
}
61+
62+
&:hover {
63+
background: $upcase-blue;
64+
color: $white;
65+
}
66+
}
67+
}
68+
69+
@media screen and (min-width: $small-screen) {
70+
.persistent-toast {
71+
transform: translateX(0);
72+
left: $base-spacing;
73+
}
74+
.toast-content,
75+
.icon-container {
76+
padding: $base-spacing;
77+
}
78+
}

‎app/views/layouts/marketing.html.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<body class="<%= body_class %>">
2727
<%= render "shared/flashes" %>
2828
<%= render "layouts/header" %>
29+
<%= render "shared/persistent_toast" %>
2930
<%= yield %>
3031
<%= render "layouts/footer" %>
3132
</body>

‎app/views/shared/_persistent_toast.html.erb‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<% if ActiveModel::Type::Boolean.new.serialize(ENV["ENABLE_MARKETING_REDESIGN"]) %>
2+
<div class="persistent-toast">
3+
<div class="icon-container">
4+
<%= inline_svg_tag "icons/info.svg" %>
5+
</div>
6+
<p class="toast-content">
7+
Looking to level up a team?<br/>Check out Upcase for Teams.
8+
</p>
9+
<div class="toast-cta-container">
10+
<%= link_to({controller: "/marketing_redesign/home", action: :show}) do %>
11+
Go
12+
<%= inline_svg_tag "icons/arrow-right.svg" %>
13+
<% end %>
14+
<button class="toast-button">
15+
Dismiss
16+
</button>
17+
</div>
18+
</div>
19+
<% end %>

0 commit comments

Comments
 (0)