soujvnunes / virtual-exhibition Goto Github PK

Set only dark theme

Set GalleryItem image on background's modal and not as element

Add those two props:

• [endIcon]: for adding the Icon at the end of button line with margin-right -12px to equal the viewport safe-area;
• [startIcon]: for adding the Icon at the start of button line with margin-left -12px to equal the viewport safe-area;

For icon as a Button child with no text:

• create another extension from Button as ButtoIcon (/button-icon) with padding 0 12px root style to equal the button padding area;

Add Blur to it so user can focus only on modal content. Add in the item itself on hover.

When user changes the document data theme every element that uses color or size, should transit.

Following the prototype: the hero section title must have wrap the rapport SIV

Feed the component and other who needs its data with context.

Follow prototype. After-scroll animatio not required yet.

What is for intro create Intro component and throw its data there;
Keep decade context on Hero itself;

Should have an animation to improve UX.

Move all photos to /asset

Follow the prototype and add this variation.

Header, Content and Footer must be on a parallel component (Container) to be controlled by the image group one scroll event.

Based on prototype

Can't receive automatically. After user specify the component [name], then, based on this, the ID or anything else that's depending on that is received.

Check on all available main devices the responsivity of the elements

Follow the prototype: for mobile and desktop viewport

Use material design icon.

It should be fragmented into new components.

• unnecessary destruction at Header class styles
• Footer should be renamed to Navigation

Create a functional-atom typography component based on project's prototype.

Must have/provide:

This component has to be extended from Font atom component.

1. display/importation name: Typography exported from /src/atoms;
2. variants: variant={title|paragraph|label};
3. [href] prop to handle link: href="/";
4. start and end point size:

• title starts and ends at 40 and 72 pts., respect., for mobile and desktop development with 56 pts. for medium devices;
• paragraph and label starts and ends at 16 pts.;
• caption starts and ends at 12 pts.;

5. main or base family type for specific variants:

• title and label uses the Georgia serif family type as main;
• paragraph and caption uses the Lucida Sans Unicode sans-serif family type as base;
  Note both family types was picked for been pre-installed on every existent device, been accessible.

6. sizes: size={large|medium|small}:

• large increases in 25% the variant base size;
• small decreases in 25% the variant base size;

7. each variant must render a HTML element:

• title renders <h2 />;
• paragraph renders <p />;
• label renders <label />;

8. colors: color={main|reading|base|disabled};
9. weights: weight={lighter|normal|bolder};

Should render htmlFor (for) if "label" [variant] is present at Typography within Button

Move from body to html and move its existent custom properties to [data-theme] one.

Review and fix it.

By time-demand (deadline @ 2021/01/15), the requires a components framework to be done immediately.

Use gallery object global state as prop and them set it as a dependency array from Gallery useEffect(). So, reset the slice in there.

the custom useTheme() hook its not removing the [data-theme] dataset from the document element (HTML) when and after app unmounts.

• display and name (images group): /hero-scroll HeroScroll
• sections (image): /hero Hero

1. Each image:

• should be positioned one after another, following the body scroll;

2. Both Hero (image section) and Container height should be set by the client window innerHeight.

Following the prototype, the explore nav button should disappear and then shown the decades buttons for user navigate between them.

• Move body {} on index.css to src/app/, rename to .root [} and import as css module { root } and use as app wrapper;
• Let only :root {} on index.css;
• remove anothers unnused files.

Check prototype and apply what is necessary.

All css custom properties variables related to palette colors as primary or secondary should be handled by the [data-theme] theme dataset defined on the HTML.

As HTML (so the entire document) theme styles are defined by the [data-theme] attr with "dark" or "light" values, should add that attr before the app component mounts.

Move:

• /app files to the source folder;
• data from provider to App (keep the application logic here);
• data from /theme to /modules;
• floating file constants to /constants;

Has to group into each [variant] value.

• OnClick: should display modal with full screen picture and its figcaption.

The first image should be on Hero section background

App stylesheet is rerendering unnecessarily, because context is being used incorrectly.

Create a unique context for all global states and do not use useState, but useReducer. Do move all states for a reducer state and use it directly on context provider values (do not desctructure as well).

Source

Where the gallery item photo hovered should be shown

Move type styles from .root app to Typography.

Add previous, exit and next buttons at the bottom of its modal.

Create a functional-atom typography component based on project's prototype.

Must have/provide:

1. display/importation name: Font exported from /src/atoms;
2. [component] prop: component={h1|h2|h3|h4|h5|h6|p|label|span|legend};
3. [weight] prop: variant={lighter|normal|bolder};
4. [href] prop: href="/";
5. each component (headings, p, label, span and legend) has to follow its own size according of viewport display described on the guidelines;
6. main or base family type for specific components:

• headings and label uses the Georgia serif family type as main;
• p, span and legend uses the Lucida Sans Unicode sans-serif family type as base;
  Note both family types was picked for been pre-installed on every existent device, been accessible.

7. sizes: size={large|medium|small}:

• large increases in 25% the variant base size;
• medium uses the own base size;
• small decreases in 25% the variant base size;

8. colors: color={main|reading|base|disabled};

1. Create <Container /> for columns wrapper;

• should provide [clone] to control childrens;
• should provide [component] to handle DOM component rendering;
• should provide all flex properties as its ones;
• they define the gaps between columns;
  Note Gutters will be defined by the empty space left by the columns.

2. Create <Col /> for components wrapper;

• should provide [clone] to control childrens;
• should have fixed widths: large screens 92px, medium screens 56px, small screens 20px;
• [span] should provide a base width multiplied by span amount plus the gap multiplied by its amout in between. i.e.: <Col span={2} /> renders a 48 px (20px * 2 + 8px * 1)

Do move:

• refactor assigned arrow functions to functions;
• local styles from /index to /style;
• declare style directly into classes={{ ... }} for material ui components, instead of className={} (for build-in);

Should appear only at or above the screen Y value.

• Rename from character to match the parameter from the unammed replace() function on toKebabCase

Should logo, with its respective context usages, favicon and plain html data be updated.

• Rename the background custom property style from [--background] to [--background-color];
• Add the transition custom property style [--transition] with 300ms cubic-bezier(0.3, 0.6, 0.6, 0.3) value to handle animation.

1. ButtonBase for reset it;
2. Button for the UI, following the prototype;

Create SectionBackgroundContext to avoid props drilling.

[classNames] shoudn't be a property but a object itself at [className] from Button and Typography

I.e.: when user clicks on 1960 the background should be settled with the first image available.