mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 11:26:24 +00:00
Convert Icons to ts, add Bitcoin Icons
This commit is contained in:
parent
6f318129c1
commit
a6c433719e
@ -13,11 +13,7 @@ import PaymentText from './PaymentText'
|
|||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||||
import SendReceiveIcon from "./icons/SendReceiveIcon";
|
import { SendReceiveIcon, BuySatsCheckedIcon, BuySatsIcon, SellSatsCheckedIcon, SellSatsIcon} from "./Icons";
|
||||||
import BuySatsIcon from "./icons/BuySatsIcon";
|
|
||||||
import BuySatsCheckedIcon from "./icons/BuySatsCheckedIcon";
|
|
||||||
import SellSatsIcon from "./icons/SellSatsIcon";
|
|
||||||
import SellSatsCheckedIcon from "./icons/SellSatsCheckedIcon";
|
|
||||||
|
|
||||||
class BookPage extends Component {
|
class BookPage extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -25,8 +25,8 @@ import WebIcon from '@mui/icons-material/Web';
|
|||||||
import BookIcon from '@mui/icons-material/Book';
|
import BookIcon from '@mui/icons-material/Book';
|
||||||
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
|
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
|
||||||
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
||||||
import AmbossIcon from "./icons/AmbossIcon";
|
|
||||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||||
|
import { AmbossIcon , BitcoinSignIcon} from "./Icons";
|
||||||
|
|
||||||
import { CommunityDialog } from './Dialogs';
|
import { CommunityDialog } from './Dialogs';
|
||||||
|
|
||||||
@ -148,13 +148,23 @@ class BottomBar extends Component {
|
|||||||
<Divider/>
|
<Divider/>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemIcon><EqualizerIcon/></ListItemIcon>
|
<ListItemIcon><EqualizerIcon/></ListItemIcon>
|
||||||
<ListItemText primary={pn(this.state.last_day_volume)+" BTC"} secondary={t("24h contracted volume")}/>
|
<ListItemText secondary={t("24h contracted volume")}>
|
||||||
|
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||||
|
{pn(this.state.last_day_volume)}
|
||||||
|
<BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
|
||||||
|
</div>
|
||||||
|
</ListItemText>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
||||||
<Divider/>
|
<Divider/>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemIcon><EqualizerIcon/></ListItemIcon>
|
<ListItemIcon><EqualizerIcon/></ListItemIcon>
|
||||||
<ListItemText primary={pn(this.state.lifetime_volume)+" BTC"} secondary={t("Lifetime contracted volume")}/>
|
<ListItemText secondary={t("Lifetime contracted volume")}>
|
||||||
|
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||||
|
{pn(this.state.lifetime_volume)}
|
||||||
|
<BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
|
||||||
|
</div>
|
||||||
|
</ListItemText>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
||||||
<Divider/>
|
<Divider/>
|
||||||
|
@ -45,7 +45,7 @@ const InfoDialog = ({
|
|||||||
</p>
|
</p>
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={4} align="center">
|
<Grid item xs={4}>
|
||||||
<Image className='newAvatar'
|
<Image className='newAvatar'
|
||||||
disableError={true}
|
disableError={true}
|
||||||
cover={true}
|
cover={true}
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Flags from 'country-flag-icons/react/3x2'
|
import Flags from 'country-flag-icons/react/3x2'
|
||||||
import SwapCallsIcon from '@mui/icons-material/SwapCalls';
|
import SwapCallsIcon from '@mui/icons-material/SwapCalls';
|
||||||
import GoldIcon from '../icons/GoldIcon';
|
import { GoldIcon, EarthIcon } from "../Icons";
|
||||||
import EarthIcon from '../icons/EarthIcon'
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
code: string;
|
code: string;
|
||||||
|
@ -10,7 +10,7 @@ export default function AmbossIcon(props) {
|
|||||||
<stop offset="0" style={{stopColor:'#925bc9'}}/>
|
<stop offset="0" style={{stopColor:'#925bc9'}}/>
|
||||||
<stop offset="1" style={{stopColor:'#ff59ac'}}/>
|
<stop offset="1" style={{stopColor:'#ff59ac'}}/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<path class="amboss" d="M55.3,84.9V61.3h-15v23.6H0V0h95.7v84.9H55.3z M55.3,28.1h-15v17.1h15V28.1z"/>
|
<path className={"amboss"} d="M55.3,84.9V61.3h-15v23.6H0V0h95.7v84.9H55.3z M55.3,28.1h-15v17.1h15V28.1z"/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</SvgIcon>
|
</SvgIcon>
|
10
frontend/src/components/Icons/Bitcoin.tsx
Normal file
10
frontend/src/components/Icons/Bitcoin.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { SvgIcon } from "@mui/material"
|
||||||
|
|
||||||
|
export default function BitcoinIcon(props) {
|
||||||
|
return (
|
||||||
|
<SvgIcon sx={props.sx} color={props.color} viewBox="0 0 512 512">
|
||||||
|
<path d="M48 32C48 14.33 62.33 0 80 0C97.67 0 112 14.33 112 32V64H144V32C144 14.33 158.3 0 176 0C193.7 0 208 14.33 208 32V64C208 65.54 207.9 67.06 207.7 68.54C254.1 82.21 288 125.1 288 176C288 200.2 280.3 222.6 267.3 240.9C298.9 260.7 320 295.9 320 336C320 397.9 269.9 448 208 448V480C208 497.7 193.7 512 176 512C158.3 512 144 497.7 144 480V448H112V480C112 497.7 97.67 512 80 512C62.33 512 48 497.7 48 480V448H41.74C18.69 448 0 429.3 0 406.3V101.6C0 80.82 16.82 64 37.57 64H48V32zM176 224C202.5 224 224 202.5 224 176C224 149.5 202.5 128 176 128H64V224H176zM64 288V384H208C234.5 384 256 362.5 256 336C256 309.5 234.5 288 208 288H64z"/>
|
||||||
|
</SvgIcon>
|
||||||
|
);
|
||||||
|
}
|
10
frontend/src/components/Icons/BitcoinSign.tsx
Normal file
10
frontend/src/components/Icons/BitcoinSign.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { SvgIcon } from "@mui/material"
|
||||||
|
|
||||||
|
export default function BitcoinSignIcon(props) {
|
||||||
|
return (
|
||||||
|
<SvgIcon sx={props.sx} color={props.color} viewBox="0 0 320 512">
|
||||||
|
<path d="M48 32C48 14.33 62.33 0 80 0C97.67 0 112 14.33 112 32V64H144V32C144 14.33 158.3 0 176 0C193.7 0 208 14.33 208 32V64C208 65.54 207.9 67.06 207.7 68.54C254.1 82.21 288 125.1 288 176C288 200.2 280.3 222.6 267.3 240.9C298.9 260.7 320 295.9 320 336C320 397.9 269.9 448 208 448V480C208 497.7 193.7 512 176 512C158.3 512 144 497.7 144 480V448H112V480C112 497.7 97.67 512 80 512C62.33 512 48 497.7 48 480V448H41.74C18.69 448 0 429.3 0 406.3V101.6C0 80.82 16.82 64 37.57 64H48V32zM176 224C202.5 224 224 202.5 224 176C224 149.5 202.5 128 176 128H64V224H176zM64 288V384H208C234.5 384 256 362.5 256 336C256 309.5 234.5 288 208 288H64z"/>
|
||||||
|
</SvgIcon>
|
||||||
|
);
|
||||||
|
}
|
14
frontend/src/components/Icons/index.ts
Normal file
14
frontend/src/components/Icons/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export { default as AmbossIcon } from "./Amboss";
|
||||||
|
export { default as BitcoinIcon } from "./Bitcoin";
|
||||||
|
export { default as BitcoinSignIcon } from "./BitcoinSign";
|
||||||
|
export { default as BuySatsIcon } from "./BuySats";
|
||||||
|
export { default as BuySatsCheckedIcon } from "./BuySatsChecked";
|
||||||
|
export { default as EarthIcon } from "./Earth";
|
||||||
|
export { default as GoldIcon } from "./Gold";
|
||||||
|
export { default as NewTabIcon } from "./NewTab";
|
||||||
|
export { default as RoboSatsIcon } from "./RoboSats";
|
||||||
|
export { default as RoboSatsNoTextIcon } from "./RoboSatsNoText";
|
||||||
|
export { default as RoboSatsTextIcon } from "./RoboSatsText";
|
||||||
|
export { default as SellSatsCheckedIcon } from "./SellSatsChecked";
|
||||||
|
export { default as SellSatsIcon } from "./SellSats";
|
||||||
|
export { default as SendReceiveIcon } from "./SendReceive";
|
@ -15,10 +15,7 @@ import currencyDict from '../../static/assets/currencies.json';
|
|||||||
import LockIcon from '@mui/icons-material/Lock';
|
import LockIcon from '@mui/icons-material/Lock';
|
||||||
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
|
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
|
||||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||||
import BuySatsIcon from "./icons/BuySatsIcon";
|
import { BuySatsCheckedIcon, BuySatsIcon, SellSatsCheckedIcon, SellSatsIcon} from "./Icons";
|
||||||
import BuySatsCheckedIcon from "./icons/BuySatsCheckedIcon";
|
|
||||||
import SellSatsIcon from "./icons/SellSatsIcon";
|
|
||||||
import SellSatsCheckedIcon from "./icons/SellSatsCheckedIcon";
|
|
||||||
|
|
||||||
import { getCookie } from "../utils/cookies";
|
import { getCookie } from "../utils/cookies";
|
||||||
import { pn } from "../utils/prettyNumbers";
|
import { pn } from "../utils/prettyNumbers";
|
||||||
|
@ -18,8 +18,8 @@ import NumbersIcon from '@mui/icons-material/Numbers';
|
|||||||
import PriceChangeIcon from '@mui/icons-material/PriceChange';
|
import PriceChangeIcon from '@mui/icons-material/PriceChange';
|
||||||
import PaymentsIcon from '@mui/icons-material/Payments';
|
import PaymentsIcon from '@mui/icons-material/Payments';
|
||||||
import ArticleIcon from '@mui/icons-material/Article';
|
import ArticleIcon from '@mui/icons-material/Article';
|
||||||
import SendReceiveIcon from "./icons/SendReceiveIcon";
|
|
||||||
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
|
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
|
||||||
|
import { SendReceiveIcon } from "./Icons";
|
||||||
|
|
||||||
import { getCookie } from "../utils/cookies";
|
import { getCookie } from "../utils/cookies";
|
||||||
import { pn } from "../utils/prettyNumbers";
|
import { pn } from "../utils/prettyNumbers";
|
||||||
|
@ -19,7 +19,7 @@ import ContentCopy from "@mui/icons-material/ContentCopy";
|
|||||||
import PauseCircleIcon from '@mui/icons-material/PauseCircle';
|
import PauseCircleIcon from '@mui/icons-material/PauseCircle';
|
||||||
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
|
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
|
||||||
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
|
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
|
||||||
import NewTabIcon from "./icons/NewTabIcon";
|
import { NewTabIcon } from "./Icons";
|
||||||
|
|
||||||
import { getCookie } from "../utils/cookies";
|
import { getCookie } from "../utils/cookies";
|
||||||
import { pn } from "../utils/prettyNumbers";
|
import { pn } from "../utils/prettyNumbers";
|
||||||
|
@ -8,8 +8,8 @@ import { InfoDialog } from './Dialogs'
|
|||||||
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||||
import CasinoIcon from '@mui/icons-material/Casino';
|
import CasinoIcon from '@mui/icons-material/Casino';
|
||||||
import ContentCopy from "@mui/icons-material/ContentCopy";
|
import ContentCopy from "@mui/icons-material/ContentCopy";
|
||||||
import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
|
|
||||||
import BoltIcon from '@mui/icons-material/Bolt';
|
import BoltIcon from '@mui/icons-material/Bolt';
|
||||||
|
import { RoboSatsNoTextIcon } from "./Icons";
|
||||||
|
|
||||||
import { getCookie, writeCookie } from "../utils/cookies";
|
import { getCookie, writeCookie } from "../utils/cookies";
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user