mirror of
https://github.com/hazemKrimi/crimson-quirks-ui.git
synced 2026-05-01 18:20:28 +00:00
Clear git cache
This commit is contained in:
Hazem Krimi
@@ -0,0 +1,5 @@
|
||||
[*.{html,css,js,ts,jsx,tsx,json}]
|
||||
charset = utf-8
|
||||
indent_style = tab
|
||||
indent_size = 2
|
||||
quote_type= single
|
||||
@@ -0,0 +1,6 @@
|
||||
VITE_GRAPHQL_SUPPORT_API=https://example.com/graphql
|
||||
VITE_PAYMENT_API=https://example.com/payment/api
|
||||
VITE_GRAPHQL_SUPPORT_SUBSCRIPTIONS_API=https://example.com/graphql
|
||||
VITE_GRAPHQL_API=https://example.com/graphql
|
||||
VITE_STRIPE_PUBLIC_KEY=STRIPE_PUBLIC_KEY
|
||||
VITE_CLOUDINARY_URL=CLOUDINARY_URL
|
||||
@@ -0,0 +1 @@
|
||||
.eslintrc.js
|
||||
@@ -0,0 +1,65 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
'airbnb-typescript',
|
||||
'airbnb/hooks',
|
||||
'plugin:jest/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:import/recommended'
|
||||
],
|
||||
plugins: ['react', '@typescript-eslint', 'jest', 'prettier'],
|
||||
env: {
|
||||
browser: true,
|
||||
es6: true,
|
||||
jest: true,
|
||||
},
|
||||
globals: {
|
||||
Atomics: 'readonly',
|
||||
SharedArrayBuffer: 'readonly',
|
||||
},
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
project: './tsconfig.json',
|
||||
},
|
||||
rules: {
|
||||
'no-console': 0,
|
||||
'no-nested-ternary': 'off',
|
||||
'no-unused-expressions': 'off',
|
||||
'@typescript-eslint/no-unused-expressions': [
|
||||
'warn',
|
||||
{ allowShortCircuit: true, allowTernary: true },
|
||||
],
|
||||
'@typescript-eslint/ban-ts-comment': 0,
|
||||
'react-hooks/exhaustive-deps': 1,
|
||||
'import/no-cycle': 'off',
|
||||
'react/jsx-props-no-spreading': 'off',
|
||||
'react/require-default-props': 0,
|
||||
'import/prefer-default-export': 'off',
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'no-prototype-builtins': 'off',
|
||||
'no-plusplus': 'off',
|
||||
'@typescript-eslint/no-use-before-define': 'off',
|
||||
'@typescript-eslint/no-non-null-asserted-optional-chain': 0,
|
||||
'@typescript-eslint/no-non-null-assertion': 0,
|
||||
'react/prop-types': 'off',
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/self-closing-comp': 0,
|
||||
'react/no-array-index-key': 0,
|
||||
'@typescript-eslint/camelcase': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 0,
|
||||
'@typescript-eslint/explicit-module-boundary-types': 0,
|
||||
'@typescript-eslint/no-explicit-any': 0,
|
||||
'linebreak-style': 'off',
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
endOfLine: 'auto',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# development
|
||||
/codegen-support.ts
|
||||
/codegen-main.yml
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"arrowParens": "always",
|
||||
"useTabs": false,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using vite"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Astrobuild</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"name": "astrobuild",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.7.10",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/user-event": "^14.4.3",
|
||||
"@types/jest": "^29.5.0",
|
||||
"@types/jwt-decode": "^3.1.0",
|
||||
"@types/node": "^18.15.7",
|
||||
"@types/react": "^18.0.29",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"formik": "^2.2.9",
|
||||
"graphql": "^16.6.0",
|
||||
"graphql-ws": "^5.13.1",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-elastic-carousel": "^0.11.5",
|
||||
"react-router-dom": "^6.9.0",
|
||||
"react-to-print": "^2.14.12",
|
||||
"reactflow": "^11.7.0",
|
||||
"sort-by": "^1.2.0",
|
||||
"styled-components": "^5.3.10",
|
||||
"typescript": "^5.0.2",
|
||||
"vite-plugin-svgr": "^2.4.0",
|
||||
"web-vitals": "^3.3.0",
|
||||
"yup": "^1.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"generate:main": "graphql-codegen --config codegen-main.yml",
|
||||
"lint": "yarn run eslint src --ext .ts,.tsx",
|
||||
"fix": "yarn lint --fix",
|
||||
"generate:support": "graphql-codegen --config codegen-support.ts"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "3.3.1",
|
||||
"@graphql-codegen/client-preset": "3.0.1",
|
||||
"@graphql-codegen/introspection": "3.0.1",
|
||||
"@graphql-codegen/typescript": "^3.0.2",
|
||||
"@graphql-codegen/typescript-operations": "^3.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.56.0",
|
||||
"@typescript-eslint/parser": "^5.56.0",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"eslint-config-airbnb": "19.0.4",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-import": "2.27.5",
|
||||
"eslint-plugin-jest": "^27.2.1",
|
||||
"eslint-plugin-jsx-a11y": "6.7.1",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-react": "7.32.2",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"prettier": "^2.8.7",
|
||||
"vite": "^4.2.1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
+352
@@ -0,0 +1,352 @@
|
||||
import jwtDecode from 'jwt-decode';
|
||||
import { useEffect } from 'react';
|
||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { useLazyQuery, useReactiveVar } from '@apollo/client';
|
||||
import { Protected, Public, Navbar, Sidebar, Spinner } from './components';
|
||||
import { roleVar, tokenVar, userVar } from './graphql/state';
|
||||
import {
|
||||
AdditionalInfo,
|
||||
ForgotPassword,
|
||||
Login,
|
||||
RecoverAccount,
|
||||
Signup,
|
||||
Project,
|
||||
Users,
|
||||
Settings,
|
||||
UserSettings,
|
||||
CreateUser,
|
||||
Template,
|
||||
Feature,
|
||||
Category,
|
||||
Prototype,
|
||||
AddCategory,
|
||||
AddFeature,
|
||||
AddTemplate,
|
||||
CategorySettings,
|
||||
FeatureSettings,
|
||||
TemplateSettings,
|
||||
AddProject,
|
||||
UpdateProject,
|
||||
Support,
|
||||
} from './pages';
|
||||
import { GetUserByIdQuery, GetUserByIdQueryVariables } from './graphql/types';
|
||||
import { GET_USER_BY_ID } from './graphql/auth.api';
|
||||
|
||||
const App = () => {
|
||||
const token = useReactiveVar(tokenVar);
|
||||
const role = useReactiveVar(roleVar);
|
||||
const currentUser = useReactiveVar(userVar);
|
||||
|
||||
const [getUserById, { loading }] = useLazyQuery<
|
||||
GetUserByIdQuery,
|
||||
GetUserByIdQueryVariables
|
||||
>(GET_USER_BY_ID, {
|
||||
onCompleted({ getUserById: user }) {
|
||||
userVar(user);
|
||||
switch (user.role) {
|
||||
case 'Client':
|
||||
roleVar('client');
|
||||
break;
|
||||
case 'ProductOwner':
|
||||
roleVar('productOwner');
|
||||
break;
|
||||
case 'Developer':
|
||||
roleVar('developer');
|
||||
break;
|
||||
case 'Admin':
|
||||
roleVar('admin');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const localStorageToken = localStorage.getItem('token');
|
||||
|
||||
if (localStorageToken) {
|
||||
const { id } = jwtDecode<{ id: string; role: string }>(localStorageToken);
|
||||
|
||||
getUserById({ variables: { id } });
|
||||
tokenVar(localStorageToken);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return !loading ? (
|
||||
<>
|
||||
{token && currentUser?.firstName && (
|
||||
<>
|
||||
<Navbar />
|
||||
<Sidebar />
|
||||
</>
|
||||
)}
|
||||
<Routes>
|
||||
<Route
|
||||
path='/'
|
||||
element={
|
||||
<Protected>
|
||||
{role !== 'admin' ? (
|
||||
<Navigate to='/project' />
|
||||
) : (
|
||||
<Navigate to='/clients' />
|
||||
)}
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/project'
|
||||
element={
|
||||
<Protected>
|
||||
<Project />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/project/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<Project />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/add-project'
|
||||
element={
|
||||
<Protected>
|
||||
<AddProject />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/project-settings/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<UpdateProject />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/support/:projectId'
|
||||
element={
|
||||
<Protected>
|
||||
<Support />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/support/:projectId/:threadId'
|
||||
element={
|
||||
<Protected>
|
||||
<Support />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/template'
|
||||
element={
|
||||
<Protected>
|
||||
<Template />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/template/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<Template />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/add-template'
|
||||
element={
|
||||
<Protected>
|
||||
<AddTemplate />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/template-settings/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<TemplateSettings />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/add-template'
|
||||
element={
|
||||
<Protected>
|
||||
<AddTemplate />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/feature'
|
||||
element={
|
||||
<Protected>
|
||||
<Feature />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/feature/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<Feature />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/add-feature'
|
||||
element={
|
||||
<Protected>
|
||||
<AddFeature />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/feature-settings/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<FeatureSettings />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/category'
|
||||
element={
|
||||
<Protected>
|
||||
<Category />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/category/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<Category />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/add-category'
|
||||
element={
|
||||
<Protected>
|
||||
<AddCategory />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/category-settings/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<CategorySettings />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/prototype/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<Prototype />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/clients'
|
||||
element={
|
||||
<Protected>
|
||||
<Users />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/product-owners'
|
||||
element={
|
||||
<Protected>
|
||||
<Users />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/developers'
|
||||
element={
|
||||
<Protected>
|
||||
<Users />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/create-user/:role'
|
||||
element={
|
||||
<Protected>
|
||||
<CreateUser />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/user-settings/:id'
|
||||
element={
|
||||
<Protected>
|
||||
<UserSettings />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/settings'
|
||||
element={
|
||||
<Protected>
|
||||
<Settings />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/login'
|
||||
element={
|
||||
<Public>
|
||||
<Login />
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/signup'
|
||||
element={
|
||||
<Public>
|
||||
<Signup />
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/additional-info'
|
||||
element={
|
||||
<Protected>
|
||||
<AdditionalInfo />
|
||||
</Protected>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/forgot-password'
|
||||
element={
|
||||
<Public>
|
||||
<ForgotPassword />
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='/recover-account'
|
||||
element={
|
||||
<Public>
|
||||
<RecoverAccount />
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</>
|
||||
) : (
|
||||
<Spinner fullScreen color={role || 'client'} />
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,20 @@
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
const GlobalStyles = createGlobalStyle`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
`;
|
||||
|
||||
export default GlobalStyles;
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.95215 1V14.8568" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1 7.92871H16.9048" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 323 B |
@@ -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 8H1" stroke="#5F6CAD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 15L1 8L8 1" stroke="#5F6CAD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 311 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5.94238L10.8824 5.94238" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.94122 1.00037L10.8824 5.94159L5.94122 10.8828" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 365 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 8.5008L8.90834 15.635C8.03956 16.509 6.86124 17 5.6326 17C4.40396 17 3.22564 16.509 2.35686 15.635C1.48808 14.761 1 13.5756 1 12.3396C1 11.1036 1.48808 9.9182 2.35686 9.04421L9.44851 1.91C10.0277 1.32734 10.8132 1 11.6323 1C12.4514 1 13.237 1.32734 13.8162 1.91C14.3954 2.49266 14.7207 3.28292 14.7207 4.10693C14.7207 4.93094 14.3954 5.7212 13.8162 6.30386L6.7168 13.4381C6.4272 13.7294 6.03443 13.8931 5.62488 13.8931C5.21534 13.8931 4.82256 13.7294 4.53297 13.4381C4.24338 13.1467 4.08068 12.7516 4.08068 12.3396C4.08068 11.9276 4.24338 11.5325 4.53297 11.2411L11.0845 4.6581" stroke="#20063B" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 761 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 1H3C1.89543 1 1 1.89543 1 3V7C1 8.10457 1.89543 9 3 9H19C20.1046 9 21 8.10457 21 7V3C21 1.89543 20.1046 1 19 1Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 12H3C1.89543 12 1 12.8954 1 14V18C1 19.1046 1.89543 20 3 20H19C20.1046 20 21 19.1046 21 18V14C21 12.8954 20.1046 12 19 12Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 5H5.01" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 16H5.01" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 663 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 325 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 1L3.8125 7L1 4.27273" stroke="#FFF4F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 219 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L11 11L21 1" stroke="#20063B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1 1L11 11L21 1" stroke="white" stroke-opacity="0.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 270 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 270 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
|
After Width: | Height: | Size: 299 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5H3H19" stroke="#F03738" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 5V3C6 2.46957 6.21071 1.96086 6.58579 1.58579C6.96086 1.21071 7.46957 1 8 1H12C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V5M17 5V19C17 19.5304 16.7893 20.0391 16.4142 20.4142C16.0391 20.7893 15.5304 21 15 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5H17Z" stroke="#F03738" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 623 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 18L18 11L21 14L14 21L11 18Z" stroke="#C2C9D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17 12L15.5 4.5L1 1L4.5 15.5L12 17L17 12Z" stroke="#C2C9D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1 1L8.586 8.586" stroke="#C2C9D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12Z" stroke="#C2C9D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 680 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 1.82843C16.2626 1.56578 16.5744 1.35744 16.9176 1.2153C17.2608 1.07316 17.6286 1 18 1C18.3714 1 18.7392 1.07316 19.0824 1.2153C19.4256 1.35744 19.7374 1.56578 20 1.82843C20.2626 2.09107 20.471 2.40287 20.6131 2.74603C20.7553 3.0892 20.8284 3.45699 20.8284 3.82843C20.8284 4.19986 20.7553 4.56766 20.6131 4.91082C20.471 5.25398 20.2626 5.56578 20 5.82843L6.5 19.3284L1 20.8284L2.5 15.3284L16 1.82843Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 598 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.2405 12.852V6.07842C16.2402 5.78147 16.1618 5.48981 16.0132 5.23271C15.8646 4.97562 15.651 4.76212 15.3938 4.61364L9.46693 1.22687C9.20951 1.07824 8.91749 1 8.62024 1C8.32299 1 8.03097 1.07824 7.77355 1.22687L1.84669 4.61364C1.58952 4.76212 1.37592 4.97562 1.2273 5.23271C1.07869 5.48981 1.0003 5.78147 1 6.07842V12.852C1.0003 13.1489 1.07869 13.4406 1.2273 13.6977C1.37592 13.9548 1.58952 14.1683 1.84669 14.3167L7.77355 17.7035C8.03097 17.8521 8.32299 17.9304 8.62024 17.9304C8.91749 17.9304 9.20951 17.8521 9.46693 17.7035L15.3938 14.3167C15.651 14.1683 15.8646 13.9548 16.0132 13.6977C16.1618 13.4406 16.2402 13.1489 16.2405 12.852Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.22852 5.19781L8.62015 9.47362L16.0118 5.19781" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.62012 17.9999V9.46524" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 1H3C1.89543 1 1 1.89543 1 3V17C1 18.1046 1.89543 19 3 19H17C18.1046 19 19 18.1046 19 17V3C19 1.89543 18.1046 1 17 1Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1 7H19" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7 19V7" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 462 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 307 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#ED7D3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 12.2V9" stroke="#ED7D3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 5.7998H9.008" stroke="#ED7D3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 517 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.9997 11.7554C22.9997 10.8098 22.9214 10.1198 22.752 9.4043H11.7344V13.672H18.2014C18.0711 14.7326 17.367 16.3298 15.8024 17.4031L15.7804 17.546L19.264 20.1907L19.5053 20.2143C21.7219 18.2082 22.9997 15.2565 22.9997 11.7554Z" fill="#4285F4"/>
|
||||
<path d="M11.7345 23C14.9028 23 17.5627 21.9777 19.5055 20.2144L15.8025 17.4032C14.8116 18.0805 13.4816 18.5532 11.7345 18.5532C8.63134 18.5532 5.99757 16.5472 5.0587 13.7744L4.92109 13.7859L1.29884 16.5331L1.25146 16.6621C3.18115 20.4188 7.14488 23 11.7345 23Z" fill="#34A853"/>
|
||||
<path d="M5.05891 13.7743C4.81118 13.0588 4.66781 12.2921 4.66781 11.4999C4.66781 10.7076 4.81118 9.94101 5.04587 9.22547L5.03931 9.07307L1.37167 6.28174L1.25167 6.33767C0.456354 7.89657 0 9.64714 0 11.4999C0 13.3527 0.456354 15.1031 1.25167 16.662L5.05891 13.7743Z" fill="#FBBC05"/>
|
||||
<path d="M11.7345 4.44664C13.938 4.44664 15.4243 5.37941 16.2719 6.15891L19.5837 2.99C17.5497 1.13723 14.9028 0 11.7345 0C7.14488 0 3.18115 2.58109 1.25146 6.33773L5.04567 9.22555C5.99757 6.45278 8.63134 4.44664 11.7345 4.44664Z" fill="#EB4335"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg width="100" height="22" viewBox="0 0 100 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path className='logo-icon' d="M9.28111 0L0 5.42704V16.2905L9.28111 21.7175L18.5621 16.2905V5.42704L9.28111 0ZM16.9156 15.33L9.28111 19.7966L1.6465 15.33V6.3875L9.28111 1.92091L16.9156 6.3875V15.33Z" fill="#5F6CAD"/>
|
||||
<path className='logo-icon' d="M9.28093 4.20337L3.43726 7.7085V14.7096L9.28093 18.2147L15.1245 14.7096V7.7085L9.28093 4.20337ZM13.5421 13.7645L10.0677 15.8474L9.28093 16.3245L8.49409 15.8474L5.01973 13.7645V8.6536L5.80654 8.17646L9.28093 6.09357L12.7553 8.17646L13.5421 8.6536V13.7645Z" fill="#5F6CAD"/>
|
||||
<path className='logo-icon' d="M12.8911 8.81615L12.2576 8.49555L12.0765 8.40649L11.8956 8.49555L9.29098 9.83141L6.6864 8.49555L6.50538 8.40649L6.32437 8.49555L5.68077 8.81615L5.49976 8.90521V9.09222V9.74231V9.92932L5.68077 10.0184L8.28535 11.3542V14.0259V14.2129L8.46636 14.3019L9.09995 14.6226L9.28091 14.7116L9.46196 14.6226L10.0955 14.3019L10.2765 14.2129V14.0259V11.3542L12.8811 10.0184L13.0621 9.92932V9.74231V9.09222V8.90521L12.8911 8.81615ZM5.86178 9.09222L6.49533 8.77162L5.86178 9.09222ZM12.7101 9.09222L12.0765 8.77162L12.7101 9.09222Z" fill="#5F6CAD"/>
|
||||
<path d="M26.8118 12.0504C26.8118 11.2341 26.9608 10.5175 27.2589 9.90055C27.5662 9.2836 27.9807 8.80902 28.5023 8.47682C29.0239 8.14462 29.6061 7.97852 30.2488 7.97852C30.7983 7.97852 31.278 8.09241 31.6878 8.32021C32.107 8.54801 32.4283 8.84699 32.6519 9.21716V8.09241H35.041V16.0368H32.6519V14.9121C32.419 15.2822 32.093 15.5812 31.6739 15.809C31.264 16.0368 30.7843 16.1507 30.2348 16.1507C29.6014 16.1507 29.0239 15.9846 28.5023 15.6524C27.9807 15.3107 27.5662 14.8314 27.2589 14.2144C26.9608 13.588 26.8118 12.8666 26.8118 12.0504ZM32.6519 12.0646C32.6519 11.4572 32.4842 10.9778 32.1489 10.6266C31.8229 10.2755 31.4224 10.0999 30.9473 10.0999C30.4723 10.0999 30.0671 10.2755 29.7318 10.6266C29.4058 10.9683 29.2428 11.4429 29.2428 12.0504C29.2428 12.6578 29.4058 13.1419 29.7318 13.5026C30.0671 13.8538 30.4723 14.0294 30.9473 14.0294C31.4224 14.0294 31.8229 13.8538 32.1489 13.5026C32.4842 13.1514 32.6519 12.6721 32.6519 12.0646Z" fill="black"/>
|
||||
<path d="M39.941 16.1507C39.2611 16.1507 38.6556 16.0321 38.1247 15.7948C37.5938 15.5575 37.1747 15.2348 36.8673 14.8266C36.5599 14.409 36.3876 13.9439 36.3503 13.4314H38.7115C38.7395 13.7066 38.8652 13.9297 39.0888 14.1005C39.3123 14.2714 39.5871 14.3568 39.9131 14.3568C40.2111 14.3568 40.4393 14.2999 40.5977 14.186C40.7653 14.0626 40.8492 13.906 40.8492 13.7161C40.8492 13.4883 40.7327 13.3222 40.4999 13.2178C40.267 13.1039 39.8898 12.9805 39.3682 12.8477C38.8093 12.7148 38.3436 12.5772 37.971 12.4348C37.5985 12.2829 37.2771 12.0504 37.007 11.7372C36.7369 11.4144 36.6018 10.9826 36.6018 10.4416C36.6018 9.98597 36.7229 9.57309 36.9651 9.20292C37.2166 8.82326 37.5798 8.52428 38.0549 8.30597C38.5392 8.08767 39.112 7.97852 39.7734 7.97852C40.7514 7.97852 41.5198 8.2253 42.0787 8.71885C42.6468 9.21241 42.9728 9.86733 43.0567 10.6836H40.8492C40.8119 10.4083 40.6908 10.19 40.4859 10.0287C40.2903 9.86733 40.0295 9.78665 39.7035 9.78665C39.4241 9.78665 39.2098 9.8436 39.0608 9.9575C38.9118 10.0619 38.8373 10.209 38.8373 10.3989C38.8373 10.6266 38.9537 10.7975 39.1866 10.9114C39.4287 11.0253 39.8013 11.1392 40.3043 11.2531C40.8818 11.405 41.3521 11.5568 41.7154 11.7087C42.0787 11.8511 42.3953 12.0883 42.6655 12.4205C42.9449 12.7433 43.0893 13.1799 43.0986 13.7304C43.0986 14.1955 42.9682 14.6131 42.7074 14.9833C42.4559 15.3439 42.088 15.6287 41.6036 15.8375C41.1286 16.0463 40.5744 16.1507 39.941 16.1507Z" fill="black"/>
|
||||
<path d="M48.9055 13.9725V16.0369H47.69C46.8238 16.0369 46.1485 15.8234 45.6641 15.3962C45.1798 14.9596 44.9376 14.2525 44.9376 13.2749V10.1142H43.9875V8.09252H44.9376V6.15625H47.3267V8.09252H48.8915V10.1142H47.3267V13.3034C47.3267 13.5406 47.3826 13.7115 47.4944 13.8159C47.6062 13.9203 47.7924 13.9725 48.0532 13.9725H48.9055Z" fill="black"/>
|
||||
<path d="M52.6252 9.41633C52.9046 8.97972 53.2539 8.63802 53.6731 8.39124C54.0922 8.13497 54.5579 8.00684 55.0702 8.00684V10.5838H54.4136C53.8174 10.5838 53.3704 10.7167 53.0723 10.9824C52.7742 11.2387 52.6252 11.6943 52.6252 12.3492V16.0367H50.2361V8.09226H52.6252V9.41633Z" fill="black"/>
|
||||
<path d="M59.7611 16.1507C58.9973 16.1507 58.3081 15.9846 57.6933 15.6524C57.0879 15.3202 56.6082 14.8456 56.2543 14.2287C55.9096 13.6117 55.7373 12.8904 55.7373 12.0646C55.7373 11.2483 55.9143 10.5317 56.2682 9.91479C56.6222 9.28835 57.1065 8.80902 57.7213 8.47682C58.336 8.14462 59.0253 7.97852 59.789 7.97852C60.5528 7.97852 61.2421 8.14462 61.8568 8.47682C62.4716 8.80902 62.9559 9.28835 63.3099 9.91479C63.6638 10.5317 63.8408 11.2483 63.8408 12.0646C63.8408 12.8809 63.6591 13.6022 63.2959 14.2287C62.9419 14.8456 62.4529 15.3202 61.8289 15.6524C61.2141 15.9846 60.5249 16.1507 59.7611 16.1507ZM59.7611 14.0436C60.2175 14.0436 60.604 13.8727 60.9207 13.5311C61.2467 13.1894 61.4097 12.7005 61.4097 12.0646C61.4097 11.4287 61.2514 10.9399 60.9347 10.5982C60.6273 10.2565 60.2454 10.0856 59.789 10.0856C59.3233 10.0856 58.9368 10.2565 58.6294 10.5982C58.322 10.9304 58.1683 11.4192 58.1683 12.0646C58.1683 12.7005 58.3174 13.1894 58.6154 13.5311C58.9228 13.8727 59.3047 14.0436 59.7611 14.0436Z" fill="black"/>
|
||||
<path d="M67.4975 9.21739C67.7211 8.84722 68.0424 8.54824 68.4616 8.32044C68.8807 8.09265 69.3604 7.97875 69.9006 7.97875C70.5433 7.97875 71.1255 8.14485 71.6471 8.47705C72.1687 8.80926 72.5785 9.28383 72.8766 9.90078C73.1839 10.5177 73.3376 11.2343 73.3376 12.0506C73.3376 12.8669 73.1839 13.5882 72.8766 14.2147C72.5785 14.8316 72.1687 15.3109 71.6471 15.6526C71.1255 15.9848 70.5433 16.1509 69.9006 16.1509C69.3511 16.1509 68.8714 16.0418 68.4616 15.8235C68.0517 15.5957 67.7304 15.2967 67.4975 14.9265V16.037H65.1084V5.50146H67.4975V9.21739ZM70.9066 12.0506C70.9066 11.4432 70.7389 10.9686 70.4036 10.6269C70.0776 10.2757 69.6724 10.1001 69.1881 10.1001C68.713 10.1001 68.3079 10.2757 67.9726 10.6269C67.6466 10.9781 67.4836 11.4574 67.4836 12.0648C67.4836 12.6723 67.6466 13.1516 67.9726 13.5028C68.3079 13.854 68.713 14.0296 69.1881 14.0296C69.6631 14.0296 70.0683 13.854 70.4036 13.5028C70.7389 13.1421 70.9066 12.6581 70.9066 12.0506Z" fill="black"/>
|
||||
<path d="M82.289 8.09229V16.0367H79.9V14.9546C79.6578 15.3058 79.3272 15.5906 78.908 15.8089C78.4982 16.0177 78.0418 16.1221 77.5388 16.1221C76.9427 16.1221 76.4165 15.9892 75.9601 15.7235C75.5037 15.4482 75.1497 15.0543 74.8982 14.5418C74.6467 14.0292 74.521 13.4265 74.521 12.7336V8.09229H76.8961V12.4062C76.8961 12.9377 77.0312 13.3506 77.3013 13.6448C77.5714 13.9391 77.9347 14.0862 78.3911 14.0862C78.8568 14.0862 79.2247 13.9391 79.4948 13.6448C79.765 13.3506 79.9 12.9377 79.9 12.4062V8.09229H82.289Z" fill="black"/>
|
||||
<path d="M85.2066 7.26671C84.7874 7.26671 84.4428 7.14332 84.1727 6.89654C83.9119 6.64027 83.7815 6.32705 83.7815 5.95688C83.7815 5.57722 83.9119 5.264 84.1727 5.01722C84.4428 4.76095 84.7874 4.63281 85.2066 4.63281C85.6164 4.63281 85.9517 4.76095 86.2125 5.01722C86.4826 5.264 86.6177 5.57722 86.6177 5.95688C86.6177 6.32705 86.4826 6.64027 86.2125 6.89654C85.9517 7.14332 85.6164 7.26671 85.2066 7.26671ZM86.3942 8.09247V16.0369H84.005V8.09247H86.3942Z" fill="black"/>
|
||||
<path d="M90.5149 5.50146V16.037H88.1257V5.50146H90.5149Z" fill="black"/>
|
||||
<path d="M91.7708 12.0506C91.7708 11.2343 91.9198 10.5177 92.2178 9.90078C92.5252 9.28383 92.9397 8.80926 93.4613 8.47705C93.9829 8.14485 94.5651 7.97875 95.2077 7.97875C95.72 7.97875 96.1857 8.0879 96.6049 8.30621C97.0333 8.52451 97.3687 8.81875 97.6108 9.18892V5.50146H100V16.037H97.6108V14.8981C97.3873 15.2777 97.0659 15.5815 96.6468 15.8092C96.237 16.037 95.7573 16.1509 95.2077 16.1509C94.5651 16.1509 93.9829 15.9848 93.4613 15.6526C92.9397 15.3109 92.5252 14.8316 92.2178 14.2147C91.9198 13.5882 91.7708 12.8669 91.7708 12.0506ZM97.6108 12.0648C97.6108 11.4574 97.4432 10.9781 97.1079 10.6269C96.7819 10.2757 96.3813 10.1001 95.9063 10.1001C95.4313 10.1001 95.0261 10.2757 94.6908 10.6269C94.3648 10.9686 94.2018 11.4432 94.2018 12.0506C94.2018 12.6581 94.3648 13.1421 94.6908 13.5028C95.0261 13.854 95.4313 14.0296 95.9063 14.0296C96.3813 14.0296 96.7819 13.854 97.1079 13.5028C97.4432 13.1516 97.6108 12.6723 97.6108 12.0648Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H7" stroke="#F03738" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 15L19 10L14 5" stroke="#F03738" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 10H7" stroke="#F03738" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 9.50001C19.0034 10.8199 18.695 12.1219 18.1 13.3C17.3944 14.7118 16.3097 15.8992 14.9674 16.7293C13.6251 17.5594 12.0782 17.9994 10.5 18C9.18012 18.0034 7.8781 17.6951 6.69999 17.1L1 19L2.9 13.3C2.30493 12.1219 1.99656 10.8199 2 9.50001C2.00061 7.92177 2.44061 6.37487 3.27072 5.03257C4.10082 3.69027 5.28825 2.60559 6.69999 1.90003C7.8781 1.30496 9.18012 0.996587 10.5 1.00003H11C13.0843 1.11502 15.053 1.99479 16.5291 3.47088C18.0052 4.94698 18.885 6.91567 19 9.00002V9.50001Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||||
|
After Width: | Height: | Size: 282 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="15" height="24" viewBox="0 0 15 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.08008 1V23" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.1467 5H4.54667C3.60603 5 2.70392 5.36875 2.03879 6.02513C1.37367 6.6815 1 7.57174 1 8.5C1 9.42826 1.37367 10.3185 2.03879 10.9749C2.70392 11.6313 3.60603 12 4.54667 12H9.61333C10.554 12 11.4561 12.3687 12.1212 13.0251C12.7863 13.6815 13.16 14.5717 13.16 15.5C13.16 16.4283 12.7863 17.3185 12.1212 17.9749C11.4561 18.6313 10.554 19 9.61333 19H1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 647 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.8889 20.0001V17.889C17.8889 16.7692 17.444 15.6952 16.6522 14.9034C15.8604 14.1116 14.7865 13.6667 13.6667 13.6667H5.22222C4.10242 13.6667 3.02848 14.1116 2.23666 14.9034C1.44484 15.6952 1 16.7692 1 17.889V20.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.44445 9.44444C11.7763 9.44444 13.6667 7.55409 13.6667 5.22222C13.6667 2.89035 11.7763 1 9.44445 1C7.11258 1 5.22223 2.89035 5.22223 5.22222C5.22223 7.55409 7.11258 9.44444 9.44445 9.44444Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 695 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#20063B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="white" stroke-opacity="0.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.9999 18.9999L14.6499 14.6499" stroke="#20063B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.9999 18.9999L14.6499 14.6499" stroke="white" stroke-opacity="0.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 799 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 21C9 21 17 17 17 11V4L9 1L1 4V11C1 17 9 21 9 21Z" stroke="#5F6CAD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.9999 1L8.6499 10.35" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 1L12.05 18L8.65 10.35L1 6.95L18 1Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 314 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15V15Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg width="18" height="23" viewBox="0 0 18 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.9998 1H2.99996C2.46954 1 1.96084 1.2119 1.58577 1.58907C1.21071 1.96625 1 2.47781 1 3.01122V19.101C1 19.6344 1.21071 20.146 1.58577 20.5231C1.96084 20.9003 2.46954 21.1122 2.99996 21.1122H14.9997C15.5301 21.1122 16.0388 20.9003 16.4139 20.5231C16.789 20.146 16.9997 19.6344 16.9997 19.101V7.03366L10.9998 1Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 1V7.03366H16.9999" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.9998 12.0617H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.9998 16.0842H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.99996 8.03928H5.99998H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 957 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 12.689V16.3394C19 16.8234 18.7893 17.2877 18.4142 17.63C18.0391 17.9723 17.5304 18.1646 17 18.1646H3C2.46957 18.1646 1.96086 17.9723 1.58579 17.63C1.21071 17.2877 1 16.8234 1 16.3394V12.689" stroke="#ED7D3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 12.689V16.3394C19 16.8234 18.7893 17.2877 18.4142 17.63C18.0391 17.9723 17.5304 18.1646 17 18.1646H3C2.46957 18.1646 1.96086 17.9723 1.58579 17.63C1.21071 17.2877 1 16.8234 1 16.3394V12.689" stroke="white" stroke-opacity="0.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 6.30078L10 1.73779L5 6.30078" stroke="#ED7D3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 6.30078L10 1.73779L5 6.30078" stroke="white" stroke-opacity="0.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 1.73779V12.6889" stroke="#ED7D3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 1.73779V12.6889" stroke="white" stroke-opacity="0.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 45 KiB |
@@ -0,0 +1,94 @@
|
||||
<svg width="565px" height="465px" viewBox="0 0 567 469" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path opacity="0.18" d="M566.464 339.134C565.357 358.52 563.11 378.207 555.295 395.967C541.023 428.454 509.175 450.906 475.064 460.791C466.391 463.276 457.545 465.113 448.6 466.286C422.471 469.822 395.588 468.28 369.325 465.047C346.785 462.265 324.379 458.244 301.873 455.161C289.194 453.486 276.465 451.978 263.703 451.224C239.268 449.8 214.783 450.872 190.365 452.631C189.224 452.631 188.067 452.782 187.011 452.883C164.823 454.558 142.283 456.686 120.33 454.005C115.251 453.409 110.211 452.514 105.237 451.324C102.676 450.721 100.144 450.018 97.6396 449.213C72.3997 441.221 50.2624 424.45 30.7916 407.142C10.7507 389.332 1.3591 361.72 0.45348 335.482C-0.619844 304.586 -4.81251 252.998 100.105 168.386C122.142 150.526 120.28 115.525 130.762 89.153C145.855 51.3374 176.78 19.0845 215.638 6.80321C232.409 1.47519 250.236 -0.116518 267.862 0.101294C290.27 0.286219 312.572 3.20073 334.274 8.78027C375.261 19.252 423.896 40.5138 454.805 73.1689C460.15 78.7712 464.977 84.8443 469.228 91.3143C495.558 131.66 492.589 184.153 519.691 224.247C531.43 241.555 548.201 255.327 557.525 274.042C567.47 293.813 567.739 316.985 566.464 339.134Z" fill="white"/>
|
||||
<path d="M190.364 452.631C189.224 452.631 188.066 452.781 187.01 452.882C164.822 454.557 142.282 456.685 120.33 454.004C115.25 453.408 110.21 452.513 105.236 451.324C102.676 450.721 100.143 450.017 97.6389 449.213C95.3916 377.737 156.823 283.072 164.302 271.712L187.329 272.684L260.097 275.75C194.305 338.145 188.133 413.19 190.364 452.631Z" fill="#5F6CAD"/>
|
||||
<path d="M190.364 452.631C189.224 452.631 188.066 452.781 187.01 452.882C164.822 454.557 142.282 456.685 120.33 454.004C115.25 453.408 110.21 452.513 105.236 451.324C102.676 450.721 100.143 450.017 97.6389 449.213C95.3916 377.737 156.823 283.072 164.302 271.712L187.329 272.684L260.097 275.75C194.305 338.145 188.133 413.19 190.364 452.631Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M189.458 270.606C188.721 271.293 187.999 271.98 187.295 272.684C119.81 338.363 117.059 417.194 120.246 453.971C115.166 453.375 110.126 452.48 105.152 451.29C102.592 450.687 100.059 449.983 97.5551 449.179C95.3916 377.737 156.823 283.072 164.302 271.712L165.057 270.606H189.458Z" fill="#5F6CAD"/>
|
||||
<path d="M357.283 118.875C354.532 123.901 355.388 129.967 354.18 135.512C353.821 137.082 353.362 138.626 352.805 140.137C350.692 146.202 348.025 152.435 342.944 156.372C341.379 157.276 340.087 158.584 339.204 160.159C338.948 160.975 338.892 161.841 339.041 162.684C339.19 163.527 339.539 164.321 340.059 165.001C341.126 166.309 342.394 167.44 343.816 168.352C343.531 171.25 343.614 174.685 343.313 177.567C342.659 183.951 342.239 191.138 346.465 195.997C349.82 199.734 354.985 201.024 359.882 201.593C364.779 202.163 369.944 202.465 374.338 204.944C383.596 210.088 386.078 223.157 395.285 228.401C398.027 229.85 401.033 230.733 404.123 230.998C410.646 231.922 417.292 230.699 423.057 227.513C428.675 224.162 447.056 218.7 442.075 214.461C436.642 209.853 428.306 196.785 424.416 189.831C420.084 182.102 417.139 173.676 415.712 164.934C414.538 157.646 414.42 150.24 413.33 142.952C412.24 135.663 409.976 128.291 405.297 122.628C398.237 114.251 386.698 110.9 375.73 110.28C372.668 109.972 369.575 110.199 366.59 110.95C365.095 111.328 363.693 112.009 362.473 112.952C361.252 113.894 360.239 115.078 359.496 116.429" fill="#F9BA9F"/>
|
||||
<path d="M465.353 153.122C464.917 156.995 463.846 160.771 462.183 164.297C461.227 166.674 459.859 168.863 458.142 170.765C454.787 173.747 454.687 178.79 452.624 182.728C451.215 185.243 449.261 187.412 446.905 189.078C442.191 192.554 436.693 194.817 430.896 195.667C425.099 196.518 419.181 195.929 413.666 193.953L411.989 193.317C407.062 191.019 402.391 188.211 398.052 184.939C397.78 184.76 397.56 184.511 397.415 184.219C397.13 183.515 397.734 182.811 398.27 182.258C400.042 180.441 401.437 178.291 402.375 175.934C403.314 173.576 403.776 171.056 403.737 168.519C403.823 166.35 403.153 164.219 401.842 162.488C401.163 161.65 400.218 161.068 399.164 160.836C398.11 160.605 397.008 160.738 396.04 161.214C394.363 162.169 392.686 164.448 391.243 163.225C390.82 162.763 390.56 162.174 390.505 161.549C390.024 157.82 389.037 154.173 387.571 150.709C385.598 147.364 383.171 144.308 380.359 141.628C373.823 134.432 368.571 126.169 364.829 117.2C364.605 116.392 364.107 115.687 363.421 115.206C362.778 114.924 362.068 114.831 361.375 114.938C358.317 115.117 355.25 115.061 352.201 114.77C350.646 114.769 349.135 114.25 347.908 113.296C345.828 111.302 346.767 107.75 348.445 105.421C352.251 100.076 358.608 97.2781 364.662 94.7481C363.102 93.7261 360.637 91.481 359.077 90.4589C358.538 90.1776 358.103 89.7314 357.836 89.1855C357.501 88.1468 358.507 87.1415 359.513 86.6388C361.267 85.7508 363.254 85.4288 365.198 85.7173C364.913 81.093 359.949 76.8038 361.844 72.5816C363.136 69.8003 366.876 69.0798 369.861 69.817C372.846 70.5542 375.429 72.3805 378.33 73.3523C378.984 71.325 377.173 69.2138 377.508 67.1027C377.688 66.3465 378.078 65.6562 378.633 65.1109C379.187 64.5657 379.884 64.1876 380.644 64.0199C382.191 63.7156 383.789 63.8078 385.29 64.2879C388.802 65.2276 392.058 66.9456 394.815 69.3144C396.427 71.0159 398.247 72.5076 400.232 73.7544C404.157 75.7817 408.869 74.6592 413.28 74.6592C418.48 74.8682 423.596 76.0325 428.374 78.0939C431.544 79.2828 434.646 80.6477 437.665 82.182C441.69 84.1837 445.449 86.683 448.851 89.6212C457.437 97.1608 462.804 107.901 465.168 119.059C467.276 130.31 467.338 141.849 465.353 153.122Z" fill="black"/>
|
||||
<path d="M74.7805 99.5066L83.3336 90.5596L286.611 99.5066L333.871 266.786L325.318 275.733H113.068L74.7805 99.5066Z" fill="#5F6CAD"/>
|
||||
<path d="M74.7805 99.5066L83.3336 90.5596L286.611 99.5066L333.871 266.786L325.318 275.733H113.068L74.7805 99.5066Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M83.3335 90.5596H295.164L333.871 266.786H121.621L83.3335 90.5596Z" fill="#5F6CAD"/>
|
||||
<path d="M91.8866 96.5747H289.261L325.318 260.772H127.558L91.8866 96.5747Z" fill="white"/>
|
||||
<path d="M245.942 328.411C245.803 329.595 245.369 330.726 244.681 331.7C243.992 332.675 243.071 333.462 242.001 333.99C238.915 335.8 235.142 335.9 231.553 335.95C229.064 336.17 226.557 335.844 224.207 334.995C222.202 333.915 220.403 332.492 218.891 330.79C210.17 322.412 198.582 316.062 194.255 304.82C192.158 299.358 192.058 293.376 191.991 287.562C191.991 281.38 191.991 274.594 196.1 269.953C199.303 266.284 204.602 264.424 206.682 260.018C203.181 258.05 200.003 255.558 197.257 252.629C195.903 251.148 194.899 249.383 194.318 247.464C193.738 245.544 193.596 243.519 193.903 241.537C198.761 243.155 203.416 245.331 207.772 248.021C215.718 252.928 222.597 259.379 228.002 266.991C233.406 274.604 237.226 283.223 239.234 292.338C240.911 300.397 241.079 308.774 243.292 316.733C244.282 320.419 246.378 324.708 245.942 328.411Z" fill="#F9BA9F"/>
|
||||
<path d="M245.942 328.41C245.144 328.766 244.43 329.285 243.846 329.935C241.582 333.286 235.997 332.432 233.146 329.5C230.295 326.567 229.188 322.429 227.243 318.827C222.379 309.695 211.847 302.826 211.881 292.488C211.881 284.496 218.589 277.409 217.985 269.551C217.65 265.396 215.386 262.011 212.954 258.861C210.695 255.531 208.959 251.875 207.806 248.021C215.752 252.928 222.631 259.379 228.035 266.991C233.44 274.604 237.259 283.223 239.267 292.337C240.944 300.396 241.112 308.774 243.326 316.732C244.282 320.418 246.378 324.708 245.942 328.41Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M459.819 436.948C457.756 447.252 454.67 457.908 448.599 466.286C447.727 466.403 446.922 466.52 445.983 466.604C440.75 467.241 435.496 467.693 430.218 467.961C409.874 468.749 389.5 467.773 369.324 465.046C346.784 462.264 324.379 458.243 301.872 455.16C302.925 453.972 304.132 452.929 305.461 452.061C312.189 447.062 317.735 440.647 321.705 433.27C325.676 425.892 327.974 417.733 328.437 409.37C327.103 408.48 325.546 407.981 323.943 407.929C319.683 407.527 314.199 408.448 311.063 408.063C285.001 404.795 219.411 340.909 219.411 340.909L251.996 324.624L300.48 340.909C300.48 340.909 352.62 259.113 373.802 235.639C394.983 212.166 433.187 211.68 433.187 211.68C437.764 211.508 442.34 212.074 446.737 213.355C472.699 220.945 486.082 252.394 487.826 279.017C491.331 331.393 469.948 386.432 459.819 436.948Z" fill="white"/>
|
||||
<path d="M465.353 153.122C464.917 156.996 463.846 160.771 462.183 164.297C461.227 166.674 459.859 168.863 458.141 170.765C454.787 173.747 454.687 178.79 452.624 182.728C451.214 185.243 449.261 187.413 446.905 189.078C442.191 192.554 436.693 194.817 430.896 195.668C425.099 196.518 419.181 195.929 413.666 193.953L411.989 193.317C411.267 192.187 410.702 190.963 410.312 189.681L417.02 189.446C416.891 187.097 415.941 184.868 414.336 183.147L429.615 182.845C431.702 183.092 433.812 182.643 435.617 181.567C437.422 180.491 438.82 178.849 439.593 176.897C441.907 173.311 444.306 169.391 443.92 165.169C443.528 162.685 442.657 160.3 441.354 158.148C438 151.597 434.646 144.745 433.707 137.49C432.767 130.235 434.931 122.042 440.784 117.518C442.018 116.754 443.109 115.779 444.004 114.636C444.753 113.261 445.013 111.672 444.742 110.129C443.97 103.126 438.52 97.6804 433.388 92.8215L422.034 82.0146C423.309 83.2377 429.111 83.3885 431.007 83.9917C434.198 85.0842 437.327 86.3482 440.381 87.7783C439.912 86.3876 438.704 84.4273 437.648 82.1822C441.674 84.1839 445.432 86.6832 448.834 89.6213C457.42 97.161 462.787 107.901 465.152 119.059C467.265 130.31 467.333 141.848 465.353 153.122Z" fill="black"/>
|
||||
<path d="M459.819 436.948C457.756 447.252 454.67 457.908 448.599 466.286C447.727 466.403 446.922 466.52 445.983 466.604C422.621 468.933 400.702 470.877 377.491 465.8C373.886 465.012 369.626 463.437 368.989 459.802C368.854 457.7 369.394 455.61 370.531 453.837C386.43 421.768 396.61 384.573 396.174 348.617C387.52 347.528 376.837 364.266 370.531 369.979L347.338 390.99C337.275 400.037 325.703 409.688 312.27 408.633C304.354 408.013 297.277 403.707 290.468 399.518L266.604 384.573C259.577 380.2 251.946 375.022 250.101 366.947C261.321 367.801 271.148 374.302 281.211 379.312C291.273 384.321 303.398 387.991 313.511 383.081C320.79 379.546 325.418 372.325 329.745 365.506C358.163 320.629 389.32 277.543 423.04 236.494C431.174 226.592 432.533 211.831 446.788 213.422C472.749 221.012 486.132 252.461 487.876 279.084C491.331 331.393 469.948 386.432 459.819 436.948Z" fill="url(#paint3_linear)"/>
|
||||
<path opacity="0.18" d="M140.522 129.045C142.287 126.779 144.502 124.902 147.029 123.533C149.916 121.81 153.092 120.623 156.403 120.031C160.674 119.483 165.015 120.01 169.03 121.564C173.046 123.117 176.609 125.649 179.396 128.928C184.921 135.636 187.786 144.139 187.446 152.82C188.574 152.438 189.8 152.46 190.914 152.882C192.027 153.303 192.96 154.099 193.55 155.133C194.653 157.255 195.063 159.669 194.724 162.036C194.691 164.019 194.111 165.956 193.047 167.632C192.498 168.457 191.707 169.091 190.782 169.448C189.857 169.806 188.844 169.867 187.882 169.625C188.455 172.065 188.469 174.602 187.923 177.048C187.377 179.494 186.285 181.785 184.729 183.75C183.421 185.425 181.727 186.916 181.375 188.977C181.04 191.557 183.052 193.903 185.467 195.026C187.914 195.906 190.412 196.639 192.947 197.221C198.432 199.324 202.943 203.383 205.609 208.614C208.232 213.806 210.198 219.305 211.462 224.983C211.763 226.123 211.998 227.513 211.126 228.334C210.5 228.785 209.731 228.993 208.963 228.921L142.534 230.981C141.779 223.291 141.343 214.595 146.525 208.848C150.534 204.425 156.839 203.068 162.709 201.929C162.637 198.539 161.843 195.203 160.378 192.144C159.998 191.19 159.366 190.356 158.55 189.731C157.662 189.273 156.704 188.961 155.716 188.81C149.192 187.134 145.653 180.114 143.976 173.596C143.762 172.415 143.342 171.281 142.735 170.245C141.775 169.067 140.559 168.122 139.18 167.481C131.08 162.84 129.386 157.663 135.222 150.726C140.471 144.745 135.423 136.066 140.522 129.045Z" fill="#5F6CAD"/>
|
||||
<path opacity="0.32" d="M19.1185 37.6143L47.0417 175.724H130.442L106.812 37.6143H19.1185Z" fill="#5F6CAD"/>
|
||||
<path opacity="0.32" d="M44.6603 225.754L72.5667 363.88H155.967L132.337 225.754H44.6603Z" fill="#5F6CAD"/>
|
||||
<path opacity="0.32" d="M214.782 37.6143L242.689 175.724H326.089L302.459 37.6143H214.782Z" fill="#5F6CAD"/>
|
||||
<path d="M223.62 23.4399L251.527 161.55H334.927L311.297 23.4399H223.62Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M34.1787 41.3843L58.8316 163.376H132.488L111.626 41.3843H34.1787Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M50.899 219.689L78.8055 357.799H162.206L138.576 219.689H50.899Z" fill="url(#paint6_linear)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="94.9723" y1="178.288" x2="303.64" y2="637.518" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01"/>
|
||||
<stop offset="0.13" stop-opacity="0.69"/>
|
||||
<stop offset="0.25" stop-opacity="0.32"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="37399.3" y1="14099" x2="19350.9" y2="52345.8" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01"/>
|
||||
<stop offset="0.13" stop-opacity="0.69"/>
|
||||
<stop offset="0.25" stop-opacity="0.32"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="7064.27" y1="13833.2" x2="3533.91" y2="14752.8" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01"/>
|
||||
<stop offset="0.13" stop-opacity="0.69"/>
|
||||
<stop offset="0.25" stop-opacity="0.32"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="138024" y1="45271.2" x2="-31428.7" y2="62586.3" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01"/>
|
||||
<stop offset="0.13" stop-opacity="0.69"/>
|
||||
<stop offset="0.25" stop-opacity="0.32"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="203.412" y1="35.0678" x2="976.912" y2="605.565" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01" stop-color="white"/>
|
||||
<stop offset="0.13" stop-color="white" stop-opacity="0.69"/>
|
||||
<stop offset="0.15" stop-color="white" stop-opacity="0.61"/>
|
||||
<stop offset="0.2" stop-color="white" stop-opacity="0.47"/>
|
||||
<stop offset="0.25" stop-color="white" stop-opacity="0.34"/>
|
||||
<stop offset="0.3" stop-color="white" stop-opacity="0.23"/>
|
||||
<stop offset="0.36" stop-color="white" stop-opacity="0.15"/>
|
||||
<stop offset="0.44" stop-color="white" stop-opacity="0.08"/>
|
||||
<stop offset="0.52" stop-color="white" stop-opacity="0.03"/>
|
||||
<stop offset="0.65" stop-color="white" stop-opacity="0.01"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="990.733" y1="3802.38" x2="46710.8" y2="30951.6" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01" stop-color="white"/>
|
||||
<stop offset="0.13" stop-color="white" stop-opacity="0.69"/>
|
||||
<stop offset="0.15" stop-color="white" stop-opacity="0.61"/>
|
||||
<stop offset="0.2" stop-color="white" stop-opacity="0.47"/>
|
||||
<stop offset="0.25" stop-color="white" stop-opacity="0.34"/>
|
||||
<stop offset="0.3" stop-color="white" stop-opacity="0.23"/>
|
||||
<stop offset="0.36" stop-color="white" stop-opacity="0.15"/>
|
||||
<stop offset="0.44" stop-color="white" stop-opacity="0.08"/>
|
||||
<stop offset="0.52" stop-color="white" stop-opacity="0.03"/>
|
||||
<stop offset="0.65" stop-color="white" stop-opacity="0.01"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="2087.82" y1="19287.1" x2="60686.2" y2="54086" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.01" stop-color="white"/>
|
||||
<stop offset="0.13" stop-color="white" stop-opacity="0.69"/>
|
||||
<stop offset="0.15" stop-color="white" stop-opacity="0.61"/>
|
||||
<stop offset="0.2" stop-color="white" stop-opacity="0.47"/>
|
||||
<stop offset="0.25" stop-color="white" stop-opacity="0.34"/>
|
||||
<stop offset="0.3" stop-color="white" stop-opacity="0.23"/>
|
||||
<stop offset="0.36" stop-color="white" stop-opacity="0.15"/>
|
||||
<stop offset="0.44" stop-color="white" stop-opacity="0.08"/>
|
||||
<stop offset="0.52" stop-color="white" stop-opacity="0.03"/>
|
||||
<stop offset="0.65" stop-color="white" stop-opacity="0.01"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0">
|
||||
<rect width="567" height="469" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,58 @@
|
||||
<svg width="565px" height="465px" viewBox="0 0 878 704" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M580.598 194.914C580.598 194.914 590.288 188.212 627.531 219.503C664.774 250.794 666.269 279.096 666.269 279.096V155.333C666.269 155.333 646.888 101.624 584.334 80.8408L580.598 194.914Z" fill="#93A18D"/>
|
||||
<path d="M666.269 280.264C665.969 280.27 665.679 280.159 665.461 279.953C665.243 279.748 665.114 279.465 665.102 279.166C665.102 278.886 663.14 250.934 626.784 220.39C591.222 190.523 581.415 195.848 581.228 195.894C581.044 196.003 580.835 196.061 580.621 196.061C580.408 196.061 580.198 196.003 580.014 195.894C579.834 195.79 579.685 195.64 579.583 195.46C579.48 195.279 579.427 195.074 579.43 194.867L583.166 80.8874C583.167 80.7057 583.212 80.5268 583.296 80.3657C583.38 80.2045 583.501 80.0657 583.65 79.9607C583.798 79.8557 583.969 79.7876 584.149 79.7619C584.329 79.7363 584.512 79.7539 584.684 79.8132C647.075 100.596 667.18 154.538 667.366 155.005C667.387 155.137 667.387 155.271 667.366 155.402V279.166C667.367 279.472 667.247 279.765 667.033 279.984C666.819 280.202 666.528 280.328 666.222 280.334L666.269 280.264ZM583.75 193.209C589.424 193.209 602.267 196.852 628.279 218.709C652.096 238.721 661.436 257.402 665.102 268.541V155.659C657.59 138.631 646.633 123.344 632.921 110.76C619.209 98.1765 603.04 88.5698 585.431 82.5454L581.812 193.209C582.456 193.142 583.106 193.142 583.75 193.209Z" fill="black"/>
|
||||
<path d="M284.636 236.947V126.797C327.424 111.92 372.765 105.798 417.965 108.793V214.482C417.965 214.482 336.357 216.724 284.636 236.947Z" fill="#93A18D"/>
|
||||
<path d="M284.66 238.114C284.42 238.121 284.184 238.056 283.983 237.927C283.831 237.812 283.708 237.664 283.623 237.494C283.538 237.324 283.493 237.137 283.492 236.946V126.797C283.489 126.562 283.556 126.332 283.685 126.136C283.814 125.941 283.999 125.788 284.216 125.699C327.211 110.843 372.734 104.699 418.128 107.625C418.422 107.648 418.695 107.782 418.894 107.998C419.093 108.215 419.203 108.498 419.203 108.793V214.482C419.203 214.784 419.086 215.074 418.877 215.292C418.668 215.509 418.383 215.638 418.082 215.65C417.264 215.65 336.006 218.125 284.987 238.044C284.881 238.081 284.771 238.104 284.66 238.114ZM285.827 127.591V235.242C333.858 216.981 406.897 213.688 416.868 213.314V109.89C372.451 107.19 327.936 113.203 285.827 127.591Z" fill="black"/>
|
||||
<path d="M233.5 298.291C233.5 298.291 193.805 314.777 178.791 363.489V265.972C178.791 265.972 177.927 218.755 233.5 188.772V298.291Z" fill="#93A18D"/>
|
||||
<path d="M178.674 364.563H178.511C178.232 364.519 177.978 364.377 177.795 364.164C177.611 363.95 177.509 363.678 177.507 363.396V265.973C177.507 265.506 177.507 217.728 232.823 187.745C233.002 187.647 233.202 187.595 233.407 187.595C233.611 187.595 233.811 187.647 233.99 187.745C234.161 187.851 234.302 187.999 234.4 188.175C234.498 188.35 234.55 188.548 234.551 188.749V298.291C234.55 298.522 234.48 298.747 234.351 298.938C234.223 299.129 234.04 299.278 233.827 299.366C220.912 305.835 209.457 314.877 200.166 325.937C190.874 336.996 183.942 349.839 179.795 363.676C179.733 363.927 179.589 364.151 179.386 364.311C179.183 364.472 178.933 364.561 178.674 364.563ZM232.216 190.874C179.795 220.063 179.795 265.599 179.795 265.949V356.367C189.247 330.854 207.94 309.825 232.169 297.451L232.216 190.874Z" fill="black"/>
|
||||
<path d="M178.674 265.973C178.674 265.973 188.411 308.333 225.888 322.39V436.37C225.888 436.37 183.181 406.876 178.674 363.396V265.973Z" fill="white"/>
|
||||
<path d="M225.888 437.537C225.653 437.539 225.424 437.465 225.234 437.327C224.79 437.023 182.013 406.97 177.53 363.512V265.972C177.534 265.683 177.642 265.406 177.836 265.191C178.029 264.976 178.294 264.839 178.581 264.805C178.867 264.77 179.156 264.844 179.39 265.013C179.624 265.182 179.785 265.433 179.842 265.716C179.842 266.136 189.906 307.749 226.331 321.292C226.553 321.378 226.743 321.529 226.876 321.725C227.01 321.921 227.08 322.153 227.079 322.39V436.369C227.077 436.582 227.017 436.79 226.906 436.971C226.795 437.152 226.637 437.299 226.448 437.397C226.278 437.494 226.084 437.542 225.888 437.537ZM179.795 273.562V363.395C183.648 400.595 216.501 427.823 224.674 434.057V323.184C197.167 312.466 184.465 286.358 179.795 273.562Z" fill="black"/>
|
||||
<path d="M487.151 318.327C487.151 318.327 532.263 470.743 550.5 478.379C568.736 486.015 596.826 465.559 599.184 452.552C601.543 439.545 564.813 288.787 564.813 288.787L487.151 318.327Z" fill="white"/>
|
||||
<path d="M559.303 481.228C556.101 481.279 552.922 480.675 549.963 479.453C542.07 476.161 528.948 448.045 510.781 395.878C497.378 357.231 486.054 319.028 485.937 318.654C485.847 318.372 485.869 318.066 486 317.8C486.131 317.535 486.359 317.33 486.637 317.229L564.299 287.713C564.451 287.649 564.614 287.617 564.778 287.617C564.943 287.617 565.105 287.649 565.257 287.713C565.404 287.791 565.533 287.901 565.634 288.034C565.735 288.167 565.805 288.32 565.841 288.484C567.358 294.648 602.64 439.592 600.258 452.716C598.904 460.071 590.148 469.435 578.963 475.507C572.96 478.955 566.219 480.916 559.303 481.228ZM488.575 319.028C490.467 325.403 500.928 360.08 513.093 395.107C536.443 462.663 546.88 475.6 550.967 477.305C558.112 480.317 567.965 478.916 577.959 473.499C588.397 467.848 596.849 458.927 598.04 452.342C599.862 442.324 576.745 342.776 563.973 290.352L488.575 319.028Z" fill="black"/>
|
||||
<path d="M565.07 445.406C563.155 396.018 639.953 328.064 639.953 328.064L681.983 354.732C681.983 354.732 650.718 443.819 619.966 473.825C604.765 488.7 566.121 475.764 565.07 445.406Z" fill="white"/>
|
||||
<path d="M602.99 481.251C597.936 481.201 592.937 480.195 588.257 478.285C576.862 473.755 564.439 462.757 563.786 445.476C562.968 424.693 575.461 398.47 600.772 367.505C612.562 353.184 625.359 339.722 639.066 327.224C639.268 327.072 639.514 326.99 639.767 326.99C640.019 326.99 640.265 327.072 640.467 327.224L682.497 353.868C682.724 354.007 682.896 354.22 682.985 354.471C683.074 354.721 683.075 354.995 682.988 355.246C682.661 356.133 651.302 444.939 620.69 474.899C615.841 479.239 609.492 481.517 602.99 481.251ZM566.121 445.406C566.728 461.566 578.403 471.864 589.12 476.137C600.562 480.691 612.634 479.5 619.125 473.125C647.729 445.103 677.197 364.563 680.536 355.246L639.977 329.559C632.528 336.308 564.346 399.614 566.121 445.383V445.406Z" fill="black"/>
|
||||
<path d="M598.274 472.331C598.032 472.33 597.796 472.257 597.597 472.121C597.347 471.938 597.178 471.665 597.125 471.36C597.073 471.055 597.142 470.741 597.316 470.486C597.924 469.645 658.026 385.089 669.048 336.728C669.081 336.577 669.143 336.435 669.232 336.308C669.32 336.182 669.433 336.075 669.563 335.992C669.693 335.91 669.839 335.854 669.991 335.828C670.143 335.802 670.298 335.806 670.449 335.841C670.599 335.873 670.741 335.936 670.866 336.025C670.991 336.114 671.097 336.227 671.178 336.358C671.259 336.488 671.312 336.634 671.335 336.786C671.358 336.938 671.351 337.093 671.313 337.242C660.175 386.047 599.838 471 599.231 471.84C599.124 471.994 598.981 472.12 598.814 472.205C598.647 472.291 598.461 472.334 598.274 472.331Z" fill="#93A18D"/>
|
||||
<path d="M502.609 350.225C537.015 350.225 564.906 322.332 564.906 287.923C564.906 253.515 537.015 225.621 502.609 225.621C468.203 225.621 440.311 253.515 440.311 287.923C440.311 322.332 468.203 350.225 502.609 350.225Z" fill="black"/>
|
||||
<path d="M502.609 351.393C490.056 351.393 477.786 347.67 467.349 340.696C456.912 333.722 448.778 323.809 443.974 312.212C439.171 300.614 437.914 287.852 440.363 275.541C442.812 263.229 448.856 251.919 457.732 243.043C466.608 234.167 477.916 228.122 490.227 225.673C502.538 223.224 515.299 224.481 526.896 229.284C538.493 234.088 548.404 242.223 555.378 252.661C562.352 263.099 566.074 275.37 566.074 287.923C566.055 304.75 559.363 320.883 547.465 332.782C535.567 344.681 519.435 351.374 502.609 351.393ZM502.609 226.788C490.518 226.788 478.699 230.374 468.646 237.091C458.594 243.809 450.758 253.357 446.132 264.528C441.505 275.699 440.294 287.991 442.653 299.85C445.012 311.709 450.834 322.602 459.383 331.152C467.932 339.701 478.825 345.524 490.683 347.883C502.541 350.242 514.832 349.031 526.002 344.404C537.172 339.777 546.719 331.941 553.437 321.887C560.154 311.834 563.739 300.014 563.739 287.923C563.714 271.717 557.266 256.181 545.807 244.721C534.348 233.262 518.814 226.813 502.609 226.788Z" fill="black"/>
|
||||
<path d="M414.252 242.247C414.252 242.247 326.059 267.724 308.827 312.676C291.595 357.628 347.238 585.89 347.238 585.89C347.238 585.89 442.739 636.516 538.708 583.321C538.708 583.321 565.677 389.946 551.457 341.235C537.237 292.523 504.36 244.746 483.952 237.577C463.544 230.408 414.252 242.247 414.252 242.247Z" fill="white"/>
|
||||
<path d="M443.837 608.471C410.25 608.422 377.083 601.001 346.677 586.731C346.531 586.656 346.403 586.551 346.303 586.422C346.202 586.293 346.13 586.143 346.094 585.983C345.954 585.423 332.084 528.188 320.409 466.213C304.788 382.824 300.514 331.007 307.73 312.092C314.945 293.177 335.096 275.43 367.482 259.364C382.46 252.016 397.988 245.848 413.925 240.916C415.933 240.426 463.708 229.24 484.256 236.456C506.251 244.092 538.731 293.761 552.438 340.651C566.588 389.059 540.763 575.312 539.735 583.204C539.717 583.386 539.654 583.559 539.552 583.71C539.451 583.861 539.313 583.984 539.151 584.069C509.998 600.242 477.175 608.645 443.837 608.471ZM348.242 584.909C355.55 588.575 446.896 632.336 537.587 582.387C539.198 570.711 563.902 387.985 550.289 341.375C535.485 290.749 502.866 245.423 483.578 238.628C463.848 231.786 415.98 242.831 414.556 243.158C412.594 243.718 326.643 269.289 309.925 312.886C293.416 356.063 345.3 572.72 348.242 584.909Z" fill="black"/>
|
||||
<path d="M497.145 597.869C496.841 597.864 496.551 597.742 496.334 597.529C496.117 597.316 495.989 597.029 495.977 596.725C495.977 594.226 491.541 347.703 488.972 328.181C486.124 307.165 440.381 289.137 439.937 288.951C439.653 288.831 439.426 288.607 439.304 288.324C439.182 288.04 439.175 287.721 439.283 287.433C439.338 287.291 439.419 287.161 439.524 287.051C439.629 286.942 439.755 286.854 439.894 286.793C440.033 286.732 440.183 286.699 440.334 286.697C440.486 286.695 440.637 286.722 440.778 286.779C442.716 287.526 488.295 305.46 491.307 327.878C493.922 347.446 498.172 586.45 498.312 596.608C498.315 596.762 498.288 596.914 498.232 597.057C498.176 597.2 498.093 597.33 497.987 597.441C497.881 597.551 497.754 597.64 497.613 597.702C497.473 597.763 497.321 597.796 497.168 597.799L497.145 597.869Z" fill="#93A18D"/>
|
||||
<path d="M391.766 237.577L395.502 291.543C395.502 291.543 417.732 315.315 440.311 312.559C464.875 309.524 482.504 291.543 482.504 291.543L479.072 253.76L391.766 237.577Z" fill="black"/>
|
||||
<path d="M436.645 313.96C415.21 313.96 395.642 293.317 394.778 292.383C394.588 292.188 394.473 291.932 394.452 291.659L390.739 237.694C390.722 237.52 390.747 237.344 390.812 237.182C390.877 237.019 390.98 236.874 391.113 236.76C391.245 236.635 391.405 236.545 391.58 236.496C391.755 236.447 391.939 236.441 392.117 236.48L479.422 252.569C479.671 252.619 479.897 252.748 480.065 252.938C480.234 253.127 480.336 253.367 480.356 253.62L483.789 291.403C483.801 291.572 483.779 291.743 483.723 291.904C483.666 292.064 483.578 292.212 483.462 292.337C482.715 293.084 465.249 310.691 440.568 313.727C439.266 313.886 437.956 313.964 436.645 313.96ZM396.763 291.076C399.402 293.761 419.926 313.937 440.288 311.415C462.19 308.706 478.722 293.644 481.407 291.076L478.115 254.717L393.167 239.048L396.763 291.076Z" fill="black"/>
|
||||
<path d="M498.943 355.292C498.943 355.292 449.628 371.031 449.114 434.688C448.6 498.344 492.381 483.726 517.669 462.71C542.958 441.693 546.904 410.636 544.662 391.884C542.42 373.133 530.419 346.302 498.943 355.292Z" fill="white"/>
|
||||
<path d="M477.181 481.905C473.225 481.992 469.3 481.194 465.693 479.57C453.714 473.872 447.736 458.81 447.947 434.805C448.46 371.008 498.079 354.429 498.593 354.265C509.894 351.043 519.608 352.07 527.593 357.348C541.743 366.688 545.106 386.234 545.783 391.978C548.375 413.578 542.561 443.795 518.393 463.831C507.232 473.008 491.191 481.905 477.181 481.905ZM499.293 356.414C498.219 356.764 450.795 373.04 450.258 434.735C450.048 457.76 455.582 472.098 466.603 477.375C481.454 484.381 502.936 473.452 516.829 461.94C540.179 442.511 545.923 413.158 543.401 392.142C542.748 386.654 539.549 368.066 526.216 359.192C518.977 354.335 509.894 353.378 499.293 356.414Z" fill="black"/>
|
||||
<path d="M532.66 409.258C531.749 427.94 512.462 455.471 498.966 460.632C490.724 463.808 479.679 466.563 472.487 458.624C467.934 453.556 464.922 444.192 465.225 427.893C465.973 385.86 497.168 374.301 506.041 372.433C510.152 371.791 514.36 372.565 517.973 374.628C525.935 378.948 533.617 389.223 532.66 409.258Z" fill="white"/>
|
||||
<path d="M484.98 465.045C482.487 465.122 480.006 464.659 477.709 463.687C475.412 462.716 473.352 461.259 471.67 459.418C466.37 453.533 463.824 442.908 464.105 427.869C464.945 380.419 504.197 371.639 505.854 371.288C510.231 370.62 514.705 371.442 518.557 373.624C524.768 376.94 534.902 385.93 533.874 409.258C532.917 429.014 513.046 456.452 499.433 461.729C494.858 463.708 489.959 464.832 484.98 465.045ZM508.75 373.413C507.965 373.42 507.183 373.506 506.415 373.67C504.804 373.997 467.304 382.38 466.51 427.986C466.253 442.441 468.588 452.505 473.515 457.946C480.403 465.536 491.191 462.617 498.709 459.628C511.552 454.63 530.769 427.706 531.656 409.212C532.707 387.168 523.297 378.854 517.646 375.749C514.922 374.241 511.864 373.438 508.75 373.413Z" fill="black"/>
|
||||
<path d="M532.66 409.258C531.75 427.94 512.462 455.471 498.966 460.632C490.724 463.808 479.679 466.563 472.487 458.624C480.45 459.488 492.288 456.592 505.177 439.382C522.456 416.334 523.857 391.231 517.95 374.628C525.935 378.948 533.618 389.223 532.66 409.258Z" fill="black"/>
|
||||
<path d="M484.98 465.045C482.487 465.122 480.006 464.659 477.709 463.688C475.412 462.716 473.352 461.26 471.67 459.418C471.506 459.244 471.399 459.023 471.364 458.787C471.329 458.55 471.368 458.308 471.475 458.094C471.582 457.88 471.752 457.704 471.962 457.59C472.173 457.476 472.413 457.429 472.651 457.456C480.099 458.25 491.588 455.635 504.313 438.775C521.919 415.283 522.363 390.484 516.922 375.095C516.845 374.876 516.835 374.639 516.894 374.415C516.952 374.19 517.076 373.988 517.249 373.834C517.425 373.678 517.644 373.579 517.878 373.55C518.111 373.521 518.348 373.563 518.557 373.67C524.768 376.986 534.902 385.977 533.874 409.305C532.917 429.061 513.046 456.499 499.433 461.776C494.855 463.739 489.956 464.847 484.98 465.045ZM475.639 460.001C482.458 464.905 491.798 462.22 498.523 459.628C511.365 454.631 530.582 427.706 531.469 409.212C532.38 390.297 525.585 381.447 520.028 377.383C524.581 393.449 523.133 417.431 506.018 440.176C494.483 455.728 483.579 459.791 475.663 460.001H475.639Z" fill="black"/>
|
||||
<path d="M272.611 400.268C272.611 400.268 277.865 559.059 293.626 571.132C309.388 583.204 341.681 570.384 347.331 558.382C352.982 546.379 355.317 391.254 355.317 391.254L272.611 400.268Z" fill="white"/>
|
||||
<path d="M309.924 577.133C303.848 577.357 297.867 575.576 292.902 572.066C286.084 566.882 280.433 536.338 276.044 481.298C272.798 440.526 271.374 400.688 271.374 400.291C271.372 399.998 271.478 399.715 271.671 399.495C271.865 399.275 272.133 399.135 272.424 399.1L355.013 390.11C355.176 390.09 355.342 390.104 355.498 390.153C355.655 390.201 355.8 390.282 355.924 390.39C356.048 390.503 356.147 390.639 356.215 390.792C356.283 390.945 356.319 391.11 356.321 391.277C356.321 397.629 353.846 546.799 348.218 558.895C345.066 565.667 334.208 572.533 321.88 575.592C317.968 576.567 313.956 577.084 309.924 577.133ZM273.825 401.295C274.059 407.95 275.436 444.145 278.495 481.111C284.169 552.38 290.918 567.512 294.42 570.197C300.608 574.868 310.461 576.035 321.506 573.327C333.041 570.478 343.455 563.986 346.28 557.891C350.577 548.667 353.285 446.504 354.149 392.562L273.825 401.295Z" fill="black"/>
|
||||
<path d="M329.025 526.507C362.929 490.522 465.202 497.691 465.202 497.691L475.709 546.402C475.709 546.402 390.272 586.567 347.284 585.703C326.129 585.306 308.22 548.574 329.025 526.507Z" fill="white"/>
|
||||
<path d="M348.569 586.894H347.215C337.057 586.707 327.134 578.558 321.926 566.181C317.256 554.856 316.322 538.299 328.161 525.736C342.428 510.581 369.864 501.077 409.723 497.457C428.194 495.833 446.758 495.529 465.272 496.547C465.527 496.557 465.771 496.652 465.966 496.817C466.161 496.982 466.294 497.208 466.346 497.457L476.854 546.169C476.91 546.429 476.876 546.7 476.757 546.938C476.638 547.175 476.442 547.366 476.2 547.477C475.359 547.85 391.79 586.894 348.569 586.894ZM444.794 498.298C413.295 498.298 353.729 501.871 329.866 527.301C318.798 538.977 319.615 554.622 324.075 565.247C328.861 576.596 338.085 584.372 347.261 584.536C387.19 585.423 465.389 549.882 474.379 545.725L464.245 498.788C461.84 498.648 454.695 498.298 444.794 498.298Z" fill="black"/>
|
||||
<path d="M336.24 569.824C335.971 569.824 335.71 569.731 335.501 569.561C335.293 569.391 335.15 569.154 335.096 568.89C335.041 568.584 335.108 568.268 335.282 568.011C335.457 567.753 335.725 567.574 336.03 567.512C337.01 567.325 435.524 547.687 466.416 527.815C466.676 527.666 466.982 527.624 467.273 527.695C467.563 527.766 467.815 527.946 467.977 528.197C468.138 528.449 468.197 528.753 468.142 529.046C468.086 529.34 467.92 529.601 467.677 529.776C436.411 549.929 340.536 569.03 336.473 569.824H336.24Z" fill="#93A18D"/>
|
||||
<path d="M462.47 505.42C462.47 505.42 483.905 485.338 493.432 477.398C502.959 469.459 521.919 458.46 521.452 468.058C520.985 477.655 503.309 482.372 502.632 484.941C502.632 484.941 538.731 479.36 555.567 484.941C572.402 490.522 576.908 495.029 571.912 497.784C566.915 500.54 548.421 494.025 539.922 495.029C531.423 496.033 523.437 497.784 523.437 497.784C523.437 497.784 552.928 499.536 562.408 505.514C571.888 511.492 575.904 517.516 569.903 519.525C563.903 521.533 545.433 507.032 527.453 509.53C527.453 509.53 565.957 522.023 564.93 531.994C563.902 541.966 559.723 540.494 555.59 537.996C551.457 535.497 531.399 526.974 522.41 525.479C522.41 525.479 563.459 558.499 552.438 560.507C541.416 562.515 518.183 537.529 518.183 537.529C518.183 537.529 473.515 558.545 462.517 546.029C451.519 533.512 462.47 505.42 462.47 505.42Z" fill="black"/>
|
||||
<path d="M551.06 561.674C540.132 561.674 521.405 542.619 517.786 538.813C511.575 541.662 472.277 558.895 461.513 546.682C450.188 533.792 460.859 506.167 461.303 505C461.368 504.837 461.472 504.693 461.606 504.579C461.816 504.369 483.182 484.357 492.615 476.557C498.896 471.327 514.587 460.795 520.378 463.691C521.149 464.107 521.771 464.754 522.156 465.541C522.541 466.329 522.671 467.216 522.526 468.081C522.153 475.086 513.677 479.617 508.073 482.582L507.045 483.119C517.413 481.812 542.397 479.36 555.847 483.82C574.527 489.985 574.784 493.791 574.9 495.052C575.017 496.313 574.62 497.551 572.379 498.788C569.296 500.47 562.782 499.279 555.24 497.878C550.24 496.677 545.11 496.105 539.969 496.173C537.167 496.5 534.411 496.92 531.983 497.317C541.557 498.298 556.501 500.446 562.945 504.509C567.218 507.218 574.34 512.426 573.78 516.909C573.639 518.1 572.892 519.688 570.184 520.599C567.475 521.509 562.992 519.711 556.944 517.166C550.126 514.317 541.977 510.884 533.594 510.417C544.755 514.504 566.868 523.658 566.004 532.111C565.514 536.781 564.323 539.513 562.245 540.541C560.166 541.568 557.341 540.541 554.889 538.976C545.934 534.431 536.597 530.681 526.986 527.768C555.52 551.283 555.567 558.125 555.286 559.362C555.134 559.994 554.785 560.56 554.29 560.98C553.795 561.4 553.179 561.651 552.531 561.698C552.041 561.738 551.548 561.73 551.06 561.674ZM518.136 536.244C518.299 536.242 518.46 536.274 518.609 536.338C518.758 536.402 518.891 536.498 519 536.618C525.328 543.437 543.658 560.81 552.181 559.246C552.998 559.105 553.068 558.825 553.091 558.732C554.119 554.645 535.322 537.295 521.639 526.296C521.435 526.134 521.291 525.908 521.227 525.655C521.164 525.402 521.186 525.135 521.289 524.895C521.394 524.659 521.575 524.463 521.803 524.341C522.032 524.218 522.294 524.175 522.55 524.218C531.469 525.713 551.714 534.236 556.15 536.898C557.972 537.996 560.003 539.023 561.264 538.393C562.128 537.949 563.272 536.454 563.739 531.784C564.416 525.199 541.603 515.251 527.056 510.534C526.903 510.52 526.754 510.476 526.617 510.405C526.481 510.334 526.36 510.236 526.261 510.118C526.062 509.879 525.966 509.571 525.994 509.261C526.022 508.952 526.171 508.666 526.41 508.467C526.649 508.267 526.957 508.171 527.266 508.199C538.334 506.658 549.659 511.398 557.925 514.878C563.085 517.049 567.522 518.917 569.6 518.24C570.861 517.82 571.538 517.236 571.631 516.489C571.841 514.784 569.296 511.118 561.871 506.354C552.741 500.586 523.74 498.788 523.437 498.788C523.157 498.772 522.894 498.653 522.696 498.455C522.498 498.257 522.379 497.993 522.363 497.714C522.334 497.432 522.411 497.148 522.58 496.92C522.748 496.691 522.995 496.533 523.273 496.476C523.273 496.476 531.423 494.702 539.875 493.698C545.244 493.6 550.604 494.188 555.823 495.449C562.034 496.593 569.063 497.784 571.421 496.593C572.052 496.243 572.775 495.706 572.729 495.122C572.682 494.538 571.585 491.292 555.286 485.898C538.988 480.504 503.239 485.898 502.889 485.898C502.697 485.921 502.502 485.899 502.32 485.834C502.138 485.769 501.973 485.663 501.838 485.524C501.713 485.379 501.625 485.205 501.581 485.018C501.536 484.832 501.536 484.637 501.581 484.45C501.908 483.143 503.519 482.255 507.139 480.34C512.276 477.608 520.051 473.475 520.355 467.777C520.355 466.073 519.771 465.722 519.514 465.606C515.918 463.784 503.006 470.883 494.273 478.169C485.54 485.454 465.739 503.856 463.568 505.981C462.54 508.713 453.574 533.792 463.427 545.024C467.607 549.695 478.231 549.695 494.156 545.024C502.205 542.592 510.083 539.628 517.74 536.151C517.877 536.153 518.012 536.185 518.136 536.244Z" fill="black"/>
|
||||
<path d="M502.936 135.694C502.936 135.694 509.427 198.159 507.932 231.132C506.438 264.104 493.455 274.589 465.902 280.17C438.349 285.751 394.942 261.676 370.471 230.198C346 198.72 343.245 182.164 351.347 135.694H502.936Z" fill="white"/>
|
||||
<path d="M457.847 281.945C430.807 281.945 392.467 260.275 369.63 230.782C345.323 199.607 341.867 182.654 350.25 135.484C350.295 135.214 350.435 134.969 350.645 134.793C350.854 134.617 351.12 134.523 351.394 134.526H502.982C503.273 134.525 503.553 134.632 503.769 134.826C503.985 135.02 504.121 135.288 504.15 135.577C504.15 136.208 510.641 198.487 509.147 231.179C507.536 266.37 492.802 275.921 466.253 281.245C463.48 281.748 460.665 281.983 457.847 281.945ZM352.328 136.862C344.272 182.981 347.658 198.697 371.452 229.404C396.413 261.489 439.587 284.187 465.739 278.956C491.167 273.866 505.247 264.735 506.765 231.085C508.143 200.892 502.725 145.175 501.885 136.862H352.328Z" fill="black"/>
|
||||
<path d="M351.347 135.694C351.347 135.694 356.554 157.177 409.512 160.68C462.47 164.183 502.912 150.195 502.912 135.694C502.912 121.192 465.225 107.672 427.118 106.714C389.011 105.757 353.519 122.196 351.347 135.694Z" fill="white"/>
|
||||
<path d="M426.231 162.408C420.86 162.408 415.264 162.221 409.442 161.848C356.228 158.322 350.437 136.885 350.25 135.974C350.215 135.82 350.215 135.661 350.25 135.507C352.585 121.169 388.544 104.566 427.305 105.547C463.638 106.504 504.243 119.558 504.243 135.694C504.137 137.449 503.667 139.163 502.863 140.727C502.059 142.291 500.939 143.67 499.573 144.778C489.743 153.815 463.427 162.408 426.231 162.408ZM352.585 135.624C352.935 136.651 354.78 141.228 361.551 146.109C368.673 151.246 382.776 157.784 409.629 159.512C452.967 162.385 486.801 153.394 497.845 143.166C498.979 142.275 499.916 141.16 500.599 139.891C501.282 138.621 501.696 137.224 501.815 135.787C501.815 122.5 465.529 108.98 427.095 107.975C390.412 106.808 355.083 122.523 352.585 135.624Z" fill="black"/>
|
||||
<path d="M379.741 228.797C388.591 232.253 409.396 233.117 406.383 205.025C403.371 176.933 392.373 161.404 373.273 161.357C354.173 161.311 353.939 184.032 356.181 193.022C358.422 202.013 360.664 221.231 379.741 228.797Z" fill="black"/>
|
||||
<path d="M389.151 231.669C385.794 231.658 382.465 231.049 379.321 229.871C361.691 222.865 357.979 206.379 355.761 196.455C355.527 195.311 355.27 194.26 355.037 193.302C353.402 186.764 353.145 174.224 359.123 166.588C360.785 164.488 362.921 162.813 365.357 161.701C367.793 160.588 370.458 160.07 373.133 160.19C392.443 160.19 404.305 175.695 407.411 204.908C408.578 215.953 406.313 223.776 400.616 228.12C397.283 230.521 393.257 231.767 389.151 231.669ZM380.185 227.699C384.411 229.357 393.237 230.922 399.355 226.251C404.329 222.445 406.36 215.346 405.239 205.235C402.227 177.003 391.463 162.665 373.273 162.618C370.938 162.493 368.608 162.928 366.475 163.886C364.343 164.845 362.47 166.3 361.014 168.129C355.574 175.135 355.877 186.974 357.348 192.835C357.605 193.793 357.839 194.867 358.096 196.034C360.197 205.375 363.746 221.348 380.231 227.793L380.185 227.699Z" fill="black"/>
|
||||
<path d="M395.502 211.89C394.915 213.414 393.973 214.776 392.755 215.864C391.537 216.953 390.077 217.735 388.497 218.148C375.748 221.301 367.716 206.146 365.451 198.463C363.186 190.78 364.517 171.071 375.771 172.566C377.256 172.594 378.716 172.953 380.045 173.617C384.112 175.616 387.601 178.622 390.178 182.35C395.806 189.823 399.051 203.67 395.502 211.89Z" fill="white"/>
|
||||
<path d="M385.065 219.736C374.394 219.736 366.875 207.757 364.236 198.72C362.672 193.302 362.509 180.575 367.786 174.411C368.735 173.259 369.962 172.37 371.352 171.826C372.741 171.283 374.246 171.103 375.725 171.305C377.347 171.337 378.941 171.728 380.395 172.449C384.653 174.521 388.31 177.648 391.019 181.533C396.693 188.982 400.359 203.413 396.576 212.264C395.916 213.977 394.855 215.507 393.482 216.726C392.109 217.945 390.463 218.817 388.684 219.269C387.501 219.569 386.285 219.726 385.065 219.736ZM374.487 173.663C373.542 173.652 372.608 173.857 371.754 174.261C370.9 174.666 370.15 175.26 369.56 175.999C365.287 180.972 364.89 192.578 366.478 198.089C368.323 204.371 375.818 220.016 388.124 216.957C389.548 216.607 390.865 215.916 391.963 214.944C393.062 213.972 393.907 212.747 394.428 211.376C397.931 203.273 394.428 189.916 389.151 183.004C386.679 179.452 383.355 176.578 379.484 174.644C378.33 174.062 377.063 173.735 375.771 173.687H375.538L374.487 173.663Z" fill="black"/>
|
||||
<path d="M351.347 135.694C351.347 135.694 358.749 88.9904 402.717 81.9849C440.778 75.9135 489.719 93.6608 502.936 135.694C502.936 135.694 507.932 164.183 431.485 163.716C355.037 163.249 351.347 135.694 351.347 135.694Z" fill="black"/>
|
||||
<path d="M433.446 164.86H431.485C354.92 164.346 350.25 137.025 350.25 135.857V135.507C350.25 135.04 358.306 87.9632 402.601 80.911C442.086 74.6528 490.864 93.2874 504.126 135.344C504.312 137.6 504.012 139.87 503.246 142.001C502.481 144.132 501.268 146.074 499.69 147.697C493.059 155.566 476.177 164.86 433.446 164.86ZM352.585 135.694C353.075 137.842 360.314 162.035 431.555 162.502H433.516C475.196 162.502 491.517 153.698 497.892 146.155C499.232 144.79 500.274 143.162 500.953 141.373C501.633 139.585 501.934 137.675 501.838 135.764C491.751 103.819 451.986 75.2832 402.928 83.0827C361.715 89.7846 353.122 132.495 352.585 135.694Z" fill="black"/>
|
||||
<path d="M317.677 437.163C352.083 437.163 379.975 409.27 379.975 374.861C379.975 340.453 352.083 312.559 317.677 312.559C283.271 312.559 255.379 340.453 255.379 374.861C255.379 409.27 283.271 437.163 317.677 437.163Z" fill="black"/>
|
||||
<path d="M317.677 438.401C305.125 438.401 292.854 434.679 282.417 427.704C271.981 420.73 263.846 410.818 259.042 399.22C254.239 387.622 252.982 374.861 255.431 362.549C257.88 350.237 263.924 338.928 272.8 330.051C281.676 321.175 292.984 315.13 305.295 312.681C317.606 310.232 330.367 311.489 341.964 316.293C353.561 321.097 363.473 329.232 370.446 339.669C377.42 350.107 381.142 362.378 381.142 374.931C381.123 391.759 374.431 407.892 362.533 419.791C350.635 431.69 334.503 438.382 317.677 438.401ZM317.677 313.797C305.586 313.797 293.767 317.382 283.715 324.1C273.662 330.817 265.827 340.365 261.2 351.536C256.573 362.707 255.362 374.999 257.721 386.858C260.08 398.717 265.902 409.61 274.451 418.16C283 426.71 293.893 432.532 305.751 434.891C317.609 437.25 329.9 436.039 341.07 431.412C352.24 426.785 361.788 418.949 368.505 408.896C375.222 398.842 378.807 387.023 378.807 374.931C378.801 358.713 372.361 343.159 360.9 331.685C349.439 320.21 333.894 313.751 317.677 313.727V313.797Z" fill="black"/>
|
||||
<path d="M466.066 213.968C469.432 213.968 472.16 209.839 472.16 204.744C472.16 199.65 469.432 195.521 466.066 195.521C462.7 195.521 459.972 199.65 459.972 204.744C459.972 209.839 462.7 213.968 466.066 213.968Z" fill="black"/>
|
||||
<path d="M493.222 198.463C496.588 198.463 499.316 194.333 499.316 189.239C499.316 184.145 496.588 180.015 493.222 180.015C489.856 180.015 487.128 184.145 487.128 189.239C487.128 194.333 489.856 198.463 493.222 198.463Z" fill="black"/>
|
||||
<path d="M396.95 218.405C396.779 218.401 396.61 218.359 396.457 218.282C396.303 218.206 396.169 218.096 396.063 217.962L363.536 178.754C363.438 178.636 363.364 178.5 363.319 178.353C363.273 178.207 363.257 178.052 363.271 177.9C363.285 177.747 363.329 177.598 363.401 177.462C363.472 177.326 363.57 177.206 363.688 177.108C363.806 177.01 363.942 176.936 364.089 176.89C364.235 176.845 364.39 176.829 364.542 176.843C364.695 176.857 364.844 176.901 364.98 176.973C365.115 177.044 365.236 177.142 365.334 177.26L397.884 216.56C397.983 216.678 398.057 216.813 398.102 216.96C398.148 217.106 398.163 217.26 398.148 217.412C398.133 217.565 398.087 217.713 398.014 217.847C397.94 217.982 397.841 218.1 397.721 218.195C397.499 218.359 397.224 218.434 396.95 218.405Z" fill="black"/>
|
||||
<path d="M681.96 354.755C674.326 355.36 666.645 354.935 659.124 353.494C644.507 351.159 637.011 342.519 636.638 325.659C636.264 308.799 631.407 286.709 636.638 280.871C641.868 275.033 663.63 261.185 664.658 267.934C665.685 274.683 650.788 283.556 650.041 287.923C649.293 292.29 654.921 295.676 654.547 305.04C654.547 305.04 662.72 262.703 681.867 258.196C701.014 253.689 702.882 263.824 698.002 267.187C693.121 270.549 684.459 271.32 681.867 275.43C679.275 279.54 677.407 295.676 677.407 295.676C677.407 295.676 697.254 264.198 709.63 271.32C722.005 278.442 722.356 287.433 716.355 286.312C710.354 285.191 703.629 283.416 699.87 288.787C696.11 294.158 690.88 302.798 690.88 302.798C690.88 302.798 713.436 289.301 720.137 292.663C726.839 296.026 732.863 306.674 724.621 306.044C716.378 305.413 708.486 305.04 704.75 309.15C701.014 313.259 699.87 321.9 696.881 330.89C693.892 339.88 692.771 354.639 681.96 354.755Z" fill="black"/>
|
||||
<path d="M676.286 356.18C670.472 356.132 664.671 355.624 658.937 354.662C643.526 352.163 635.867 342.683 635.47 325.683C635.47 320.335 634.793 314.451 634.233 308.753C632.948 295.699 631.898 284.444 635.774 280.1C640.444 274.986 657.606 263.404 663.607 265.155C664.211 265.304 664.756 265.63 665.173 266.092C665.589 266.555 665.857 267.131 665.942 267.747C666.713 272.418 661.505 277.298 656.906 281.758C654.29 284.257 651.582 286.826 651.325 288.227C651.297 289.985 651.82 291.708 652.819 293.154C653.731 294.827 654.475 296.587 655.038 298.408C658.237 286.148 666.572 260.718 681.727 257.146C696.881 253.573 700.407 259.037 701.107 260.789C701.642 262.108 701.701 263.573 701.275 264.932C700.849 266.291 699.965 267.459 698.772 268.238C696.376 269.72 693.793 270.875 691.09 271.67C687.564 272.931 684.225 274.006 682.941 276.154C681.657 278.302 680.139 285.495 679.322 290.982C685.393 282.459 699.893 264.408 710.307 270.386C719.133 275.477 722.449 281.735 721.141 285.261C720.769 286.197 720.057 286.958 719.148 287.391C718.238 287.824 717.199 287.897 716.238 287.596L714.977 287.339C709.583 286.312 703.979 285.214 700.967 289.675C698.889 292.687 696.297 296.68 694.429 299.716C701.434 295.886 715.304 289.091 720.815 291.846C725.671 294.181 730.855 300.86 729.781 304.76C729.454 305.881 728.427 307.679 724.667 307.422C716.261 306.768 709.046 306.534 705.754 310.154C703.419 312.769 702.088 317.58 700.57 323.137C699.846 325.823 699.099 328.602 698.118 331.474C697.558 333.202 697.044 335.163 696.507 337.218C694.312 345.578 691.604 355.9 682.077 356.133C680.149 356.255 678.216 356.27 676.286 356.18ZM662.113 267.28C656.859 267.28 642.102 276.621 637.525 281.665C634.279 285.238 635.447 297.077 636.544 308.519C637.105 314.264 637.689 320.195 637.805 325.613C638.179 341.538 644.997 350.038 659.311 352.35C666.719 353.747 674.279 354.163 681.797 353.588H681.937C689.736 353.588 692.001 344.808 694.195 336.424C694.756 334.323 695.27 332.338 695.877 330.517C696.811 327.714 697.558 324.959 698.212 322.32C699.799 316.459 701.177 311.415 703.932 308.309C707.925 303.919 715.724 304.129 724.737 304.806C726.302 304.946 727.212 304.62 727.423 303.872C728.053 301.537 724.154 295.909 719.67 293.644C714.627 291.099 697.651 300.066 691.534 303.732C691.308 303.86 691.047 303.911 690.79 303.878C690.533 303.844 690.294 303.727 690.109 303.545C689.927 303.36 689.813 303.119 689.783 302.861C689.754 302.603 689.811 302.343 689.946 302.121C689.946 302.121 695.246 293.411 698.959 288.11C702.672 282.809 709.513 283.767 715.304 284.887L716.565 285.121C717.405 285.284 718.48 285.284 718.9 284.35C719.67 282.225 717.102 276.925 709.093 272.301C699.753 266.907 683.781 287.783 678.434 296.26C678.293 296.483 678.081 296.652 677.832 296.739C677.584 296.826 677.313 296.826 677.063 296.739C676.814 296.653 676.602 296.484 676.461 296.261C676.32 296.039 676.258 295.775 676.286 295.512C676.286 294.835 678.224 279.166 680.956 274.8C682.684 272.044 686.397 270.736 690.296 269.359C692.792 268.609 695.185 267.55 697.418 266.206C698.184 265.735 698.755 265.003 699.025 264.146C699.295 263.288 699.247 262.361 698.889 261.536C697.675 258.804 692.654 256.865 682.194 259.201C664.004 263.474 655.831 304.713 655.761 305.11C655.7 305.398 655.536 305.654 655.3 305.83C655.063 306.007 654.771 306.091 654.477 306.067C654.184 306.032 653.915 305.888 653.725 305.662C653.534 305.437 653.436 305.148 653.45 304.853C653.578 301.043 652.614 297.275 650.671 293.995C649.404 292.112 648.804 289.86 648.967 287.596C649.34 285.448 651.932 282.926 655.224 279.843C659.194 276.061 664.144 271.39 663.584 267.981C663.571 267.805 663.499 267.638 663.381 267.507C663.263 267.376 663.104 267.288 662.93 267.257C662.658 267.228 662.383 267.236 662.113 267.28Z" fill="black"/>
|
||||
<path d="M249.355 494.188V378.738C249.355 378.738 313.917 421.401 410.47 411.874V524.475C410.47 524.475 347.238 543.694 249.355 494.188Z" fill="white"/>
|
||||
<path d="M376.799 529.192C348.499 529.192 303.994 523.121 248.818 495.239C248.627 495.138 248.468 494.986 248.357 494.801C248.246 494.616 248.187 494.404 248.187 494.188V378.738C248.179 378.525 248.231 378.315 248.336 378.13C248.441 377.945 248.596 377.793 248.783 377.691C248.97 377.589 249.181 377.541 249.393 377.553C249.606 377.565 249.811 377.635 249.985 377.757C250.639 378.177 315.365 420.07 410.33 410.73C410.489 410.714 410.649 410.731 410.802 410.779C410.954 410.828 411.095 410.906 411.217 411.01C411.334 411.122 411.427 411.256 411.491 411.404C411.555 411.552 411.589 411.712 411.591 411.874V524.475C411.592 524.725 411.514 524.969 411.366 525.17C411.219 525.372 411.011 525.521 410.773 525.596C410.493 525.69 398.351 529.192 376.799 529.192ZM250.522 493.488C340.49 538.767 401.527 525.549 409.302 523.588V413.181C322.907 421.261 261.684 387.495 250.522 380.816V493.488Z" fill="black"/>
|
||||
<path d="M549.893 427.309V262.306C549.893 262.306 695.223 256.842 755.372 197.833V368.299C755.372 368.299 695.223 416.38 549.893 427.309Z" fill="#5F6CAD"/>
|
||||
<path d="M549.893 428.477C549.6 428.472 549.319 428.365 549.099 428.173C548.982 428.061 548.889 427.927 548.825 427.779C548.761 427.63 548.727 427.471 548.725 427.309V262.306C548.725 262.005 548.841 261.714 549.05 261.497C549.259 261.279 549.544 261.151 549.846 261.139C551.294 261.139 695.41 254.997 754.509 196.992C754.671 196.831 754.879 196.723 755.103 196.682C755.328 196.64 755.56 196.667 755.77 196.758C755.999 196.841 756.197 196.994 756.335 197.195C756.473 197.396 756.545 197.635 756.54 197.879V368.346C756.541 368.522 756.501 368.695 756.425 368.853C756.348 369.011 756.235 369.149 756.096 369.257C755.489 369.747 694.056 417.688 550.033 428.523L549.893 428.477ZM551.06 263.427V426.048C687.051 415.586 748.438 371.989 754.205 367.669V200.565C696.134 254.74 564.603 262.727 551.06 263.427Z" fill="black"/>
|
||||
<path d="M479.072 622.879V518.66C479.072 518.66 579.22 517.913 650.741 464.274V571.505C650.741 571.505 585.291 625.938 479.072 622.879Z" fill="#5F6CAD"/>
|
||||
<path d="M487.384 624.257C484.629 624.257 481.874 624.257 479.048 624.257C478.745 624.245 478.457 624.118 478.244 623.9C478.032 623.683 477.91 623.393 477.904 623.089V518.661C477.91 518.353 478.035 518.059 478.253 517.842C478.471 517.624 478.764 517.499 479.072 517.493C480.076 517.493 579.664 516.139 650.04 463.341C650.216 463.219 650.421 463.147 650.634 463.132C650.847 463.117 651.06 463.159 651.251 463.255C651.442 463.35 651.604 463.495 651.719 463.675C651.835 463.854 651.9 464.061 651.908 464.275V571.506C651.906 571.678 651.867 571.849 651.795 572.005C651.722 572.162 651.618 572.302 651.488 572.416C650.834 573 587.953 624.257 487.384 624.257ZM480.239 621.922C579.734 624.397 643.689 575.662 649.573 571.085V466.703C582.863 515.555 491.564 519.595 480.239 519.898V621.922Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 36 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,75 @@
|
||||
import { ReactComponent as Add } from './icons/add.svg';
|
||||
import { ReactComponent as Upload } from './icons/upload.svg';
|
||||
import { ReactComponent as ChevronDown } from './icons/chevron-down.svg';
|
||||
import { ReactComponent as ChevronLeft } from './icons/chevron-left.svg';
|
||||
import { ReactComponent as ChevronRight } from './icons/chevron-right.svg';
|
||||
import { ReactComponent as ArrowLeft } from './icons/arrow-left.svg';
|
||||
import { ReactComponent as ArrowRight } from './icons/arrow-right.svg';
|
||||
import { ReactComponent as Search } from './icons/search.svg';
|
||||
import { ReactComponent as Check } from './icons/check.svg';
|
||||
import { ReactComponent as CheckCircle } from './icons/check-circle.svg';
|
||||
import { ReactComponent as Google } from './icons/google.svg';
|
||||
import { ReactComponent as Settings } from './icons/settings.svg';
|
||||
import { ReactComponent as Logout } from './icons/logout.svg';
|
||||
import { ReactComponent as Logo } from './icons/logo.svg';
|
||||
import { ReactComponent as Profile } from './icons/profile.svg';
|
||||
import { ReactComponent as Security } from './icons/security.svg';
|
||||
import { ReactComponent as Edit } from './icons/edit.svg';
|
||||
import { ReactComponent as Delete } from './icons/delete.svg';
|
||||
import { ReactComponent as General } from './icons/general.svg';
|
||||
import { ReactComponent as Design } from './icons/design.svg';
|
||||
import { ReactComponent as FullBuild } from './icons/full-build.svg';
|
||||
import { ReactComponent as MVP } from './icons/mvp.svg';
|
||||
import { ReactComponent as Specification } from './icons/specification.svg';
|
||||
import { ReactComponent as Features } from './icons/features.svg';
|
||||
import { ReactComponent as Frontend } from './icons/frontend.svg';
|
||||
import { ReactComponent as Backend } from './icons/backend.svg';
|
||||
import { ReactComponent as Close } from './icons/close.svg';
|
||||
import { ReactComponent as Payment } from './icons/payment.svg';
|
||||
import { ReactComponent as Messaging } from './icons/messaging.svg';
|
||||
import { ReactComponent as Send } from './icons/send.svg';
|
||||
import { ReactComponent as Attachment } from './icons/attachment.svg';
|
||||
import { ReactComponent as Login } from './images/login.svg';
|
||||
import { ReactComponent as Signup } from './images/signup.svg';
|
||||
import { ReactComponent as Empty } from './images/empty.svg';
|
||||
import { ReactComponent as ThreadClient } from './images/thread-client.svg';
|
||||
import { ReactComponent as ThreadProductOwner } from './images/thread-po.svg';
|
||||
|
||||
export {
|
||||
Add,
|
||||
Upload,
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Search,
|
||||
Check,
|
||||
CheckCircle,
|
||||
Google,
|
||||
Settings,
|
||||
Logout,
|
||||
Logo,
|
||||
Profile,
|
||||
Security,
|
||||
Edit,
|
||||
Delete,
|
||||
General,
|
||||
Design,
|
||||
FullBuild,
|
||||
MVP,
|
||||
Specification,
|
||||
Features,
|
||||
Frontend,
|
||||
Backend,
|
||||
Close,
|
||||
Payment,
|
||||
Messaging,
|
||||
Send,
|
||||
Attachment,
|
||||
Login,
|
||||
Signup,
|
||||
Empty,
|
||||
ThreadClient,
|
||||
ThreadProductOwner,
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type AlertProps = {
|
||||
className?: string;
|
||||
color:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
text: string;
|
||||
};
|
||||
|
||||
const Alert = ({ text, ...props }: AlertProps) => {
|
||||
return <Wrapper {...props}>{text}</Wrapper>;
|
||||
};
|
||||
|
||||
export default Alert;
|
||||
@@ -0,0 +1,72 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0.938rem;
|
||||
border-radius: 10px;
|
||||
|
||||
${({ color, theme }) => {
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.client.main};
|
||||
color: ${theme.colors.client.main};
|
||||
background: ${theme.colors.client.light};
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.productOwner.main};
|
||||
color: ${theme.colors.productOwner.main};
|
||||
background: ${theme.colors.productOwner.light};
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.developer.main};
|
||||
color: ${theme.colors.developer.main};
|
||||
background: ${theme.colors.developer.light};
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.admin.main};
|
||||
color: ${theme.colors.admin.main};
|
||||
background: ${theme.colors.admin.light};
|
||||
`;
|
||||
case 'success':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.success.main};
|
||||
color: ${theme.colors.success.main};
|
||||
background: ${theme.colors.success.light};
|
||||
`;
|
||||
case 'warning':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.warning.main};
|
||||
color: ${theme.colors.warning.main};
|
||||
background: ${theme.colors.warning.light};
|
||||
`;
|
||||
case 'error':
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.error.main};
|
||||
color: ${theme.colors.error.main};
|
||||
background: ${theme.colors.error.light};
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
border: 1px solid ${theme.colors.client.main};
|
||||
color: ${theme.colors.client.main};
|
||||
background: ${theme.colors.client.light};
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type AvatarProps = {
|
||||
className?: string;
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
|
||||
size?: 'small' | 'big';
|
||||
text: string;
|
||||
};
|
||||
|
||||
const Avatar = ({ color, size = 'small', text, className }: AvatarProps) => {
|
||||
return (
|
||||
<Wrapper color={color} size={size} className={className}>
|
||||
{text}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
@@ -0,0 +1,41 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
|
||||
size?: 'small' | 'big';
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
user-select: none;
|
||||
border-radius: 50%;
|
||||
background: ${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main};
|
||||
color: ${({ theme }) => theme.colors.white.main};
|
||||
display: inline-grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
|
||||
${({ size }) => {
|
||||
switch (size) {
|
||||
case 'small':
|
||||
return css`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
`;
|
||||
case 'big':
|
||||
return css`
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Box, Text } from '..';
|
||||
import { Backend } from '../../assets';
|
||||
import { FeatureOutput } from '../../graphql/types';
|
||||
|
||||
type BackendFeatureCardProps = {
|
||||
feature: FeatureOutput;
|
||||
};
|
||||
|
||||
const BackendFeatureCard = ({ feature }: BackendFeatureCardProps) => {
|
||||
return (
|
||||
<Box
|
||||
padding='15px 10px'
|
||||
background='white'
|
||||
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
|
||||
display='grid'
|
||||
gridTemplateRows='auto'
|
||||
alignItems='center'
|
||||
rowGap='10px'
|
||||
borderRadius='10px'
|
||||
cursor='pointer'
|
||||
>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='title' weight='bold'>
|
||||
{feature.name}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Backend />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackendFeatureCard;
|
||||
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
export type BoxProps = {
|
||||
className?: string;
|
||||
children?: React.ReactNode | JSX.Element | string;
|
||||
|
||||
onClick?: () => void;
|
||||
cursor?: 'pointer' | 'default';
|
||||
|
||||
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
|
||||
zIndex?: string;
|
||||
top?: string;
|
||||
right?: string;
|
||||
bottom?: string;
|
||||
left?: string;
|
||||
|
||||
transformOrigin?: string;
|
||||
transform?: string;
|
||||
|
||||
display?: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'grid';
|
||||
|
||||
flex?: string;
|
||||
flexDirection?: 'row' | 'column';
|
||||
flexWrap?: 'wrap' | 'unwrap';
|
||||
flexGrow?: string;
|
||||
flexShrink?: string;
|
||||
order?: string;
|
||||
|
||||
gridRow?: string;
|
||||
gridColumn?: string;
|
||||
gridTemplate?: string;
|
||||
gridTemplateRows?: string;
|
||||
gridTemplateColumns?: string;
|
||||
gap?: string;
|
||||
rowGap?: string;
|
||||
columnGap?: string;
|
||||
|
||||
alignItems?: 'center' | 'flex-start' | 'flex-end' | 'stretch';
|
||||
justifyContent?:
|
||||
| 'center'
|
||||
| 'flex-start'
|
||||
| 'flex-end'
|
||||
| 'space-between'
|
||||
| 'space-around';
|
||||
alignSelf?: 'center' | 'flex-start' | 'flex-end';
|
||||
justifySelf?: 'center' | 'flex-start' | 'flex-end';
|
||||
|
||||
boxSizing?: 'content-box' | 'border-box';
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
maxWidth?: string;
|
||||
height?: string;
|
||||
minHeight?: string;
|
||||
maxHeight?: string;
|
||||
|
||||
margin?: string;
|
||||
marginTop?: string;
|
||||
marginRight?: string;
|
||||
marginBottom?: string;
|
||||
marginLeft?: string;
|
||||
padding?: string;
|
||||
paddingTop?: string;
|
||||
paddingRight?: string;
|
||||
paddingBottom?: string;
|
||||
paddingLeft?: string;
|
||||
|
||||
overflow?: 'visible' | 'hidden' | 'scroll';
|
||||
overflowX?: 'visible' | 'hidden' | 'scroll';
|
||||
overflowY?: 'visible' | 'hidden' | 'scroll';
|
||||
|
||||
border?: string;
|
||||
borderRadius?: string;
|
||||
boxShadow?: string;
|
||||
|
||||
color?: string;
|
||||
background?: string;
|
||||
|
||||
fontFamily?: string;
|
||||
fontSize?: string;
|
||||
fontWeight?: string;
|
||||
fontStyle?: string;
|
||||
lineHeight?: string;
|
||||
letterSpacing?: string;
|
||||
textAlign?: 'center' | 'left' | 'right';
|
||||
textDecoration?: string;
|
||||
};
|
||||
|
||||
const Box = React.forwardRef<HTMLDivElement, BoxProps>(
|
||||
({ children, ...props }, ref) => {
|
||||
return (
|
||||
<Wrapper {...props} draggable='false' ref={ref}>
|
||||
{children}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Box;
|
||||
@@ -0,0 +1,83 @@
|
||||
import styled from 'styled-components';
|
||||
import { BoxProps } from '.';
|
||||
|
||||
export const Wrapper = styled.div<BoxProps>`
|
||||
${({ cursor }) => cursor && `cursor: ${cursor}`};
|
||||
|
||||
${({ position }) => position && `position: ${position}`};
|
||||
${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
|
||||
${({ top }) => top && `top: ${top}`};
|
||||
${({ right }) => right && `right: ${right}`};
|
||||
${({ bottom }) => bottom && `bottom: ${bottom}`};
|
||||
${({ left }) => left && `left: ${left}`};
|
||||
|
||||
${({ transformOrigin }) =>
|
||||
transformOrigin && `transform-origin: ${transformOrigin}`};
|
||||
${({ transform }) => transform && `transform: ${transform}`};
|
||||
|
||||
${({ display }) => display && `display: ${display}`};
|
||||
|
||||
${({ flex }) => flex && `flex: ${flex}`};
|
||||
${({ flexDirection }) => flexDirection && `flex-direction: ${flexDirection}`};
|
||||
${({ flexWrap }) => flexWrap && `flex-wrap: ${flexWrap}`};
|
||||
${({ flexGrow }) => flexGrow && `flex-grow: ${flexGrow}`};
|
||||
${({ flexShrink }) => flexShrink && `flex-shrink: ${flexShrink}`};
|
||||
${({ order }) => order && `order: ${order}`};
|
||||
|
||||
${({ gridRow }) => gridRow && `grid-row: ${gridRow}`};
|
||||
${({ gridColumn }) => gridColumn && `grid-column: ${gridColumn}`};
|
||||
${({ gridTemplate }) => gridTemplate && `grid-template: ${gridTemplate}`};
|
||||
${({ gridTemplateRows }) =>
|
||||
gridTemplateRows && `grid-template-rows: ${gridTemplateRows}`};
|
||||
${({ gridTemplateColumns }) =>
|
||||
gridTemplateColumns && `grid-template-columns: ${gridTemplateColumns}`};
|
||||
${({ gap }) => gap && `gap: ${gap}`};
|
||||
${({ rowGap }) => rowGap && `row-gap: ${rowGap}`};
|
||||
${({ columnGap }) => columnGap && `column-gap: ${columnGap}`};
|
||||
|
||||
${({ alignItems }) => alignItems && `align-items: ${alignItems}`};
|
||||
${({ justifyContent }) =>
|
||||
justifyContent && `justify-content: ${justifyContent}`};
|
||||
${({ alignSelf }) => alignSelf && `align-self: ${alignSelf}`};
|
||||
${({ justifySelf }) => justifySelf && `justify-self: ${justifySelf}`};
|
||||
|
||||
${({ boxSizing }) => boxSizing && `box-sizing: ${boxSizing}`};
|
||||
${({ width }) => width && `width: ${width}`};
|
||||
${({ minWidth }) => minWidth && `min-width: ${minWidth}`};
|
||||
${({ maxWidth }) => maxWidth && `max-width: ${maxWidth}`};
|
||||
${({ height }) => height && `height: ${height}`};
|
||||
${({ minHeight }) => minHeight && `min-height: ${minHeight}`};
|
||||
${({ maxHeight }) => maxHeight && `max-height: ${maxHeight}`};
|
||||
|
||||
${({ margin }) => margin && `margin: ${margin}`};
|
||||
${({ marginTop }) => marginTop && `margin-top: ${marginTop}`};
|
||||
${({ marginRight }) => marginRight && `margin-right: ${marginRight}`};
|
||||
${({ marginBottom }) => marginBottom && `margin-bottom: ${marginBottom}`};
|
||||
${({ marginLeft }) => marginLeft && `margin-left: ${marginLeft}`};
|
||||
${({ padding }) => padding && `padding: ${padding}`};
|
||||
${({ paddingTop }) => paddingTop && `padding-top: ${paddingTop}`};
|
||||
${({ paddingRight }) => paddingRight && `padding-right: ${paddingRight}`};
|
||||
${({ paddingBottom }) => paddingBottom && `padding-bottom: ${paddingBottom}`};
|
||||
${({ paddingLeft }) => paddingLeft && `padding-left: ${paddingLeft}`};
|
||||
|
||||
${({ overflow }) => overflow && `overflow: ${overflow}`};
|
||||
${({ overflowX }) => overflowX && `overflow-x: ${overflowX}`};
|
||||
${({ overflowY }) => overflowY && `overflow-y: ${overflowY}`};
|
||||
|
||||
${({ border }) => border && `border: ${border}`};
|
||||
${({ borderRadius }) => borderRadius && `border-radius: ${borderRadius}`};
|
||||
${({ boxShadow }) => boxShadow && `box-shadow: ${boxShadow}`};
|
||||
|
||||
${({ color }) => color && `color: ${color}`};
|
||||
${({ background }) => background && `background: ${background}`};
|
||||
|
||||
${({ fontFamily }) => fontFamily && `font-family: ${fontFamily}`};
|
||||
${({ fontSize }) => fontSize && `font-size: ${fontSize}`};
|
||||
${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`};
|
||||
${({ fontStyle }) => fontStyle && `font-style: ${fontStyle}`};
|
||||
${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}`};
|
||||
${({ letterSpacing }) => letterSpacing && `letter-spacing: ${letterSpacing}`};
|
||||
${({ textAlign }) => textAlign && `text-align: ${textAlign}`};
|
||||
${({ textDecoration }) =>
|
||||
textDecoration && `text-decoration: ${textDecoration}`};
|
||||
`;
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Spinner } from '..';
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type ButtonProps = {
|
||||
color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
|
||||
size?: 'small' | 'big';
|
||||
variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
|
||||
type?: 'submit' | 'button' | 'reset';
|
||||
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
iconRight?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
fullWidth?: boolean;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const Button = ({
|
||||
color,
|
||||
size = 'small',
|
||||
variant = 'text',
|
||||
type = 'button',
|
||||
iconLeft,
|
||||
iconRight,
|
||||
fullWidth = false,
|
||||
loading = false,
|
||||
disabled = false,
|
||||
text,
|
||||
onClick,
|
||||
}: ButtonProps) => {
|
||||
return (
|
||||
<Wrapper
|
||||
color={color}
|
||||
size={size}
|
||||
variant={variant}
|
||||
type={type}
|
||||
iconLeft={iconLeft || undefined}
|
||||
iconRight={iconRight || undefined}
|
||||
fullWidth={fullWidth}
|
||||
load={loading}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
{iconLeft && <span className='icon left'>{iconLeft}</span>}
|
||||
{text}
|
||||
{iconRight && !loading && <span className='icon right'>{iconRight}</span>}
|
||||
{loading && (
|
||||
<span>
|
||||
<Spinner color='white' />
|
||||
</span>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,231 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
|
||||
size?: 'small' | 'big';
|
||||
variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
|
||||
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
iconRight?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
load?: boolean;
|
||||
disabled?: boolean;
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.button<WrapperProps>`
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
|
||||
.icon svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
${({ iconLeft, iconRight, load }) => {
|
||||
if (iconLeft || iconRight || load)
|
||||
return css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
return '';
|
||||
}}
|
||||
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon.left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.icon.right {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.lds-dual-ring {
|
||||
display: inline !important;
|
||||
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
${({ size }) => {
|
||||
switch (size) {
|
||||
case 'small':
|
||||
return css`
|
||||
padding: 0.625rem 1.875rem;
|
||||
font-size: 1rem;
|
||||
|
||||
.icon svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.lds-dual-ring {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
|
||||
&:after {
|
||||
width: 0.5rem !important;
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
case 'big':
|
||||
return css`
|
||||
padding: 0.625rem 1.875rem;
|
||||
font-size: 1.25rem;
|
||||
|
||||
.icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.lds-dual-ring {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
|
||||
&:after {
|
||||
width: 0.75rem !important;
|
||||
height: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
padding: 0.625rem 1.875rem;
|
||||
font-size: 1rem;
|
||||
|
||||
.icon svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.lds-dual-ring {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
|
||||
&:after {
|
||||
width: 0.5rem !important;
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ fullWidth }) =>
|
||||
fullWidth &&
|
||||
css`
|
||||
width: 100%;
|
||||
font-size: 1.25rem;
|
||||
|
||||
.icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.lds-dual-ring {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
`};
|
||||
|
||||
${({ variant, color, theme, disabled }) => {
|
||||
switch (variant) {
|
||||
case 'primary-action':
|
||||
return css`
|
||||
background: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
color: ${theme.colors.white.main};
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.white.main};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${!disabled
|
||||
? theme.colors[color].dark
|
||||
: theme.colors[color].light};
|
||||
}
|
||||
`;
|
||||
case 'secondary-action':
|
||||
return css`
|
||||
background: ${theme.colors[color].light};
|
||||
color: ${!disabled ? '#262628' : theme.colors[color].light};
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${!disabled ? '#262628' : theme.colors[color].light};
|
||||
}
|
||||
`;
|
||||
case 'outlined':
|
||||
return css`
|
||||
background: none;
|
||||
color: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
border: 2px solid
|
||||
${!disabled ? theme.colors[color].main : theme.colors[color].light};
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${!disabled ? theme.colors[color].main : 'none'};
|
||||
color: ${!disabled
|
||||
? theme.colors.white.main
|
||||
: theme.colors[color].light};
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${!disabled
|
||||
? theme.colors.white.main
|
||||
: theme.colors[color].light};
|
||||
}
|
||||
}
|
||||
`;
|
||||
case 'text':
|
||||
return css`
|
||||
background: none;
|
||||
color: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
padding: 0;
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
background: none;
|
||||
color: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
padding: 0;
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${!disabled
|
||||
? theme.colors[color].main
|
||||
: theme.colors[color].light};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ disabled }) =>
|
||||
disabled &&
|
||||
css`
|
||||
cursor: default;
|
||||
`}
|
||||
`;
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Box, Text } from '..';
|
||||
import { CategoryOutput } from '../../graphql/types';
|
||||
import { theme } from '../../themes';
|
||||
|
||||
type CategoryCardProps = {
|
||||
category: CategoryOutput;
|
||||
selectable?: boolean;
|
||||
selected?: boolean;
|
||||
toggleSelect?: () => void;
|
||||
color: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
};
|
||||
|
||||
const CategoryCard = ({
|
||||
category,
|
||||
selectable = false,
|
||||
selected = false,
|
||||
toggleSelect = () => {},
|
||||
color,
|
||||
}: CategoryCardProps) => {
|
||||
return (
|
||||
<Box
|
||||
padding='10px'
|
||||
background='white'
|
||||
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
|
||||
border={selected ? `2px solid ${theme.colors[color].main}` : undefined}
|
||||
onClick={selectable ? toggleSelect : () => {}}
|
||||
display='grid'
|
||||
gridTemplateRows='auto'
|
||||
alignItems='center'
|
||||
rowGap='10px'
|
||||
borderRadius='10px'
|
||||
cursor='pointer'
|
||||
>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='title' weight='bold'>
|
||||
{category.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='body'>{category.description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryCard;
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Wrapper } from './styles';
|
||||
import { Text } from '..';
|
||||
import { Check } from '../../assets';
|
||||
|
||||
type CheckBoxProps = {
|
||||
className?: string;
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
label: string;
|
||||
name: string;
|
||||
checked: boolean;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const CheckBox = ({
|
||||
label,
|
||||
name,
|
||||
checked,
|
||||
onClick,
|
||||
...props
|
||||
}: CheckBoxProps) => {
|
||||
return (
|
||||
<Wrapper checked={checked} {...props} onClick={onClick}>
|
||||
<div className='checkbox'>
|
||||
<Check />
|
||||
</div>
|
||||
<Text variant='body'>{label}</Text>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckBox;
|
||||
@@ -0,0 +1,74 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
checked: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
user-select: none;
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
visibility: ${({ checked }) => (checked ? 'visible' : 'hidden')};
|
||||
}
|
||||
}
|
||||
|
||||
${({ checked, color, theme }) => {
|
||||
if (!checked)
|
||||
return css`
|
||||
.checkbox {
|
||||
border: 2px solid ${theme.colors.black.main};
|
||||
background: ${theme.colors.white.main};
|
||||
}
|
||||
`;
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
.checkbox {
|
||||
border: none;
|
||||
background: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
.checkbox {
|
||||
border: none;
|
||||
background: ${theme.colors.productOwner.main};
|
||||
}
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
.checkbox {
|
||||
border: none;
|
||||
background: ${theme.colors.developer.main};
|
||||
}
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
.checkbox {
|
||||
border: none;
|
||||
background: ${theme.colors.admin.main};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
.checkbox {
|
||||
border: none;
|
||||
background: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -0,0 +1,27 @@
|
||||
import { Wrapper } from './styles';
|
||||
import { Text } from '..';
|
||||
|
||||
type ChipProps = {
|
||||
variant?: 'outlined' | 'filled';
|
||||
color:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
text: string;
|
||||
};
|
||||
|
||||
const Chip = ({ variant = 'outlined', color, text }: ChipProps) => {
|
||||
return (
|
||||
<Wrapper variant={variant} color={color}>
|
||||
<Text variant='caption' weight='bold'>
|
||||
{text}
|
||||
</Text>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chip;
|
||||
@@ -0,0 +1,32 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
variant: 'outlined' | 'filled';
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
${({ variant, color, theme }) =>
|
||||
variant === 'outlined'
|
||||
? css`
|
||||
border: 2px solid ${theme.colors[color].main};
|
||||
color: ${theme.colors[color].main};
|
||||
`
|
||||
: css`
|
||||
background: ${theme.colors[color].main};
|
||||
color: ${theme.colors.white.main};
|
||||
`}
|
||||
`;
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Wrapper } from './styles';
|
||||
import { Text } from '..';
|
||||
|
||||
type ContextMenuProps = {
|
||||
className?: string;
|
||||
items: Array<{ label: string; action?: () => void }>;
|
||||
component: string;
|
||||
};
|
||||
|
||||
const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const parentComponentRef = useRef<HTMLDivElement>();
|
||||
|
||||
useEffect(() => {
|
||||
parentComponentRef.current = document.querySelector(`#${component}`) as HTMLDivElement;
|
||||
|
||||
const openMenu = () => setOpen(true);
|
||||
const closeMenu = () => setOpen(false);
|
||||
|
||||
parentComponentRef.current?.addEventListener(
|
||||
'mouseenter',
|
||||
openMenu
|
||||
);
|
||||
parentComponentRef.current?.addEventListener(
|
||||
'mouseleave',
|
||||
closeMenu
|
||||
);
|
||||
|
||||
return () => {
|
||||
parentComponentRef.current?.removeEventListener('mouseenter', openMenu);
|
||||
parentComponentRef.current?.removeEventListener('mouseleave', closeMenu);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
className={className}
|
||||
top={(parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect().top + 30}
|
||||
left={(parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect().left + 10}
|
||||
>
|
||||
{open && (
|
||||
<ul>
|
||||
{items.map(({ label, action }) => (
|
||||
<li
|
||||
onClick={() => {
|
||||
if (action) {
|
||||
setOpen(false);
|
||||
action();
|
||||
}
|
||||
}}
|
||||
key={label}
|
||||
>
|
||||
<Text variant='caption'>{label}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContextMenu;
|
||||
@@ -0,0 +1,25 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
top: number;
|
||||
left: number;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
ul {
|
||||
position: fixed;
|
||||
top: ${({ top }) => top}px;
|
||||
left: ${({ left }) => left}px;
|
||||
background: #1f1b1b;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 0.5rem;
|
||||
color: ${({ theme }) => theme.colors.white.main};
|
||||
border-radius: 3px;
|
||||
padding: 5px 20px 5px 10px;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Box, Text } from '..';
|
||||
import { Backend, Frontend } from '../../assets';
|
||||
import { FeatureOutput } from '../../graphql/types';
|
||||
import { theme } from '../../themes';
|
||||
|
||||
type FeatureCardProps = {
|
||||
feature: FeatureOutput;
|
||||
selectable?: boolean;
|
||||
selected?: boolean;
|
||||
toggleSelect?: () => void;
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
};
|
||||
|
||||
const FeatureCard = ({
|
||||
feature,
|
||||
selectable = false,
|
||||
selected = false,
|
||||
toggleSelect = () => {},
|
||||
color,
|
||||
}: FeatureCardProps) => {
|
||||
return (
|
||||
<Box
|
||||
padding='10px'
|
||||
background='white'
|
||||
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
|
||||
border={
|
||||
selected
|
||||
? `2px solid ${color ? theme.colors[color].main : '#3CC13B'}`
|
||||
: undefined
|
||||
}
|
||||
onClick={selectable ? toggleSelect : () => {}}
|
||||
display='grid'
|
||||
gridTemplateRows='auto'
|
||||
alignItems='center'
|
||||
rowGap='10px'
|
||||
borderRadius='10px'
|
||||
cursor={selectable ? 'pointer' : undefined}
|
||||
>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='title' weight='bold'>
|
||||
{feature.name}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box
|
||||
marginRight={
|
||||
feature.featureType === 'fullstack' ? '10px' : undefined
|
||||
}
|
||||
>
|
||||
{feature.featureType === 'frontend' ||
|
||||
(feature.featureType === 'fullstack' && <Frontend />)}
|
||||
</Box>
|
||||
<Box>
|
||||
{feature.featureType === 'backend' ||
|
||||
(feature.featureType === 'fullstack' && <Backend />)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='body'>{feature.description}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text variant='title'>${feature.price}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureCard;
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Handle, Position } from 'reactflow';
|
||||
import { Box, Text } from '..';
|
||||
import { FeatureOutput } from '../../graphql/types';
|
||||
|
||||
type FrontendFeatureCardProps = {
|
||||
data: FeatureOutput;
|
||||
isConnectable?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const FrontendFeatureCard = ({
|
||||
data,
|
||||
isConnectable = false,
|
||||
className,
|
||||
}: FrontendFeatureCardProps) => {
|
||||
return (
|
||||
<>
|
||||
<Handle type="target" position={Position.Top} isConnectable={isConnectable} />
|
||||
<Box
|
||||
className={className}
|
||||
padding='10px'
|
||||
background='white'
|
||||
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
|
||||
display='grid'
|
||||
gridTemplateRows='auto'
|
||||
alignItems='center'
|
||||
rowGap='10px'
|
||||
borderRadius='10px'
|
||||
cursor='pointer'
|
||||
textAlign='left'
|
||||
>
|
||||
<Box display='flex' flexDirection='row' alignItems='center'>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='title' weight='bold'>
|
||||
{data.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
justifyContent='space-between'
|
||||
padding='5px 20px'
|
||||
>
|
||||
{data.wireframes?.map((wireframe) => (
|
||||
<img
|
||||
src={wireframe.src}
|
||||
alt={wireframe.name}
|
||||
key={wireframe.id}
|
||||
style={{ width: '100px', height: 'auto', marginRight: '10px' }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Handle type="source" position={Position.Bottom} isConnectable={isConnectable} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FrontendFeatureCard;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type IconButtonProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
size?: 'small' | 'medium' | 'big';
|
||||
icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const IconButton = ({
|
||||
color,
|
||||
size = 'medium',
|
||||
icon,
|
||||
onClick,
|
||||
}: IconButtonProps) => {
|
||||
return (
|
||||
<Wrapper color={color} size={size} onClick={onClick}>
|
||||
{icon}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconButton;
|
||||
@@ -0,0 +1,75 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
size?: 'small' | 'medium' | 'big';
|
||||
icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.button<WrapperProps>`
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
background: ${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main};
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
path {
|
||||
stroke: ${({ theme }) => theme.colors.white.main};
|
||||
}
|
||||
}
|
||||
|
||||
${({ size }) => {
|
||||
switch (size) {
|
||||
case 'small':
|
||||
return css`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
svg {
|
||||
width: 12.5px;
|
||||
height: 12.5px;
|
||||
}
|
||||
`;
|
||||
case 'medium':
|
||||
return css`
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
||||
svg {
|
||||
width: 17.5px;
|
||||
height: 17.5px;
|
||||
}
|
||||
`;
|
||||
case 'big':
|
||||
return css`
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
svg {
|
||||
width: 24.5px;
|
||||
height: 24.5px;
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
svg {
|
||||
width: 12.5px;
|
||||
height: 12.5px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Wrapper } from './styles';
|
||||
import { Upload, Close } from '../../assets';
|
||||
|
||||
type ImagePreviewProps = {
|
||||
className?: string;
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white';
|
||||
error?: boolean;
|
||||
errorMessage?: string;
|
||||
name?: string;
|
||||
image: { name: string; src: string } | undefined;
|
||||
deletable?: boolean;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onDelete?: () => void;
|
||||
};
|
||||
|
||||
const ImagePreview = ({
|
||||
name,
|
||||
image,
|
||||
deletable = false,
|
||||
onChange,
|
||||
onDelete,
|
||||
...props
|
||||
}: ImagePreviewProps) => {
|
||||
return (
|
||||
<Wrapper image={image} deletable={deletable} {...props}>
|
||||
{image ? (
|
||||
<div className='preview'>
|
||||
{deletable && (
|
||||
<div className='close'>
|
||||
<Close onClick={onDelete} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className='upload'>
|
||||
<input type='file' name={name} onChange={onChange} />
|
||||
<Upload />
|
||||
</div>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImagePreview;
|
||||
@@ -0,0 +1,99 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white';
|
||||
error?: boolean;
|
||||
deletable?: boolean;
|
||||
image: { name: string; src: string } | undefined;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
.preview {
|
||||
width: 175px;
|
||||
height: 325px;
|
||||
background: url(${({ image }) => image?.src});
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
padding: 150px 30px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
${({ deletable, color, theme }) =>
|
||||
deletable &&
|
||||
css`
|
||||
border: 2px solid ${theme.colors[color || 'client'].main};
|
||||
`}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
background: ${({ color, theme }) => theme.colors[color || 'client'].main};
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -11.5px;
|
||||
right: -11.5px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
stroke: ${({ theme }) => theme.colors.white.main};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload {
|
||||
padding: 150px 30px;
|
||||
position: relative;
|
||||
border: 2px solid
|
||||
${({ color, theme }) => theme.colors[color || 'client'].main};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
path {
|
||||
stroke: ${({ color, theme }) => theme.colors[color || 'client'].main};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Text } from '..';
|
||||
import { Upload } from '../../assets';
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type InputProps = {
|
||||
className?: string;
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white';
|
||||
error?: boolean;
|
||||
errorMessage?: string;
|
||||
value?: string | number;
|
||||
label?: string;
|
||||
name?: string;
|
||||
type?: 'text' | 'email' | 'tel' | 'password' | 'file' | 'number';
|
||||
file?: boolean;
|
||||
placeholder?: string;
|
||||
fullWidth?: boolean;
|
||||
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
const Input = ({
|
||||
type = 'text',
|
||||
file = false,
|
||||
color = 'client',
|
||||
label,
|
||||
name,
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
error,
|
||||
errorMessage,
|
||||
...props
|
||||
}: InputProps) => {
|
||||
return (
|
||||
<Wrapper label={label} error={error} type={type} color={color} {...props}>
|
||||
<div className='info'>
|
||||
{label && (
|
||||
<Text variant='body' weight='bold' className='label'>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
{error && errorMessage && (
|
||||
<Text variant='body' color='error' className='error-message'>
|
||||
{errorMessage}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<div className='input'>
|
||||
<div>
|
||||
{type === 'file' && (
|
||||
<span className='icon left'>
|
||||
<Upload />
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
name={name}
|
||||
accept={type === 'file' && !file ? 'image/*' : undefined}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Input;
|
||||
@@ -0,0 +1,297 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'gray'
|
||||
| 'white';
|
||||
error?: boolean;
|
||||
errorMessage?: string;
|
||||
type?: 'text' | 'email' | 'tel' | 'password' | 'file' | 'number';
|
||||
label?: string;
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
.input {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
color: ${({ theme }) => theme.colors.black.main};
|
||||
|
||||
div {
|
||||
background: ${({ theme }) => theme.colors.white.main};
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-bottom: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
background: ${({ theme }) => theme.colors.gray.dark};
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.label {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: ${({ theme }) => theme.colors.black.main};
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
${({ type }) => {
|
||||
if (type === 'file')
|
||||
return css`
|
||||
.input div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
return '';
|
||||
}}
|
||||
|
||||
.icon {
|
||||
${({ type }) => type === 'file' && `cursor: pointer`};
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon.left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
${({ color, theme }) => {
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.client.light};
|
||||
|
||||
&:focus-within {
|
||||
background: ${theme.colors.client.main};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.client.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.productOwner.light};
|
||||
|
||||
&:focus-within {
|
||||
background: ${theme.colors.productOwner.main};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.productOwner.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.productOwner.main};
|
||||
}
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.developer.light};
|
||||
|
||||
&:focus-within {
|
||||
background: ${theme.colors.developer.main};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.developer.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.developer.main};
|
||||
}
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.admin.light};
|
||||
|
||||
&:focus-within {
|
||||
background: ${theme.colors.admin.main};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.admin.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.admin.main};
|
||||
}
|
||||
`;
|
||||
case 'success':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.success.main};
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.success.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.success.main};
|
||||
}
|
||||
`;
|
||||
case 'warning':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.warning.main};
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.warning.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.warning.main};
|
||||
}
|
||||
`;
|
||||
case 'error':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.error.main};
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.error.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.error.main};
|
||||
}
|
||||
`;
|
||||
case 'black':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.black.main};
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.black.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'white':
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.white.main};
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.white.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.white.main};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
.input {
|
||||
background: ${theme.colors.client.light};
|
||||
|
||||
&:focus-within {
|
||||
background: ${theme.colors.client.main};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.client.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ error, theme }) =>
|
||||
error &&
|
||||
css`
|
||||
.info p {
|
||||
background: ${theme.colors.error.main};
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.input {
|
||||
background: ${theme.colors.error.main};
|
||||
|
||||
&:focus-within {
|
||||
background: ${theme.colors.error.main};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
color: ${theme.colors.error.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.error.main};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ fullWidth }) =>
|
||||
fullWidth &&
|
||||
css`
|
||||
width: 100%;
|
||||
font-size: 1.25rem;
|
||||
|
||||
.icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
`};
|
||||
`;
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type LinkProps = {
|
||||
href?: string;
|
||||
url?: boolean;
|
||||
children?: React.ReactNode | JSX.Element | string;
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white'
|
||||
| string;
|
||||
selected?: boolean;
|
||||
className?: string;
|
||||
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
onClick?: () => void;
|
||||
target?: '_self' | '_blank';
|
||||
};
|
||||
|
||||
const Link = ({
|
||||
href,
|
||||
url = false,
|
||||
children,
|
||||
iconLeft,
|
||||
selected = false,
|
||||
target = '_self',
|
||||
...props
|
||||
}: LinkProps) => {
|
||||
return (
|
||||
<Wrapper {...props} selected={selected}>
|
||||
{href && !url ? (
|
||||
<RouterLink to={href} target={target}>
|
||||
{iconLeft && <span className='icon left'>{iconLeft}</span>}
|
||||
{children}
|
||||
</RouterLink>
|
||||
) : (
|
||||
<a href={href} target={target}>
|
||||
{iconLeft && <span className='icon left'>{iconLeft}</span>}
|
||||
{children}
|
||||
</a>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Link;
|
||||
@@ -0,0 +1,230 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white'
|
||||
| string;
|
||||
selected: boolean;
|
||||
iconLeft?: React.SVGProps<SVGSVGElement>;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
display: inline;
|
||||
|
||||
a {
|
||||
text-decoration: ${({ selected }) => (selected ? 'underline' : 'none')};
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
${({ color, theme }) => {
|
||||
if (!color)
|
||||
return css`
|
||||
color: #3e66fb;
|
||||
|
||||
a {
|
||||
color: #3e66fb;
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: #3e66fb;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #3e66fb;
|
||||
}
|
||||
`;
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
color: ${theme.colors.client.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.client.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.client.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
color: ${theme.colors.productOwner.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.productOwner.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.productOwner.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.productOwner.main};
|
||||
}
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
color: ${theme.colors.developer.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.developer.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.developer.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.developer.main};
|
||||
}
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
color: ${theme.colors.admin.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.admin.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.admin.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.admin.main};
|
||||
}
|
||||
`;
|
||||
case 'success':
|
||||
return css`
|
||||
color: ${theme.colors.success.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.success.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.success.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.success.main};
|
||||
}
|
||||
`;
|
||||
case 'warning':
|
||||
return css`
|
||||
color: ${theme.colors.warning.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.warning.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.warning.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.warning.main};
|
||||
}
|
||||
`;
|
||||
case 'error':
|
||||
return css`
|
||||
color: ${theme.colors.error.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.error.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.error.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.error.main};
|
||||
}
|
||||
`;
|
||||
case 'black':
|
||||
return css`
|
||||
color: ${theme.colors.black.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.black.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.black.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'white':
|
||||
return css`
|
||||
color: ${theme.colors.white.main};
|
||||
|
||||
a {
|
||||
color: ${theme.colors.white.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.white.main};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${theme.colors.white.main};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
color: ${color};
|
||||
|
||||
a {
|
||||
color: ${color};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${color};
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ${color};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ iconLeft }) => {
|
||||
if (iconLeft)
|
||||
return css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
return '';
|
||||
}}
|
||||
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon.left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,69 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Wrapper } from './styles';
|
||||
import { Text } from '..';
|
||||
|
||||
type MenuProps = {
|
||||
className?: string;
|
||||
items: Array<{
|
||||
icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
avoid?: boolean;
|
||||
label: string;
|
||||
action?: () => void;
|
||||
}>;
|
||||
component: string;
|
||||
};
|
||||
|
||||
const Menu = ({ items, component, className }: MenuProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const componentRef = useRef<HTMLDivElement>(null);
|
||||
const parentComponentRef = useRef<HTMLDivElement>();
|
||||
|
||||
const openMenu = () => setOpen(true);
|
||||
const closeMenu = () => setOpen(false);
|
||||
|
||||
useEffect(() => {
|
||||
parentComponentRef.current = document.querySelector(`#${component}`) as HTMLDivElement;
|
||||
|
||||
parentComponentRef.current?.addEventListener('mouseenter', openMenu);
|
||||
componentRef.current?.addEventListener('mouseleave', closeMenu);
|
||||
|
||||
return () => {
|
||||
parentComponentRef.current?.removeEventListener('mouseenter', openMenu);
|
||||
componentRef.current?.removeEventListener('mouseleave', closeMenu);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
ref={componentRef}
|
||||
className={className}
|
||||
top={
|
||||
(parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect().top + 30
|
||||
}
|
||||
left={
|
||||
(parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect()?.left
|
||||
}
|
||||
>
|
||||
{open && (
|
||||
<ul>
|
||||
{items.map(({ icon, label, avoid, action }) => (
|
||||
<li
|
||||
onClick={() => {
|
||||
if (action) {
|
||||
setOpen(false);
|
||||
action();
|
||||
}
|
||||
}}
|
||||
key={label}
|
||||
>
|
||||
<span className={`icon ${avoid ? 'avoid' : ''}`}>{icon}</span>
|
||||
<Text color={avoid ? 'error' : undefined}>{label}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Menu;
|
||||
@@ -0,0 +1,43 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
top: number;
|
||||
left: number;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
ul {
|
||||
position: fixed;
|
||||
top: ${({ top }) => top}px;
|
||||
left: ${({ left }) => left}px;
|
||||
background: ${({ theme }) => theme.colors.white.main};
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 0.5rem;
|
||||
border-radius: 3px;
|
||||
padding: 15px 30px 15px 15px;
|
||||
box-shadow: 1px 1px 15px 0px rgba(50, 59, 105, 0.25);
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
column-gap: 10px;
|
||||
justify-content: flex-start;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg path {
|
||||
stroke: ${({ theme }) => theme.colors.black.main};
|
||||
}
|
||||
|
||||
&.avoid svg path {
|
||||
stroke: ${({ theme }) => theme.colors.error.main};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,54 @@
|
||||
import { theme } from '../../themes';
|
||||
import { Box, Button, Text } from '..';
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type ModalProps = {
|
||||
color: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
title: string;
|
||||
description: string;
|
||||
children?: React.ReactNode | JSX.Element | string;
|
||||
onConfirm: () => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const Modal = ({
|
||||
color,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
onConfirm,
|
||||
onClose,
|
||||
}: ModalProps) => {
|
||||
return (
|
||||
<Wrapper>
|
||||
<Box
|
||||
background={theme.colors.white.main}
|
||||
borderRadius='10px'
|
||||
padding='20px'
|
||||
display='grid'
|
||||
gridTemplateRows='auto'
|
||||
alignItems='center'
|
||||
rowGap='1rem'
|
||||
>
|
||||
<Text variant='headline' weight='bold' color={color}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text variant='body' color={theme.colors.black.main}>
|
||||
{description}
|
||||
</Text>
|
||||
{children}
|
||||
<Box
|
||||
display='grid'
|
||||
gridTemplateColumns='repeat(2, auto)'
|
||||
justifyContent='flex-end'
|
||||
columnGap='1rem'
|
||||
>
|
||||
<Button color={color} text='Confirm' onClick={onConfirm} />
|
||||
<Button color={color} text='Cancel' onClick={onClose} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
@@ -0,0 +1,14 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
@@ -0,0 +1,172 @@
|
||||
import { useReactiveVar } from '@apollo/client';
|
||||
import { useNavigate, useLocation } from 'react-router';
|
||||
import { roleVar, tokenVar, userVar } from '../../graphql/state';
|
||||
import { Wrapper } from './styles';
|
||||
import { Avatar, Link, Menu, Text } from '..';
|
||||
import { Settings, Logout, Logo } from '../../assets';
|
||||
|
||||
const Navbar = () => {
|
||||
const user = useReactiveVar(userVar);
|
||||
const role = useReactiveVar(roleVar);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<Wrapper color={role}>
|
||||
<Link href='/'>
|
||||
<Logo />
|
||||
</Link>
|
||||
<nav>
|
||||
{role === 'admin' && (
|
||||
<>
|
||||
<Link
|
||||
href='/clients'
|
||||
color={
|
||||
new RegExp('clients', 'i').test(location.pathname)
|
||||
? 'admin'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('clients', 'i').test(location.pathname)}
|
||||
>
|
||||
Clients
|
||||
</Link>
|
||||
<Link
|
||||
href='/product-owners'
|
||||
color={
|
||||
new RegExp('product-owners', 'i').test(location.pathname)
|
||||
? 'admin'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('product-owners', 'i').test(
|
||||
location.pathname
|
||||
)}
|
||||
>
|
||||
Product Owners
|
||||
</Link>
|
||||
<Link
|
||||
href='/developers'
|
||||
color={
|
||||
new RegExp('developers', 'i').test(location.pathname)
|
||||
? 'admin'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('developers', 'i').test(location.pathname)}
|
||||
>
|
||||
Developers
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{role === 'developer' && (
|
||||
<>
|
||||
<Link
|
||||
href='/project'
|
||||
color={
|
||||
new RegExp('project', 'i').test(location.pathname)
|
||||
? 'developer'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('project', 'i').test(location.pathname)}
|
||||
>
|
||||
Projects
|
||||
</Link>
|
||||
<Link
|
||||
href='/template'
|
||||
color={
|
||||
new RegExp('template', 'i').test(location.pathname)
|
||||
? 'developer'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('template', 'i').test(location.pathname)}
|
||||
>
|
||||
Templates
|
||||
</Link>
|
||||
<Link
|
||||
href='/feature'
|
||||
color={
|
||||
new RegExp('feature', 'i').test(location.pathname)
|
||||
? 'developer'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('feature', 'i').test(location.pathname)}
|
||||
>
|
||||
Features
|
||||
</Link>
|
||||
<Link
|
||||
href='/category'
|
||||
color={
|
||||
new RegExp('category', 'i').test(location.pathname)
|
||||
? 'developer'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('category', 'i').test(location.pathname)}
|
||||
>
|
||||
Categories
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{role === 'productOwner' && (
|
||||
<>
|
||||
<Link
|
||||
href='/project'
|
||||
color={
|
||||
new RegExp('project', 'i').test(location.pathname)
|
||||
? 'productOwner'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('project', 'i').test(location.pathname)}
|
||||
>
|
||||
Projects
|
||||
</Link>
|
||||
<Link
|
||||
href='/template'
|
||||
color={
|
||||
new RegExp('template', 'i').test(location.pathname)
|
||||
? 'productOwner'
|
||||
: 'black'
|
||||
}
|
||||
selected={new RegExp('template', 'i').test(location.pathname)}
|
||||
>
|
||||
Templates
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
<div className='menu'></div>
|
||||
<div className='user' id='user'>
|
||||
<Avatar
|
||||
text={
|
||||
(user?.firstName && user?.firstName[0].toLocaleUpperCase()) ||
|
||||
(role && role[0].toLocaleUpperCase()) ||
|
||||
'C'
|
||||
}
|
||||
color={role}
|
||||
/>
|
||||
<Text variant='body' weight='bold'>
|
||||
{user?.firstName} {user?.lastName}
|
||||
</Text>
|
||||
</div>
|
||||
<Menu
|
||||
component='user'
|
||||
items={[
|
||||
{
|
||||
icon: <Settings />,
|
||||
label: 'Settings',
|
||||
action: () => navigate('/settings'),
|
||||
},
|
||||
{
|
||||
icon: <Logout />,
|
||||
label: 'Logout',
|
||||
action: () => {
|
||||
tokenVar(undefined);
|
||||
localStorage.removeItem('token');
|
||||
navigate('/login');
|
||||
},
|
||||
avoid: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -0,0 +1,47 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
background: ${({ theme }) => theme.colors.white.main};
|
||||
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 15px 45px 15px 120px;
|
||||
user-select: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
fill: ${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main};
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-grow: 1;
|
||||
margin-left: 60px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
column-gap: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { useReactiveVar } from '@apollo/client';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { tokenVar } from '../../graphql/state';
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const Protected = ({ children }: Props) => {
|
||||
const token = useReactiveVar(tokenVar);
|
||||
|
||||
return (
|
||||
<>
|
||||
{token ? children : <Navigate to='/login' />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Protected;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { useReactiveVar } from '@apollo/client';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { tokenVar } from '../../graphql/state';
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const Public = ({ children }: Props) => {
|
||||
const token = useReactiveVar(tokenVar);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!token ? children : <Navigate to='/' />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Public;
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Wrapper } from './styles';
|
||||
import { Search as SearchIcon } from '../../assets';
|
||||
|
||||
type SearchProps = {
|
||||
className?: string;
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white';
|
||||
value: string;
|
||||
fullWidth?: boolean;
|
||||
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
const Search = ({
|
||||
color = 'client',
|
||||
value,
|
||||
onChange,
|
||||
...props
|
||||
}: SearchProps) => {
|
||||
return (
|
||||
<Wrapper color={color} {...props}>
|
||||
<div className='search'>
|
||||
<div>
|
||||
<span className='icon left'>
|
||||
<SearchIcon />
|
||||
</span>
|
||||
<input
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder='Search'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
@@ -0,0 +1,170 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'gray'
|
||||
| 'white';
|
||||
type?: 'text' | 'email' | 'password' | 'file' | 'number';
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
.search {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
color: ${({ theme }) => theme.colors.black.main};
|
||||
|
||||
div {
|
||||
background: ${({ theme }) => theme.colors.white.main};
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: ${({ theme }) => theme.colors.black.main};
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon.left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
${({ color, theme }) => {
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.client.light};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.productOwner.light};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.productOwner.main};
|
||||
}
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.developer.light};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.developer.main};
|
||||
}
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.admin.light};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.admin.main};
|
||||
}
|
||||
`;
|
||||
case 'success':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.success.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.success.main};
|
||||
}
|
||||
`;
|
||||
case 'warning':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.warning.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.warning.main};
|
||||
}
|
||||
`;
|
||||
case 'error':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.error.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.error.main};
|
||||
}
|
||||
`;
|
||||
case 'black':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.black.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'white':
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.white.main};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.white.main};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
.search {
|
||||
background: ${theme.colors.client.light};
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
stroke: ${theme.colors.client.main};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ fullWidth }) =>
|
||||
fullWidth &&
|
||||
css`
|
||||
width: 100%;
|
||||
font-size: 1.25rem;
|
||||
|
||||
.icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
`};
|
||||
`;
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type SectionSelectorProps = {
|
||||
icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
text: string;
|
||||
color: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
selected?: boolean;
|
||||
disabled?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const SectionSelector = ({
|
||||
icon,
|
||||
text,
|
||||
color,
|
||||
selected = false,
|
||||
disabled = false,
|
||||
onClick,
|
||||
}: SectionSelectorProps) => {
|
||||
return (
|
||||
<Wrapper
|
||||
color={color}
|
||||
icon={icon}
|
||||
selected={selected}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon && <span className='icon left'>{icon}</span>}
|
||||
{text}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionSelector;
|
||||
@@ -0,0 +1,119 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
|
||||
color: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
selected: boolean;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 50px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
${({ icon }) => {
|
||||
if (icon)
|
||||
return css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
return '';
|
||||
}}
|
||||
|
||||
.icon svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon.left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
${({ color, theme, selected }) => {
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
color: ${selected
|
||||
? theme.colors.client.main
|
||||
: theme.colors.black.main};
|
||||
background: ${selected ? theme.colors.client.light : 'none'};
|
||||
|
||||
svg path {
|
||||
stroke: ${selected
|
||||
? theme.colors.client.main
|
||||
: theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
color: ${selected
|
||||
? theme.colors.productOwner.main
|
||||
: theme.colors.black.main};
|
||||
background: ${selected ? theme.colors.productOwner.light : 'none'};
|
||||
|
||||
svg path {
|
||||
stroke: ${selected
|
||||
? theme.colors.productOwner.main
|
||||
: theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
color: ${selected
|
||||
? theme.colors.developer.main
|
||||
: theme.colors.black.main};
|
||||
background: ${selected ? theme.colors.developer.light : 'none'};
|
||||
|
||||
svg path {
|
||||
stroke: ${selected
|
||||
? theme.colors.developer.main
|
||||
: theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
color: ${selected
|
||||
? theme.colors.admin.main
|
||||
: theme.colors.black.main};
|
||||
background: ${selected ? theme.colors.admin.light : 'none'};
|
||||
|
||||
svg path {
|
||||
stroke: ${selected
|
||||
? theme.colors.admin.main
|
||||
: theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
color: ${selected
|
||||
? theme.colors.client.main
|
||||
: theme.colors.black.main};
|
||||
background: ${selected ? theme.colors.client.light : 'none'};
|
||||
|
||||
svg path {
|
||||
stroke: ${selected
|
||||
? theme.colors.client.main
|
||||
: theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ disabled, theme }) =>
|
||||
disabled &&
|
||||
css`
|
||||
cursor: default;
|
||||
color: ${theme.colors.gray.main};
|
||||
background: none;
|
||||
|
||||
svg path {
|
||||
stroke: ${theme.colors.gray.main};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Wrapper } from './styles';
|
||||
import { Text } from '..';
|
||||
|
||||
type SelectProps = {
|
||||
className?: string;
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'white';
|
||||
error?: boolean;
|
||||
errorMessage?: string;
|
||||
options: Array<{ value: any; label: string }>;
|
||||
value: string;
|
||||
select?: any;
|
||||
name: string;
|
||||
label?: string;
|
||||
fullWidth?: boolean;
|
||||
onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
||||
onBlur?: (event: React.FocusEvent<HTMLSelectElement>) => void;
|
||||
};
|
||||
|
||||
const Select = ({
|
||||
color = 'client',
|
||||
label,
|
||||
name,
|
||||
value,
|
||||
select = null,
|
||||
options,
|
||||
onChange,
|
||||
onBlur,
|
||||
error,
|
||||
errorMessage,
|
||||
...props
|
||||
}: SelectProps) => {
|
||||
return (
|
||||
<Wrapper label={label} error={error} color={color} {...props}>
|
||||
<div className='info'>
|
||||
{label && (
|
||||
<Text variant='body' weight='bold' className='label'>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
{error && errorMessage && (
|
||||
<Text variant='body' color='error' className='error-message'>
|
||||
{errorMessage}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<div className='select'>
|
||||
<div>
|
||||
<select
|
||||
value={select || value}
|
||||
name={name}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Select;
|
||||
@@ -0,0 +1,154 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'black'
|
||||
| 'gray'
|
||||
| 'white';
|
||||
error?: boolean;
|
||||
errorMessage?: string;
|
||||
type?: 'text' | 'email' | 'password' | 'file' | 'number';
|
||||
label?: string;
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
.select {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
color: ${({ theme }) => theme.colors.black.main};
|
||||
|
||||
div {
|
||||
background: ${({ theme }) => theme.colors.white.main};
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-bottom: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
background: ${({ theme }) => theme.colors.gray.dark};
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.label {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: ${({ theme }) => theme.colors.black.main};
|
||||
background-image: url('../../assets/icons/chevron-down.svg');
|
||||
}
|
||||
|
||||
${({ color, theme }) => {
|
||||
switch (color) {
|
||||
case 'client':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.client.light};
|
||||
}
|
||||
`;
|
||||
case 'productOwner':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.productOwner.light};
|
||||
}
|
||||
`;
|
||||
case 'developer':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.developer.light};
|
||||
}
|
||||
`;
|
||||
case 'admin':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.admin.light};
|
||||
}
|
||||
`;
|
||||
case 'success':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.success.main};
|
||||
}
|
||||
`;
|
||||
case 'warning':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.warning.main};
|
||||
}
|
||||
`;
|
||||
case 'error':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.error.main};
|
||||
}
|
||||
`;
|
||||
case 'black':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.black.main};
|
||||
}
|
||||
`;
|
||||
case 'white':
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.white.main};
|
||||
}
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
.select {
|
||||
background: ${theme.colors.client.light};
|
||||
}
|
||||
`;
|
||||
}
|
||||
}}
|
||||
|
||||
${({ error, theme }) =>
|
||||
error &&
|
||||
css`
|
||||
.info p {
|
||||
background: ${theme.colors.error.main};
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.select {
|
||||
background: ${theme.colors.error.main};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ fullWidth }) =>
|
||||
fullWidth &&
|
||||
css`
|
||||
width: 100%;
|
||||
font-size: 1.25rem;
|
||||
`};
|
||||
`;
|
||||
@@ -0,0 +1,286 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router';
|
||||
import { useLazyQuery, useReactiveVar } from '@apollo/client';
|
||||
import { roleVar, userVar } from '../../graphql/state';
|
||||
import {
|
||||
Box,
|
||||
ContextMenu,
|
||||
IconButton,
|
||||
SupportSidebar,
|
||||
SidebarItem,
|
||||
} from '..';
|
||||
import { Add, Messaging } from '../../assets';
|
||||
import { Wrapper } from './styles';
|
||||
import {
|
||||
CategoryOutput,
|
||||
FeatureOutput,
|
||||
GetAllCategoriesQuery,
|
||||
GetAllCategoriesQueryVariables,
|
||||
GetAllFeaturesQuery,
|
||||
GetAllFeaturesQueryVariables,
|
||||
GetAllProjectsByClientIdQuery,
|
||||
GetAllProjectsByClientIdQueryVariables,
|
||||
GetAllProjectsQuery,
|
||||
GetAllProjectsQueryVariables,
|
||||
GetAllTemplatesQuery,
|
||||
GetAllTemplatesQueryVariables,
|
||||
ProjectOutput,
|
||||
TemplateOutput,
|
||||
} from '../../graphql/types';
|
||||
import { GET_ALL_CATEGORIES } from '../../graphql/category.api';
|
||||
import {
|
||||
GET_ALL_PROJECTS,
|
||||
GET_ALL_PROJECTS_BY_CLIENT_ID,
|
||||
} from '../../graphql/project.api';
|
||||
import { GET_ALL_TEMPLATES } from '../../graphql/template.api';
|
||||
import { GET_ALL_FEATURES } from '../../graphql/feature.api';
|
||||
|
||||
const Sidebar = () => {
|
||||
const role = useReactiveVar(roleVar);
|
||||
const currentUser = useReactiveVar(userVar);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [projects, setProjects] = useState<Array<ProjectOutput>>();
|
||||
const [templates, setTemplates] = useState<Array<TemplateOutput>>();
|
||||
const [features, setFeatures] = useState<Array<FeatureOutput>>();
|
||||
const [categories, setCategories] = useState<Array<CategoryOutput>>();
|
||||
const [supportSideBarOpen, setSupportSideBarOpen] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const [getProjectsByClientId] = useLazyQuery<
|
||||
GetAllProjectsByClientIdQuery,
|
||||
GetAllProjectsByClientIdQueryVariables
|
||||
>(GET_ALL_PROJECTS_BY_CLIENT_ID, {
|
||||
variables: {
|
||||
id: currentUser?.id!,
|
||||
},
|
||||
onCompleted({ getAllProjectsByClientId }) {
|
||||
setProjects(getAllProjectsByClientId);
|
||||
},
|
||||
});
|
||||
|
||||
const [getProjects] = useLazyQuery<
|
||||
GetAllProjectsQuery,
|
||||
GetAllProjectsQueryVariables
|
||||
>(GET_ALL_PROJECTS, {
|
||||
onCompleted({ getAllProjects }) {
|
||||
setProjects(getAllProjects);
|
||||
},
|
||||
});
|
||||
|
||||
const [getTemplates] = useLazyQuery<
|
||||
GetAllTemplatesQuery,
|
||||
GetAllTemplatesQueryVariables
|
||||
>(GET_ALL_TEMPLATES, {
|
||||
onCompleted({ getAllTemplates }) {
|
||||
setTemplates(getAllTemplates);
|
||||
},
|
||||
});
|
||||
|
||||
const [getFeatures] = useLazyQuery<
|
||||
GetAllFeaturesQuery,
|
||||
GetAllFeaturesQueryVariables
|
||||
>(GET_ALL_FEATURES, {
|
||||
onCompleted({ getAllFeatures }) {
|
||||
setFeatures(getAllFeatures);
|
||||
},
|
||||
});
|
||||
|
||||
const [getCategories] = useLazyQuery<
|
||||
GetAllCategoriesQuery,
|
||||
GetAllCategoriesQueryVariables
|
||||
>(GET_ALL_CATEGORIES, {
|
||||
onCompleted({ getAllCategories }) {
|
||||
setCategories(getAllCategories);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (/project/i.test(location.pathname)) {
|
||||
if (role !== 'client') getProjects();
|
||||
else getProjectsByClientId({ variables: { id: currentUser?.id! } });
|
||||
}
|
||||
|
||||
if (/template/i.test(location.pathname)) {
|
||||
getTemplates();
|
||||
}
|
||||
|
||||
if (/feature/i.test(location.pathname)) {
|
||||
getFeatures();
|
||||
}
|
||||
if (/category/i.test(location.pathname)) {
|
||||
getCategories();
|
||||
}
|
||||
|
||||
return () => {
|
||||
setProjects([]);
|
||||
setTemplates([]);
|
||||
setFeatures([]);
|
||||
setCategories([]);
|
||||
};
|
||||
}, [location.pathname]);
|
||||
|
||||
const showAddButton = (role: string, pathname: string) => {
|
||||
switch (role) {
|
||||
case 'client':
|
||||
return /project/i.test(pathname);
|
||||
case 'productOwner':
|
||||
return /template/i.test(pathname);
|
||||
case 'developer':
|
||||
return /feature/i.test(pathname) || /category/i.test(pathname);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper color={role}>
|
||||
{role !== 'admin' && (
|
||||
<>
|
||||
<Box display='flex' flexDirection='column'>
|
||||
{projects &&
|
||||
new RegExp(/project/, 'i').test(location.pathname) &&
|
||||
projects.map((project, index) => (
|
||||
<Box marginBottom='20px' key={project.id}>
|
||||
<div id={`project-${project.id}`}>
|
||||
<SidebarItem
|
||||
color={role}
|
||||
selected={
|
||||
new RegExp(project.id, 'i').test(location.pathname) ||
|
||||
(index === 0 && location.pathname === '/project')
|
||||
}
|
||||
text={project.name[0]}
|
||||
onClick={() => navigate(`/project/${project.id}`)}
|
||||
/>
|
||||
</div>
|
||||
<ContextMenu
|
||||
component={`project-${project.id}`}
|
||||
items={[{ label: project.name }]}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
{templates &&
|
||||
new RegExp(/template/, 'i').test(location.pathname) &&
|
||||
templates.map((template, index) => (
|
||||
<Box marginBottom='20px' key={template.id}>
|
||||
<div id={`template-${template.id}`}>
|
||||
<SidebarItem
|
||||
color={role}
|
||||
selected={
|
||||
new RegExp(template.id, 'i').test(location.pathname) ||
|
||||
(index === 0 && location.pathname === '/template')
|
||||
}
|
||||
text={template.name[0]}
|
||||
onClick={() => navigate(`/template/${template.id}`)}
|
||||
/>
|
||||
</div>
|
||||
<ContextMenu
|
||||
component={`template-${template.id}`}
|
||||
items={[{ label: template.name }]}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
{features &&
|
||||
new RegExp(/feature/, 'i').test(location.pathname) &&
|
||||
features.map((feature, index) => (
|
||||
<Box marginBottom='20px' key={feature.id}>
|
||||
<div id={`feature-${feature.id}`}>
|
||||
<SidebarItem
|
||||
color={role}
|
||||
selected={
|
||||
new RegExp(feature.id, 'i').test(location.pathname) ||
|
||||
(index === 0 && location.pathname === '/feature')
|
||||
}
|
||||
text={feature.name[0]}
|
||||
onClick={() => navigate(`/feature/${feature.id}`)}
|
||||
/>
|
||||
</div>
|
||||
<ContextMenu
|
||||
component={`feature-${feature.id}`}
|
||||
items={[{ label: feature.name }]}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
{categories &&
|
||||
new RegExp(/category/, 'i').test(location.pathname) &&
|
||||
categories.map((category, index) => (
|
||||
<Box marginBottom='20px' key={category.id}>
|
||||
<div id={`category-${category.id}`}>
|
||||
<SidebarItem
|
||||
color={role}
|
||||
selected={
|
||||
new RegExp(category.id, 'i').test(location.pathname) ||
|
||||
(index === 0 && location.pathname === '/category')
|
||||
}
|
||||
text={category.name[0]}
|
||||
onClick={() => navigate(`/category/${category.id}`)}
|
||||
/>
|
||||
</div>
|
||||
<ContextMenu
|
||||
component={`category-${category.id}`}
|
||||
items={[{ label: category.name }]}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Box display='flex' flexDirection='column'>
|
||||
{showAddButton(role as string, location.pathname) && (
|
||||
<Box marginBottom='20px'>
|
||||
<IconButton
|
||||
icon={<Add />}
|
||||
color={role}
|
||||
onClick={() => {
|
||||
switch (role) {
|
||||
case 'client':
|
||||
default: {
|
||||
if (/project/i.test(location.pathname)) {
|
||||
navigate('/add-project');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'productOwner': {
|
||||
if (/project/i.test(location.pathname)) {
|
||||
navigate('/add-project');
|
||||
}
|
||||
if (/template/i.test(location.pathname)) {
|
||||
navigate('/add-template');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'developer': {
|
||||
if (/feature/i.test(location.pathname)) {
|
||||
navigate('/add-feature');
|
||||
}
|
||||
if (/category/i.test(location.pathname)) {
|
||||
navigate('/add-category');
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{/project/i.test(location.pathname) &&
|
||||
['client', 'productOwner'].includes(role as string) && (
|
||||
<Box>
|
||||
<IconButton
|
||||
icon={<Messaging />}
|
||||
color={role}
|
||||
onClick={() =>
|
||||
setSupportSideBarOpen(!supportSideBarOpen)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{supportSideBarOpen && (
|
||||
<SupportSidebar onClose={() => setSupportSideBarOpen(false)} />
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -0,0 +1,25 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
background: ${({ theme, color }) =>
|
||||
color ? theme.colors[color].light : theme.colors.client.light};
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
justify-content: center;
|
||||
padding: 55px 0px;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 1px;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type SidebarItemProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
size?: 'small' | 'medium' | 'big';
|
||||
selected?: boolean;
|
||||
text: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const SidebarItem = ({
|
||||
color,
|
||||
size = 'medium',
|
||||
selected = false,
|
||||
text,
|
||||
onClick,
|
||||
}: SidebarItemProps) => {
|
||||
return (
|
||||
<Wrapper color={color} size={size} selected={selected} onClick={onClick}>
|
||||
{text}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default SidebarItem;
|
||||
@@ -0,0 +1,53 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?: 'client' | 'productOwner' | 'developer' | 'admin';
|
||||
size?: 'small' | 'medium' | 'big';
|
||||
selected?: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.button<WrapperProps>`
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
background: ${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main};
|
||||
color: ${({ theme }) => theme.colors.white.main};
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
${({ selected, theme }) =>
|
||||
selected &&
|
||||
css`
|
||||
border: 2px solid ${theme.colors.white.main};
|
||||
`}
|
||||
|
||||
${({ size }) => {
|
||||
switch (size) {
|
||||
case 'small':
|
||||
return css`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
`;
|
||||
case 'medium':
|
||||
return css`
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
`;
|
||||
case 'big':
|
||||
return css`
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
`;
|
||||
default:
|
||||
return css`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -0,0 +1,204 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { Box, Text } from '..';
|
||||
import { FeatureOutput, SpecificationOutput } from '../../graphql/types';
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type SpecificationProps = {
|
||||
specification: SpecificationOutput;
|
||||
features: Array<FeatureOutput>;
|
||||
};
|
||||
|
||||
const Specification = forwardRef<HTMLDivElement, SpecificationProps>(
|
||||
({ specification, features }, ref) => {
|
||||
return (
|
||||
<Wrapper ref={ref}>
|
||||
<Box marginBottom='30px'>
|
||||
<Text variant='title'>Customer Requirements Specifications</Text>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
1. Introduction
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
1.1. Purpose
|
||||
</Text>
|
||||
<Text variant='body'>{specification.introduction.purpose}</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
1.2. Document Conventions
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.introduction.documentConventions}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
1.3. Intended Audience and Reading Suggestions
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.introduction.intendedAudience}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
1.4. Project Scope
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.introduction.projectScope}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
2. Overall Description
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
2.1. Project Perspective
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.overallDescription.perspective}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
2.2. User Classes and Characteristics
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.overallDescription.userCharacteristics}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
2.3. Operating Environment
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.overallDescription.operatingEnvironment}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
2.4. Design and Implementation Constraints
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.overallDescription.designImplementationConstraints}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
2.5. User Documentation
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.overallDescription.userDocumentation}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
2.6. Assumptions and Dependencies
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.overallDescription.assemptionsDependencies}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
3. System Features
|
||||
</Text>
|
||||
</Box>
|
||||
{features.map((feature, index) => (
|
||||
<Box marginBottom='5px' key={feature.id}>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
3.{index + 1}. {feature.name}
|
||||
</Text>
|
||||
<Text variant='body'>{feature.description}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
4. Other Non-Functional Requirements
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
4.1. Performance Requirements
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.nonFunctionalRequirements.performanceRequirements}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
4.2. Safety Requirements
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.nonFunctionalRequirements.safetyRequirements}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
4.3. Security Requirements
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{specification.nonFunctionalRequirements.securityRequirements}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginBottom='5px'>
|
||||
<Text variant='subheader' weight='bold' gutterBottom>
|
||||
4.4. Software Quality Attributes
|
||||
</Text>
|
||||
<Text variant='body'>
|
||||
{
|
||||
specification.nonFunctionalRequirements
|
||||
.softwareQualityAttributes
|
||||
}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
5. Other Requirements
|
||||
</Text>
|
||||
</Box>
|
||||
<Text variant='body'>{specification.otherRequirements}</Text>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
6. Glossary
|
||||
</Text>
|
||||
</Box>
|
||||
<Text variant='body'>{specification.glossary}</Text>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
6. Analysis Models
|
||||
</Text>
|
||||
</Box>
|
||||
<Text variant='body'>{specification.analysisModels}</Text>
|
||||
</Box>
|
||||
<Box marginBottom='15px'>
|
||||
<Box marginBottom='10px'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
7. Issues List
|
||||
</Text>
|
||||
</Box>
|
||||
<Text variant='body'>{specification.issuesList}</Text>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Specification;
|
||||
@@ -0,0 +1,5 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding: 1rem;
|
||||
`;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Wrapper } from './styles';
|
||||
|
||||
type SpinnerProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'white'
|
||||
| 'black'
|
||||
| 'gray';
|
||||
fullScreen?: boolean;
|
||||
};
|
||||
|
||||
const Spinner = ({ fullScreen = false, color = 'client' }: SpinnerProps) => {
|
||||
return (
|
||||
<Wrapper fullScreen={fullScreen} color={color}>
|
||||
<div className='lds-dual-ring'></div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Spinner;
|
||||
@@ -0,0 +1,57 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type WrapperProps = {
|
||||
color?:
|
||||
| 'client'
|
||||
| 'productOwner'
|
||||
| 'developer'
|
||||
| 'admin'
|
||||
| 'white'
|
||||
| 'black'
|
||||
| 'gray';
|
||||
fullScreen?: boolean;
|
||||
};
|
||||
|
||||
export const Wrapper = styled.div<WrapperProps>`
|
||||
${({ fullScreen }) =>
|
||||
fullScreen &&
|
||||
css`
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 99;
|
||||
`}
|
||||
|
||||
.lds-dual-ring {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.lds-dual-ring:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 8px;
|
||||
border-radius: 50%;
|
||||
border: 6px solid
|
||||
${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main};
|
||||
border-color: ${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main}
|
||||
transparent
|
||||
${({ theme, color }) =>
|
||||
color ? theme.colors[color].main : theme.colors.client.main}
|
||||
transparent;
|
||||
animation: lds-dual-ring 1.2s linear infinite;
|
||||
}
|
||||
@keyframes lds-dual-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user