diff --git a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.css b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.css deleted file mode 100644 index 979102d7..00000000 --- a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.css +++ /dev/null @@ -1,15 +0,0 @@ -.comment-form__rss-dropdown { - text-align: left; -} - -.comment-form__rss-dropdown__link { - font-weight: 700; - white-space: nowrap; - text-decoration: none; - cursor: pointer; - color: var(--color9); - - &:hover { - color: var(--color33); - } -} diff --git a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.test.tsx b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.test.tsx index 4c0a0861..5e650742 100644 --- a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.test.tsx +++ b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.test.tsx @@ -2,6 +2,8 @@ import { shallow } from 'enzyme'; import { SubscribeByRSS, createSubscribeUrl } from '.'; +import styles from './subscribe-by-rss.module.css'; + jest.mock('react-redux', () => ({ useSelector: jest.fn((fn) => fn({ theme: 'light' })), })); @@ -21,14 +23,12 @@ describe('', () => { it('should be render links in dropdown', () => { const wrapper = shallow(); - expect(wrapper.find('.comment-form__rss-dropdown__link')).toHaveLength(3); + expect(wrapper.find(`.${styles.link}`)).toHaveLength(3); }); it('should have userId in replies link', () => { const wrapper = shallow(); - expect(wrapper.find('.comment-form__rss-dropdown__link').at(2).prop('href')).toBe( - createSubscribeUrl('reply', '&user=user-1') - ); + expect(wrapper.find(`.${styles.link}`).at(2).prop('href')).toBe(createSubscribeUrl('reply', '&user=user-1')); }); }); diff --git a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.tsx b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.tsx index 4e90e872..529d7639 100644 --- a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.tsx +++ b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.tsx @@ -7,6 +7,8 @@ import { siteId, url } from 'common/settings'; import { BASE_URL, API_BASE } from 'common/constants'; import { Dropdown, DropdownItem } from 'components/dropdown'; +import styles from './subscribe-by-rss.module.css'; + export const createSubscribeUrl = (type: 'post' | 'site' | 'reply', urlParams = '') => `${BASE_URL}${API_BASE}/rss/${type}?site=${siteId}${urlParams}`; @@ -48,14 +50,13 @@ export const SubscribeByRSS: FunctionComponent<{ userId: string | null }> = ({ u return ( {items.map(([href, label]) => ( - + {label} diff --git a/frontend/apps/remark42/app/components/comment-form/__rss-link/comment-form__rss-link.css b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/subscribe-by-rss.module.css similarity index 77% rename from frontend/apps/remark42/app/components/comment-form/__rss-link/comment-form__rss-link.css rename to frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/subscribe-by-rss.module.css index 0c906976..edda7bb4 100644 --- a/frontend/apps/remark42/app/components/comment-form/__rss-link/comment-form__rss-link.css +++ b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-rss/subscribe-by-rss.module.css @@ -1,4 +1,8 @@ -.comment-form__rss-link { +.rssDropdown { + text-align: left; +} + +.link { font-weight: 700; white-space: nowrap; text-decoration: none; diff --git a/frontend/apps/remark42/app/components/comment-form/index.ts b/frontend/apps/remark42/app/components/comment-form/index.ts index b4b2906a..72ec4cc4 100644 --- a/frontend/apps/remark42/app/components/comment-form/index.ts +++ b/frontend/apps/remark42/app/components/comment-form/index.ts @@ -14,12 +14,10 @@ import './__field-wrapper/comment-form__field-wrapper.css'; import './__preview/comment-form__preview.css'; import './__preview-wrapper/comment-form__preview-wrapper.css'; import './__rss/comment-form__rss.css'; -import './__rss-link/comment-form__rss-link.css'; import './__markdown/comment-form__markdown.css'; import './__markdown-link/comment-form__markdown-link.css'; import './__markdown-toolbar/comment-form__markdown-toolbar.css'; import './__subscribe-by-email/comment-form__subscribe-by-email.css'; -import './__subscribe-by-rss/comment-form__subscribe-by-rss.css'; import './_theme/_dark/comment-form_theme_dark.css'; import './_theme/_light/comment-form_theme_light.css'; diff --git a/frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.css b/frontend/apps/remark42/app/components/dropdown/__item/dropdown-item.module.css similarity index 71% rename from frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.css rename to frontend/apps/remark42/app/components/dropdown/__item/dropdown-item.module.css index f7db19d7..23c2c1e2 100644 --- a/frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.css +++ b/frontend/apps/remark42/app/components/dropdown/__item/dropdown-item.module.css @@ -1,14 +1,14 @@ -.dropdown__item { +.root { & > button, & > a, - & > .dropdown { + & > :global(.dropdown) { display: inline-block; text-align: left; padding: 5px; } } -.dropdown__item_separator { +.separator { border-bottom: 1px solid var(--color15); margin-bottom: 5px; } diff --git a/frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.tsx b/frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.tsx index 088e8254..c588df3c 100644 --- a/frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.tsx +++ b/frontend/apps/remark42/app/components/dropdown/__item/dropdown__item.tsx @@ -1,10 +1,12 @@ +import clsx from 'clsx'; import { h, JSX, FunctionComponent } from 'preact'; -import b from 'bem-react-helper'; + +import styles from './dropdown-item.module.css'; export interface Props extends JSX.HTMLAttributes { separator?: boolean; } export const DropdownItem: FunctionComponent = ({ children, separator = false }) => ( -
{children}
+
{children}
); diff --git a/frontend/apps/remark42/app/components/dropdown/index.ts b/frontend/apps/remark42/app/components/dropdown/index.ts index ec3f61d1..25912f97 100644 --- a/frontend/apps/remark42/app/components/dropdown/index.ts +++ b/frontend/apps/remark42/app/components/dropdown/index.ts @@ -1,7 +1,6 @@ import './dropdown.css'; import './_active/dropdown_active.css'; -import './__item/dropdown__item.css'; import './__items/dropdown__items.css'; import './__title/dropdown__title.css'; import './__content/dropdown__content.css'; diff --git a/frontend/apps/remark42/app/components/list-comments/index.ts b/frontend/apps/remark42/app/components/list-comments/index.ts index 2a3996ec..ed2b0f97 100644 --- a/frontend/apps/remark42/app/components/list-comments/index.ts +++ b/frontend/apps/remark42/app/components/list-comments/index.ts @@ -1,3 +1 @@ -import './__item/list-comments__item.css'; - export * from './list-comments'; diff --git a/frontend/apps/remark42/app/components/list-comments/__item/list-comments__item.css b/frontend/apps/remark42/app/components/list-comments/list-comments.module.css similarity index 66% rename from frontend/apps/remark42/app/components/list-comments/__item/list-comments__item.css rename to frontend/apps/remark42/app/components/list-comments/list-comments.module.css index ab4412d3..f1abde49 100644 --- a/frontend/apps/remark42/app/components/list-comments/__item/list-comments__item.css +++ b/frontend/apps/remark42/app/components/list-comments/list-comments.module.css @@ -1,4 +1,4 @@ -.list-comments__item { +.item { &:last-child { margin-bottom: 0; } diff --git a/frontend/apps/remark42/app/components/list-comments/list-comments.tsx b/frontend/apps/remark42/app/components/list-comments/list-comments.tsx index 4c23492a..633c17b4 100644 --- a/frontend/apps/remark42/app/components/list-comments/list-comments.tsx +++ b/frontend/apps/remark42/app/components/list-comments/list-comments.tsx @@ -4,6 +4,8 @@ import { useIntl } from 'react-intl'; import type { Comment as CommentType } from 'common/types'; import { Comment } from 'components/comment'; +import styles from './list-comments.module.css'; + type Props = { comments: CommentType[]; }; @@ -12,7 +14,7 @@ export function ListComments({ comments = [] }: Props) { const intl = useIntl(); return ( -
+
{comments.map((comment) => ( { const hiddenUsersList = Object.values(this.state.hiddenUsers); const intl = this.props.intl; return ( -
-
+
+

{!hiddenUsersList.length && ( -

+

)} {!!hiddenUsersList.length && ( -
    +
      {hiddenUsersList.map((user) => { const isUserUnhidden = unhiddenUsers.includes(user.id); return ( -
    • - +
    • + {user.name ? user.name : } {this.__isUserHidden(user) ? ( - this.unhide(user))}> + this.unhide(user))}> ) : ( - this.hide(user))}> + this.hide(user))}> )}
      - + id: {user.id}
      @@ -146,50 +140,43 @@ class SettingsComponent extends Component { )}
{user && user.admin && ( -
+

{!blockedUsers.length && ( -

+

)} {!!blockedUsers.length && ( -
    +
      {blockedUsers.map((user) => { const isUserUnblocked = unblockedUsers.includes(user.id); return ( -
    • - +
    • + {user.name ? user.name : } - + {' '} {isUserUnblocked && ( - this.block(user))} className="settings__action"> + this.block(user))} className={styles.action}> )} {!isUserUnblocked && ( - this.unblock(user))} className="settings__action"> + this.unblock(user))} className={styles.action}> )}
      - + id: {user.id}