muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-05-08 02:56:41 +07:00
Code Packages Activity Actions

refactored flow cells, added colors for lab (#78)

Browse source 
* made better flow cells

* made cubical desaturation

* made colorfull lab nodes

* colorful lab nodes for all text ones

* all lab nodes are colorful

* disabled lazy loading on heroes

* fixed color calculation hook

* fixed lab color gradients calculation

* fixed cell text on flow
This commit is contained in:
muerwre 2021-10-08 11:33:53 +07:00 • committed by GitHub
parent 7d6f35b0af
commit 94c656fe0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 345 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/flow/CellShade/index.tsx
View file

@ -1,21 +1,26 @@
import React, { FC, useMemo } from 'react';
import styles from './styles.module.scss';
import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
import { convertHexToRGBA } from '~/utils/color';
import { DivProps } from '~/utils/types';
import classNames from 'classnames';
import { transparentize } from 'color2k';
import { normalizeBrightColor } from '~/utils/color';
interface Props extends DivProps {
color?: string;
size?: number;
}
const CellShade: FC<Props> = ({ color, ...rest }) => {
const CellShade: FC<Props> = ({ color, size = 50, ...rest }) => {
const background = useMemo(() => {
if (!color || color === DEFAULT_DOMINANT_COLOR) {
const normalized = normalizeBrightColor(color);
if (!color || color === DEFAULT_DOMINANT_COLOR || !normalized) {
return undefined;
}
return `linear-gradient(7deg, ${color} 50px, ${convertHexToRGBA(color, 0.3)} 250px)`;
return `linear-gradient(7deg, ${normalized} ${size}px, ${transparentize(normalized, 1)} ${size *
5}px)`;
}, [color]);
return (

15
src/components/flow/CellShade/styles.module.scss
View file

@ -1,16 +1,17 @@
@import "~/styles/variables";
.shade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);
pointer-events: none;
touch-action: none;
@include tablet {
opacity: 0.7;
&.black::after {
content: ' ';
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: blue;
}
}