Skip to content

Commit 6da0f49

Browse files
gk-XL7gk-XL7
authored
[ES-2351] [ES-2058] minor ui fixes. (mosip#1318)
* [ES-2058] minor css changes. Signed-off-by: GurukiranP <talk2gurukiran@gmail.com> * [ES-2058] update Form.js. Signed-off-by: GurukiranP <talk2gurukiran@gmail.com> * [ES-2058] update Form.js. Signed-off-by: GurukiranP <talk2gurukiran@gmail.com> --------- Signed-off-by: GurukiranP <talk2gurukiran@gmail.com>
1 parent e7cb425 commit 6da0f49

2 files changed

Lines changed: 141 additions & 123 deletions

File tree

‎oidc-ui/src/App.css‎

Lines changed: 138 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,19 @@ body {
176176
right: 2px;
177177
}
178178

179+
[dir="rtl"] .kbi_form {
180+
input[type="date"] {
181+
display: flex;
182+
justify-content: end;
183+
background-position: right 0.75em center !important;
184+
padding: 0.5em 2.25em 0.5em 1em !important;
185+
}
186+
187+
.input_box {
188+
padding: 0.5em 0.75em 0.5em 1em !important;
189+
}
190+
}
191+
179192
.footer-brand-logo {
180193
content: var(--footer-brand-logo-url);
181194
height: 25px;
@@ -615,127 +628,132 @@ nav {
615628
}
616629
}
617630

618-
.form-group {
619-
margin-bottom: 0.5em;
620-
}
621-
622-
.form-group[style*="flex"] {
623-
gap: 0.5em;
624-
}
625-
626-
.form-group .form-field {
627-
display: flex;
628-
flex-direction: column;
629-
}
630-
631-
.form-group .input_box {
632-
display: flex;
633-
align-items: center;
634-
width: 100%;
635-
margin: 0.25em 0 0.4em;
636-
padding: 0.5em 2.5em 0.5em 0.75em;
637-
border: 1.5px solid #e5e7eb;
638-
border-radius: 0.5em;
639-
background-color: #fff;
640-
overflow: hidden;
641-
}
642-
643-
.form-group select.input_box {
644-
appearance: none;
645-
-webkit-appearance: none;
646-
-moz-appearance: none;
647-
background: #fff
648-
url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23333' stroke-width='15'/%3E%3C/svg%3E")
649-
no-repeat right 0.75em center;
650-
background-size: 0.65em;
651-
cursor: pointer;
652-
}
653-
654-
.form-group select.input_box option {
655-
margin: 0 0.25em;
656-
color: black;
657-
}
658-
659-
.form-group .required {
660-
color: #fe6b6b;
661-
}
662-
663-
.form-group .input_box.error {
664-
border-color: #fe6b6b;
665-
border-width: 1.75px;
666-
}
667-
668-
.form-button {
669-
width: 100%;
670-
padding: 0.75em;
671-
border: 1px solid var(--primary-button-border-color);
672-
border-radius: var(--primary-button-border-radius);
673-
font-weight: 500;
674-
color: var(--primary-button-color);
675-
background-color: var(--primary-button-bg-color);
676-
cursor: pointer;
677-
text-align: center;
678-
}
679-
680-
.form-group .error-message {
681-
position: relative;
682-
bottom: 0.25em;
683-
color: #fe6b6b;
684-
font-size: 0.75em;
685-
font-weight: 500;
686-
display: flex;
687-
align-items: center;
688-
}
689-
690-
/* Date input with custom calendar icon */
691-
.form-group input[type="date"] {
692-
position: relative;
693-
width: 100%;
694-
padding: 0.5em 1em 0.5em 2.25em; /* space for custom icon */
695-
border: 1.5px solid #e5e7eb;
696-
border-radius: 0.375em;
697-
background-color: #fff;
698-
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h18M8 2v4M16 2v4M3 10h18M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
699-
background-repeat: no-repeat;
700-
background-position: left 0.75em center;
701-
background-size: 1em;
702-
font-size: 1rem;
703-
font-family: inherit;
704-
color: #a0a8ac;
705-
}
706-
707-
.form-group input[type="date"]::placeholder {
708-
text-indent: 0.5em; /* ensure placeholder doesn't overlap */
709-
}
710-
711-
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
712-
position: absolute;
713-
left: 0;
714-
width: 100%;
715-
height: 100%;
716-
opacity: 0;
717-
cursor: pointer;
718-
}
719-
720-
.form-group .select-placeholder {
721-
color: #a0a8ac;
722-
}
723-
724-
.form-group .input_box:focus {
725-
border-color: #80bdff;
726-
outline: 0;
727-
box-shadow: 0 0 2px rgba(0, 123, 255, 0.4);
728-
}
729-
730-
.form-group .error-icon {
731-
display: inline-block;
732-
vertical-align: middle;
733-
width: 12px;
734-
height: 12px;
735-
}
631+
.kbi_form {
632+
.form-group {
633+
margin-bottom: 0.5em;
634+
635+
&[style*="flex"] {
636+
gap: 0.5em;
637+
}
638+
639+
.form-field {
640+
display: flex;
641+
flex-direction: column;
642+
}
643+
644+
.checkbox-container {
645+
flex-direction: row;
646+
}
647+
648+
.input_box {
649+
display: flex;
650+
align-items: center;
651+
width: 100%;
652+
margin: 0.25em 0 0.4em;
653+
padding: 0.5em 2.5em 0.5em 0.75em;
654+
border: 1.5px solid #e5e7eb;
655+
border-radius: 0.5em;
656+
background-color: #fff;
657+
overflow: hidden;
658+
659+
&.error {
660+
border-color: #fe6b6b;
661+
border-width: 1.75px;
662+
}
663+
664+
&:focus {
665+
border-color: #80bdff;
666+
outline: 0;
667+
box-shadow: 0 0 2px rgba(0, 123, 255, 0.4);
668+
}
669+
}
670+
671+
select.input_box {
672+
appearance: none;
673+
-webkit-appearance: none;
674+
-moz-appearance: none;
675+
background: #fff
676+
url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23333' stroke-width='15'/%3E%3C/svg%3E")
677+
no-repeat right 0.75em center;
678+
background-size: 0.65em;
679+
cursor: pointer;
680+
681+
option {
682+
margin: 0 0.25em;
683+
color: black;
684+
}
685+
}
686+
687+
.required {
688+
color: #fe6b6b;
689+
}
690+
691+
.error-message {
692+
position: relative;
693+
bottom: 0.25em;
694+
color: #fe6b6b;
695+
font-size: 0.75em;
696+
font-weight: 500;
697+
display: flex;
698+
align-items: center;
699+
}
700+
701+
input[type="date"] {
702+
position: relative;
703+
width: 100%;
704+
padding: 0.5em 1em 0.5em 2.25em;
705+
border: 1.5px solid #e5e7eb;
706+
border-radius: 0.375em;
707+
background-color: #fff;
708+
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h18M8 2v4M16 2v4M3 10h18M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
709+
background-repeat: no-repeat;
710+
background-position: left 0.75em center;
711+
background-size: 1em;
712+
font-size: 1rem;
713+
font-family: inherit;
714+
/* color: #a0a8ac; */
715+
716+
&::placeholder {
717+
text-indent: 0.5em;
718+
}
719+
720+
&::-webkit-calendar-picker-indicator {
721+
position: absolute;
722+
left: 0;
723+
width: 100%;
724+
height: 100%;
725+
opacity: 0;
726+
cursor: pointer;
727+
}
728+
}
729+
730+
.select-placeholder {
731+
color: #a0a8ac;
732+
}
733+
734+
.error-icon {
735+
display: inline-block;
736+
vertical-align: middle;
737+
width: 12px;
738+
height: 12px;
739+
}
740+
741+
.error-text {
742+
margin: auto 0.25em;
743+
}
744+
}
736745

737-
.form-group .error-text {
738-
margin: auto 0.25em;
746+
.form-button {
747+
width: 100%;
748+
padding: 0.75em;
749+
border: 1px solid var(--primary-button-border-color);
750+
border-radius: var(--primary-button-border-radius);
751+
font-weight: 500;
752+
color: var(--primary-button-color);
753+
background-color: var(--primary-button-bg-color);
754+
cursor: pointer;
755+
text-align: center;
756+
}
739757
}
740758

741759
@media screen and (max-width: 767px) {

‎oidc-ui/src/components/Form.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export default function Form({
117117
//Handle Login API Integration here
118118
const authenticateUser = async (formData) => {
119119
try {
120-
const { individualId, recaptchaToken, ...filtered } = formData;
120+
const { recaptchaToken, ...filtered } = formData;
121121
let transactionId = openIDConnectService.getTransactionId();
122122
let uin =
123123
formData[
@@ -150,7 +150,7 @@ export default function Form({
150150

151151
if (errors != null && errors.length > 0) {
152152
let errorCodeCondition =
153-
langConfig.errors.otp[errors[0].errorCode] !== undefined &&
153+
langConfig.errors.kbi[errors[0].errorCode] !== undefined &&
154154
langConfig.errors.kbi[errors[0].errorCode] !== null;
155155

156156
if (errorCodeCondition) {
@@ -227,7 +227,7 @@ export default function Form({
227227
</div>
228228
)}
229229

230-
<div id="form-container"></div>
230+
<div id="form-container" className="kbi_form"></div>
231231

232232
{status === states.LOADING && (
233233
<div className="mt-2">

0 commit comments

Comments
 (0)