Merge pull request #17 from decentraland/feat/new-agora

feat: new Agora components

package.json

@@ -83,6 +83,7 @@
   "dependencies": {
     "balloon-css": "^0.5.0",
     "ethereum-blockies": "^0.1.1",
+    "parallax-js": "^3.1.0",
     "semantic-ui-css": "^2.3.2",
     "semantic-ui-react": "^0.82.5"
   },

src/components/Button/Button.css

@@ -132,7 +132,7 @@
   color: var(
     --primary
   ) !important; /* this !important is due to an important in semantic-ui-css */
-  font-weight: 600;
+  font-weight: 500;
   box-shadow: none;
   padding: 8px;
 }

src/components/Card/Card.css

@@ -0,0 +1,79 @@
+.ui.cards > .ui.card {
+  width: calc(33.3% - 25px);
+  margin-right: 25px;
+  margin-bottom: 24px;
+  margin-top: 0px;
+}
+
+.ui.cards > .ui.card:nth-child(3n) {
+  margin-right: 0px;
+}
+
+.ui.cards > .ui.card,
+.ui.card {
+  box-shadow: 0 2px 4px 0 var(--shadow);
+  border: solid 1px var(--shadow);
+  background-color: var(--card-background);
+}
+
+.ui.cards > .ui.card.link,
+.ui.card.link {
+  transform: translateY(0px);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.ui.cards > .ui.card.link:hover,
+.ui.card.link:hover {
+  box-shadow: 0 10px 20px 0 var(--shadow);
+  transform: translateY(-16px);
+  cursor: pointer;
+}
+
+.ui.card > .content,
+.ui.cards > .card > .content {
+  padding: 16px 20px;
+}
+
+.ui.card > .content > .header:not(.ui),
+.ui.cards > .card > .content > .header:not(.ui) {
+  color: var(--text);
+  font-size: 17px;
+  line-height: 26px;
+  letter-spacing: -0.2px;
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+  margin-bottom: 20px;
+}
+
+.ui.card .meta,
+.ui.cards > .card .meta {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: normal;
+  color: var(--secondary-text);
+  font-family: var(--font-family);
+}
+
+.ui.cards > .ui.card.link:hover .meta,
+.ui.card.link:hover .meta {
+  color: var(--primary);
+}
+
+@media (max-width: 768px) {
+  .ui.cards > .ui.card {
+    width: calc(50% - 25px);
+  }
+
+  .ui.cards > .ui.card:nth-child(3n) {
+    margin-right: 25px;
+  }
+
+  .ui.cards > .ui.card:nth-child(2n) {
+    margin-right: 0px;
+  }
+}

src/components/Card/Card.stories.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Card, Container, HeaderMenu, Header, Mana, Button, Icon } from '../..'
+
+const cards = [
+  {
+    poll: 'Proposal Acceptance for Aetheria District',
+    weight: '20.5M',
+    voters: 160,
+    status: '2 days left',
+    outcome: 'Pending'
+  },
+  {
+    poll: 'Proposal Acceptance for Chobury',
+    voters: 80,
+    weight: '250.2K',
+    status: '1 days left',
+    outcome: 'Pending'
+  },
+  {
+    poll: 'Proposal Acceptance for VR Shopping District',
+    voters: 172,
+    weight: '50.1K',
+    status: '12 hours left',
+    outcome: 'Pending'
+  },
+  {
+    poll: 'Proposal Acceptance for The Movement',
+    voters: 0,
+    weight: '0',
+    status: 'Closed',
+    outcome: 'Yes'
+  },
+  {
+    poll: 'Proposal Acceptance for NEXUS',
+    voters: 20,
+    weight: '100K',
+    status: 'Closed',
+    outcome: 'No'
+  }
+]
+
+storiesOf('Card', module).add('Polls', () => (
+  <Container>
+    <HeaderMenu>
+      <HeaderMenu.Left>
+        <Header>District polls</Header>
+      </HeaderMenu.Left>
+      <HeaderMenu.Right>
+        <Button basic size="small">
+          View More
+          <Icon name="chevron right" />
+        </Button>
+      </HeaderMenu.Right>
+    </HeaderMenu>
+    <Card.Group>
+      {cards.map(card => (
+        <Card link>
+          <Card.Content>
+            <Card.Header>{card.poll}</Card.Header>
+            <Card.Meta>
+              Weight {card.weight} <Mana inline black />
+            </Card.Meta>
+          </Card.Content>
+        </Card>
+      ))}
+    </Card.Group>
+  </Container>
+))

src/components/Dropdown/Dropdown.css

@@ -0,0 +1,44 @@
+.ui.dropdown {
+  transform: translateY(-4px);
+}
+
+.ui.menu {
+  font-family: var(--font-family);
+}
+
+.ui.dropdown > .dropdown.icon {
+  color: var(--primary);
+}
+
+.ui.dropdown > .text {
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.ui.dropdown .menu,
+.ui.upward.dropdown > .menu {
+  background-color: var(--card-background);
+  border: solid 1px var(--shadow);
+  box-shadow: 0 16px 32px 0 var(--shadow);
+  margin-top: 13px;
+  padding: 8px 0px;
+  border-radius: 6px;
+}
+
+.ui.dropdown .menu > .item {
+  color: var(--text);
+  font-size: 15px;
+  line-height: 24px;
+  padding: 10px 16px !important;
+  font-weight: normal;
+  min-width: 210px;
+}
+
+.ui.dropdown .menu > .item:hover {
+  color: var(--text);
+  background-color: var(--hover);
+}
+
+.ui.dropdown .menu > .item > .description {
+  color: var(--secondary-text);
+}

src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Dropdown } from '../..'
+
+storiesOf('Dropdown', module).add('Filters', () => (
+  <Dropdown text="All polls" direction="right" pointing="top">
+    <Dropdown.Menu>
+      <Dropdown.Item text="All polls" />
+      <Dropdown.Item text="Ongoing polls" />
+      <Dropdown.Item text="Closed polls" />
+    </Dropdown.Menu>
+  </Dropdown>
+))

src/components/Field/Field.css

@@ -48,6 +48,12 @@
   border-width: 2px;
 }
 
+/* Disabled */
+
+.dcl.field .ui.input.disabled input {
+  color: var(--disabled-text);
+}
+
 /* Error */
 
 .dcl.field.error .ui.input input {
@@ -74,7 +80,7 @@
   display: none;
 }
 
-/* Adress */
+/* Address */
 
 .dcl.field.address .ui.input input {
   padding-right: 2.67142857em !important;