Skip to content

Commit 6cad402

Browse files
sandeep-derivsandeep-deriv
authored
Merge pull request #22 from deriv-com/Rupato/BOT-1952/Fix--dashboard-content-menu-dialogs
[APP_SEPERATION]/Rupato/BOT-1952/Fix--dashboard-content-menu-dialogs
2 parents 05303ff + 2154329 commit 6cad402

27 files changed

+1634
-21
lines changed

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Deriv Bot</title>
88
</head>
99
<body class="body">
10+
<div id="modal_root" class="modal-root"></div>
1011
<div id="root"></div>
1112
<script type="module" src="/src/main.tsx"></script>
1213
</body>

‎public/assets/icons/IcMenuDots.svg

Lines changed: 1 addition & 0 deletions
Loading

‎public/assets/icons/IcUserGuide.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/app/app.scss

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.bot {
22
--bot-content-height: calc(100vh - 140px);
3-
--bot-content-width: calc(100vw - 366px); //run-panel is open by default
3+
--bot-content-width: calc(100vw - 366px);
44
--drawer-content-height: calc(100vh - 394px);
55
--drawer-content-height-no-stat: calc(100vh - 233px);
66
--drawer-scroll-height: calc(100vh - 365px);
@@ -15,3 +15,24 @@
1515
background: var(--general-section-1);
1616
}
1717
}
18+
19+
.modal-root {
20+
position: absolute;
21+
top: 0;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
width: 100%;
26+
height: 100%;
27+
bottom: 0;
28+
left: 0;
29+
background: rgba(0, 0, 0, 0.72);
30+
right: 0;
31+
opacity: 0;
32+
z-index: -1;
33+
}
34+
.modal-root:not(:empty) {
35+
display: flex;
36+
opacity: 1;
37+
z-index: 10;
38+
}

‎src/components/shared_ui/button/button.scss

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
:root {
2+
--button-primary-default: #ff444f;
3+
--text-colored-background: #fff;
4+
--button-primary-hover: #eb3e48;
5+
--button-secondary-default: #6e6e6e;
6+
}
7+
8+
.dc-btn {
9+
vertical-align: middle;
10+
align-items: center;
11+
justify-content: center;
12+
touch-action: manipulation;
13+
cursor: pointer;
14+
white-space: nowrap;
15+
padding: 0 1.6rem;
16+
display: inline-flex;
17+
border: 0;
18+
height: 3.2rem;
19+
border-radius: 4px;
20+
transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
21+
outline: 0;
22+
position: relative;
23+
text-decoration: none;
24+
user-select: none;
25+
-webkit-touch-callout: none;
26+
-webkit-tap-highlight-color: transparent;
27+
/*
28+
* Text will be transformed to sentence case in JS
29+
* text-transform is declared in .dc-btn instead of .dc-btn__text
30+
* to ensure consistency (even for children) as per styleguide
31+
*/
32+
text-transform: none !important;
33+
34+
&__toggle {
35+
height: auto;
36+
padding: 0.8rem 2.5rem;
37+
}
38+
&__text,
39+
&__icon {
40+
display: flex;
41+
pointer-events: none;
42+
}
43+
&__icon {
44+
@include typeface(--paragraph-center-bold-black, unset);
45+
color: var(--text-general);
46+
padding-right: 0.8rem;
47+
pointer-events: none;
48+
49+
&--circle {
50+
padding-right: 0;
51+
}
52+
}
53+
&:not([disabled]):hover {
54+
text-decoration: none;
55+
}
56+
&__rounded {
57+
border-radius: 24px;
58+
}
59+
&--plus {
60+
width: 2.4rem;
61+
height: 2.4rem !important;
62+
border: 1px solid var(--border-hover) !important;
63+
padding: 0 !important;
64+
background: inherit;
65+
background-repeat: no-repeat;
66+
background-position: center;
67+
}
68+
&--circle {
69+
height: 3.2rem;
70+
width: 3.2rem !important;
71+
border-radius: 50%;
72+
}
73+
&--circular {
74+
border-radius: 100px;
75+
}
76+
&--transparent {
77+
background: transparent;
78+
}
79+
&--primary {
80+
background: var(--button-primary-default);
81+
color: var(--text-colored-background);
82+
83+
&:hover:not([disabled]) {
84+
background: var(--button-primary-hover);
85+
}
86+
&:active:not([disabled]) {
87+
background: var(--button-primary-default);
88+
}
89+
&:disabled,
90+
&[disabled] {
91+
opacity: 0.32;
92+
cursor: not-allowed !important;
93+
}
94+
.dc-btn__text,
95+
.dc-btn__icon {
96+
color: var(--text-colored-background);
97+
}
98+
99+
&__light {
100+
background: var(--button-primary-light-default);
101+
102+
&:hover:not([disabled]) {
103+
background: var(--button-primary-light-hover);
104+
}
105+
&:active:not([disabled]) {
106+
background: var(--button-primary-light-default);
107+
}
108+
&:disabled,
109+
&[disabled] {
110+
opacity: 0.32;
111+
cursor: not-allowed !important;
112+
}
113+
.dc-btn__text,
114+
.dc-btn__icon {
115+
color: var(--brand-red-coral);
116+
}
117+
}
118+
}
119+
&--secondary {
120+
background: transparent;
121+
border: 1px solid var(--button-secondary-default);
122+
123+
&:hover:not([disabled]) {
124+
background: var(--button-secondary-hover);
125+
}
126+
&:active:not([disabled]) {
127+
border: 1px solid var(--button-secondary-default);
128+
}
129+
&:disabled,
130+
&[disabled] {
131+
opacity: 0.32;
132+
cursor: not-allowed !important;
133+
}
134+
.dc-btn__text,
135+
.dc-btn__icon {
136+
color: var(--text-prominent);
137+
}
138+
}
139+
&--tertiary {
140+
background: var(--button-tertiary-default);
141+
142+
&:hover:not([disabled]) {
143+
background: var(--button-tertiary-hover);
144+
}
145+
&:active:not([disabled]) {
146+
background: var(--button-tertiary-default);
147+
}
148+
.dc-btn__text,
149+
.dc-btn__icon {
150+
color: var(--brand-red-coral);
151+
}
152+
&:disabled,
153+
&[disabled] {
154+
opacity: 0.32;
155+
cursor: not-allowed !important;
156+
}
157+
}
158+
&--alternate {
159+
background: var(--button-tertiary-default);
160+
border: 2px solid var(--button-primary-default);
161+
162+
&:hover:not([disabled]) {
163+
background: var(--button-primary-default);
164+
165+
.dc-btn__text {
166+
color: var(--text-colored-background);
167+
}
168+
}
169+
170+
.dc-btn__text,
171+
.dc-btn__icon {
172+
color: var(--brand-red-coral);
173+
}
174+
}
175+
/* TODO: confirm this button with designer are we still using this? */
176+
&--green {
177+
background: var(--status-success);
178+
179+
&:hover:not([disabled]) {
180+
background: var(--transparent-success);
181+
}
182+
&:active:not([disabled]) {
183+
background: var(--status-success);
184+
}
185+
.dc-btn__text,
186+
.dc-btn__icon {
187+
color: var(--text-colored-background);
188+
}
189+
}
190+
&--black {
191+
background: var(--button-get-started-bg);
192+
&:hover:not([disabled]) {
193+
opacity: 0.7;
194+
}
195+
&:active:not([disabled]) {
196+
opacity: 0.7;
197+
}
198+
199+
.dc-btn__text,
200+
.dc-btn__icon {
201+
color: var(--general-main-1);
202+
}
203+
}
204+
&__small {
205+
height: 2.4rem;
206+
min-width: 4.8rem;
207+
border-width: 1px;
208+
209+
.dc-btn__text {
210+
font-size: 1.2rem;
211+
}
212+
}
213+
&__medium {
214+
height: 3.2rem;
215+
min-width: 5.6rem;
216+
border-width: 1px;
217+
218+
.dc-btn__text {
219+
font-size: 1.4rem;
220+
}
221+
}
222+
&__large {
223+
height: 4rem;
224+
min-width: 6.4rem;
225+
border-width: 2px;
226+
227+
.dc-btn__text {
228+
font-size: 1.4rem;
229+
}
230+
}
231+
&__wide {
232+
width: 100%;
233+
height: 4rem;
234+
}
235+
&__effect:focus:not(:active):after {
236+
content: '';
237+
position: absolute;
238+
top: -0.1em;
239+
left: -0.1em;
240+
bottom: -0.1em;
241+
right: -0.1em;
242+
border-radius: inherit;
243+
border: 0 solid var(--brand-secondary);
244+
opacity: 0.4;
245+
animation: button-effect 0.4s;
246+
animation-fill-mode: forwards;
247+
display: block;
248+
}
249+
&__group {
250+
white-space: nowrap;
251+
252+
.dc-btn + .dc-btn {
253+
margin-left: 8px;
254+
}
255+
}
256+
&__button-group {
257+
border-radius: 0 4px 4px 0;
258+
}
259+
/* TODO: confirm this button with designer are we still using this? */
260+
/* postcss-bem-linter: ignore */
261+
.initial-loader--btn {
262+
background-color: unset;
263+
264+
/* postcss-bem-linter: ignore */
265+
.initial-loader__barspinner--rect {
266+
background-color: var(--text-colored-background);
267+
}
268+
/* postcss-bem-linter: ignore */
269+
.barspinner {
270+
margin: 0.6rem 4px 0 -4px;
271+
272+
/* postcss-bem-linter: ignore */
273+
&__rect {
274+
height: 35%;
275+
}
276+
}
277+
}
278+
}
279+
280+
@keyframes button-effect {
281+
to {
282+
opacity: 0;
283+
top: -0.6em;
284+
left: -0.6em;
285+
bottom: -0.6em;
286+
right: -0.6em;
287+
border-width: 6px;
288+
}
289+
}

0 commit comments

Comments
 (0)