Skip to content

fix: create ecosystem org alignment and passkey dark mode issues #492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 20, 2023
Merged

fix: create ecosystem org alignment and passkey dark mode issues #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d65a92c
fix: passkey dark mode and create ecosystem/organization popup alignm…
16-karan Dec 18, 2023
d8c49e2
fix: aligenment issue on create account page
16-karan Dec 18, 2023
16850bb
Merge branch 'develop' of https://github.com/credebl/studio into fix-…
16-karan Dec 20, 2023
5dca7ff
fix: alignment issue on edit org popup
16-karan Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/commonComponents/PasseyAddDevicePopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const PasskeyAddDevice = (props: {
className="bg-transparent ml-4 absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-white hover:text-gray-800 dark:hover:text-white"
>
{passwordVisible ? (
<svg className="h-6 w-6 text-black"
<svg className="h-6 w-6 text-black dark:text-gray-300"
id="visible"
viewBox="0 0 24 24"
fill="none"
Expand All @@ -135,7 +135,7 @@ const PasskeyAddDevice = (props: {
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" /></svg>
) : (
<svg className="h-6 w-6 text-black"
<svg className="h-6 w-6 text-black dark:text-gray-300"
viewBox="0 0 24 24"
fill="none"
id="invisible"
Expand Down Expand Up @@ -194,4 +194,4 @@ const PasskeyAddDevice = (props: {
);
};

export default PasskeyAddDevice;
export default PasskeyAddDevice;
2 changes: 1 addition & 1 deletion src/components/Authentication/SignUpUserName.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const SignUpUserName = () => {
</svg>
</button>

<div className="w-full flex flex-col items-center justify-center ">
<div className="w-full flex flex-col items-center justify-center text-center ">

<h2 className="text-primary-700 dark:text-gray-200 font-inter text-3xl font-bold leading-10">
Create account
Expand Down
31 changes: 18 additions & 13 deletions src/components/CreateEcosystemOrgModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { getFromLocalStorage } from '../../api/Auth';
import { createEcosystems } from '../../api/ecosystem';
import { getOrgDetails } from '../../config/ecosystem';
import defaultUserIcon from '../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg';
import EndorsementTooltip from '../../commonComponents/EndorsementTooltip'
import EndorsementTooltip from '../../commonComponents/EndorsementTooltip';
interface Values {
name: string;
description: string;
Expand Down Expand Up @@ -246,7 +246,6 @@ const CreateEcosystemOrgModal = (props: IProps) => {
const renderEcosystemModal = () => {
const popupName = props.isorgModal ? 'Organization' : 'Ecosystem';


return (
<Modal
size={!props.isorgModal ? '3xl' : '2xl'}
Expand Down Expand Up @@ -297,13 +296,13 @@ const CreateEcosystemOrgModal = (props: IProps) => {
className="space-y-6"
onSubmit={formikHandlers.handleSubmit}
>
<div className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div className="items-center sm:flex 2xl:flex sm:space-x-4 xl:space-x-4 2xl:space-x-4">
<div className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-2 dark:bg-gray-800">
<div className="flex flex-col items-center sm:flex-row 2xl:flex-row p-2 gap-0 sm:gap-4">
{typeof logoImage.logoFile === 'string' ? (
<Avatar size="lg" img={defaultUserIcon} />
) : (
<img
className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
className="m-2 rounded-md w-28 h-28"
src={
typeof logoImage.logoFile === 'string'
? asset('images/users/bonnie-green-2x.png')
Expand All @@ -314,13 +313,13 @@ const CreateEcosystemOrgModal = (props: IProps) => {
)}

<div>
<h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
<h3 className="flex items-center justify-center sm:justify-start mb-1 text-xl font-bold text-gray-900 dark:text-white">
{popupName} Logo
</h3>
<div className="mb-4 text-sm text-gray-500 dark:text-gray-400">
<div className="flex items-center justify-center sm:justify-start mb-4 text-sm text-gray-500 dark:text-gray-400">
JPG, JPEG and PNG . Max size of 1MB
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center justify-center sm:justify-start space-x-4">
<div>
<label htmlFor="organizationlogo">
<div className="px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white text-center rounded-lg">
Expand All @@ -338,9 +337,11 @@ const CreateEcosystemOrgModal = (props: IProps) => {
}
/>
{imgError ? (
<div className="text-red-500">{imgError}</div>
<div className="flex justify-center text-red-500">
{imgError}
</div>
) : (
<span className="mt-1 text-sm text-gray-500 dark:text-gray-400">
<span className="mt-1 flex justify-center text-sm text-gray-500 dark:text-gray-400">
{logoImage.fileName || 'No File Chosen'}
</span>
)}
Expand Down Expand Up @@ -399,7 +400,11 @@ const CreateEcosystemOrgModal = (props: IProps) => {
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue('description', value);
formikHandlers.setFieldTouched('description', true, false);
formikHandlers.setFieldTouched(
'description',
true,
false,
);

if (value.length > 50) {
formikHandlers.setFieldError(
Expand Down Expand Up @@ -453,7 +458,7 @@ const CreateEcosystemOrgModal = (props: IProps) => {
</div>
</div>
)}
<div className="flex mr-2">
<div className="flex">
<Button
type="reset"
color="bg-primary-800"
Expand Down Expand Up @@ -510,4 +515,4 @@ const CreateEcosystemOrgModal = (props: IProps) => {
return <>{renderEcosystemModal()}</>;
};

export default CreateEcosystemOrgModal;
export default CreateEcosystemOrgModal;
12 changes: 6 additions & 6 deletions src/components/organization/EditOrgdetailsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<div
className="items-center sm:flex 2xl:flex sm:space-x-4 xl:space-x-4 2xl:space-x-4"
className="flex flex-col items-center sm:flex-row 2xl:flex-row p-2 gap-0 sm:gap-4"
>
{
(typeof (logoImage.logoFile) === "string" && props?.orgData?.logoUrl) ?
Expand All @@ -258,19 +258,19 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
img={defaultUserIcon}
/> :
<img
className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
className="m-2 rounded-md w-28 h-28"
src={URL.createObjectURL(logoImage?.logoFile)}
alt="Jese picture"
/>
}
<div>
<h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
<h3 className="flex items-center justify-center sm:justify-start mb-1 text-xl font-bold text-gray-900 dark:text-white">
Organization Logo
</h3>
<div className="mb-4 text-sm text-gray-500 dark:text-gray-400">
<div className="flex items-center justify-center sm:justify-start mb-4 text-sm text-gray-500 dark:text-gray-400">
JPG, JPEG and PNG . Max size of 1MB
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-4 justify-center sm:justify-start">

<div>
<label htmlFor="organizationlogo">
Expand All @@ -279,7 +279,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
className="hidden"
id="organizationlogo" title=""
onChange={(event): void => handleImageChange(event)} />
{imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{logoImage.fileName || 'No File Chosen'}</span>}
{imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1 flex justify-center text-sm text-gray-500 dark:text-gray-400">{logoImage.fileName || 'No File Chosen'}</span>}
</label>

</div>
Expand Down