diff --git a/src/ui/component/common/icon-custom.jsx b/src/ui/component/common/icon-custom.jsx
index 31239937c..d409c31dc 100644
--- a/src/ui/component/common/icon-custom.jsx
+++ b/src/ui/component/common/icon-custom.jsx
@@ -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(
),
- [ICONS.LBRY]: LBRY, // Fix this
+ [ICONS.LBRY]: buildIcon(
+
+
+
+
+ ),
};
diff --git a/src/ui/component/common/icon.jsx b/src/ui/component/common/icon.jsx
index 274c38b37..0ad65080f 100644
--- a/src/ui/component/common/icon.jsx
+++ b/src/ui/component/common/icon.jsx
@@ -46,7 +46,8 @@ class IconComponent extends React.PureComponent {
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;
}
diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx
index 65bd8e382..0e53da099 100644
--- a/src/ui/component/header/view.jsx
+++ b/src/ui/component/header/view.jsx
@@ -77,7 +77,7 @@ const Header = (props: Props) => {
{/* @if TARGET='web' */}
diff --git a/src/ui/constants/icons.js b/src/ui/constants/icons.js
index f2435209f..d31b25c46 100644
--- a/src/ui/constants/icons.js
+++ b/src/ui/constants/icons.js
@@ -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';
diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss
index 234df6a6e..eea4f2188 100644
--- a/src/ui/scss/component/_header.scss
+++ b/src/ui/scss/component/_header.scss
@@ -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;
}
}
diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss
index 730791daa..90972d9e5 100644
--- a/src/ui/scss/init/_vars.scss
+++ b/src/ui/scss/init/_vars.scss
@@ -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;