Skip to content

Commit

Permalink
update style in terramatch pages
Browse files Browse the repository at this point in the history
  • Loading branch information
dottyy committed Jun 7, 2024
1 parent d2ccc19 commit cab5c17
Show file tree
Hide file tree
Showing 29 changed files with 211 additions and 63 deletions.
6 changes: 3 additions & 3 deletions src/components/extensive/PageElements/Footer/PageFooter.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Icon, { IconNames } from "../../Icon/Icon";

const PageFooter = () => {
const PageFooter = () => (
<div className="mt-0 flex h-28 items-center justify-between bg-[#353535] px-28 text-white" style={{ marginTop: 0 }}>
<div className="flex">
<Icon name={IconNames.FACEBOOK} className="mr-4" />
Expand All @@ -9,7 +9,7 @@ const PageFooter = () => {
</div>
<Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
<p> © TerraMatch 2024</p>
</div>;
};
</div>
);

export default PageFooter;
36 changes: 36 additions & 0 deletions src/pages/auth/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
"use client";
import { Button } from "@mui/material";
import { usePathname } from "next/navigation";
import React from "react";
import { When } from "react-if";

import Text from "@/components/elements/Text/Text";

interface LoginLayoutProps {
children: React.ReactNode;
}

const LoginLayout: React.FC<LoginLayoutProps> = props => {
const { children } = props;
const pathname = usePathname();

return (
<div className="relative flex h-screen w-full bg-square-pattern bg-contain bg-right bg-no-repeat">
<div className="mt-[-78px] flex w-[45%] flex-col items-center justify-center py-[78px]">
{children}
<When condition={pathname !== "/sign-up"}>
<div className="absolute bottom-[1.5vh] left-6">
<Button>
<Text variant="text-12-bold" className="text-primary">
English (United Kingdom)
</Text>
</Button>
</div>
</When>
</div>
<div className="flex w-[55%] items-center justify-end" />
</div>
);
};

export default LoginLayout;
70 changes: 70 additions & 0 deletions src/pages/auth/signup/components/usePasswordStrength.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { useEffect, useState } from "react";

interface UsePasswordStrengthProps {
password: string;
}

interface UsePasswordStrengthResult {
passwordStrength: string;
values: {
hasUppercase: boolean;
hasLowercase: boolean;
hasNumber: boolean;
hasCorrectLength: boolean;
};
validationCount: number;
}

const ValidationStrength = {
STRONG: 4,
FAIR: 3,
WEAK: 2,
VERY_WEAK: 1
};
const usePasswordStrength = (props: UsePasswordStrengthProps): UsePasswordStrengthResult => {
const { password } = props;
const [passwordStrength, setPasswordStrength] = useState("Very Weak");
const [values, setValues] = useState({
hasUppercase: false,
hasLowercase: false,
hasNumber: false,
hasCorrectLength: false
});

const [validation, setValidation] = useState<boolean[]>([]);

useEffect(() => {
const hasCorrectLength = password.length >= 8;
const hasUppercase = (password.match(/[A-Z]/g) || []).length > 0;
const hasLowercase = (password.match(/[a-z]/g) || []).length > 0;
const hasNumber = (password.match(/[0-9]/g) || []).length > 0;

const _validation = [hasUppercase, hasLowercase, hasNumber, hasCorrectLength];

const strengthMap = {
[ValidationStrength.STRONG]: "Strong",
[ValidationStrength.FAIR]: "Fair",
[ValidationStrength.WEAK]: "Weak"
};

setValues({
hasUppercase,
hasLowercase,
hasNumber,
hasCorrectLength
});

setValidation(_validation);
const validationCount = _validation.filter(value => value === true).length;

setPasswordStrength(strengthMap[validationCount]);
}, [password]);

return {
passwordStrength,
values,
validationCount: validation.filter(Boolean).length
};
};

export default usePasswordStrength;
2 changes: 2 additions & 0 deletions src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useT } from "@transifex/react";
import Link from "next/link";
import { useRouter } from "next/router";

import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
import WizardFormIntro from "@/components/extensive/WizardForm/WizardFormIntro";
import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
import ContentLayout from "@/components/generic/Layout/ContentLayout";
Expand Down Expand Up @@ -111,6 +112,7 @@ const EntityIntroPage = () => {
/>
</LoadingContainer>
</ContentLayout>
<PageFooter />
</BackgroundLayout>
);
};
Expand Down
3 changes: 3 additions & 0 deletions src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
import { useRouter } from "next/router";
import { useMemo } from "react";

import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
import WizardForm from "@/components/extensive/WizardForm";
import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
Expand Down Expand Up @@ -154,6 +155,8 @@ const EditEntityPage = () => {
}}
/>
</LoadingContainer>
<br />
<PageFooter />
</BackgroundLayout>
);
};
Expand Down
8 changes: 5 additions & 3 deletions src/pages/home.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ActionTracker from "@/components/extensive/ActionTracker/ActionTracker";
import FundingCarouselList from "@/components/extensive/FundingsCarouselList/FundingsCarouselList";
import { IconNames } from "@/components/extensive/Icon/Icon";
import PageBody from "@/components/extensive/PageElements/Body/PageBody";
import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
import PageSection from "@/components/extensive/PageElements/Section/PageSection";
import TaskList from "@/components/extensive/TaskList/TaskList";
import { useGetHomeTourItems } from "@/components/extensive/WelcomeTour/useGetHomeTourItems";
Expand Down Expand Up @@ -39,7 +40,7 @@ const HomePage = () => {
<title>{t("Home")}</title>
</Head>
<PageSection>
<Text variant="text-heading-700" className="text-center">
<Text variant="text-36-bold" className="text-center">
{t("What would you like to do?")}
</Text>
</PageSection>
Expand All @@ -65,9 +66,9 @@ const HomePage = () => {
</LoadingContainer>
</When>
<When condition={!!myOrg}>
<PageSection>
<PageSection className="flex justify-center bg-white pb-10" hasFull>
<TaskList
title={t("Get Ready for Funding Opportunities")}
title={t(`Get Ready for <br> Funding Opportunities`)}
subtitle={t("Keep your information updated to have more chances of having a successful application.")}
items={[
{
Expand Down Expand Up @@ -96,6 +97,7 @@ const HomePage = () => {
/>
</PageSection>
</When>
<PageFooter />
</PageBody>
);
};
Expand Down
4 changes: 4 additions & 0 deletions src/pages/my-projects/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Text from "@/components/elements/Text/Text";
import { IconNames } from "@/components/extensive/Icon/Icon";
import List from "@/components/extensive/List/List";
import PageBody from "@/components/extensive/PageElements/Body/PageBody";
import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
import PageSection from "@/components/extensive/PageElements/Section/PageSection";
import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
Expand Down Expand Up @@ -88,6 +89,9 @@ const MyProjectsPage = () => {
</Else>
</If>
</LoadingContainer>
<br />
<br />
<PageFooter />
</PageBody>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/nursery/[uuid]/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ const NurseryDetailPage = () => {
body: <CompletedReportsTab nursery={nursery} />
}
]}
containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
containerClassName="max-w-[82vw] px-10 xl:px-0 w-full overflow-y-hidden"
/>
</LoadingContainer>
);
Expand Down
5 changes: 5 additions & 0 deletions src/pages/opportunities/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import FundingCarouselList from "@/components/extensive/FundingsCarouselList/Fun
import { IconNames } from "@/components/extensive/Icon/Icon";
import PageBody from "@/components/extensive/PageElements/Body/PageBody";
import PageCard from "@/components/extensive/PageElements/Card/PageCard";
import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
import PageSection from "@/components/extensive/PageElements/Section/PageSection";
import ApplicationsTable from "@/components/extensive/Tables/ApplicationsTable";
Expand Down Expand Up @@ -146,7 +147,11 @@ const OpportunitiesPage = () => {
</PageSection>
</Else>
</If>
<br />
<br />
</PageBody>

<PageFooter />
</>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const BuildStrongerProfile = ({ subtitle, steps, onEdit }: BuildStrongerProfileP
const t = useT();

return (
<section className="my-10 bg-neutral-150 p-8">
<section className="my-10 rounded-lg bg-neutral-150 p-8">
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<Text variant="text-heading-2000">{t("Build a Stronger Profile")}</Text>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/organization/[id]/components/Files.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type FilesProps = {

const Files = ({ files, title }: FilesProps) => {
return (
<section className="my-10 bg-neutral-150 p-8">
<section className="my-10 rounded-lg bg-neutral-150 p-8">
<When condition={!!title}>
<Text variant="text-heading-300" className="mb-10">
{title}
Expand Down
48 changes: 25 additions & 23 deletions src/pages/organization/[id]/components/OrganizationHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,33 +49,35 @@ const OrganizationHeader = ({ organization }: OrganizationHeaderProps) => {
}}
/>
{/* Content Container */}
<div className="tranform translate-y-[-70px]">
<Text variant="text-heading-2000" className="mb-3">
{organization?.name}
</Text>
<div className="flex flex-col gap-3">
<div className="flex items-start gap-1">
<Icon name={IconNames.MAP_PIN} width={13} className="mt-[2px]" />
<Text variant="text-body-900">
{formatOptionsList(getCountriesOptions(t), organization?.hq_country ?? [])}
</Text>
</div>
</section>
<div className="mt-8">
<Button onClick={showEditOrgModal}>{t("Edit Profile")}</Button>
</div>
</Container>
<Container className="mb-6">
<div className="tranform translate-y-[-70px]">
<Text variant="text-heading-2000" className="mb-3">
{organization?.name}
</Text>
<div className="flex flex-col gap-3">
<div className="flex items-center gap-1">
<Icon name={IconNames.MAP_PIN} width={13} height={18} />
<Text variant="text-body-900">
{formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
{formatOptionsList(getCountriesOptions(t), organization?.hq_country ?? [])}
</Text>
<Text variant="text-body-900">{organization?.description}</Text>
</div>
<Text variant="text-body-900">
{formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
</Text>
<Text variant="text-body-400">{organization?.description}</Text>
</div>
<div className="flex translate-y-[-30px] transform gap-6">
<IconSocial name={IconNames.SOCIAL_FACEBOOK} url={organization?.facebook_url} />
<IconSocial name={IconNames.SOCIAL_INSTAGRAM} url={organization?.instagram_url} />
<IconSocial name={IconNames.SOCIAL_LINKEDIN} url={organization?.linkedin_url} />
<IconSocial name={IconNames.SOCIAL_TWITTER} url={organization?.twitter_url} />
<IconSocial name={IconNames.EARTH} url={organization?.web_url} />
</div>
</section>
<div className="mt-8">
<Button onClick={showEditOrgModal}>{t("Edit Profile")}</Button>
</div>
<div className="flex translate-y-[-30px] transform gap-6">
<IconSocial name={IconNames.SOCIAL_FACEBOOK} url={organization?.facebook_url} />
<IconSocial name={IconNames.SOCIAL_INSTAGRAM} url={organization?.instagram_url} />
<IconSocial name={IconNames.SOCIAL_LINKEDIN} url={organization?.linkedin_url} />
<IconSocial name={IconNames.SOCIAL_TWITTER} url={organization?.twitter_url} />
<IconSocial name={IconNames.EARTH} url={organization?.web_url} />
</div>
</Container>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const FinancialInformation = ({ organization }: FinancialInformationProps) => {
];

return (
<section className="my-10 bg-neutral-150 p-8">
<section className="my-10 rounded-lg bg-neutral-150 p-8">
<List
className="flex flex-col gap-3"
items={budgetRows}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/organization/[id]/components/overview/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ const About = ({ organization }: AboutProps) => {
const t = useT();

return (
<section className="my-15 bg-neutral-150 p-8">
<section className="my-15 rounded-lg bg-neutral-150 p-8">
<div className="flex flex-col gap-4">
<Text variant="text-heading-300">{t("About")}</Text>
<Text variant="text-body-800">{organization?.description}</Text>
</div>
<div className="mt-10 flex flex-col gap-3">
<div className="mt-10 flex flex-col gap-4">
<TextRow name={t("Website:")} value={organization?.web_url} nameClassName="w-1/3" />
<TextRow
name={t("Headquarters:")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ const PastCommunityExperience = ({ organization }: PastCommunityExperienceProps)
const t = useT();

return (
<section className="my-10 bg-neutral-150 p-8">
<section className="my-10 rounded-lg bg-neutral-150 p-8">
<Text variant="text-heading-300">{t("Social Impact")}</Text>
<div className="mt-10 flex flex-col gap-3">
<div className="mt-10 flex flex-col gap-4">
<TextRow
name={t("Engagement: Farmers")}
value={formatOptionsList(getFarmersEngagementStrategyOptions(t), organization?.engagement_farmers)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from "react";
import { When } from "react-if";

import Table from "@/components/elements/Table/Table";
import { VARIANT_TABLE_BORDER_ALL } from "@/components/elements/Table/TableVariants";
import Text from "@/components/elements/Text/Text";
import { V2OrganisationRead } from "@/generated/apiSchemas";

Expand All @@ -14,7 +15,7 @@ const TeamAndResources = ({ organization }: TeamAndResourcesProps) => {
const t = useT();

return (
<section className="my-10 bg-neutral-150 p-8">
<section className="my-10 rounded-lg bg-neutral-150 p-8">
<Text variant="text-heading-300">{t("Team and Resources")}</Text>
<div className="mt-10 flex flex-col gap-12">
<When condition={organization?.leadership_team && organization?.leadership_team.length > 0}>
Expand Down Expand Up @@ -57,9 +58,11 @@ const TeamAndResources = ({ organization }: TeamAndResourcesProps) => {
role: member.position,
gender: member.gender
}))}
variant={VARIANT_TABLE_BORDER_ALL}
/>
</When>
<Table
variant={VARIANT_TABLE_BORDER_ALL}
columns={[
{
accessorKey: "label",
Expand Down
Loading

0 comments on commit cab5c17

Please sign in to comment.