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

Commit 7aaa7bd

Browse files
hubert-derivhubert-deriv
authored
Merge pull request #209 from sanjam-deriv/registrappsdesigns
2 parents a6284be + 64e6ff4 commit 7aaa7bd

File tree

4 files changed

+209
-149
lines changed

4 files changed

+209
-149
lines changed

‎src/components/CustomSelectDropdown/custom_select_dropdown.module.scss‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,93 @@
11
@use 'src/styles/utility' as *;
22

33
.customSelectField {
4+
position: relative;
5+
.dropdownWrapper {
6+
.dropdown {
7+
position: absolute;
8+
max-height: 200px;
9+
overflow-y: auto;
10+
top: 40px;
11+
left: 0;
12+
gap: rem(1);
13+
width: 100%;
14+
z-index: 10;
15+
padding: rem(1);
16+
background-color: var(--ifm-color-emphasis-0);
17+
box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
18+
-moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
19+
-webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
20+
}
21+
}
22+
.selectWrapper {
423
position: relative;
5-
.dropdownWrapper {
6-
.dropdown {
7-
position: absolute;
8-
max-height: 200px;
9-
overflow-y: auto;
10-
top: 40px;
11-
left: 0;
12-
gap: rem(1);
13-
width: 100%;
14-
z-index: 10;
15-
padding: rem(1);
16-
background-color: var(--ifm-color-emphasis-0);
17-
box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
18-
-moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
19-
-webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
20-
}
24+
margin: rem(1) 0;
25+
width: 100%;
26+
height: rem(4);
27+
line-height: 36px;
28+
border-radius: rem(1.6);
29+
font-size: rem(1.6);
30+
padding: 0 rem(3) 0 rem(1);
31+
color: var(--ifm-color-emphasis-1000);
32+
border: 1px solid var(--colors-greyLight400);
33+
34+
&.error {
35+
border: 1px solid var(--colors-coral500);
36+
}
37+
&:hover {
38+
border-color: var(--ifm-color-emphasis-500);
39+
}
40+
&:focus {
41+
outline: solid 1px var(--colors-blue500);
42+
border-radius: rem(1.6);
43+
.selectLabel {
44+
color: var(--colors-blue500) !important;
45+
}
46+
}
47+
&:after {
48+
content: '';
49+
position: absolute;
50+
display: inline-block;
51+
top: 0;
52+
right: 0;
53+
bottom: 0;
54+
width: 40px;
55+
background-position: center;
56+
background-repeat: no-repeat;
57+
background-image: url(/static/img/arrow_down.svg);
58+
border-radius: rem(1.6);
59+
pointer-events: none;
60+
transform: rotate(0deg);
61+
transition: transform 0.2s;
62+
}
63+
&.active {
64+
&:after {
65+
transform: rotate(180deg);
66+
}
67+
.dropdownWrapper {
68+
display: inline-block;
69+
}
70+
}
71+
&.inactive .dropdownWrapper {
72+
display: none;
2173
}
22-
.selectWrapper {
23-
position: relative;
24-
margin: rem(1) 0;
25-
width: 100%;
26-
height: rem(4);
27-
line-height: 36px;
28-
border-radius: 3px;
29-
font-size: rem(1.6);
30-
padding: 0 rem(3) 0 rem(1);
74+
.selectLabel {
75+
color: var(--colors-greyLight600);
76+
width: 100%;
77+
height: 100%;
78+
display: inline-block;
79+
&.active {
3180
color: var(--ifm-color-emphasis-1000);
32-
border: 1px solid var(--colors-greyLight400);
33-
34-
&.error {
35-
border: 1px solid var(--colors-coral500);
36-
}
37-
&:hover {
38-
border-color: var(--ifm-color-emphasis-500);
39-
}
40-
&:focus {
41-
outline: solid 1px var(--colors-blue500);
42-
border-radius: 3px;
43-
.selectLabel {
44-
color: var(--colors-blue500) !important;
45-
}
46-
}
47-
&:after {
48-
content: "";
49-
position: absolute;
50-
display: inline-block;
51-
top: 0;
52-
right: 0;
53-
bottom: 0;
54-
width: 40px;
55-
background-position: center;
56-
background-repeat: no-repeat;
57-
background-image: url(/static/img/arrow_down.svg);
58-
border-radius: 3px;
59-
pointer-events: none;
60-
transform: rotate(0deg);
61-
transition: transform .2s;
62-
}
63-
&.active {
64-
&:after {
65-
transform: rotate(180deg);
66-
}
67-
.dropdownWrapper {
68-
display: inline-block;
69-
}
70-
}
71-
&.inactive .dropdownWrapper {
72-
display: none;
73-
}
74-
.selectLabel {
75-
color: var(--colors-greyLight600);
76-
width: 100%;
77-
height: 100%;
78-
display: inline-block;
79-
&.active {
80-
color: var(--ifm-color-emphasis-1000);
81-
position: absolute;
82-
font-size: rem(1.2);
83-
background-color: var(--ifm-color-emphasis-0);
84-
bottom: rem(3.7);
85-
left: rem(1);
86-
padding: 0 rem(0.4);
87-
line-height: rem(1);
88-
height: auto;
89-
width: auto;
90-
}
91-
}
81+
position: absolute;
82+
font-size: rem(1.2);
83+
background-color: var(--ifm-color-emphasis-0);
84+
bottom: rem(3.7);
85+
left: rem(1);
86+
padding: 0 rem(0.4);
87+
line-height: rem(1);
88+
height: auto;
89+
width: auto;
90+
}
9291
}
92+
}
9393
}

‎src/features/dashboard/components/AppForm/app-form.module.scss‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ fieldset .customTextInput:last-child {
77
.customTextInput {
88
align-items: center;
99
border: 1px solid var(--colors-greyLight400);
10-
border-radius: 4px;
10+
border-radius: rem(1.6);
1111
display: flex;
1212
position: relative;
1313
box-sizing: border-box;
14-
margin: rem(1) 0;
1514
&:focus-within {
1615
border-color: var(--colors-blue400);
16+
border-radius: rem(1.6);
1717
}
1818
&:hover {
1919
border: 1px solid var(--colors-greyLight600);
@@ -47,7 +47,7 @@ fieldset .customTextInput:last-child {
4747
&:focus {
4848
outline-color: unset;
4949
outline: 1px solid var(--colors-blue500);
50-
border-radius: 3px;
50+
border-radius: rem(1.6);
5151
& ~ label {
5252
color: var(--colors-blue400);
5353
background-color: var(--ifm-color-emphasis-0);
@@ -58,6 +58,12 @@ fieldset .customTextInput:last-child {
5858
}
5959
}
6060

61+
.helperMargin {
62+
margin: rem(1) 0;
63+
}
64+
.verificationMargin {
65+
margin: rem(2) 0;
66+
}
6167
.apps_form {
6268
display: flex;
6369
flex-direction: column;
@@ -84,6 +90,9 @@ fieldset .customTextInput:last-child {
8490
display: flex;
8591
flex-direction: column;
8692
margin-bottom: rem(2.5);
93+
.scopesWrapper {
94+
padding-left: rem(1.6);
95+
}
8796
}
8897
.disableTokenDropdown {
8998
opacity: 0.2;
@@ -92,25 +101,41 @@ fieldset .customTextInput:last-child {
92101
.helperText {
93102
width: 100%;
94103
padding-left: rem(1);
104+
padding-bottom: rem(1);
95105
color: var(--colors-greyLight600);
96106
margin-bottom: 0;
97107
}
98108
.apiTokenWrapper {
99109
display: flex;
100110
flex-direction: column;
101-
gap: rem(2);
111+
gap: rem(1);
102112
margin-bottom: rem(2);
103-
.formHeaderContainer {
104-
display: flex;
105-
padding: rem(1) 0;
106-
margin-top: rem(1.5);
107-
flex-direction: column;
113+
}
114+
.formHeaderContainer {
115+
display: flex;
116+
padding: rem(1) 0;
117+
gap: rem(1);
118+
margin-top: rem(1.5);
119+
flex-direction: column;
120+
.subHeading {
121+
padding-left: rem(1);
122+
}
123+
.formsubHeading {
124+
padding: rem(1.6);
125+
}
126+
.wrapperHeading {
127+
padding-left: rem(1.6);
128+
}
129+
.markup {
130+
margin-bottom: rem(1);
108131
}
109132
}
110133
}
111134
}
135+
112136
.submit_container {
113137
margin-top: rem(2.5);
138+
margin-bottom: rem(5.5);
114139
display: flex;
115140
align-items: center;
116141
justify-content: center;
@@ -144,3 +169,8 @@ fieldset .customTextInput:last-child {
144169
cursor: pointer;
145170
}
146171
}
172+
173+
.termsOfConditionRegister {
174+
margin-left: rem(4);
175+
margin-top: rem(6);
176+
}

0 commit comments

Comments
 (0)