add new svg icons to each button

src/client/js/components/TopOfTableContents.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
@@ -14,20 +14,20 @@ const TopOfTableContents = (props) => {
       {/* TODO GW-3253 add four contents */}
       <div className="liker-and-seenusers d-flex align-items-end pb-1">
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
             <defs>
-              <style>.cls-1{{ fill: none }}</style>
+              <style>
+                .cls-1{{ fill: none }}
+              </style>
             </defs>
             <g id="レイヤー_2" data-name="レイヤー 2">
               <g id="レイヤー_1-2" data-name="レイヤー 1">
-                <g id="グループ_680" data-name="グループ 680">
-                  <rect id="長方形_202" data-name="長方形 202" className="cls-1" width="35" height="35" rx="2" />
-                  <g id="グループ_678" data-name="グループ 678">
-                    <path d="M25.22,11.25H9.63a.75.75,0,0,1,0-1.5H25.22a.75.75,0,0,1,0,1.5Z" />
-                    <path d="M24.11,15.71H9.63a.75.75,0,0,1,0-1.5H24.11a.75.75,0,0,1,0,1.5Z" />
-                    <path d="M20.77,20.16H9.63a.75.75,0,1,1,0-1.5H20.77a.75.75,0,0,1,0,1.5Z" />
-                    <path d="M22.75,24.61H9.63a.75.75,0,0,1,0-1.5H22.75a.75.75,0,0,1,0,1.5Z" />
-                  </g>
+                <rect className="cls-1" width="14" height="14" />
+                <g id="グループ_678" data-name="グループ 678">
+                  <path d="M12.63,2.72H1.37a.54.54,0,0,1,0-1.08H12.63a.54.54,0,0,1,0,1.08Z" />
+                  <path d="M11.82,5.94H1.37a.55.55,0,0,1,0-1.09H11.82a.55.55,0,1,1,0,1.09Z" />
+                  <path d="M9.41,9.15h-8a.54.54,0,0,1,0-1.08h8a.54.54,0,0,1,0,1.08Z" />
+                  <path d="M10.84,12.36H1.37a.54.54,0,1,1,0-1.08h9.47a.54.54,0,1,1,0,1.08Z" />
                 </g>
               </g>
             </g>
@@ -35,64 +35,81 @@ const TopOfTableContents = (props) => {
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
             <defs>
-              <style>.cls-1{{ fill: none }}
+              <style>
+                .cls-1{{ fill: none }}
               </style>
             </defs>
             <g id="レイヤー_2" data-name="レイヤー 2">
               <g id="レイヤー_1-2" data-name="レイヤー 1">
-                <g id="グループ_679" data-name="グループ 679">
-                  <rect id="長方形_201" data-name="長方形 201" className="cls-1" width="35" height="35" rx="2" />
-                  <path
-                    id="Icon_material-timeline"
-                    data-name="Icon material-timeline"
-                    d="M27.93,14.07A1.84,1.84,0,0,1,26.1,15.9a1.47,1.47,0,0,1-.46-.07L22.4,19.07a1.83,1.83,0,1,1-3.59.47,1.49,1.49,0,0,1,.07-.47l-2.33-2.33a1.7,1.7,0,0,1-1,0L11.46,20.9A1.82,1.82,0,1,1,9.7,19.54a1.43,1.43,0,0,1,.46.07l4.16-4.15a1.27,1.27,0,0,1-.06-.48,1.82,1.82,0,0,1,3.64,0,1.86,1.86,0,0,1-.06.48l2.32,2.32a1.91,1.91,0,0,1,.95,0l3.23-3.24a1.83,1.83,0,1,1,3.59-.47Z"
-                  />
-                </g>
+                <rect className="cls-1" width="14" height="14" />
+                <path
+                  id="Icon_material-timeline"
+                  data-name="Icon material-timeline"
+                  d="M13.6,4.6a1.2,1.2,0,0,1-1.2,1.2,1,1,0,0,1-.3,0L10,7.89a1.1,1.1,0,0,1,0,.31,1.2,1.2,0,1,1-2.4,0,1.1,1.1,0,0,1,
+                  0-.31L6.11,6.36a1.3,1.3,0,0,1-.62,0L2.75,9.1a1,1,0,0,1,0,.3A1.2,1.2,0,1,1,1.6,8.2a1,1,0,0,1,.3,0L4.64,
+                  5.51a1.1,1.1,0,0,1,0-.31A1.2,1.2,0,0,1,7,5.2a1.1,1.1,0,0,1,0,.31L8.49,7a1.3,1.3,0,0,1,.62,0L11.25,4.9a1,
+                  1,0,0,1-.05-.3,1.2,1.2,0,1,1,2.4,0Z"
+                />
               </g>
             </g>
           </svg>
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
             <defs>
-              <style>.cls-1{{ fill: none }}
+              <style>
+                .cls-1{{ fill: none }}
               </style>
             </defs>
             <g id="レイヤー_2" data-name="レイヤー 2">
               <g id="レイヤー_1-2" data-name="レイヤー 1">
-                <g id="グループ_677" data-name="グループ 677">
-                  <rect id="長方形_200" data-name="長方形 200" className="cls-1" width="35" height="35" rx="2" />
-                  <path d="M17.58,8.15a9.3,9.3,0,0,0-9.19,9.19v.16L6.55,15.66a.59.59,0,0,0-.85,0,.61.61,0,0,0,0,.85l3.4,3.4,3.41-3.4a.61.61,0,0,0,0-.85.59.59,0,0,0-.85,0L9.59,17.73v-.38a8.09,8.09,0,0,1,8-8,8.09,8.09,0,0,1,8,8,8.09,8.09,0,0,1-8,8h-.12a7.63,7.63,0,0,1-5.93-2.87.6.6,0,0,0-.84-.1.61.61,0,0,0-.1.85,8.83,8.83,0,0,0,6.87,3.32h.14a9.3,9.3,0,0,0,9.19-9.2A9.3,9.3,0,0,0,17.58,8.15Z" /><path d="M17.58,11a.6.6,0,0,0-.6.6V17.9l3.72,2.36a.62.62,0,0,0,.32.09.61.61,0,0,0,.51-.28.6.6,0,0,0-.19-.83l-3.16-2V11.61A.6.6,0,0,0,17.58,11Z" />
-                </g>
+                <rect className="cls-1" width="14" height="14" />
+                <path
+                  id="Icon_material-timeline"
+                  data-name="Icon material-timeline"
+                  d="M13.6,4.6a1.2,1.2,0,0,1-1.2,1.2,1,1,0,0,1-.3,0L10,7.89a1.1,1.1,0,0,1,0,.31,1.2,1.2,0,
+                  1,1-2.4,0,1.1,1.1,0,0,1,0-.31L6.11,6.36a1.3,1.3,0,0,1-.62,0L2.75,9.1a1,1,0,0,1,0,.3A1.2,
+                  1.2,0,1,1,1.6,8.2a1,1,0,0,1,.3,0L4.64,5.51a1.1,1.1,0,0,1,0-.31A1.2,1.2,0,0,1,7,5.2a1.1,
+                  1.1,0,0,1,0,.31L8.49,7a1.3,1.3,0,0,1,.62,0L11.25,4.9a1,1,0,0,1-.05-.3,1.2,1.2,0,1,1,2.4,0Z"
+                />
               </g>
             </g>
           </svg>
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
             <defs>
-              <style>.cls-1{{ fill: none }}.cls-2{{ isolation: isolate }}
+              <style>
+                .cls-1{{ fill: none }}
+                .cls-2{{ isolation: isolate }}
               </style>
             </defs>
             <g id="レイヤー_2" data-name="レイヤー 2">
               <g id="レイヤー_1-2" data-name="レイヤー 1">
-                <g id="グループ_727" data-name="グループ 727">
-                  <rect id="長方形_200-2" data-name="長方形 200-2" className="cls-1" width="35" height="35" rx="2" />
-                  <g id="_" data-name=" " className="cls-2">
-                    <g className="cls-2">
-                      <path
-                        d="M10.89,25.8a2.73,2.73,0,0,1-2-.87,3.15,3.15,0,0,1,0-4.43l9.55-10.13a3.41,3.41,0,0,1,1.68-1,3.58,3.58,0,0,1,1.94.12,4.84,4.84,0,0,1,1.81,1.14,5.27,5.27,0,0,1,.49.63,3.16,3.16,0,0,1,.36.71,4,4,0,0,1,.22.79,4.57,4.57,0,0,1,.07.83,4.16,4.16,0,0,1-1.19,2.94l-7.22,7.67a.53.53,0,0,1-.37.17.47.47,0,0,1-.37-.14.53.53,0,0,1-.17-.37.55.55,0,0,1,.14-.39l7.22-7.67a3.1,3.1,0,0,0,.9-2.23,2.84,2.84,0,0,0-.85-2.17A3.59,3.59,0,0,0,22,10.61a2.65,2.65,0,0,0-1.4-.19,2.34,2.34,0,0,0-1.33.68L9.68,21.23a2.08,2.08,0,0,0,0,3,1.91,1.91,0,0,0,.61.42,1.5,1.5,0,0,0,.7.11A2,2,0,0,0,12.35,24L19.94,16l.15-.17c.05-.07.11-.14.16-.22a.84.84,0,0,0,.13-.27.89.89,0,0,0,.07-.28.51.51,0,0,0-.05-.29.86.86,0,0,0-.2-.28.76.76,0,0,0-.61-.3,1.35,1.35,0,0,0-.72.41l-5.71,6.08a.53.53,0,0,1-.5.15.47.47,0,0,1-.24-.13.45.45,0,0,1-.17-.37.55.55,0,0,1,.15-.38l5.71-6.09a2.24,2.24,0,0,1,1.38-.73,1.78,1.78,0,0,1,1.46.59,1.73,1.73,0,0,1,.55,1.45,2.47,2.47,0,0,1-.8,1.56l-7.59,8.08a3.13,3.13,0,0,1-2.07,1h-.15Z"
-                      />
-                    </g>
+                <rect className="cls-1" width="14" height="14" />
+                <g id="_" data-name=" " className="cls-2">
+                  <g className="cls-2">
+                    <path d="M2.9,13a2,2,0,0,1-1.44-.63,2.28,2.28,0,0,1,0-3.23l7-7.38a2.48,2.48,0,0,1,1.22-.7,2.61,
+                    2.61,0,0,1,1.41.09A3.46,3.46,0,0,1,12.37,2a3.94,3.94,0,0,1,.36.45A2.61,2.61,0,0,1,13,3a3.41,3.41,
+                    0,0,1,.16.57,3.06,3.06,0,0,1-.82,2.75L7.07,11.86a.35.35,0,0,1-.26.13.4.4,0,0,1-.28-.1.47.47,0,0,
+                    1-.12-.27.39.39,0,0,1,.11-.29l5.26-5.59a2.28,2.28,0,0,0,.65-1.62,2.07,2.07,0,0,0-.62-1.58A2.62,2.62,
+                    0,0,0,11,1.93a2,2,0,0,0-1-.13,1.63,1.63,0,0,0-1,.5L2,9.67a1.52,1.52,0,0,0,0,2.16,1.28,1.28,0,0,0,
+                    .44.3,1,1,0,0,0,.51.08,1.43,1.43,0,0,0,1-.49L9.49,5.84l.12-.13.11-.15a1.24,1.24,0,0,0,.1-.2,1.94,
+                    1.94,0,0,0,0-.2.6.6,0,0,0,0-.22.66.66,0,0,0-.14-.2.57.57,0,0,0-.45-.22,1,1,0,0,0-.52.3L4.56,
+                    9.25a.42.42,0,0,1-.17.1.34.34,0,0,1-.2,0A.4.4,0,0,1,4,9.26.34.34,0,0,1,3.89,9,.41.41,0,0,1,4,8.72L8.16,
+                    4.28a1.7,1.7,0,0,1,1-.53,1.32,1.32,0,0,1,1.06.43,1.23,1.23,0,0,1,.4,1.05,1.8,1.8,0,0,1-.58,1.14L4.52,
+                    12.26A2.3,2.3,0,0,1,3,13H2.9Z"
+                    />
                   </g>
                 </g>
               </g>
             </g>
           </svg>
+
         </button>
 
         <div