style(comments): header / footer redesign (#1062)

* refactor(comments): isSolution & isAuthorUpvoted concept

* chore(comments): adjust styles

* chore(comments): adjust styles wip

* chore(comments): adjust styles wip

* chore(comments): replies toggler concept

* chore(comments): adjust toggler style

* refactor(comments): list header icons

* refactor(comments): list footer icons

Author: mydearxym

public/icons/static/article/author_upvoted.svg

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import type { TSpace } from '@/spec'
 
 export const Br = styled.div<TSpace>`
-  margin-top: ${({ top }) => `${top}px` || 0};
-  margin-bottom: ${({ bottom }) => `${bottom}px` || 0};
+  margin-top: ${({ top }) => `${top || 0}px`};
+  margin-bottom: ${({ bottom }) => `${bottom || 0}px`};
 `
 export const Space = styled.span<TSpace>`
   margin-left: ${({ left }) => `${left}px` || 0};

public/icons/static/article/comment-reply-mode.svg

@@ -0,0 +1,100 @@
+/*
+ *
+ * IconSwitcher
+ *
+ */
+
+import React from 'react'
+import { findIndex, propEq } from 'ramda'
+
+import { buildLog, nilOrEmpty } from '@/utils'
+import Tooltip from '@/components/Tooltip'
+
+import {
+  Wrapper,
+  AccessZone,
+  Tabs,
+  DescText,
+  Icon,
+  Label,
+  Slider,
+} from './styles/icon_selector'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:IconSwitcher:index')
+
+type TItem = {
+  iconSrc?: string
+  localIcon?: React.ReactNode
+  key: string
+  desc?: string
+}
+
+type TIconComp = {
+  item: TItem
+  activeKey: string
+}
+
+type TTabLabel = {
+  item: TItem
+  activeKey: string
+  onChange: (item: TItem) => void
+}
+
+const TabLabel: React.FC<TTabLabel> = ({ item, activeKey, onChange }) => {
+  if (!item.desc) {
+    return (
+      <Label onClick={() => onChange(item)}>
+        {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
+        {!nilOrEmpty(item.iconSrc) && (
+          <Icon src={item.iconSrc} checked={activeKey === item.key} />
+        )}
+      </Label>
+    )
+  }
+
+  return (
+    <Tooltip
+      content={<DescText>{item.desc}</DescText>}
+      placement="bottom"
+      delay={500}
+      noPadding
+    >
+      <Label onClick={() => onChange(item)}>
+        {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
+        {!nilOrEmpty(item.iconSrc) && (
+          <Icon src={item.iconSrc} checked={activeKey === item.key} />
+        )}
+      </Label>
+    </Tooltip>
+  )
+}
+
+type TProps = {
+  items: TItem[]
+  activeKey: string
+  onChange: (item: TItem) => void
+}
+
+const IconSwitcher: React.FC<TProps> = ({ items, activeKey, onChange }) => {
+  const slideIndex = findIndex(propEq('key', activeKey), items)
+
+  return (
+    <Wrapper testid="selectors">
+      <AccessZone />
+      <Tabs>
+        {items.map((item) => (
+          <TabLabel
+            key={item.key}
+            item={item}
+            activeKey={activeKey}
+            onChange={onChange}
+          />
+        ))}
+        <Slider index={slideIndex} />
+      </Tabs>
+    </Wrapper>
+  )
+}
+
+export default React.memo(IconSwitcher)