Skip to content
This repository has been archived by the owner on Dec 5, 2023. It is now read-only.

Commit

Permalink
Updates Alert styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@YauheniDraichykau
YauheniDraichykau committed Aug 3, 2023
1 parent b9c069b commit 8649272
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 2 deletions.
2 changes: 1 addition & 1 deletion frontend/src/hocs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import {
AccountProvider,
ProviderProps,
} from '@gear-js/react-hooks';
import { Alert, alertStyles } from '@gear-js/ui';
import { ComponentType } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { ADDRESS } from 'consts';
import { Alert, alertStyles } from '@/ui';

function ApiProvider({ children }: ProviderProps) {
return <GearApiProvider providerAddress={ADDRESS.NODE}>{children}</GearApiProvider>;
Expand Down
20 changes: 20 additions & 0 deletions frontend/src/ui/Alert/Alert.interfaces.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { CSSProperties, ReactNode } from 'react';

type Options = {
type: 'info' | 'error' | 'loading' | 'success';
style?: CSSProperties;
title?: string;
timeout?: number;
isClosed?: boolean;
};

type Alert = {
id: string;
content: ReactNode;
options: Options;
};

export type AlertProps = {
alert: Alert;
close: () => void;
};
99 changes: 99 additions & 0 deletions frontend/src/ui/Alert/Alert.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
.root {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 20;
width: 100%;
max-width: 480px;
}

.alert {
position: relative;
display: grid;
grid-gap: 8px;
padding: 24px 48px 24px 24px;
color: #000;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 10px 20px 0 rgba(91, 91, 91, 0.15);
}

.header {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-transform: capitalize;

&::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
background-size: cover;
background-repeat: no-repeat;
}

&.info {
&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_180_426)'%3E%3Cpath d='M16.6716 0.0294991H3.35792C2.9058 -0.0350076 2.44488 0.00661504 2.01163 0.151072C1.57839 0.295529 1.18472 0.538855 0.861786 0.861786C0.538855 1.18472 0.295529 1.57839 0.151072 2.01163C0.00661504 2.44488 -0.0350076 2.9058 0.0294991 3.35792V20L3.35792 16.6716H16.6716C17.1237 16.7361 17.5846 16.6945 18.0179 16.55C18.4511 16.4056 18.8448 16.1622 19.1677 15.8393C19.4906 15.5164 19.734 15.1227 19.8784 14.6895C20.0229 14.2562 20.0645 13.7953 20 13.3432V3.35792C20.0645 2.9058 20.0229 2.44488 19.8784 2.01163C19.734 1.57839 19.4906 1.18472 19.1677 0.861786C18.8448 0.538855 18.4511 0.295529 18.0179 0.151072C17.5846 0.00661504 17.1237 -0.0350076 16.6716 0.0294991ZM10.8469 11.679C10.8469 11.8996 10.7592 12.1113 10.6031 12.2673C10.4471 12.4234 10.2354 12.5111 10.0147 12.5111C9.79406 12.5111 9.58241 12.4234 9.42636 12.2673C9.27031 12.1113 9.18265 11.8996 9.18265 11.679V8.35054C9.18265 8.12985 9.27031 7.9182 9.42636 7.76216C9.58241 7.60611 9.79406 7.51844 10.0147 7.51844C10.2354 7.51844 10.4471 7.60611 10.6031 7.76216C10.7592 7.9182 10.8469 8.12985 10.8469 8.35054V11.679ZM10.0369 6.1316C9.74269 6.13307 9.45991 6.01759 9.2508 5.81056C9.04169 5.60354 8.92339 5.32192 8.92192 5.02767C8.92045 4.73342 9.03593 4.45064 9.24295 4.24153C9.44998 4.03242 9.73159 3.91412 10.0258 3.91265H10.0369C10.3312 3.91265 10.6134 4.02954 10.8215 4.23761C11.0295 4.44568 11.1464 4.72787 11.1464 5.02212C11.1464 5.31637 11.0295 5.59857 10.8215 5.80664C10.6134 6.01471 10.3312 6.1316 10.0369 6.1316Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_180_426'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
}

&.success {
color: #0ed3a3;

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5.5a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.96 11.465L3.728 8.152l.904-.904 2.908 2.907 4.827-4.827.905.904-5.732 5.733Z' fill='%230ed3a3'/%3E%3C/svg%3E");
}
}

&.error {
color: #ff0101;

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_180_8)'%3E%3Cpath d='M19.351 8.39432L11.5666 0.609894C11.1482 0.191345 10.5917 -0.0390625 10 -0.0390625C9.40827 -0.0390625 8.85178 0.191345 8.43338 0.609894L0.648956 8.39432C0.23056 8.81271 0 9.36905 0 9.96094C0 10.5528 0.23056 11.1092 0.648956 11.5276L8.43338 19.312C8.85178 19.7305 9.40827 19.9609 10 19.9609C10.5917 19.9609 11.1482 19.7305 11.5666 19.312L19.3509 11.5276C19.7694 11.1092 20 10.5528 20 9.96094C20 9.36905 19.7694 8.81271 19.351 8.39432ZM10.6012 13.9815C10.5992 14.0002 10.5965 14.0193 10.5925 14.0381C10.5887 14.0569 10.584 14.0756 10.5785 14.0941C10.573 14.1121 10.5664 14.1304 10.5589 14.148C10.5519 14.1655 10.5434 14.1832 10.5347 14.2C10.5258 14.2168 10.5156 14.2332 10.5051 14.2493C10.4944 14.2653 10.4831 14.2805 10.471 14.2954C10.4588 14.3102 10.4456 14.3246 10.4323 14.3384C10.4187 14.3517 10.4042 14.3649 10.3893 14.377C10.3745 14.3892 10.3592 14.4005 10.3432 14.411C10.3271 14.4215 10.3107 14.4318 10.2939 14.4408C10.2771 14.4493 10.2596 14.4576 10.2419 14.465C10.2243 14.4724 10.206 14.4791 10.188 14.4846C10.1695 14.4901 10.1509 14.4946 10.1321 14.4986C10.1134 14.5021 10.0941 14.5053 10.0754 14.5071C10.0563 14.5091 10.0368 14.5099 10.0175 14.5099C9.99848 14.5099 9.97925 14.5091 9.96002 14.5071C9.94095 14.5053 9.92188 14.5021 9.90296 14.4986C9.88434 14.4946 9.86557 14.4901 9.84757 14.4846C9.8291 14.4791 9.81079 14.4724 9.79324 14.465C9.77554 14.4576 9.7583 14.4493 9.74167 14.4408C9.72473 14.4318 9.70795 14.4215 9.69193 14.411C9.67636 14.4005 9.66065 14.3892 9.64584 14.377C9.63089 14.3649 9.61655 14.3517 9.60312 14.3384C9.58954 14.3246 9.57657 14.3102 9.56406 14.2954C9.55231 14.2805 9.54071 14.2653 9.53003 14.2493C9.5195 14.2332 9.50974 14.2168 9.50073 14.2C9.49188 14.1832 9.48364 14.1655 9.47617 14.148C9.46915 14.1304 9.46243 14.1121 9.45694 14.0941C9.45114 14.0756 9.44641 14.0569 9.4429 14.0381C9.43909 14.0193 9.43634 14.0002 9.43436 13.9815C9.43237 13.9623 9.43131 13.9427 9.43131 13.9236C9.43131 13.9044 9.43237 13.8853 9.43436 13.8661C9.43634 13.847 9.43909 13.8278 9.4429 13.8091C9.44641 13.7903 9.45114 13.7715 9.45694 13.7537C9.46243 13.7352 9.46915 13.7172 9.47617 13.6992C9.48364 13.6816 9.49173 13.6644 9.50073 13.6476C9.50974 13.6308 9.5195 13.614 9.53003 13.5985C9.54071 13.5825 9.55231 13.5667 9.56406 13.5519C9.57657 13.537 9.58954 13.5226 9.60312 13.5089C9.61655 13.4956 9.63089 13.4827 9.64584 13.4702C9.66065 13.4584 9.67621 13.4468 9.69193 13.4361C9.70795 13.4256 9.72473 13.4158 9.74167 13.4068C9.75845 13.3978 9.77554 13.3897 9.79324 13.3823C9.81079 13.3748 9.8291 13.3685 9.84757 13.363C9.86557 13.3572 9.88419 13.3525 9.90296 13.349C9.92172 13.3452 9.94095 13.342 9.96002 13.3405C9.99802 13.3365 10.0371 13.3365 10.0754 13.3405C10.0941 13.342 10.1134 13.3452 10.1321 13.349C10.1508 13.3525 10.1695 13.3572 10.188 13.363C10.206 13.3685 10.2243 13.3748 10.2419 13.3823C10.2596 13.3897 10.2771 13.3978 10.2939 13.4068C10.3107 13.4158 10.3271 13.4256 10.3432 13.4361C10.3592 13.4468 10.3745 13.4584 10.3893 13.4702C10.4042 13.4827 10.4187 13.4956 10.4323 13.5089C10.4456 13.5226 10.459 13.537 10.471 13.5519C10.4831 13.5667 10.4944 13.5825 10.5051 13.5985C10.5156 13.614 10.5257 13.6308 10.5347 13.6476C10.5434 13.6644 10.5519 13.6816 10.5589 13.6992C10.5664 13.7172 10.573 13.7352 10.5785 13.7537C10.584 13.7715 10.5887 13.7903 10.5925 13.8091C10.5965 13.8278 10.5992 13.847 10.6012 13.8661C10.6032 13.8853 10.6039 13.9044 10.6039 13.9236C10.6039 13.9427 10.6032 13.9623 10.6012 13.9815ZM10.6039 12.0865C10.6039 12.4103 10.3415 12.6729 10.0177 12.6729C9.69391 12.6729 9.43131 12.4103 9.43131 12.0865V6.00464C9.43131 5.68085 9.69391 5.41824 10.0177 5.41824C10.3415 5.41824 10.6039 5.68085 10.6039 6.00464V12.0865Z' fill='%23FF0101'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_180_8'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
}

&.loading {
color: #0e8ed3;

&::before {
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2.5c3.393 0 6.474 1.361 8.729 3.564l1.418-1.418a.498.498 0 0 1 .834.216l2 7a.5.5 0 0 1-.618.618l-7-1.999a.5.5 0 0 1-.216-.835L21.6 8.192A9.446 9.446 0 0 0 15 5.5c-5.239 0-9.5 4.261-9.5 9.5 0 5.238 4.261 9.5 9.5 9.5 5.238 0 9.5-4.262 9.5-9.5 0-.248-.018-.492-.038-.736l3.035.875C27.422 21.968 21.846 27.5 15 27.5 8.107 27.5 2.5 21.892 2.5 15 2.5 8.107 8.107 2.5 15 2.5Z' fill='%230e8ed3'/%3E%3C/svg%3E");
animation: rotating 1s linear infinite;
}
}
}

.button {
position: absolute;
top: 18px;
right: 18px;
margin-left: auto;
transition: color 350ms ease;

&:hover {
color: #777777;
}
}

.body {
overflow: hidden;
text-overflow: ellipsis;
padding-top: 4px;
padding-bottom: 6px;
font-size: 14px;
line-height: 20px;
}

@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
24 changes: 24 additions & 0 deletions frontend/src/ui/Alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { cx } from '@/utils';
import { AlertProps } from './Alert.interfaces';
import styles from './Alert.module.scss';
import { Button } from '../Button';
import CrossIcon from '@/assets/icons/cross-icon.svg';

function Alert({ alert, close }: AlertProps) {
const { content, options } = alert;
const { type, title, style, isClosed } = options;

return (
<div className={cx(styles.alert)} style={style}>
<div className={cx(styles.header, styles[type])}>{title || type}</div>
<div className={cx(styles.body)}>{content}</div>
{isClosed && (
<Button variant="icon" className={cx(styles.button)} onClick={close}>
<CrossIcon />
</Button>
)}
</div>
);
}

export { styles as alertStyles, Alert };
1 change: 1 addition & 0 deletions frontend/src/ui/Alert/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Alert';
2 changes: 1 addition & 1 deletion frontend/src/ui/Button/Button.interfaces.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ButtonHTMLAttributes } from 'react';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
label: string;
label?: string;
variant: 'primary' | 'outline' | 'icon' | 'text';
size?: 'large' | 'medium' | 'small';
icon?: string;
Expand Down
1 change: 1 addition & 0 deletions frontend/src/ui/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export * from './DropzoneUploader';
export * from './TimePicker';
export * from './Input';
export * from './InputArea';
export * from './Alert';

0 comments on commit 8649272

Please sign in to comment.