Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: change info icon #2482

Merged
merged 1 commit into from
Oct 16, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/components/HelpText/icons/info.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@ function InfoIcon({ className, style, isFocused, iconSize }) {
const size = getIconSize(iconSize);
return (
<svg width={size} height={size} viewBox="0 0 22 22" className={className} style={style}>
<path
fill={background}
d="M11 0c6.074 0 11 4.925 11 11 0 6.074-4.926 11-11 11-6.075 0-11-4.926-11-11C0 4.925 4.925 0 11 0zm-.589 8.8c-.377 0-.778.066-1.201.202-.424.134-.868.296-1.332.485l-.187.771c.136-.052.302-.105.493-.164.192-.056.38-.083.563-.083.373 0 .624.061.757.187.131.125.197.349.197.667 0 .18-.02.376-.063.59-.043.212-.097.44-.16.68L8.77 14.64c-.062.263-.108.498-.137.707-.028.208-.042.413-.042.613 0 .515.19.939.57 1.273.38.334.913.502 1.598.502.446 0 .838-.059 1.175-.176.339-.117.79-.287 1.355-.51l.19-.77c-.1.045-.256.098-.472.158-.218.06-.41.09-.583.09-.365 0-.623-.06-.77-.18-.149-.12-.222-.347-.222-.678 0-.132.022-.327.068-.583.046-.256.097-.485.155-.686l.705-2.495c.069-.23.116-.48.142-.755.025-.274.038-.466.038-.575 0-.525-.186-.953-.553-1.281-.37-.328-.895-.494-1.576-.494zm1.566-4.57c-.462 0-.86.154-1.192.463-.328.309-.496.681-.496 1.114 0 .434.167.806.496 1.111.332.305.73.458 1.192.458.463 0 .859-.153 1.188-.458.328-.305.493-.676.493-1.11 0-.434-.165-.806-.493-1.115-.328-.309-.725-.462-1.188-.462z"
/>
<g id="logo" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<path
d="M11,0 C17.0751012,0 22,4.92488175 22,11 C22,17.0750847 17.0750847,22 11,22 C4.92488175,22 0,17.0751012 0,11 C0,4.92486525 4.92486525,0 11,0 Z M11,2 C6.02943475,2 2,6.02943475 2,11 C2,15.9705333 6.02945279,20 11,20 C15.9705153,20 20,15.9705153 20,11 C20,6.02945279 15.9705333,2 11,2 Z M11,10 C11.5128358,10 11.9355072,10.3860402 11.9932723,10.8833789 L12,11 L12,15 C12,15.5522847 11.5522847,16 11,16 C10.4871642,16 10.0644928,15.6139598 10.0067277,15.1166211 L10,15 L10,11 C10,10.4477153 10.4477153,10 11,10 Z M11.01,6 C11.5622847,6 12.01,6.44771525 12.01,7 C12.01,7.51283584 11.6239598,7.93550716 11.1266211,7.99327227 L11,8 C10.4477153,8 10,7.55228475 10,7 C10,6.48716416 10.3860402,6.06449284 10.8833789,6.00672773 L11.01,6 Z"
id="Combined-Shape"
fill={background}
fillRule="nonzero"
/>
</g>
</svg>
);
}
Expand Down
14 changes: 9 additions & 5 deletions src/components/HelpText/icons/infoInverse.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@ import { useTheme } from '../../../libs/hooks';
function InfoInverseIcon({ className, style }) {
const color = useTheme().rainbow.palette.text.header;
return (
<svg width={21} height={21} viewBox="0 0 21 21" className={className} style={style}>
<path
fill={color}
d="M10.5.5c5.522 0 10 4.478 10 10s-4.478 10-10 10-10-4.478-10-10c0-5.523 4.477-10 10-10zm0 .952a9.048 9.048 0 100 18.096 9.048 9.048 0 000-18.096zm-.51 7.142c.59 0 1.044.144 1.364.428.319.284.48.654.48 1.11 0 .093-.012.26-.034.497a3.397 3.397 0 01-.122.653l-.61 2.161c-.05.174-.095.372-.135.594-.04.221-.06.39-.06.504 0 .287.064.483.193.587.128.104.351.157.667.157.15 0 .316-.027.505-.079.187-.051.322-.097.408-.137l-.164.667c-.49.194-.88.34-1.173.442a3.083 3.083 0 01-1.017.152c-.594 0-1.056-.145-1.385-.434a1.402 1.402 0 01-.492-1.102c0-.174.012-.351.036-.532a6.72 6.72 0 01.118-.612l.614-2.167c.054-.208.1-.405.138-.59.037-.185.055-.355.055-.51 0-.275-.058-.469-.171-.578-.116-.108-.332-.162-.656-.162-.158 0-.32.024-.487.073a6.26 6.26 0 00-.427.142l.162-.668c.402-.163.786-.304 1.153-.42a3.401 3.401 0 011.04-.176zm1.356-3.955c.4 0 .744.133 1.028.4.285.268.427.59.427.965 0 .376-.142.697-.427.962a1.457 1.457 0 01-1.028.396c-.4 0-.745-.132-1.032-.396a1.269 1.269 0 01-.43-.962c0-.375.146-.697.43-.964a1.46 1.46 0 011.032-.401z"
/>
<svg width={22} height={22} viewBox="0 0 22 22" className={className} style={style}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.

<g id="logo" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<path
d="M11,0 C17.0751012,0 22,4.92488175 22,11 C22,17.0750847 17.0750847,22 11,22 C4.92488175,22 0,17.0751012 0,11 C0,4.92486525 4.92486525,0 11,0 Z M11,2 C6.02943475,2 2,6.02943475 2,11 C2,15.9705333 6.02945279,20 11,20 C15.9705153,20 20,15.9705153 20,11 C20,6.02945279 15.9705333,2 11,2 Z M11,10 C11.5128358,10 11.9355072,10.3860402 11.9932723,10.8833789 L12,11 L12,15 C12,15.5522847 11.5522847,16 11,16 C10.4871642,16 10.0644928,15.6139598 10.0067277,15.1166211 L10,15 L10,11 C10,10.4477153 10.4477153,10 11,10 Z M11.01,6 C11.5622847,6 12.01,6.44771525 12.01,7 C12.01,7.51283584 11.6239598,7.93550716 11.1266211,7.99327227 L11,8 C10.4477153,8 10,7.55228475 10,7 C10,6.48716416 10.3860402,6.06449284 10.8833789,6.00672773 L11.01,6 Z"
id="Combined-Shape"
fill={color}
fillRule="nonzero"
/>
</g>
</svg>
);
}
Expand Down