5505 fix icons

Updates #5505

Squashed commit of the following:

commit 3d66b82808b9c3904bad8bb32f3927172bfdcda6
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Mar 6 12:45:42 2023 +0300

    fix icons

commit 5030b45751e1717e5030eed0b46634f800d357d2
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Mar 6 12:24:32 2023 +0300

    client: fix chevron icon
This commit is contained in:
Ildar Kamalov 2023-03-07 13:22:54 +03:00
parent 012e5beb51
commit 057804a459
7 changed files with 22 additions and 13 deletions

View File

@ -60,7 +60,7 @@ const Dashboard = ({
title={t('refresh_btn')} title={t('refresh_btn')}
onClick={() => getAllStats()} onClick={() => getAllStats()}
> >
<svg className="icons"> <svg className="icons icon12">
<use xlinkHref="#refresh" /> <use xlinkHref="#refresh" />
</svg> </svg>
</button>; </button>;

View File

@ -100,7 +100,7 @@ class Table extends Component {
}) })
} }
> >
<svg className="icons"> <svg className="icons icon12">
<use xlinkHref="#edit" /> <use xlinkHref="#edit" />
</svg> </svg>
</button> </button>
@ -110,7 +110,7 @@ class Table extends Component {
onClick={() => handleDelete(url)} onClick={() => handleDelete(url)}
title={t('delete_table_action')} title={t('delete_table_action')}
> >
<svg className="icons"> <svg className="icons icon12">
<use xlinkHref="#delete" /> <use xlinkHref="#delete" />
</svg> </svg>
</button> </button>

View File

@ -162,7 +162,7 @@ const ClientCell = ({
{content && ( {content && (
<button className={buttonArrowClass} disabled={processingRules}> <button className={buttonArrowClass} disabled={processingRules}>
<IconTooltip <IconTooltip
className="h-100" className="icon24"
tooltipClass="button-action--arrow-option-container" tooltipClass="button-action--arrow-option-container"
xlinkHref="chevron-down" xlinkHref="chevron-down"
triggerClass="button-action--icon" triggerClass="button-action--icon"

View File

@ -106,6 +106,16 @@
max-height: 100% !important; max-height: 100% !important;
} }
.icon24 {
width: 24px;
height: 24px;
}
.icon12 {
width: 12px;
height: 12px;
}
.cursor--pointer { .cursor--pointer {
cursor: pointer; cursor: pointer;
} }
@ -311,7 +321,6 @@
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
} }
.button-action:active { .button-action:active {

View File

@ -290,7 +290,7 @@ const ClientsTable = ({
disabled={processingUpdating} disabled={processingUpdating}
title={t('edit_table_action')} title={t('edit_table_action')}
> >
<svg className="icons"> <svg className="icons icon12">
<use xlinkHref="#edit" /> <use xlinkHref="#edit" />
</svg> </svg>
</button> </button>
@ -301,7 +301,7 @@ const ClientsTable = ({
disabled={processingDeleting} disabled={processingDeleting}
title={t('delete_table_action')} title={t('delete_table_action')}
> >
<svg className="icons"> <svg className="icons icon12">
<use xlinkHref="#delete" /> <use xlinkHref="#delete" />
</svg> </svg>
</button> </button>

View File

@ -86,10 +86,10 @@ const Icons = () => (
d="m19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1 -2.83 0l-.06-.06a1.65 1.65 0 0 0 -1.82-.33 1.65 1.65 0 0 0 -1 1.51v.17a2 2 0 0 1 -2 2 2 2 0 0 1 -2-2v-.09a1.65 1.65 0 0 0 -1.08-1.51 1.65 1.65 0 0 0 -1.82.33l-.06.06a2 2 0 0 1 -2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0 -1.51-1h-.17a2 2 0 0 1 -2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0 -.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33h.08a1.65 1.65 0 0 0 1-1.51v-.17a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0 -.33 1.82v.08a1.65 1.65 0 0 0 1.51 1h.17a2 2 0 0 1 2 2 2 2 0 0 1 -2 2h-.09a1.65 1.65 0 0 0 -1.51 1z" /> d="m19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1 -2.83 0l-.06-.06a1.65 1.65 0 0 0 -1.82-.33 1.65 1.65 0 0 0 -1 1.51v.17a2 2 0 0 1 -2 2 2 2 0 0 1 -2-2v-.09a1.65 1.65 0 0 0 -1.08-1.51 1.65 1.65 0 0 0 -1.82.33l-.06.06a2 2 0 0 1 -2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0 -1.51-1h-.17a2 2 0 0 1 -2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0 -.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33h.08a1.65 1.65 0 0 0 1-1.51v-.17a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0 -.33 1.82v.08a1.65 1.65 0 0 0 1.51 1h.17a2 2 0 0 1 2 2 2 2 0 0 1 -2 2h-.09a1.65 1.65 0 0 0 -1.51 1z" />
</symbol> </symbol>
<symbol id="refresh" viewBox="0 0 24 24" stroke="currentColor" fill="none" <symbol id="refresh" viewBox="0 0 24 24" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"> <polyline points="23 4 23 10 17 10"></polyline>
<path d="M23 4v6h-6M1 20v-6h6" /> <polyline points="1 20 1 14 7 14"></polyline>
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" /> <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
</symbol> </symbol>
<symbol id="dns_privacy" viewBox="0 0 30 30" stroke="none" fill="currentColor" <symbol id="dns_privacy" viewBox="0 0 30 30" stroke="none" fill="currentColor"
@ -198,7 +198,7 @@ const Icons = () => (
</svg> </svg>
</symbol> </symbol>
<symbol id="chevron-down" viewBox="0 0 24 24"> <symbol id="chevron-down" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fillRule="evenodd"> <g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z" fill="#878787" fillOpacity=".01" /> <path d="M0 0h24v24H0z" fill="#878787" fillOpacity=".01" />
<path stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" <path stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"

View File

@ -39,7 +39,7 @@ const Version = () => {
disabled={processingVersion} disabled={processingVersion}
title={t('check_updates_now')} title={t('check_updates_now')}
> >
<svg className="icons"> <svg className="icons icon12">
<use xlinkHref="#refresh" /> <use xlinkHref="#refresh" />
</svg> </svg>
</button>} </button>}