refactor(css): add styles targeting SVG button/modal icons (#1464)

* refactor(css): add global classes for common icon types

* refactor(css): target child SVGs instead of creating new icon classes

* fix: fix ButtonWithDropdown style class spacing
This commit is contained in:
TheCatLady
2021-04-26 06:09:58 -04:00
committed by GitHub
parent 079645c2c7
commit 3e5e9c0ad1
43 changed files with 265 additions and 273 deletions

View File

@@ -132,7 +132,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
setEditRequest(false);
setShowRequestModal(true);
},
svg: <DownloadIcon className="w-5 h-5 mr-1" />,
svg: <DownloadIcon />,
});
}
@@ -151,7 +151,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
setEditRequest(false);
setShowRequest4kModal(true);
},
svg: <DownloadIcon className="w-5 h-5 mr-1" />,
svg: <DownloadIcon />,
});
}
@@ -168,7 +168,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
setEditRequest(true);
setShowRequestModal(true);
},
svg: <InformationCircleIcon className="w-5 h-5 mr-1" />,
svg: <InformationCircleIcon />,
});
}
@@ -185,7 +185,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
setEditRequest(true);
setShowRequest4kModal(true);
},
svg: <InformationCircleIcon className="w-5 h-5 mr-1" />,
svg: <InformationCircleIcon />,
});
}
@@ -201,7 +201,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequest(activeRequest, 'approve');
},
svg: <CheckIcon className="w-5 h-5 mr-1" />,
svg: <CheckIcon />,
},
{
id: 'decline-request',
@@ -209,7 +209,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequest(activeRequest, 'decline');
},
svg: <XIcon className="w-5 h-5 mr-1" />,
svg: <XIcon />,
}
);
}
@@ -229,7 +229,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequests(activeRequests, 'approve');
},
svg: <CheckIcon className="w-5 h-5 mr-1" />,
svg: <CheckIcon />,
},
{
id: 'decline-request-batch',
@@ -239,7 +239,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequests(activeRequests, 'decline');
},
svg: <XIcon className="w-5 h-5 mr-1" />,
svg: <XIcon />,
}
);
}
@@ -256,7 +256,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequest(active4kRequest, 'approve');
},
svg: <CheckIcon className="w-5 h-5 mr-1" />,
svg: <CheckIcon />,
},
{
id: 'decline-4k-request',
@@ -264,7 +264,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequest(active4kRequest, 'decline');
},
svg: <XIcon className="w-5 h-5 mr-1" />,
svg: <XIcon />,
}
);
}
@@ -284,7 +284,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequests(active4kRequests, 'approve');
},
svg: <CheckIcon className="w-5 h-5 mr-1" />,
svg: <CheckIcon />,
},
{
id: 'decline-4k-request-batch',
@@ -294,7 +294,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
action: () => {
modifyRequests(active4kRequests, 'decline');
},
svg: <XIcon className="w-5 h-5 mr-1" />,
svg: <XIcon />,
}
);
}
@@ -315,7 +315,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
setEditRequest(false);
setShowRequestModal(true);
},
svg: <DownloadIcon className="w-5 h-5 mr-1" />,
svg: <DownloadIcon />,
});
}
@@ -338,7 +338,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
setEditRequest(false);
setShowRequest4kModal(true);
},
svg: <DownloadIcon className="w-5 h-5 mr-1" />,
svg: <DownloadIcon />,
});
}
@@ -376,8 +376,8 @@ const RequestButton: React.FC<RequestButtonProps> = ({
<ButtonWithDropdown
text={
<>
{buttonOne.svg ?? null}
{buttonOne.text}
{buttonOne.svg}
<span>{buttonOne.text}</span>
</>
}
onClick={buttonOne.action}
@@ -390,7 +390,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
key={`request-option-${button.id}`}
>
{button.svg}
{button.text}
<span>{button.text}</span>
</ButtonWithDropdown.Item>
))
: null}