Darken hashtags in channel list

This commit is contained in:
Ken-Håvard Lieng 2020-06-19 04:38:26 +02:00
parent 4694e66e98
commit f89e6ae133
4 changed files with 79 additions and 54 deletions

File diff suppressed because one or more lines are too long

View File

@ -307,16 +307,24 @@ i[class*=' icon-']:before {
margin-right: 5px;
}
.tab-prefix {
color: #777;
}
.tab-label {
margin: 5px;
margin-left: 15px;
font-size: 12px;
color: #999;
color: #777;
display: flex;
align-items: center;
height: 25px;
}
.tab-label-channels {
cursor: pointer;
}
.tab-label span {
flex: 1;
}
@ -326,10 +334,10 @@ i[class*=' icon-']:before {
height: 100%;
font-size: 20px;
background: none;
color: #999;
color: #777;
}
.tab-label button:hover {
.tab-label:hover button {
color: #ccc;
}
@ -345,7 +353,7 @@ i[class*=' icon-']:before {
.side-buttons button {
background: #222;
color: #999;
color: #777;
flex: 1;
}

View File

@ -60,7 +60,7 @@ export default class TabList extends PureComponent {
tabs.push(
<div
key={`${address}-chans}`}
className="tab-label"
className="tab-label tab-label-channels"
onClick={() => openModal('channel', address)}
>
<span>CHANNELS {chanLabel}</span>

View File

@ -1,6 +1,18 @@
import React from 'react';
import classnames from 'classnames';
function splitContent(content) {
let start = 0;
while (content[start] === '#') {
start++;
}
if (start > 0) {
return [content.slice(0, start), content.slice(start)];
}
return [null, content];
}
const TabListItem = ({
target,
content,
@ -19,9 +31,14 @@ const TabListItem = ({
selected
});
const [prefix, name] = splitContent(content);
return (
<p className={className} onClick={() => onClick(network, target)}>
<span className="tab-content">{content}</span>
<span className="tab-content">
{prefix && <span className="tab-prefix">{prefix}</span>}
{name}
</span>
</p>
);
};