Skip to content

Commit

Permalink
Mosip-32947: Resolved the RTL issues in the respective pages (#426)
Browse files Browse the repository at this point in the history 
Signed-off-by: Anil_Kumar_Majji <[email protected]>
  • Loading branch information
@Anil-kumar-Majji
Anil-kumar-Majji authored Jun 7, 2024
1 parent 12f7e0e commit 8b2d6c6
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 32 deletions.
13 changes: 8 additions & 5 deletions pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
import backArrow from '../../svg/back_arrow.svg';
import info from '../../svg/info_icon.svg';
import DropdownComponent from '../common/fields/DropdownComponent';
import { getUserProfile } from '../../services/UserProfileService';
import { isLangRTL } from '../../utils/AppUtils';

function CreateOidcClient() {
const [partnerComments, setPartnerComments] = useState("");
Expand All @@ -18,6 +20,7 @@ function CreateOidcClient() {

const navigate = useNavigate();
const { t } = useTranslation();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);

const count = 0;

Expand Down Expand Up @@ -81,7 +84,7 @@ function CreateOidcClient() {
}

return (
<div className="ml-32 mr-5 mt-5 w-[100%]">
<div className={`mt-5 w-[100%] ${isLoginLanguageRTL ? "mr-32 ml-5" : "ml-32 mr-5"} overflow-x-scroll font-inter`}>
<div className="flex-col">
<div className="flex justify-between">
<div className="flex items-start space-x-3">
Expand Down Expand Up @@ -158,11 +161,11 @@ function CreateOidcClient() {
<div className="flex flex-col w-full">
<label className="flex space-x-1 items-center text-dark-blue text-base font-semibold mb-1">
{t('createOidcClient.publicKey')}<span className="text-crimson-red">*</span>
<img src={info} className="ml-2 cursor-pointer" onClick={() => setShowPublicKeyToolTip(!showPublicKeyToolTip)} />
<img src={info} className={`${isLoginLanguageRTL ? "mr-2" :"ml-2"} cursor-pointer`} onClick={() => setShowPublicKeyToolTip(!showPublicKeyToolTip)} />
</label>
{showPublicKeyToolTip &&
(
<div className="z-20 w-[24%] max-h-[32%] overflow-y-auto absolute ml-28 shadow-lg bg-white border border-gray-300 p-3 rounded">
<div className={`z-20 w-[24%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL ? "mr-[10%]" :"ml-[8%]"} shadow-lg bg-white border border-gray-300 p-3 rounded`}>
<p className="text-black text-sm">{t('createOidcClient.publicKeyToolTip')}</p>
</div>
)}
Expand Down Expand Up @@ -249,8 +252,8 @@ function CreateOidcClient() {
<div className="flex flex-row px-[3%] py-[2%] justify-between">
<button onClick={() => clearForm()} className="mr-2 w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold">{t('requestPolicy.clearForm')}</button>
<div className="flex flex-row space-x-3 w-full md:w-auto justify-end">
<button onClick={() => moveToAuthenticationServices(navigate)} className="mr-2 w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold">{t('requestPolicy.cancel')}</button>
<button className={`mr-2 w-40 h-12 border-[#1447B2] border rounded-md text-base font-semibold bg-tory-blue text-white`}>{t('requestPolicy.submit')}</button>
<button onClick={() => moveToAuthenticationServices(navigate)} className={`${isLoginLanguageRTL ?"ml-2" :"mr-2"} w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold`}>{t('requestPolicy.cancel')}</button>
<button className={`${isLoginLanguageRTL ?"ml-2" :"mr-2"} w-40 h-12 border-[#1447B2] border rounded-md text-base font-semibold bg-tory-blue text-white`}>{t('requestPolicy.submit')}</button>
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions pmp-reactjs-ui/src/pages/authenticationServices/OidcClientsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function OidcClientsList() {
<div className={`mt-5 w-[100%] ${isLoginLanguageRTL ? "mr-32 ml-5" : "ml-32 mr-5"} overflow-x-scroll font-inter`}>
<div className="flex-col">
<div className="flex justify-between mb-5">
<div className={`flex space-x-3`}>
<div className={`flex gap-x-3`}>
<img src={backArrow} alt="" onClick={() => moveToHome()} className={`cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} />
<div className="flex-col mt-[3%]">
<h1 className="font-semibold text-xl text-dark-blue">{t('authenticationServices.authenticationServices')}</h1>
Expand All @@ -38,14 +38,14 @@ function OidcClientsList() {
<div className='flex text-xs bg-[#FCFCFC] font-bold space-x-16 items-start rounded-lg px-[1.5%] pt-[2%]'>
<div className={`flex-col justify-center`}>
<h6 onClick={() => { setActiveOicdClient(true); setActiveApiKey(false) }}
className={`${activeOidcClient ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ml-[10%] cursor-pointer text-sm`}>
className={`${activeOidcClient ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ${isLoginLanguageRTL ? "mr-[10%]" : "ml-[10%]"} cursor-pointer text-sm`}>
{t('authenticationServices.oidcClient')}
</h6>
<div className={`h-1 w-24 ${activeOidcClient ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div>
</div>
<div className={`flex-col justify-center`}>
<h6 onClick={() => { setActiveOicdClient(false); setActiveApiKey(true) }}
className={`${activeApiKey ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ml-[20%] cursor-pointer text-sm`}>
className={`${activeApiKey ? "text-[#1447b2]" : "text-[#031640]"} mb-[12%] ${isLoginLanguageRTL ? "mr-[20%]" : "ml-[20%]"} cursor-pointer text-sm`}>
{t('authenticationServices.apiKey')}
</h6>
<div className={`h-1 w-24 ${activeApiKey ? "bg-tory-blue" : "bg-transparent"} rounded-t-md`}></div>
Expand Down Expand Up @@ -88,12 +88,12 @@ function OidcClientsList() {
<img src={rectangleGrid} alt="" />
{activeOidcClient &&
(<button onClick={() => createOidcClient()} type="button"
className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-14" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
{t('authenticationServices.createOidcClientBtn')}
</button>)
}
{activeApiKey &&
(<button type="button" className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
(<button type="button" className={`text-white font-semibold mt-8 ${isLoginLanguageRTL ? "mr-14" : "ml-12"} bg-tory-blue rounded-md text-base px-4 py-3`}>
{t('authenticationServices.generateApiKeyBtn')}
</button>)
}
Expand Down
4 changes: 2 additions & 2 deletions pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
<label className={`flex text-dark-blue font-semibold text-sm mb-2 ${(styleSet && styleSet.dropdownLabel) ? styleSet.dropdownLabel : ''}`}>
{t(fieldNameKey)}{containsAsterisk ? <span className="text-crimson-red">*</span> : <span>{isLoginLanguageRTL ?"" :":"}</span>}
{addInfoIcon && (
<img src={infoIcon} alt="" className="ml-2 cursor-pointer" onClick={handleIconClick}></img>
<img src={infoIcon} alt="" className= {`cursor-pointer`} onClick={handleIconClick}></img>
)}
</label>
{showTooltip && (
<div ref={tooltipRef} className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ml-28 shadow-lg bg-white border border-gray-300 rounded`}>
<div ref={tooltipRef} className={`z-20 p-4 -mt-[4.5%] w-[20%] max-h-[32%] overflow-y-auto absolute ${isLoginLanguageRTL?"mr-[9.5%]":"ml-[8.5%]"} shadow-lg bg-white border border-gray-300 rounded`}>
<p className="text-black text-sm">{t(infoKey)}</p>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion pmp-reactjs-ui/src/pages/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ function Dashboard() {
)}
<div className="mb-7 mt-5 ml-[2.3%] text-xl font-semibold tracking-tight text-gray-700">
<p >
{t('dashboard.welcomeMsg', { firstName: getUserProfile().firstName, lastName: getUserProfile().lastName })},
{t('dashboard.welcomeMsg', { firstName: getUserProfile().firstName, lastName: getUserProfile().lastName })}
</p>
</div>
<div className="flex mt-2 ml-[3.2%] flex-wrap break-words">
Expand Down
8 changes: 4 additions & 4 deletions pmp-reactjs-ui/src/pages/policies/Policies.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ function Policies() {
)}
<div className="flex-col">
<div className="flex justify-between mb-5">
<div className="flex items-start space-x-3">
<div className="flex items-start gap-x-2">
<img src={backArrow} alt="" onClick={() => moveToHome()} className={`mt-[9%] cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} />
<div className="flex-col">
<h1 className="font-semibold text-xl text-dark-blue">{t('policies.policies')}</h1>
Expand Down Expand Up @@ -385,7 +385,7 @@ function Policies() {
{
viewPolicyId === index && (
<div onClick={() => showViewPolicyDetails(partner)}
className="absolute bg-white text-xs font-medium rounded-lg shadow-md border">
className={`absolute ${isLoginLanguageRTL ? "mr-16": null} bg-white text-xs font-medium rounded-lg shadow-md border`}>
<p className="px-5 py-2 cursor-pointer">
{t('policies.view')}
</p>
Expand Down Expand Up @@ -413,12 +413,12 @@ function Policies() {
breakLabel="..."
previousLabel={
<IconContext.Provider value={{ color: "#B8C1CC", size: "25px" }}>
<AiFillLeftCircle />
{isLoginLanguageRTL ? <AiFillRightCircle/> : <AiFillLeftCircle/>}
</IconContext.Provider>
}
nextLabel={
<IconContext.Provider value={{ color: "#B8C1CC", size: "25px" }}>
<AiFillRightCircle />
{isLoginLanguageRTL ? <AiFillLeftCircle/> : <AiFillRightCircle/>}
</IconContext.Provider>
}
/>
Expand Down
33 changes: 18 additions & 15 deletions pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import React from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { getUserProfile } from "../../services/UserProfileService";
import { isLangRTL } from "../../utils/AppUtils";
import backArrow from "../../svg/back_arrow.svg";
import { formatDate, moveToPolicies } from "../../utils/AppUtils";
import adminImage from "../../svg/admin.png";
import partnerImage from "../../svg/partner.png";

function ViewPolicyDetails() {
const { t } = useTranslation();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
const navigate = useNavigate();
const [policyDetails, setPolicyDetails] = useState([]);

Expand Down Expand Up @@ -48,16 +51,16 @@ function ViewPolicyDetails() {

return (
<>
<div className="flex-col w-full p-5 bg-anti-flash-white h-full font-inter mb-[2%] ml-[8%] overflow-x-scroll">
<div className={`flex-col w-full p-5 bg-anti-flash-white h-full font-inter mb-[2%] ${isLoginLanguageRTL ? "mr-[8%]" : "ml-[8%]"} overflow-x-scroll`}>
<div className="flex justify-between mb-5">
<div className="flex space-x-4">
<div className="flex items-center gap-x-2">
<img
src={backArrow}
alt=""
onClick={() => moveToPolicies(navigate)}
className="mt-1 cursor-pointer"
className={`mt-[9%] cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`}
/>
<div className="flex-col mt-4">
<div className="flex-col">
<h1 className="font-bold text-lg text-md text-blue-900">
{t("viewPolicyDetails.viewPolicyDetails")}
</h1>
Expand All @@ -79,7 +82,7 @@ function ViewPolicyDetails() {
</div>
</div>
<div className="bg-white h-fit mt-1 rounded-t-xl shadow-lg">
<div className="flex flex-col pl-8 pt-6 pb-5">
<div className={`flex-col ${isLoginLanguageRTL?"pr-8": "pl-8"} pt-6 pb-5`}>
<p className="font-bold text-lg text-blue-900 mb-3">{policyDetails.policyName}</p>
<div className="flex items-center justify-start">
<div
Expand All @@ -89,7 +92,7 @@ function ViewPolicyDetails() {
>
{policyDetails.status}
</div>
<div className="font-medium ml-3 text-sm text-blue-900">
<div className={`font-medium ${isLoginLanguageRTL ? "mr-3":"ml-3"} text-sm text-blue-900`}>
{t("viewPolicyDetails.createdOn") + ' ' +
formatDate(policyDetails.createDate, "date")}
</div>
Expand All @@ -100,7 +103,7 @@ function ViewPolicyDetails() {
</div>
</div>
<hr className="h-px w-full bg-gray-200 border-0" />
<div className="pl-8 pt-6 mr-8 mb-4">
<div className={`${isLoginLanguageRTL?"pr-8 ml-8":"pl-8 mr-8"} pt-6 mb-4`}>
<div className="flex flex-wrap">
<div className="w-[50%] mb-5">
<p className="font-semibold text-suva-gray text-base">
Expand Down Expand Up @@ -160,13 +163,13 @@ function ViewPolicyDetails() {
{t("viewPolicyDetails.comments")}
</p>
<div>
<div className="flex font-medium w-full ">
<span className=" w-8 h-8 rounded-full flex justify-center items-center mr-3 text-sm text-white lg:w-10 lg:h-10">
<div className="relative flex-1 after:content-[''] after:w-0.5 after:h-[4rem] after:bg-gray-200 after:inline-block after:absolute after:left-[1.2rem] after:mt-7"></div>
<div className="flex font-medium w-full ">
<span className={`w-8 h-8 rounded-full flex justify-center items-center ${isLoginLanguageRTL?"ml-3":"mr-3"} text-sm text-white lg:w-10 lg:h-10`}>
<div className={`relative flex-1 after:content-[''] after:w-0.5 after:h-[4rem] after:bg-gray-200 after:inline-block after:absolute ${isLoginLanguageRTL?"after:right-[1.2rem]":"after:left-[1.2rem]"} after:mt-7`}></div>
<img src={adminImage} alt="Example" className="" />
</span>
<div className="flex bg-floral-white w-full flex-col p-4 relative rounded-md">
<div className="w-0 h-0 border-t-[0.5rem] border-t-transparent border-r-[7px] border-r-[#FFF9F0] border-b-[0.5rem] border-b-transparent absolute top-4 -left-[0.38rem]"></div>
<div className={`w-0 h-0 border-t-[0.5rem] border-t-transparent border-b-[0.5rem] border-b-transparent absolute top-4 ${isLoginLanguageRTL? "-right-[0.38rem] border-l-[7px] border-l-[#FFF9F0]" : "-left-[0.38rem] border-r-[7px] border-r-[#FFF9F0]"}`}></div>
<h4 className="text-lg text-[#031640]">
{t("viewPolicyDetails.adminComments")}
</h4>
Expand All @@ -181,7 +184,7 @@ function ViewPolicyDetails() {
<div>
{policyDetails.updDtimes && (
<div className="flex">
<div className="font-medium ml-3 text-sm text-blue-900">
<div className={`font-medium ${isLoginLanguageRTL?"mr-3":"ml-3"} text-sm text-blue-900`}>
{formatDate(policyDetails.updDtimes, "date")}
</div>
<div className="mx-3 text-gray-300">|</div>
Expand All @@ -196,11 +199,11 @@ function ViewPolicyDetails() {
</div>
<div className="mt-4">
<div className="flex font-medium w-full">
<span className="w-8 h-8 rounded-full flex justify-center items-center mr-3 text-sm lg:w-10 lg:h-10">
<span className={`w-8 h-8 rounded-full flex justify-center items-center ${isLoginLanguageRTL?"ml-3":"mr-3"} text-sm lg:w-10 lg:h-10`}>
<img src={partnerImage} alt="Example" className="" />
</span>
<div className="flex bg-alice-green w-full flex-col p-4 relative rounded-md">
<div className="w-0 h-0 border-t-[0.5rem] border-t-transparent border-r-[7px] border-r-[#F2F5FC] border-b-[0.5rem] border-b-transparent absolute top-4 -left-[0.38rem]"></div>
<div className={`w-0 h-0 border-t-[0.5rem] border-t-transparent border-b-[0.5rem] border-b-transparent absolute top-4 ${isLoginLanguageRTL ? "-right-[0.38rem] border-l-[#F2F5FC] border-l-[7px]" : "-left-[0.38rem] border-r-[#F2F5FC] border-r-[7px]"}`}></div>
<h4 className="text-lg text-[#031640]">
{t("viewPolicyDetails.partnerComments")}
</h4>
Expand All @@ -225,7 +228,7 @@ function ViewPolicyDetails() {
</div>
</div>
<hr className="h-px w-full bg-gray-200 border-0" />
<div className="flex justify-end py-5 mr-8">
<div className={`flex justify-end py-5 ${isLoginLanguageRTL ? "ml-8" :"mr-8"}`}>
<button
onClick={() => moveToPolicies(navigate)}
className="h-11 w-[120px] text-sm p-3 py-2 text-tory-blue bg-white border border-blue-800 font-semibold rounded-md text-center"
Expand Down

0 comments on commit 8b2d6c6

Please sign in to comment.