Commit 39c10987 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Convert `ShareLinks` to tailwind

parent 5472f723
...@@ -112,7 +112,9 @@ function ShareAnnotationsPanel({ toastMessenger }) { ...@@ -112,7 +112,9 @@ function ShareAnnotationsPanel({ toastMessenger }) {
) annotations are only visible to you. ) annotations are only visible to you.
</span> </span>
</p> </p>
<ShareLinks shareURI={shareURI} /> <div className="text-[24px]">
<ShareLinks shareURI={shareURI} />
</div>
</> </>
) : ( ) : (
<p data-testid="no-sharing"> <p data-testid="no-sharing">
......
import { Icon } from '@hypothesis/frontend-shared'; import { Icon, Link } from '@hypothesis/frontend-shared';
/** /**
* @typedef ShareLinkProps * @typedef ShareLinkProps
...@@ -14,16 +14,16 @@ import { Icon } from '@hypothesis/frontend-shared'; ...@@ -14,16 +14,16 @@ import { Icon } from '@hypothesis/frontend-shared';
*/ */
function ShareLink({ label, iconName, uri }) { function ShareLink({ label, iconName, uri }) {
return ( return (
<li className="ShareLinks__link"> <li>
<a <Link
aria-label={label} aria-label={label}
classes="text-grey-6 hover:text-color-text block"
href={uri} href={uri}
title={label} title={label}
target="_blank" target="_blank"
rel="noopener noreferrer"
> >
<Icon name={iconName} classes="ShareLinks__icon" /> <Icon name={iconName} />
</a> </Link>
</li> </li>
); );
} }
...@@ -42,7 +42,7 @@ function ShareLinks({ shareURI }) { ...@@ -42,7 +42,7 @@ function ShareLinks({ shareURI }) {
const encodedURI = encodeURIComponent(shareURI); const encodedURI = encodeURIComponent(shareURI);
return ( return (
<ul className="ShareLinks"> <ul className="flex flex-row gap-x-4 items-center justify-center border-t pt-2">
<ShareLink <ShareLink
iconName="twitter" iconName="twitter"
label="Tweet share link" label="Tweet share link"
......
...@@ -46,26 +46,6 @@ ...@@ -46,26 +46,6 @@
} }
} }
/**
* horizontally-oriented collection of linked icons
*/
@mixin footer-links {
@include layout.row(center);
@include utils.border--top;
padding-top: 8px;
&__icon {
@include layout.row;
@include utils.icon--medium;
margin: 0 8px;
color: var.$grey-5;
&:hover {
color: var.$grey-6;
}
}
}
/** /**
* A pattern for styling a little "pointer" (arrow) icon that attaches to * A pattern for styling a little "pointer" (arrow) icon that attaches to
* menu content and serves as a visual anchor back to the triggering * menu content and serves as a visual anchor back to the triggering
......
...@@ -52,8 +52,4 @@ ...@@ -52,8 +52,4 @@
right: 0px; right: 0px;
bottom: -12px; bottom: -12px;
} }
.ShareLinks__icon {
@include utils.icon--medium;
}
} }
@use '../../mixins/utils';
@use '../../mixins/molecules';
.ShareLinks {
@include molecules.footer-links;
&__icon {
@include utils.icon--large;
}
}
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
@use './PaginationNavigation'; @use './PaginationNavigation';
@use './SelectionTabs'; @use './SelectionTabs';
@use './SearchInput'; @use './SearchInput';
@use './ShareLinks';
@use './TagEditor'; @use './TagEditor';
@use './TagList'; @use './TagList';
@use './Thread'; @use './Thread';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment