diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index 3aa61676..bf3670d0 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -25,39 +25,37 @@ $big: 1.2;
z-index: 40;
}
- &:global(.big) {
- height: $tag_height * $big;
- font: $font_16_semibold;
- border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
-
- .hole {
- width: $tag_height * $big;
- height: $tag_height * $big;
- }
- }
-
- &:global(.is_hoverable) {
+ &.hoverable {
cursor: pointer;
}
- &:global(.is_editing) {
+ &.editing {
cursor: pointer;
- background-color: lighten($content_bg_light, 10%);
+ background-color: $content_bg;
}
- &:global(.red) {
+ &.input {
+ color: transparent !important;
+ min-width: 100px;
+ }
+
+ &.clickable {
+ cursor: pointer;
+ }
+
+ &.color-danger {
background: $danger_gradient;
}
- &:global(.blue) {
+ &.color-info {
background: $info_gradient;
}
- &:global(.green) {
+ &.color-primary {
background: $primary_gradient;
}
- &:global(.black) {
+ &.color-black {
background: transparentize(black, 0.7);
box-shadow: none;
color: $gray_75;
@@ -68,13 +66,15 @@ $big: 1.2;
}
}
- &:global(.input) {
- color: transparent !important;
- min-width: 100px;
- }
+ &.size-big {
+ height: $tag_height * $big;
+ font: $font_16_semibold;
+ border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
- &:global(.clickable) {
- cursor: pointer;
+ .hole {
+ width: $tag_height * $big;
+ height: $tag_height * $big;
+ }
}
input {
@@ -124,7 +124,8 @@ $big: 1.2;
}
button.delete {
- box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
+ box-shadow: inset transparentize(white, 0.95) 1px 0,
+ transparentize(black, 0.7) -1px 0;
width: 24px;
height: $tag_height;
z-index: 24;
diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss
index 0d0ef597..33f225bc 100644
--- a/src/containers/main/Header/styles.module.scss
+++ b/src/containers/main/Header/styles.module.scss
@@ -86,7 +86,7 @@
white-space: nowrap;
&:hover {
- color: $color_danger;
+ color: $color_link;
}
&::before {
@@ -109,7 +109,7 @@
width: 6px;
height: 6px;
border-radius: 4px;
- background: lighten($color_danger, 10%);
+ background: $color_link;
right: 12px;
top: 6px;
transition: opacity 0.5s;
@@ -123,11 +123,11 @@
}
&.lab::after {
- background: lighten($color_lab, 10%);
+ background: $color_lab;
}
&.boris::after {
- background: lighten($color_primary, 10%);
+ background: $color_primary;
}
@include tablet {
diff --git a/src/containers/tags/TagInput/index.tsx b/src/containers/tags/TagInput/index.tsx
index 69fd59fc..d667d97a 100644
--- a/src/containers/tags/TagInput/index.tsx
+++ b/src/containers/tags/TagInput/index.tsx
@@ -19,13 +19,8 @@ const placeholder = 'Добавить';
const prepareInput = (input: string): string[] => {
return input
.split(',')
- .map((title: string) =>
- title
- .trim()
- .substring(0, 64)
- .toLowerCase(),
- )
- .filter(el => el.length > 0);
+ .map((title: string) => title.trim().substring(0, 64).toLowerCase())
+ .filter((el) => el.length > 0);
};
interface IProps {
@@ -88,7 +83,7 @@ const TagInput: FC
= ({ exclude, onAppend, onClearTag, onSubmit }) => {
const onFocus = useCallback(() => setFocused(true), []);
const onBlur = useCallback(
- event => {
+ (event) => {
if (!wrapper.current || !ref.current) {
return;
}
@@ -122,9 +117,7 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => {
[onAppend, setInput],
);
- const feature = useMemo(() => (input?.substr(0, 1) === '/' ? 'green' : ''), [
- input,
- ]);
+ const isAlbumTag = useMemo(() => input?.substr(0, 1) === '/', [input]);
useEffect(() => {
if (!focused) return;
@@ -138,7 +131,7 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => {