discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Revert icons

Browse Source
This commit is contained in:
kvakazyambra 2022-12-04 18:10:27 +03:00
parent 24370405c9
commit 2a70e3ebc5
13 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/icons/bookmark-x.svg
View File

@ -1,4 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M16,2H8A3,3,0,0,0,5,5V21a1,1,0,0,0,.5.87,1,1,0,0,0,1,0L12,18.69l5.5,3.18A1,1,0,0,0,18,22a1,1,0,0,0,.5-.13A1,1,0,0,0,19,21V5A3,3,0,0,0,16,2Zm1,17.27-4.5-2.6a1,1,0,0,0-1,0L7,19.27V5A1,1,0,0,1,8,4h8a1,1,0,0,1,1,1Z" />
<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H14V18.6667L7 14.9333L0 18.6667V0ZM2 2V15.3333L7 12.6667L12 15.3333V2H2Z" fill="#141414"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 207 B

5
public/icons/bookmark.svg
View File

@ -1,4 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#141414"
d="M16,2H8A3,3,0,0,0,5,5V21a1,1,0,0,0,.5.87,1,1,0,0,0,1,0L12,18.69l5.5,3.18A1,1,0,0,0,18,22a1,1,0,0,0,.5-.13A1,1,0,0,0,19,21V5A3,3,0,0,0,16,2Zm1,17.27-4.5-2.6a1,1,0,0,0-1,0L7,19.27V5A1,1,0,0,1,8,4h8a1,1,0,0,1,1,1Z" />
<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H14V18.6667L7 14.9333L0 18.6667V0ZM2 2V15.3333L7 12.6667L12 15.3333V2H2Z" fill="#141414"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 247 B

2
src/components/Article/Comment.tsx
View File

@ -118,7 +118,7 @@ export default (props: {
containerCssClass={stylesHeader.control}
trigger={
<button class={clsx(styles.commentControl, styles.commentControlShare)}>
<Icon name="share-new" class={styles.icon} />
<Icon name="share" class={styles.icon} />
{t('Share')}
</button>
}

4
src/components/Article/FullArticle.tsx
View File

@ -156,7 +156,7 @@ export const FullArticle = (props: ArticleProps) => {
<Show when={props.article.stat?.viewed}>
<div class={clsx(styles.shoutStatsItem)}>
<Icon name="eye" class={styles.icon} />
<Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
{props.article.stat?.viewed}
</div>
</Show>
@ -169,7 +169,7 @@ export const FullArticle = (props: ArticleProps) => {
<div class={styles.shoutStatsItem}>
<SharePopup
containerCssClass={stylesHeader.control}
trigger={<Icon name="share-new" class={styles.icon} />}
trigger={<Icon name="share-outline" class={styles.icon} />}
/>
</div>

10
src/components/Article/RatingControl.module.scss
View File

@ -10,16 +10,20 @@
.ratingControl {
align-items: center;
border: 2px solid;
border-radius: 100%;
display: flex;
justify-content: center;
height: 0.9em;
line-height: 0;
@include font-size(3.6rem);
color: #777;
padding: 0;
width: 0.9em;
transition: 0.15s all linear;
&:hover {
transform: scale(1.2);
background: #000;
border-color: #000;
color: #fff;
}
}

8
src/components/Article/RatingControl.tsx
View File

@ -10,13 +10,9 @@ interface RatingControlProps {
export const RatingControl = (props: RatingControlProps) => {
return (
<div class={clsx(props.class, styles.rating)}>
<button class={styles.ratingControl}>
<Icon name="dislike" />
</button>
<button class={styles.ratingControl}>&minus;</button>
<span class={styles.ratingValue}>{props?.rating || ''}</span>
<button class={styles.ratingControl}>
<Icon name="like" />
</button>
<button class={styles.ratingControl}>+</button>
</div>
)
}

5
src/components/Author/Card.module.scss
View File

@ -12,11 +12,6 @@
}
}
.s24 {
width: 24px;
height: 24px;
}
.authorDetails {
display: flex;
flex: 1;

2
src/components/Author/Card.tsx
View File

@ -119,7 +119,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
disabled={isSubscribing()}
>
<Show when={!props.isAuthorsList}>
<Icon name="circle-plus" iconClassName={styles.s24} class={styles.icon} />
<Icon name="author-subscribe" class={styles.icon} />
</Show>
<span class={styles.buttonLabel}>{t('Follow')}</span>
</button>

4
src/components/Feed/Beside.tsx
View File

@ -37,14 +37,14 @@ export const Beside = (props: BesideProps) => {
<Show when={props.wrapper === 'author'}>
<a href="/authors">
{t('All authors')}
<Icon name="arrow-circle-right" class={styles.icon} />
<Icon name="arrow-right" class={styles.icon} />
</a>
</Show>
<Show when={props.wrapper === 'topic'}>
<a href="/topics">
{t('All topics')}
<Icon name="arrow-circle-right" class={styles.icon} />
<Icon name="arrow-right" class={styles.icon} />
</a>
</Show>
</div>

6
src/components/Nav/Header.module.scss
View File

@ -12,10 +12,12 @@
padding: 0 divide($container-padding-x, 2);
}
}
.icon {
height: 1.2em;
width: 1.2em;
height: 1em;
width: 1em;
}
a:hover {
.icon {
filter: invert(1);

7
src/components/Nav/Header.tsx
View File

@ -127,13 +127,16 @@ export const Header = (props: Props) => {
setIsSharePopupVisible(isVisible)
}}
containerCssClass={styles.control}
trigger={<Icon name="share-new" class={styles.icon} />}
trigger={<Icon name="share-outline" class={styles.icon} />}
/>
<a href={getPagePath(router, 'inbox')} class={styles.control}>
<Icon name="comments-outline" class={styles.icon} />
</a>
<a href={getPagePath(router, 'create')} class={styles.control}>
<Icon name="feather" class={styles.icon} />
<Icon name="pencil-outline" class={styles.icon} />
</a>
<a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
<Icon name="bookmark" class={styles.icon} />
</a>
</div>
</Show>

2
src/components/Nav/HeaderAuth.tsx
View File

@ -44,7 +44,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<a href="/create">
<span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="feather" class={styles.icon} />
<Icon name="pencil" class={styles.icon} />
</a>
</div>

10
src/styles/Article.module.scss
View File

@ -150,13 +150,21 @@ img {
vertical-align: baseline;
.icon {
height: 1.5em;
height: 1.6em;
display: inline-block;
margin-right: 0.2em;
max-width: 1.4em;
max-height: 1.4em;
transition: filter 0.2s;
vertical-align: middle;
}
.iconEye {
height: 1.8em;
max-width: 1.8em;
max-height: 1.8em;
}
img {
display: block;
}