diff --git a/src/containers/dialogs/ScrollDialog/styles.scss b/src/containers/dialogs/ScrollDialog/styles.scss
index 0005eea1..80e9bf6c 100644
--- a/src/containers/dialogs/ScrollDialog/styles.scss
+++ b/src/containers/dialogs/ScrollDialog/styles.scss
@@ -50,6 +50,13 @@
z-index: 2;
}
+.top {
+ .wrap {
+ display: flex;
+ align-items: flex-end;
+ }
+}
+
.bottom {
bottom: 15px;
top: auto;
@@ -94,5 +101,22 @@
.children {
background: $content_bg;
- radius: $radius;
+ border-radius: $radius;
+}
+
+.top_cap {
+ height: $radius;
+ background: $content_bg;
+ border-radius: $radius $radius 0 0;
+ flex: 1;
+ position: relative;
+
+ &::after {
+ position: absolute;
+ content: " ";
+ width: 100%;
+ height: $gap;
+ background: linear-gradient($content_bg, transparentize($content_bg, 1));
+ bottom: -$gap;
+ }
}
diff --git a/src/containers/examples/HorizontalExample/index.tsx b/src/containers/examples/HorizontalExample/index.tsx
index 520b4cf4..45ce0935 100644
--- a/src/containers/examples/HorizontalExample/index.tsx
+++ b/src/containers/examples/HorizontalExample/index.tsx
@@ -1,12 +1,12 @@
-import React, { FC } from "react";
-import { Card } from "~/components/containers/Card";
-import * as styles from "./styles.scss";
-import {Padder} from "~/components/containers/Padder";
-import {Group} from "~/components/containers/Group";
-import {InputText} from "~/components/input/InputText";
-import {Button} from "~/components/input/Button";
-import {Filler} from "~/components/containers/Filler";
-import {Icon} from "~/components/input/Icon";
+import React, { FC } from 'react';
+import { Card } from '~/components/containers/Card';
+import * as styles from './styles.scss';
+import { Padder } from '~/components/containers/Padder';
+import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { Button } from '~/components/input/Button';
+import { Filler } from '~/components/containers/Filler';
+import { Icon } from '~/components/input/Icon';
interface IProps {}
diff --git a/src/redux/modal/constants.ts b/src/redux/modal/constants.ts
index 204e1d78..eacf9b11 100644
--- a/src/redux/modal/constants.ts
+++ b/src/redux/modal/constants.ts
@@ -1,22 +1,22 @@
-import { ValueOf } from "~/redux/types";
-import { HorizontalExample } from "~/containers/examples/HorizontalExample";
-import { ExampleDialog } from "~/containers/dialogs/ExampleDialog";
-import { LoginDialog } from "~/containers/dialogs/LoginDialog";
+import { ValueOf } from '~/redux/types';
+import { HorizontalExample } from '~/containers/examples/HorizontalExample';
+import { ExampleDialog } from '~/containers/dialogs/ExampleDialog';
+import { LoginDialog } from '~/containers/dialogs/LoginDialog';
export const MODAL_ACTIONS = {
- SET_SHOWN: "MODAL.SET_SHOWN",
- SET_DIALOG: "SET_DIALOG",
- SHOW_DIALOG: "SHOW_DIALOG"
+ SET_SHOWN: 'MODAL.SET_SHOWN',
+ SET_DIALOG: 'SET_DIALOG',
+ SHOW_DIALOG: 'SHOW_DIALOG',
};
export const DIALOGS = {
- TEST: "TEST",
- LOGIN: "LOGIN"
+ TEST: 'TEST',
+ LOGIN: 'LOGIN',
};
export const DIALOG_CONTENT = {
[DIALOGS.TEST]: ExampleDialog,
- [DIALOGS.LOGIN]: LoginDialog
+ [DIALOGS.LOGIN]: LoginDialog,
};
export interface IDialogProps {
diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts
index 3bbf6b41..f6b830c1 100644
--- a/src/redux/modal/reducer.ts
+++ b/src/redux/modal/reducer.ts
@@ -1,7 +1,7 @@
-import { MODAL_HANDLERS } from "~/redux/modal/handlers";
-import { createReducer } from "~/utils/reducer";
-import { DIALOGS } from "~/redux/modal/constants";
-import { ValueOf } from "~/redux/types";
+import { MODAL_HANDLERS } from '~/redux/modal/handlers';
+import { createReducer } from '~/utils/reducer';
+import { DIALOGS } from '~/redux/modal/constants';
+import { ValueOf } from '~/redux/types';
export interface IModalState {
is_shown: boolean;
@@ -10,7 +10,7 @@ export interface IModalState {
const INITIAL_STATE: IModalState = {
is_shown: true,
- dialog: DIALOGS.LOGIN
+ dialog: DIALOGS.LOGIN,
};
export default createReducer(INITIAL_STATE, MODAL_HANDLERS);
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 42b5e01a..6aa2ca05 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -1,10 +1,10 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
-import { DIALOGS } from "~/redux/modal/constants";
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DIALOGS } from '~/redux/modal/constants';
-export type ITag = {
+export interface ITag {
title: string;
- feature?: "red" | "blue" | "green" | "olive" | "black";
-};
+ feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
+}
export type IInputTextProps = DetailedHTMLProps<
InputHTMLAttributes,
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 1f26482c..17e5f698 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -9,14 +9,15 @@ body {
min-height: 100vh;
background: url("http://vault48.org/pixmaps/texture.jpg");
color: $main_text_color;
- font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+ sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
fill: white;
stroke: white;
&::before {
- content: '';
+ content: "";
position: absolute;
height: 400px;
width: 100%;
@@ -43,9 +44,15 @@ body {
:global(.spc) {
height: $spc;
- &:global(.double) { height: $spc * 2; }
- &:global(.quadro) { height: $spc * 4; }
- &:global(.sixty) { height: $spc * 6; }
+ &:global(.double) {
+ height: $spc * 2;
+ }
+ &:global(.quadro) {
+ height: $spc * 4;
+ }
+ &:global(.sixty) {
+ height: $spc * 6;
+ }
}
:global(.padded) {
@@ -62,7 +69,6 @@ body {
// background: $content_bg_color;
}
-
:global(.head_container) {
//background: $main_bg_color;
}
@@ -71,3 +77,6 @@ body {
height: 40px;
}
+:global(h2) {
+ font: $font_24_bold;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 44ffe0cd..37ac0fe2 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,4 +1,4 @@
-@import 'colors';
+@import "colors";
$cell: 256px;
$content_width: 1100px;
@@ -25,7 +25,9 @@ $medium: 500;
$light: 300;
$extra_light: 200;
-$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+ "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+ "Noto Color Emoji";
$font_48_semibold: $semibold 48px $font;
$font_24_bold: $bold 24px $font;
@@ -54,7 +56,7 @@ $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
$comment_shadow: $shadow_depth_2;
-$node_shadow: transparentize(black, 0.8) 1px 2px;
+$node_shadow: transparentize(black, 0.8) 1px 2px;
$tag_height: 22px;
@@ -63,18 +65,15 @@ $input_shadow_error: inset $red 0 0 0 1px;
$input_shadow_filled: $input_shadow;
@mixin outer_shadow() {
- box-shadow: inset transparentize(white, 0.95) 0 1px,
- transparentize(black, 0.8) 0 3px;
+ box-shadow: inset transparentize(white, 0.95) 0 1px, transparentize(black, 0.8) 0 3px;
}
@mixin inner_shadow() {
- box-shadow: inset transparentize(white, 0.95) 0 -1px,
- inset transparentize(black, 0.5) 0 1px;
+ box-shadow: inset transparentize(white, 0.95) 0 -1px, inset transparentize(black, 0.5) 0 1px;
}
@mixin input_shadow() {
- box-shadow: inset transparentize(white, 0.92) 0 -1px,
- inset transparentize(black, 0.8) 0 1px;
+ box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
}
@mixin modal_mixin() {
@@ -90,7 +89,7 @@ $input_shadow_filled: $input_shadow;
position: $position;
&::after {
- content: ' ';
+ content: " ";
position: absolute;
bottom: 0;
left: 0;
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index f66d9442..3f698660 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -1,24 +1,24 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from 'react';
export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
const onEscape = useCallback(
event => {
- if (event.key !== "Escape") return;
+ if (event.key !== 'Escape') return;
if (
ignore_inputs &&
- (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA")
+ (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
)
return;
onRequestClose();
},
- [onRequestClose]
+ [onRequestClose],
);
useEffect(() => {
- window.addEventListener("keyup", onEscape);
+ window.addEventListener('keyup', onEscape);
return () => {
- window.removeEventListener("keyup", onEscape);
+ window.removeEventListener('keyup', onEscape);
};
}, [onEscape]);
};
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 00000000..7718f5f7
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,28 @@
+{
+ "defaultSeverity": "error",
+ "extends": ["tslint-config-airbnb", "tslint-react", "tslint:recommended", "tslint-react-hooks"],
+ "jsRules": {},
+ "rules": {
+ "quotemark": [true, "single", "jsx-double"],
+ "react-hooks-nesting": "error",
+ "ordered-imports": false,
+ "import-name": false,
+ "object-literal-sort-keys": false,
+ "no-console": [true, "warning"],
+ "arrow-parens": [true, "ban-single-arg-parens"],
+ "ter-arrow-parens": [true, "as-needed"],
+ "curly": false,
+ "variable-name": [true, "ban-keywords", "allow-snake-case", "allow-pascal-case"],
+ "no-var-requires": false,
+ "no-nested-ternary": true,
+ "jsx-key": true,
+ "jsx-self-close": true,
+ "jsx-wrap-multiline": true,
+ "jsx-alignment": true,
+ "jsx-curly-spacing": [true, "never"],
+ "jsx-equals-spacing": [true, "never"],
+ "jsx-no-multiline-js": false,
+ "jsx-boolean-value": false
+ },
+ "rulesDirectory": []
+}