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

Commit 05cc84e

Browse files
sanjam-derivsanjam-deriv
committed
chore: design fix
1 parent 2608dce commit 05cc84e

File tree

2 files changed

+94
-79
lines changed

2 files changed

+94
-79
lines changed

‎src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ const CreateTokenField = ({
4444
setFormIsCleared(false);
4545
}
4646
}, [form_is_cleared]);
47-
4847
const getTokenNames = useMemo(() => {
4948
const token_names = [];
5049
for (const token_object of tokens) {
@@ -76,28 +75,30 @@ const CreateTokenField = ({
7675
</Text>
7776
</div>
7877
</div>
79-
<div
80-
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
81-
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
82-
>
83-
<input
84-
className={`${error_border_active ? 'error-border' : ''}`}
85-
type='text'
86-
name='name'
87-
{...register}
88-
placeholder=''
89-
/>
78+
<div className={styles.tokenWrapper}>
79+
<div
80+
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
81+
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
82+
>
83+
<input
84+
className={`${error_border_active ? 'error-border' : ''}`}
85+
type='text'
86+
name='name'
87+
{...register}
88+
placeholder=''
89+
/>
90+
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
91+
<label
92+
htmlFor='playground-request'
93+
className={styles.inlineLabel}
94+
data-testid='token-count-label'
95+
>
96+
Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
97+
</label>
98+
</div>
9099
<Button disabled={disable_button} type='submit'>
91100
Create
92101
</Button>
93-
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
94-
<label
95-
htmlFor='playground-request'
96-
className={styles.inlineLabel}
97-
data-testid='token-count-label'
98-
>
99-
Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
100-
</label>
101102
</div>
102103
{errors && errors.name && (
103104
<Text as='span' type='paragraph-1' className='error-message'>

‎src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss‎

Lines changed: 73 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -48,69 +48,58 @@ form {
4848
}
4949
}
5050

51-
.customTextInput {
52-
align-items: center;
53-
border: 1px solid var(--colors-greyLight400);
54-
border-radius: rem(1.6);
51+
.tokenWrapper {
5552
display: flex;
56-
position: relative;
57-
box-sizing: border-box;
58-
margin: rem(0.5) 0;
59-
&:hover {
60-
border: 1px solid var(--colors-greyLight600);
61-
}
62-
&:focus-within {
63-
border-color: var(--colors-blue500);
64-
}
53+
flex-direction: row;
54+
align-items: center;
6555
button {
66-
border-top-left-radius: 0;
67-
border-bottom-left-radius: 0;
56+
border-radius: 0 rem(1.6) rem(1.6) 0;
6857
height: rem(3);
69-
border-top-right-radius: rem(1.6);
70-
border-bottom-right-radius: rem(1.6);
71-
}
72-
label {
73-
position: absolute;
74-
color: var(--colors-greyLight600);
75-
left: rem(1.2);
76-
pointer-events: none;
77-
transform-origin: top left;
78-
transition: all 0.25s ease;
79-
white-space: nowrap;
80-
width: calc(100% - 100px);
81-
white-space: nowrap;
82-
overflow: hidden;
83-
text-overflow: ellipsis;
58+
@media (max-width: 425px) {
59+
border-radius: rem(1.6);
60+
width: 91%;
61+
}
8462
}
85-
input[type='text'],
86-
input[type='number'] {
87-
background: 0 0;
88-
box-sizing: border-box;
89-
color: var(--ifm-color-emphasis-1000);
90-
height: rem(4);
91-
min-width: 0;
63+
64+
.customTextInput {
65+
align-items: center;
66+
border: 1px solid var(--colors-greyLight400);
67+
border-radius: rem(1.6) 0 0 rem(1.6);
68+
display: flex;
9269
width: 100%;
93-
border: none;
94-
text-indent: rem(1.2);
95-
font-size: rem(1.6);
96-
&:not(:placeholder-shown) ~ label {
97-
color: var(--colors-blue400);
98-
background-color: var(--ifm-color-emphasis-0);
99-
padding: 0 rem(0.4);
100-
transform: translateY(rem(-2)) scale(0.75);
101-
width: unset;
102-
@media screen and (min-width: 320px) and (max-width: 425px) {
103-
font-size: rem(1.4);
104-
}
105-
&.tokenInputLabel {
106-
color: var(--smoke);
107-
}
70+
position: relative;
71+
box-sizing: border-box;
72+
margin: rem(0.5) 0;
73+
&:hover {
74+
border: 1px solid var(--colors-greyLight600);
10875
}
109-
&:focus {
110-
outline-color: unset;
111-
outline: unset;
112-
border-radius: rem(1.6);
113-
& ~ label {
76+
&:focus-within {
77+
border-color: var(--colors-blue500);
78+
}
79+
label {
80+
position: absolute;
81+
color: var(--colors-greyLight600);
82+
left: rem(1.2);
83+
pointer-events: none;
84+
transform-origin: top left;
85+
transition: all 0.25s ease;
86+
white-space: nowrap;
87+
width: calc(100% - 100px);
88+
white-space: nowrap;
89+
overflow: hidden;
90+
text-overflow: ellipsis;
91+
}
92+
input[type='text'],
93+
input[type='number'] {
94+
background: 0 0;
95+
box-sizing: border-box;
96+
color: var(--ifm-color-emphasis-1000);
97+
height: rem(4);
98+
min-width: 0;
99+
border: none;
100+
text-indent: rem(1.2);
101+
font-size: rem(1.6);
102+
&:not(:placeholder-shown) ~ label {
114103
color: var(--colors-blue400);
115104
background-color: var(--ifm-color-emphasis-0);
116105
padding: 0 rem(0.4);
@@ -123,11 +112,36 @@ form {
123112
color: var(--smoke);
124113
}
125114
}
115+
&:focus {
116+
outline-color: unset;
117+
outline: unset;
118+
border-radius: rem(1.6);
119+
& ~ label {
120+
color: var(--colors-blue400);
121+
background-color: var(--ifm-color-emphasis-0);
122+
padding: 0 rem(0.4);
123+
transform: translateY(rem(-2)) scale(0.75);
124+
width: unset;
125+
@media screen and (min-width: 320px) and (max-width: 425px) {
126+
font-size: rem(1.4);
127+
}
128+
&.tokenInputLabel {
129+
color: var(--smoke);
130+
}
131+
}
132+
}
133+
&::placeholder {
134+
color: var(--colors-greyLight600);
135+
}
126136
}
127-
&::placeholder {
128-
color: var(--colors-greyLight600);
137+
@media (max-width: 425px) {
138+
border-radius: rem(1.6);
129139
}
130140
}
141+
@media (max-width: 425px) {
142+
flex-direction: column;
143+
gap: rem(0.5);
144+
}
131145
}
132146

133147
.card_wrapper {

0 commit comments

Comments
 (0)