console: update hasura pro content to cloud in header (#5268)

This commit is contained in:
surendran82 2020-07-08 16:01:31 +05:30 committed by GitHub
parent b1c686f303
commit b1b92c75ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 231 additions and 214 deletions

View File

@ -10,17 +10,8 @@ import { getPathRoot } from '../Common/utils/urlUtils';
import Spinner from '../Common/Spinner/Spinner';
import WarningSymbol from '../Common/WarningSymbol/WarningSymbol';
import logo from './images/white-logo.svg';
import pixHeart from './images/pix-heart.svg';
import close from './images/x-circle.svg';
import monitoring from './images/monitoring.svg';
import rate from './images/rate.svg';
import regression from './images/regression.svg';
import management from './images/management.svg';
import allow from './images/allow-listing.svg';
import read from './images/read-replica.svg';
import arrowForwardRed from './images/arrow_forward-red.svg';
import styles from './Main.scss';
@ -54,6 +45,7 @@ import {
import ToolTip from '../Common/Tooltip/Tooltip';
import { setPreReleaseNotificationOptOutInDB } from '../../telemetry/Actions';
import { Icon } from '../UIKit/atoms/Icon';
import { ProPopup } from './components/ProPopup';
class Main extends React.Component {
constructor(props) {
@ -93,11 +85,11 @@ class Main extends React.Component {
dispatch(fetchServerConfig());
}
toggleProPopup() {
toggleProPopup = () => {
const { dispatch } = this.props;
dispatch(emitProClickedEvent({ open: !this.state.isPopUpOpen }));
this.setState({ isPopUpOpen: !this.state.isPopUpOpen });
}
};
setShowUpdateNotification() {
const {
@ -189,10 +181,10 @@ class Main extends React.Component {
}
}
clickProIcon() {
onProIconClick = () => {
this.updateLocalStorageState();
this.toggleProPopup();
}
};
closeUpdateBanner() {
const { updateNotificationVersion } = this.state;
@ -214,7 +206,10 @@ class Main extends React.Component {
dispatch,
} = this.props;
const { isProClicked } = this.state.proClickState;
const {
proClickState: { isProClicked },
isPopUpOpen,
} = this.state;
const appPrefix = '';
@ -521,122 +516,6 @@ class Main extends React.Component {
);
};
const renderProPopup = () => {
const { isPopUpOpen } = this.state;
if (isPopUpOpen) {
return (
<div className={styles.proPopUpWrapper}>
<div className={styles.popUpHeader}>
Hasura <span>PRO</span>
<img
onClick={this.toggleProPopup.bind(this)}
className={styles.popUpClose}
src={close}
alt={'Close'}
/>
</div>
<div className={styles.popUpBodyWrapper}>
<div className={styles.featuresDescription}>
Hasura Pro is an enterprise-ready version of Hasura that comes
with the following features:
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={monitoring} alt={'Monitoring'} />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>
Monitoring/Analytics
</div>
<div className={styles.featuresDescription}>
Complete observability to troubleshoot errors and drill-down
into individual operations.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={rate} alt={'Rate'} />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Rate Limiting</div>
<div className={styles.featuresDescription}>
Prevent abuse with role-based rate limits.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={regression} alt={'Regression'} />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Regression Testing</div>
<div className={styles.featuresDescription}>
Automatically create regression suites to prevent breaking
changes.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={management} alt={'Management'} />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Team Management</div>
<div className={styles.featuresDescription}>
Login to a Hasura project with granular privileges.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={allow} alt={'allow'} />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>
Allow Listing Workflows
</div>
<div className={styles.featuresDescription}>
Setup allow lists across dev, staging and production
environments with easy workflows.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={read} alt={'read'} />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Read Replicas</div>
<div className={styles.featuresDescription}>
Native Read Replica support for enhanced performance and
scalability
</div>
</div>
</div>
</div>
<div className={styles.popUpFooter}>
<a
href={
'https://hasura.io/getintouch?type=hasuraprodemo&utm_source=console'
}
target={'_blank'}
rel="noopener noreferrer"
>
Set up a chat to learn more{' '}
<img
className={styles.arrow}
src={arrowForwardRed}
alt={'Arrow'}
/>
</a>
</div>
</div>
);
}
return null;
};
const getVulnerableVersionNotification = () => {
let vulnerableVersionNotificationHtml = null;
@ -758,19 +637,17 @@ class Main extends React.Component {
<div id="dropdown_wrapper" className={styles.clusterInfoWrapper}>
{getAdminSecretSection()}
<div
className={
styles.headerRightNavbarBtn + ' ' + styles.proWrapper
}
className={`${styles.headerRightNavbarBtn} ${styles.proWrapper}`}
onClick={this.onProIconClick}
>
<span
className={
!isProClicked ? styles.proName : styles.proNameClicked
}
onClick={this.clickProIcon.bind(this)}
className={`
${isProClicked ? styles.proNameClicked : styles.proName}
${isPopUpOpen ? styles.navActive : ''}`}
>
PRO
CLOUD
</span>
{renderProPopup()}
{isPopUpOpen && <ProPopup toggleOpen={this.toggleProPopup} />}
</div>
<Link to="/settings">
<div className={styles.headerRightNavbarBtn}>
@ -780,7 +657,7 @@ class Main extends React.Component {
</Link>
<a
id="help"
href={'https://hasura.io/help'}
href="https://hasura.io/help"
target="_blank"
rel="noopener noreferrer"
>

View File

@ -10,10 +10,6 @@
position: relative;
}
.flexRow {
// display: flex;
}
.phantom {
display: block;
padding: 14.5px 10px;
@ -502,7 +498,6 @@
text-align: center;
width: 20%;
display: inline-block;
float: right;
i {
font-size: 14px;
@ -562,7 +557,7 @@
// color: $navbar-inverse-link-hover-color;
// background: #444;
transition: color 0.5s;
pointer: cursor;
cursor: pointer;
}
}
}
@ -701,7 +696,6 @@
.logoHeading {
display: inline-block;
float: left;
padding-top: 15px;
padding-left: 15px;
font-size: 18px;
@ -749,10 +743,6 @@
}
}
.exploreDisabled {
// opacity: 0.2;
}
.exploreSidebar {
box-shadow: -3px 7px 14px 0px rgba(222, 222, 222, 1);
float: right;
@ -814,10 +804,6 @@
}
}
.exploreTaskDisabled {
// opacity: 0.1;
}
.progressBtn {
float: right;
padding-top: 10px;
@ -918,8 +904,10 @@
cursor: pointer;
&:hover {
opacity: 0.7;
font-weight: 600;
span {
opacity: 0.7;
font-weight: 600;
}
}
.selected {
@ -1201,6 +1189,7 @@
.proWrapper {
position: relative;
padding: 12px 15px;
cursor: pointer;
.proName,
.proNameClicked {
font-size: 15px;
@ -1220,6 +1209,13 @@
.proNameClicked {
color: #fff;
}
.navActive {
color: #f8c53c;
opacity: 1 !important;
&:hover {
opacity: 1 !important;
}
}
.proPopUpWrapper {
position: absolute;
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.24);
@ -1232,6 +1228,7 @@
text-transform: none;
overflow: auto;
max-height: calc(100vh - 80px);
cursor: initial;
.popUpHeader {
font-size: 20px;
font-weight: bold;
@ -1240,7 +1237,7 @@
padding: 20px 24px;
border-bottom: 1px solid #ddd;
span {
color: #1cd3c6;
color: #1eb4d4;
}
.popUpClose {
position: absolute;
@ -1284,11 +1281,16 @@
}
}
.popUpFooter {
border-top: 1px solid #ddd;
// border-top: 1px solid #ddd;
padding: 20px 24px;
padding-top: 0;
color: #ff3264;
font-weight: normal;
font-size: 15px;
text-align: center;
.largeButton {
padding: 10px 55px;
}
a {
color: #ff3264;
&:hover {
@ -1307,8 +1309,7 @@
}
}
@media(max-width: 1500px) {
@media (max-width: 1500px) {
.header_items {
width: 52%;
}
@ -1336,9 +1337,10 @@
font-size: 12px;
}
.proWrapper{
.proName, .proNameClicked {
font-size: 12px
.proWrapper {
.proName,
.proNameClicked {
font-size: 12px;
}
}
@ -1347,5 +1349,4 @@
font-size: 12px;
}
}
}

View File

@ -0,0 +1,121 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React from 'react';
import Button from '../../Common/Button/Button';
import close from '../images/x-circle.svg';
import monitoring from '../images/monitoring.svg';
import rate from '../images/rate.svg';
import regression from '../images/regression.svg';
import management from '../images/management.svg';
import allow from '../images/allow-listing.svg';
import dataCaching from '../images/data-caching.svg';
import styles from '../Main.scss';
type ProPopupProps = {
toggleOpen: () => void;
};
export const ProPopup: React.FC<ProPopupProps> = ({ toggleOpen }) => (
<div className={styles.proPopUpWrapper}>
<div className={styles.popUpHeader}>
Hasura <span>CLOUD</span>
<img
onClick={toggleOpen}
className={styles.popUpClose}
src={close}
alt="Close"
/>
</div>
<div className={styles.popUpBodyWrapper}>
<div className={styles.featuresDescription}>
Hasura Cloud gives you a scalable, highly available, globally
distributed, fully managed, secure GraphQL API as a service!
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={monitoring} alt="Monitoring" />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Monitoring/Analytics</div>
<div className={styles.featuresDescription}>
Complete observability: Troubleshoot errors & drill-down into
individual operations.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={rate} alt="Rate" />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Rate Limiting</div>
<div className={styles.featuresDescription}>
Role-based rate limits to prevent abuse.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={regression} alt="Regression" />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Regression Testing</div>
<div className={styles.featuresDescription}>
Automatically create regression suites to prevent breaking changes.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={management} alt="Management" />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Team Management</div>
<div className={styles.featuresDescription}>
Login to Hasura project with granular privileges.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={dataCaching} alt="data caching" />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>
Query & Dynamic Data caching
</div>
<div className={styles.featuresDescription}>
Automatic caching of your shared data, cache query plans at the
GraphQL and at the database level and blazing fast performance.
</div>
</div>
</div>
<div className={styles.proFeaturesList}>
<div className={styles.featuresImg}>
<img src={allow} alt="allow" />
</div>
<div className={styles.featuresList}>
<div className={styles.featuresTitle}>Allow Listing</div>
<div className={styles.featuresDescription}>
Allow listing workflows across dev, staging and production
environments.
</div>
</div>
</div>
</div>
<div className={styles.popUpFooter}>
<a
href="https://cloud.hasura.io/"
target="_blank"
rel="noopener noreferrer"
>
<Button
data-test="data-get-started"
color="yellow"
className={styles.largeButton}
>
Get started
</Button>
</a>
</div>
</div>
);

View File

@ -1,17 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40.25" height="40.25" viewBox="0 0 40.25 40.25">
<svg xmlns="http://www.w3.org/2000/svg" width="22.5" height="24" viewBox="0 0 22.5 24">
<defs>
<style>
.prefix__cls-1{fill:none;stroke:#1cd3c6;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px}
.prefix__cls-1{fill:none;stroke:#1eb4d4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<g id="prefix__Group_7882" data-name="Group 7882" transform="translate(-792.75 -4045.75)">
<g id="prefix__streamline-icon-filter-text_40x40" data-name="streamline-icon-filter-text@40x40" transform="translate(792.75 4045.75)">
<path id="prefix__Path_5061" d="M23.745 8.75h12.5a2.5 2.5 0 0 1 2.5 2.5v25a2.5 2.5 0 0 1-2.5 2.5h-22.5a2.5 2.5 0 0 1-2.5-2.5v-10" class="prefix__cls-1" data-name="Path 5061"/>
<path id="prefix__Path_5062" d="M21.245 16.25H33.75" class="prefix__cls-1" data-name="Path 5062"/>
<path id="prefix__Path_5063" d="M17.5 23.75h16.25" class="prefix__cls-1" data-name="Path 5063"/>
<path id="prefix__Path_5064" d="M17.5 31.25h16.25" class="prefix__cls-1" data-name="Path 5064"/>
<path id="prefix__Path_5065" d="M13.75 16.25v-5l6.982-6.982a1.768 1.768 0 0 0-1.25-3.018H3.018a1.768 1.768 0 0 0-1.25 3.018L8.75 11.25v10z" class="prefix__cls-1" data-name="Path 5065"/>
</g>
<path id="prefix__Rectangle_10538" d="M0 0H40V40H0z" data-name="Rectangle 10538" transform="translate(793 4046)" style="fill:none"/>
<g id="prefix__streamline-icon-hierarchy-4_24x24" data-name="streamline-icon-hierarchy-4@24x24" transform="translate(-.75 .002)">
<path id="prefix__Path_3036" d="M3.75 18.748a6.291 6.291 0 0 1 6.545-6H13.7a6.291 6.291 0 0 1 6.545 6" class="prefix__cls-1" data-name="Path 3036"/>
<path id="prefix__Path_3037" d="M12 6.748v12" class="prefix__cls-1" data-name="Path 3037"/>
<path id="prefix__Path_3038" d="M12 .748a3 3 0 1 1-3 3 3 3 0 0 1 3-3z" class="prefix__cls-1" data-name="Path 3038"/>
<path id="prefix__Path_3039" d="M3.75 18.748A2.25 2.25 0 1 1 1.5 21a2.25 2.25 0 0 1 2.25-2.252z" class="prefix__cls-1" data-name="Path 3039"/>
<path id="prefix__Path_3040" d="M12 18.748A2.25 2.25 0 1 1 9.75 21 2.25 2.25 0 0 1 12 18.748z" class="prefix__cls-1" data-name="Path 3040"/>
<path id="prefix__Path_3041" d="M20.25 18.748A2.25 2.25 0 1 1 18 21a2.25 2.25 0 0 1 2.25-2.252z" class="prefix__cls-1" data-name="Path 3041"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.5" height="24" viewBox="0 0 22.5 24">
<defs>
<style>
.prefix__cls-1{fill:none;stroke:#1eb4d4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<g id="prefix__streamline-icon-hierarchy-4_24x24" data-name="streamline-icon-hierarchy-4@24x24" transform="translate(-.75 .002)">
<path id="prefix__Path_3036" d="M3.75 18.748a6.291 6.291 0 0 1 6.545-6H13.7a6.291 6.291 0 0 1 6.545 6" class="prefix__cls-1" data-name="Path 3036"/>
<path id="prefix__Path_3037" d="M12 6.748v12" class="prefix__cls-1" data-name="Path 3037"/>
<path id="prefix__Path_3038" d="M12 .748a3 3 0 1 1-3 3 3 3 0 0 1 3-3z" class="prefix__cls-1" data-name="Path 3038"/>
<path id="prefix__Path_3039" d="M3.75 18.748A2.25 2.25 0 1 1 1.5 21a2.25 2.25 0 0 1 2.25-2.252z" class="prefix__cls-1" data-name="Path 3039"/>
<path id="prefix__Path_3040" d="M12 18.748A2.25 2.25 0 1 1 9.75 21 2.25 2.25 0 0 1 12 18.748z" class="prefix__cls-1" data-name="Path 3040"/>
<path id="prefix__Path_3041" d="M20.25 18.748A2.25 2.25 0 1 1 18 21a2.25 2.25 0 0 1 2.25-2.252z" class="prefix__cls-1" data-name="Path 3041"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,17 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23.999" height="24.204" viewBox="0 0 23.999 24.204">
<defs>
<style>
.cls-1{fill:none;stroke:#1cd3c6;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
.prefix__cls-1{fill:none;stroke:#1eb4d4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<g id="streamline-icon-multiple-users-3_24x24" data-name="streamline-icon-multiple-users-3@24x24" transform="translate(.75 .75)">
<path id="Path_3010" d="M12 14.25a2.625 2.625 0 1 1-2.625 2.625A2.625 2.625 0 0 1 12 14.25z" class="cls-1" data-name="Path 3010" transform="translate(-.751 -.751)"/>
<path id="Path_3011" d="M16.224 23.25a4.474 4.474 0 0 0-8.448 0" class="cls-1" data-name="Path 3011" transform="translate(-.751 -.751)"/>
<path id="Path_3012" d="M4.974.75a2.625 2.625 0 1 1-2.625 2.625A2.625 2.625 0 0 1 4.974.75z" class="cls-1" data-name="Path 3012" transform="translate(-.751 -.75)"/>
<path id="Path_3013" d="M9.2 9.75a4.474 4.474 0 0 0-8.449 0z" class="cls-1" data-name="Path 3013" transform="translate(-.751 -.75)"/>
<path id="Path_3014" d="M19.026.75A2.625 2.625 0 1 1 16.4 3.375 2.625 2.625 0 0 1 19.026.75z" class="cls-1" data-name="Path 3014" transform="translate(-.751 -.75)"/>
<path id="Path_3015" d="M23.25 9.75a4.474 4.474 0 0 0-8.449 0z" class="cls-1" data-name="Path 3015" transform="translate(-.751 -.75)"/>
<path id="Path_3016" d="M3.75 12.75v3.75A2.249 2.249 0 0 0 6 18.75h.75" class="cls-1" data-name="Path 3016" transform="translate(-.751 -.751)"/>
<path id="Path_3017" d="M20.25 12.75v3.75A2.249 2.249 0 0 1 18 18.75h-.75" class="cls-1" data-name="Path 3017" transform="translate(-.751 -.751)"/>
<g id="prefix__streamline-icon-multiple-users-3_24x24" data-name="streamline-icon-multiple-users-3@24x24" transform="translate(.75 .75)">
<path id="prefix__Path_3010" d="M12 14.25a2.625 2.625 0 1 1-2.625 2.625A2.625 2.625 0 0 1 12 14.25z" class="prefix__cls-1" data-name="Path 3010" transform="translate(-.751 -.751)"/>
<path id="prefix__Path_3011" d="M16.224 23.25a4.474 4.474 0 0 0-8.448 0" class="prefix__cls-1" data-name="Path 3011" transform="translate(-.751 -.751)"/>
<path id="prefix__Path_3012" d="M4.974.75a2.625 2.625 0 1 1-2.625 2.625A2.625 2.625 0 0 1 4.974.75z" class="prefix__cls-1" data-name="Path 3012" transform="translate(-.751 -.75)"/>
<path id="prefix__Path_3013" d="M9.2 9.75a4.474 4.474 0 0 0-8.449 0z" class="prefix__cls-1" data-name="Path 3013" transform="translate(-.751 -.75)"/>
<path id="prefix__Path_3014" d="M19.026.75A2.625 2.625 0 1 1 16.4 3.375 2.625 2.625 0 0 1 19.026.75z" class="prefix__cls-1" data-name="Path 3014" transform="translate(-.751 -.75)"/>
<path id="prefix__Path_3015" d="M23.25 9.75a4.474 4.474 0 0 0-8.449 0z" class="prefix__cls-1" data-name="Path 3015" transform="translate(-.751 -.75)"/>
<path id="prefix__Path_3016" d="M3.75 12.75v3.75A2.249 2.249 0 0 0 6 18.75h.75" class="prefix__cls-1" data-name="Path 3016" transform="translate(-.751 -.751)"/>
<path id="prefix__Path_3017" d="M20.25 12.75v3.75A2.249 2.249 0 0 1 18 18.75h-.75" class="prefix__cls-1" data-name="Path 3017" transform="translate(-.751 -.751)"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1,12 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24.434" height="24.328" viewBox="0 0 24.434 24.328">
<svg xmlns="http://www.w3.org/2000/svg" width="24.433" height="24.328" viewBox="0 0 24.433 24.328">
<defs>
<style>
.cls-1{fill:none;stroke:#1cd3c6;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
.prefix__cls-1{fill:none;stroke:#1eb4d4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<g id="streamline-icon-love-it-search_24x24" data-name="streamline-icon-love-it-search@24x24" transform="translate(.876 .768)">
<path id="Path_3007" d="M15.747 10.5a5.25 5.25 0 1 1-5.25 5.25 5.25 5.25 0 0 1 5.25-5.25z" class="cls-1" data-name="Path 3007" transform="translate(-.75 -.749)"/>
<path id="Path_3008" d="M23.247 23.25l-3.787-3.788" class="cls-1" data-name="Path 3008" transform="translate(-.75 -.75)"/>
<path id="Path_3009" d="M7.507 15.749l-5.095-5.314a5.673 5.673 0 0 1-1.063-6.549 5.671 5.671 0 0 1 9.085-1.473L12 3.978l1.566-1.565a5.673 5.673 0 0 1 9.085 1.473A5.678 5.678 0 0 1 22.632 9" class="cls-1" data-name="Path 3009" transform="translate(-.75 -.749)"/>
<g id="prefix__streamline-icon-love-it-search_24x24" data-name="streamline-icon-love-it-search@24x24" transform="translate(.875 .768)">
<path id="prefix__Path_3007" d="M15.747 10.5a5.25 5.25 0 1 1-5.25 5.25 5.25 5.25 0 0 1 5.25-5.25z" class="prefix__cls-1" data-name="Path 3007" transform="translate(-.75 -.749)"/>
<path id="prefix__Path_3008" d="M23.247 23.25l-3.787-3.788" class="prefix__cls-1" data-name="Path 3008" transform="translate(-.75 -.75)"/>
<path id="prefix__Path_3009" d="M7.507 15.749l-5.095-5.314a5.673 5.673 0 0 1-1.063-6.549 5.671 5.671 0 0 1 9.085-1.473L12 3.978l1.566-1.565a5.673 5.673 0 0 1 9.085 1.473A5.678 5.678 0 0 1 22.632 9" class="prefix__cls-1" data-name="Path 3009" transform="translate(-.75 -.749)"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 983 B

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -1,12 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="24.009" viewBox="0 0 21 24.009">
<defs>
<style>
.cls-1{fill:none;stroke:#1cd3c6;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
.prefix__cls-1{fill:none;stroke:#1eb4d4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<g id="streamline-icon-shield-key_24x24" data-name="streamline-icon-shield-key@24x24" transform="translate(.75 .75)">
<path id="Path_3018" d="M2.25 3.923v7.614a11.907 11.907 0 0 0 7.632 11.112l1.041.4a3 3 0 0 0 2.154 0l1.041-.4a11.907 11.907 0 0 0 7.632-11.113V3.923a1.488 1.488 0 0 0-.868-1.362A21.709 21.709 0 0 0 12 .75a21.709 21.709 0 0 0-8.882 1.811 1.488 1.488 0 0 0-.868 1.362z" class="cls-1" data-name="Path 3018" transform="translate(-2.25 -.749)"/>
<path id="Path_3019" d="M10.545 12.925a.375.375 0 1 1 0 .53.374.374 0 0 1 0-.529" class="cls-1" data-name="Path 3019" transform="translate(-2.25 -.75)"/>
<path id="Path_3020" d="M14.587 11.71l3.687-3.688a1.626 1.626 0 0 0-2.3-2.3L12.29 9.413a4.06 4.06 0 1 0 2.3 2.3z" class="cls-1" data-name="Path 3020" transform="translate(-2.25 -.749)"/>
<g id="prefix__streamline-icon-shield-key_24x24" data-name="streamline-icon-shield-key@24x24" transform="translate(.75 .75)">
<path id="prefix__Path_3018" d="M2.25 3.923v7.614a11.907 11.907 0 0 0 7.632 11.112l1.041.4a3 3 0 0 0 2.154 0l1.041-.4a11.907 11.907 0 0 0 7.632-11.113V3.923a1.488 1.488 0 0 0-.868-1.362A21.709 21.709 0 0 0 12 .75a21.709 21.709 0 0 0-8.882 1.811 1.488 1.488 0 0 0-.868 1.362z" class="prefix__cls-1" data-name="Path 3018" transform="translate(-2.25 -.749)"/>
<path id="prefix__Path_3019" d="M10.545 12.925a.375.375 0 1 1 0 .53.374.374 0 0 1 0-.529" class="prefix__cls-1" data-name="Path 3019" transform="translate(-2.25 -.75)"/>
<path id="prefix__Path_3020" d="M14.587 11.71l3.687-3.688a1.626 1.626 0 0 0-2.3-2.3L12.29 9.413a4.06 4.06 0 1 0 2.3 2.3z" class="prefix__cls-1" data-name="Path 3020" transform="translate(-2.25 -.749)"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,24 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.5" height="22.499" viewBox="0 0 22.5 22.499">
<defs>
<style>
.cls-1{fill:none;stroke:#1cd3c6;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
.prefix__cls-1{fill:none;stroke:#1eb4d4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<g id="streamline-icon-computer-chip_24x24" data-name="streamline-icon-computer-chip@24x24" transform="translate(.75 .75)">
<path id="Path_3021" d="M5.25 3.75h13.5a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V5.25a1.5 1.5 0 0 1 1.5-1.5z" class="cls-1" data-name="Path 3021" transform="translate(-1.5 -1.5)"/>
<path id="Path_3022" d="M12 3.75V1.5" class="cls-1" data-name="Path 3022" transform="translate(-1.5 -1.5)"/>
<path id="Path_3023" d="M6.75 3.75V1.5" class="cls-1" data-name="Path 3023" transform="translate(-1.5 -1.5)"/>
<path id="Path_3024" d="M17.25 3.75V1.5" class="cls-1" data-name="Path 3024" transform="translate(-1.5 -1.5)"/>
<path id="Path_3025" d="M12 22.5v-2.25" class="cls-1" data-name="Path 3025" transform="translate(-1.5 -1.501)"/>
<path id="Path_3026" d="M6.75 22.5v-2.25" class="cls-1" data-name="Path 3026" transform="translate(-1.5 -1.501)"/>
<path id="Path_3027" d="M17.25 22.5v-2.25" class="cls-1" data-name="Path 3027" transform="translate(-1.5 -1.501)"/>
<path id="Path_3028" d="M22.5 12h-2.25" class="cls-1" data-name="Path 3028" transform="translate(-1.5 -1.501)"/>
<path id="Path_3029" d="M22.5 17.25h-2.25" class="cls-1" data-name="Path 3029" transform="translate(-1.5 -1.501)"/>
<path id="Path_3030" d="M22.5 6.75h-2.25" class="cls-1" data-name="Path 3030" transform="translate(-1.5 -1.5)"/>
<path id="Path_3031" d="M3.75 12H1.5" class="cls-1" data-name="Path 3031" transform="translate(-1.5 -1.501)"/>
<path id="Path_3032" d="M3.75 17.25H1.5" class="cls-1" data-name="Path 3032" transform="translate(-1.5 -1.501)"/>
<path id="Path_3033" d="M3.75 6.75H1.5" class="cls-1" data-name="Path 3033" transform="translate(-1.5 -1.5)"/>
<path id="Path_3034" d="M8.25 6.75h7.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5v-7.5a1.5 1.5 0 0 1 1.5-1.5z" class="cls-1" data-name="Path 3034" transform="translate(-1.5 -1.5)"/>
<path id="Path_3035" d="M14.25 14.25H12" class="cls-1" data-name="Path 3035" transform="translate(-1.5 -1.501)"/>
<g id="prefix__streamline-icon-computer-chip_24x24" data-name="streamline-icon-computer-chip@24x24" transform="translate(.75 .75)">
<path id="prefix__Path_3021" d="M5.25 3.75h13.5a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V5.25a1.5 1.5 0 0 1 1.5-1.5z" class="prefix__cls-1" data-name="Path 3021" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3022" d="M12 3.75V1.5" class="prefix__cls-1" data-name="Path 3022" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3023" d="M6.75 3.75V1.5" class="prefix__cls-1" data-name="Path 3023" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3024" d="M17.25 3.75V1.5" class="prefix__cls-1" data-name="Path 3024" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3025" d="M12 22.5v-2.25" class="prefix__cls-1" data-name="Path 3025" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3026" d="M6.75 22.5v-2.25" class="prefix__cls-1" data-name="Path 3026" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3027" d="M17.25 22.5v-2.25" class="prefix__cls-1" data-name="Path 3027" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3028" d="M22.5 12h-2.25" class="prefix__cls-1" data-name="Path 3028" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3029" d="M22.5 17.25h-2.25" class="prefix__cls-1" data-name="Path 3029" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3030" d="M22.5 6.75h-2.25" class="prefix__cls-1" data-name="Path 3030" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3031" d="M3.75 12H1.5" class="prefix__cls-1" data-name="Path 3031" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3032" d="M3.75 17.25H1.5" class="prefix__cls-1" data-name="Path 3032" transform="translate(-1.5 -1.501)"/>
<path id="prefix__Path_3033" d="M3.75 6.75H1.5" class="prefix__cls-1" data-name="Path 3033" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3034" d="M8.25 6.75h7.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5v-7.5a1.5 1.5 0 0 1 1.5-1.5z" class="prefix__cls-1" data-name="Path 3034" transform="translate(-1.5 -1.5)"/>
<path id="prefix__Path_3035" d="M14.25 14.25H12" class="prefix__cls-1" data-name="Path 3035" transform="translate(-1.5 -1.501)"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -15,3 +15,8 @@ declare namespace React {
declare module 'graphiql-code-exporter/lib/snippets';
declare module 'graphiql-code-exporter';
declare module '*.svg' {
const content: string;
export default content;
}