From 35860c7bbbc929bf848dd5c32f1431e699a6ca07 Mon Sep 17 00:00:00 2001
From: RabbitDoge <72658581+RabbitDoge@users.noreply.github.com>
Date: Tue, 17 Nov 2020 17:35:38 +0900
Subject: [PATCH] feat: Add new icons (#63)

---
 src/components/Svg/Icons/Community.tsx   | 13 +++++++++++++
 src/components/Svg/index.stories.tsx     | 16 +++++++---------
 src/components/Svg/index.tsx             |  1 +
 src/components/Tag/StyledTag.tsx         |  3 +++
 src/index.ts                             |  4 +++-
 src/widgets/WalletModal/AccountModal.tsx |  1 +
 6 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Svg/Icons/Community.tsx

diff --git a/src/components/Svg/Icons/Community.tsx b/src/components/Svg/Icons/Community.tsx
new file mode 100644
index 000000000..87b2be6a3
--- /dev/null
+++ b/src/components/Svg/Icons/Community.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M12 12.75C13.63 12.75 15.07 13.14 16.24 13.65C17.32 14.13 18 15.21 18 16.38V17C18 17.55 17.55 18 17 18H7C6.45 18 6 17.55 6 17V16.39C6 15.21 6.68 14.13 7.76 13.66C8.93 13.14 10.37 12.75 12 12.75ZM4 13C5.1 13 6 12.1 6 11C6 9.9 5.1 9 4 9C2.9 9 2 9.9 2 11C2 12.1 2.9 13 4 13ZM5.13 14.1C4.76 14.04 4.39 14 4 14C3.01 14 2.07 14.21 1.22 14.58C0.48 14.9 0 15.62 0 16.43V17C0 17.55 0.45 18 1 18H4.5V16.39C4.5 15.56 4.73 14.78 5.13 14.1ZM20 13C21.1 13 22 12.1 22 11C22 9.9 21.1 9 20 9C18.9 9 18 9.9 18 11C18 12.1 18.9 13 20 13ZM24 16.43C24 15.62 23.52 14.9 22.78 14.58C21.93 14.21 20.99 14 20 14C19.61 14 19.24 14.04 18.87 14.1C19.27 14.78 19.5 15.56 19.5 16.39V18H23C23.55 18 24 17.55 24 17V16.43ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/index.stories.tsx b/src/components/Svg/index.stories.tsx
index ec77f718b..15d3a2ee0 100644
--- a/src/components/Svg/index.stories.tsx
+++ b/src/components/Svg/index.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import styled from "styled-components";
+import Flex from "../Flex";
+import Text from "../Text";
 import Svg from "./Svg";
 
 export default {
@@ -8,11 +9,6 @@ export default {
   argTypes: {},
 };
 
-const Flex = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 export const Default: React.FC = () => {
   return (
     <div>
@@ -40,13 +36,15 @@ const components = context.keys().reduce((accum, path) => {
 
 export const Icons: React.FC = () => {
   return (
-    <Flex>
+    <Flex justifyContent="center" alignItems="center" flexWrap="wrap">
       {Object.keys(components).map((file) => {
         const Icon = components[file].default;
         return (
-          <Flex key={file} style={{ flexDirection: "column", marginRight: "8px" }}>
+          <Flex key={file} flexDirection="column" alignItems="center" mr="16px" mb="16px">
             <Icon size="32px" />
-            <span>{file}</span>
+            <Text color="textSubtle" fontSize="12px">
+              {file}
+            </Text>
           </Flex>
         );
       })}
diff --git a/src/components/Svg/index.tsx b/src/components/Svg/index.tsx
index 7f3340c59..93a69b7d2 100644
--- a/src/components/Svg/index.tsx
+++ b/src/components/Svg/index.tsx
@@ -4,6 +4,7 @@ export { default as CheckmarkIcon } from "./Icons/Checkmark";
 export { default as ChevronDownIcon } from "./Icons/ChevronDown";
 export { default as ChevronUpIcon } from "./Icons/ChevronUp";
 export { default as CloseIcon } from "./Icons/Close";
+export { default as CommunityIcon } from "./Icons/Community";
 export { default as ErrorIcon } from "./Icons/Error";
 export { default as HamburgerIcon } from "./Icons/Hamburger";
 export { default as HelpIcon } from "./Icons/Help";
diff --git a/src/components/Tag/StyledTag.tsx b/src/components/Tag/StyledTag.tsx
index e4b9d8351..8cd9e3c8a 100644
--- a/src/components/Tag/StyledTag.tsx
+++ b/src/components/Tag/StyledTag.tsx
@@ -62,4 +62,7 @@ export const StyledTag = styled.div<ThemedProps>`
   height: 28px;
   line-height: 1.5;
   padding: 0 8px;
+  svg {
+    fill: ${getColor};
+  }
 `;
diff --git a/src/index.ts b/src/index.ts
index 3ce5ed31b..50b233c9b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,9 @@ export { default as Button } from "./components/Button";
 export { default as ButtonMenu } from "./components/ButtonMenu";
 export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
 export { default as Checkbox } from "./components/Checkbox";
+export { default as ColorBox } from "./components/ColorBox";
+export { default as Flex } from "./components/Flex";
+export { default as Dropdown } from "./components/Dropdown";
 export { default as Heading } from "./components/Heading";
 export * from "./components/Card";
 export * from "./components/Layouts";
@@ -9,7 +12,6 @@ export * from "./components/Svg";
 export { default as Tag } from "./components/Tag";
 export { default as Text } from "./components/Text";
 export { default as Link } from "./components/Link";
-export { default as ColorBox } from "./components/ColorBox";
 export { default as Toggle } from "./components/Toggle";
 export { default as Progress } from "./components/Progress";
 export { default as ResetCSS } from "./ResetCSS";
diff --git a/src/widgets/WalletModal/AccountModal.tsx b/src/widgets/WalletModal/AccountModal.tsx
index a4cbfd9f5..7ed290348 100644
--- a/src/widgets/WalletModal/AccountModal.tsx
+++ b/src/widgets/WalletModal/AccountModal.tsx
@@ -40,6 +40,7 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
           logout();
           window.localStorage.removeItem(localStorageKey);
           onDismiss();
+          window.location.reload();
         }}
       >
         Logout