Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Replace questionnaire for new users with a popup asking for just their primary use-case.

Browse Source 
Summary:
- WelcomeQuestions implements the new popup.
- Popup shows up on any doc-list page, the first time the user visits one after
  signing up and setting their name.
- Submits responses to the same "New User Questions" doc, which has been
  changed to accept two new columns (ChoiceList of use_cases, and Text for
  use_other).
- Improve modals on mobile along the way.

Test Plan: Added browser tests and tested manually

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3213
This commit is contained in:
Dmitry S 2022-01-13 21:55:55 -05:00
parent ba6ecc5e9e
commit 215bb90e68
19 changed files with 335 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/models/AppModel.ts
View File

@ -7,7 +7,9 @@ import {Features} from 'app/common/Features';
import {GristLoadConfig} from 'app/common/gristUrls';
import {FullUser} from 'app/common/LoginSessionAPI';
import {LocalPlugin} from 'app/common/plugin';
import {UserPrefs} from 'app/common/Prefs';
import {getOrgName, Organization, OrgError, UserAPI, UserAPIImpl} from 'app/common/UserAPI';
import {getUserPrefsObs} from 'app/client/models/UserPrefs';
import {bundleChanges, Computed, Disposable, Observable, subscribe} from 'grainjs';
export {reportError} from 'app/client/models/errors';
@ -58,6 +60,7 @@ export interface AppModel {
orgError?: OrgError; // If currentOrg is null, the error that caused it.
currentFeatures: Features; // features of the current org's product.
userPrefsObs: Observable<UserPrefs>;
pageType: Observable<PageType>;
@ -177,6 +180,8 @@ export class AppModelImpl extends Disposable implements AppModel {
public readonly currentFeatures = (this.currentOrg && this.currentOrg.billingAccount) ?
this.currentOrg.billingAccount.product.features : {};
public readonly userPrefsObs = getUserPrefsObs(this);
// Get the current PageType from the URL.
public readonly pageType: Observable<PageType> = Computed.create(this, urlState().state,
(use, state) => (state.doc ? "doc" : (state.billing ? "billing" : (state.welcome ? "welcome" : "home"))));

86
app/client/models/UserPrefs.ts
View File

@ -1,40 +1,60 @@
import {localStorageObs} from 'app/client/lib/localStorageObs';
import {AppModel} from 'app/client/models/AppModel';
import {UserOrgPrefs} from 'app/common/Prefs';
import {UserOrgPrefs, UserPrefs} from 'app/common/Prefs';
import {Computed, Observable} from 'grainjs';
/**
* Creates an observable that returns UserOrgPrefs, and which stores them when set.
*
* For anon user, the prefs live in localStorage. Note that the observable isn't actually watching
* for changes on the server, it will only change when set.
*/
export function getUserOrgPrefsObs(appModel: AppModel): Observable<UserOrgPrefs> {
const savedPrefs = appModel.currentValidUser ? appModel.currentOrg?.userOrgPrefs : undefined;
if (savedPrefs) {
const prefsObs = Observable.create<UserOrgPrefs>(null, savedPrefs);
return Computed.create(null, (use) => use(prefsObs))
.onWrite(userOrgPrefs => {
prefsObs.set(userOrgPrefs);
return appModel.api.updateOrg('current', {userOrgPrefs});
});
} else {
const userId = appModel.currentUser?.id || 0;
const jsonPrefsObs = localStorageObs(`userOrgPrefs:u=${userId}`);
return Computed.create(null, jsonPrefsObs, (use, p) => (p && JSON.parse(p) || {}) as UserOrgPrefs)
.onWrite(userOrgPrefs => {
jsonPrefsObs.set(JSON.stringify(userOrgPrefs));
});
}
interface PrefsTypes {
userOrgPrefs: UserOrgPrefs;
userPrefs: UserPrefs;
}
/**
* Creates an observable that returns a particular preference value from `prefsObs`, and which
* stores it when set.
*/
export function getUserOrgPrefObs<Name extends keyof UserOrgPrefs>(
prefsObs: Observable<UserOrgPrefs>, prefName: Name
): Observable<UserOrgPrefs[Name]> {
return Computed.create(null, (use) => use(prefsObs)[prefName])
.onWrite(value => prefsObs.set({...prefsObs.get(), [prefName]: value}));
function makePrefFunctions<P extends keyof PrefsTypes>(prefsTypeName: P) {
type PrefsType = PrefsTypes[P];
/**
* Creates an observable that returns UserOrgPrefs, and which stores them when set.
*
* For anon user, the prefs live in localStorage. Note that the observable isn't actually watching
* for changes on the server, it will only change when set.
*/
function getPrefsObs(appModel: AppModel): Observable<PrefsType> {
const savedPrefs = appModel.currentValidUser ? appModel.currentOrg?.[prefsTypeName] : undefined;
if (savedPrefs) {
const prefsObs = Observable.create<PrefsType>(null, savedPrefs!);
return Computed.create(null, (use) => use(prefsObs))
.onWrite(prefs => {
prefsObs.set(prefs);
return appModel.api.updateOrg('current', {[prefsTypeName]: prefs});
});
} else {
const userId = appModel.currentUser?.id || 0;
const jsonPrefsObs = localStorageObs(`${prefsTypeName}:u=${userId}`);
return Computed.create(null, jsonPrefsObs, (use, p) => (p && JSON.parse(p) || {}) as PrefsType)
.onWrite(prefs => {
jsonPrefsObs.set(JSON.stringify(prefs));
});
}
}
/**
* Creates an observable that returns a particular preference value from `prefsObs`, and which
* stores it when set.
*/
function getPrefObs<Name extends keyof PrefsType>(
prefsObs: Observable<PrefsType>, prefName: Name
): Observable<PrefsType[Name]> {
return Computed.create(null, (use) => use(prefsObs)[prefName])
.onWrite(value => prefsObs.set({...prefsObs.get(), [prefName]: value}));
}
return {getPrefsObs, getPrefObs};
}
// Functions actually exported are:
// - getUserOrgPrefsObs(appModel): Observsble<UserOrgPrefs>
// - getUserOrgPrefObs(userOrgPrefsObs, prefName): Observsble<PrefType[prefName]>
// - getUserPrefsObs(appModel): Observsble<UserPrefs>
// - getUserPrefObs(userPrefsObs, prefName): Observsble<PrefType[prefName]>
export const {getPrefsObs: getUserOrgPrefsObs, getPrefObs: getUserOrgPrefObs} = makePrefFunctions('userOrgPrefs');
export const {getPrefsObs: getUserPrefsObs, getPrefObs: getUserPrefObs} = makePrefFunctions('userPrefs');

2
app/client/ui/DocMenu.ts
View File

@ -13,6 +13,7 @@ import {buildHomeIntro} from 'app/client/ui/HomeIntro';
import {buildPinnedDoc, createPinnedDocs} from 'app/client/ui/PinnedDocs';
import {shadowScroll} from 'app/client/ui/shadowScroll';
import {transition} from 'app/client/ui/transitions';
import {showWelcomeQuestions} from 'app/client/ui/WelcomeQuestions';
import {buttonSelect, cssButtonSelect} from 'app/client/ui2018/buttonSelect';
import {colors} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
@ -48,6 +49,7 @@ export function createDocMenu(home: HomeModel) {
function createLoadedDocMenu(home: HomeModel) {
const flashDocId = observable<string|null>(null);
return css.docList(
showWelcomeQuestions(home.app.userPrefsObs),
dom.maybe(!home.app.currentFeatures.workspaces, () => [
css.docListHeader('This service is not available right now'),
dom('span', '(The organization needs a paid plan)')

161
app/client/ui/WelcomeQuestions.ts Normal file
View File

@ -0,0 +1,161 @@
import {getUserPrefObs} from 'app/client/models/UserPrefs';
import {colors, testId} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {IconName} from 'app/client/ui2018/IconList';
import {ISaveModalOptions, saveModal} from 'app/client/ui2018/modals';
import {BaseAPI} from 'app/common/BaseAPI';
import {UserPrefs} from 'app/common/Prefs';
import {dom, input, Observable, styled, subscribeElem} from 'grainjs';
export function showWelcomeQuestions(userPrefsObs: Observable<UserPrefs>) {
if (!userPrefsObs.get()?.showNewUserQuestions) {
return null;
}
return saveModal((ctl, owner): ISaveModalOptions => {
const selection = choices.map(c => Observable.create(owner, false));
const otherText = Observable.create(owner, '');
const showQuestions = getUserPrefObs(userPrefsObs, 'showNewUserQuestions');
async function onConfirm() {
const selected = choices.filter((c, i) => selection[i].get()).map(c => c.text);
const use_cases = ['L', ...selected]; // Format to populate a ChoiceList column
const use_other = selected.includes('Other') ? otherText.get() : '';
const submitUrl = new URL(window.location.href);
submitUrl.pathname = '/welcome/info';
return BaseAPI.requestJson(submitUrl.href,
{method: 'POST', body: JSON.stringify({use_cases, use_other})});
}
// Whichever way the modal is closed, don't show the questions again. (We set the value to
// undefined to remove it from the JSON prefs object entirely; it's never used again.)
owner.onDispose(() => showQuestions.set(undefined));
return {
title: [cssLogo(), dom('div', 'Welcome to Grist!')],
body: buildInfoForm(selection, otherText),
saveLabel: 'Start using Grist',
saveFunc: onConfirm,
hideCancel: true,
width: 'fixed-wide',
modalArgs: cssModalCentered.cls(''),
};
});
}
const choices: Array<{icon: IconName, color: string, text: string}> = [
{icon: 'UseProduct', color: `${colors.lightGreen}`, text: 'Product Development' },
{icon: 'UseFinance', color: '#0075A2', text: 'Finance & Accounting'},
{icon: 'UseMedia', color: '#F7B32B', text: 'Media Production' },
{icon: 'UseMonitor', color: '#F2545B', text: 'IT & Technology' },
{icon: 'UseChart', color: '#7141F9', text: 'Marketing' },
{icon: 'UseScience', color: '#231942', text: 'Research' },
{icon: 'UseSales', color: '#885A5A', text: 'Sales' },
{icon: 'UseEducate', color: '#4A5899', text: 'Education' },
{icon: 'UseHr', color: '#688047', text: 'HR & Management' },
{icon: 'UseOther', color: '#929299', text: 'Other' },
];
function buildInfoForm(selection: Observable<boolean>[], otherText: Observable<string>) {
return [
dom('span', 'What brings you to Grist? Please help us serve you better.'),
cssChoices(
choices.map((item, i) => cssChoice(
cssIcon(icon(item.icon), {style: `--icon-color: ${item.color}`}),
cssChoice.cls('-selected', selection[i]),
dom.on('click', () => selection[i].set(!selection[i].get())),
(item.icon !== 'UseOther' ?
item.text :
[
cssOtherLabel(item.text),
cssOtherInput(otherText, {}, {type: 'text', placeholder: 'Type here'},
// The following subscribes to changes to selection observable, and focuses the input when
// this item is selected.
(elem) => subscribeElem(elem, selection[i], val => val && setTimeout(() => elem.focus(), 0)),
// It's annoying if clicking into the input toggles selection; better to turn that
// off (user can click icon to deselect).
dom.on('click', ev => ev.stopPropagation()),
// Similarly, ignore Enter/Escape in "Other" textbox, so that they don't submit/close the form.
dom.onKeyDown({
Enter: (ev, elem) => elem.blur(),
Escape: (ev, elem) => elem.blur(),
}),
)
]
)
)),
testId('welcome-questions'),
),
];
}
const cssModalCentered = styled('div', `
text-align: center;
`);
const cssLogo = styled('div', `
display: inline-block;
height: 48px;
width: 48px;
background-image: var(--icon-GristLogo);
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center;
`);
const cssChoices = styled('div', `
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 24px;
`);
const cssChoice = styled('div', `
flex: 1 0 40%;
min-width: 0px;
margin: 8px 4px 0 4px;
height: 40px;
border: 1px solid ${colors.darkGrey};
border-radius: 3px;
display: flex;
align-items: center;
text-align: left;
cursor: pointer;
&:hover {
border-color: ${colors.lightGreen};
}
&-selected {
background-color: ${colors.mediumGrey};
}
&-selected:hover {
border-color: ${colors.darkGreen};
}
&-selected:focus-within {
box-shadow: 0 0 2px 0px var(--grist-color-cursor);
border-color: ${colors.lightGreen};
}
`);
const cssIcon = styled('div', `
margin: 0 16px;
`);
const cssOtherLabel = styled('div', `
display: block;
.${cssChoice.className}-selected & {
display: none;
}
`);
const cssOtherInput = styled(input, `
display: none;
border: none;
background: none;
outline: none;
padding: 0px;
.${cssChoice.className}-selected & {
display: block;
}
`);

24
app/client/ui2018/IconList.ts
View File

@ -97,7 +97,17 @@ export type IconName = "ChartArea" |
"Warning" |
"Widget" |
"Wrap" |
"Zoom";
"Zoom" |
"UseChart" |
"UseEducate" |
"UseFinance" |
"UseHr" |
"UseMedia" |
"UseMonitor" |
"UseOther" |
"UseProduct" |
"UseSales" |
"UseScience";
export const IconList: IconName[] = ["ChartArea",
"ChartBar",
@ -198,4 +208,14 @@ export const IconList: IconName[] = ["ChartArea",
"Warning",
"Widget",
"Wrap",
"Zoom"];
"Zoom",
"UseChart",
"UseEducate",
"UseFinance",
"UseHr",
"UseMedia",
"UseMonitor",
"UseOther",
"UseProduct",
"UseSales",
"UseScience"];

10
app/client/ui2018/modals.ts
View File

@ -2,7 +2,7 @@ import {FocusLayer} from 'app/client/lib/FocusLayer';
import * as Mousetrap from 'app/client/lib/Mousetrap';
import {reportError} from 'app/client/models/errors';
import {bigBasicButton, bigPrimaryButton, cssButton} from 'app/client/ui2018/buttons';
import {colors, testId, vars} from 'app/client/ui2018/cssVars';
import {colors, mediaSmall, testId, vars} from 'app/client/ui2018/cssVars';
import {loadingSpinner} from 'app/client/ui2018/loaders';
import {waitGrainObs} from 'app/common/gutil';
import {Computed, Disposable, dom, DomContents, DomElementArg, MultiHolder, Observable, styled} from 'grainjs';
@ -347,6 +347,13 @@ const cssModalDialog = styled('div', `
&-fixed-wide {
width: 600px;
}
@media ${mediaSmall} {
& {
width: unset;
min-width: unset;
padding: 24px 16px;
}
}
`);
export const cssModalTitle = styled('div', `
@ -381,6 +388,7 @@ const cssModalBacker = styled('div', `
height: 100%;
top: 0;
left: 0;
padding: 16px;
z-index: 999;
background-color: ${colors.backdrop};
overflow-y: auto;

10
app/common/Prefs.ts
View File

@ -6,14 +6,18 @@ export type SortPref = typeof SortPref.type;
export const ViewPref = StringUnion("list", "icons");
export type ViewPref = typeof ViewPref.type;
// A collection of preferences related to a user or org (or combination).
export interface Prefs {
// TODO replace this with real preferences.
// A dummy field used only in tests.
placeholder?: string;
}
export type UserPrefs = Prefs;
// A collection of preferences related to a user or org (or combination).
export interface UserPrefs extends Prefs {
// Whether to ask the user to fill out a form about their use-case, on opening the DocMenu page.
// Set to true on first login, then reset when the form is closed, so that it only shows once.
showNewUserQuestions?: boolean;
}
export interface UserOrgPrefs extends Prefs {
docMenuSort?: SortPref;

26
app/server/lib/FlexServer.ts
View File

@ -1095,10 +1095,20 @@ export class FlexServer implements GristServer {
if (req.params.page === 'user') {
const name: string|undefined = req.body && req.body.username || undefined;
// Reset isFirstTimeUser flag, used to redirect a new user to the /welcome/user page.
await this._dbManager.updateUser(userId, {name, isFirstTimeUser: false});
redirectPath = '/welcome/info';
// This is a good time to set another flag (showNewUserQuestions), to show a popup with
// welcome question(s) to this new user. Both flags are scoped to the user, but
// isFirstTimeUser has a dedicated DB field because it predates userPrefs. Note that the
// updateOrg() method handles all levels of prefs (for user, user+org, or org).
await this._dbManager.updateOrg(getScope(req), 0, {userPrefs: {showNewUserQuestions: true}});
} else if (req.params.page === 'info') {
// The /welcome/info page is no longer part of any flow, but if visited, will still submit
// here and redirect. The new form with new-user questions appears in a modal popup. It
// also posts here to save answers, but ignores the response.
const user = getUser(req);
const row = {...req.body, UserID: userId, Name: user.name, Email: user.loginEmail};
this._recordNewUserInfo(row)
@ -1106,14 +1116,14 @@ export class FlexServer implements GristServer {
// If we failed to record, at least log the data, so we could potentially recover it.
log.rawWarn(`Failed to record new user info: ${e.message}`, {newUserQuestions: row});
});
}
// redirect to teams page if users has access to more than one org. Otherwise redirect to
// personal org.
const result = await this._dbManager.getMergedOrgs(userId, userId, domain || null);
const orgs = (result.status === 200) ? result.data : null;
if (orgs && orgs.length > 1) {
redirectPath = '/welcome/teams';
}
// redirect to teams page if users has access to more than one org. Otherwise redirect to
// personal org.
const result = await this._dbManager.getMergedOrgs(userId, userId, domain || null);
const orgs = (result.status === 200) ? result.data : null;
if (orgs && orgs.length > 1) {
redirectPath = '/welcome/teams';
}
const mergedOrgDomain = this._dbManager.mergedOrgDomain();

10
static/icons/icons.css
View File

@ -99,4 +99,14 @@
--icon-Widget: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuNSwxIEMxLjIyMzg1NzYzLDEgMSwxLjIyMzg1NzYzIDEsMS41IEwxLDUuNSBDMSw1Ljc3NjE0MjM3IDEuMjIzODU3NjMsNiAxLjUsNiBMNS41LDYgQzUuNzc2MTQyMzcsNiA2LDUuNzc2MTQyMzcgNiw1LjUgTDYsMS41IEM2LDEuMjIzODU3NjMgNS43NzYxNDIzNywxIDUuNSwxIEwxLjUsMSBaIE0xLjUsMCBMNS41LDAgQzYuMzI4NDI3MTIsLTEuNjY1MzM0NTRlLTE2IDcsMC42NzE1NzI4NzUgNywxLjUgTDcsNS41IEM3LDYuMzI4NDI3MTIgNi4zMjg0MjcxMiw3IDUuNSw3IEwxLjUsNyBDMC42NzE1NzI4NzUsNyAxLjY2NTMzNDU0ZS0xNiw2LjMyODQyNzEyIDAsNS41IEwwLDEuNSBDLTguMzI2NjcyNjhlLTE3LDAuNjcxNTcyODc1IDAuNjcxNTcyODc1LDEuNjY1MzM0NTRlLTE2IDEuNSwwIFogTTEyLjY5NDQxNTQsMS4xMTE4MDg5IEMxMi41ODcwMjEyLDEuMDA0NDE0NzIgMTIuNDEyOTAwOCwxLjAwNDQxNDcyIDEyLjMwNTUwNjcsMS4xMTE4MDg5IEwxMC4xMTIwNjE0LDMuMzA1MjU0MTMgQzEwLjAwNDY2NzMsMy40MTI2NDgzMSAxMC4wMDQ2NjczLDMuNTg2NzY4NjggMTAuMTEyMDYxNCwzLjY5NDE2Mjg2IEwxMi4zMDU1MDY3LDUuODg3NjA4MSBDMTIuNDEyOTAwOCw1Ljk5NTAwMjI4IDEyLjU4NzAyMTIsNS45OTUwMDIyOCAxMi42OTQ0MTU0LDUuODg3NjA4MSBMMTQuODg3ODYwNiwzLjY5NDE2Mjg2IEMxNC45OTUyNTQ4LDMuNTg2NzY4NjggMTQuOTk1MjU0OCwzLjQxMjY0ODMxIDE0Ljg4Nzg2MDYsMy4zMDUyNTQxMyBMMTIuNjk0NDE1NCwxLjExMTgwODkgWiBNMTMuNDAxNTIyMiwwLjQwNDcwMjExOCBMMTUuNTk0OTY3NCwyLjU5ODE0NzM1IEMxNi4wOTI4ODU5LDMuMDk2MDY1ODIgMTYuMDkyODg1OSwzLjkwMzM1MTE3IDE1LjU5NDk2NzQsNC40MDEyNjk2NCBMMTMuNDAxNTIyMiw2LjU5NDcxNDg4IEMxMi45MDM2MDM3LDcuMDkyNjMzMzUgMTIuMDk2MzE4NCw3LjA5MjYzMzM1IDExLjU5ODM5OTksNi41OTQ3MTQ4OCBMOS40MDQ5NTQ2NSw0LjQwMTI2OTY0IEM4LjkwNzAzNjE4LDMuOTAzMzUxMTcgOC45MDcwMzYxOCwzLjA5NjA2NTgyIDkuNDA0OTU0NjUsMi41OTgxNDczNSBMMTEuNTk4Mzk5OSwwLjQwNDcwMjExOCBDMTIuMDk2MzE4NCwtMC4wOTMyMTYzNTQzIDEyLjkwMzYwMzcsLTAuMDkzMjE2MzU0MyAxMy40MDE1MjIyLDAuNDA0NzAyMTE4IFogTTEuNSwxMCBDMS4yMjM4NTc2MywxMCAxLDEwLjIyMzg1NzYgMSwxMC41IEwxLDE0LjUgQzEsMTQuNzc2MTQyNCAxLjIyMzg1NzYzLDE1IDEuNSwxNSBMNS41LDE1IEM1Ljc3NjE0MjM3LDE1IDYsMTQuNzc2MTQyNCA2LDE0LjUgTDYsMTAuNSBDNiwxMC4yMjM4NTc2IDUuNzc2MTQyMzcsMTAgNS41LDEwIEwxLjUsMTAgWiBNMS41LDkgTDUuNSw5IEM2LjMyODQyNzEyLDkgNyw5LjY3MTU3Mjg4IDcsMTAuNSBMNywxNC41IEM3LDE1LjMyODQyNzEgNi4zMjg0MjcxMiwxNiA1LjUsMTYgTDEuNSwxNiBDMC42NzE1NzI4NzUsMTYgMS42NjUzMzQ1NGUtMTYsMTUuMzI4NDI3MSAwLDE0LjUgTDAsMTAuNSBDLTguMzI2NjcyNjhlLTE3LDkuNjcxNTcyODggMC42NzE1NzI4NzUsOSAxLjUsOSBaIE0xMC41LDEwIEMxMC4yMjM4NTc2LDEwIDEwLDEwLjIyMzg1NzYgMTAsMTAuNSBMMTAsMTQuNSBDMTAsMTQuNzc2MTQyNCAxMC4yMjM4NTc2LDE1IDEwLjUsMTUgTDE0LjUsMTUgQzE0Ljc3NjE0MjQsMTUgMTUsMTQuNzc2MTQyNCAxNSwxNC41IEwxNSwxMC41IEMxNSwxMC4yMjM4NTc2IDE0Ljc3NjE0MjQsMTAgMTQuNSwxMCBMMTAuNSwxMCBaIE0xMC41LDkgTDE0LjUsOSBDMTUuMzI4NDI3MSw5IDE2LDkuNjcxNTcyODggMTYsMTAuNSBMMTYsMTQuNSBDMTYsMTUuMzI4NDI3MSAxNS4zMjg0MjcxLDE2IDE0LjUsMTYgTDEwLjUsMTYgQzkuNjcxNTcyODgsMTYgOSwxNS4zMjg0MjcxIDksMTQuNSBMOSwxMC41IEM5LDkuNjcxNTcyODggOS42NzE1NzI4OCw5IDEwLjUsOSBaIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
--icon-Wrap: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTksMTIgTDksMTMgTDguMzA3ODIzNjYsMTEuOTYxNzM1NSBDOC4xMjcwNjQ4MywxMS44ODY0MTQ4IDgsMTEuNzA4MDQ2MiA4LDExLjUgQzgsMTEuMjkxOTUzOCA4LjEyNzA2NDgzLDExLjExMzU4NTIgOC4zMDc4MjI3NCwxMS4wMzgyNjU5IEw5LDEwIEw5LDExIEwxMS4zMjYwODcsMTEgQzEyLjI0NjY0MTUsMTEgMTMsMTAuMjIwMjczOSAxMyw5LjI1IEMxMyw4LjI3OTcyNjA1IDEyLjI0NjY0MTUsNy41IDExLjMyNjA4Nyw3LjUgTDIuNSw3LjUgQzIuMjIzODU3NjMsNy41IDIsNy4yNzYxNDIzNyAyLDcgQzIsNi43MjM4NTc2MyAyLjIyMzg1NzYzLDYuNSAyLjUsNi41IEwxMS4zMjYwODcsNi41IEMxMi44MDY3NzA1LDYuNSAxNCw3LjczNDk5MjU3IDE0LDkuMjUgQzE0LDEwLjc2NTAwNzQgMTIuODA2NzcwNSwxMiAxMS4zMjYwODcsMTIgTDksMTIgWiBNMi41LDIgTDEzLjUsMiBDMTMuNzc2MTQyNCwyIDE0LDIuMjIzODU3NjMgMTQsMi41IEMxNCwyLjc3NjE0MjM3IDEzLjc3NjE0MjQsMyAxMy41LDMgTDIuNSwzIEMyLjIyMzg1NzYzLDMgMiwyLjc3NjE0MjM3IDIsMi41IEMyLDIuMjIzODU3NjMgMi4yMjM4NTc2MywyIDIuNSwyIFogTTIuNSwxMSBMNS41LDExIEM1Ljc3NjE0MjM3LDExIDYsMTEuMjIzODU3NiA2LDExLjUgQzYsMTEuNzc2MTQyNCA1Ljc3NjE0MjM3LDEyIDUuNSwxMiBMMi41LDEyIEMyLjIyMzg1NzYzLDEyIDIsMTEuNzc2MTQyNCAyLDExLjUgQzIsMTEuMjIzODU3NiAyLjIyMzg1NzYzLDExIDIuNSwxMSBaIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
--icon-Zoom: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLDQgTDcuNSw0IEM3LjIyMzg1NzYzLDQgNywzLjc3NjE0MjM3IDcsMy41IEM3LDMuMjIzODU3NjMgNy4yMjM4NTc2MywzIDcuNSwzIEwxMi41LDMgQzEyLjc3NjE0MjQsMyAxMywzLjIyMzg1NzYzIDEzLDMuNSBMMTMsOC41IEMxMyw4Ljc3NjE0MjM3IDEyLjc3NjE0MjQsOSAxMi41LDkgQzEyLjIyMzg1NzYsOSAxMiw4Ljc3NjE0MjM3IDEyLDguNSBMMTIsNCBaIE00LDEyIEw4LjUsMTIgQzguNzc2MTQyMzcsMTIgOSwxMi4yMjM4NTc2IDksMTIuNSBDOSwxMi43NzYxNDI0IDguNzc2MTQyMzcsMTMgOC41LDEzIEwzLjUsMTMgQzMuMjIzODU3NjMsMTMgMywxMi43NzYxNDI0IDMsMTIuNSBMMyw3LjUgQzMsNy4yMjM4NTc2MyAzLjIyMzg1NzYzLDcgMy41LDcgQzMuNzc2MTQyMzcsNyA0LDcuMjIzODU3NjMgNCw3LjUgTDQsMTIgWiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+');
--icon-UseChart: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzIDNDMTMgMi40NDc3MiAxMy40NDc3IDIgMTQgMiAxNC41NTIzIDIgMTUgMi40NDc3MiAxNSAzVjE0QzE1IDE0LjU1MjMgMTQuNTUyMyAxNSAxNCAxNSAxMy40NDc3IDE1IDEzIDE0LjU1MjMgMTMgMTRWM3pNOSA4QzkgNy40NDc3MiA5LjQ0NzcyIDcgMTAgNyAxMC41NTIzIDcgMTEgNy40NDc3MiAxMSA4VjE0QzExIDE0LjU1MjMgMTAuNTUyMyAxNSAxMCAxNSA5LjQ0NzcyIDE1IDkgMTQuNTUyMyA5IDE0Vjh6TTUgNkM1IDUuNDQ3NzIgNS40NDc3MiA1IDYgNSA2LjU1MjI4IDUgNyA1LjQ0NzcyIDcgNlYxNEM3IDE0LjU1MjMgNi41NTIyOCAxNSA2IDE1IDUuNDQ3NzIgMTUgNSAxNC41NTIzIDUgMTRWNnpNMSAxMUMxIDEwLjQ0NzcgMS40NDc3MiAxMCAyIDEwIDIuNTUyMjggMTAgMyAxMC40NDc3IDMgMTFWMTRDMyAxNC41NTIzIDIuNTUyMjggMTUgMiAxNSAxLjQ0NzcyIDE1IDEgMTQuNTUyMyAxIDE0VjExeiIgZmlsbD0iIzcxNDFGOSIvPjwvc3ZnPg==');
--icon-UseEducate: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQzOV84NDUxKSIgZmlsbD0iIzRBNTg5OSI+PHBhdGggZD0iTTE1LjUwMDEgNC4xMDAzOUw4LjUwMDEgMC4xMDAzOTFDOC4yMDAxIDAuMDAwMzkwNjI2IDcuODAwMSAwLjAwMDM5MDYyNiA3LjUwMDEgMC4xMDAzOTFMMC41MDAwOTggNC4xMDAzOUMtMC4xOTk5MDIgNC41MDAzOSAtMC4xOTk5MDIgNS41MDAzOSAwLjUwMDA5OCA1LjgwMDM5TDcuNTAwMSA5LjgwMDM5QzcuODAwMSAxMC4wMDA0IDguMjAwMSAxMC4wMDA0IDguNTAwMSA5LjgwMDM5TDE1LjUwMDEgNS44MDAzOUMxNi4yMDAxIDUuNTAwMzkgMTYuMjAwMSA0LjUwMDM5IDE1LjUwMDEgNC4xMDAzOVoiLz48cGF0aCBkPSJNOS41IDExLjZDOSAxMS45IDguNSAxMiA4IDEyQzcuNSAxMiA3IDExLjkgNi41IDExLjZMMiA5VjEzQzIgMTUuMSA1LjEgMTYgOCAxNkMxMC45IDE2IDE0IDE1LjEgMTQgMTNWOUw5LjUgMTEuNloiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80MzlfODQ1MSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMEgxNlYxNkgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');
--icon-UseFinance: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMzY3MTkgOS42ODE2NFYxMC45NzgzQzguODM5MTkgMTAuODk4MyA5LjA3NTE5IDEwLjY5MzYgOS4wNzUxOSAxMC4zNjM2IDkuMDc1MTkgMTAuMDEyMyA4LjY4ODUyIDkuODI4OTcgOC4zNjcxOSA5LjY4MTY0ek02Ljk4MTkzIDcuMjAzMTNDNi45ODE5MyA3LjU3MTEzIDcuMzE0NiA3LjczNTggNy42NTM5MyA3Ljg4NTEzVjYuNjYxMTNDNy4yMDU5MyA2LjcyNzEzIDYuOTgxOTMgNi45MDc4IDYuOTgxOTMgNy4yMDMxM3oiIGZpbGw9IiMwMDc1QTIiLz48cGF0aCBkPSJNMTEuOTk5OSAyTDkuOTk5OTIgMEw3Ljk5OTkyIDJMNS45OTk5MiAwTDMuOTk5OTIgMkwxLjMzMzI1IDBWMTUuMzMzM0MxLjMzMzI1IDE1LjcwMiAxLjYzMTkyIDE2IDEuOTk5OTIgMTZIMTMuOTk5OUMxNC4zNjc5IDE2IDE0LjY2NjYgMTUuNzAyIDE0LjY2NjYgMTUuMzMzM1YwTDExLjk5OTkgMlpNOC4zNjcyNSAxMi4yMTg3VjEzLjI4NjdINy42NTM5MlYxMi4yNEM2LjgwNjU5IDEyLjIyMjcgNi4wNjMyNSAxMi4wNzMzIDUuNDI0NTkgMTEuNzkyVjEwLjQxNzNDNi4wMjQ1OSAxMC43MTQgNi45NzY1OSAxMC45NzQgNy42NTM5MiAxMS4wMTZWOS40MDEzM0M2LjQ2MTI1IDguOTM4NjcgNS40MTQ1OSA4LjQ5IDUuNDE0NTkgNy4yMDMzM0M1LjQxNDU5IDYuMDM0NjcgNi40ODY1OSA1LjQ4NTMzIDcuNjUzOTIgNS4zN1Y0LjU3MjY3SDguMzY3MjVWNS4zNDg2N0M5LjE2MTkyIDUuMzgzMzMgOS44ODEyNSA1LjU0MzMzIDEwLjUyMzMgNS44MjhMMTAuMDMzOSA3LjA0NjY3QzkuNDkyNTkgNi44MjQ2NyA4LjkzNjU5IDYuNjg5MzMgOC4zNjcyNSA2LjY0MDY3VjguMTc3MzNDOS42MzI1OSA4LjY2NCAxMC42NDMzIDkuMTA3MzMgMTAuNjQzMyAxMC4yODY3QzEwLjY0MzMgMTEuNTMgOS42MTA1OSAxMi4xMDQ3IDguMzY3MjUgMTIuMjE4N1oiIGZpbGw9IiMwMDc1QTIiLz48L3N2Zz4=');
--icon-UseHr: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjI3NTEgMTAuMjkzNEwxMy4wODcxIDkuNjY4MzlDMTIuOTEwMiA5LjYxNzgzIDEyLjc1MDggOS41MTk0OCAxMi42MjYyIDkuMzg0MTZDMTIuNTAxNyA5LjI0ODg0IDEyLjQxNjggOS4wODE3OSAxMi4zODExIDguOTAxMzlMMTIuMjQ3MSA4LjIyNjM5QzEyLjc2OTYgNy45ODc1NyAxMy4yMTI2IDcuNjAzNzMgMTMuNTIzNCA3LjEyMDQ4QzEzLjgzNDEgNi42MzcyNCAxMy45OTk2IDYuMDc0OTMgMTQuMDAwMSA1LjUwMDM5VjQuMTI2MzlDMTQuMDEyMiAzLjMzMDgzIDEzLjcxNjQgMi41NjEzOCAxMy4xNzQ1IDEuOTc4ODJDMTIuNjMyNSAxLjM5NjI3IDExLjg4NjQgMS4wNDU3IDExLjA5MjEgMS4wMDAzOUMxMC40OTkxIDAuOTgyNDk2IDkuOTE0MTIgMS4xNDA4MiA5LjQxMTExIDEuNDU1MzNDOC45MDgwOSAxLjc2OTg1IDguNTA5NjIgMi4yMjY0NCA4LjI2NjA3IDIuNzY3MzlDOC43NDMxMiAzLjQ2MTY3IDguOTk4OTkgNC4yODQwMSA5LjAwMDA3IDUuMTI2MzlWNi41MDAzOUM4Ljk5ODI4IDYuODY0MTYgOC45NDYxMSA3LjIyNTkzIDguODQ1MDcgNy41NzUzOUM5LjEwNDMgNy44NDczMyA5LjQxMjMxIDguMDY4MTYgOS43NTMwNyA4LjIyNjM5TDkuNjE5MDcgOC45MDAzOUM5LjU4MzMgOS4wODA3OSA5LjQ5ODQ4IDkuMjQ3ODQgOS4zNzM5MiA5LjM4MzE2QzkuMjQ5MzYgOS41MTg0OCA5LjA4OTkgOS42MTY4MyA4LjkxMzA3IDkuNjY3MzlMOC4wNzAwNyA5LjkwODM5TDkuNTUwMDcgMTAuMzMxNEM5Ljk2NzI3IDEwLjQ1MTkgMTAuMzM0MSAxMC43MDQ1IDEwLjU5NTYgMTEuMDUxMkMxMC44NTcgMTEuMzk4IDEwLjk5OSAxMS44MjAxIDExLjAwMDEgMTIuMjU0NFYxNC41MDA0QzEwLjk5ODQgMTQuNjcxMSAxMC45NjczIDE0Ljg0MDMgMTAuOTA4MSAxNS4wMDA0SDE1LjUwMDFDMTUuNjMyNyAxNS4wMDA0IDE1Ljc1OTkgMTQuOTQ3NyAxNS44NTM2IDE0Ljg1MzlDMTUuOTQ3NCAxNC43NjAyIDE2LjAwMDEgMTQuNjMzIDE2LjAwMDEgMTQuNTAwNFYxMS4yNTQ0QzE2IDExLjAzNzIgMTUuOTI5MiAxMC44MjYgMTUuNzk4NCAxMC42NTI2QzE1LjY2NzYgMTAuNDc5MiAxNS40ODM5IDEwLjM1MzEgMTUuMjc1MSAxMC4yOTM0WiIgZmlsbD0iIzY4ODA0NyIvPjxwYXRoIGQ9Ik05LjI3NSAxMS4yOTM0TDcuMDg3IDEwLjY2ODRDNi45MTAwNCAxMC42MTc4IDYuNzUwNDkgMTAuNTE5MyA2LjYyNTkyIDEwLjM4MzhDNi41MDEzNSAxMC4yNDgzIDYuNDE2NiAxMC4wODEgNi4zODEgOS45MDA0M0w2LjI0NyA5LjIyNTQzQzYuNzY5NCA4Ljk4NjY5IDcuMjEyMjggOC42MDMgNy41MjMwMyA4LjExOTk1QzcuODMzNzcgNy42MzY5IDcuOTk5MzIgNy4wNzQ4IDggNi41MDA0M1Y1LjEyNjQzQzguMDEyMTMgNC4zMzA4OCA3LjcxNjMyIDMuNTYxNDIgNy4xNzQzOSAyLjk3ODg3QzYuNjMyNDYgMi4zOTYzMSA1Ljg4NjM2IDIuMDQ1NzUgNS4wOTIgMi4wMDA0M0M0LjY5MDM2IDEuOTg4MTEgNC4yOTAzNCAyLjA1NjYgMy45MTU2OCAyLjIwMTg0QzMuNTQxMDEgMi4zNDcwOCAzLjE5OTM1IDIuNTY2MSAyLjkxMDk1IDIuODQ1OTFDMi42MjI1NiAzLjEyNTczIDIuMzkzMzIgMy40NjA2MiAyLjIzNjgzIDMuODMwNzNDMi4wODAzNSA0LjIwMDg0IDEuOTk5ODEgNC41OTg2MSAyIDUuMDAwNDNWNi41MDA0M0MyLjAwMDQ5IDcuMDc0OTcgMi4xNjU5NSA3LjYzNzI5IDIuNDc2NyA4LjEyMDUzQzIuNzg3NDYgOC42MDM3NyAzLjIzMDQ1IDguOTg3NjIgMy43NTMgOS4yMjY0M0wzLjYxOSA5LjkwMDQzQzMuNTgzMjMgMTAuMDgwOCAzLjQ5ODQxIDEwLjI0NzkgMy4zNzM4NSAxMC4zODMyQzMuMjQ5MjkgMTAuNTE4NSAzLjA4OTgzIDEwLjYxNjkgMi45MTMgMTAuNjY3NEwwLjcyNSAxMS4yOTI0QzAuNTE2MDI1IDExLjM1MjIgMC4zMzIyMTQgMTEuNDc4NCAwLjIwMTM5NyAxMS42NTJDMC4wNzA1Nzk2IDExLjgyNTYgLTAuMDAwMTIwNjM2IDEyLjAzNzEgMS41NDUyMWUtMDcgMTIuMjU0NFYxNC41MDA0QzEuNTQ1MjFlLTA3IDE0LjYzMyAwLjA1MjY3ODYgMTQuNzYwMiAwLjE0NjQ0NyAxNC44NTRDMC4yNDAyMTUgMTQuOTQ3OCAwLjM2NzM5MiAxNS4wMDA0IDAuNSAxNS4wMDA0SDkuNUM5LjYzMjYxIDE1LjAwMDQgOS43NTk3OSAxNC45NDc4IDkuODUzNTUgMTQuODU0QzkuOTQ3MzIgMTQuNzYwMiAxMCAxNC42MzMgMTAgMTQuNTAwNFYxMi4yNTQ0QzkuOTk5OSAxMi4wMzczIDkuOTI5MSAxMS44MjYgOS43OTgzIDExLjY1MjZDOS42Njc1IDExLjQ3OTIgOS40ODM4MSAxMS4zNTMyIDkuMjc1IDExLjI5MzRWMTEuMjkzNFoiIGZpbGw9IiM2ODgwNDciLz48L3N2Zz4=');
--icon-UseMedia: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIgMTBWNkgxQzAuNzM0Nzg0IDYgMC40ODA0MyA2LjEwNTM2IDAuMjkyODkzIDYuMjkyODlDMC4xMDUzNTcgNi40ODA0MyAwIDYuNzM0NzggMCA3TDAgMTRDMCAxNC4yNjUyIDAuMTA1MzU3IDE0LjUxOTYgMC4yOTI4OTMgMTQuNzA3MUMwLjQ4MDQzIDE0Ljg5NDYgMC43MzQ3ODQgMTUgMSAxNUgxMUMxMS4yNjUyIDE1IDExLjUxOTYgMTQuODk0NiAxMS43MDcxIDE0LjcwNzFDMTEuODk0NiAxNC41MTk2IDEyIDE0LjI2NTIgMTIgMTRWMTNINUM0LjIwNDM1IDEzIDMuNDQxMjkgMTIuNjgzOSAyLjg3ODY4IDEyLjEyMTNDMi4zMTYwNyAxMS41NTg3IDIgMTAuNzk1NiAyIDEwWiIgZmlsbD0iI0Y3QjMyQiIvPjxwYXRoIGQ9Ik0xNSAxSDVDNC43MzQ3OCAxIDQuNDgwNDMgMS4xMDUzNiA0LjI5Mjg5IDEuMjkyODlDNC4xMDUzNiAxLjQ4MDQzIDQgMS43MzQ3OCA0IDJWMTBDNCAxMC4yNjUyIDQuMTA1MzYgMTAuNTE5NiA0LjI5Mjg5IDEwLjcwNzFDNC40ODA0MyAxMC44OTQ2IDQuNzM0NzggMTEgNSAxMUgxNUMxNS4yNjUyIDExIDE1LjUxOTYgMTAuODk0NiAxNS43MDcxIDEwLjcwNzFDMTUuODk0NiAxMC41MTk2IDE2IDEwLjI2NTIgMTYgMTBWMkMxNiAxLjczNDc4IDE1Ljg5NDYgMS40ODA0MyAxNS43MDcxIDEuMjkyODlDMTUuNTE5NiAxLjEwNTM2IDE1LjI2NTIgMSAxNSAxWk0xMS43MjQgNi40NDdMOC43MjQgNy45NDdDOC42NDc3NyA3Ljk4NTIgOC41NjMwNCA4LjAwMzI3IDguNDc3ODYgNy45OTk0OUM4LjM5MjY4IDcuOTk1NzIgOC4zMDk4OCA3Ljk3MDIyIDguMjM3MzMgNy45MjU0M0M4LjE2NDc4IDcuODgwNjQgOC4xMDQ4OSA3LjgxODAzIDguMDYzMzUgNy43NDM1N0M4LjAyMTgxIDcuNjY5MTEgOCA3LjU4NTI2IDggNy41VjQuNUM4IDQuNDE0NzQgOC4wMjE4MSA0LjMzMDg5IDguMDYzMzUgNC4yNTY0M0M4LjEwNDg5IDQuMTgxOTcgOC4xNjQ3OCA0LjExOTM2IDguMjM3MzMgNC4wNzQ1N0M4LjMwOTg4IDQuMDI5NzggOC4zOTI2OCA0LjAwNDI4IDguNDc3ODYgNC4wMDA1MUM4LjU2MzA0IDMuOTk2NzMgOC42NDc3NyA0LjAxNDggOC43MjQgNC4wNTNMMTEuNzI0IDUuNTUzQzExLjgwNjkgNS41OTQ1NyAxMS44NzY3IDUuNjU4NCAxMS45MjU0IDUuNzM3MzRDMTEuOTc0MiA1LjgxNjI4IDEyIDUuOTA3MjMgMTIgNkMxMiA2LjA5Mjc3IDExLjk3NDIgNi4xODM3MiAxMS45MjU0IDYuMjYyNjZDMTEuODc2NyA2LjM0MTYgMTEuODA2OSA2LjQwNTQzIDExLjcyNCA2LjQ0N1oiIGZpbGw9IiNGN0IzMkIiLz48L3N2Zz4=');
--icon-UseMonitor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1IDBIMUMwLjQgMCAwIDAuNCAwIDFWMTJDMCAxMi42IDAuNCAxMyAxIDEzSDZWMTRIM1YxNkgxM1YxNEgxMFYxM0gxNUMxNS42IDEzIDE2IDEyLjYgMTYgMTJWMUMxNiAwLjQgMTUuNiAwIDE1IDBaTTE0IDJWOUgyVjJIMTRaIiBmaWxsPSIjRjI1NDVCIi8+PC9zdmc+');
--icon-UseOther: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1IDBIMUMwLjQgMCAwIDAuNCAwIDFWMTVDMCAxNS42IDAuNCAxNiAxIDE2SDE1QzE1LjYgMTYgMTYgMTUuNiAxNiAxNVYxQzE2IDAuNCAxNS42IDAgMTUgMFpNOCAxM0M3LjQgMTMgNyAxMi42IDcgMTJDNyAxMS40IDcuNCAxMSA4IDExQzguNiAxMSA5IDExLjQgOSAxMkM5IDEyLjYgOC42IDEzIDggMTNaTTkuNSA4LjRDOSA4LjcgOSA4LjggOSA5VjEwSDdWOUM3IDcuNyA3LjggNy4xIDguNCA2LjdDOC45IDYuNCA5IDYuMyA5IDZDOSA1LjQgOC42IDUgOCA1QzcuNiA1IDcuMyA1LjIgNy4xIDUuNUw2LjYgNi40TDQuOSA1LjRMNS40IDQuNUM1LjkgMy42IDYuOSAzIDggM0M5LjcgMyAxMSA0LjMgMTEgNkMxMSA3LjQgMTAuMSA4IDkuNSA4LjRaIiBmaWxsPSIjOTI5Mjk5Ii8+PC9zdmc+');
--icon-UseProduct: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjMzMzMuNjY2OTkySC42NjY2NjdDLjI5ODY2Ny42NjY5OTIgMCAuOTY0OTkyIDAgMS4zMzM2NlYzLjMzMzY2QzAgMy43MDIzMy4yOTg2NjcgNC4wMDAzMy42NjY2NjcgNC4wMDAzM0gxNS4zMzMzQzE1LjcwMTMgNC4wMDAzMyAxNiAzLjcwMjMzIDE2IDMuMzMzNjZWMS4zMzM2NkMxNiAuOTY0OTkyIDE1LjcwMTMuNjY2OTkyIDE1LjMzMzMuNjY2OTkyek0xNC42NjY2IDUuMzMzOThIOS45OTk5MlYxMC42NjczTDcuOTk5OTIgOS4zMzM5OCA1Ljk5OTkyIDEwLjY2NzNWNS4zMzM5OEgxLjMzMzI1VjE0LjY2NzNDMS4zMzMyNSAxNS4wMzUzIDEuNjMxOTIgMTUuMzM0IDEuOTk5OTIgMTUuMzM0SDEzLjk5OTlDMTQuMzY3OSAxNS4zMzQgMTQuNjY2NiAxNS4wMzUzIDE0LjY2NjYgMTQuNjY3M1Y1LjMzMzk4eiIgZmlsbD0iIzE2QjM3OCIvPjwvc3ZnPg==');
--icon-UseSales: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2LjAwMDEgMS4wMDAwMkMxNi4wMDAxIDAuNzM0ODAxIDE1Ljg5NDcgMC40ODA0NDcgMTUuNzA3MiAwLjI5MjkxMUMxNS41MTk2IDAuMTA1Mzc0IDE1LjI2NTMgMS43NDAxOWUtMDUgMTUuMDAwMSAxLjc0MDE5ZS0wNUgxMC40NTAxQzkuODU4ODYgLTAuMDAxNjMyMTcgOS4yNzMyMSAwLjExNDAwOSA4LjcyNzAxIDAuMzQwMjQ2QzguMTgwODIgMC41NjY0ODMgNy42ODQ5MyAwLjg5ODgyIDcuMjY4MDUgMS4zMTgwMkwzLjI5MzA1IDUuMjkzMDJDMy4xMDU1OCA1LjQ4MDU1IDMuMDAwMjcgNS43MzQ4NSAzLjAwMDI3IDYuMDAwMDJDMy4wMDAyNyA2LjI2NTE4IDMuMTA1NTggNi41MTk0OSAzLjI5MzA1IDYuNzA3MDJDMy43NDEyNiA3LjE1NTc2IDQuMzM4MDMgNy40MjUxOSA0Ljk3MTA0IDcuNDY0NkM1LjYwNDA1IDcuNTA0MDIgNi4yMjk2NCA3LjMxMDY5IDYuNzMwMDUgNi45MjEwMkw5LjQxNzA1IDQuODMxMDJMMTMuNjEwMSA5LjAyNDAyQzEzLjcyNzEgOS4xNDEwNCAxMy44MTg3IDkuMjgxMDIgMTMuODc5IDkuNDM1MTVDMTMuOTM5NCA5LjU4OTI3IDEzLjk2NzIgOS43NTQyMiAxMy45NjA3IDkuOTE5NjFDMTMuOTU0MiAxMC4wODUgMTMuOTEzNiAxMC4yNDczIDEzLjg0MTQgMTAuMzk2MkMxMy43NjkxIDEwLjU0NTEgMTMuNjY2OSAxMC42Nzc1IDEzLjU0MTEgMTAuNzg1TDEyLjk3NTEgMTEuMjY4TDExLjM1NDEgOS42NDYwMkMxMS4zMDc2IDkuNTk5NTMgMTEuMjUyNCA5LjU2MjY1IDExLjE5MTYgOS41Mzc0OUMxMS4xMzA5IDkuNTEyMzMgMTEuMDY1OCA5LjQ5OTM5IDExLjAwMDEgOS40OTkzOUMxMC45MzQzIDkuNDk5MzkgMTAuODY5MiA5LjUxMjMzIDEwLjgwODUgOS41Mzc0OUMxMC43NDc3IDkuNTYyNjUgMTAuNjkyNSA5LjU5OTUzIDEwLjY0NjEgOS42NDYwMkMxMC41OTk2IDkuNjkyNSAxMC41NjI3IDkuNzQ3NjkgMTAuNTM3NSA5LjgwODQzQzEwLjUxMjQgOS44NjkxNyAxMC40OTk0IDkuOTM0MjcgMTAuNDk5NCAxMEMxMC40OTk0IDEwLjA2NTggMTAuNTEyNCAxMC4xMzA5IDEwLjUzNzUgMTAuMTkxNkMxMC41NjI3IDEwLjI1MjMgMTAuNTk5NiAxMC4zMDc1IDEwLjY0NjEgMTAuMzU0TDEyLjIxMjEgMTEuOTE5TDExLjM1NzEgMTIuNjVMOS44NTcwNSAxMS4xNUM5Ljc2MzE3IDExLjA1NjEgOS42MzU4MyAxMS4wMDM0IDkuNTAzMDUgMTEuMDAzNEM5LjM3MDI4IDExLjAwMzQgOS4yNDI5NCAxMS4wNTYxIDkuMTQ5MDUgMTEuMTVDOS4wNTUxNiAxMS4yNDM5IDkuMDAyNDIgMTEuMzcxMiA5LjAwMjQyIDExLjUwNEM5LjAwMjQyIDExLjYzNjggOS4wNTUxNiAxMS43NjQxIDkuMTQ5MDUgMTEuODU4TDEwLjU5NDEgMTMuM0wxMC40NTYxIDEzLjQxOEMxMC4yMDg3IDEzLjYzMDIgOS45MTI5MyAxMy43NzgyIDkuNTk0ODYgMTMuODQ5MkM5LjI3Njc5IDEzLjkyMDIgOC45NDYxNSAxMy45MTE5IDguNjMyMDUgMTMuODI1QzguNTk0OTIgMTMuMzU3MiA4LjM5MjkyIDEyLjkxNzggOC4wNjIwNSAxMi41ODVMNC40NzcwNSA5LjAwMDAyQzQuMjkxMzYgOC44MTQyNiA0LjA3MDkgOC42NjY5IDMuODI4MjYgOC41NjYzNUMzLjU4NTYzIDguNDY1NzkgMy4zMjU1NiA4LjQxNDAxIDMuMDYyOTEgOC40MTM5N0MyLjgwMDI1IDguNDEzOTIgMi41NDAxNyA4LjQ2NTYxIDIuMjk3NDkgOC41NjYwOEMyLjA1NDgyIDguNjY2NTQgMS44MzQzMSA4LjgxMzgzIDEuNjQ4NTUgOC45OTk1MkMxLjQ2MjggOS4xODUyMSAxLjMxNTQ0IDkuNDA1NjYgMS4yMTQ4OCA5LjY0ODNDMS4xMTQzMyA5Ljg5MDk0IDEuMDYyNTUgMTAuMTUxIDEuMDYyNSAxMC40MTM3QzEuMDYyNDEgMTAuOTQ0MSAxLjI3MzA0IDExLjQ1MjkgMS42NDgwNSAxMS44MjhMNS4yMzQwNSAxNS40MTRDNS41NjQxMSAxNS43NDMxIDUuOTk4NzQgMTUuOTQ2NiA2LjQ2Mjg2IDE1Ljk4OTNDNi45MjY5OSAxNi4wMzIgNy4zOTE0NiAxNS45MTEzIDcuNzc2MDUgMTUuNjQ4QzguMjE2MzkgMTUuODEyMiA4LjY4MjEyIDE1Ljg5NzggOS4xNTIwNSAxNS45MDFDMTAuMTA5MiAxNS45MDM3IDExLjAzNTIgMTUuNTYxIDExLjc2MDEgMTQuOTM2TDE0Ljg0MDEgMTIuMzA2QzE1LjE4NjYgMTIuMDI3OSAxNS40Njk0IDExLjY3ODYgMTUuNjY5NiAxMS4yODE5QzE1Ljg2OTcgMTAuODg1MSAxNS45ODI0IDEwLjQ1IDE2LjAwMDEgMTAuMDA2VjEuMDAwMDJaIiBmaWxsPSIjODg1QTVBIi8+PHBhdGggZD0iTTIgN1YySDVDNS4yNjUyMiAyIDUuNTE5NTcgMS44OTQ2NCA1LjcwNzExIDEuNzA3MTFDNS44OTQ2NCAxLjUxOTU3IDYgMS4yNjUyMiA2IDFDNiAwLjczNDc4NCA1Ljg5NDY0IDAuNDgwNDMgNS43MDcxMSAwLjI5Mjg5M0M1LjUxOTU3IDAuMTA1MzU3IDUuMjY1MjIgMCA1IDBMMSAwQzAuNzM0Nzg0IDAgMC40ODA0MyAwLjEwNTM1NyAwLjI5Mjg5MyAwLjI5Mjg5M0MwLjEwNTM1NyAwLjQ4MDQzIDAgMC43MzQ3ODQgMCAxTDAgN0MwIDcuMjY1MjIgMC4xMDUzNTcgNy41MTk1NyAwLjI5Mjg5MyA3LjcwNzExQzAuNDgwNDMgNy44OTQ2NCAwLjczNDc4NCA4IDEgOEMxLjI2NTIyIDggMS41MTk1NyA3Ljg5NDY0IDEuNzA3MTEgNy43MDcxMUMxLjg5NDY0IDcuNTE5NTcgMiA3LjI2NTIyIDIgN1oiIGZpbGw9IiM4ODVBNUEiLz48L3N2Zz4=');
--icon-UseScience: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggMTMuMDAwNEM4IDEyLjIwNDggNy42ODM5MyAxMS40NDE3IDcuMTIxMzIgMTAuODc5MUM2LjU1ODcxIDEwLjMxNjUgNS43OTU2NSAxMC4wMDA0IDUgMTAuMDAwNEM0LjY1Mzk1IDEwLjAwMzUgNC4zMTExMSAxMC4wNjcxIDMuOTg3IDEwLjE4ODRDMy41ODAxNyA5LjgxMzA5IDMuMjg1NTYgOS4zMzIxNyAzLjEzNTk4IDguNzk5MjZDMi45ODY0IDguMjY2MzQgMi45ODc3NCA3LjcwMjM2IDMuMTM5ODQgNy4xNzAxNkMzLjI5MTk0IDYuNjM3OTYgMy41ODg4NCA2LjE1ODQ1IDMuOTk3NDMgNS43ODUwNkM0LjQwNjAzIDUuNDExNjcgNC45MTAyOCA1LjE1OTA3IDUuNDU0IDUuMDU1NDFMNi42NTQgNy4xMjk0MUM2LjcyMDMgNy4yNDQyNSA2LjgyOTUxIDcuMzI4MDQgNi45NTc2IDcuMzYyMzZDNy4wODU2OSA3LjM5NjY4IDcuMjIyMTYgNy4zNzg3MSA3LjMzNyA3LjMxMjQxTDkuMDcxIDYuMzEyNDFDOS4xODU4MyA2LjI0NjEgOS4yNjk2MyA2LjEzNjg5IDkuMzAzOTUgNi4wMDg4MUM5LjMzODI3IDUuODgwNzIgOS4zMjAzIDUuNzQ0MjUgOS4yNTQgNS42Mjk0MUw2LjI1NCAwLjQyOTQwOEM2LjIyMDgzIDAuMzcyMzQ4IDYuMTc2NyAwLjMyMjQxOCA2LjEyNDE0IDAuMjgyNDk4QzYuMDcxNTkgMC4yNDI1NzggNi4wMTE2NSAwLjIxMzQ1OSA1Ljk0Nzc4IDAuMTk2ODE4QzUuODgzOTEgMC4xODAxNzggNS44MTczOSAwLjE3NjM0NiA1Ljc1MjAzIDAuMTg1NTQzQzUuNjg2NjggMC4xOTQ3NDEgNS42MjM3OSAwLjIxNjc4NiA1LjU2NyAwLjI1MDQwOEwzLjgzMyAxLjI1MDQxQzMuNzE4MzMgMS4zMTY4OCAzLjYzNDc1IDEuNDI2MTYgMy42MDA2MiAxLjU1NDI0QzMuNTY2NDkgMS42ODIzMSAzLjU4NDYxIDEuODE4NjkgMy42NTEgMS45MzM0MUw0LjQyOCAzLjI3ODQxQzMuNjIzNDkgMy41NDEzIDIuODk5MzYgNC4wMDUwOSAyLjMyNDEgNC42MjU5MUMxLjc0ODgzIDUuMjQ2NzMgMS4zNDE0NyA2LjAwNDA0IDEuMTQwNTMgNi44MjYyMUMwLjkzOTU5MyA3LjY0ODM4IDAuOTUxNzMgOC41MDgyMiAxLjE3NTc5IDkuMzI0MzlDMS4zOTk4NiAxMC4xNDA2IDEuODI4NDQgMTAuODg2MSAyLjQyMSAxMS40OTA0QzIuMTQ4MSAxMS45NDcgMi4wMDI3MiAxMi40Njg1IDIgMTMuMDAwNFYxNi4wMDA0SDE0VjE0LjAwMDRIOFYxMy4wMDA0WiIgZmlsbD0iIzIzMTk0MiIvPjxwYXRoIGQ9Ik04LjgzMDA1IDExLjkxMTVMMTMuMjg3MSA5LjMzODQ3TDEyLjI4NzEgNy42MDU0N0w3LjgzMTA1IDEwLjE3ODVDOC4zMDYxMiAxMC42NjE3IDguNjQ5OTggMTEuMjU4MiA4LjgzMDA1IDExLjkxMTVaIiBmaWxsPSIjMjMxOTQyIi8+PC9zdmc+');
}

6
static/ui-icons/use-cases/UseChart.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 3C13 2.44772 13.4477 2 14 2C14.5523 2 15 2.44772 15 3V14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14V3Z" fill="#7141F9"/>
<path d="M9 8C9 7.44772 9.44772 7 10 7C10.5523 7 11 7.44772 11 8V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V8Z" fill="#7141F9"/>
<path d="M5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6V14C7 14.5523 6.55228 15 6 15C5.44772 15 5 14.5523 5 14V6Z" fill="#7141F9"/>
<path d="M1 11C1 10.4477 1.44772 10 2 10C2.55228 10 3 10.4477 3 11V14C3 14.5523 2.55228 15 2 15C1.44772 15 1 14.5523 1 14V11Z" fill="#7141F9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

11
static/ui-icons/use-cases/UseEducate.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_439_8451)">
<path d="M15.5001 4.10039L8.5001 0.100391C8.2001 0.000390626 7.8001 0.000390626 7.5001 0.100391L0.500098 4.10039C-0.199902 4.50039 -0.199902 5.50039 0.500098 5.80039L7.5001 9.80039C7.8001 10.0004 8.2001 10.0004 8.5001 9.80039L15.5001 5.80039C16.2001 5.50039 16.2001 4.50039 15.5001 4.10039Z" fill="#4A5899"/>
<path d="M9.5 11.6C9 11.9 8.5 12 8 12C7.5 12 7 11.9 6.5 11.6L2 9V13C2 15.1 5.1 16 8 16C10.9 16 14 15.1 14 13V9L9.5 11.6Z" fill="#4A5899"/>
</g>
<defs>
<clipPath id="clip0_439_8451">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

5
static/ui-icons/use-cases/UseFinance.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.36719 9.68164V10.9783C8.83919 10.8983 9.07519 10.6936 9.07519 10.3636C9.07519 10.0123 8.68852 9.82897 8.36719 9.68164Z" fill="#0075A2"/>
<path d="M6.98193 7.20313C6.98193 7.57113 7.3146 7.7358 7.65393 7.88513V6.66113C7.20593 6.72713 6.98193 6.9078 6.98193 7.20313Z" fill="#0075A2"/>
<path d="M11.9999 2L9.99992 0L7.99992 2L5.99992 0L3.99992 2L1.33325 0V15.3333C1.33325 15.702 1.63192 16 1.99992 16H13.9999C14.3679 16 14.6666 15.702 14.6666 15.3333V0L11.9999 2ZM8.36725 12.2187V13.2867H7.65392V12.24C6.80659 12.2227 6.06325 12.0733 5.42459 11.792V10.4173C6.02459 10.714 6.97659 10.974 7.65392 11.016V9.40133C6.46125 8.93867 5.41459 8.49 5.41459 7.20333C5.41459 6.03467 6.48659 5.48533 7.65392 5.37V4.57267H8.36725V5.34867C9.16192 5.38333 9.88125 5.54333 10.5233 5.828L10.0339 7.04667C9.49259 6.82467 8.93659 6.68933 8.36725 6.64067V8.17733C9.63259 8.664 10.6433 9.10733 10.6433 10.2867C10.6433 11.53 9.61059 12.1047 8.36725 12.2187Z" fill="#0075A2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
static/ui-icons/use-cases/UseHr.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2751 10.2934L13.0871 9.66839C12.9102 9.61783 12.7508 9.51948 12.6262 9.38416C12.5017 9.24884 12.4168 9.08179 12.3811 8.90139L12.2471 8.22639C12.7696 7.98757 13.2126 7.60373 13.5234 7.12048C13.8341 6.63724 13.9996 6.07493 14.0001 5.50039V4.12639C14.0122 3.33083 13.7164 2.56138 13.1745 1.97882C12.6325 1.39627 11.8864 1.0457 11.0921 1.00039C10.4991 0.982496 9.91412 1.14082 9.41111 1.45533C8.90809 1.76985 8.50962 2.22644 8.26607 2.76739C8.74312 3.46167 8.99899 4.28401 9.00007 5.12639V6.50039C8.99828 6.86416 8.94611 7.22593 8.84507 7.57539C9.1043 7.84733 9.41231 8.06816 9.75307 8.22639L9.61907 8.90039C9.5833 9.08079 9.49848 9.24784 9.37392 9.38316C9.24936 9.51848 9.0899 9.61683 8.91307 9.66739L8.07007 9.90839L9.55007 10.3314C9.96727 10.4519 10.3341 10.7045 10.5956 11.0512C10.857 11.398 10.999 11.8201 11.0001 12.2544V14.5004C10.9984 14.6711 10.9673 14.8403 10.9081 15.0004H15.5001C15.6327 15.0004 15.7599 14.9477 15.8536 14.8539C15.9474 14.7602 16.0001 14.633 16.0001 14.5004V11.2544C16 11.0372 15.9292 10.826 15.7984 10.6526C15.6676 10.4792 15.4839 10.3531 15.2751 10.2934Z" fill="#688047"/>
<path d="M9.275 11.2934L7.087 10.6684C6.91004 10.6178 6.75049 10.5193 6.62592 10.3838C6.50135 10.2483 6.4166 10.081 6.381 9.90043L6.247 9.22543C6.7694 8.98669 7.21228 8.603 7.52303 8.11995C7.83377 7.6369 7.99932 7.0748 8 6.50043V5.12643C8.01213 4.33088 7.71632 3.56142 7.17439 2.97887C6.63246 2.39631 5.88636 2.04575 5.092 2.00043C4.69036 1.98811 4.29034 2.0566 3.91568 2.20184C3.54101 2.34708 3.19935 2.5661 2.91095 2.84591C2.62256 3.12573 2.39332 3.46062 2.23683 3.83073C2.08035 4.20084 1.99981 4.59861 2 5.00043V6.50043C2.00049 7.07497 2.16595 7.63729 2.4767 8.12053C2.78746 8.60377 3.23045 8.98762 3.753 9.22643L3.619 9.90043C3.58323 10.0808 3.49841 10.2479 3.37385 10.3832C3.24929 10.5185 3.08983 10.6169 2.913 10.6674L0.725 11.2924C0.516025 11.3522 0.332214 11.4784 0.201397 11.652C0.0705796 11.8256 -0.000120636 12.0371 1.54521e-07 12.2544V14.5004C1.54521e-07 14.633 0.0526786 14.7602 0.146447 14.854C0.240215 14.9478 0.367392 15.0004 0.5 15.0004H9.5C9.63261 15.0004 9.75979 14.9478 9.85355 14.854C9.94732 14.7602 10 14.633 10 14.5004V12.2544C9.9999 12.0373 9.9291 11.826 9.7983 11.6526C9.6675 11.4792 9.48381 11.3532 9.275 11.2934V11.2934Z" fill="#688047"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

4
static/ui-icons/use-cases/UseMedia.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10V6H1C0.734784 6 0.48043 6.10536 0.292893 6.29289C0.105357 6.48043 0 6.73478 0 7L0 14C0 14.2652 0.105357 14.5196 0.292893 14.7071C0.48043 14.8946 0.734784 15 1 15H11C11.2652 15 11.5196 14.8946 11.7071 14.7071C11.8946 14.5196 12 14.2652 12 14V13H5C4.20435 13 3.44129 12.6839 2.87868 12.1213C2.31607 11.5587 2 10.7956 2 10Z" fill="#F7B32B"/>
<path d="M15 1H5C4.73478 1 4.48043 1.10536 4.29289 1.29289C4.10536 1.48043 4 1.73478 4 2V10C4 10.2652 4.10536 10.5196 4.29289 10.7071C4.48043 10.8946 4.73478 11 5 11H15C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V2C16 1.73478 15.8946 1.48043 15.7071 1.29289C15.5196 1.10536 15.2652 1 15 1ZM11.724 6.447L8.724 7.947C8.64777 7.9852 8.56304 8.00327 8.47786 7.99949C8.39268 7.99572 8.30988 7.97022 8.23733 7.92543C8.16478 7.88064 8.10489 7.81803 8.06335 7.74357C8.02181 7.66911 8 7.58526 8 7.5V4.5C8 4.41474 8.02181 4.33089 8.06335 4.25643C8.10489 4.18197 8.16478 4.11936 8.23733 4.07457C8.30988 4.02978 8.39268 4.00428 8.47786 4.00051C8.56304 3.99673 8.64777 4.0148 8.724 4.053L11.724 5.553C11.8069 5.59457 11.8767 5.6584 11.9254 5.73734C11.9742 5.81628 12 5.90723 12 6C12 6.09277 11.9742 6.18372 11.9254 6.26266C11.8767 6.3416 11.8069 6.40543 11.724 6.447Z" fill="#F7B32B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
static/ui-icons/use-cases/UseMonitor.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 0H1C0.4 0 0 0.4 0 1V12C0 12.6 0.4 13 1 13H6V14H3V16H13V14H10V13H15C15.6 13 16 12.6 16 12V1C16 0.4 15.6 0 15 0ZM14 2V9H2V2H14Z" fill="#F2545B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

3
static/ui-icons/use-cases/UseOther.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 0H1C0.4 0 0 0.4 0 1V15C0 15.6 0.4 16 1 16H15C15.6 16 16 15.6 16 15V1C16 0.4 15.6 0 15 0ZM8 13C7.4 13 7 12.6 7 12C7 11.4 7.4 11 8 11C8.6 11 9 11.4 9 12C9 12.6 8.6 13 8 13ZM9.5 8.4C9 8.7 9 8.8 9 9V10H7V9C7 7.7 7.8 7.1 8.4 6.7C8.9 6.4 9 6.3 9 6C9 5.4 8.6 5 8 5C7.6 5 7.3 5.2 7.1 5.5L6.6 6.4L4.9 5.4L5.4 4.5C5.9 3.6 6.9 3 8 3C9.7 3 11 4.3 11 6C11 7.4 10.1 8 9.5 8.4Z" fill="#929299"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 497 B

4
static/ui-icons/use-cases/UseProduct.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3333 0.666992H0.666667C0.298667 0.666992 0 0.964992 0 1.33366V3.33366C0 3.70233 0.298667 4.00033 0.666667 4.00033H15.3333C15.7013 4.00033 16 3.70233 16 3.33366V1.33366C16 0.964992 15.7013 0.666992 15.3333 0.666992Z" fill="#16B378"/>
<path d="M14.6666 5.33398H9.99992V10.6673L7.99992 9.33398L5.99992 10.6673V5.33398H1.33325V14.6673C1.33325 15.0353 1.63192 15.334 1.99992 15.334H13.9999C14.3679 15.334 14.6666 15.0353 14.6666 14.6673V5.33398Z" fill="#16B378"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

4
static/ui-icons/use-cases/UseSales.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0001 1.00002C16.0001 0.734801 15.8947 0.480447 15.7072 0.292911C15.5196 0.105374 15.2653 1.74019e-05 15.0001 1.74019e-05H10.4501C9.85886 -0.00163217 9.27321 0.114009 8.72701 0.340246C8.18082 0.566483 7.68493 0.89882 7.26805 1.31802L3.29305 5.29302C3.10558 5.48055 3.00027 5.73485 3.00027 6.00002C3.00027 6.26518 3.10558 6.51949 3.29305 6.70702C3.74126 7.15576 4.33803 7.42519 4.97104 7.4646C5.60405 7.50402 6.22964 7.31069 6.73005 6.92102L9.41705 4.83102L13.6101 9.02402C13.7271 9.14104 13.8187 9.28102 13.879 9.43515C13.9394 9.58927 13.9672 9.75422 13.9607 9.91961C13.9542 10.085 13.9136 10.2473 13.8414 10.3962C13.7691 10.5451 13.6669 10.6775 13.5411 10.785L12.9751 11.268L11.3541 9.64602C11.3076 9.59953 11.2524 9.56265 11.1916 9.53749C11.1309 9.51233 11.0658 9.49939 11.0001 9.49939C10.9343 9.49939 10.8692 9.51233 10.8085 9.53749C10.7477 9.56265 10.6925 9.59953 10.6461 9.64602C10.5996 9.6925 10.5627 9.74769 10.5375 9.80843C10.5124 9.86917 10.4994 9.93427 10.4994 10C10.4994 10.0658 10.5124 10.1309 10.5375 10.1916C10.5627 10.2523 10.5996 10.3075 10.6461 10.354L12.2121 11.919L11.3571 12.65L9.85705 11.15C9.76317 11.0561 9.63583 11.0034 9.50305 11.0034C9.37028 11.0034 9.24294 11.0561 9.14905 11.15C9.05516 11.2439 9.00242 11.3712 9.00242 11.504C9.00242 11.6368 9.05516 11.7641 9.14905 11.858L10.5941 13.3L10.4561 13.418C10.2087 13.6302 9.91293 13.7782 9.59486 13.8492C9.27679 13.9202 8.94615 13.9119 8.63205 13.825C8.59492 13.3572 8.39292 12.9178 8.06205 12.585L4.47705 9.00002C4.29136 8.81426 4.0709 8.6669 3.82826 8.56635C3.58563 8.46579 3.32556 8.41401 3.06291 8.41397C2.80025 8.41392 2.54017 8.46561 2.29749 8.56608C2.05482 8.66654 1.83431 8.81383 1.64855 8.99952C1.4628 9.18521 1.31544 9.40566 1.21488 9.6483C1.11433 9.89094 1.06255 10.151 1.0625 10.4137C1.06241 10.9441 1.27304 11.4529 1.64805 11.828L5.23405 15.414C5.56411 15.7431 5.99874 15.9466 6.46286 15.9893C6.92699 16.032 7.39146 15.9113 7.77605 15.648C8.21639 15.8122 8.68212 15.8978 9.15205 15.901C10.1092 15.9037 11.0352 15.561 11.7601 14.936L14.8401 12.306C15.1866 12.0279 15.4694 11.6786 15.6696 11.2819C15.8697 10.8851 15.9824 10.45 16.0001 10.006V1.00002Z" fill="#885A5A"/>
<path d="M2 7V2H5C5.26522 2 5.51957 1.89464 5.70711 1.70711C5.89464 1.51957 6 1.26522 6 1C6 0.734784 5.89464 0.48043 5.70711 0.292893C5.51957 0.105357 5.26522 0 5 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1L0 7C0 7.26522 0.105357 7.51957 0.292893 7.70711C0.48043 7.89464 0.734784 8 1 8C1.26522 8 1.51957 7.89464 1.70711 7.70711C1.89464 7.51957 2 7.26522 2 7Z" fill="#885A5A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

4
static/ui-icons/use-cases/UseScience.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13.0004C8 12.2048 7.68393 11.4417 7.12132 10.8791C6.55871 10.3165 5.79565 10.0004 5 10.0004C4.65395 10.0035 4.31111 10.0671 3.987 10.1884C3.58017 9.81309 3.28556 9.33217 3.13598 8.79926C2.9864 8.26634 2.98774 7.70236 3.13984 7.17016C3.29194 6.63796 3.58884 6.15845 3.99743 5.78506C4.40603 5.41167 4.91028 5.15907 5.454 5.05541L6.654 7.12941C6.7203 7.24425 6.82951 7.32804 6.9576 7.36236C7.08569 7.39668 7.22216 7.37871 7.337 7.31241L9.071 6.31241C9.18583 6.2461 9.26963 6.13689 9.30395 6.00881C9.33827 5.88072 9.3203 5.74425 9.254 5.62941L6.254 0.429408C6.22083 0.372348 6.1767 0.322418 6.12414 0.282498C6.07159 0.242578 6.01165 0.213459 5.94778 0.196818C5.88391 0.180178 5.81739 0.176346 5.75203 0.185543C5.68668 0.194741 5.62379 0.216786 5.567 0.250408L3.833 1.25041C3.71833 1.31688 3.63475 1.42616 3.60062 1.55424C3.56649 1.68231 3.58461 1.81869 3.651 1.93341L4.428 3.27841C3.62349 3.5413 2.89936 4.00509 2.3241 4.62591C1.74883 5.24673 1.34147 6.00404 1.14053 6.82621C0.939593 7.64838 0.95173 8.50822 1.17579 9.32439C1.39986 10.1406 1.82844 10.8861 2.421 11.4904C2.1481 11.947 2.00272 12.4685 2 13.0004V16.0004H14V14.0004H8V13.0004Z" fill="#231942"/>
<path d="M8.83005 11.9115L13.2871 9.33847L12.2871 7.60547L7.83105 10.1785C8.30612 10.6617 8.64998 11.2582 8.83005 11.9115Z" fill="#231942"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB