diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index a7f3c6b5..85deb8f5 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -8,7 +8,7 @@ type IButtonProps = DetailedHTMLProps< ButtonHTMLAttributes, HTMLButtonElement > & { - size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro'; + size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small'; iconLeft?: IIcon; iconRight?: IIcon; seamless?: boolean; @@ -19,6 +19,7 @@ type IButtonProps = DetailedHTMLProps< non_submitting?: boolean; is_loading?: boolean; stretchy?: boolean; + iconOnly?: boolean; }; export const Button: FC = ({ @@ -36,6 +37,7 @@ export const Button: FC = ({ title, stretchy, disabled, + iconOnly, ...props }) => createElement( @@ -49,7 +51,7 @@ export const Button: FC = ({ disabled, is_loading, stretchy, - icon: (iconLeft || iconRight) && !title && !children, + icon: ((iconLeft || iconRight) && !title && !children) || iconOnly, has_icon_left: !!iconLeft, has_icon_right: !!iconRight, }), @@ -57,7 +59,7 @@ export const Button: FC = ({ }, [ iconLeft && , - title ? {title} : (children && {children}) || null, + title ? {title} : children || null, iconRight && , ] ); diff --git a/src/components/input/Button/styles.scss b/src/components/input/Button/styles.scss index 92c811b5..19eaeb6a 100644 --- a/src/components/input/Button/styles.scss +++ b/src/components/input/Button/styles.scss @@ -27,10 +27,12 @@ stroke: white; user-select: none; - display: inline-flex; + display: flex; align-items: center; justify-content: center; + position: relative; + filter: grayscale(0); transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s; @@ -38,6 +40,22 @@ @include outer_shadow(); + input { + color: red; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + bottom: 0; + opacity: 0; + } + + svg { + fill: white; + stroke: white; + } + span { flex: 1; } @@ -89,14 +107,22 @@ &:global(.disabled), &:global(.grey) { - opacity: 0.3; - background: lighten(black, 2%); + background: transparentize(white, 0.9); + // background: lighten(white, 0.5); // filter: grayscale(100%); } + &:global(.disabled) { + opacity: 0.3; + } + &:global(.icon) { padding-left: 10px; padding-right: 10px; + + svg { + margin: 0; + } } &:global(.is_loading) { @@ -138,6 +164,15 @@ height: 28px; border-radius: $radius / 2; } +.small { + height: 32px; + // border-radius: $radius / 2; + + svg { + width: 24px; + height: 24px; + } +} .normal { height: 38px; } diff --git a/src/components/input/ButtonGroup/index.tsx b/src/components/input/ButtonGroup/index.tsx new file mode 100644 index 00000000..72c993f3 --- /dev/null +++ b/src/components/input/ButtonGroup/index.tsx @@ -0,0 +1,6 @@ +import React, { HTMLAttributes } from 'react'; +import * as styles from './styles.scss'; + +type IProps = HTMLAttributes & {}; + +export const ButtonGroup = ({ children }: IProps) =>
{children}
; diff --git a/src/components/input/ButtonGroup/styles.scss b/src/components/input/ButtonGroup/styles.scss new file mode 100644 index 00000000..fdfb5568 --- /dev/null +++ b/src/components/input/ButtonGroup/styles.scss @@ -0,0 +1,21 @@ +.wrap { + display: flex; + flex-direction: row; + + & > * { + border-radius: 0; + box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0; + + &:last-child { + border-radius: 0 $input_radius $input_radius 0; + + &.small { + border-radius: 0 3px 3px 0; + } + } + + &:first-child { + border-radius: $input_radius 0 0 $input_radius; + } + } +} diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx index 82d9f7c9..10a147f0 100644 --- a/src/components/node/CommentForm/index.tsx +++ b/src/components/node/CommentForm/index.tsx @@ -19,6 +19,7 @@ import { IState } from '~/redux/store'; import { getFileType } from '~/utils/uploader'; import { selectUser } from '~/redux/auth/selectors'; import { getURL } from '~/utils/dom'; +import { ButtonGroup } from '~/components/input/ButtonGroup'; const mapStateToProps = (state: IState) => ({ node: selectNode(state), @@ -133,14 +134,21 @@ const CommentFormUnconnected: FC = ({ - - + + + + + {is_sending_comment && } - diff --git a/src/components/node/CommentForm/styles.scss b/src/components/node/CommentForm/styles.scss index 622ed74a..b983bd19 100644 --- a/src/components/node/CommentForm/styles.scss +++ b/src/components/node/CommentForm/styles.scss @@ -19,10 +19,4 @@ padding: $gap / 2; border-radius: 0 0 $radius $radius; flex-wrap: wrap; - - svg { - fill: transparentize(white, 0.9); - } - - // @include outer_shadow(); } diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index c3e53458..d49ddf09 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -79,6 +79,16 @@ const Sprites: FC<{}> = () => ( + + + + + + + + + + ); diff --git a/src/styles/global.scss b/src/styles/global.scss index 12c4cbeb..3ab58dc1 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,4 +1,4 @@ -@import "~raleway-cyrillic/raleway.css"; +@import '~raleway-cyrillic/raleway.css'; html { min-height: 100vh; @@ -7,24 +7,23 @@ html { body { background: darken($main_bg_color, 12%); min-height: 100vh; - background: url("http://vault48.org/pixmaps/texture.jpg"); + 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: $font_16_regular; -webkit-font-smoothing: antialiased; - font-size: 16px; + // font-size: 16px; fill: white; stroke: white; &::before { - content: ""; + content: ''; position: absolute; height: 400px; width: 100%; top: 0; left: 0; z-index: -1; - background: url("http://vault48.org/pixmaps/texture_alt.jpg"); + background: url('http://vault48.org/pixmaps/texture_alt.jpg'); pointer-events: none; } } @@ -80,4 +79,3 @@ body { :global(h2) { font: $font_24_bold; } -