feat: Add new icons (#63)

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;

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>
         );
       })}

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";

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};
+  }
 `;

src/index.ts

@@ -2,14 +2,16 @@ 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";
 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";

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