update

src/ts/components/TimeZoneMap/components/Point.tsx

@@ -1,24 +1,31 @@
 import React from 'react';
 
-import { getPositionForTimeZone, getColorForTimeZone } from '../helpers';
+import {
+  getPositionForTimeZone,
+  getColorForTimeZone,
+  getSizeForTimeZone,
+} from '../helpers';
 
 import style from '../styles/index.module.scss';
 
 interface PointProps {
   timezone: string;
-  authors: string[]
+  authors: string[];
+  maxValue: number;
 }
 
 function Point({
   timezone,
   authors,
+  maxValue,
 }: PointProps): React.ReactElement | null {
   const position = getPositionForTimeZone(timezone);
   const color = getColorForTimeZone(authors);
+  const size = getSizeForTimeZone(authors.length, maxValue);
   return (
     <div
       title={authors.join(', ')}
-      className={`${style.time_zone_map_point} ${position} ${color}`}
+      className={`${style.time_zone_map_point} ${position} ${color} ${size}`}
     >
       {authors.length}
     </div>

src/ts/components/TimeZoneMap/helpers/index.ts

@@ -68,3 +68,9 @@ export function getColorForTimeZone(authors: string[]) {
     ? style.time_zone_map_point_dismissed
     : '';
 }
+
+export function getSizeForTimeZone(value: number, max: number) {
+  if (value < (max * 0.3) || max <= 10) return style.time_zone_map_point_s;
+  if (value < (max * 0.7) || max <= 100) return style.time_zone_map_point_m;
+  return style.time_zone_map_point_l;
+}

src/ts/components/TimeZoneMap/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
+import { IPagination } from 'ts/interfaces/Pagination';
 import { getGroupsByTimeZone } from './helpers';
 import Point from './components/Point';
 import style from './styles/index.module.scss';
+import { getMaxByLength } from 'ts/pages/Common/helpers/getMax';
 
 interface TimeZoneMapProps {
   authors: any[]
@@ -12,11 +14,14 @@ function TimeZoneMap({
   authors = [],
 }: TimeZoneMapProps): React.ReactElement | null {
   const groups = getGroupsByTimeZone(authors);
-  const points = Object.entries(groups).map((item: any) => (
+  const content = Object.entries(groups);
+  const max = getMaxByLength({ content } as IPagination<any>, '1');
+  const points = content.map((item: any) => (
     <Point
       key={item[0]}
       timezone={item[0]}
       authors={item[1]}
+      maxValue={max}
     />
   ));
 

src/ts/components/TimeZoneMap/styles/index.module.scss

@@ -41,7 +41,7 @@
     box-shadow: 0 0 5px var(--color-white), 0 0 5px var(--color-white), 0 0 15px var(--color-white);
 
     color: var(--color-white);
-    border-radius: var(--border-radius-l);
+    border-radius: 32px;
     background-color: var(--color-black);
   }
 }
@@ -84,4 +84,12 @@
   &_hide { display: none }
   &_active { background-color: var(--color-first) }
   &_dismissed { background-color: var(--color-second) }
+
+  &_s { --temp-size: var(--space-xl); padding-top: 0.5px; }
+  &_m { --temp-size: var(--space-xxl); margin: -3px; }
+  &_l { --temp-size: 32px; margin: -8px; }
+
+  width: var(--temp-size);
+  height: var(--temp-size);
+  line-height: var(--temp-size);
 }