changed profile stats appearance

src/components/common/StatsRow/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import styles from './styles.module.scss';
+
+const StatsRow: FC<{ isLoading: boolean; label: string }> = ({ isLoading, label, children }) => (
+  <li className={styles.row}>
+    {isLoading ? (
+      <>
+        <Placeholder active={isLoading} loading className={styles.label} />
+        <Placeholder active={isLoading} loading className={styles.value} width="24px" />
+      </>
+    ) : (
+      <>
+        <div className={styles.label}>{label}</div>
+        <div className={styles.value}>{children}</div>
+      </>
+    )}
+  </li>
+);
+
+export { StatsRow };

src/components/common/StatsRow/styles.module.scss

@@ -0,0 +1,23 @@
+@import '~/styles/variables.scss';
+
+.row {
+  @include row_shadow;
+  color: #aaaaaa;
+  display: flex;
+  flex-direction: row;
+  font: $font_12_regular;
+  line-height: 24px;
+  text-transform: uppercase;
+}
+
+.label {
+  flex: 1;
+  margin-right: $gap;
+}
+
+.value {
+  float: right;
+  color: white;
+  font: $font_12_semibold;
+  line-height: 24px;
+}

src/components/common/SubTitle/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+interface Props extends DivProps {
+  isLoading?: boolean;
+}
+
+const SubTitle: FC<Props> = ({ isLoading, children, ...rest }) => (
+  <div {...rest} className={classNames(styles.title, rest.className)}>
+    <Placeholder active={isLoading} loading>
+      {children}
+    </Placeholder>
+  </div>
+);
+
+export { SubTitle };

src/components/common/SubTitle/styles.module.scss

@@ -0,0 +1,7 @@
+@import "~/styles/variables.scss";
+
+.title {
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  opacity: 0.3;
+}