+
+
+
© Rotki Solutions GmbH 2018-{{ year }}.
+
All Rights Reserved.
-
-
-
-
© Rotki Solutions GmbH 2018-{{ year }}.
-
All Rights Reserved.
-
-
-
-
-
diff --git a/components/header/HeaderLinks.vue b/components/header/HeaderLinks.vue
new file mode 100644
index 00000000..3327a1de
--- /dev/null
+++ b/components/header/HeaderLinks.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue
new file mode 100644
index 00000000..177d575f
--- /dev/null
+++ b/components/header/PageHeader.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Manage Premium
+
+
+
+
diff --git a/components/hero/UseApp.vue b/components/hero/UseApp.vue
index 1cf654ef..8f12487e 100644
--- a/components/hero/UseApp.vue
+++ b/components/hero/UseApp.vue
@@ -95,7 +95,7 @@ const css = useCssModule();
}
.text {
- @apply flex-col text-shade8 font-regular align-middle;
+ @apply flex-col text-rui-text-secondary align-middle;
@include text-size(32px, 50px);
}
diff --git a/components/hero/blocks/InfoBox.vue b/components/hero/blocks/InfoBox.vue
index 553f6486..3abd9099 100644
--- a/components/hero/blocks/InfoBox.vue
+++ b/components/hero/blocks/InfoBox.vue
@@ -26,7 +26,7 @@ const css = useCssModule();
}
.title {
- @apply flex-col font-serif text-primary2 text-4xl font-bold;
+ @apply flex-col text-rui-text text-4xl font-bold;
letter-spacing: -0.01em;
@@ -34,7 +34,7 @@ const css = useCssModule();
}
.subtitle {
- @apply flex-col font-sans text-primary2 text-center;
+ @apply flex-col text-rui-text text-center;
@include text-size(24px, 30px);
}
diff --git a/components/plans/AvailablePlans.vue b/components/plans/AvailablePlans.vue
index b5530fa7..c3d6b6c8 100644
--- a/components/plans/AvailablePlans.vue
+++ b/components/plans/AvailablePlans.vue
@@ -30,7 +30,7 @@ const css = useCssModule();
}
.header {
- @apply font-bold font-serif text-primary2;
+ @apply font-bold text-rui-text;
text-align: center;
letter-spacing: -0.03em;
diff --git a/components/plans/blocks/PlanBox.vue b/components/plans/blocks/PlanBox.vue
index 6da98e8b..cd821c5a 100644
--- a/components/plans/blocks/PlanBox.vue
+++ b/components/plans/blocks/PlanBox.vue
@@ -52,7 +52,7 @@ const css = useCssModule();
}
.title {
- @apply font-bold text-primary2 font-serif text-center;
+ @apply font-bold text-rui-text text-center;
letter-spacing: -0.01em;
@@ -60,7 +60,7 @@ const css = useCssModule();
}
.description {
- @apply font-sans text-center text-primary2 flex flex-col self-center;
+ @apply text-center text-rui-text flex flex-col self-center;
margin-top: 45px;
max-width: 370px;
diff --git a/components/plans/details/CustomPlan.vue b/components/plans/details/CustomPlan.vue
index 01fdabca..29e62a34 100644
--- a/components/plans/details/CustomPlan.vue
+++ b/components/plans/details/CustomPlan.vue
@@ -45,7 +45,7 @@ const css = useCssModule();
}
.title {
- @apply font-bold font-serif text-shade11;
+ @apply font-bold text-rui-grey-800;
letter-spacing: -0.03em;
@@ -53,7 +53,7 @@ const css = useCssModule();
}
.description {
- @apply font-sans text-primary2 flex flex-col;
+ @apply text-rui-text flex flex-col;
margin-top: 22px;
diff --git a/components/premium/PremiumFeatures.vue b/components/premium/PremiumFeatures.vue
index ce32f51e..32040fc7 100644
--- a/components/premium/PremiumFeatures.vue
+++ b/components/premium/PremiumFeatures.vue
@@ -46,7 +46,7 @@ const css = useCssModule();
}
.wrapper {
- @apply bg-primary2 bg-repeat;
+ @apply bg-rui-primary-darker;
padding-bottom: 100px;
@@ -60,7 +60,7 @@ const css = useCssModule();
}
.title {
- @apply text-primary font-serif font-bold;
+ @apply text-rui-primary-lighter font-bold;
padding-top: 91px;
margin-bottom: 10px;
diff --git a/components/premium/blocks/PremiumFeature.vue b/components/premium/blocks/PremiumFeature.vue
index 1d616a51..541a96dc 100644
--- a/components/premium/blocks/PremiumFeature.vue
+++ b/components/premium/blocks/PremiumFeature.vue
@@ -50,7 +50,7 @@ const css = useCssModule();
}
.title {
- @apply font-bold font-serif text-white;
+ @apply font-bold text-white;
margin-bottom: 38px;
letter-spacing: -0.01em;
@@ -59,7 +59,7 @@ const css = useCssModule();
}
.description {
- @apply font-sans font-light text-white;
+ @apply font-light text-white;
@include text-size(24px, 30px);
}
diff --git a/components/products/ProductDescription.vue b/components/products/ProductDescription.vue
index a0e146ce..1bc73bcf 100644
--- a/components/products/ProductDescription.vue
+++ b/components/products/ProductDescription.vue
@@ -59,10 +59,10 @@ const slots = useSlots();
}
.title {
- @apply font-serif text-3xl text-typography font-medium mt-4 lg:mt-0;
+ @apply text-3xl text-rui-text font-medium mt-4 lg:mt-0;
}
.description {
- @apply font-sans text-typography text-base mt-4 text-justify;
+ @apply text-rui-text text-base mt-4 text-justify;
}
diff --git a/components/products/ProductDetailDescription.vue b/components/products/ProductDetailDescription.vue
index 17fcedf9..1ef70d98 100644
--- a/components/products/ProductDetailDescription.vue
+++ b/components/products/ProductDetailDescription.vue
@@ -35,10 +35,10 @@ const css = useCssModule();
}
.title {
- @apply font-serif text-xl text-typography font-medium mt-4 lg:mt-0;
+ @apply text-xl text-rui-text font-medium mt-4 lg:mt-0;
}
.description {
- @apply font-sans text-typography text-base mt-4 text-justify;
+ @apply text-rui-text text-base mt-4 text-justify;
}
diff --git a/components/products/ProductsDetailPage.vue b/components/products/ProductsDetailPage.vue
index 42147d0d..b388c989 100644
--- a/components/products/ProductsDetailPage.vue
+++ b/components/products/ProductsDetailPage.vue
@@ -233,7 +233,7 @@ const css = useCssModule();
@import '@/assets/css/main.scss';
.title {
- @apply font-serif font-bold text-3xl text-typography;
+ @apply font-bold text-3xl text-rui-text;
}
.details {
@@ -245,7 +245,7 @@ const css = useCssModule();
&::before {
content: '';
- @apply absolute w-16 h-1 bg-primary left-1/2 top-full transform -translate-x-1/2;
+ @apply absolute w-16 h-1 bg-rui-primary left-1/2 top-full transform -translate-x-1/2;
}
}
diff --git a/components/products/ProductsPage.vue b/components/products/ProductsPage.vue
index bad470eb..544628a2 100644
--- a/components/products/ProductsPage.vue
+++ b/components/products/ProductsPage.vue
@@ -95,7 +95,7 @@ const css = useCssModule();
@import '@/assets/css/main.scss';
.title {
- @apply font-serif font-bold text-3xl text-typography;
+ @apply font-bold text-3xl text-rui-text;
}
.details {
diff --git a/error.vue b/error.vue
index 3ddf782c..74e93a4a 100644
--- a/error.vue
+++ b/error.vue
@@ -41,10 +41,10 @@ useHead(() => ({
@apply text-center my-24;
}
.title {
- @apply block font-serif text-red-500 font-bold text-6xl;
+ @apply block text-red-500 font-bold text-6xl;
}
.subtitle {
- @apply block font-sans font-light text-primary2 my-8 text-3xl;
+ @apply block font-light text-rui-text my-8 text-3xl;
}
diff --git a/layouts/default.vue b/layouts/default.vue
index 56a8b72d..faed4911 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
-
-
-
+
+
+
diff --git a/layouts/jobs.vue b/layouts/jobs.vue
index 587e1ed1..e2e17b67 100644
--- a/layouts/jobs.vue
+++ b/layouts/jobs.vue
@@ -42,10 +42,10 @@ await loadJobs();
}
.link {
- @apply text-xs font-bold uppercase px-5 py-3 border-primary border rounded block leading-normal text-primary;
+ @apply text-xs font-bold uppercase px-5 py-3 border-rui-primary border rounded block leading-normal text-rui-primary;
}
.active {
- @apply text-white bg-primary;
+ @apply text-white bg-rui-primary;
}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4595c0ed..e9d677d8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -80,7 +80,6 @@ export default defineNuxtConfig({
},
},
- css: [],
ssr: true,
components: [{ path: '~/components', pathPrefix: false }],
diff --git a/package.json b/package.json
index 70b9c442..a8699462 100644
--- a/package.json
+++ b/package.json
@@ -45,10 +45,12 @@
"devDependencies": {
"@commitlint/cli": "17.6.6",
"@commitlint/config-conventional": "17.6.6",
+ "@fontsource/roboto": "5.0.5",
"@nuxt/content": "2.7.0",
"@nuxt/devtools": "0.6.7",
"@nuxtjs/i18n": "8.0.0-beta.12",
"@rotki/eslint-config": "1.1.0",
+ "@rotki/ui-library": "file:/Users/lukicenturi/Sites/ui-library",
"@types/braintree-web": "3.75.23",
"@types/paypal-checkout-components": "4.0.5",
"@types/qrcode": "1.5.1",
diff --git a/pages/index.vue b/pages/index.vue
index b6093dbe..34d2cbfb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -26,12 +26,10 @@ const { visible } = useOverflow();
-
-
diff --git a/pages/maintenance.vue b/pages/maintenance.vue
index 3cf11fb2..7b1e2836 100644
--- a/pages/maintenance.vue
+++ b/pages/maintenance.vue
@@ -55,7 +55,7 @@ const css = useCssModule();
}
.link {
- @apply text-primary hover:text-primary3 font-bold;
+ @apply text-rui-primary hover:text-rui-primary-darker font-bold;
}
.heading {
@@ -63,6 +63,6 @@ const css = useCssModule();
}
.description {
- @apply font-sans text-typography text-base mt-8 text-center text-xl;
+ @apply text-rui-text text-base mt-8 text-center text-xl;
}
diff --git a/plugins/ui-library.ts b/plugins/ui-library.ts
new file mode 100644
index 00000000..352a7e7b
--- /dev/null
+++ b/plugins/ui-library.ts
@@ -0,0 +1,21 @@
+import {
+ RiDiscordLine,
+ RiExternalLinkLine,
+ RiGithubLine,
+ RiMailSendLine,
+ RiTwitterLine,
+ RuiPlugin,
+} from '@rotki/ui-library';
+
+export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.vueApp.use(RuiPlugin, {
+ mode: 'light',
+ icons: [
+ RiExternalLinkLine,
+ RiGithubLine,
+ RiTwitterLine,
+ RiDiscordLine,
+ RiMailSendLine,
+ ],
+ });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8508a41d..144863a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,6 +67,9 @@ devDependencies:
'@commitlint/config-conventional':
specifier: 17.6.6
version: 17.6.6
+ '@fontsource/roboto':
+ specifier: 5.0.5
+ version: 5.0.5
'@nuxt/content':
specifier: 2.7.0
version: 2.7.0
@@ -79,6 +82,9 @@ devDependencies:
'@rotki/eslint-config':
specifier: 1.1.0
version: 1.1.0(eslint@8.45.0)(vue@3.3.4)
+ '@rotki/ui-library':
+ specifier: file:/Users/lukicenturi/Sites/ui-library
+ version: file:../ui-library(@fontsource/roboto@5.0.5)(vue@3.3.4)
'@types/braintree-web':
specifier: 3.75.23
version: 3.75.23
@@ -1188,6 +1194,10 @@ packages:
resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ /@fontsource/roboto@5.0.5:
+ resolution: {integrity: sha512-IMXFq5AMgGx0sgNLfwWsmPuy3qa7lmDmQcXXihqwF4mT2UpD725cbxZj93ERY793OWon+6V1ANax02I3nt9+4w==}
+ dev: true
+
/@hapi/hoek@9.3.0:
resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
dev: true
@@ -12846,3 +12856,17 @@ packages:
/zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
dev: true
+
+ file:../ui-library(@fontsource/roboto@5.0.5)(vue@3.3.4):
+ resolution: {directory: ../ui-library, type: directory}
+ id: file:../ui-library
+ name: '@rotki/ui-library'
+ engines: {pnpm: '>=8 <9'}
+ requiresBuild: true
+ peerDependencies:
+ '@fontsource/roboto': '>=5.0.5'
+ vue: '>=3.3.4'
+ dependencies:
+ '@fontsource/roboto': 5.0.5
+ vue: 3.3.4
+ dev: true
diff --git a/public/img/background.svg b/public/img/background.svg
deleted file mode 100644
index a3ab8672..00000000
--- a/public/img/background.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index a20ecc14..d53daeac 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,5 @@
module.exports = {
+ presets: [require('@rotki/ui-library/dist/tailwind.config.cjs')],
content: [
'./components/**/*.{vue,js,ts}',
'./layouts/**/*.vue',
@@ -10,40 +11,6 @@ module.exports = {
container: {
center: true,
},
- extend: {
- zIndex: {
- '-1': '-1',
- },
- colors: {
- background: '#F9FAFB',
- shade1: '#edf0f3',
- shade2: '#E6E6E6',
- shade5: '#BFBFBF',
- shade8: '#808080',
- shade7: '#7E7E91',
- shade10: '#B6B6D1',
- shade11: '#404040',
- shade12: '#E36039',
- title: '#3d3d46',
- typography: '#212529',
- primary: '#D65C36',
- primary2: '#3D3D46',
- primary3: '#da4e24',
- label: '#878787',
- error: '#B00020',
- },
- backgroundImage: () => ({
- 'rotki-pattern': "url('/img/background.svg')",
- 'rotki-logo': "url('/img/rotki.svg')",
- 'crypto-pattern': "url('/img/crypto.svg')",
- }),
- fontFamily: {
- sans: ['Source Sans Pro', 'sans-serif'],
- serif: ['Maven Pro', 'serif'],
- regular: ['Maven Pro', 'serif'],
- source: ['Source Serif Pro', 'serif'],
- },
- },
},
variants: {
extend: {},