Skip to content

Commit

Permalink
Merge pull request #23 from ScilifelabDataCentre/sebbe-pre-dev_branch
Browse files Browse the repository at this point in the history
Sebbe pre dev branch
  • Loading branch information
SevLG authored Jan 30, 2024
2 parents 892afb3 + 84d1afc commit 53f6e29
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 44 deletions.
5 changes: 2 additions & 3 deletions react-app/src/components/CardComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { ReactElement } from "react";

export default function CardComponent(prop: { classes: string, title: string, text: string, button: string }): ReactElement {
export default function CardComponent(prop: { classes: string, title: string, text: string, button: string, buttonClasses: string }): ReactElement {
const title: ReactElement = (
<h2 className="text-center text-white text-xl font-semibold">{prop.title}</h2>
);

var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
const button: ReactElement = (
<div className="card-actions justify-center">
<button className={buttonClasses}>{prop.button}</button>
<button className={prop.buttonClasses}>{prop.button}</button>
</div>
);

Expand Down
27 changes: 13 additions & 14 deletions react-app/src/components/FooterComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import { ReactElement } from 'react';
import {ILink, ISVG} from '../interfaces/types';
import { Link } from 'react-router-dom';
import { LINK_CLASSES } from '../constants';

export default function FooterComponent(): ReactElement {

var footerClasses: string = 'footer p-10 bg-base-100 text-base-content';

var linkClasses: string = 'link link-hover';
var linksCol1: { [id: string] : ILink; } = {
'l1': { text: 'Anonymization Tool', classes: linkClasses, link: '/' },
'l2': { text: 'Data Search', classes: linkClasses, link: '/' },
'l3': { text: 'Data Types', classes: linkClasses, link: '/' },
'l4': { text: 'Events & News', classes: linkClasses, link: '/' },
'l1': { text: 'Anonymization Tool', classes: LINK_CLASSES, link: '/' },
'l2': { text: 'Data Search', classes: LINK_CLASSES, link: '/' },
'l3': { text: 'Data Types', classes: LINK_CLASSES, link: '/' },
'l4': { text: 'Events & News', classes: LINK_CLASSES, link: '/' },
};

var linksCol2: { [id: string] : ILink; } = {
'l1': { text: 'About us', classes: linkClasses, link: '/' },
'l2': { text: 'Contact', classes: linkClasses, link: '/' },
'l3': { text: 'Open Source Contribution', classes: linkClasses, link: '/' },
'l4': { text: 'Privacy Policy', classes: linkClasses, link: '/' },
'l1': { text: 'About us', classes: LINK_CLASSES, link: '/' },
'l2': { text: 'Contact', classes: LINK_CLASSES, link: '/' },
'l3': { text: 'Open Source Contribution', classes: LINK_CLASSES, link: '/' },
'l4': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },
};

var svgConfig: string[] = ['/', 'http://www.w3.org/2000/svg', '24', '24', '0 0 24 24', 'fill-current']
Expand All @@ -29,15 +28,15 @@ export default function FooterComponent(): ReactElement {


return (
<footer className={footerClasses}>
<footer className='footer p-10 bg-base-100 text-base-content'>
<nav>
{Object.keys(linksCol1).map( key => (
<a className={linksCol1[key].classes} href={linksCol1[key].link}>{linksCol1[key].text}</a>
<Link className={linksCol1[key].classes} to={linksCol1[key].link}>{linksCol1[key].text}</Link>
))}
</nav>
<nav>
{Object.keys(linksCol2).map( key => (
<a className={linksCol2[key].classes} href={linksCol2[key].link}>{linksCol2[key].text}</a>
<Link className={linksCol2[key].classes} to={linksCol2[key].link}>{linksCol2[key].text}</Link>
))}
</nav>
<nav>
Expand Down
21 changes: 10 additions & 11 deletions react-app/src/components/HeaderComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,31 @@
import { Link, NavLink } from 'react-router-dom';
import { ILink } from '../interfaces/types';
import { BUTTON_TYPE_ONE, LINK_CLASSES } from '../constants';

export default function HeaderComponent() {

var linkClasses: string = 'link link-hover';
var links: { [id: string] : ILink; } = {
'l1': { text: 'Random text for now', classes: 'pointer-events-none', link: '/#' },
'l2': { text: 'Data', classes: linkClasses, link: 'data' },
'l3': { text: 'Events & News', classes: linkClasses, link: 'eventsandnews' },
'l4': { text: 'Contact', classes: linkClasses, link: 'contact' },
'l5': { text: 'About', classes: linkClasses, link: 'about' },
'l2': { text: 'Data', classes: LINK_CLASSES, link: 'data' },
'l3': { text: 'Events & News', classes: LINK_CLASSES, link: 'eventsandnews' },
'l4': { text: 'Contact', classes: LINK_CLASSES, link: 'contact' },
'l5': { text: 'About', classes: LINK_CLASSES, link: 'about' },
};

var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
var buttons: { [id: string] : ILink; } = {
'b1': { text: 'Sign In', classes: buttonClasses, link: 'signin' },
'b1': { text: 'Sign In', classes: BUTTON_TYPE_ONE, link: 'signin' },
};

return (
// use bg-zinc-200 instead? similar to daisyUI light-theme footer
<div className="navbar h-[8rem] bg-base-100">
<div className="navbar bg-base-100 px-8">
<div className="navbar-start">
<Link to="/">
<img className="w-[340px] h-[82px]" src="/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png" alt="SciLifeLab Logo" />
<img className="h-auto w-80" src="/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png" alt="SciLifeLab Logo" />
</Link>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1">
<div className="navbar-center lg:flex">
<ul className="menu menu-horizontal">
{Object.keys(links).map( key => (
<li>{<NavLink className={links[key].classes} to={links[key].link}>{links[key].text}</NavLink>}</li>
))}
Expand Down
5 changes: 5 additions & 0 deletions react-app/src/components/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ContactPage from '../pages/ContactPage';
import DataPage from '../pages/DataPage';
import EventsAndNewsPage from '../pages/EventsAndNewsPage';
import SignInPage from '../pages/SignInPage';
import PrivacyPage from '../pages/PrivacyPage';

const router = createBrowserRouter([
{
Expand Down Expand Up @@ -37,6 +38,10 @@ const router = createBrowserRouter([
path: 'signin',
element: <SignInPage />,
},
{
path: 'privacy',
element: <PrivacyPage />,
},
]
},
]);
Expand Down
11 changes: 11 additions & 0 deletions react-app/src/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// reused tailwind classes
export const HEADER_ONE: string = "text-left text-black text-[40px] font-semibold";

export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold p-6";

export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300';

export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12";

export const LINK_CLASSES: string = 'link link-hover';
31 changes: 15 additions & 16 deletions react-app/src/pages/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useMatomo } from '@jonkoops/matomo-tracker-react';
import CardComponent from "../components/CardComponent";
import ImageCarouselComponent from "../components/ImageCarouselComponent";
import TextBarComponent from "../components/TextBarComponent";
import { BODY_CLASSES, BUTTON_TYPE_ONE, HEADER_ONE, PAGE_DESCRIPTION_TEXT_BAR_CLASSES } from '../constants';

export default function HomePage(): ReactElement {

Expand All @@ -13,35 +14,33 @@ export default function HomePage(): ReactElement {
trackPageView()
}, [])

var headerOne: string = "text-left text-black text-[40px] font-semibold";
var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300";
var blackCardClasses: string = "w-[700px] h-[253px] bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
var textBarClasses: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
var blackCardClasses: string = "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
var textBarContent: string = "UNDER CONSTRUCTION - Web portal by DDLS Data Science Node";

return (
<div>
<TextBarComponent classes={textBarClasses} text={textBarContent} />
<div className="bg-white space-y-14">
<TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
<div className={BODY_CLASSES}>
<ImageCarouselComponent />
<div className="grid grid-cols-2 gap4">
<div className="flex flex-col space-y-1.5 ...">
<h1 className={headerOne}>Latest News</h1>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<h1 className={HEADER_ONE}>Latest News</h1>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
</div>
<div className="flex flex-col space-y-1.5 ...">
<h1 className={headerOne}>Upcoming Events</h1>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
<h1 className={HEADER_ONE}>Upcoming Events</h1>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
<CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
</div>
</div>
<div className="grid grid-cols-2">
<CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
<CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
<CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" buttonClasses={BUTTON_TYPE_ONE}/>
<CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" buttonClasses={BUTTON_TYPE_ONE}/>
</div>
</div>
</div>
Expand Down
80 changes: 80 additions & 0 deletions react-app/src/pages/PrivacyPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React, { ReactElement } from 'react';
import { useMatomo } from '@jonkoops/matomo-tracker-react';
import TextBarComponent from '../components/TextBarComponent';
import {
BODY_CLASSES,
BUTTON_TYPE_ONE,
BUTTON_TYPE_TWO,
HEADER_ONE,
PAGE_DESCRIPTION_TEXT_BAR_CLASSES,
} from '../constants';
import { Link } from 'react-router-dom';
import { ILink } from '../interfaces/types';

export default function PrivacyPage(): ReactElement {
const { trackPageView,} = useMatomo()

// Track page view
React.useEffect(() => {
trackPageView()
}, [])

var textBarContent: string = "Transparency is one of our guiding principles. Get acquainted with how we're creating a secure space for you.";
var privacyDescription: string = `
Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus.
Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis,
eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed,
pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus.
Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis,
eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed,
pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus.
Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim.
Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis,
eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam.
`;
var trackingMessage: string = `
We want to inform you that whenever you visit this website, we collect information that
your browser sends to us which includes: the website from which you visited us from,
the parts of the website you visit, the date and duration of your visit, your anonymised IP address,
information from the device (device type, operating system, screen resolution, language, country you are located in, and web browser type)
you used during your visit, and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab)
for statistical purposes, to improve the product and to recognize and stop any misuse.
`;

var breadcrumbs: { [id: string] : ILink; } = {
'l1': { text: 'Home', classes: '', link: '/' },
'l2': { text: 'Privacy', classes: '', link: '' },
};

var dividers: string[] = ['Default', 'Default'];

var alertMessage: string = "we use cookies for no reason.";

return (
<>
<TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
<div className={BODY_CLASSES}>
<div className="text-sm breadcrumbs">
<ul>
{Object.keys(breadcrumbs).map( key => (
<li>{breadcrumbs[key].link ? <Link to={breadcrumbs[key].link}>{breadcrumbs[key].text}</Link> : <>{breadcrumbs[key].text}</>}</li>
))}
</ul>
</div>
<div className={HEADER_ONE}>Privacy Policy</div>
<div className="divider">{dividers[0]}</div>
<p>{privacyDescription}</p>
<div className="divider">{dividers[1]}</div>
<p>{trackingMessage}</p>
<div role="alert" className="alert">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>{alertMessage}</span>
<div className="space-x-2">
<button className={BUTTON_TYPE_TWO}>Deny</button>
<button className={BUTTON_TYPE_ONE}>Accept</button>
</div>
</div>
</div>
</>
);
}

0 comments on commit 53f6e29

Please sign in to comment.