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 }) {
) annotations are only visible to you.
</span>
</p>
<div className="text-[24px]">
<ShareLinks shareURI={shareURI} />
</div>
</>
) : (
<p data-testid="no-sharing">
......
import { Icon } from '@hypothesis/frontend-shared';
import { Icon, Link } from '@hypothesis/frontend-shared';
/**
* @typedef ShareLinkProps
......@@ -14,16 +14,16 @@ import { Icon } from '@hypothesis/frontend-shared';
*/
function ShareLink({ label, iconName, uri }) {
return (
<li className="ShareLinks__link">
<a
<li>
<Link
aria-label={label}
classes="text-grey-6 hover:text-color-text block"
href={uri}
title={label}
target="_blank"
rel="noopener noreferrer"
>
<Icon name={iconName} classes="ShareLinks__icon" />
</a>
<Icon name={iconName} />
</Link>
</li>
);
}
......@@ -42,7 +42,7 @@ function ShareLinks({ shareURI }) {
const encodedURI = encodeURIComponent(shareURI);
return (
<ul className="ShareLinks">
<ul className="flex flex-row gap-x-4 items-center justify-center border-t pt-2">
<ShareLink
iconName="twitter"
label="Tweet share link"
......
......@@ -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
* menu content and serves as a visual anchor back to the triggering
......
......@@ -52,8 +52,4 @@
right: 0px;
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 @@
@use './PaginationNavigation';
@use './SelectionTabs';
@use './SearchInput';
@use './ShareLinks';
@use './TagEditor';
@use './TagList';
@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