mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
cb58849d95
## Addresses #9371 ### Adds a suite of UI logic for premium features in the Sandbox environment For reviewer: please review the work for the below 3 substasks, which are the only remaining subtasks encompassed by this PR that have not yet passed review individually: - #10822 (9) - #10823 (10) - #10824 (11) ## Checklist for submitter - [x] Changes file added for user-visible changes in `changes/` - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com> Co-authored-by: Martin Angers <martin.n.angers@gmail.com>
78 lines
4 KiB
TypeScript
78 lines
4 KiB
TypeScript
import React from "react";
|
|
import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
|
|
|
|
interface IPremiumFeatureProps {
|
|
size?: IconSizes;
|
|
}
|
|
|
|
const PremiumFeature = ({ size = "medium" }: IPremiumFeatureProps) => {
|
|
return (
|
|
<svg
|
|
width={ICON_SIZES[size]}
|
|
height={ICON_SIZES[size]}
|
|
viewBox="0 0 17 17"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect width="17" height="17" fill="none" />
|
|
<rect
|
|
width="1400"
|
|
height="880"
|
|
transform="translate(-664 -401)"
|
|
fill="none"
|
|
/>
|
|
<rect
|
|
width="1400"
|
|
height="830"
|
|
transform="translate(-664 -351)"
|
|
fill="none"
|
|
/>
|
|
<g clipPath="url(#clip0_11687_321888)">
|
|
<mask id="path-1-inside-1_11687_321888" fill="white">
|
|
<path d="M8.5 16.5C12.9183 16.5 16.5 12.9183 16.5 8.5C16.5 4.08172 12.9183 0.5 8.5 0.5C4.08172 0.5 0.5 4.08172 0.5 8.5C0.5 12.9183 4.08172 16.5 8.5 16.5Z" />
|
|
</mask>
|
|
<path
|
|
d="M8.5 16.5C12.9183 16.5 16.5 12.9183 16.5 8.5C16.5 4.08172 12.9183 0.5 8.5 0.5C4.08172 0.5 0.5 4.08172 0.5 8.5C0.5 12.9183 4.08172 16.5 8.5 16.5Z"
|
|
fill="#C98DEF"
|
|
stroke="#B17FF0"
|
|
strokeWidth="2"
|
|
mask="url(#path-1-inside-1_11687_321888)"
|
|
/>
|
|
<mask
|
|
id="path-2-outside-2_11687_321888"
|
|
maskUnits="userSpaceOnUse"
|
|
x="2.2002"
|
|
y="3"
|
|
width="12"
|
|
height="11"
|
|
fill="black"
|
|
>
|
|
<rect fill="white" x="2.2002" y="3" width="12" height="11" />
|
|
<path d="M12.5334 6.99092L9.97518 6.69946C9.91026 6.69256 9.85501 6.6525 9.826 6.59448L8.62148 4.10671C8.55241 3.96443 8.34936 3.96443 8.28029 4.10671L7.07577 6.59448C7.04815 6.6525 6.99151 6.69256 6.92659 6.69946L4.36837 6.99092C4.20261 7.01026 4.14045 7.21746 4.26891 7.3252L6.28151 8.99938C6.33538 9.04496 6.36024 9.11679 6.34505 9.18586L5.74832 11.9319C5.7124 12.0936 5.88921 12.2193 6.03149 12.135L8.3535 10.7412C8.4129 10.7053 8.48887 10.7053 8.54827 10.7412L10.8703 12.135C11.0126 12.2206 11.188 12.0949 11.1521 11.9319L10.5553 9.18586C10.5401 9.11679 10.565 9.04496 10.6189 8.99938L12.6315 7.3252C12.7599 7.21884 12.6978 7.01026 12.532 6.99092H12.5334Z" />
|
|
</mask>
|
|
<path
|
|
d="M12.5334 6.99092L9.97518 6.69946C9.91026 6.69256 9.85501 6.6525 9.826 6.59448L8.62148 4.10671C8.55241 3.96443 8.34936 3.96443 8.28029 4.10671L7.07577 6.59448C7.04815 6.6525 6.99151 6.69256 6.92659 6.69946L4.36837 6.99092C4.20261 7.01026 4.14045 7.21746 4.26891 7.3252L6.28151 8.99938C6.33538 9.04496 6.36024 9.11679 6.34505 9.18586L5.74832 11.9319C5.7124 12.0936 5.88921 12.2193 6.03149 12.135L8.3535 10.7412C8.4129 10.7053 8.48887 10.7053 8.54827 10.7412L10.8703 12.135C11.0126 12.2206 11.188 12.0949 11.1521 11.9319L10.5553 9.18586C10.5401 9.11679 10.565 9.04496 10.6189 8.99938L12.6315 7.3252C12.7599 7.21884 12.6978 7.01026 12.532 6.99092H12.5334Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M12.5334 6.99092L9.97518 6.69946C9.91026 6.69256 9.85501 6.6525 9.826 6.59448L8.62148 4.10671C8.55241 3.96443 8.34936 3.96443 8.28029 4.10671L7.07577 6.59448C7.04815 6.6525 6.99151 6.69256 6.92659 6.69946L4.36837 6.99092C4.20261 7.01026 4.14045 7.21746 4.26891 7.3252L6.28151 8.99938C6.33538 9.04496 6.36024 9.11679 6.34505 9.18586L5.74832 11.9319C5.7124 12.0936 5.88921 12.2193 6.03149 12.135L8.3535 10.7412C8.4129 10.7053 8.48887 10.7053 8.54827 10.7412L10.8703 12.135C11.0126 12.2206 11.188 12.0949 11.1521 11.9319L10.5553 9.18586C10.5401 9.11679 10.565 9.04496 10.6189 8.99938L12.6315 7.3252C12.7599 7.21884 12.6978 7.01026 12.532 6.99092H12.5334Z"
|
|
stroke="#B17FF0"
|
|
strokeWidth="2"
|
|
mask="url(#path-2-outside-2_11687_321888)"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_11687_321888">
|
|
<rect
|
|
width="16"
|
|
height="16"
|
|
fill="white"
|
|
transform="translate(0.5 0.5)"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default PremiumFeature;
|