diff --git a/frontend/src/components/Status.scss b/frontend/src/components/Status.scss index 78036d8..9c6645a 100644 --- a/frontend/src/components/Status.scss +++ b/frontend/src/components/Status.scss @@ -1,15 +1,14 @@ -@use '../theme.scss' as theme; .status-content { a { text-decoration: none; - color: theme.$indigo400; + color: #8c8dff; } a.mention { - color: theme.$slate200; + color: #dbeafe; } a.hashtag { - color: theme.$slate200; + color: #dbeafe; } } @@ -40,6 +39,6 @@ } .status-link { - color: theme.$slate200; + color: #dbeafe; text-decoration: none; } diff --git a/frontend/src/components/Status.tsx b/frontend/src/components/Status.tsx index 01c943f..79e7b39 100644 --- a/frontend/src/components/Status.tsx +++ b/frontend/src/components/Status.tsx @@ -23,7 +23,7 @@ export default component$((props: Props) => {
- +
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */} diff --git a/frontend/src/components/StickyHeader/StickyHeader.scss b/frontend/src/components/StickyHeader/StickyHeader.scss index a4dd3e2..f82c5c2 100644 --- a/frontend/src/components/StickyHeader/StickyHeader.scss +++ b/frontend/src/components/StickyHeader/StickyHeader.scss @@ -1,10 +1,7 @@ -@use '../../theme.scss' as theme; - header { position: sticky; top: 0; // compensates for the 10px set w/ sticky on the main app columns padding-top: 10px; - background: theme.$backgroundBaseColor; z-index: 2; } \ No newline at end of file diff --git a/frontend/src/components/StickyHeader/StickyHeader.tsx b/frontend/src/components/StickyHeader/StickyHeader.tsx index f5e5395..2640c3f 100644 --- a/frontend/src/components/StickyHeader/StickyHeader.tsx +++ b/frontend/src/components/StickyHeader/StickyHeader.tsx @@ -6,7 +6,7 @@ export default component$(() => { useStylesScoped$(styles) return ( -
+
) diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx index c89e11c..412c07e 100644 --- a/frontend/src/root.tsx +++ b/frontend/src/root.tsx @@ -16,7 +16,7 @@ export default component$(() => { - + diff --git a/frontend/src/routes/LeftColumn/LeftColumn.scss b/frontend/src/routes/LeftColumn/LeftColumn.scss deleted file mode 100644 index 100f211..0000000 --- a/frontend/src/routes/LeftColumn/LeftColumn.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '../../theme.scss'; - -.search { - outline: 0; - box-sizing: border-box; - width: 100%; - border: 0; - box-shadow: none; - font-family: inherit; - background: theme.$slate800; - color: theme.$slate400; - border-radius: theme.$radius-medium; - margin: 0; - display: block; - padding: 1rem; - line-height: 18px; -} diff --git a/frontend/src/routes/LeftColumn/LeftColumn.tsx b/frontend/src/routes/LeftColumn/LeftColumn.tsx index 08c4767..c94d681 100644 --- a/frontend/src/routes/LeftColumn/LeftColumn.tsx +++ b/frontend/src/routes/LeftColumn/LeftColumn.tsx @@ -1,13 +1,9 @@ -import { component$, useStylesScoped$ } from '@builder.io/qwik' +import { component$ } from '@builder.io/qwik' import InstanceDetails from './InstanceDetails' -import styles from './LeftColumn.scss?inline' export const LeftColumn = component$(() => { - useStylesScoped$(styles) - return ( <> - {/* */} ) diff --git a/frontend/src/routes/[accountId]/[statusId]/index.scss b/frontend/src/routes/[accountId]/[statusId]/index.scss deleted file mode 100644 index f80f270..0000000 --- a/frontend/src/routes/[accountId]/[statusId]/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '../../../theme.scss' as theme; - -.back-button { - background: transparent; - color: theme.$indigo400; -} - -.back-button-text { - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} \ No newline at end of file diff --git a/frontend/src/routes/[accountId]/[statusId]/index.tsx b/frontend/src/routes/[accountId]/[statusId]/index.tsx index fcf2efa..f470765 100644 --- a/frontend/src/routes/[accountId]/[statusId]/index.tsx +++ b/frontend/src/routes/[accountId]/[statusId]/index.tsx @@ -1,6 +1,5 @@ -import { component$, useStyles$ } from '@builder.io/qwik' +import { component$ } from '@builder.io/qwik' import { MastodonStatus, StatusContext } from '~/types' -import styles from './index.scss?inline' import Status from '~/components/Status' import { formatDateTime } from '~/utils/dateTime' import { formatRoundedNumber } from '~/utils/numbers' @@ -19,8 +18,6 @@ export const statusLoader = loader$< }) export default component$(() => { - useStyles$(styles) - const { status, context } = statusLoader.use().value const mediaAttachment = (status.media_attachments && status.media_attachments[0]) || null @@ -28,9 +25,9 @@ export default component$(() => { <>
- + - Back + Back
@@ -38,7 +35,7 @@ export default component$(() => {
{/* Account Card */}
- +
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */} diff --git a/frontend/src/routes/explore/layout.scss b/frontend/src/routes/explore/layout.scss index 3093c7c..d348754 100644 --- a/frontend/src/routes/explore/layout.scss +++ b/frontend/src/routes/explore/layout.scss @@ -1,4 +1,3 @@ -@use '../../theme.scss' as theme; .explore-wrapper { display: flex; @@ -12,7 +11,7 @@ } .active { - color: theme.$slate200; + color: #dbeafe; position: relative; &::before, diff --git a/frontend/src/routes/explore/links/index.scss b/frontend/src/routes/explore/links/index.scss index 7f98e72..5d968bd 100644 --- a/frontend/src/routes/explore/links/index.scss +++ b/frontend/src/routes/explore/links/index.scss @@ -1,10 +1,3 @@ -@use '../../../theme.scss' as theme; - -.link-wrapper { - &:hover { - background-color: theme.$slate700; - } -} .thumbnail { width: 120px; diff --git a/frontend/src/routes/explore/links/index.tsx b/frontend/src/routes/explore/links/index.tsx index d69c2e0..b0ea056 100644 --- a/frontend/src/routes/explore/links/index.tsx +++ b/frontend/src/routes/explore/links/index.tsx @@ -21,7 +21,7 @@ export default component$(() => { <> {links.map((link) => ( -
+
{link.provider_name}
{link.title}
diff --git a/frontend/src/routes/layout.scss b/frontend/src/routes/layout.scss index 7fbe321..226d311 100644 --- a/frontend/src/routes/layout.scss +++ b/frontend/src/routes/layout.scss @@ -1,4 +1,3 @@ -@use '../theme.scss' as theme; .main-wrapper { height: 100%; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index fc563b0..322255a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,12 +1,9 @@ -@use './theme.scss' as theme; @tailwind base; @tailwind components; @tailwind utilities; body { - background-color: theme.$backgroundBaseColor; - color: theme.$fontBaseColor; font-family: ui-sans-serif, sans-serif, ui-sans-serif; line-height: 1.25rem; text-rendering: optimizelegibility; @@ -22,23 +19,11 @@ button { cursor: pointer; } -* { - // border defaults - border: 0 solid theme.$slate100; -} - .avatar { width: 46px; height: 46px; - border-radius: theme.$radius-medium; -} - -.avatar-sm { - width: 36px; - height: 36px; - border-radius: theme.$radius-medium; } .pointer { cursor: pointer; -} \ No newline at end of file +} diff --git a/frontend/src/theme.scss b/frontend/src/theme.scss deleted file mode 100644 index 9c659b7..0000000 --- a/frontend/src/theme.scss +++ /dev/null @@ -1,15 +0,0 @@ - -$radius-medium: 0.25rem; - -$slate100: #eff6ff; -$slate200: #dbeafe; -$slate400: #9baec8; -$slate700: #313543; -$slate800: #282c37; -$slate900: #1f232b; - -$indigo400: #8c8dff; - -// $backgroundBaseColor: $slate900; -$backgroundBaseColor: #191b22; -$fontBaseColor: #fff;