File tree Expand file tree Collapse file tree 5 files changed +70
-47
lines changed Expand file tree Collapse file tree 5 files changed +70
-47
lines changed Original file line number Diff line number Diff line change @@ -57,6 +57,7 @@ ion-item.custom-input {
57
57
--padding-top : 0.875rem ;
58
58
--padding-bottom : 0.875rem ;
59
59
--padding-start : 1.25rem ;
60
+ --padding-end : 1.25rem ;
60
61
--ion-item-border-color : var (--ion-color-neutral-400 );
61
62
min-height : 3.125rem ;
62
63
Original file line number Diff line number Diff line change @@ -86,37 +86,40 @@ const CustomInput = ({
86
86
onIonBlur = { ( ) => handleFocus ( false ) }
87
87
onKeyDown = { hideKeyboard }
88
88
value = { value }
89
- />
90
- { hiddenInput && (
91
- < IonButton
92
- shape = "round"
93
- onClick = { ( ) => {
94
- setHidden ( ! hidden ) ;
95
- } }
96
- data-testid = { `${ dataTestId } -hide-btn` }
97
- >
98
- < IonIcon
99
- slot = "icon-only"
100
- icon = { hidden ? eyeOutline : eyeOffOutline }
101
- color = "primary"
102
- />
103
- </ IonButton >
104
- ) }
105
- { action && actionIcon && (
106
- < IonButton
107
- shape = "round"
108
- data-testid = { `${ dataTestId } -action` }
109
- onClick = { ( e ) => {
110
- action ( e ) ;
111
- } }
112
- >
113
- < IonIcon
114
- slot = "icon-only"
115
- icon = { actionIcon }
116
- color = "primary"
117
- />
118
- </ IonButton >
119
- ) }
89
+ >
90
+ { hiddenInput && (
91
+ < IonButton
92
+ shape = "round"
93
+ onClick = { ( ) => {
94
+ setHidden ( ! hidden ) ;
95
+ } }
96
+ data-testid = { `${ dataTestId } -hide-btn` }
97
+ slot = "end"
98
+ >
99
+ < IonIcon
100
+ slot = "icon-only"
101
+ icon = { hidden ? eyeOutline : eyeOffOutline }
102
+ color = "primary"
103
+ />
104
+ </ IonButton >
105
+ ) }
106
+ { action && actionIcon && (
107
+ < IonButton
108
+ shape = "round"
109
+ data-testid = { `${ dataTestId } -action` }
110
+ onClick = { ( e ) => {
111
+ action ( e ) ;
112
+ } }
113
+ slot = "end"
114
+ >
115
+ < IonIcon
116
+ slot = "icon-only"
117
+ icon = { actionIcon }
118
+ color = "primary"
119
+ />
120
+ </ IonButton >
121
+ ) }
122
+ </ IonInput >
120
123
</ div >
121
124
</ IonItem >
122
125
) ;
Original file line number Diff line number Diff line change 62
62
font-size : 1rem ;
63
63
font-weight : 700 ;
64
64
65
+ & > * {
66
+ color : var (--ion-color-neutral-700 );
67
+ }
68
+
65
69
& .md {
66
70
font-size : 0.8rem ;
67
71
}
Original file line number Diff line number Diff line change 38
38
--min-height : auto ;
39
39
}
40
40
41
- ion-item .custom-input .input-line {
42
- border : none ;
43
- text-align : center ;
44
- font-size : 2rem ;
45
- }
46
-
47
- ion-input {
48
- margin-left : 2rem ;
41
+ ion-item .custom-input {
42
+ & .error {
43
+ ion-input {
44
+ border-color : var (--ion-color-error-800 );
45
+ }
46
+ }
49
47
50
- & [ type = " password " ] {
51
- letter-spacing : 0.25 em ;
48
+ .input-line {
49
+ border : none ;
52
50
}
53
- }
54
51
55
- .close-button-label {
56
- color : var (--ion-color-neutral-800 );
52
+ ion-input {
53
+ border : 0.125rem solid var (--ion-color-neutral-700 );
54
+ border-radius : 0.5rem ;
55
+ --padding-top : 0.75rem ;
56
+ --padding-bottom : 0.75rem ;
57
+ font-weight : 400 ;
58
+ font-size : 1rem ;
59
+
60
+ & .has-focus {
61
+ border-color : var (--ion-color-primary-700 );
62
+ }
63
+
64
+ & [type = " password" ] {
65
+ letter-spacing : 0.25em ;
66
+ }
67
+ }
57
68
}
58
69
59
70
.error-message {
91
102
text-transform : none !important ;
92
103
border-radius : 1rem !important ;
93
104
border : 1px solid var (--ion-color-neutral-400 ) !important ;
94
- height : auto !important ;
105
+
106
+ & .sc-ion-alert-md {
107
+ height : auto !important ;
108
+ }
95
109
}
96
110
}
Original file line number Diff line number Diff line change @@ -127,10 +127,11 @@ const VerifyPassword = ({
127
127
< form className = "password-input-container" >
128
128
< CustomInput
129
129
dataTestId = "verify-password-value"
130
- hiddenInput = { true }
131
- autofocus = { true }
130
+ hiddenInput
131
+ autofocus
132
132
onChangeInput = { setVerifyPasswordValue }
133
133
value = { verifyPasswordValue }
134
+ error = { showError }
134
135
/>
135
136
{ showError ? (
136
137
< ErrorMessage
You can’t perform that action at this time.
0 commit comments