vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

chore: add new icons. new card component

Browse Source
This commit is contained in:
Jonathan Summers-Muir
2022-08-12 09:09:02 -03:00
parent 228f602394
commit b6a6f8c512
15 changed files with 361 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/reference/docs/reference.mdx
View File

@@ -6,6 +6,7 @@ hide_table_of_contents: true
--- ---
import Link from '@docusaurus/Link' import Link from '@docusaurus/Link'
import ButtonCard from '@site/src/components/ButtonCard'
The Supabase Reference Docs provide technical descriptions of the products and how to use them. The Supabase Reference Docs provide technical descriptions of the products and how to use them.
@@ -13,45 +14,37 @@ The Supabase Reference Docs provide technical descriptions of the products and h
<div class="row is-multiline"> <div class="row is-multiline">
{/* Database */} {/* Database */}
<div class="col col--6"> <div class="col col--6">
<Link <ButtonCard
icon={"/docs/img/icons/javascript-icon.svg"}
class="card" class="card"
to="/docs/reference/javascript" to="/docs/reference/javascript"
style={{ height: '100%' }} style={{ height: '100%' }}
title="JavaScript"
description="JavaScript and TypeScript documentation."
> >
<div class="card__body">
<h4>JavaScript</h4> </ButtonCard>
<p>JavaScript and TypeScript documentation.</p>
</div>
</Link>
</div> </div>
{/* Auth */} {/* Auth */}
<div class="col col--6"> <div class="col col--6">
<Link class="card" to="/docs/reference/dart" style={{ height: '100%' }}> <ButtonCard icon={"/docs/img/icons/dart-icon.svg"} class="card" to="/docs/reference/dart" style={{ height: '100%' }} title="Dart" description="Dart and Flutter documentation.">
<div class="card__body">
<h4>Dart</h4> </ButtonCard>
<p>Dart and Flutter documentation.</p>
</div>
</Link>
</div> </div>
{/* Examples - coming soon */} {/* Examples - coming soon */}
<div class="col col--6"> <div class="col col--6">
<Link class="card" to="/docs/reference/cli" style={{ height: '100%' }}> <ButtonCard icon={"/docs/img/icons/cli-icon.svg"} class="card" to="/docs/reference/cli" style={{ height: '100%' }} title="Supabase CLI" description="Manage your Supabase projects.">
<div class="card__body">
<h4>Supabase CLI</h4> </ButtonCard>
<p>Manage your Supabase projects.</p>
</div>
</Link>
</div> </div>
{/* CLI */} {/* CLI */}
<div class="col col--6"> <div class="col col--6">
<Link class="card" to="/docs/reference/api" style={{ height: '100%' }}> <ButtonCard icon={"/docs/img/icons/api-icon.svg"} class="card" to="/docs/reference/api" style={{ height: '100%' }} title="Supabase API" description="Manage your Supabase projects.">
<div class="card__body">
<h4>Supabase API</h4> </ButtonCard>
<p>Manage your Supabase projects.</p>
</div>
</Link>
</div> </div>
{/* */} {/* */}
</div> </div>
</div> </div>

21
apps/reference/src/components/ButtonCard.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react'
import Link from '@docusaurus/Link'
export default function ButtonCard({
children,
color,
icon,
title,
description,
to,
}) {
return (
<Link to={to}>
<div className="button-card__container">
<img src={icon} width={24} />
<h3>{title}</h3>
<p>{description}</p>
</div>
</Link>
)
}

31
apps/reference/src/css/components/_button-card.scss Normal file
View File

@@ -0,0 +1,31 @@
:root {
--custom-button-card-padding: 2rem;
}
.button-card__container {
padding: var(--custom-button-card-padding);
border: 1px solid var(--custom-border-color);
background-color: var(--custom-background-color-diff);
border-radius: 0.5rem;
margin-bottom: var(--ifm-spacing-horizontal) !important;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
img {
margin-bottom: 0.5rem;
}
h3 {
color: var(--custom-content-color-emphasis);
font-size: var(--custom-font-size-lg);
margin-bottom: 0rem;
}
p {
color: var(--custom-content-color-light);
font-size: var(--custom-font-size-sm);
margin-bottom: 0;
}
}

59
apps/reference/src/css/components/_doc-item.scss
View File

@@ -1,19 +1,11 @@
:root { :root {
--doc-item-container-width: 42rem; // --doc-item-container-width: 42rem;
} }
//overrides //overrides
#__docusaurus { #__docusaurus {
//#region ------------ DocItem -------------
[class*='docItemCol_'] { [class*='docItemCol_'] {
// max-width: initial; // flex-direction: column;
// min-width: 0;
// width: 100%;
flex-direction: column;
@media (min-width: 997px) {
// max-width: initial !important;
}
} }
[class*='docItemContainer_'] { [class*='docItemContainer_'] {
@@ -23,17 +15,14 @@
[class*='docItemContainer_'] { [class*='docItemContainer_'] {
max-width: var(--doc-item-container-width); max-width: var(--doc-item-container-width);
margin: 0 auto; margin: 0 auto;
width: 100%; // width: 100%;
// flex-grow: 1;
// min-width: 0;
} }
.theme-doc-version-banner { .theme-doc-version-banner {
max-width: var(--doc-item-container-width); max-width: var(--doc-item-container-width);
margin: 0 auto; margin: 0 auto;
width: 100%; // width: 100%;
// flex-grow: 1; margin-bottom: 2rem !important;
// min-width: 0;
} }
[class*='docMainContainer_'] { [class*='docMainContainer_'] {
@@ -43,29 +32,29 @@
// } // }
// } // }
> .container { // > .container {
> .row { // > .row {
> .col { // > .col {
display: flex; // display: flex;
justify-content: center; // justify-content: center;
min-width: 0; // min-width: 0;
} // }
} // }
} // }
.spacer { // .spacer {
flex-basis: 5rem; // flex-basis: 5rem;
@media (max-width: 996px) { // @media (max-width: 996px) {
display: none; // display: none;
} // }
} // }
} }
[class*='docItemCol_'] { // [class*='docItemCol_'] {
margin-inline-start: auto; // margin-inline-start: auto;
margin-inline-end: auto; // margin-inline-end: auto;
} // }
//#endregion //#endregion
} }

2
apps/reference/src/css/components/_doc-page.scss
View File

@@ -1,7 +1,7 @@
//overrides //overrides
#__docusaurus { #__docusaurus {
[class*='docMainContainer_'] { [class*='docMainContainer_'] {
max-width: initial; // max-width: initial;
padding-top: var(--doc-page-vertical-spacing); padding-top: var(--doc-page-vertical-spacing);
> .container { > .container {

267
apps/reference/src/css/components/_doc-sidebar.scss
View File

@@ -1,138 +1,199 @@
html[data-theme='light'] {
--sidebar-category-c: var(--c-gray-100);
--sidebar-border-c: var(--c-gray-0);
--ifm-menu-color-background-active: var(--c-blue-0);
--ifm-menu-color: var(--c-indigo-80);
}
html[data-theme='dark'] {
--sidebar-category-c: var(--c-gray-0);
--sidebar-border-c: var(--c-gray-90);
--ifm-menu-color: var(--c-gray-20);
}
:root { :root {
// --doc-sidebar-width: 32rem; --doc-sidebar-width: 20rem;
// --dropdown-icon-width: 0.625rem;
// --dropdown-icon-height: 0.375rem; --ifm-sidebar-border-color: var(--custom-border-color);
// --dropdown-icon-gap: 0.688rem; --ifm-menu-link-padding-horizontal: 0rem;
// --ifm-menu-link-padding-vertical: 0.5rem;
// --ifm-menu-color-active: var(--ifm-link-color); --ifm-menu-color: var(--custom-content-color-light);
// --sidebar-spacing-horizontal: 1.5rem; --ifm-menu-color-active: var(--custom-primary);
--ifm-menu-color-background-active: var(--custom-background-color-diff);
--dropdown-icon-width: 0.525rem;
--dropdown-icon-height: 0.475rem;
--dropdown-icon-gap: 0.688rem;
--ifm-menu-link-padding-vertical: 0.5rem;
--custom-sidebar-padding: 1.5rem;
--custom-sidebar-menu-link-vertical-padding: 1rem;
--custom-sidebar-menu-link-padding: 0.5rem 1rem;
--tw-ring-inset: ; --tw-ring-inset: ;
--tw-ring-offset-width: 0px; --tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff; --tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 1px 2px 0 rgb(0 0 0/0.05); --tw-shadow: 0 1px 2px 0 rgb(0 0 0/0.05);
--tw-ring-color: rgb(15 23 42/0.05); --tw-ring-color: rgb(15 23 42/0.05);
} }
.theme-doc-sidebar-menu-custom-container { :root[data-theme='dark'] {
// padding: 32px; --ifm-menu-color-background-active: var(--custom-background-color-highlight);
padding: var(--custom-sidebar-padding); }
overflow-x: hidden;
.custom--main-menu-button { .menu {
display: flex; padding-top: var(--custom-sidebar-menu-link-vertical-padding) !important;
padding: 1rem 0 0.5rem 1rem; padding-bottom: var(--custom-sidebar-menu-link-vertical-padding) !important;
font-size: 0.9rem; padding-left: var(--custom-sidebar-padding) !important;
color: var(--custom-content-color-light); padding-right: var(--custom-sidebar-padding) !important;
} ul {
.custom--main-menu-header-container {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 0 0.5rem 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
}
}
.custom--main-menu-header { .menu__list {
display: flex; // transition-duration: 0.1s !important;
font-size: var(--custom-font-size-md); transition: height 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) 25ms !important;
font-weight: 700; transition-property: height !important;
color: var(--ifm-menu-color); transition-duration: 0.35s !important;
margin-bottom: 0; transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1) !important;
} transition-delay: 25ms !important;
}
.custom--main-menu-header__icon { // sub menu items
width: 40px; .menu__list-item-collapsible {
height: 40px; &:hover {
display: flex; background-color: transparent;
align-items: center;
justify-content: center;
border-radius: 4px;
background-color: white;
// border: 1px solid var(--custom-background-color-diff-1);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
img {
width: 1.5rem;
height: 1.5rem;
border-radius: 4px;
}
}
} }
.custom--main-menu-button svg { padding-left: var(--custom-sidebar-menu-padding);
padding: 2px;
margin-right: 10px; a {
color: var(--custom-content-color-light);
}
.custom--main-menu-button:hover,
.custom--main-menu-button:hover svg {
transition: all;
transition-duration: 0.5s;
color: var(--custom-content-color-emphasis); color: var(--custom-content-color-emphasis);
} }
.menu__link--sublist-caret { .menu__link--sublist-caret {
&::after { &::after {
background: var(--ifm-menu-link-sublist-icon) center / position: absolute;
var(--dropdown-icon-width) var(--dropdown-icon-height); left: 0;
background-repeat: no-repeat;
min-width: auto;
width: var(--dropdown-icon-width);
height: var(--dropdown-icon-height);
// margin-inline-end: var(--dropdown-icon-gap);
// margin-block-end: 0;
} }
} }
}
.menu__caret { .menu__list-item {
&::before { margin-top: 0 !important;
background: var(--ifm-menu-link-sublist-icon) center / background-color: 'pink' !important;
var(--dropdown-icon-width) var(--dropdown-icon-height); font-size: var(--custom-font-size-xs);
background-repeat: no-repeat;
min-width: auto; a {
padding: var(--custom-sidebar-menu-link-padding);
}
width: var(--dropdown-icon-width); a:not(.menu__link--active):hover {
height: var(--dropdown-icon-height); background-color: transparent;
color: var(--custom-content-color-emphasis);
}
}
// margin-right: var(--dropdown-icon-width); .menu__link--sublist {
font-size: var(--custom-font-size-sm);
}
// margin-inline-end: var(--dropdown-icon-gap); .theme-doc-sidebar-menu-custom-container {
// margin-block-end: 0; padding-top: var(--custom-sidebar-menu-link-vertical-padding) !important;
padding-bottom: var(--custom-sidebar-menu-link-vertical-padding) !important;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 1rem;
}
.custom--main-menu-button {
padding-left: var(--custom-sidebar-padding);
padding-right: var(--custom-sidebar-padding);
display: flex;
// padding: 1rem 0 0.5rem 1rem;
font-size: 0.9rem;
color: var(--custom-content-color-light);
}
.custom--main-menu-header-container {
padding-left: var(--custom-sidebar-padding);
padding-right: var(--custom-sidebar-padding);
display: flex;
align-items: center;
gap: var(--custom-sidebar-menu-link-vertical-padding);
.custom--main-menu-header {
display: flex;
font-size: var(--custom-font-size-md);
font-weight: 700;
color: var(--custom-content-color-emphasis);
margin-bottom: 0;
}
.custom--main-menu-header__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background-color: white;
// border: 1px solid var(--custom-background-color-diff-1);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
img {
width: 1.5rem;
height: 1.5rem;
border-radius: 4px;
} }
} }
} }
.custom--main-menu-button svg {
padding: 2px;
margin-right: 10px;
color: var(--custom-content-color-light);
}
.custom--main-menu-button:hover,
.custom--main-menu-button:hover svg {
transition: all;
transition-duration: 0.5s;
color: var(--custom-content-color-emphasis);
}
.menu__link--sublist-caret {
&::after {
background: var(--ifm-menu-link-sublist-icon) center /
var(--dropdown-icon-width) var(--dropdown-icon-height);
background-repeat: no-repeat;
min-width: auto;
width: var(--dropdown-icon-width);
height: var(--dropdown-icon-height);
// margin-inline-end: var(--dropdown-icon-gap);
// margin-block-end: 0;
}
}
.menu__caret {
&::before {
background: var(--ifm-menu-link-sublist-icon) center /
var(--dropdown-icon-width) var(--dropdown-icon-height);
background-repeat: no-repeat;
min-width: auto;
width: var(--dropdown-icon-width);
height: var(--dropdown-icon-height);
// margin-right: var(--dropdown-icon-width);
// margin-inline-end: var(--dropdown-icon-gap);
// margin-block-end: 0;
}
}
html[data-theme='dark'] { html[data-theme='dark'] {
.custom--main-menu-header-container { .custom--main-menu-header-container {
.custom--main-menu-header__icon { .custom--main-menu-header__icon {

2
apps/reference/src/css/components/_markdown.scss
View File

@@ -79,7 +79,7 @@ html[data-theme='dark'] {
} }
h1 { h1 {
margin-block-start: 5rem; // margin-block-start: 5rem;
} }
h2 + h3, h2 + h3,

28
apps/reference/src/css/components/_menu.scss Normal file
View File

@@ -0,0 +1,28 @@
// .menu {
// font-weight: var(--ifm-font-weight-regular);
// }
// .menu__link {
// font-size: var(--custom-font-size-sm);
// color: var(--custom-content-color-light);
// padding-left: 10px;
// padding-right: 10px;
// }
// .menu__link.menu__link--sublist {
// font-weight: var(--ifm-font-weight-bold);
// // text-transform: uppercase;
// // font-size: smaller;
// color: var(--custom-content-color-emphasis);
// }
// .menu__link.menu__link--active:not(.menu__link--sublist) {
// /* background-color: transparent; */
// color: var(--custom-content-color-emphasis);
// }
// .menu__link:hover:not(.menu__link--active),
// .menu__caret:hover {
// background-color: transparent;
// color: var(--custom-content-color-emphasis);
// }

20
apps/reference/src/css/custom.scss
View File

@@ -7,8 +7,11 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
@use './fonts';
@use './main'; @use './main';
@use './components/methodLists'; @use './components/methodLists';
@use './components/menu';
@use './components/button-card';
// @use './components/admonition'; // @use './components/admonition';
// @use './components/back-to-top-button'; // @use './components/back-to-top-button';
// @use './components/code'; // @use './components/code';
@@ -16,7 +19,7 @@
@use './components/doc-page'; @use './components/doc-page';
@use './components/doc-sidebar'; @use './components/doc-sidebar';
// @use './components/edit-this-page'; // @use './components/edit-this-page';
// @use './components/markdown'; @use './components/markdown';
// @use './components/navbar'; // @use './components/navbar';
// @use './components/navbar-sidebar'; // @use './components/navbar-sidebar';
// @use './components/pagination'; // @use './components/pagination';
@@ -85,14 +88,13 @@
// --ifm-menu-link-sublist-icon-filter: invert(100%); // --ifm-menu-link-sublist-icon-filter: invert(100%);
// } // }
// html { html {
// -moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
// -webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
// text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
// font-smoothing: antialiased; font-smoothing: antialiased;
scroll-padding-top: calc(var(--ifm-navbar-height) + 16px);
// scroll-padding-top: calc(var(--ifm-navbar-height) + 16px); }
// }
// *, // *,
// *::before, // *::before,

29
apps/reference/src/css/fonts.scss Normal file
View File

@@ -0,0 +1,29 @@
@font-face {
font-family: 'custom-font';
src: url(/fonts/custom/CustomFont-Book.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Book.woff) format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'custom-font';
src: url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
}
/* mono font */
@font-face {
font-family: 'office code pro';
src: url('/fonts/office-code-pro/OfficeCodePro-Regular.eot');
src: url('/fonts/office-code-pro/OfficeCodePro-Regular.woff2') format('woff2'),
url('/fonts/office-code-pro/OfficeCodePro-Regular.woff') format('woff'),
url('/fonts/office-code-pro/OfficeCodePro-Regular.ttf') format('truetype'),
url('/fonts/office-code-pro/OfficeCodePro-Regular.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}

75
apps/reference/src/css/main.scss
View File

@@ -1,37 +1,3 @@
/*
Font import
*/
@font-face {
font-family: 'custom-font';
src: url(/fonts/custom/CustomFont-Book.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Book.woff) format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'custom-font';
src: url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
}
/* mono font */
@font-face {
font-family: 'office code pro';
src: url('/fonts/office-code-pro/OfficeCodePro-Regular.eot');
src: url('/fonts/office-code-pro/OfficeCodePro-Regular.woff2') format('woff2'),
url('/fonts/office-code-pro/OfficeCodePro-Regular.woff') format('woff'),
url('/fonts/office-code-pro/OfficeCodePro-Regular.ttf') format('truetype'),
url('/fonts/office-code-pro/OfficeCodePro-Regular.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/** /**
* Any CSS included here will be global. The classic template * Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to * bundles Infima by default. Infima is a CSS framework designed to
@@ -53,6 +19,7 @@
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--custom-font-code: 'office code pro', Menlo, monospace; --custom-font-code: 'office code pro', Menlo, monospace;
--custom-font-size-lg: 1.1rem;
--custom-font-size-base: 1rem; --custom-font-size-base: 1rem;
--custom-font-size-sm: 0.9rem; --custom-font-size-sm: 0.9rem;
--custom-font-size-xs: 0.8rem; --custom-font-size-xs: 0.8rem;
@@ -161,22 +128,13 @@
--ifm-hero-text-color: var(--custom-content-color); --ifm-hero-text-color: var(--custom-content-color);
/* Sidebar */ /* Sidebar */
--ifm-sidebar-border-color: var(--custom-border-color);
--ifm-menu-color-active: var(--custom-primary); // --sidebar-spacing-horizontal: 2rem;
--ifm-menu-link-padding-horizontal: 0rem;
--dropdown-icon-width: 0.625rem;
--dropdown-icon-height: 0.375rem;
--dropdown-icon-gap: 0.688rem;
--ifm-menu-link-padding-vertical: 0.5rem;
--sidebar-spacing-horizontal: 1.5rem;
--doc-sidebar-width: 20rem;
--custom-sidebar-padding: 0.5rem;
/* Doc item */ /* Doc item */
--doc-item-container-width: 60rem; --doc-item-container-width: 55rem;
/* Doc Page */ /* Doc Page */
--doc-page-vertical-spacing: 2rem; --doc-page-vertical-spacing: 2rem;
/* Panel */ /* Panel */
@@ -303,31 +261,6 @@
border-bottom: 1px solid var(--custom-border-color); border-bottom: 1px solid var(--custom-border-color);
} }
.menu {
font-weight: var(--ifm-font-weight-regular);
}
.menu__link {
font-size: var(--custom-font-size-sm);
color: var(--custom-content-color-light);
padding-left: 10px;
padding-right: 10px;
}
.menu__link.menu__link--sublist {
font-weight: var(--ifm-font-weight-bold);
text-transform: uppercase;
font-size: smaller;
color: var(--custom-content-color-emphasis);
}
.menu__link.menu__link--active:not(.menu__link--sublist) {
/* background-color: transparent; */
color: var(--custom-content-color-emphasis);
}
.menu__link:hover:not(.menu__link--active),
.menu__caret:hover {
background-color: transparent;
color: var(--custom-content-color-emphasis);
}
.pagination-nav__link { .pagination-nav__link {
border-color: var(--custom-border-color); border-color: var(--custom-border-color);
} }

2
apps/reference/src/theme/DocSidebar/Desktop/Content/index.js
View File

@@ -17,7 +17,7 @@ const subNavRoutes = [
const headerNames = { const headerNames = {
api: { api: {
name: 'API', name: 'API',
icon: 'javascript-icon', icon: 'api-icon',
}, },
cli: { cli: {
name: 'CLI', name: 'CLI',

10
apps/reference/static/img/icons/api-icon.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.90505 9.96863L2.86164 10.1H3H3.50831H3.58216L3.60388 10.0294L3.95891 8.87576H5.23411L5.58337 10.029L5.60488 10.1H5.67908H6.20532H6.34368L6.30027 9.96863L4.97868 5.96863L4.956 5.9H4.88372H4.3216H4.24932L4.22665 5.96863L2.90505 9.96863ZM6.90432 10V10.1H7.00432H7.50066H7.60066V10V8.51212H8.20631C8.65031 8.51212 9.03737 8.41078 9.31538 8.18787C9.59687 7.96216 9.75349 7.62229 9.75349 7.17576C9.75349 6.71213 9.59886 6.38448 9.31384 6.17743C9.03519 5.97499 8.64795 5.9 8.20631 5.9H7.00432H6.90432V6V10ZM10.4482 10V10.1H10.5482H13H13.1V10V9.5697V9.4697H13H12.1252V6.52424H13H13.1V6.42424V6V5.9H13H10.5482H10.4482V6V6.42424V6.52424H10.5482H11.4229V9.4697H10.5482H10.4482V9.5697V10ZM4.29168 7.78672C4.39865 7.43789 4.49846 7.09986 4.59668 6.74715C4.6949 7.09987 4.79471 7.4379 4.90169 7.78674C4.90171 7.78679 4.90173 7.78684 4.90174 7.7869L5.04796 8.2697H4.1454L4.29162 7.7869C4.29164 7.78684 4.29166 7.78678 4.29168 7.78672ZM7.60066 7.9V6.50606H8.14053C8.4771 6.50606 8.70435 6.55348 8.84667 6.65432C8.98042 6.74908 9.05715 6.90485 9.05715 7.17576C9.05715 7.44087 8.9815 7.61339 8.84418 7.7235C8.70208 7.83742 8.47535 7.9 8.14053 7.9H7.60066Z" fill="#1FDD85" stroke="#1FDD85" stroke-width="0.2"/>
<rect x="0.75" y="0.75" width="14.5" height="14.5" rx="3.25" stroke="url(#paint0_linear_790_16297)" stroke-width="1.5"/>
<defs>
<linearGradient id="paint0_linear_790_16297" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E97C"/>
<stop offset="1" stop-color="#3FCF8E"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

19
apps/reference/static/img/icons/cli-icon.svg
View File

@@ -1,4 +1,19 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" fill="black"/> <rect x="0.75" y="0.75" width="14.5" height="14.5" rx="3.25" stroke="url(#paint0_linear_790_16290)" stroke-width="1.5"/>
<path d="M5.77778 6.5L7.44444 8L5.77778 9.5M8.55556 9.5H10.2222M4.11111 12H11.8889C12.1836 12 12.4662 11.8946 12.6746 11.7071C12.8829 11.5196 13 11.2652 13 11V5C13 4.73478 12.8829 4.48043 12.6746 4.29289C12.4662 4.10536 12.1836 4 11.8889 4H4.11111C3.81643 4 3.53381 4.10536 3.32544 4.29289C3.11706 4.48043 3 4.73478 3 5V11C3 11.2652 3.11706 11.5196 3.32544 11.7071C3.53381 11.8946 3.81643 12 4.11111 12Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.14286 4.35714L7 6.5L4.14286 8.64286" stroke="url(#paint1_linear_790_16290)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.14285 8.64286L11 8.64286" stroke="url(#paint2_linear_790_16290)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_790_16290" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E97C"/>
<stop offset="1" stop-color="#3FCF8E"/>
</linearGradient>
<linearGradient id="paint1_linear_790_16290" x1="5.57143" y1="5.78571" x2="4.56128" y2="6.79587" gradientUnits="userSpaceOnUse">
<stop stop-color="#1BDF84"/>
<stop offset="1" stop-color="#00E97C"/>
</linearGradient>
<linearGradient id="paint2_linear_790_16290" x1="9.57143" y1="5.78571" x2="8.56128" y2="6.79587" gradientUnits="userSpaceOnUse">
<stop stop-color="#1BDF84"/>
<stop offset="1" stop-color="#00E97C"/>
</linearGradient>
</defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 616 B

After

Width:  |  Height:  |  Size: 1.1 KiB

1
tsconfig.json
View File

@@ -1,5 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"jsx": "react",
"skipLibCheck": true "skipLibCheck": true
} }
} }