|
{activeAccount?.public_key && (
<>
-
+
)}
|
@@ -194,13 +190,12 @@ export const BuyMeACoffee = () => {
{transactionHash && (
-
- Check transfer status on CSPR.live
-
+
+ Check transfer status on CSPR.live
+
)}
{waitingResponse && (
Listening for transaction processing messages...
diff --git a/csprclick-react/src/components/GettingStarted/components/Section.tsx b/csprclick-react/src/components/GettingStarted/components/Section.tsx
index 7183670..2ee886f 100644
--- a/csprclick-react/src/components/GettingStarted/components/Section.tsx
+++ b/csprclick-react/src/components/GettingStarted/components/Section.tsx
@@ -1,112 +1,110 @@
import styled from 'styled-components';
-import { colors } from '../../colors.ts';
+import { FlexColumn } from "@make-software/cspr-design";
interface SectionProps {
border?: boolean;
withbackground?: boolean;
}
-export const Section = styled.div`
- display: flex;
- flex-direction: column;
-
- margin: 0 0 24px;
- background-color: ${({ withbackground }) =>
- withbackground ? colors.sectionBackground : 'unset'};
- padding: ${({ withbackground }) => (withbackground ? '20px' : '0')};
- border: ${({ border }) => (border ? '1px solid' : 'none')};
- border-color: ${() => colors.contentPrimary};
-
- @media (min-width: ${'768px'}) {
- width: 100%;
- }
-
- /* h2 styles */
- h2 {
- margin: 0 0 16px;
- color: ${() => colors.contentPrimary};
-
- span {
- font-weight: 300;
- margin-left: 16px;
- }
- }
-
- /* h3 styles */
- h3 {
- margin: 0 0 16px;
- color: ${() => colors.contentPrimary};
-
- span {
- font-family: 'Mona Sans Expanded', sans-serif;
- font-weight: 300;
- margin-left: 16px;
- }
- }
-
- /* h5 styles */
- h5 {
- margin: 0;
- font-family: 'Mona Sans Expanded', sans-serif;
- color: ${() => colors.contentPrimary};
- }
-
- /* Span & links inside */
- span {
- margin-bottom: 10px;
-
- a {
- color: inherit;
- text-decoration: none;
- font-weight: 700;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- /* Table */
- table {
- margin-left: 30px;
- font-size: 14px;
- color: ${() => colors.contentPrimary};
- }
-
- /* Button */
- button {
- cursor: pointer;
- margin-top: 24px;
- font-size: 14px;
- width: 176px;
- height: 36px;
- }
-
- /* Button followed by link */
- button + a {
- margin-top: 12px;
- text-decoration: none;
- color: ${() => colors.contentPrimary};
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- ol {
- color: ${() => colors.contentBlue};
- li {
- margin-top: 5px;
- a {
- &:hover {
- color: #294acc;
- }
- }
- }
- }
- ul {
- li {
- margin-top: 5px;
- }
- }
-`;
+export const Section = styled(FlexColumn)(
+ ({ theme, withbackground, border }) =>
+ theme.withMedia({
+ margin: '0 0 24px',
+ backgroundColor: withbackground
+ ? theme.styleguideColors.backgroundPrimary
+ : 'unset',
+ padding: withbackground ? '20px' : '0',
+
+ border: border ? '1px solid' : 'none',
+ borderColor: theme.styleguideColors.contentPrimary,
+
+ width: {
+ md: '100%'
+ },
+
+ h2: {
+ margin: '0 0 16px',
+ color: theme.styleguideColors.contentPrimary,
+
+ span: {
+ fontWeight: 300,
+ marginLeft: '16px'
+ }
+ },
+
+ h3: {
+ margin: '0 0 16px',
+ color: theme.styleguideColors.contentPrimary,
+
+ span: {
+ fontFamily: 'Mona Sans Expanded, sans-serif',
+ fontWeight: 300,
+ marginLeft: '16px'
+ }
+ },
+
+ h5: {
+ margin: 0,
+ fontFamily: 'Mona Sans Expanded, sans-serif',
+ color: theme.styleguideColors.contentPrimary
+ },
+
+ span: {
+ marginBottom: '10px',
+
+ '&:last-child': {
+ marginBottom: 0
+ },
+
+ a: {
+ color: 'inherit',
+ textDecoration: 'none',
+ fontWeight: 700
+ }
+ },
+
+ table: {
+ marginLeft: '30px',
+ fontSize: '14px',
+ color: theme.styleguideColors.contentPrimary
+ },
+
+ button: {
+ cursor: 'pointer',
+ marginTop: '24px',
+ fontSize: '14px',
+ width: '176px',
+ height: '36px'
+ },
+
+ 'button + a': {
+ marginTop: '12px',
+ textDecoration: 'none',
+ color: theme.styleguideColors.contentPrimary,
+
+ '&:hover': {
+ textDecoration: 'underline'
+ }
+ },
+
+ ol: {
+ color: theme.styleguideColors.contentBlue,
+
+ li: {
+ marginTop: '5px',
+
+ a: {
+ '&:hover': {
+ color: theme.colorSpecialCase.blueBanner,
+ }
+ }
+ }
+ },
+
+ ul: {
+ li: {
+ marginTop: '5px'
+ }
+ }
+ })
+);
diff --git a/csprclick-react/src/components/GettingStarted/components/UseClickRefHook.tsx b/csprclick-react/src/components/GettingStarted/components/UseClickRefHook.tsx
index 7b20494..1bfc4a0 100644
--- a/csprclick-react/src/components/GettingStarted/components/UseClickRefHook.tsx
+++ b/csprclick-react/src/components/GettingStarted/components/UseClickRefHook.tsx
@@ -23,7 +23,7 @@ export const UseClickRefHook = () => {
{`
...
-
+
...
`}
diff --git a/csprclick-react/src/components/GettingStarted/components/Welcome.tsx b/csprclick-react/src/components/GettingStarted/components/Welcome.tsx
index 95dda73..7ade0f0 100644
--- a/csprclick-react/src/components/GettingStarted/components/Welcome.tsx
+++ b/csprclick-react/src/components/GettingStarted/components/Welcome.tsx
@@ -23,30 +23,18 @@ export const Container = styled.div`
}
`;
-// Styled SVG Icon wrapper
-export const StyledSvgIcon = styled.div`
- svg {
- height: 60px;
- width: 60px;
- }
-
- @media (min-width: ${breakpoints.sm}) {
- svg {
- height: 80px;
- width: 80px;
- }
- }
-`;
+// Responsive positioning
+export const Content = styled.div`
+ position: relative;
+ top: 120px;
-// Responsive wrapper
-export const StyledWrapper = styled.div`
- //width: 100%;
max-width: 540px;
padding: 0 12px;
margin: 0 auto;
@media (min-width: ${breakpoints.sm}) {
max-width: 720px;
+ top: 174px;
}
@media (min-width: ${breakpoints.md}) {
@@ -54,21 +42,6 @@ export const StyledWrapper = styled.div`
}
`;
-// Info container
-export const InfoContainer = styled.div`
- display: flex;
-`;
-
-// Responsive positioning
-export const StyledInfo = styled.div`
- position: relative;
- top: 120px;
-
- @media (min-width: ${breakpoints.sm}) {
- top: 174px;
- }
-`;
-
// Greeting text
export const GreetingText = styled.div`
color: #dadce5;
@@ -128,15 +101,11 @@ export const Welcome = () => {
return (
-
-
-
- Welcome to CSPR.click
- Your starting point to develop the next web3 killer app.
- Learn more
-
-
-
+
+ Welcome to CSPR.click
+ Your starting point to develop the next web3 killer app.
+ Learn more
+
);
};
diff --git a/csprclick-react/src/components/GettingStarted/index.tsx b/csprclick-react/src/components/GettingStarted/index.tsx
index fac30ab..c38f5cd 100644
--- a/csprclick-react/src/components/GettingStarted/index.tsx
+++ b/csprclick-react/src/components/GettingStarted/index.tsx
@@ -1,5 +1,7 @@
import { Account, BuyMeACoffee, Section, UseClickRefHook } from './components';
import Container from '../container.tsx';
+import { Link } from "@make-software/cspr-design";
+import React from "react";
export const LandingBrief = () => {
return (
@@ -15,13 +17,12 @@ export const LandingBrief = () => {
Your app can interact with any of them using the same API. CSPR.click takes care of
everything wallet related. If needed, you can{' '}
-
- modify the list of enabled wallets
-
+
+ modify the list of enabled wallets
+
.
@@ -33,13 +34,12 @@ export const LandingBrief = () => {
management of accounts, settings, and future ecosystem-wide functionality.
-
- Customize the elements in the top bar
- {' '}
+
+ Customize the elements in the top bar
+ {' '}
according to your application requirements. Add and remove settings selectors.
@@ -102,23 +102,21 @@ export const SignedInBrief = () => {
Finally! Time to focus on your new project! And, remember, you may find guides and
examples in{' '}
-
- our documentation
-
+ our documentation
+
. Or you can reach to us on{' '}
-
- telegram
-
+
+ telegram
+
.
diff --git a/csprclick-react/src/components/colors.ts b/csprclick-react/src/components/colors.ts
deleted file mode 100644
index ccd4132..0000000
--- a/csprclick-react/src/components/colors.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export const colors = {
- backgroundPrimary: '#FFFFFF',
- backgroundSecondary: '#F2F3F5',
- backgroundTertiary: '#181D40',
- backgroundQuaternary: '#161A33',
- borderPrimary: '#F2F3F5',
- borderSecondary: '#D2D4D9',
- backgroundOverlay: '#0E1126A0',
- borderRed: '#E6332A',
- fillPrimaryRed: '#E6332A',
- fillPrimaryRedHover: '#D23028',
- fillPrimaryRedClick: '#BD2E27',
- fillPrimaryBlue: '#0021A5',
- fillPrimaryBlueHover: '#051F89',
- bodyBackgroundColor: '#f2f3f5',
- fillPrimaryBlueClick: '#081F7B',
- fillSecondary: '#F5F5F7',
- fillSecondaryRedHover: '#E6332A14',
- fillSecondaryRedClick: '#E6332A1F',
- fillSecondaryBlueHover: '#0021A514',
- fillSecondaryBlueClick: '#0021A51F',
- fillTertriary: '#FEFEFF',
- sectionBackground: '#f5f5f5',
- fillGreen: '#2DCC85',
- fillVioletGradient: 'linear-gradient(266.5deg, #A880FF 9.3%, #8B5BF1 94.39%)',
- fillBlueGradient: 'linear-gradient(89.56deg, #0021A5 0%, #2C53EF 75.01%)',
- fillLoadingInTable: 'linear-gradient(90deg, #F2F3F5 0%, rgba(255, 255, 255, 0) 100%)',
- contentPrimary: '#1A1919',
- contentSecondary: '#84868C',
- contentTertiary: '#BABBBF',
- contentQuaternary: '#D2D3D9',
- contentOnFill: '#FFFFFF',
- contentBlue: '#0021A5',
- contentRed: '#E6332A',
- contentGreen: '#31DE91',
- contentViolet: '#8B5BF1',
- contentYellow: '#F1BF0B',
- contentWarmGreen: '#BBDE31',
- contentLightBlue: '#7490FF'
-};
diff --git a/csprclick-react/src/components/container.tsx b/csprclick-react/src/components/container.tsx
index 7d4a349..aef9ec3 100644
--- a/csprclick-react/src/components/container.tsx
+++ b/csprclick-react/src/components/container.tsx
@@ -1,99 +1,90 @@
import styled from 'styled-components';
-import { colors } from './colors.ts';
+import { FlexColumn } from "@make-software/cspr-design";
-const Container = styled.div`
- display: flex;
- flex-direction: column;
- text-align: left;
- width: 100%;
- min-height: 100vh;
- margin: 0 auto;
- background-color: ${() => colors.bodyBackgroundColor};
- color: ${() => colors.contentSecondary};
+export const Container = styled(FlexColumn)(
+ ({ theme }) =>
+ theme.withMedia({
+ textAlign: 'left',
+ width: '100%',
+ minHeight: '100vh',
+ margin: '0 auto',
- /* Headings */
- h2 {
- font-size: calc(12px + 2vmin);
- font-weight: 700;
- color: ${() => colors.contentPrimary};
- }
+ backgroundColor: theme.styleguideColors.backgroundSecondary,
+ color: theme.styleguideColors.contentSecondary,
- h3 {
- font-size: calc(11px + 2vmin);
- font-weight: 500;
- color: ${() => colors.contentPrimary};
- margin-top: 100px;
- }
+ h2: {
+ fontSize: 'calc(12px + 2vmin)',
+ fontWeight: 700,
+ color: theme.styleguideColors.contentPrimary
+ },
- h5 {
- font-size: calc(10px + 2vmin);
- font-weight: 500;
- color: ${() => colors.contentPrimary};
- text-align: center;
- }
+ h3: {
+ fontSize: 'calc(11px + 2vmin)',
+ fontWeight: 500,
+ color: theme.styleguideColors.contentPrimary,
+ marginTop: '100px'
+ },
- /* Links */
- a {
- color: ${() => colors.contentBlue};
- cursor: pointer;
- text-decoration: none;
- }
+ h5: {
+ fontSize: 'calc(10px + 2vmin)',
+ fontWeight: 500,
+ color: theme.styleguideColors.contentPrimary,
+ textAlign: 'center'
+ },
- /* Bold text */
- b {
- cursor: pointer;
- }
+ a: {
+ color: theme.styleguideColors.contentBlue,
+ cursor: 'pointer',
+ textDecoration: 'none'
+ },
- /* Span text */
- span {
- font-size: 16px;
- font-weight: 400;
- line-height: 24px;
- color: ${() => colors.contentPrimary};
- }
+ b: {
+ cursor: 'pointer'
+ },
- /* Preformatted text */
- pre {
- background: #2d2d2d;
+ span: {
+ fontSize: '16px',
+ fontWeight: 400,
+ lineHeight: '24px',
+ color: theme.styleguideColors.contentPrimary
+ },
- //code {
- // color: #ccc;
- //
- //}
- }
+ pre: {
+ background: '#2d2d2d'
+ },
- /* Buttons */
- button {
- background: ${() => colors.contentPrimary};
- color: ${() => colors.fillSecondary};
- height: 38px;
- padding: 8px 16px;
- margin-top: 20px;
- font-size: 14px;
- font-weight: 600;
- line-height: 20px;
- cursor: pointer;
- }
+ button: {
+ background: theme.styleguideColors.contentPrimary,
+ color: theme.styleguideColors.fillSecondary,
+ height: '38px',
+ padding: '8px 16px',
+ marginTop: '20px',
+ fontSize: '14px',
+ fontWeight: 600,
+ lineHeight: '20px',
+ cursor: 'pointer'
+ },
- /* Ordered list */
- ol {
- color: ${() => colors.contentBlue};
+ ol: {
+ color: theme.styleguideColors.contentBlue,
- li {
- margin-top: 5px;
+ li: {
+ marginTop: '5px',
- a:hover {
- color: #294acc;
- }
- }
- }
+ a: {
+ '&:hover': {
+ color: theme.colorSpecialCase.blueBanner,
+ }
+ }
+ }
+ },
- /* Unordered list */
- ul {
- li {
- margin-top: 5px;
- }
- }
-`;
+ ul: {
+ li: {
+ marginTop: '5px'
+ }
+ }
+ })
+);
export default Container;
diff --git a/csprclick-react/src/main.tsx b/csprclick-react/src/main.tsx
index a4c3926..b0fdaf5 100644
--- a/csprclick-react/src/main.tsx
+++ b/csprclick-react/src/main.tsx
@@ -2,9 +2,13 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
+import { ThemeProvider } from "styled-components";
+import { themeConfig } from "@make-software/cspr-design";
createRoot(document.getElementById('content')!).render(
-
+
+
+
);