Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit b8f058f

Browse files
justjannejustjanne
committed
Initial attempt at building a use case selection screen
1 parent 424d33d commit b8f058f

File tree

11 files changed

+298
-19
lines changed

11 files changed

+298
-19
lines changed

‎res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@
133133
@import "./views/dialogs/_TermsDialog.scss";
134134
@import "./views/dialogs/_UntrustedDeviceDialog.scss";
135135
@import "./views/dialogs/_UploadConfirmDialog.scss";
136+
@import "./views/dialogs/_UseCaseDialog.scss";
136137
@import "./views/dialogs/_UserSettingsDialog.scss";
137138
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
138139
@import "./views/dialogs/security/_AccessSecretStorageDialog.scss";

‎res/css/views/dialogs/_UseCaseDialog.scss

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
.mx_UseCaseDialog {
2+
display: grid;
3+
grid-template-rows: 1fr 1fr max-content 2fr;
4+
height: 100%;
5+
position: relative;
6+
grid-gap: $spacing-40;
7+
8+
&::before {
9+
/* Once we drop support for Firefox 102, remove this entire pseudo-element, move the background to the
10+
.mx_UseCaseDialog, and use backdrop-filter for the blur instead. */
11+
content: "";
12+
display: block;
13+
position: absolute;
14+
z-index: -1;
15+
opacity: 0.6;
16+
background-color: #ffffff;
17+
/* Intermediate values generated compared to the original figma design to compensate for issues with
18+
gamma-incorrect gradient blending in browsers */
19+
background-image:
20+
radial-gradient(53.85% 66.75% at 87.55% 0%,
21+
hsla(250, 76%, 71%, 0.261) 0%,
22+
hsla(251, 83%, 79%, 0.1305) 50%,
23+
hsla(250, 100%, 88%, 0) 100%),
24+
radial-gradient(41.93% 41.93% at 0% 0%,
25+
hsla(222, 29%, 20%, 0.28) 0%,
26+
hsla(240, 17%, 53%, 0.14) 50%,
27+
hsla(250, 100%, 88%, 0) 100%),
28+
radial-gradient(100% 100% at 0% 0%,
29+
hsla(250, 100%, 88%, 0.2436) 0%,
30+
hsla(318, 50%, 82%, 0.1218) 50%,
31+
hsla(0, 100%, 86%, 0) 100%),
32+
radial-gradient(106.35% 96.26% at 100% 0%,
33+
hsla(250, 100%, 88%, 0.4) 0%,
34+
hsla(208, 67%, 85%, 0.2) 50%,
35+
hsla(167, 76%, 82%, 0) 100%);
36+
/* Ugly hack to allow us to get rid of the color banding of the gradients */
37+
/* Can be replaced with backdrop-filter, replacing the hack below, after we stop supporting Firefox 102 */
38+
filter: blur(8px);
39+
/* Even uglier hack to prevent the blur filter from causing white fringing at the edges */
40+
left: -9px;
41+
right: -9px;
42+
top: -9px;
43+
bottom: -9px;
44+
}
45+
46+
.mx_UseCaseDialog_title {
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: end;
50+
51+
h1 {
52+
/* Values from design, not yet replaced with variables */
53+
font-weight: 600;
54+
font-size: 32px;
55+
line-height: 39px;
56+
text-align: center;
57+
}
58+
}
59+
60+
.mx_UseCaseDialog_info {
61+
display: flex;
62+
flex-direction: column;
63+
gap: $spacing-8;
64+
align-self: end;
65+
66+
h2 {
67+
/* Values from design, not yet replaced with variables */
68+
margin: 0;
69+
font-weight: 500;
70+
font-size: 24px;
71+
line-height: 32px;
72+
text-align: center;
73+
}
74+
75+
h4 {
76+
/* Values from design, not yet replaced with variables */
77+
margin: 0;
78+
font-weight: 400;
79+
font-size: 16px;
80+
line-height: 19px;
81+
color: $secondary-content;
82+
text-align: center;
83+
}
84+
}
85+
86+
.mx_UseCaseDialog_options {
87+
display: grid;
88+
/* Values from design, not yet replaced with variables */
89+
grid-template-columns: repeat(auto-fit, 230px);
90+
gap: $spacing-32;
91+
align-self: stretch;
92+
justify-content: center;
93+
94+
.mx_UseCaseDialog_option {
95+
display: flex;
96+
flex-direction: column;
97+
align-items: center;
98+
padding: $spacing-24 $spacing-16;
99+
background: $background;
100+
border: 1px solid $quinary-content;
101+
border-radius: 8px;
102+
103+
.mx_UseCaseDialog_icon {
104+
/* Values from design, not yet replaced with variables */
105+
background: rgba(171, 59, 167, 0.15);
106+
border-radius: 14px;
107+
padding: $spacing-8;
108+
margin-bottom: $spacing-16;
109+
110+
&::before {
111+
/* Values from design, not yet replaced with variables */
112+
content: "";
113+
display: block;
114+
background: #1E1E1E;
115+
mask-position: center;
116+
mask-repeat: no-repeat;
117+
mask-size: contain;
118+
width: 22px;
119+
height: 22px;
120+
}
121+
122+
&.mx_UseCaseDialog_icon_messaging::before {
123+
mask-image: url('$(res)/img/element-icons/chat-bubble.svg');
124+
}
125+
126+
&.mx_UseCaseDialog_icon_work::before {
127+
mask-image: url('$(res)/img/element-icons/view-community.svg');
128+
}
129+
130+
&.mx_UseCaseDialog_icon_community::before {
131+
mask-image: url('$(res)/img/globe.svg');
132+
}
133+
}
134+
}
135+
}
136+
137+
.mx_UseCaseDialog_skip {
138+
display: flex;
139+
flex-direction: column;
140+
align-self: start;
141+
}
142+
}
143+
144+
/* Animation duration, delay, and positioning not yet final */
145+
.mx_UseCaseDialog_fadeIn {
146+
animation-delay: 100ms;
147+
animation-duration: 1s;
148+
animation-name: mx_UseCaseDialog_fadeIn;
149+
animation-fill-mode: backwards;
150+
will-change: opacity;
151+
}
152+
153+
.mx_UseCaseDialog_slideIn {
154+
animation-delay: 100ms;
155+
animation-duration: 1s;
156+
animation-name: mx_UseCaseDialog_slideIn;
157+
animation-fill-mode: backwards;
158+
will-change: transform, opacity;
159+
}
160+
161+
@keyframes mx_UseCaseDialog_fadeIn {
162+
0% {
163+
opacity: 0;
164+
}
165+
100% {
166+
opacity: 1;
167+
}
168+
}
169+
170+
@keyframes mx_UseCaseDialog_slideIn {
171+
0% {
172+
transform: translate(0, 16px);
173+
opacity: 0;
174+
}
175+
100% {
176+
transform: translate(0, 0);
177+
opacity: 1;
178+
}
179+
}

‎res/img/element-icons/chat-bubble.svg

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/element-icons/group-members.svg

Lines changed: 2 additions & 7 deletions
Loading

0 commit comments

Comments
 (0)