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

@@ -73,7 +73,7 @@ const RequestItemError: React.FC<RequestItemErroProps> = ({
buttonSize="sm"
onClick={() => deleteRequest()}
>
<TrashIcon className="w-5 h-5 mr-1" />
<TrashIcon />
<span>{intl.formatMessage(messages.deleterequest)}</span>
</Button>
</div>
@@ -373,10 +373,10 @@ const RequestItem: React.FC<RequestItemProps> = ({
onClick={() => retryRequest()}
>
<RefreshIcon
className={`w-5 h-5 mr-1 ${isRetrying ? 'animate-spin' : ''}`}
className={isRetrying ? 'animate-spin' : ''}
style={{ animationDirection: 'reverse' }}
/>
<span className="block">
<span>
{intl.formatMessage(
isRetrying ? globalMessages.retrying : globalMessages.retry
)}
@@ -390,10 +390,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
<TrashIcon className="w-5 h-5 mr-1" />
<span className="block">
{intl.formatMessage(messages.deleterequest)}
</span>
<TrashIcon />
<span>{intl.formatMessage(messages.deleterequest)}</span>
</ConfirmButton>
)}
{requestData.status === MediaRequestStatus.PENDING &&
@@ -405,10 +403,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
buttonType="success"
onClick={() => modifyRequest('approve')}
>
<CheckIcon className="w-5 h-5 mr-1" />
<span className="block">
{intl.formatMessage(globalMessages.approve)}
</span>
<CheckIcon />
<span>{intl.formatMessage(globalMessages.approve)}</span>
</Button>
</span>
<span className="w-full">
@@ -417,10 +413,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
buttonType="danger"
onClick={() => modifyRequest('decline')}
>
<XIcon className="w-5 h-5 mr-1" />
<span className="block">
{intl.formatMessage(globalMessages.decline)}
</span>
<XIcon />
<span>{intl.formatMessage(globalMessages.decline)}</span>
</Button>
</span>
</div>
@@ -436,10 +430,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
buttonType="primary"
onClick={() => setShowEditModal(true)}
>
<PencilIcon className="w-5 h-5 mr-1" />
<span className="block">
{intl.formatMessage(messages.editrequest)}
</span>
<PencilIcon />
<span>{intl.formatMessage(messages.editrequest)}</span>
</Button>
</span>
)}
@@ -451,10 +443,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
<XIcon className="w-5 h-5 mr-1" />
<span className="block">
{intl.formatMessage(messages.cancelRequest)}
</span>
<XIcon />
<span>{intl.formatMessage(messages.cancelRequest)}</span>
</ConfirmButton>
)}
</div>