Skip to content

Commit 0a3bdcd

Browse files
FullstackWEB-developerFullstackWEB-developer
committed
fix(development): to $seed symbol and readme
1 parent 1b43dc6 commit 0a3bdcd

File tree

6 files changed

+4
-151
lines changed

6 files changed

+4
-151
lines changed

‎README.md

Lines changed: 0 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +0,0 @@
1-
<img src="https://ui.decentraland.org/decentraland_256x256.png" height="128" width="128" />
2-
3-
# Decentraland UI [![CircleCI](https://circleci.com/gh/decentraland/ui.svg?style=svg)](https://circleci.com/gh/decentraland/ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
4-
5-
This is basically `semantic-ui-react` themed with Decentrland's look & feel + some of our own components
6-
7-
See: [ui.decentraland.org](https://ui.decentraland.org)
8-
9-
## Usage
10-
11-
Install it:
12-
13-
```bash
14-
npm install --save decentraland-ui
15-
```
16-
17-
Import Decentraland UI's styles in your App's entry point
18-
19-
```jsx
20-
import 'decentraland-ui/lib/styles.css'
21-
```
22-
23-
Now you can use Decentraland UI's components
24-
25-
```jsx
26-
import React from 'react'
27-
import { Button } from 'decentraland-ui'
28-
29-
export class MyApp extends React.Component {
30-
render() {
31-
return <Button>Sabe</Button>
32-
}
33-
}
34-
```
35-
36-
### Without React
37-
38-
You can also use `decentraland-ui` as a CSS framework just by adding this tag in your `<head>`:
39-
40-
```html
41-
<link href="https://ui.decentraland.org/styles.css" rel="stylesheet" />
42-
```
43-
44-
And then using [Semantic UI](https://semantic-ui.com/) classes like this:
45-
46-
```html
47-
<button class="ui button">Sabe</button>
48-
```
49-
50-
🏌
51-
52-
## Minimizing bundle size
53-
54-
You can import just the essential component and reduce the size of your bundles, like this:
55-
56-
```jsx
57-
// import css
58-
import 'semantic-ui-css/semantic.min.css'
59-
import 'balloon-css/balloon.min.css'
60-
import 'decentraland-ui/dist/themes/base-theme.css'
61-
import 'decentraland-ui/dist/themes/alternative/light-theme.css'
62-
// or import 'decentraland-ui/dist/themes/alternative/dark-theme.css'
63-
64-
// Then import just the components you will use
65-
import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid'
66-
import { Button } from 'decentraland-ui/dist/components/Button/Button'
67-
import { Card } from 'decentraland-ui/dist/components/Card/Card'
68-
```
69-
70-
## Alternative themes
71-
72-
You can use one of our alternative themes by importing in after Decentraland UI's styles, like this:
73-
74-
```jsx
75-
import 'decentraland-ui/lib/styles.css'
76-
import 'decentraland-ui/lib/dark-theme.css'
77-
```
78-
79-
Or you can create your own theme like this:
80-
81-
```css
82-
/* my-theme.css */
83-
:root {
84-
/* global */
85-
--background: #ffffff;
86-
--danger: #ffa900;
87-
--error: #ff0000;
88-
89-
/* buttons */
90-
--primary: #ff2d55;
91-
--secondary: #f3f2f5;
92-
--primary-hover: #ff3d61;
93-
--secondary-hover: #ecebed;
94-
95-
/* on modals */
96-
--secondary-on-modal: #f3f2f5;
97-
--secondary-on-modal-hover: #ecebed;
98-
--card-on-modal: #ffffff;
99-
100-
/* text */
101-
--text: #16141a;
102-
--secondary-text: #676370;
103-
--text-on-primary: #ffffff;
104-
--text-on-secondary: #16141a;
105-
106-
/* ui */
107-
--divider: #67637033;
108-
--dropdown: #ffffff;
109-
--dropdown-hover: #f3f2f5;
110-
--popup: #16141a;
111-
--popup-text: #ffffff;
112-
--navbar-popup: #ffffff;
113-
--navbar-popup-hover: #f3f2f5;
114-
--card: #ffffff;
115-
--outline: 1px solid #00000005;
116-
--toast: #16141a;
117-
--toast-text: #ffffff;
118-
--modal: #ffffff;
119-
--dimmer: #ffffffdd;
120-
121-
/* shadows */
122-
--shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
123-
--shadow-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
124-
--shadow-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.16);
125-
126-
--shadow-color-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
127-
--shadow-color-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
128-
--shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.24);
129-
130-
/* svgs */
131-
--brightness: brightness(0.1); /* black svgs */
132-
}
133-
```
134-
135-
## Development
136-
137-
Install dependencies and start Storybook
138-
139-
```
140-
$ npm install
141-
$ npm start
142-
```
143-
144-
## CI/CD
145-
146-
We deploy automatically to [ui.decentraland.org](https://ui.decentraland.org) and release a new version via `semantic-release`

‎src/assets/symbol.svg

Lines changed: 1 addition & 3 deletions
Loading

‎src/assets/symbol5.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Navbar/Navbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export class Navbar extends React.PureComponent<NavbarProps, NavbarState> {
114114
<>
115115
<Menu.Item
116116
active={activePage === 'marketplace'}
117-
href="https://marketplace-birdezkingdom.vercel.app"
117+
href="https://market-birdezkingdom.vercel.app"
118118
>
119119
{i18n.menu.marketplace}
120120
</Menu.Item>

‎src/components/UserMenu/UserMenu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export class UserMenu extends React.Component<UserMenuProps, UserMenuState> {
131131
network={network as Network}
132132
size="small"
133133
className={onClickBalance ? 'clickable' : undefined}
134-
title={`${manaBalances[network].toLocaleString()} MANA`}
134+
title={`${manaBalances[network].toLocaleString()} $SEED`}
135135
href="https://account-birdezkingdom.vercel.app"
136136
>
137137
{Number(manaBalances[network].toFixed(2)).toLocaleString()}

‎static/$seed.png

67.3 KB
Loading

0 commit comments

Comments
 (0)