add lbry icon in header
This commit is contained in:
parent
d97b433a49
commit
a1d2fd7e6a
6 changed files with 26 additions and 11 deletions
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import React from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
type IconProps = {
|
||||
size: number,
|
||||
|
@ -16,7 +16,7 @@ const buildIcon = iconStrokes => (props: IconProps) => {
|
|||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="none"
|
||||
fill="solid"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
|
@ -114,5 +114,16 @@ export const customIcons = {
|
|||
[ICONS.UNSUBSCRIBE]: buildIcon(
|
||||
<path d="M 12,5.67 10.94,4.61 C 5.7533356,-0.57666427 -2.0266644,7.2033357 3.16,12.39 l 1.06,1.06 7.78,7.78 7.78,-7.78 1.06,-1.06 c 2.149101,-2.148092 2.149101,-5.6319078 0,-7.78 -2.148092,-2.1491008 -5.631908,-2.1491008 -7.78,0 L 9.4481298,8.2303201 15.320603,9.2419066 11.772427,13.723825" />
|
||||
),
|
||||
[ICONS.LBRY]: <span>LBRY</span>, // Fix this
|
||||
[ICONS.LBRY]: buildIcon(
|
||||
<Fragment>
|
||||
<path
|
||||
transform="scale(0.15)"
|
||||
d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z"
|
||||
/>
|
||||
<path
|
||||
transform="scale(0.15)"
|
||||
d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z"
|
||||
/>
|
||||
</Fragment>
|
||||
),
|
||||
};
|
||||
|
|
|
@ -46,7 +46,8 @@ class IconComponent extends React.PureComponent<Props> {
|
|||
render() {
|
||||
const { icon, tooltip, iconColor, size } = this.props;
|
||||
const Icon = customIcons[this.props.icon] || FeatherIcons[this.props.icon];
|
||||
|
||||
console.log('icon', icon);
|
||||
console.log('Icon', Icon);
|
||||
if (!Icon) {
|
||||
return null;
|
||||
}
|
||||
|
|
|
@ -77,7 +77,7 @@ const Header = (props: Props) => {
|
|||
{/* @if TARGET='web' */}
|
||||
<Button
|
||||
className="header__navigation-item header__navigation-item--lbry"
|
||||
label={__('LBRY (logo)')}
|
||||
label={__('LBRY')}
|
||||
iconRight={ICONS.LBRY}
|
||||
navigate="/"
|
||||
/>
|
||||
|
|
|
@ -50,4 +50,4 @@ export const SECURE = 'Lock';
|
|||
export const MENU = 'Menu';
|
||||
export const BACKUP = 'Database';
|
||||
export const TRANSACTIONS = 'FileText';
|
||||
export const LBRY = '';
|
||||
export const LBRY = 'Lbry';
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
width: 250px;
|
||||
/* @endif */
|
||||
/* @if TARGET='web' */
|
||||
// width: 170px;
|
||||
width: 170px;
|
||||
/* @endif */
|
||||
}
|
||||
|
||||
|
@ -89,10 +89,13 @@
|
|||
flex: 1;
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
padding-left: var(--spacing-vertical-large);
|
||||
margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off
|
||||
|
||||
.button__content {
|
||||
text-align: left;
|
||||
svg {
|
||||
overflow: visible;
|
||||
color: $lbry-white;
|
||||
opacity: 1;
|
||||
top: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@ $large-breakpoint: 1921px;
|
|||
--button-height: 36px;
|
||||
|
||||
// Header
|
||||
--header-height: 3.25rem; // 60px;
|
||||
--header-height: 3.5rem;
|
||||
|
||||
// Header -> search
|
||||
--search-modal-input-height: 70px;
|
||||
|
|
Loading…
Reference in a new issue