feat(notifications): render list and implement themable icons

kleros · Nov 24, 2018 · 3d22797 · 3d22797
1 parent 547d27d
commit 3d22797
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@kleros/kathari": "^0.18.0",
+    "@kleros/kathari": "^0.19.0",
     "husky": "^1.1.4",
     "less": "^3.8.1",
     "source-map-explorer": "^1.6.0",

diff --git a/src/assets/images/bell.svg → src/assets/icons/bell.svg b/src/assets/images/bell.svg → src/assets/icons/bell.svg
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js
@@ -19,6 +19,36 @@ const StyledMenu = styled(Menu)`
   line-height: 64px !important;
   text-align: center;
 `
+const notifications = [
+  {
+    date: new Date(),
+    message:
+      'Congratulations! You have been drawn as a juror to a case on Air Transport court.',
+    to: '/',
+    type: 'info'
+  },
+  {
+    date: new Date(),
+    message:
+      'Attention! You have 6h to vote on the case #127464 at Air Transport court.',
+    to: '/',
+    type: 'error'
+  },
+  {
+    date: new Date(),
+    message:
+      'Attention! You have 24h to vote on the case #127464 at Air Transport court.',
+    to: '/',
+    type: 'warning'
+  },
+  {
+    date: new Date(),
+    message:
+      'Congratulations! You have been drawn as a juror to a case on Air Transport court.',
+    to: '/',
+    type: 'info'
+  }
+]
 export default () => (
   <>
     <Helmet>
@@ -60,27 +90,18 @@ export default () => (
                   </StyledMenu>
                 </Col>
                 <StyledCol span={4}>
-                  <Notifications
-                    notifications={[
-                      {
-                        date: new Date(),
-                        message: 'Message',
-                        to: '/',
-                        type: 'info'
-                      }
-                    ]}
-                  />
+                  <Notifications notifications={notifications} />
                 </StyledCol>
               </Row>
             </Layout.Header>
             <Layout.Content>
               <Switch>
-                <Route exact path="/" component={Home} />
-                <Route exact path="/courts" component={Home} />
-                <Route exact path="/cases" component={Home} />
-                <Route exact path="/tokens" component={Home} />
-                <Route exact path="/governance" component={Home} />
-                <Route exact path="/guide" component={Home} />
+                <Route component={Home} exact path="/" />
+                <Route component={Home} exact path="/courts" />
+                <Route component={Home} exact path="/cases" />
+                <Route component={Home} exact path="/tokens" />
+                <Route component={Home} exact path="/governance" />
+                <Route component={Home} exact path="/guide" />
               </Switch>
             </Layout.Content>
           </Layout>

diff --git a/src/components/notifications.js b/src/components/notifications.js
@@ -1,10 +1,24 @@
-import { Badge, Popover } from 'antd'
-import { ReactComponent as Bell } from '../assets/images/bell.svg'
+import { Badge, List, Popover } from 'antd'
+import { ReactComponent as Bell } from '../assets/icons/bell.svg'
+import { ReactComponent as Info } from '../assets/icons/info.svg'
 import { NavLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components/macro'
 
+const Notification = ({ date: _date, message, to: _to, type }) => (
+  <List.Item>
+    <List.Item.Meta avatar={<Info className={type} />} description={message} />
+  </List.Item>
+)
+
+Notification.propTypes = {
+  date: PropTypes.instanceOf(Date).isRequired,
+  message: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['info', 'error', 'warning']).isRequired
+}
+
 const StyledNavLink = styled(NavLink)`
   float: right;
   font-size: 10px;
@@ -19,13 +33,13 @@ const StyledBadge = styled(Badge)`
 `
 const Notifications = ({ notifications }) => (
   <Popover
-    visible
+    content={<List dataSource={notifications} renderItem={Notification} />}
     title={
       <>
         Notifications <StyledNavLink to="/notifications">History</StyledNavLink>
       </>
     }
-    content={notifications.map(n => n.to)}
+    visible
   >
     <StyledBadge count={3}>
       <Bell />

diff --git a/src/components/theme.css b/src/components/theme.css
@@ -18588,3 +18588,27 @@ li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper:hov
     opacity: 0;
   }
 }
+svg.primary .colored-icon {
+  fill: #1890ff !important;
+}
+svg.info .colored-icon {
+  fill: #1890ff !important;
+}
+svg.success .colored-icon {
+  fill: #52c41a !important;
+}
+svg.processing .colored-icon {
+  fill: #1890ff !important;
+}
+svg.error .colored-icon {
+  fill: #f5222d !important;
+}
+svg.highlight .colored-icon {
+  fill: #f5222d !important;
+}
+svg.warning .colored-icon {
+  fill: #faad14 !important;
+}
+svg.normal .colored-icon {
+  fill: #d9d9d9 !important;
+}
diff --git a/src/components/theme.less b/src/components/theme.less
@@ -532,3 +532,31 @@
 @list-item-meta-margin-bottom: @padding-md;
 @list-item-meta-avatar-margin-right: @padding-md;
 @list-item-meta-title-margin-bottom: @padding-sm;
+
+// Themed Icons
+svg {
+  &.primary .colored-icon {
+    fill: @primary-color !important;
+  }
+  &.info .colored-icon {
+    fill: @info-color !important;
+  }
+  &.success .colored-icon {
+    fill: @success-color !important;
+  }
+  &.processing .colored-icon {
+    fill: @processing-color !important;
+  }
+  &.error .colored-icon {
+    fill: @error-color !important;
+  }
+  &.highlight .colored-icon {
+    fill: @highlight-color !important;
+  }
+  &.warning .colored-icon {
+    fill: @warning-color !important;
+  }
+  &.normal .colored-icon {
+    fill: @normal-color !important;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1055,10 +1055,10 @@
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
-"@kleros/kathari@^0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@kleros/kathari/-/kathari-0.18.0.tgz#b2dc7218937df84198d815f562513bef8b513c06"
-  integrity sha512-b3eKXfrK135whPRz5XpytEQDil7ARdSKjT7lPaoEdZmFQiHBCAcOZTyWORNMb5dQmy2KxF7vH5jacREy07x3fw==
+"@kleros/kathari@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@kleros/kathari/-/kathari-0.19.0.tgz#9a63a5f397092dc82aa165395f5c12f3460c5cb1"
+  integrity sha512-Lb/s5/Lpte38NFFopwZoZTBbo15olIAvrmY+0UqhOz15FxYQqbWy5nXZuu++8orOgh5/LYv7Qnx70vGmg/tobw==
   dependencies:
     "@commitlint/cli" "^7.2.1"
     "@commitlint/config-conventional" "^7.1.2"
@@ -1078,8 +1078,10 @@
     eslint-plugin-prettier "^3.0.0"
     eslint-plugin-promise "^4.0.1"
     eslint-plugin-react "^7.6.1"
+    eslint-plugin-react-perf "^2.0.9"
     eslint-plugin-standard "^4.0.0"
     eslint-plugin-unicorn "^6.0.1"
+    eslint-plugin-wyze "^3.4.0"
     lint-staged "^8.0.4"
     prettier "^1.13.7"
     solium "^1.1.8"
@@ -4470,7 +4472,7 @@ docopt@^0.6.2:
   resolved "https://registry.yarnpkg.com/docopt/-/docopt-0.6.2.tgz#b28e9e2220da5ec49f7ea5bb24a47787405eeb11"
   integrity sha1-so6eIiDaXsSffqW7JKR3h0Be6xE=
 
-doctrine@1.5.0:
+doctrine@1.5.0, doctrine@^1.2.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
   integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
@@ -4968,6 +4970,14 @@ eslint-plugin-promise@^4.0.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.0.1.tgz#2d074b653f35a23d1ba89d8e976a985117d1c6a2"
   integrity sha512-Si16O0+Hqz1gDHsys6RtFRrW7cCTB6P7p3OJmKp3Y3dxpQE2qwOA7d3xnV+0mBmrPoi0RBnxlCKvqu70te6wjg==
 
+eslint-plugin-react-perf@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-perf/-/eslint-plugin-react-perf-2.0.9.tgz#984982b1b6099fca68608ccb0ba5692ffbcf2fd8"
+  integrity sha512-znVvK7hZ+c7vR5aF4GjF0ki6usavJrPZ2OADylolNfFGA+iLYyNQogjFSRVKmyJ2R9IdZB3M+Ch5TtWoTOSBpw==
+  dependencies:
+    doctrine "^1.2.2"
+    jsx-ast-utils "^1.3.3"
+
 eslint-plugin-react@7.11.1, eslint-plugin-react@^7.6.1:
   version "7.11.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c"
@@ -4998,6 +5008,11 @@ eslint-plugin-unicorn@^6.0.1:
     lodash.upperfirst "^4.2.0"
     safe-regex "^1.1.0"
 
+eslint-plugin-wyze@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-wyze/-/eslint-plugin-wyze-3.4.0.tgz#9c7219b5c6a09b6061ed820c518564ec04b085fc"
+  integrity sha1-nHIZtcagm2Bh7YIMUYVk7ASwhfw=
+
 eslint-scope@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
@@ -8133,6 +8148,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jsx-ast-utils@^1.3.3:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
+  integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=
+
 jsx-ast-utils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"