-
-
-
+
+
+
+ {/* mobile */}
+
+
+ {/* desktop */}
+
-
-
);
});
diff --git a/src/routes/exchange/index.css.ts b/src/routes/exchange/index.css.ts
index 97e5c8c..aa1b6c7 100644
--- a/src/routes/exchange/index.css.ts
+++ b/src/routes/exchange/index.css.ts
@@ -1,9 +1,5 @@
import { style } from "@vanilla-extract/css";
-import { vars } from "~/theme.css";
-
-const background = style({
- backgroundColor: vars.color.background,
-});
+import { background } from "~/theme.css";
export const index = style([
background,
diff --git a/src/routes/exchange/index.tsx b/src/routes/exchange/index.tsx
index 510cf68..6847097 100644
--- a/src/routes/exchange/index.tsx
+++ b/src/routes/exchange/index.tsx
@@ -7,11 +7,11 @@ export default component$(() => {
});
export const head: DocumentHead = {
- title: "KSOX-exchange",
+ title: "KSOX Exchange",
meta: [
{
name: "description",
- content: "Exchange crypto",
+ content: "Exchange crypto platform",
},
],
};
diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts
index 0ee836c..295739c 100644
--- a/src/routes/header.css.ts
+++ b/src/routes/header.css.ts
@@ -1,6 +1,6 @@
import { type ComplexStyleRule, style } from "@vanilla-extract/css";
import { mediaQuery } from "~/breakpoint.css";
-import { vars } from "~/theme.css";
+import { background } from "~/theme.css";
const mobile: ComplexStyleRule = {
display: "none",
@@ -14,8 +14,8 @@ const desktop: ComplexStyleRule = {
export const header = style([
mobile,
+ background,
{
- backgroundColor: vars.color.background,
"@media": {
[mediaQuery.desktop]: desktop,
},
diff --git a/src/routes/index.css.ts b/src/routes/index.css.ts
new file mode 100644
index 0000000..aa1b6c7
--- /dev/null
+++ b/src/routes/index.css.ts
@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+import { background } from "~/theme.css";
+
+export const index = style([
+ background,
+ {
+ height: "100%",
+ },
+]);
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 0d8e0d6..4f677b8 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,9 @@
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
+import { index } from "./index.css";
export default component$(() => {
- return <>;
+ return
;
});
export const head: DocumentHead = {
@@ -10,7 +11,7 @@ export const head: DocumentHead = {
meta: [
{
name: "description",
- content: "All in one platform for your crypto business",
+ content: "All in one platform for crypto management",
},
],
};
diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts
index c4f72f2..a66c981 100644
--- a/src/routes/layout.css.ts
+++ b/src/routes/layout.css.ts
@@ -1,6 +1,6 @@
import { type ComplexStyleRule, style } from "@vanilla-extract/css";
import { mediaQuery } from "~/breakpoint.css";
-import { vars } from "~/theme.css";
+import { backgroundHighlight } from "~/theme.css";
const layoutRowMobile: ComplexStyleRule = {
gridTemplateRows: "1fr",
@@ -12,11 +12,11 @@ const layoutRowDesktop: ComplexStyleRule = {
export const layoutRow = style([
layoutRowMobile,
+ backgroundHighlight,
{
height: "100%",
display: "grid",
gridAutoFlow: "row",
- backgroundColor: vars.color.backgroundHighlight,
gap: "1px",
"@media": {
[mediaQuery.desktop]: layoutRowDesktop,
@@ -38,9 +38,9 @@ const layoutColumnDesktop: ComplexStyleRule = {
export const layoutColumn = style([
layoutColumnMobile,
+ backgroundHighlight,
{
display: "grid",
- backgroundColor: vars.color.backgroundHighlight,
gap: "1px",
"@media": {
[mediaQuery.desktop]: layoutColumnDesktop,
diff --git a/src/routes/main.css.ts b/src/routes/main.css.ts
index b70a349..f2f7cb3 100644
--- a/src/routes/main.css.ts
+++ b/src/routes/main.css.ts
@@ -1,6 +1,6 @@
import { type ComplexStyleRule, style } from "@vanilla-extract/css";
import { mediaQuery } from "~/breakpoint.css";
-import { vars } from "~/theme.css";
+import { backgroundHighlight } from "~/theme.css";
const mobile: ComplexStyleRule = {
gridRowStart: "1",
@@ -18,8 +18,8 @@ const desktop: ComplexStyleRule = {
export const main = style([
mobile,
+ backgroundHighlight,
{
- backgroundColor: vars.color.backgroundHighlight,
"@media": {
[mediaQuery.desktop]: desktop,
},
diff --git a/src/routes/nav.css.ts b/src/routes/nav.css.ts
index 8af4178..db07f88 100644
--- a/src/routes/nav.css.ts
+++ b/src/routes/nav.css.ts
@@ -1,6 +1,6 @@
import { type ComplexStyleRule, style } from "@vanilla-extract/css";
import { mediaQuery } from "~/breakpoint.css";
-import { vars } from "~/theme.css";
+import { background } from "~/theme.css";
const mobile: ComplexStyleRule = {
gridRowStart: "2",
@@ -18,8 +18,8 @@ const desktop: ComplexStyleRule = {
export const nav = style([
mobile,
+ background,
{
- backgroundColor: vars.color.background,
"@media": {
[mediaQuery.desktop]: desktop,
},
diff --git a/src/routes/people/index.css.ts b/src/routes/people/index.css.ts
new file mode 100644
index 0000000..aa1b6c7
--- /dev/null
+++ b/src/routes/people/index.css.ts
@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+import { background } from "~/theme.css";
+
+export const index = style([
+ background,
+ {
+ height: "100%",
+ },
+]);
diff --git a/src/routes/people/index.tsx b/src/routes/people/index.tsx
index 715fa7f..827bd3d 100644
--- a/src/routes/people/index.tsx
+++ b/src/routes/people/index.tsx
@@ -1,16 +1,17 @@
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
+import { index } from "./index.css";
export default component$(() => {
- return <>;
+ return
;
});
export const head: DocumentHead = {
- title: "KSOX-people",
+ title: "KSOX People",
meta: [
{
name: "description",
- content: "Find people manage friends",
+ content: "Find people&manage friends",
},
],
};
diff --git a/src/routes/transfer/[id]/index.css.ts b/src/routes/transfer/[id]/index.css.ts
index 4b9ca20..69a1699 100644
--- a/src/routes/transfer/[id]/index.css.ts
+++ b/src/routes/transfer/[id]/index.css.ts
@@ -1,5 +1,5 @@
import { style } from "@vanilla-extract/css";
-import { background } from "../layout.css";
+import { background } from "~/theme.css";
export const conversation = style({
display: "grid",
diff --git a/src/routes/transfer/index.css.ts b/src/routes/transfer/index.css.ts
index 588b0ba..72a2e9f 100644
--- a/src/routes/transfer/index.css.ts
+++ b/src/routes/transfer/index.css.ts
@@ -1,6 +1,6 @@
import { type ComplexStyleRule, style } from "@vanilla-extract/css";
import { mediaQuery } from "~/breakpoint.css";
-import { background } from "./layout.css";
+import { background } from "~/theme.css";
export const index = style([background]);
diff --git a/src/routes/transfer/index.tsx b/src/routes/transfer/index.tsx
index 53e9d6f..3f3ae50 100644
--- a/src/routes/transfer/index.tsx
+++ b/src/routes/transfer/index.tsx
@@ -1,6 +1,7 @@
import { component$ } from "@builder.io/qwik";
import { index, threads } from "./index.css";
import Threads from "./threads";
+import type { DocumentHead } from "@builder.io/qwik-city";
export default component$(() => {
return (
@@ -11,3 +12,13 @@ export default component$(() => {
);
});
+
+export const head: DocumentHead = {
+ title: "KSOX Transfer",
+ meta: [
+ {
+ name: "description",
+ content: "Transfer crypto",
+ },
+ ],
+};
diff --git a/src/routes/transfer/layout.css.ts b/src/routes/transfer/layout.css.ts
index 978d4c2..0336a92 100644
--- a/src/routes/transfer/layout.css.ts
+++ b/src/routes/transfer/layout.css.ts
@@ -1,10 +1,6 @@
import { type ComplexStyleRule, style } from "@vanilla-extract/css";
import { mediaQuery } from "~/breakpoint.css";
-import { vars } from "~/theme.css";
-
-export const background = style({
- backgroundColor: vars.color.background,
-});
+import { background, backgroundHighlight } from "~/theme.css";
const layoutDesktop: ComplexStyleRule = {
gridTemplateColumns: "300px 1fr",
@@ -18,10 +14,10 @@ const layoutMobile: ComplexStyleRule = {
export const layout = style([
layoutMobile,
+ backgroundHighlight,
{
display: "grid",
height: "100%",
- backgroundColor: vars.color.backgroundHighlight,
gap: "1px",
"@media": {
[mediaQuery.desktop]: layoutDesktop,
diff --git a/src/routes/wallet/index.css.ts b/src/routes/wallet/index.css.ts
new file mode 100644
index 0000000..aa1b6c7
--- /dev/null
+++ b/src/routes/wallet/index.css.ts
@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+import { background } from "~/theme.css";
+
+export const index = style([
+ background,
+ {
+ height: "100%",
+ },
+]);
diff --git a/src/routes/wallet/index.tsx b/src/routes/wallet/index.tsx
index 311c81b..2702441 100644
--- a/src/routes/wallet/index.tsx
+++ b/src/routes/wallet/index.tsx
@@ -1,12 +1,13 @@
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
+import { index } from "./index.css";
export default component$(() => {
- return <>;
+ return
;
});
export const head: DocumentHead = {
- title: "KSOX-wallet",
+ title: "KSOX Wallet",
meta: [
{
name: "description",
diff --git a/src/theme.css.ts b/src/theme.css.ts
index 6dd3580..f6240c5 100644
--- a/src/theme.css.ts
+++ b/src/theme.css.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@vanilla-extract/css";
+import { createTheme, style } from "@vanilla-extract/css";
export const [darkTheme, vars] = createTheme({
color: {
@@ -33,3 +33,11 @@ export const lightTheme = createTheme(vars, {
timingFunction: "ease-in-out",
},
});
+
+export const background = style({
+ backgroundColor: vars.color.background,
+});
+
+export const backgroundHighlight = style({
+ backgroundColor: vars.color.backgroundHighlight,
+});