New sharing icons
This commit is contained in:
Minesh Mitha
parent
b3d05c7b82
commit
8759bcfdd6
7 changed files with 72 additions and 7 deletions
|
|
@ -30,6 +30,7 @@
|
|||
@import '~page-content/_page-content';
|
||||
@import '~progress-bar/_progress-bar';
|
||||
@import '~publish-preview/_publish-preview';
|
||||
@import '~share-buttons/_share-buttons';
|
||||
@import '~space-between/_space-between';
|
||||
@import '~space-around/_space-around';
|
||||
@import '~row/_row';
|
||||
|
|
|
|||
9
client/scss/share-buttons/_share-buttons.scss
Normal file
9
client/scss/share-buttons/_share-buttons.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.share-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 7px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +1,37 @@
|
|||
import React from 'react';
|
||||
import SpaceBetween from '@components/SpaceBetween';
|
||||
|
||||
const AssetShareButtons = ({ host, name, shortId }) => {
|
||||
return (
|
||||
<SpaceBetween >
|
||||
<div className='share-buttons'>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}
|
||||
>
|
||||
twitter
|
||||
<img src='/assets/img/icn_twitter.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}
|
||||
>
|
||||
facebook
|
||||
<img src='/assets/img/icn_facebook.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}
|
||||
>
|
||||
tumblr
|
||||
<img src='/assets/img/icn_tumblr.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}
|
||||
>
|
||||
reddit
|
||||
<img src='/assets/img/icn_reddit.svg' />
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
14
public/assets/img/icn_facebook.svg
Normal file
14
public/assets/img/icn_facebook.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icn_facebook</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-867.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_facebook" transform="translate(867.000000, 911.000000)">
|
||||
<rect id="Rectangle-7-Copy" fill="#5487DE" x="0" y="0" width="30" height="30" rx="15"></rect>
|
||||
<path d="M10,16.2457933 L10,13.2217548 L12.6590693,13.2217548 L12.6590693,10.9945913 C12.6590693,9.72775809 13.0205601,8.74529596 13.7435525,8.04717548 C14.4665449,7.349055 15.4293617,7 16.6320317,7 C17.6539537,7 18.4464527,7.04086498 19.0095525,7.12259615 L19.0095525,9.81971154 L17.3724001,9.81971154 C16.774541,9.81971154 16.3713397,9.94230647 16.1627842,10.1875 C15.9542287,10.4326935 15.8499525,10.8004783 15.8499525,11.2908654 L15.8499525,13.2217548 L18.9052753,13.2217548 L18.4985941,16.2457933 L15.8499525,16.2457933 L15.8499525,24 L12.6590693,24 L12.6590693,16.2457933 L10,16.2457933 Z" id="facebook" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
14
public/assets/img/icn_reddit.svg
Normal file
14
public/assets/img/icn_reddit.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icn_reddit</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-955.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_reddit" transform="translate(955.000000, 911.000000)">
|
||||
<circle id="Oval" fill="#FF4500" cx="15" cy="15" r="15"></circle>
|
||||
<path d="M24.0048981,15.1197594 C23.9764831,14.3425491 23.4942377,13.6545068 22.773348,13.3626486 C22.0524583,13.0707904 21.2273777,13.229551 20.6662713,13.7680886 C19.1286396,12.7228617 17.3211611,12.1454075 15.4623388,12.1055335 L16.3409248,7.88832069 L19.2335002,8.49657254 C19.3045341,9.15687714 19.8447288,9.66775963 20.507966,9.70188281 C21.1712032,9.73600599 21.7609761,9.2832597 21.8994002,8.6337316 C22.0378242,7.98420349 21.6838865,7.33033854 21.0643652,7.09108696 C20.4448439,6.85183538 19.7432934,7.09808364 19.4092174,7.67205337 L16.097624,7.00973469 C15.9882261,6.98573517 15.8737733,7.00653061 15.7798101,7.06747975 C15.6858468,7.1284289 15.6201945,7.22445834 15.5975059,7.33413567 L14.5972695,12.0244333 C12.7155841,12.0528011 10.8832461,12.6306923 9.32575344,13.6869883 C8.75634717,13.1512356 7.92434611,13.0021476 7.20433738,13.3068472 C6.48432865,13.6115468 6.01208752,14.3125756 6.00022843,15.0943133 C5.98836935,15.876051 6.43912863,16.5910818 7.14956348,16.9174815 C7.13434461,17.1154345 7.13434461,17.3142637 7.14956348,17.5122166 C7.14956348,20.5399592 10.6774242,23 15.0298041,23 C19.382184,23 22.9100448,20.5399592 22.9100448,17.5122166 C22.9252636,17.3142637 22.9252636,17.1154345 22.9100448,16.9174815 C23.5907847,16.5791323 24.016659,15.8798572 24.0048981,15.1197594 Z M10.4881903,16.4714301 C10.4881903,15.724923 11.0933539,15.1197594 11.8398611,15.1197594 C12.5863682,15.1197594 13.1915319,15.724923 13.1915319,16.4714301 C13.1915319,17.2179373 12.5863682,17.8231009 11.8398611,17.8231009 C11.4813757,17.8231009 11.137573,17.6806932 10.8840855,17.4272057 C10.6305981,17.1737183 10.4881903,16.8299155 10.4881903,16.4714301 Z M18.3413975,20.1885248 C17.3824182,20.9112013 16.202534,21.2790195 15.0027707,21.2293113 C13.8030075,21.2790195 12.6231232,20.9112013 11.6641439,20.1885248 C11.5450602,20.0434288 11.5554608,19.831664 11.6881894,19.6989354 C11.820918,19.5662068 12.0326828,19.5558062 12.1777788,19.6748899 C12.9904434,20.2709755 13.9824183,20.5714295 14.989254,20.5264425 C15.9973291,20.581264 16.9939253,20.2903914 17.8142459,19.7019233 C17.910827,19.6077567 18.0503089,19.5722686 18.1801501,19.608827 C18.3099913,19.6453854 18.4104658,19.7484362 18.4437259,19.8791612 C18.476986,20.0098862 18.4379786,20.148425 18.3413975,20.2425916 L18.3413975,20.1885248 Z M18.0980968,17.8771677 C17.3515896,17.8771677 16.746426,17.2720041 16.746426,16.525497 C16.746426,15.7789898 17.3515896,15.1738262 18.0980968,15.1738262 C18.844604,15.1738262 19.4497676,15.7789898 19.4497676,16.525497 C19.4646058,16.8956141 19.3269023,17.2556033 19.0688404,17.5213305 C18.8107785,17.7870576 18.4549729,17.935236 18.0845801,17.9312346 L18.0980968,17.8771677 Z" id="Shape" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
14
public/assets/img/icn_tumblr.svg
Normal file
14
public/assets/img/icn_tumblr.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icn_tumblr</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-911.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_tumblr" transform="translate(911.000000, 911.000000)">
|
||||
<rect id="Rectangle-7-Copy-2" fill="#274061" x="0" y="0" width="30" height="30" rx="15"></rect>
|
||||
<path d="M10,13.3195248 L10,11.139339 C10.6412999,10.9383992 11.1874537,10.6570877 11.6384778,10.2953961 C12.0895019,9.92700647 12.4524299,9.48494557 12.7272727,8.9692001 C13.0021155,8.44675665 13.1923885,7.79036318 13.2980973,7 L15.6131078,7 L15.6131078,10.8982124 L19.4608879,10.8982124 L19.4608879,13.3195248 L15.6131078,13.3195248 L15.6131078,17.2780189 C15.6131078,18.188946 15.6624378,18.7649647 15.7610994,19.0060925 C15.8527136,19.2539182 16.0359394,19.454855 16.3107822,19.6089088 C16.6631448,19.8165466 17.0754029,19.9203639 17.5475687,19.9203639 C18.3720971,19.9203639 19.1895661,19.665844 20,19.1567966 L20,21.5881559 C19.2811803,21.9096595 18.6539844,22.127341 18.1183932,22.2412069 C17.5757549,22.3684688 16.9661767,22.4320988 16.2896406,22.4320988 C15.5496792,22.4320988 14.8942946,22.3416772 14.3234672,22.1608314 C13.7737816,21.9933816 13.2875285,21.7422106 12.8646934,21.407311 C12.4559529,21.0657133 12.1775906,20.714074 12.0295983,20.3523823 C11.8745588,19.9906907 11.7970402,19.4515104 11.7970402,18.7348251 L11.7970402,13.3195248 L10,13.3195248 Z" id="tumblr" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
14
public/assets/img/icn_twitter.svg
Normal file
14
public/assets/img/icn_twitter.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icn_twitter</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-823.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_twitter" transform="translate(823.000000, 911.000000)">
|
||||
<rect id="Rectangle-7" fill="#4DC2FE" x="0" y="0" width="30" height="30" rx="15"></rect>
|
||||
<path d="M7,20.3784787 C7.23887844,20.4052125 7.50505328,20.4185791 7.79853251,20.4185791 C9.33417962,20.4185791 10.7025913,19.9574295 11.9038086,19.0351165 C11.1871733,19.0217496 10.5456237,18.8062123 9.97914051,18.3884981 C9.41265735,17.9707839 9.02363258,17.4377885 8.81205454,16.789496 C9.03728278,16.8229132 9.24544516,16.8396215 9.43654791,16.8396215 C9.73002714,16.8396215 10.0200895,16.8028632 10.3067436,16.7293455 C9.54233258,16.5756266 8.90931421,16.2030311 8.40766949,15.6115478 C7.90602476,15.0200644 7.65520616,14.3333525 7.65520616,13.5513915 L7.65520616,13.5112911 C8.11931284,13.7652614 8.61753755,13.9022696 9.14989521,13.9223199 C8.69943873,13.6282491 8.34112644,13.2439577 8.07494761,12.7694344 C7.80876877,12.294911 7.67568135,11.7802948 7.67568135,11.2255703 C7.67568135,10.6374287 7.82583126,10.0927375 8.12613559,9.59148039 C8.95197248,10.5873111 9.95695313,11.3842979 11.1411077,11.9824647 C12.3252622,12.5806315 13.5930052,12.913127 14.9443747,12.9799613 C14.8897739,12.725991 14.8624739,12.4787079 14.8624739,12.2381045 C14.8624739,11.3425252 15.184955,10.5789551 15.8299268,9.94737114 C16.4748986,9.31578722 17.2546543,9 18.1692175,9 C19.1247313,9 19.9300808,9.3408497 20.5852902,10.0225593 C21.3292259,9.88220734 22.028788,9.62155757 22.6839975,9.24060219 C22.4314688,10.0091964 21.9468941,10.6040125 21.2302588,11.0250685 C21.8649929,10.9582342 22.4997176,10.791151 23.1344517,10.5238139 C22.6771701,11.1787898 22.1243454,11.7368476 21.4759611,12.1980042 C21.4827862,12.2915721 21.4861987,12.431922 21.4861987,12.619058 C21.4861987,13.4879036 21.3565238,14.3550653 21.09717,15.2205692 C20.8378163,16.0860731 20.4436728,16.9164765 19.9147277,17.7118044 C19.3857826,18.5071323 18.7561767,19.2105525 18.0258912,19.8220862 C17.2956056,20.4336198 16.4151812,20.9215027 15.3845913,21.2857495 C14.3540015,21.6499963 13.2517646,21.832117 12.0778477,21.832117 C10.2282461,21.832117 8.53564712,21.3475758 7,20.3784787 L7,20.3784787 Z" id="twitter" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in a new issue