Repository: inovex/scrumlr.io
Pull request #2754 (2023-03-12 10:58:24)

Hide notes count in column header if empty
<img width="1643" alt="Screenshot 2023-03-12 at 11 57 46" src="https://user-images.githubusercontent.com/1539948/224540201-e0f95db7-55a3-4d9e-8d35-578b42f770e1.png">

Also added tooltip for notes count


Patch:
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index e5980f4b..e180d638 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -107,7 +107,9 @@
     "deleteColumn": "Löschen",
     "addColumnLeft": "Links einfügen",
     "addColumnRight": "Rechts einfügen",
-    "hiddenColumn": "Die Spalte ist für alle Teilnehmer ausgeblendet"
+    "hiddenColumn": "Die Spalte ist für alle Teilnehmer ausgeblendet",
+    "notes_one": "{{count}} Kärtchen",
+    "notes_other": "{{count}} Kärtchen"
   },
   "ErrorPage": {
     "navigateHome": "Startseite",
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 87c44f96..78bfca40 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -107,7 +107,9 @@
     "deleteColumn": "Delete column",
     "addColumnLeft": "Add column left",
     "addColumnRight": "Add column right",
-    "hiddenColumn": "Column is hidden for all participants"
+    "hiddenColumn": "Column is hidden for all participants",
+    "notes_one": "{{count}} note",
+    "notes_other": "{{count}} notes"
   },
   "ErrorPage": {
     "navigateHome": "Home",
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 56c19dcd..3af8409e 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -58,7 +58,7 @@
   display: flex;
   word-break: break-word;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   margin-bottom: $margin--default;
   height: 48px;
   position: relative;
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index f8916ea4..dbc5783d 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -187,7 +187,11 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
           />
           <div className="column__header-title">
             {renderColumnName()}
-            {columnNameMode === "VIEW" && <span className="column__header-card-number">{state.notes.length}</span>}
+            {columnNameMode === "VIEW" && state.notes.length > 0 && (
+              <span className="column__header-card-number" title={t("Column.notes", {count: state.notes.length})}>
+                {state.notes.length}
+              </span>
+            )}
             {isModerator && renderColumnModifiers()}
             {openedColumnSettings && (
               <ColumnSettings


Test patch:
diff --git a/src/components/Column/__tests__/Column.test.tsx b/src/components/Column/__tests__/Column.test.tsx
index 079fbb36..60d802cc 100644
--- a/src/components/Column/__tests__/Column.test.tsx
+++ b/src/components/Column/__tests__/Column.test.tsx
@@ -9,7 +9,15 @@ const [ColumnContext] = wrapWithTestBackend(Column);
 const createColumn = (overwrite?: Partial<ApplicationState>) => {
   return (
     <Provider store={getTestStore(overwrite)}>
-      <ColumnContext id="TestID" name="Testheader" color="planning-pink" visible={false} index={0} />
+      <ColumnContext id="test-columns-id-1" name="Testheader 1" color="planning-pink" visible={false} index={0} />
+    </Provider>
+  );
+};
+
+const createEmptyColumn = (overwrite?: Partial<ApplicationState>) => {
+  return (
+    <Provider store={getTestStore(overwrite)}>
+      <ColumnContext id="test-columns-id-3" name="Testheader 1" color="planning-pink" visible={false} index={0} />
     </Provider>
   );
 };
@@ -41,11 +49,21 @@ describe("Column", () => {
       expect(container.querySelector(".column__header-title")!.firstChild).toHaveClass("column__header-text-wrapper");
     });
 
-    test("column header cardnumber is present", () => {
+    test("column header card number is present", () => {
       const {container} = render(createColumn());
       expect(container.querySelector(".column__header-title")!.children[1]).toHaveClass("column__header-card-number");
     });
 
+    test("column header card number is not present", () => {
+      const {container} = render(createEmptyColumn());
+      expect(container.querySelector(".column__header-title")!.children[1]).not.toHaveClass("column__header-card-number");
+    });
+
+    test("column header card number is correct number", () => {
+      const {container} = render(createColumn());
+      expect(container.querySelector(".column__header-card-number")!).toHaveTextContent("2");
+    });
+
     test("header text has correct title", () => {
       const {container} = render(createColumn());
       expect(container.firstChild).toHaveTextContent("Testheader");
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index 5147d291..0067e466 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Column should have correct style show column with correct style 1`] = `
         <input
           class="note-input__input"
           data-tooltip-content="OPTION/ALT + 1"
-          id="note-input-TestID"
+          id="note-input-test-columns-id-1"
           maxlength="1024"
           placeholder="Add your note..."
           type="text"
@@ -49,13 +49,14 @@ exports[`Column should have correct style show column with correct style 1`] = `
           <h2
             class="column__header-text column__header-text--hidden"
           >
-            Testheader
+            Testheader 1
           </h2>
         </div>
         <span
           class="column__header-card-number"
+          title="2 notes"
         >
-          0
+          2
         </span>
         <button
           class="column__header-edit-button"
@@ -74,7 +75,957 @@ exports[`Column should have correct style show column with correct style 1`] = `
     >
       <ul
         class="column__note-list"
-      />
+      >
+        <li>
+          <div
+            class="note__root"
+          >
+            <button
+              class="note note--stackBetween"
+            >
+              <p
+                class="note__text"
+              >
+                Lorem Ipsum
+              </p>
+              <div
+                class="note__footer"
+              >
+                <figure
+                  aria-roledescription="author"
+                  class="note__author"
+                >
+                  <div
+                    class="user-avatar note__user-avatar"
+                    title="test-participants-others-user-name-1"
+                  >
+                    <svg
+                      class="avatar note__user-avatar accent-color__backlog-blue"
+                      height="280px"
+                      version="1.1"
+                      viewBox="0 0 264 280"
+                      width="264px"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                    >
+                      <desc>
+                        Created with getavataaars.com
+                      </desc>
+                      <defs>
+                        <circle
+                          cx="120"
+                          cy="120"
+                          id="react-path-225"
+                          r="120"
+                        />
+                        <path
+                          d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z"
+                          id="react-path-226"
+                        />
+                        <path
+                          d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z"
+                          id="react-path-227"
+                        />
+                      </defs>
+                      <g
+                        fill="none"
+                        fill-rule="evenodd"
+                        id="Avataaar"
+                        stroke="none"
+                        stroke-width="1"
+                      >
+                        <g
+                          id="Avataaar/Circle"
+                          transform="translate(-825.000000, -1100.000000)"
+                        >
+                          <g
+                            transform="translate(825.000000, 1100.000000)"
+                          >
+                            <g
+                              fill-rule="evenodd"
+                              id="Circle"
+                              stroke-width="1"
+                              transform="translate(12.000000, 40.000000)"
+                            >
+                              <mask
+                                fill="white"
+                                id="react-mask-228"
+                              >
+                                <use
+                                  xlink:href="#react-path-225"
+                                />
+                              </mask>
+                              <use
+                                fill="#E6E6E6"
+                                id="Circle-Background"
+                                xlink:href="#react-path-225"
+                              />
+                              <g
+                                fill="#65C9FF"
+                                id="Color/Palette/Blue-01"
+                                mask="url(#react-mask-228)"
+                              >
+                                <rect
+                                  height="240"
+                                  id="🖍Color"
+                                  width="240"
+                                  x="0"
+                                  y="0"
+                                />
+                              </g>
+                            </g>
+                            <mask
+                              fill="white"
+                              id="react-mask-229"
+                            >
+                              <use
+                                xlink:href="#react-path-226"
+                              />
+                            </mask>
+                            <g
+                              id="Mask"
+                            />
+                            <g
+                              fill-rule="evenodd"
+                              id="Avataaar"
+                              mask="url(#react-mask-229)"
+                              stroke-width="1"
+                            >
+                              <g
+                                id="Body"
+                                transform="translate(32.000000, 36.000000)"
+                              >
+                                <mask
+                                  fill="white"
+                                  id="react-mask-230"
+                                >
+                                  <use
+                                    xlink:href="#react-path-227"
+                                  />
+                                </mask>
+                                <use
+                                  fill="#D0C6AC"
+                                  xlink:href="#react-path-227"
+                                />
+                                <g
+                                  fill="#FD9841"
+                                  id="Skin/👶🏽-03-Brown"
+                                  mask="url(#react-mask-230)"
+                                >
+                                  <g
+                                    id="Color"
+                                    transform="translate(0.000000, 0.000000)"
+                                  >
+                                    <rect
+                                      height="280"
+                                      width="264"
+                                      x="0"
+                                      y="0"
+                                    />
+                                  </g>
+                                </g>
+                                <path
+                                  d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z"
+                                  fill="#000000"
+                                  fill-opacity="0.100000001"
+                                  id="Neck-Shadow"
+                                  mask="url(#react-mask-230)"
+                                />
+                              </g>
+                              <g
+                                id="Clothing/Blazer-+-Sweater"
+                                transform="translate(0.000000, 170.000000)"
+                              >
+                                <defs>
+                                  <path
+                                    d="M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z"
+                                    id="react-path-231"
+                                  />
+                                </defs>
+                                <mask
+                                  fill="white"
+                                  id="react-mask-232"
+                                >
+                                  <use
+                                    xlink:href="#react-path-231"
+                                  />
+                                </mask>
+                                <use
+                                  fill="#E6E6E6"
+                                  fill-rule="evenodd"
+                                  id="Clothes"
+                                  xlink:href="#react-path-231"
+                                />
+                                <g
+                                  fill="#262E33"
+                                  fill-rule="evenodd"
+                                  id="Color/Palette/Black"
+                                  mask="url(#react-mask-232)"
+                                >
+                                  <rect
+                                    height="110"
+                                    id="🖍Color"
+                                    width="264"
+                                    x="0"
+                                    y="0"
+                                  />
+                                </g>
+                                <g
+                                  fill-rule="evenodd"
+                                  id="Blazer"
+                                  stroke-width="1"
+                                  transform="translate(32.000000, 28.000000)"
+                                >
+                                  <path
+                                    d="M68.784807,1.12222847 C30.512317,2.80409739 1.24427139e-14,34.3646437 0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z"
+                                    fill="#3A4C5A"
+                                    id="Saco"
+                                  />
+                                  <path
+                                    d="M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z"
+                                    fill="#E6E6E6"
+                                    id="Pocket-hanky"
+                                  />
+                                  <path
+                                    d="M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z"
+                                    fill="#2F4351"
+                                    id="Wing"
+                                  />
+                                  <path
+                                    d="M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z"
+                                    fill="#2F4351"
+                                    id="Wing"
+                                    transform="translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) "
+                                  />
+                                </g>
+                                <path
+                                  d="M156,21.5390062 C162.772319,26.1359565 167,32.6563196 167,39.8878801 C167,47.2887711 162.572015,53.9447688 155.520105,58.5564942 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,21.5390062 Z M108,21.5390062 C101.227681,26.1359565 97,32.6563196 97,39.8878801 C97,47.2887711 101.427985,53.9447688 108.479895,58.5564942 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5390062 Z"
+                                  fill="#F2F2F2"
+                                  fill-rule="evenodd"
+                                  id="Collar"
+                                />
+                              </g>
+                              <g
+                                fill="#000000"
+                                id="Face"
+                                transform="translate(76.000000, 82.000000)"
+                              >
+                                <g
+                                  fill-opacity="0.699999988"
+                                  id="Mouth/Default"
+                                  transform="translate(2.000000, 52.000000)"
+                                >
+                                  <path
+                                    d="M40,15 C40,22.7319865 46.2680135,29 54,29 L54,29 C61.7319865,29 68,22.7319865 68,15"
+                                    id="Mouth"
+                                  />
+                                </g>
+                                <g
+                                  fill-opacity="0.16"
+                                  id="Nose/Default"
+                                  transform="translate(28.000000, 40.000000)"
+                                >
+                                  <path
+                                    d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8"
+                                    id="Nose"
+                                  />
+                                </g>
+                                <g
+                                  id="Eyes/Cry-😢"
+                                  transform="translate(0.000000, 8.000000)"
+                                >
+                                  <circle
+                                    cx="30"
+                                    cy="22"
+                                    fill="#000000"
+                                    fill-opacity="0.599999964"
+                                    fill-rule="evenodd"
+                                    id="Eye"
+                                    r="6"
+                                  />
+                                  <path
+                                    d="M25,27 C25,27 19,34.2706667 19,38.2706667 C19,41.5846667 21.686,44.2706667 25,44.2706667 C28.314,44.2706667 31,41.5846667 31,38.2706667 C31,34.2706667 25,27 25,27 Z"
+                                    fill="#92D9FF"
+                                    fill-rule="nonzero"
+                                    id="Drop"
+                                  />
+                                  <circle
+                                    cx="82"
+                                    cy="22"
+                                    fill="#000000"
+                                    fill-opacity="0.599999964"
+                                    fill-rule="evenodd"
+                                    id="Eye"
+                                    r="6"
+                                  />
+                                </g>
+                                <g
+                                  fill-opacity="0.599999964"
+                                  id="Eyebrow/Natural/Default-Natural"
+                                >
+                                  <path
+                                    d="M26.0390934,6.21012364 C20.2775554,6.98346216 11.2929313,12.0052479 12.04426,17.8178111 C12.0689481,18.0080543 12.3567302,18.0673468 12.4809077,17.9084937 C14.9674041,14.7203351 34.1927973,10.0365481 41.1942673,11.0147151 C41.8350523,11.1044465 42.2580662,10.4430343 41.8210501,10.0302067 C38.0765663,6.49485426 31.2003792,5.51224825 26.0390934,6.21012364"
+                                    id="Eyebrow"
+                                    transform="translate(27.000000, 12.000000) rotate(5.000000) translate(-27.000000, -12.000000) "
+                                  />
+                                  <path
+                                    d="M85.0390934,6.21012364 C79.2775554,6.98346216 70.2929313,12.0052479 71.04426,17.8178111 C71.0689481,18.0080543 71.3567302,18.0673468 71.4809077,17.9084937 C73.9674041,14.7203351 93.1927973,10.0365481 100.194267,11.0147151 C100.835052,11.1044465 101.258066,10.4430343 100.82105,10.0302067 C97.0765663,6.49485426 90.2003792,5.51224825 85.0390934,6.21012364"
+                                    id="Eyebrow"
+                                    transform="translate(86.000000, 12.000000) scale(-1, 1) rotate(5.000000) translate(-86.000000, -12.000000) "
+                                  />
+                                </g>
+                              </g>
+                              <g
+                                fill-rule="evenodd"
+                                id="Top"
+                                stroke-width="1"
+                              >
+                                <defs>
+                                  <rect
+                                    height="280"
+                                    id="react-path-235"
+                                    width="264"
+                                    x="0"
+                                    y="0"
+                                  />
+                                  <path
+                                    d="M162.831093,71.6181521 C162.943003,73.0640672 163,74.5253775 163,76 L163,114 C163,136.339168 149.919579,155.623239 131,164.610951 L131,183 L135,183 C136.524404,183 137.037743,183.047374 138.538625,183.140731 C123.625568,210.496321 119.823733,233.574048 137.47212,247.543277 C139.169858,248.745686 140.396085,249.328761 140.607243,249.428275 C142.980035,250.546232 145.444343,251.76781 148.074296,252.382591 C152.696796,253.463231 158.007057,252.010459 162.630756,251.429524 C164.742591,251.164137 166.847633,251.000636 168.977452,250.993519 C171.542066,250.985014 174.188404,251.078221 176.119408,252.691023 C178.003455,254.264772 177.763079,259.889444 172.244213,262.523872 C176.3432,264.37915 181.25603,260.071171 182.931671,257.34666 C184.398107,254.962171 185.526058,252.378599 186.146081,249.741914 C186.917963,246.458686 186.967717,243.016815 186.363678,239.728032 C185.106048,232.88022 182.187563,226.295538 180.201011,219.605673 C179.468692,217.139607 178.51478,214.440611 178.099366,211.916746 C177.986471,211.23167 177.851996,208.701383 177.957698,208.171998 C178.036425,207.778517 178.016643,207.37549 179.372782,206.996069 C183.288539,205.899634 187.379733,204.063449 190.225486,201.476579 C193.590156,198.418295 195.343925,194.445304 196.758409,190.497133 C198.998525,184.244662 200.281132,177.550111 200.870584,171.057073 C200.99307,169.708269 201.062205,168.361722 201.086383,167.009968 C201.10077,166.193153 201.000862,165.263344 201.094375,164.445141 C201.247433,163.105189 201.039826,163.457881 202.341615,162.571291 C206.599454,159.671476 209.921164,155.448546 212.051783,151.200622 C215.39827,144.528634 215.834064,137.49302 213.117591,130.733555 C210.864687,125.12728 207.291411,119.498616 201.725588,115.887863 C199.588776,114.501568 197.334273,113.244582 195.115337,111.95809 C193.906862,111.257566 191.067703,110.342511 190.209501,109.441341 C189.609259,108.810939 190.56477,105.649382 190.685858,104.583322 C191.213967,99.9353218 190.606132,95.4261763 189.520542,90.8868298 C187.127368,80.8793698 177.487944,64.7382958 173.617944,55.2249863 C170.293437,47.0528435 165.481911,-0.0750473139 108.58669,0.198941193 C51.691468,0.4729297 41.4185991,50.4377258 33.7159879,59.7736698 C25.3512665,69.9121239 16.9074766,89.1763214 22.602684,107.035643 C17.099033,113.95809 4.54481227,124.04369 1.3853513,134.125611 C-0.596804833,140.450807 -0.511883829,147.495621 2.0289526,153.633016 C3.46621561,157.104393 5.52490056,160.250502 7.94045353,163.272162 C10.0566849,165.919435 12.4084972,168.423513 14.4577909,171.110359 C15.6946403,172.732013 16.0263318,173.129312 15.5599656,175.128304 C14.6406208,179.068318 12.7411877,182.853334 11.0939201,186.603116 C8.54189405,192.412639 6.39748885,197.82226 6.0799842,204.016065 C5.77766543,209.912373 7.40435223,226.688671 24.3409972,236.576369 C26.3249517,237.73442 28.2831301,238.743202 30.3833764,239.685161 C29.2931905,236.290327 30.5294405,224.161856 32.7263968,219.653578 C33.2860762,221.204589 34.2369916,222.697108 35.2618383,224.05216 C36.8611506,226.167444 40.636039,231.460774 45.4085994,231.706547 C43.4722007,228.722725 41.3891385,226.708805 40.7853002,223.10864 C44.7616013,225.068753 50.4191385,226.855644 55.0466338,226.691448 C58.4512667,226.570818 63.4709972,224.871405 66.0000446,222.74779 C57.6284322,224.074724 49.679027,221.3155 46.4820009,215.419366 C45.8146217,214.188415 45.3084926,212.898625 45.0141664,211.558847 C44.5967546,209.659309 43.9381673,206.615432 44.8227444,204.862039 C45.0375932,204.436124 45.3893685,204.001198 45.806628,203.572743 C45.7407358,203.49425 45.6753213,203.415537 45.6103845,203.336606 C51.303506,198.550494 58.4494475,190.932516 62.2752482,185.367908 C62.3459243,185.245492 62.416066,185.122857 62.4856702,185 L62.5253504,185 C62.5536953,184.957813 62.5818364,184.915755 62.6097716,184.873828 C67.874859,183.648086 73.3617452,183 79,183 L83,183 L83,164.610951 C64.0804213,155.623239 51,136.339168 51,114 L51,76 L51,76 C51,73.537425 51.1589523,71.1119753 51.4671565,68.733351 C55.4088487,67.4702772 59.365485,66.2776957 63.3986046,65.2045441 C67.8552588,64.0189378 77.7980098,62.0907786 81.6887904,61.1941723 L84.4252449,58.215348 L85.4876566,60.1702128 C87.6456492,60.0042337 99.5663601,58.212708 99.5663601,58.212708 L100.896323,54.9898699 C102.612526,56.7530625 103.834989,57.668872 103.834989,57.668872 C106.391211,57.460454 117.488488,57.2113208 120.119841,57.2427023 C120.119841,57.2427023 127.460212,57.5012269 129.240756,57.5714137 L130.907605,56.9328981 L131.456495,58.0098503 C132.910143,58.601117 141.699367,61.6008734 143.434153,62.138079 L145.980784,61.2323702 C147.100342,63.9256202 149.920119,63.586016 152.257345,65.7132858 C154.760315,67.9915694 159.482831,69.7372554 162.831093,71.6181521 Z"
+                                    id="react-path-236"
+                                  />
+                                </defs>
+                                <mask
+                                  fill="white"
+                                  id="react-mask-233"
+                                >
+                                  <use
+                                    xlink:href="#react-path-235"
+                                  />
+                                </mask>
+                                <g
+                                  id="Mask"
+                                />
+                                <g
+                                  id="Top/Long-Hair/Curvy"
+                                  mask="url(#react-mask-233)"
+                                >
+                                  <g
+                                    transform="translate(-1.000000, 0.000000)"
+                                  >
+                                    <path
+                                      d="M100.899906,42.4648024 C91.1016204,48.4721303 82.3855283,56.3273858 76.5871222,65.36024 C73.8252914,69.662826 71.5532049,74.1995784 69.4361743,78.7575668 C68.3739624,81.0447336 67.4048638,83.3600237 66.475928,85.6893613 C65.8894735,87.1594817 64.9889112,88.7449062 65.8359233,90.2878445 C66.3526427,89.9857996 66.5492598,90.0943892 66.224362,90.6353417 C68.9162579,91.3693254 72.6583769,89.3003017 74.9906073,88.5362205 C79.7539763,86.9753339 84.5203425,85.5025753 89.3986046,84.2045441 C93.8552588,83.0189378 103.79801,81.0907786 107.68879,80.1941723 L110.425245,77.215348 L111.487657,79.1702128 C113.645649,79.0042337 125.56636,77.212708 125.56636,77.212708 L126.896323,73.9898699 C128.612526,75.7530625 129.834989,76.668872 129.834989,76.668872 C132.391211,76.460454 143.488488,76.2113208 146.119841,76.2427023 C146.119841,76.2427023 153.460212,76.5012269 155.240756,76.5714137 L156.907605,75.9328981 L157.456495,77.0098503 C158.910143,77.601117 167.699367,80.6008734 169.434153,81.138079 L171.980784,80.2323702 C173.100342,82.9256202 175.920119,82.586016 178.257345,84.7132858 C181.34867,87.5271086 187.825645,89.5285179 190.917768,91.9756241 C192.024938,92.8519441 193.059576,93.7675012 194.100208,94.7015404 C195.255933,95.7385867 195.085291,95.890424 195.460742,97.0802141 C195.573237,97.4361731 196.715775,99.2788807 197.202722,99.4296139 C198.935909,99.9660566 187.048767,68.9435732 183.785603,64.9771662 C180.417736,60.8830307 158.574915,33.3231248 129.612057,34.2254634"
+                                      fill="#000000"
+                                      fill-opacity="0.16"
+                                      fill-rule="evenodd"
+                                      id="Top-Shadow"
+                                    />
+                                    <g
+                                      fill="none"
+                                      fill-rule="evenodd"
+                                      id="Hair"
+                                      stroke-width="1"
+                                      transform="translate(26.000000, 16.000000)"
+                                    >
+                                      <mask
+                                        fill="white"
+                                        id="react-mask-234"
+                                      >
+                                        <use
+                                          xlink:href="#react-path-236"
+                                        />
+                                      </mask>
+                                      <use
+                                        fill="#361A0A"
+                                        id="Hair-Mask"
+                                        xlink:href="#react-path-236"
+                                      />
+                                      <g
+                                        fill="#F59797"
+                                        id="Skin/👶🏽-03-Brown"
+                                        mask="url(#react-mask-234)"
+                                      >
+                                        <g
+                                          id="Color"
+                                          transform="translate(0.000000, 0.000000) "
+                                        >
+                                          <rect
+                                            height="280"
+                                            width="264"
+                                            x="0"
+                                            y="0"
+                                          />
+                                        </g>
+                                      </g>
+                                      <path
+                                        d="M62.6794556,184.462132 C69.755442,174.755405 62.148959,147.786913 56.1278159,137.800593 C72.9649824,130.137708 106.213574,131.553467 155.87359,142.047871 C151.079203,150.900348 149.123448,158.803527 150.006324,165.757409 C145.469118,171.332534 141.720304,177.127222 138.759883,183.141474 L103.888915,191.746789 C81.8528509,194.400378 68.1163643,191.97216 62.6794556,184.462132 Z"
+                                        fill="#000000"
+                                        fill-opacity="0.24"
+                                        id="Shadow"
+                                        mask="url(#react-mask-234)"
+                                      />
+                                    </g>
+                                    <path
+                                      d="M79.0404573,170.094305 C78.9812573,169.892618 78.8354573,169.667152 78.6348573,169.428842 C78.7708573,169.650142 78.9074573,169.871269 79.0404573,170.094305 Z M56.409572,120.375261 C57.2661752,126.5406 58.7356083,132.465374 60.8662263,138.377476 C62.9277086,144.09848 65.285915,149.836145 68.678559,155.067858 C71.8402179,159.943234 75.6031176,164.4923 78.6348973,169.428772 C77.8378388,168.48126 76.1633964,167.329804 75.5207941,166.65115 C74.4643769,165.535276 73.4750971,164.385382 72.5369698,163.193485 C70.6143583,160.749982 68.9003527,158.193833 67.243494,155.609567 C63.9913192,150.536843 61.5529875,145.034363 59.4397533,139.530668 C55.2902133,128.722708 51.1268862,115.61687 54.7738936,104.200899 C54.4921557,104.935095 55.2326668,106.688314 55.3491585,107.497319 C55.5525692,108.91069 55.7349995,110.333608 55.8267142,111.757219 C56.0123415,114.639678 56.0109428,117.505994 56.409572,120.375261 Z M68.8553146,165.041212 C67.4967783,163.309515 64.9739252,161.944396 63.4129772,160.279177 C61.9976938,158.769648 60.9019131,157.07822 59.9070386,155.339754 C57.6517365,151.39922 56.1697151,147.374505 55.6897616,142.969154 C55.7992598,143.49177 56.6083072,144.395543 56.8630702,144.824778 C57.4766993,145.858902 58.0839345,146.89424 58.6508072,147.948671 C59.7481863,149.989667 60.6639345,152.099744 61.7731027,154.135533 C63.8106073,157.875421 66.402796,161.495374 68.8553146,165.041212 Z M73.5320242,183.498629 C74.6465874,185.460651 75.5723262,187.464851 76.1569823,189.60079 C76.4654954,190.727599 76.7138643,191.869508 76.9272658,193.013501 C76.9962017,193.382508 77.0093894,194.709963 77.1846264,195.283955 C74.9700864,190.992812 73.2798587,186.448779 70.6421125,182.34214 C68.0381348,178.288092 64.6948448,174.560527 61.1958996,171.061031 C57.5013364,167.36575 53.7855929,163.879099 51.8038364,159.214262 C50.0788411,155.153619 49.4126608,150.996124 49.8138875,146.658464 C49.8160855,148.56911 51.5706533,151.280256 52.1766896,153.126681 C53.0063178,155.654018 53.6655046,158.231689 54.9143429,160.634229 C57.039566,164.722991 60.873,167.876911 64.0792175,171.321558 C67.631513,175.137643 71.0245567,179.084252 73.5320242,183.498629 Z M59.2286696,174.179456 C60.2874847,175.196917 61.2164205,176.28259 62.0352588,177.454354 C62.9328239,178.738937 63.5914112,180.09017 64.1800637,181.504062 C64.6869921,182.721301 64.9105841,184.986375 65.7074428,186.0021 C63.1288415,182.856337 60.4739112,179.884838 58.6955655,176.312444 C58.0893295,175.089825 57.1480051,173.289222 56.4530516,171.817184 C56.6844363,172.409922 58.7059559,173.677148 59.2286696,174.179456 Z M48.9033745,180.528033 C51.7405353,184.777866 55.450684,188.609052 57.877027,193.056233 C60.7067946,198.242644 61.9518364,203.862978 62.202803,209.595957 C62.3216924,212.307277 62.3152983,215.0606 61.9498383,217.764455 C61.7540204,219.211673 61.4399126,220.650211 61.0810465,222.075732 C60.944973,222.616747 60.2406283,224.002173 60.1037556,224.846586 C59.8140251,214.305575 61.5584024,203.763696 56.0767017,193.942823 C53.4811162,189.292219 49.4912277,185.327212 46.398105,180.924811 C43.6164926,176.966226 40.8998197,173.083838 38.6846803,168.851361 C40.0408188,170.567263 42.485145,171.915893 44.0009349,173.619818 C45.8995688,175.753674 47.3488206,178.199606 48.9033745,180.528033 Z M60.1036574,224.846603 C60.0710574,225.050581 60.0700574,225.224111 60.1172574,225.346603 C60.1116574,225.180112 60.1082574,225.01327 60.1036574,224.846603 Z M50.5604331,202.493815 C50.5610325,202.989874 51.376474,204.011501 51.5992667,204.528562 C52.1207816,205.73799 52.5455864,207.007473 52.7573894,208.289626 C53.1752007,210.818004 52.6269108,213.429521 51.6899823,215.850286 C49.7909489,220.757251 46.8161162,225.102895 43.0767946,229.15 C44.4121524,227.402335 44.9438578,224.56136 45.8833838,222.612182 C46.8478866,220.611106 47.8829238,218.6411 48.7335325,216.600624 C50.652947,211.995842 50.4835046,207.289696 50.5604331,202.493815 Z M41.9174331,221.200893 C42.3180604,220.652936 42.1102537,218.018161 42.3222565,217.328919 C42.714092,216.055618 43.3920613,214.827097 44.170737,213.693866 C43.7551236,214.392828 44.3691524,216.160106 44.1663411,217.067177 C43.8338504,218.55553 42.9962296,219.998582 41.9174331,221.200893 Z M99.6077106,42.748374 C99.5269106,42.804974 99.4471106,42.908174 99.3681106,43.044574 C99.4481106,42.945974 99.5267106,42.846574 99.6077106,42.748374 Z M84.8469387,64.3317143 C86.2672175,63.085837 87.0237138,60.1410677 88.0032026,58.5522183 C89.1283559,56.7269681 90.4213532,54.9730547 91.6476125,53.1960567 C94.0795502,49.6719145 96.3744154,46.2123399 99.3680307,43.0054816 C98.7464089,43.9398028 98.1949219,46.7736616 97.8536394,47.5189663 C96.9620688,49.4667561 95.8988578,51.3334892 94.6328355,53.1235049 C91.7722965,57.1680066 88.7029517,60.9266404 84.8469387,64.3317143 Z M84.3117165,54.1218036 C85.0620186,52.7952168 86.2055548,51.6739619 87.4917584,50.7082248 C86.9188913,51.2107066 86.6607314,53.2831189 86.2670976,53.9831221 C85.472237,55.3952784 84.3143141,56.6130375 83.0714703,57.7545999 C83.7352528,57.1726235 83.842553,54.9516363 84.3117165,54.1218036 Z M203.505599,152.127968 C203.498805,152.179518 203.485417,152.282271 203.464637,152.438483 C203.462638,150.913159 202.784469,149.237352 202.704144,147.668984 C202.592048,145.478545 202.906556,143.353715 203.787137,141.277137 C205.526519,137.175704 208.790083,134.069516 212.950612,131.638511 C211.805877,132.313173 210.683921,134.851617 209.949604,135.906916 C208.84663,137.493162 207.668126,139.094161 206.735993,140.757819 C204.793001,144.225725 204.229725,148.375062 203.505599,152.127968 Z M201.998401,130.481881 C201.761221,131.706583 201.448912,132.921738 201.009121,134.107908 C200.534762,135.386937 199.915938,136.630558 199.22578,137.835993 C198.79578,138.586852 197.246621,140.162684 197.24762,140.993211 C197.165296,136.095098 198.975812,131.657983 202.419809,127.7355 C202.04236,128.392806 202.137271,129.766083 201.998401,130.481881 Z M201.196906,165.719988 C204.852905,165.202752 208.302496,166.981313 210.618342,169.271033 C211.855791,170.494694 212.955568,171.900428 213.683091,173.404055 C214.229783,174.534509 214.228783,176.387356 214.9631,177.323587 C213.165772,174.905078 210.886892,172.951214 208.638584,170.859535 C207.075238,169.404855 203.950944,165.678852 201.196906,165.719988 Z M200.41897,176.096698 C200.227148,176.031957 198.485169,175.539368 198.081944,175.776984 C198.679388,175.510035 199.412106,175.184941 200.068895,175.097983 C204.35311,174.529024 209.561066,178.239232 210.13633,181.81909 C209.657576,180.592826 207.111145,179.578489 205.959616,178.968568 C204.136711,178.002484 202.395531,176.832456 200.41897,176.096698 Z M202.227687,183.908269 C202.969797,184.089822 204.54713,185.083504 205.275252,185.072742 C202.345977,185.143906 199.703236,184.81829 196.883858,184.158729 C197.036117,184.200212 198.643022,183.702937 198.694974,183.695647 C199.910043,183.523987 201.052381,183.620492 202.227687,183.908269 Z M190.882541,197.765243 C195.171151,197.522941 200.218656,198.149351 204.314046,199.181739 C206.346955,199.694288 208.253382,200.468058 210.006351,201.476666 C211.420436,202.290531 213.935896,203.408661 214.881616,204.614097 C211.142494,198.162369 203.032039,194.811448 194.722769,196.473197 C193.615199,196.695886 191.914181,197.749796 190.882541,197.765243 Z M189.923153,210.197773 C192.611453,209.233424 195.584487,208.30431 198.505969,208.169273 C201.277391,208.042395 204.351332,208.458613 206.915546,209.342078 C206.033367,209.102206 203.92333,209.674289 202.995793,209.779298 C201.699199,209.926138 200.399608,210.077837 199.099817,210.196558 C197.506299,210.342009 195.898395,210.422718 194.298883,210.41942 C193.159543,210.41699 190.979371,209.87858 189.923153,210.197773 Z M179.458947,227.410508 C179.711912,231.383499 182.010574,234.84533 185.39043,237.491388 C188.973097,240.296087 193.769036,241.572686 196.369816,245.319691 C197.637437,247.145462 198.312809,249.270812 198.20431,251.417686 C198.148362,252.524014 197.870221,253.636069 197.5695,254.712196 C197.371684,255.420184 196.66734,256.580144 196.667939,257.270775 C196.69911,253.384221 196.751661,248.859281 194.031592,245.598095 C191.300932,242.324066 186.539161,241.170701 183.203065,238.482813 C179.924714,235.841442 177.437828,232.389157 176.877749,228.498264 C176.425569,225.354411 176.648562,219.871892 179.90773,217.738557 C179.246345,218.128392 179.377224,220.111764 179.361438,220.669267 C179.298097,222.900321 179.317079,225.185182 179.458947,227.410508 Z M177.005789,242.672904 C177.402221,243.19257 179.575399,243.82436 180.213805,244.182606 C181.67045,245.000116 183.07914,245.92923 184.234665,247.059684 C186.55111,249.326146 188.044121,252.504886 188.151821,255.553623 C188.151821,254.833139 186.505553,253.096583 186.043183,252.481107 C185.275297,251.458613 184.407904,250.511969 183.524526,249.564283 C181.371329,247.253734 179.135209,244.999942 177.005789,242.672904 Z M229.167807,153.791051 C230.371887,154.841663 231.178936,156.147595 231.842519,157.49987 C233.373295,160.619424 233.65823,164.217333 232.431571,167.500388 C232.634582,166.795698 232.030544,165.31585 231.860502,164.601614 C231.488248,163.038626 230.906389,161.56225 230.298355,160.059664 C229.118053,157.144401 228.163741,154.41208 226.113648,151.858014 C226.644354,152.52556 228.442481,153.157872 229.167807,153.791051 Z M171.509602,41.9832998 C171.510002,42.3148163 172.426549,43.2758671 172.633357,43.6374111 C173.149677,44.5392749 173.557297,45.4857459 173.696967,46.4924453 C173.85542,47.6336606 173.6616,48.7505762 173.315522,49.8605491 C173.109914,50.5202844 172.131624,51.7949741 172.132423,52.3894475 C171.972572,48.891167 171.198691,45.5298324 171.509602,41.9832998 Z M179.146978,48.8048339 C179.312224,50.0477605 178.906202,51.4491555 178.183074,52.546805 C178.314952,52.2364639 177.729296,50.1642252 177.710314,49.7849773 C177.650969,48.6118253 177.77925,47.4056953 177.856378,46.2332376 C177.857178,46.8738803 179.039478,47.9958294 179.146978,48.8048339 Z M118.377388,50.3732542 C117.142336,51.8857333 115.738043,53.3032702 114.227248,54.6164922 C113.2036,55.5060327 111.243024,56.5057893 110.46315,57.5267214 C113.964293,51.8147436 118.00913,46.8878178 122.764906,41.8951095 C122.049172,42.8155452 121.862346,44.8121078 121.337434,45.8885819 C120.563354,47.4758692 119.527518,48.9645693 118.377388,50.3732542 Z M124.275361,52.8515919 C124.845431,52.5155626 125.378934,50.859195 125.81333,50.3013446 C126.54465,49.3623371 127.437619,48.4554398 128.390733,47.6728177 C128.186123,47.8927295 127.788693,49.7158968 127.5657,50.0739694 C126.843372,51.2344508 125.56616,52.1809219 124.275361,52.8515919 Z"
+                                      fill="#FFFFFF"
+                                      fill-opacity="0.6"
+                                      fill-rule="evenodd"
+                                      id="Lights"
+                                    />
+                                    <g
+                                      id="Facial-Hair/Beard-Medium"
+                                      transform="translate(49.000000, 72.000000)"
+                                    >
+                                      <defs>
+                                        <path
+                                          d="M105.017591,94.1296214 C101.150441,99.7213834 98.257542,95.9467308 94.1374777,92.8762163 C91.6567227,91.0272796 87.9608129,88.7275108 84.5044337,88.8410391 C81.0477114,88.7275108 77.3518016,91.0272796 74.8710466,92.8762163 C70.7509822,95.9467308 67.8580835,99.7213834 63.9909333,94.1296214 C61.0884259,89.9323547 62.3028943,82.8739117 65.014944,78.9027173 C68.8738581,73.2512381 74.1088724,75.9847769 79.9622738,75.3400279 C81.5538829,75.1648137 83.1526985,74.7228407 84.5044337,74 C85.856169,74.7228407 87.4546414,75.1648137 89.0462504,75.3400279 C94.899995,75.9847769 100.134666,73.2512381 103.993923,78.9027173 C106.70563,82.8739117 107.920098,89.9323547 105.017591,94.1296214 M140.39109,26 C136.966521,40.0748212 135.393023,54.4337754 132.909944,68.6711471 C132.392536,71.6390145 131.826063,74.5963095 131.224594,77.5496398 C131.098329,78.1697764 130.973781,80.4725746 130.362704,80.7643064 C128.511632,81.6484223 124.739149,76.9466834 123.730409,75.8851496 C121.196893,73.219256 118.684993,70.5292442 115.599415,68.437233 C109.364783,64.2102603 102.065485,61.7108818 94.4700836,61.117837 C91.2922091,60.8693859 86.9951134,61.3025234 84.000116,63.1104016 C81.0051185,61.3025234 76.7080229,60.8693859 73.5298053,61.117837 C65.9344039,61.7108818 58.6351055,64.2102603 52.4004739,68.437233 C49.3148957,70.5292442 46.8033387,73.219256 44.2694796,75.8851496 C43.2607395,76.9466834 39.4882573,81.6484223 37.6371849,80.7643064 C37.0261079,80.4725746 36.9015594,78.1697764 36.7752954,77.5496398 C36.1738255,74.5963095 35.6073527,71.6390145 35.0899445,68.6711471 C32.6072086,54.4337754 31.0337113,40.0748212 27.6091415,26 C26.6127533,26 25.7385119,44.7478165 25.6273446,46.4945731 C25.174784,53.5889755 24.6463963,60.5254529 25.3216346,67.6261326 C26.485803,79.8749043 27.6993791,95.2339402 37.032627,104.58753 C45.4659003,113.039493 57.7103052,114.806417 68.2713185,120.141327 C69.631059,120.828202 71.4347824,121.676306 73.3798667,122.37111 C75.4289129,123.934171 79.4926946,125 84.1740722,125 C89.0846465,125 93.3155222,123.827456 95.2540874,122.137856 C96.9548781,121.49261 98.5180822,120.752874 99.7285704,120.141327 C110.288776,114.805245 122.533989,113.039493 130.967262,104.58753 C140.30051,95.2339402 141.514086,79.8749043 142.678597,67.6261326 C143.353493,60.5254529 142.825105,53.5889755 142.372887,46.4945731 C142.261377,44.7478165 141.387136,26 140.39109,26 Z"
+                                          id="react-path-238"
+                                        />
+                                      </defs>
+                                      <mask
+                                        fill="white"
+                                        id="react-mask-237"
+                                      >
+                                        <use
+                                          xlink:href="#react-path-238"
+                                        />
+                                      </mask>
+                                      <use
+                                        fill="#252E32"
+                                        fill-rule="evenodd"
+                                        id="Beardness"
+                                        xlink:href="#react-path-238"
+                                      />
+                                      <g
+                                        fill="#2C1B18"
+                                        id="Color/Hair/Brown"
+                                        mask="url(#react-mask-237)"
+                                      >
+                                        <g
+                                          id="Color"
+                                          transform="translate(-32.000000, 0.000000)"
+                                        >
+                                          <rect
+                                            height="244"
+                                            width="264"
+                                            x="0"
+                                            y="0"
+                                          />
+                                        </g>
+                                      </g>
+                                    </g>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </svg>
+                  </div>
+                  <figcaption
+                    class="note__author-name"
+                  >
+                    test-participants-others-user-name-1
+                  </figcaption>
+                </figure>
+                <div
+                  class="votes"
+                  role="none"
+                >
+                  <button
+                    class="dot-button vote-button-remove"
+                  >
+                    <span
+                      class="vote-button-remove__folded-corner"
+                    />
+                    <span>
+                      1
+                    </span>
+                  </button>
+                  <button
+                    class="dot-button vote-button-add"
+                    disabled=""
+                  >
+                    <svg
+                      class="vote-button-add__icon"
+                    >
+                      icon-add.svg
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </button>
+          </div>
+        </li>
+        <li>
+          <div
+            class="note__root"
+          >
+            <button
+              class="note note--stackBetween"
+            >
+              <p
+                class="note__text"
+              >
+                Lorem Ipsum
+              </p>
+              <div
+                class="note__footer"
+              >
+                <figure
+                  aria-roledescription="author"
+                  class="note__author"
+                >
+                  <div
+                    class="user-avatar note__user-avatar"
+                    title="test-participants-others-user-name-1"
+                  >
+                    <svg
+                      class="avatar note__user-avatar accent-color__backlog-blue"
+                      height="280px"
+                      version="1.1"
+                      viewBox="0 0 264 280"
+                      width="264px"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                    >
+                      <desc>
+                        Created with getavataaars.com
+                      </desc>
+                      <defs>
+                        <circle
+                          cx="120"
+                          cy="120"
+                          id="react-path-239"
+                          r="120"
+                        />
+                        <path
+                          d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z"
+                          id="react-path-240"
+                        />
+                        <path
+                          d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z"
+                          id="react-path-241"
+                        />
+                      </defs>
+                      <g
+                        fill="none"
+                        fill-rule="evenodd"
+                        id="Avataaar"
+                        stroke="none"
+                        stroke-width="1"
+                      >
+                        <g
+                          id="Avataaar/Circle"
+                          transform="translate(-825.000000, -1100.000000)"
+                        >
+                          <g
+                            transform="translate(825.000000, 1100.000000)"
+                          >
+                            <g
+                              fill-rule="evenodd"
+                              id="Circle"
+                              stroke-width="1"
+                              transform="translate(12.000000, 40.000000)"
+                            >
+                              <mask
+                                fill="white"
+                                id="react-mask-242"
+                              >
+                                <use
+                                  xlink:href="#react-path-239"
+                                />
+                              </mask>
+                              <use
+                                fill="#E6E6E6"
+                                id="Circle-Background"
+                                xlink:href="#react-path-239"
+                              />
+                              <g
+                                fill="#65C9FF"
+                                id="Color/Palette/Blue-01"
+                                mask="url(#react-mask-242)"
+                              >
+                                <rect
+                                  height="240"
+                                  id="🖍Color"
+                                  width="240"
+                                  x="0"
+                                  y="0"
+                                />
+                              </g>
+                            </g>
+                            <mask
+                              fill="white"
+                              id="react-mask-243"
+                            >
+                              <use
+                                xlink:href="#react-path-240"
+                              />
+                            </mask>
+                            <g
+                              id="Mask"
+                            />
+                            <g
+                              fill-rule="evenodd"
+                              id="Avataaar"
+                              mask="url(#react-mask-243)"
+                              stroke-width="1"
+                            >
+                              <g
+                                id="Body"
+                                transform="translate(32.000000, 36.000000)"
+                              >
+                                <mask
+                                  fill="white"
+                                  id="react-mask-244"
+                                >
+                                  <use
+                                    xlink:href="#react-path-241"
+                                  />
+                                </mask>
+                                <use
+                                  fill="#D0C6AC"
+                                  xlink:href="#react-path-241"
+                                />
+                                <g
+                                  fill="#FD9841"
+                                  id="Skin/👶🏽-03-Brown"
+                                  mask="url(#react-mask-244)"
+                                >
+                                  <g
+                                    id="Color"
+                                    transform="translate(0.000000, 0.000000)"
+                                  >
+                                    <rect
+                                      height="280"
+                                      width="264"
+                                      x="0"
+                                      y="0"
+                                    />
+                                  </g>
+                                </g>
+                                <path
+                                  d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z"
+                                  fill="#000000"
+                                  fill-opacity="0.100000001"
+                                  id="Neck-Shadow"
+                                  mask="url(#react-mask-244)"
+                                />
+                              </g>
+                              <g
+                                id="Clothing/Blazer-+-Sweater"
+                                transform="translate(0.000000, 170.000000)"
+                              >
+                                <defs>
+                                  <path
+                                    d="M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z"
+                                    id="react-path-245"
+                                  />
+                                </defs>
+                                <mask
+                                  fill="white"
+                                  id="react-mask-246"
+                                >
+                                  <use
+                                    xlink:href="#react-path-245"
+                                  />
+                                </mask>
+                                <use
+                                  fill="#E6E6E6"
+                                  fill-rule="evenodd"
+                                  id="Clothes"
+                                  xlink:href="#react-path-245"
+                                />
+                                <g
+                                  fill="#262E33"
+                                  fill-rule="evenodd"
+                                  id="Color/Palette/Black"
+                                  mask="url(#react-mask-246)"
+                                >
+                                  <rect
+                                    height="110"
+                                    id="🖍Color"
+                                    width="264"
+                                    x="0"
+                                    y="0"
+                                  />
+                                </g>
+                                <g
+                                  fill-rule="evenodd"
+                                  id="Blazer"
+                                  stroke-width="1"
+                                  transform="translate(32.000000, 28.000000)"
+                                >
+                                  <path
+                                    d="M68.784807,1.12222847 C30.512317,2.80409739 1.24427139e-14,34.3646437 0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z"
+                                    fill="#3A4C5A"
+                                    id="Saco"
+                                  />
+                                  <path
+                                    d="M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z"
+                                    fill="#E6E6E6"
+                                    id="Pocket-hanky"
+                                  />
+                                  <path
+                                    d="M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z"
+                                    fill="#2F4351"
+                                    id="Wing"
+                                  />
+                                  <path
+                                    d="M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z"
+                                    fill="#2F4351"
+                                    id="Wing"
+                                    transform="translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) "
+                                  />
+                                </g>
+                                <path
+                                  d="M156,21.5390062 C162.772319,26.1359565 167,32.6563196 167,39.8878801 C167,47.2887711 162.572015,53.9447688 155.520105,58.5564942 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,21.5390062 Z M108,21.5390062 C101.227681,26.1359565 97,32.6563196 97,39.8878801 C97,47.2887711 101.427985,53.9447688 108.479895,58.5564942 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5390062 Z"
+                                  fill="#F2F2F2"
+                                  fill-rule="evenodd"
+                                  id="Collar"
+                                />
+                              </g>
+                              <g
+                                fill="#000000"
+                                id="Face"
+                                transform="translate(76.000000, 82.000000)"
+                              >
+                                <g
+                                  fill-opacity="0.699999988"
+                                  id="Mouth/Default"
+                                  transform="translate(2.000000, 52.000000)"
+                                >
+                                  <path
+                                    d="M40,15 C40,22.7319865 46.2680135,29 54,29 L54,29 C61.7319865,29 68,22.7319865 68,15"
+                                    id="Mouth"
+                                  />
+                                </g>
+                                <g
+                                  fill-opacity="0.16"
+                                  id="Nose/Default"
+                                  transform="translate(28.000000, 40.000000)"
+                                >
+                                  <path
+                                    d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8"
+                                    id="Nose"
+                                  />
+                                </g>
+                                <g
+                                  id="Eyes/Cry-😢"
+                                  transform="translate(0.000000, 8.000000)"
+                                >
+                                  <circle
+                                    cx="30"
+                                    cy="22"
+                                    fill="#000000"
+                                    fill-opacity="0.599999964"
+                                    fill-rule="evenodd"
+                                    id="Eye"
+                                    r="6"
+                                  />
+                                  <path
+                                    d="M25,27 C25,27 19,34.2706667 19,38.2706667 C19,41.5846667 21.686,44.2706667 25,44.2706667 C28.314,44.2706667 31,41.5846667 31,38.2706667 C31,34.2706667 25,27 25,27 Z"
+                                    fill="#92D9FF"
+                                    fill-rule="nonzero"
+                                    id="Drop"
+                                  />
+                                  <circle
+                                    cx="82"
+                                    cy="22"
+                                    fill="#000000"
+                                    fill-opacity="0.599999964"
+                                    fill-rule="evenodd"
+                                    id="Eye"
+                                    r="6"
+                                  />
+                                </g>
+                                <g
+                                  fill-opacity="0.599999964"
+                                  id="Eyebrow/Natural/Default-Natural"
+                                >
+                                  <path
+                                    d="M26.0390934,6.21012364 C20.2775554,6.98346216 11.2929313,12.0052479 12.04426,17.8178111 C12.0689481,18.0080543 12.3567302,18.0673468 12.4809077,17.9084937 C14.9674041,14.7203351 34.1927973,10.0365481 41.1942673,11.0147151 C41.8350523,11.1044465 42.2580662,10.4430343 41.8210501,10.0302067 C38.0765663,6.49485426 31.2003792,5.51224825 26.0390934,6.21012364"
+                                    id="Eyebrow"
+                                    transform="translate(27.000000, 12.000000) rotate(5.000000) translate(-27.000000, -12.000000) "
+                                  />
+                                  <path
+                                    d="M85.0390934,6.21012364 C79.2775554,6.98346216 70.2929313,12.0052479 71.04426,17.8178111 C71.0689481,18.0080543 71.3567302,18.0673468 71.4809077,17.9084937 C73.9674041,14.7203351 93.1927973,10.0365481 100.194267,11.0147151 C100.835052,11.1044465 101.258066,10.4430343 100.82105,10.0302067 C97.0765663,6.49485426 90.2003792,5.51224825 85.0390934,6.21012364"
+                                    id="Eyebrow"
+                                    transform="translate(86.000000, 12.000000) scale(-1, 1) rotate(5.000000) translate(-86.000000, -12.000000) "
+                                  />
+                                </g>
+                              </g>
+                              <g
+                                fill-rule="evenodd"
+                                id="Top"
+                                stroke-width="1"
+                              >
+                                <defs>
+                                  <rect
+                                    height="280"
+                                    id="react-path-249"
+                                    width="264"
+                                    x="0"
+                                    y="0"
+                                  />
+                                  <path
+                                    d="M162.831093,71.6181521 C162.943003,73.0640672 163,74.5253775 163,76 L163,114 C163,136.339168 149.919579,155.623239 131,164.610951 L131,183 L135,183 C136.524404,183 137.037743,183.047374 138.538625,183.140731 C123.625568,210.496321 119.823733,233.574048 137.47212,247.543277 C139.169858,248.745686 140.396085,249.328761 140.607243,249.428275 C142.980035,250.546232 145.444343,251.76781 148.074296,252.382591 C152.696796,253.463231 158.007057,252.010459 162.630756,251.429524 C164.742591,251.164137 166.847633,251.000636 168.977452,250.993519 C171.542066,250.985014 174.188404,251.078221 176.119408,252.691023 C178.003455,254.264772 177.763079,259.889444 172.244213,262.523872 C176.3432,264.37915 181.25603,260.071171 182.931671,257.34666 C184.398107,254.962171 185.526058,252.378599 186.146081,249.741914 C186.917963,246.458686 186.967717,243.016815 186.363678,239.728032 C185.106048,232.88022 182.187563,226.295538 180.201011,219.605673 C179.468692,217.139607 178.51478,214.440611 178.099366,211.916746 C177.986471,211.23167 177.851996,208.701383 177.957698,208.171998 C178.036425,207.778517 178.016643,207.37549 179.372782,206.996069 C183.288539,205.899634 187.379733,204.063449 190.225486,201.476579 C193.590156,198.418295 195.343925,194.445304 196.758409,190.497133 C198.998525,184.244662 200.281132,177.550111 200.870584,171.057073 C200.99307,169.708269 201.062205,168.361722 201.086383,167.009968 C201.10077,166.193153 201.000862,165.263344 201.094375,164.445141 C201.247433,163.105189 201.039826,163.457881 202.341615,162.571291 C206.599454,159.671476 209.921164,155.448546 212.051783,151.200622 C215.39827,144.528634 215.834064,137.49302 213.117591,130.733555 C210.864687,125.12728 207.291411,119.498616 201.725588,115.887863 C199.588776,114.501568 197.334273,113.244582 195.115337,111.95809 C193.906862,111.257566 191.067703,110.342511 190.209501,109.441341 C189.609259,108.810939 190.56477,105.649382 190.685858,104.583322 C191.213967,99.9353218 190.606132,95.4261763 189.520542,90.8868298 C187.127368,80.8793698 177.487944,64.7382958 173.617944,55.2249863 C170.293437,47.0528435 165.481911,-0.0750473139 108.58669,0.198941193 C51.691468,0.4729297 41.4185991,50.4377258 33.7159879,59.7736698 C25.3512665,69.9121239 16.9074766,89.1763214 22.602684,107.035643 C17.099033,113.95809 4.54481227,124.04369 1.3853513,134.125611 C-0.596804833,140.450807 -0.511883829,147.495621 2.0289526,153.633016 C3.46621561,157.104393 5.52490056,160.250502 7.94045353,163.272162 C10.0566849,165.919435 12.4084972,168.423513 14.4577909,171.110359 C15.6946403,172.732013 16.0263318,173.129312 15.5599656,175.128304 C14.6406208,179.068318 12.7411877,182.853334 11.0939201,186.603116 C8.54189405,192.412639 6.39748885,197.82226 6.0799842,204.016065 C5.77766543,209.912373 7.40435223,226.688671 24.3409972,236.576369 C26.3249517,237.73442 28.2831301,238.743202 30.3833764,239.685161 C29.2931905,236.290327 30.5294405,224.161856 32.7263968,219.653578 C33.2860762,221.204589 34.2369916,222.697108 35.2618383,224.05216 C36.8611506,226.167444 40.636039,231.460774 45.4085994,231.706547 C43.4722007,228.722725 41.3891385,226.708805 40.7853002,223.10864 C44.7616013,225.068753 50.4191385,226.855644 55.0466338,226.691448 C58.4512667,226.570818 63.4709972,224.871405 66.0000446,222.74779 C57.6284322,224.074724 49.679027,221.3155 46.4820009,215.419366 C45.8146217,214.188415 45.3084926,212.898625 45.0141664,211.558847 C44.5967546,209.659309 43.9381673,206.615432 44.8227444,204.862039 C45.0375932,204.436124 45.3893685,204.001198 45.806628,203.572743 C45.7407358,203.49425 45.6753213,203.415537 45.6103845,203.336606 C51.303506,198.550494 58.4494475,190.932516 62.2752482,185.367908 C62.3459243,185.245492 62.416066,185.122857 62.4856702,185 L62.5253504,185 C62.5536953,184.957813 62.5818364,184.915755 62.6097716,184.873828 C67.874859,183.648086 73.3617452,183 79,183 L83,183 L83,164.610951 C64.0804213,155.623239 51,136.339168 51,114 L51,76 L51,76 C51,73.537425 51.1589523,71.1119753 51.4671565,68.733351 C55.4088487,67.4702772 59.365485,66.2776957 63.3986046,65.2045441 C67.8552588,64.0189378 77.7980098,62.0907786 81.6887904,61.1941723 L84.4252449,58.215348 L85.4876566,60.1702128 C87.6456492,60.0042337 99.5663601,58.212708 99.5663601,58.212708 L100.896323,54.9898699 C102.612526,56.7530625 103.834989,57.668872 103.834989,57.668872 C106.391211,57.460454 117.488488,57.2113208 120.119841,57.2427023 C120.119841,57.2427023 127.460212,57.5012269 129.240756,57.5714137 L130.907605,56.9328981 L131.456495,58.0098503 C132.910143,58.601117 141.699367,61.6008734 143.434153,62.138079 L145.980784,61.2323702 C147.100342,63.9256202 149.920119,63.586016 152.257345,65.7132858 C154.760315,67.9915694 159.482831,69.7372554 162.831093,71.6181521 Z"
+                                    id="react-path-250"
+                                  />
+                                </defs>
+                                <mask
+                                  fill="white"
+                                  id="react-mask-247"
+                                >
+                                  <use
+                                    xlink:href="#react-path-249"
+                                  />
+                                </mask>
+                                <g
+                                  id="Mask"
+                                />
+                                <g
+                                  id="Top/Long-Hair/Curvy"
+                                  mask="url(#react-mask-247)"
+                                >
+                                  <g
+                                    transform="translate(-1.000000, 0.000000)"
+                                  >
+                                    <path
+                                      d="M100.899906,42.4648024 C91.1016204,48.4721303 82.3855283,56.3273858 76.5871222,65.36024 C73.8252914,69.662826 71.5532049,74.1995784 69.4361743,78.7575668 C68.3739624,81.0447336 67.4048638,83.3600237 66.475928,85.6893613 C65.8894735,87.1594817 64.9889112,88.7449062 65.8359233,90.2878445 C66.3526427,89.9857996 66.5492598,90.0943892 66.224362,90.6353417 C68.9162579,91.3693254 72.6583769,89.3003017 74.9906073,88.5362205 C79.7539763,86.9753339 84.5203425,85.5025753 89.3986046,84.2045441 C93.8552588,83.0189378 103.79801,81.0907786 107.68879,80.1941723 L110.425245,77.215348 L111.487657,79.1702128 C113.645649,79.0042337 125.56636,77.212708 125.56636,77.212708 L126.896323,73.9898699 C128.612526,75.7530625 129.834989,76.668872 129.834989,76.668872 C132.391211,76.460454 143.488488,76.2113208 146.119841,76.2427023 C146.119841,76.2427023 153.460212,76.5012269 155.240756,76.5714137 L156.907605,75.9328981 L157.456495,77.0098503 C158.910143,77.601117 167.699367,80.6008734 169.434153,81.138079 L171.980784,80.2323702 C173.100342,82.9256202 175.920119,82.586016 178.257345,84.7132858 C181.34867,87.5271086 187.825645,89.5285179 190.917768,91.9756241 C192.024938,92.8519441 193.059576,93.7675012 194.100208,94.7015404 C195.255933,95.7385867 195.085291,95.890424 195.460742,97.0802141 C195.573237,97.4361731 196.715775,99.2788807 197.202722,99.4296139 C198.935909,99.9660566 187.048767,68.9435732 183.785603,64.9771662 C180.417736,60.8830307 158.574915,33.3231248 129.612057,34.2254634"
+                                      fill="#000000"
+                                      fill-opacity="0.16"
+                                      fill-rule="evenodd"
+                                      id="Top-Shadow"
+                                    />
+                                    <g
+                                      fill="none"
+                                      fill-rule="evenodd"
+                                      id="Hair"
+                                      stroke-width="1"
+                                      transform="translate(26.000000, 16.000000)"
+                                    >
+                                      <mask
+                                        fill="white"
+                                        id="react-mask-248"
+                                      >
+                                        <use
+                                          xlink:href="#react-path-250"
+                                        />
+                                      </mask>
+                                      <use
+                                        fill="#361A0A"
+                                        id="Hair-Mask"
+                                        xlink:href="#react-path-250"
+                                      />
+                                      <g
+                                        fill="#F59797"
+                                        id="Skin/👶🏽-03-Brown"
+                                        mask="url(#react-mask-248)"
+                                      >
+                                        <g
+                                          id="Color"
+                                          transform="translate(0.000000, 0.000000) "
+                                        >
+                                          <rect
+                                            height="280"
+                                            width="264"
+                                            x="0"
+                                            y="0"
+                                          />
+                                        </g>
+                                      </g>
+                                      <path
+                                        d="M62.6794556,184.462132 C69.755442,174.755405 62.148959,147.786913 56.1278159,137.800593 C72.9649824,130.137708 106.213574,131.553467 155.87359,142.047871 C151.079203,150.900348 149.123448,158.803527 150.006324,165.757409 C145.469118,171.332534 141.720304,177.127222 138.759883,183.141474 L103.888915,191.746789 C81.8528509,194.400378 68.1163643,191.97216 62.6794556,184.462132 Z"
+                                        fill="#000000"
+                                        fill-opacity="0.24"
+                                        id="Shadow"
+                                        mask="url(#react-mask-248)"
+                                      />
+                                    </g>
+                                    <path
+                                      d="M79.0404573,170.094305 C78.9812573,169.892618 78.8354573,169.667152 78.6348573,169.428842 C78.7708573,169.650142 78.9074573,169.871269 79.0404573,170.094305 Z M56.409572,120.375261 C57.2661752,126.5406 58.7356083,132.465374 60.8662263,138.377476 C62.9277086,144.09848 65.285915,149.836145 68.678559,155.067858 C71.8402179,159.943234 75.6031176,164.4923 78.6348973,169.428772 C77.8378388,168.48126 76.1633964,167.329804 75.5207941,166.65115 C74.4643769,165.535276 73.4750971,164.385382 72.5369698,163.193485 C70.6143583,160.749982 68.9003527,158.193833 67.243494,155.609567 C63.9913192,150.536843 61.5529875,145.034363 59.4397533,139.530668 C55.2902133,128.722708 51.1268862,115.61687 54.7738936,104.200899 C54.4921557,104.935095 55.2326668,106.688314 55.3491585,107.497319 C55.5525692,108.91069 55.7349995,110.333608 55.8267142,111.757219 C56.0123415,114.639678 56.0109428,117.505994 56.409572,120.375261 Z M68.8553146,165.041212 C67.4967783,163.309515 64.9739252,161.944396 63.4129772,160.279177 C61.9976938,158.769648 60.9019131,157.07822 59.9070386,155.339754 C57.6517365,151.39922 56.1697151,147.374505 55.6897616,142.969154 C55.7992598,143.49177 56.6083072,144.395543 56.8630702,144.824778 C57.4766993,145.858902 58.0839345,146.89424 58.6508072,147.948671 C59.7481863,149.989667 60.6639345,152.099744 61.7731027,154.135533 C63.8106073,157.875421 66.402796,161.495374 68.8553146,165.041212 Z M73.5320242,183.498629 C74.6465874,185.460651 75.5723262,187.464851 76.1569823,189.60079 C76.4654954,190.727599 76.7138643,191.869508 76.9272658,193.013501 C76.9962017,193.382508 77.0093894,194.709963 77.1846264,195.283955 C74.9700864,190.992812 73.2798587,186.448779 70.6421125,182.34214 C68.0381348,178.288092 64.6948448,174.560527 61.1958996,171.061031 C57.5013364,167.36575 53.7855929,163.879099 51.8038364,159.214262 C50.0788411,155.153619 49.4126608,150.996124 49.8138875,146.658464 C49.8160855,148.56911 51.5706533,151.280256 52.1766896,153.126681 C53.0063178,155.654018 53.6655046,158.231689 54.9143429,160.634229 C57.039566,164.722991 60.873,167.876911 64.0792175,171.321558 C67.631513,175.137643 71.0245567,179.084252 73.5320242,183.498629 Z M59.2286696,174.179456 C60.2874847,175.196917 61.2164205,176.28259 62.0352588,177.454354 C62.9328239,178.738937 63.5914112,180.09017 64.1800637,181.504062 C64.6869921,182.721301 64.9105841,184.986375 65.7074428,186.0021 C63.1288415,182.856337 60.4739112,179.884838 58.6955655,176.312444 C58.0893295,175.089825 57.1480051,173.289222 56.4530516,171.817184 C56.6844363,172.409922 58.7059559,173.677148 59.2286696,174.179456 Z M48.9033745,180.528033 C51.7405353,184.777866 55.450684,188.609052 57.877027,193.056233 C60.7067946,198.242644 61.9518364,203.862978 62.202803,209.595957 C62.3216924,212.307277 62.3152983,215.0606 61.9498383,217.764455 C61.7540204,219.211673 61.4399126,220.650211 61.0810465,222.075732 C60.944973,222.616747 60.2406283,224.002173 60.1037556,224.846586 C59.8140251,214.305575 61.5584024,203.763696 56.0767017,193.942823 C53.4811162,189.292219 49.4912277,185.327212 46.398105,180.924811 C43.6164926,176.966226 40.8998197,173.083838 38.6846803,168.851361 C40.0408188,170.567263 42.485145,171.915893 44.0009349,173.619818 C45.8995688,175.753674 47.3488206,178.199606 48.9033745,180.528033 Z M60.1036574,224.846603 C60.0710574,225.050581 60.0700574,225.224111 60.1172574,225.346603 C60.1116574,225.180112 60.1082574,225.01327 60.1036574,224.846603 Z M50.5604331,202.493815 C50.5610325,202.989874 51.376474,204.011501 51.5992667,204.528562 C52.1207816,205.73799 52.5455864,207.007473 52.7573894,208.289626 C53.1752007,210.818004 52.6269108,213.429521 51.6899823,215.850286 C49.7909489,220.757251 46.8161162,225.102895 43.0767946,229.15 C44.4121524,227.402335 44.9438578,224.56136 45.8833838,222.612182 C46.8478866,220.611106 47.8829238,218.6411 48.7335325,216.600624 C50.652947,211.995842 50.4835046,207.289696 50.5604331,202.493815 Z M41.9174331,221.200893 C42.3180604,220.652936 42.1102537,218.018161 42.3222565,217.328919 C42.714092,216.055618 43.3920613,214.827097 44.170737,213.693866 C43.7551236,214.392828 44.3691524,216.160106 44.1663411,217.067177 C43.8338504,218.55553 42.9962296,219.998582 41.9174331,221.200893 Z M99.6077106,42.748374 C99.5269106,42.804974 99.4471106,42.908174 99.3681106,43.044574 C99.4481106,42.945974 99.5267106,42.846574 99.6077106,42.748374 Z M84.8469387,64.3317143 C86.2672175,63.085837 87.0237138,60.1410677 88.0032026,58.5522183 C89.1283559,56.7269681 90.4213532,54.9730547 91.6476125,53.1960567 C94.0795502,49.6719145 96.3744154,46.2123399 99.3680307,43.0054816 C98.7464089,43.9398028 98.1949219,46.7736616 97.8536394,47.5189663 C96.9620688,49.4667561 95.8988578,51.3334892 94.6328355,53.1235049 C91.7722965,57.1680066 88.7029517,60.9266404 84.8469387,64.3317143 Z M84.3117165,54.1218036 C85.0620186,52.7952168 86.2055548,51.6739619 87.4917584,50.7082248 C86.9188913,51.2107066 86.6607314,53.2831189 86.2670976,53.9831221 C85.472237,55.3952784 84.3143141,56.6130375 83.0714703,57.7545999 C83.7352528,57.1726235 83.842553,54.9516363 84.3117165,54.1218036 Z M203.505599,152.127968 C203.498805,152.179518 203.485417,152.282271 203.464637,152.438483 C203.462638,150.913159 202.784469,149.237352 202.704144,147.668984 C202.592048,145.478545 202.906556,143.353715 203.787137,141.277137 C205.526519,137.175704 208.790083,134.069516 212.950612,131.638511 C211.805877,132.313173 210.683921,134.851617 209.949604,135.906916 C208.84663,137.493162 207.668126,139.094161 206.735993,140.757819 C204.793001,144.225725 204.229725,148.375062 203.505599,152.127968 Z M201.998401,130.481881 C201.761221,131.706583 201.448912,132.921738 201.009121,134.107908 C200.534762,135.386937 199.915938,136.630558 199.22578,137.835993 C198.79578,138.586852 197.246621,140.162684 197.24762,140.993211 C197.165296,136.095098 198.975812,131.657983 202.419809,127.7355 C202.04236,128.392806 202.137271,129.766083 201.998401,130.481881 Z M201.196906,165.719988 C204.852905,165.202752 208.302496,166.981313 210.618342,169.271033 C211.855791,170.494694 212.955568,171.900428 213.683091,173.404055 C214.229783,174.534509 214.228783,176.387356 214.9631,177.323587 C213.165772,174.905078 210.886892,172.951214 208.638584,170.859535 C207.075238,169.404855 203.950944,165.678852 201.196906,165.719988 Z M200.41897,176.096698 C200.227148,176.031957 198.485169,175.539368 198.081944,175.776984 C198.679388,175.510035 199.412106,175.184941 200.068895,175.097983 C204.35311,174.529024 209.561066,178.239232 210.13633,181.81909 C209.657576,180.592826 207.111145,179.578489 205.959616,178.968568 C204.136711,178.002484 202.395531,176.832456 200.41897,176.096698 Z M202.227687,183.908269 C202.969797,184.089822 204.54713,185.083504 205.275252,185.072742 C202.345977,185.143906 199.703236,184.81829 196.883858,184.158729 C197.036117,184.200212 198.643022,183.702937 198.694974,183.695647 C199.910043,183.523987 201.052381,183.620492 202.227687,183.908269 Z M190.882541,197.765243 C195.171151,197.522941 200.218656,198.149351 204.314046,199.181739 C206.346955,199.694288 208.253382,200.468058 210.006351,201.476666 C211.420436,202.290531 213.935896,203.408661 214.881616,204.614097 C211.142494,198.162369 203.032039,194.811448 194.722769,196.473197 C193.615199,196.695886 191.914181,197.749796 190.882541,197.765243 Z M189.923153,210.197773 C192.611453,209.233424 195.584487,208.30431 198.505969,208.169273 C201.277391,208.042395 204.351332,208.458613 206.915546,209.342078 C206.033367,209.102206 203.92333,209.674289 202.995793,209.779298 C201.699199,209.926138 200.399608,210.077837 199.099817,210.196558 C197.506299,210.342009 195.898395,210.422718 194.298883,210.41942 C193.159543,210.41699 190.979371,209.87858 189.923153,210.197773 Z M179.458947,227.410508 C179.711912,231.383499 182.010574,234.84533 185.39043,237.491388 C188.973097,240.296087 193.769036,241.572686 196.369816,245.319691 C197.637437,247.145462 198.312809,249.270812 198.20431,251.417686 C198.148362,252.524014 197.870221,253.636069 197.5695,254.712196 C197.371684,255.420184 196.66734,256.580144 196.667939,257.270775 C196.69911,253.384221 196.751661,248.859281 194.031592,245.598095 C191.300932,242.324066 186.539161,241.170701 183.203065,238.482813 C179.924714,235.841442 177.437828,232.389157 176.877749,228.498264 C176.425569,225.354411 176.648562,219.871892 179.90773,217.738557 C179.246345,218.128392 179.377224,220.111764 179.361438,220.669267 C179.298097,222.900321 179.317079,225.185182 179.458947,227.410508 Z M177.005789,242.672904 C177.402221,243.19257 179.575399,243.82436 180.213805,244.182606 C181.67045,245.000116 183.07914,245.92923 184.234665,247.059684 C186.55111,249.326146 188.044121,252.504886 188.151821,255.553623 C188.151821,254.833139 186.505553,253.096583 186.043183,252.481107 C185.275297,251.458613 184.407904,250.511969 183.524526,249.564283 C181.371329,247.253734 179.135209,244.999942 177.005789,242.672904 Z M229.167807,153.791051 C230.371887,154.841663 231.178936,156.147595 231.842519,157.49987 C233.373295,160.619424 233.65823,164.217333 232.431571,167.500388 C232.634582,166.795698 232.030544,165.31585 231.860502,164.601614 C231.488248,163.038626 230.906389,161.56225 230.298355,160.059664 C229.118053,157.144401 228.163741,154.41208 226.113648,151.858014 C226.644354,152.52556 228.442481,153.157872 229.167807,153.791051 Z M171.509602,41.9832998 C171.510002,42.3148163 172.426549,43.2758671 172.633357,43.6374111 C173.149677,44.5392749 173.557297,45.4857459 173.696967,46.4924453 C173.85542,47.6336606 173.6616,48.7505762 173.315522,49.8605491 C173.109914,50.5202844 172.131624,51.7949741 172.132423,52.3894475 C171.972572,48.891167 171.198691,45.5298324 171.509602,41.9832998 Z M179.146978,48.8048339 C179.312224,50.0477605 178.906202,51.4491555 178.183074,52.546805 C178.314952,52.2364639 177.729296,50.1642252 177.710314,49.7849773 C177.650969,48.6118253 177.77925,47.4056953 177.856378,46.2332376 C177.857178,46.8738803 179.039478,47.9958294 179.146978,48.8048339 Z M118.377388,50.3732542 C117.142336,51.8857333 115.738043,53.3032702 114.227248,54.6164922 C113.2036,55.5060327 111.243024,56.5057893 110.46315,57.5267214 C113.964293,51.8147436 118.00913,46.8878178 122.764906,41.8951095 C122.049172,42.8155452 121.862346,44.8121078 121.337434,45.8885819 C120.563354,47.4758692 119.527518,48.9645693 118.377388,50.3732542 Z M124.275361,52.8515919 C124.845431,52.5155626 125.378934,50.859195 125.81333,50.3013446 C126.54465,49.3623371 127.437619,48.4554398 128.390733,47.6728177 C128.186123,47.8927295 127.788693,49.7158968 127.5657,50.0739694 C126.843372,51.2344508 125.56616,52.1809219 124.275361,52.8515919 Z"
+                                      fill="#FFFFFF"
+                                      fill-opacity="0.6"
+                                      fill-rule="evenodd"
+                                      id="Lights"
+                                    />
+                                    <g
+                                      id="Facial-Hair/Beard-Medium"
+                                      transform="translate(49.000000, 72.000000)"
+                                    >
+                                      <defs>
+                                        <path
+                                          d="M105.017591,94.1296214 C101.150441,99.7213834 98.257542,95.9467308 94.1374777,92.8762163 C91.6567227,91.0272796 87.9608129,88.7275108 84.5044337,88.8410391 C81.0477114,88.7275108 77.3518016,91.0272796 74.8710466,92.8762163 C70.7509822,95.9467308 67.8580835,99.7213834 63.9909333,94.1296214 C61.0884259,89.9323547 62.3028943,82.8739117 65.014944,78.9027173 C68.8738581,73.2512381 74.1088724,75.9847769 79.9622738,75.3400279 C81.5538829,75.1648137 83.1526985,74.7228407 84.5044337,74 C85.856169,74.7228407 87.4546414,75.1648137 89.0462504,75.3400279 C94.899995,75.9847769 100.134666,73.2512381 103.993923,78.9027173 C106.70563,82.8739117 107.920098,89.9323547 105.017591,94.1296214 M140.39109,26 C136.966521,40.0748212 135.393023,54.4337754 132.909944,68.6711471 C132.392536,71.6390145 131.826063,74.5963095 131.224594,77.5496398 C131.098329,78.1697764 130.973781,80.4725746 130.362704,80.7643064 C128.511632,81.6484223 124.739149,76.9466834 123.730409,75.8851496 C121.196893,73.219256 118.684993,70.5292442 115.599415,68.437233 C109.364783,64.2102603 102.065485,61.7108818 94.4700836,61.117837 C91.2922091,60.8693859 86.9951134,61.3025234 84.000116,63.1104016 C81.0051185,61.3025234 76.7080229,60.8693859 73.5298053,61.117837 C65.9344039,61.7108818 58.6351055,64.2102603 52.4004739,68.437233 C49.3148957,70.5292442 46.8033387,73.219256 44.2694796,75.8851496 C43.2607395,76.9466834 39.4882573,81.6484223 37.6371849,80.7643064 C37.0261079,80.4725746 36.9015594,78.1697764 36.7752954,77.5496398 C36.1738255,74.5963095 35.6073527,71.6390145 35.0899445,68.6711471 C32.6072086,54.4337754 31.0337113,40.0748212 27.6091415,26 C26.6127533,26 25.7385119,44.7478165 25.6273446,46.4945731 C25.174784,53.5889755 24.6463963,60.5254529 25.3216346,67.6261326 C26.485803,79.8749043 27.6993791,95.2339402 37.032627,104.58753 C45.4659003,113.039493 57.7103052,114.806417 68.2713185,120.141327 C69.631059,120.828202 71.4347824,121.676306 73.3798667,122.37111 C75.4289129,123.934171 79.4926946,125 84.1740722,125 C89.0846465,125 93.3155222,123.827456 95.2540874,122.137856 C96.9548781,121.49261 98.5180822,120.752874 99.7285704,120.141327 C110.288776,114.805245 122.533989,113.039493 130.967262,104.58753 C140.30051,95.2339402 141.514086,79.8749043 142.678597,67.6261326 C143.353493,60.5254529 142.825105,53.5889755 142.372887,46.4945731 C142.261377,44.7478165 141.387136,26 140.39109,26 Z"
+                                          id="react-path-252"
+                                        />
+                                      </defs>
+                                      <mask
+                                        fill="white"
+                                        id="react-mask-251"
+                                      >
+                                        <use
+                                          xlink:href="#react-path-252"
+                                        />
+                                      </mask>
+                                      <use
+                                        fill="#252E32"
+                                        fill-rule="evenodd"
+                                        id="Beardness"
+                                        xlink:href="#react-path-252"
+                                      />
+                                      <g
+                                        fill="#2C1B18"
+                                        id="Color/Hair/Brown"
+                                        mask="url(#react-mask-251)"
+                                      >
+                                        <g
+                                          id="Color"
+                                          transform="translate(-32.000000, 0.000000)"
+                                        >
+                                          <rect
+                                            height="244"
+                                            width="264"
+                                            x="0"
+                                            y="0"
+                                          />
+                                        </g>
+                                      </g>
+                                    </g>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </svg>
+                  </div>
+                  <figcaption
+                    class="note__author-name"
+                  >
+                    test-participants-others-user-name-1
+                  </figcaption>
+                </figure>
+                <div
+                  class="votes"
+                  role="none"
+                >
+                  <button
+                    class="dot-button vote-button-add"
+                  >
+                    <svg
+                      class="vote-button-add__icon"
+                    >
+                      icon-add.svg
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </button>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </section>
diff --git a/src/utils/test/getTestApplicationState.ts b/src/utils/test/getTestApplicationState.ts
index 5de19865..ea2ebaf4 100644
--- a/src/utils/test/getTestApplicationState.ts
+++ b/src/utils/test/getTestApplicationState.ts
@@ -75,6 +75,13 @@ export default (overwrite?: Partial<ApplicationState>): ApplicationState => ({
       visible: true,
       index: 1,
     },
+    {
+      id: "test-columns-id-3",
+      name: "test-columns-name-3",
+      color: "planning-pink",
+      visible: true,
+      index: 2,
+    },
   ],
   notes: [
     {