Homescreen improvements

4 years ago · 50d3b33bc2
10 changed files with 183 additions and 145 deletions
--- a/packages/concordia-app/package.json
+++ b/packages/concordia-app/package.json
@ -47,7 +47,7 @@
    "react-timeago": "~5.2.0",
    "redux-saga": "~1.1.3",
    "semantic-ui-css": "~2.4.1",
-    "semantic-ui-react": "~1.2.1",
+    "semantic-ui-react": "~2.0.3",
    "web3": "~1.3.3"
  },
  "devDependencies": {
--- a/packages/concordia-app/public/locales/en/translation.json
+++ b/packages/concordia-app/public/locales/en/translation.json
@ -72,7 +72,6 @@
  "topic.create.form.post.button": "Post",
  "topic.create.form.subject.field.label": "Topic subject",
  "topic.create.form.subject.field.placeholder": "Subject",
-  "topic.list.row.author": "by {{author}}",
  "topic.list.row.number.of.replies": "{{numberOfReplies}} replies",
  "topic.list.row.topic.id": "#{{id}}",
  "username.selector.error.username.empty.message": "Username is required",
--- a/packages/concordia-app/src/components/LoadingScreen.jsx
+++ b/packages/concordia-app/src/components/LoadingScreen.jsx
@ -1,9 +1,8 @@
 import React from 'react';
+import { Loader } from 'semantic-ui-react';

 const LoadingScreen = () => (
-    <div>
-        Loading
-    </div>
+    <Loader active />
 );

 export default LoadingScreen;
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
@ -2,12 +2,11 @@ import React, {
  memo, useEffect, useMemo, useState,
 } from 'react';
 import {
-  Dimmer, Grid, Image, List, Placeholder,
+  Dimmer, Grid, Image, Item, List, Placeholder, Segment,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TimeAgo from 'react-timeago';
-import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
@ -34,7 +33,6 @@ const TopicListRow = (props) => {
  const topics = useSelector((state) => state.orbitData.topics);
  const users = useSelector((state) => state.orbitData.users);
  const dispatch = useDispatch();
-  const history = useHistory();
  const { t } = useTranslation();

  useEffect(() => {
@ -98,7 +96,6 @@ const TopicListRow = (props) => {
    ? (
        <Image
          className="profile-picture"
-          avatar
          src={topicAuthorMeta[USER_PROFILE_PICTURE]}
        />
    )
@ -124,38 +121,40 @@ const TopicListRow = (props) => {
    return authorAvatar;
  }, [authorAvatar, topicAuthorAddress]);

-  return useMemo(() => {
-    const handleTopicClick = () => {
-      history.push(`/topics/${topicId}`);
-    };
-
-    return (
-        <Dimmer.Dimmable as={List.Item} onClick={handleTopicClick} blurring dimmed={loading} className="list-item">
+  return useMemo(() => (
+      <Dimmer.Dimmable as={List.Item} blurring dimmed={loading} className="topic-row">
+          <Segment raised className="topic-row-segment" as="a">
+              <Grid doubling columns={2}>
+                  <Grid.Column width={1} className="topic-row-avatar">
+                      <Item>
                          {authorAvatarLink}
-            <List.Content className="list-content">
-                <List.Header>
-                    <Grid>
-                        <Grid.Column floated="left" width={14}>
+                      </Item>
+                  </Grid.Column>
+                  <Grid.Column width={15} className="topic-row-content">
+                      <Link to={`/topics/${topicId}`} onClick={stopClickPropagation}>
+                          <Grid verticalAlign="middle" columns={2}>
+                              <Grid.Row>
+                                  <Grid.Column floated="left" width={14} className="topic-row-subject">
                                      {topicSubject !== null
                                        ? topicSubject
                                        : <Placeholder><Placeholder.Line length="very long" /></Placeholder>}
                                  </Grid.Column>
                                  <Grid.Column floated="right" width={2} textAlign="right">
-                            <span className="topic-metadata">
+                                      <span className="topic-row-metadata">
                                          {t('topic.list.row.topic.id', { id: topicId })}
                                      </span>
                                  </Grid.Column>
-                    </Grid>
-                </List.Header>
-                <List.Description>
-                    <Grid verticalAlign="middle">
+                              </Grid.Row>
+                              <Grid.Row>
                                  <Grid.Column floated="left" width={14}>
                                      {topicAuthor !== null && timeAgo !== null
                                        ? (
                                            <div>
-                                      {t('topic.list.row.author', { author: topicAuthor })}
-                                      ,&nbsp;
                                                <TimeAgo date={timeAgo} />
+                                                      &nbsp;•&nbsp;
+                                                <Link to={`/users/${topicAuthorAddress}`} onClick={stopClickPropagation}>
+                                                    {topicAuthor}
+                                                </Link>
                                            </div>
                                        )
                                        : <Placeholder><Placeholder.Line length="long" /></Placeholder>}
@ -163,18 +162,24 @@ const TopicListRow = (props) => {
                                  <Grid.Column floated="right" width={2} textAlign="right">
                                      {numberOfReplies !== null
                                        ? (
-                                  <span className="topic-metadata">
+                                            <span className="topic-row-metadata">
                                                {t('topic.list.row.number.of.replies', { numberOfReplies })}
                                            </span>
                                        )
                                        : <Placeholder fluid><Placeholder.Line /></Placeholder>}
                                  </Grid.Column>
+                              </Grid.Row>
                          </Grid>
-                </List.Description>
-            </List.Content>
+
+                      </Link>
+                  </Grid.Column>
+              </Grid>
+
+          </Segment>
+
      </Dimmer.Dimmable>
-    );
-  }, [authorAvatarLink, history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicId, topicSubject]);
+
+  ), [authorAvatarLink, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorAddress, topicId, topicSubject]);
 };

 TopicListRow.defaultProps = {
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css
@ -1,21 +1,49 @@
-.topic-metadata {
-    font-size: 12px !important;
-    font-weight: initial;
-}
-
-.list-item {
+.topic-row {
    display: flex !important;
    text-align: start;
 }

-.profile-picture {
-    cursor: pointer;
-    max-width: 36px;
-    max-height: 36px;
+.topic-row-segment {
+    flex-grow: 1;
+}
+
+.topic-row-segment:hover {
+   background-color: rgba(0, 0, 0, 0.03);
+}
+
+.topic-row-segment div {
+    color: black;
+}
+
+.topic-row-avatar {
+    margin: auto;
+    padding-left: 0.75em !important;
+    padding-right: 0 !important;
+    font-size: 2em;
+}
+
+.topic-row-avatar i {
+    text-align: left !important;
    margin:0;
-    vertical-align: middle;
 }

-.list-content {
-    flex-grow: 1;
+.topic-row-content {
+    padding-left: 2em !important;
+}
+
+.topic-row-subject {
+    font-size: 1.25em;
+    font-weight: bold;
+}
+
+.topic-row-metadata {
+    font-size: 12px !important;
+    font-weight: initial;
+}
+
+.profile-picture {
+    border-radius: 50%;
+    max-width: none !important;
+    width: 2em;
+    height: 2em;
 }
--- a/packages/concordia-app/src/components/TopicList/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/index.jsx
@ -3,10 +3,12 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { List } from 'semantic-ui-react';
+import { useHistory } from 'react-router';
+import { Button, List } from 'semantic-ui-react';
 import TopicListRow from './TopicListRow';
 import { drizzle } from '../../redux/store';
 import { FORUM_CONTRACT } from '../../constants/contracts/ContractNames';
+import './styles.css';

 const { contracts: { [FORUM_CONTRACT]: { methods: { getTopic: { cacheCall: getTopicChainData } } } } } = drizzle;

@ -15,6 +17,8 @@ const TopicList = (props) => {
  const [getTopicCallHashes, setGetTopicCallHashes] = useState([]);
  const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
  const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
+  const hasSignedUp = useSelector((state) => state.user.hasSignedUp);
+  const history = useHistory();

  useEffect(() => {
    if (drizzleInitialized && !drizzleInitializationFailed) {
@ -51,9 +55,21 @@ const TopicList = (props) => {
    }), [getTopicCallHashes, topicIds]);

  return (
-      <List selection divided id="topic-list" size="big">
+      <div>
+          {hasSignedUp && history.location.pathname === '/home' && (
+              <Button
+                  content="New Topic"
+                  icon="plus"
+                  labelPosition="left"
+                  positive
+                  id="new-topic-button"
+                  onClick={() => history.push('/topics/new')}
+              />
+          )}
+          <List id="topic-list" size="big">
              {topics}
          </List>
+      </div>
  );
 };

--- a/packages/concordia-app/src/components/TopicList/styles.css
+++ b/packages/concordia-app/src/components/TopicList/styles.css
@ -1,3 +1,11 @@
 #topic-list{
    height: 100%;
+    margin-bottom: 4em;
+    clear: both;
+}
+
+#new-topic-button{
+    float:right;
+    margin-bottom: 2em;
+
 }
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
+++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
@ -42,17 +42,6 @@ const MainLayoutMenu = () => {
                      <img src={appLogo} alt="app_logo" />
                  </Menu.Item>
                  <Menu.Menu position="right">
-                      {hasSignedUp && history.location.pathname === '/home' && (
-                          <Menu.Item
-                            link
-                            name="create-topic"
-                            key="create-topic"
-                            onClick={() => history.push('/topics/new')}
-                            position="right"
-                          >
-                              {t('topbar.button.create.topic')}
-                          </Menu.Item>
-                      )}
                      {hasSignedUp
                        ? (
                            <Menu.Item
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css
+++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css
@ -5,5 +5,5 @@
 .ui.inverted.menu {
    background: #0B2540 !important;
    border-radius: 0;
-    margin-bottom: 5em;
+    margin-bottom: 2em;
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1524,17 +1524,17 @@
    level "~6.0.1"
    orbit-db-identity-provider "~0.3.1"

-"@fluentui/react-component-event-listener@~0.51.0":
-  version "0.51.6"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.6.tgz#8e193b8bb20570aed09581080f110f5a95b51432"
-  integrity sha512-XbT3p28N6Bz6TsQSf4drCqJNL133DUYCSvyiWsDl7Y5IWzAMKwGcc4nETxqjP07XvInD9fJW9vOqWFlpLBe1xg==
+"@fluentui/react-component-event-listener@~0.51.6":
+  version "0.51.7"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.7.tgz#158adb970d8bc982c91c57fd1322a0036042d86e"
+  integrity sha512-NjVm+crN0T9A7vITL8alZeHnuV8zi2gos0nezU/2YOxaUAB9E4zKiPxt/6k5U50rJs/gj8Nu45iXxnjO41HbZg==
  dependencies:
    "@babel/runtime" "^7.10.4"

-"@fluentui/react-component-ref@~0.51.0":
-  version "0.51.6"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.6.tgz#ba1fc8a82a49f4775a043079ca8a234f3c02a1c4"
-  integrity sha512-FrUJKizIdL2PlUji5zMB3cTNICv/zk4/nbX6W9F+FmaEAozEm62MRZWOSAX83bnzPQX0OtPBYTenh+5dAI+BMA==
+"@fluentui/react-component-ref@~0.51.6":
+  version "0.51.7"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.7.tgz#bfb0312e926c213bed35e53ee5105a68732eea99"
+  integrity sha512-CX27jVJYaFoBCWpuWAizQZ2se137ku1dmDyn8sw+ySNJa+kkQf7LnMydiPW5K7cRdUSqUJW3eS4EjKRvVAx8xA==
  dependencies:
    "@babel/runtime" "^7.10.4"
    react-is "^16.6.3"
@ -2004,6 +2004,11 @@
  resolved "https://registry.yarnpkg.com/@openzeppelin/contracts/-/contracts-3.2.0.tgz#3e6b3a7662d8ed64271ade96ef42655db983fd9d"
  integrity sha512-bUOmkSoPkjnUyMiKo6RYnb0VHBk5D9KKDAgNLzF41aqAM3TeE0yGdFF5dVRcV60pZdJLlyFT/jjXIZCWyyEzAQ==

+"@popperjs/core@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@ -2111,7 +2116,7 @@
    redux-thunk "^2.3.0"
    reselect "^4.0.0"

-"@semantic-ui-react/event-stack@^3.1.0":
+"@semantic-ui-react/event-stack@^3.1.2":
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz#14fac9796695aa3967962d94ea9733a85325f9c4"
  integrity sha512-Yd0Qf7lPCIjzJ9bZYfurlNu2RDXT6KKSyubHfYK3WjRauhxCsq6Fk2LMRI9DEvShoEU+AsLSv3NGkqXAcVp0zg==
@ -4751,14 +4756,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

-create-react-context@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
-  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 cross-env@^7.0.3:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
@ -5168,7 +5165,7 @@ deep-eql@^3.0.1:
  dependencies:
    type-detect "^4.0.0"

-deep-equal@^1.0.1, deep-equal@^1.1.1:
+deep-equal@^1.0.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@ -7329,11 +7326,6 @@ growly@^1.3.0:
  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=

-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
-  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
 gzip-size@5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@ -11175,6 +11167,11 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.15:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
+  integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==
+
 lodash._reinterpolate@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@ -13390,11 +13387,6 @@ pnp-webpack-plugin@1.6.4:
  dependencies:
    ts-pnp "^1.1.6"

-popper.js@^1.14.4:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.26:
  version "1.0.28"
  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@ -14223,7 +14215,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -14545,6 +14537,11 @@ react-error-overlay@^6.0.7:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
  integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==

+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-i18next@^11.7.3:
  version "11.8.5"
  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.8.5.tgz#a093335822e36252cda6efc0f55facef6253643f"
@ -14558,6 +14555,11 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-i
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+"react-is@^16.8.6 || ^17.0.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 react-markdown@^5.0.3:
  version "5.0.3"
  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-5.0.3.tgz#41040ea7a9324b564b328fb81dd6c04f2a5373ac"
@ -14582,17 +14584,12 @@ react-particles-js@^3.4.0:
    lodash "^4.17.11"
    tsparticles "^1.18.10"

-react-popper@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
-  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+react-popper@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.4.tgz#d2ad3d2474ac9f1abf93df3099d408e5aa6a2e22"
+  integrity sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==
  dependencies:
-    "@babel/runtime" "^7.1.2"
-    create-react-context "^0.3.0"
-    deep-equal "^1.1.1"
-    popper.js "^1.14.4"
-    prop-types "^15.6.1"
-    typed-styles "^0.0.7"
+    react-fast-compare "^3.0.1"
    warning "^4.0.2"

 react-redux@~7.2.1:
@ -15389,21 +15386,23 @@ semantic-ui-css@~2.4.1:
  dependencies:
    jquery x.*

-semantic-ui-react@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-1.2.1.tgz#c58603db072d3628fc2d9b626f6c3b39535deca3"
-  integrity sha512-p0HKdHg8ZGhnanyNuGOyTp5M6mVGWzTULPY02uBYHxXMzsyRPoRDlUa/tbaU0UdFpg96CmToG4WrvkINqhcZ+Q==
+semantic-ui-react@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-2.0.3.tgz#39091e24078e28129ff9b1beb7dbfc84ca85544b"
+  integrity sha512-a0hGN6XXw64sRSKwWqMCKSI/AGLohxNeWuErS39eswvBbUnLjBij8ZoEdiqDiz/PuWpwYIRjgmQVrut+7h3b2g==
  dependencies:
    "@babel/runtime" "^7.10.5"
-    "@fluentui/react-component-event-listener" "~0.51.0"
-    "@fluentui/react-component-ref" "~0.51.0"
-    "@semantic-ui-react/event-stack" "^3.1.0"
+    "@fluentui/react-component-event-listener" "~0.51.6"
+    "@fluentui/react-component-ref" "~0.51.6"
+    "@popperjs/core" "^2.6.0"
+    "@semantic-ui-react/event-stack" "^3.1.2"
    clsx "^1.1.1"
    keyboard-key "^1.1.0"
    lodash "^4.17.19"
+    lodash-es "^4.17.15"
    prop-types "^15.7.2"
-    react-is "^16.8.6"
-    react-popper "^1.3.7"
+    react-is "^16.8.6 || ^17.0.0"
+    react-popper "^2.2.4"
    shallowequal "^1.1.0"

 semver-diff@^3.1.1:
@ -16767,11 +16766,6 @@ type@^2.0.0:
  resolved "https://registry.yarnpkg.com/type/-/type-2.1.0.tgz#9bdc22c648cf8cf86dd23d32336a41cfb6475e3f"
  integrity sha512-G9absDWvhAWCV2gmF1zKud3OyC61nZDwWvBL2DApaVFogI07CprggiQAOOjvp2NRjYWFzPyu7vwtDrQFq8jeSA==

-typed-styles@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
-  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
-
 typedarray-to-buffer@^3.1.5, typedarray-to-buffer@~3.1.5:
  version "3.1.5"
  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@ -17281,7 +17275,7 @@ walker@^1.0.7, walker@~1.0.5:
  dependencies:
    makeerror "1.0.x"

-warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.2:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==