admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Organized save avatar

Browse Source
This commit is contained in:
DwCay
2022-05-25 02:18:13 +03:00
parent 3730bbee86
commit 59d96222d6
9 changed files with 35 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/images/GenerateOnboardingSvg/GenerateSvg.js
View File

@@ -41,12 +41,12 @@ function createBlob(options) {
export var generateSvgAvatar = (function () { export var generateSvgAvatar = (function () {
return function (seed, raw) { return function (seed, raw) {
let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
let pubKey = Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
//pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88" //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
if (!localStorage.getItem('svgKey')) {
localStorage.setItem('svgKey', `${pubKey}`)
}
let particles = []; let particles = [];
let gradients = ['#000000']; let gradients = ['#000000'];
let defs = []; let defs = [];

6
src/pages/Dashboard.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, {useEffect, useState} from 'react';
import Sidebar from '../partials/Sidebar'; import Sidebar from '../partials/Sidebar';
import Header from '../partials/Header'; import Header from '../partials/Header';
@@ -19,7 +19,9 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10';
import DashboardCard11 from '../partials/dashboard/DashboardCard11'; import DashboardCard11 from '../partials/dashboard/DashboardCard11';
function Dashboard() { function Dashboard() {
useEffect(() => {
localStorage.setItem('svgKey', '')
}, [])
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
return ( return (

18
src/pages/Onboarding1.jsx
View File

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import OnboardingImage from '../images/onboarding-image.jpg'; import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png'; import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png";
function Onboarding1() { function Onboarding1() {
return ( return (
@@ -21,22 +22,7 @@ function Onboarding1() {
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/">
<svg width="32" height="32" viewBox="0 0 32 32"> <img alt='logo' src={Logo} width="89" height="32"/>
<defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
<stop stopColor="#A5B4FC" offset="100%" />
</linearGradient>
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
<stop stopColor="#38BDF8" offset="100%" />
</linearGradient>
</defs>
<rect fill="#6366F1" width="32" height="32" rx="16" />
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
</svg>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link> Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>

18
src/pages/Onboarding2.jsx
View File

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import OnboardingImage from '../images/onboarding-image.jpg'; import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png'; import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png";
function Onboarding2() { function Onboarding2() {
return ( return (
@@ -21,22 +22,7 @@ function Onboarding2() {
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/">
<svg width="32" height="32" viewBox="0 0 32 32"> <img alt='logo' src={Logo} width="89" height="32"/>
<defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
<stop stopColor="#A5B4FC" offset="100%" />
</linearGradient>
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
<stop stopColor="#38BDF8" offset="100%" />
</linearGradient>
</defs>
<rect fill="#6366F1" width="32" height="32" rx="16" />
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
</svg>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link> Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>

20
src/pages/Onboarding3.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png";
function Onboarding3() { function Onboarding3() {
@@ -21,22 +22,7 @@ function Onboarding3() {
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/">
<svg width="32" height="32" viewBox="0 0 32 32"> <img alt='logo' src={Logo} width="89" height="32"/>
<defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
<stop stopColor="#A5B4FC" offset="100%" />
</linearGradient>
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
<stop stopColor="#38BDF8" offset="100%" />
</linearGradient>
</defs>
<rect fill="#6366F1" width="32" height="32" rx="16" />
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
</svg>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link> Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -75,7 +61,7 @@ function Onboarding3() {
{/* htmlForm */} {/* htmlForm */}
<div className="grid grid-cols-4 gap-2.5 mb-14"> <div className="grid grid-cols-4 gap-2.5 mb-14">
{arrayBadges.map(tag => ( {arrayBadges.map(tag => (
<button className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5"> <button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
<span className="text-sm font-medium">{tag}</span> <span className="text-sm font-medium">{tag}</span>
</button> </button>
))} ))}

22
src/pages/Onboarding4.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React, {useEffect} from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png";
@@ -21,22 +22,7 @@ function Onboarding4() {
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
{/* Logo */} {/* Logo */}
<Link className="block" to="/"> <Link className="block" to="/">
<svg width="32" height="32" viewBox="0 0 32 32"> <img alt='logo' src={Logo} width="89" height="32"/>
<defs>
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
<stop stopColor="#A5B4FC" offset="100%" />
</linearGradient>
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
<stop stopColor="#38BDF8" offset="100%" />
</linearGradient>
</defs>
<rect fill="#6366F1" width="32" height="32" rx="16" />
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
</svg>
</Link> </Link>
<div className="text-sm"> <div className="text-sm">
Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link> Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -76,7 +62,7 @@ function Onboarding4() {
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" /> <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
</svg> </svg>
<h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1> <h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/settings">Go To Profile -&gt;</Link> <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/settings/account">Go To Profile -&gt;</Link>
</div> </div>
<div className="flex items-center justify-between mt-6"> <div className="flex items-center justify-between mt-6">

5
src/pages/Signin.jsx
View File

@@ -1,10 +1,13 @@
import React from 'react'; import React, { useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import AuthImage from '../images/auth-image.jpg'; import AuthImage from '../images/auth-image.jpg';
import AuthDecoration from '../images/auth-decoration.png'; import AuthDecoration from '../images/auth-decoration.png';
function Signin() { function Signin() {
useEffect(() => {
localStorage.setItem('svgKey', '')
}, [])
return ( return (
<main className="bg-white"> <main className="bg-white">

6
src/pages/settings/Account.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, {useEffect, useState} from 'react';
import Sidebar from '../../partials/Sidebar'; import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
@@ -6,7 +6,9 @@ import SettingsSidebar from '../../partials/settings/SettingsSidebar';
import AccountPanel from '../../partials/settings/AccountPanel'; import AccountPanel from '../../partials/settings/AccountPanel';
function Account() { function Account() {
useEffect(() => {
localStorage.setItem('svgKey', '')
}, [])
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
return ( return (

1
src/partials/Sidebar.jsx
View File

@@ -14,7 +14,6 @@ function Sidebar({
const trigger = useRef(null); const trigger = useRef(null);
const sidebar = useRef(null); const sidebar = useRef(null);
const storedSidebarExpanded = localStorage.getItem('sidebar-expanded'); const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'); const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true');