diff --git a/.eslintrc.js b/.eslintrc.js
index 3de954e4..c5b7e861 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
'*.lock',
'.husky',
'patches',
+ '*.html',
],
overrides: [
{
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index b5ed329c..5a671d6a 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -39,6 +39,32 @@
height: calc(100% + env(safe-area-inset-top));
}
+ /* Color theming */
+ :root {
+ --text: black;
+ --background: white;
+ --backgroundLight: #F3F3F8;
+ }
+ html.colorMode--dark {
+ --text: white;
+ --background: black;
+ --backgroundLight: #26272D;
+ }
+ @media (prefers-color-scheme: light) {
+ html.colorMode--system {
+ --text: black;
+ --background: white;
+ --backgroundLight: #F3F3F8;
+ }
+ }
+ @media (prefers-color-scheme: dark) {
+ html.colorMode--system {
+ --text: white;
+ --background: black;
+ --backgroundLight: #26272D;
+ }
+ }
+
body {
display: flex;
/* Allows you to scroll below the viewport; default value is visible */
@@ -49,12 +75,6 @@
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
- /* Enable for apps that support dark-theme */
- /*@media (prefers-color-scheme: dark) {
- body {
- background-color: black;
- }
- }*/
/* Remove default link styling */
a {
@@ -109,6 +129,44 @@
.tippy-content .items {
width: fit-content;
}
+
+ /* Tooltips */
+ [data-tooltip] {
+ position: relative;
+ z-index: 10;
+ }
+ [data-tooltip]::after {
+ content: attr(data-tooltip);
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateY(100%) translateY(8px) translateX(-50%);
+ padding: 4px 10px;
+ border-radius: 10px;
+ background: var(--backgroundLight);
+ color: var(--text);
+ text-align: center;
+ white-space: nowrap;
+ font-size: 12px;
+ z-index: 10;
+ }
+ [data-tooltip]::before {
+ content: '';
+ display: none;
+ position: absolute;
+ border-bottom: 6px solid var(--backgroundLight);
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ bottom: 0;
+ left: 50%;
+ transform: translateY(100%) translateY(2px) translateX(-50%);
+ z-index: 10;
+ }
+ [data-tooltip]:hover::after,
+ [data-tooltip]:hover::before {
+ display:block;
+ }
{% include "scripts.html" %}
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index d1ea4ddf..0c0bb01d 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -267,13 +267,20 @@ export class ShellUiModel {
hydrate(v: unknown) {
if (isObj(v)) {
if (hasProp(v, 'colorMode') && isColorMode(v.colorMode)) {
- this.colorMode = v.colorMode
+ this.setColorMode(v.colorMode)
}
}
}
setColorMode(mode: ColorMode) {
this.colorMode = mode
+
+ if (typeof window !== 'undefined') {
+ const html = window.document.documentElement
+ // remove any other color mode classes
+ html.className = html.className.replace(/colorMode--\w+/g, '')
+ html.classList.add(`colorMode--${mode}`)
+ }
}
setMinimalShellMode(v: boolean) {
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index e44151ac..088be6a9 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -193,7 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
-
+
-
- ·
-
- {({timeElapsed}) => <>{timeElapsed}}
-
-
+
+ {({timeElapsed}) => (
+
+ · {timeElapsed}
+
+ )}
+
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index e428960f..fd886fda 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -135,6 +135,7 @@ export const TextLink = observer(function TextLink({
numberOfLines,
lineHeight,
dataSet,
+ title,
}: {
testID?: string
type?: TypographyVariant
@@ -144,6 +145,7 @@ export const TextLink = observer(function TextLink({
numberOfLines?: number
lineHeight?: number
dataSet?: any
+ title?: string
} & TextProps) {
const {...props} = useLinkProps({to: sanitizeUrl(href)})
const store = useStores()
@@ -173,8 +175,8 @@ export const TextLink = observer(function TextLink({
style={style}
numberOfLines={numberOfLines}
lineHeight={lineHeight}
- // @ts-ignore web only -prf
dataSet={dataSet}
+ title={title}
// @ts-ignore web only -prf
hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
{...props}>
@@ -197,6 +199,7 @@ interface DesktopWebTextLinkProps extends TextProps {
accessible?: boolean
accessibilityLabel?: string
accessibilityHint?: string
+ title?: string
}
export const DesktopWebTextLink = observer(function DesktopWebTextLink({
testID,
@@ -218,6 +221,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
text={text}
numberOfLines={numberOfLines}
lineHeight={lineHeight}
+ title={props.title}
{...props}
/>
)
@@ -229,6 +233,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
style={style}
numberOfLines={numberOfLines}
lineHeight={lineHeight}
+ title={props.title}
{...props}>
{text}
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index bf21ff0d..b0ad0175 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -79,6 +79,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
lineHeight={1.2}
text={timeElapsed}
accessibilityLabel={niceDate(opts.timestamp)}
+ title={niceDate(opts.timestamp)}
accessibilityHint=""
href={opts.postHref}
/>
@@ -94,6 +95,7 @@ const styles = StyleSheet.create({
alignItems: isAndroid ? 'center' : 'baseline',
paddingBottom: 2,
gap: 4,
+ zIndex: 1,
},
avatar: {
alignSelf: 'center',
diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
index 2825390c..ea97d59f 100644
--- a/src/view/com/util/text/Text.tsx
+++ b/src/view/com/util/text/Text.tsx
@@ -6,6 +6,8 @@ import {useTheme, TypographyVariant} from 'lib/ThemeContext'
export type CustomTextProps = TextProps & {
type?: TypographyVariant
lineHeight?: number
+ title?: string
+ dataSet?: Record
}
export function Text({
@@ -13,13 +15,19 @@ export function Text({
children,
lineHeight,
style,
+ title,
+ dataSet,
...props
}: React.PropsWithChildren) {
const theme = useTheme()
const typography = theme.typography[type]
const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
return (
-
+
{children}
)
diff --git a/web/index.html b/web/index.html
index 1bfa8f68..603e3954 100644
--- a/web/index.html
+++ b/web/index.html
@@ -43,6 +43,32 @@
height: calc(100% + env(safe-area-inset-top));
}
+ /* Color theming */
+ :root {
+ --text: black;
+ --background: white;
+ --backgroundLight: #F3F3F8;
+ }
+ html.colorMode--dark {
+ --text: white;
+ --background: black;
+ --backgroundLight: #26272D;
+ }
+ @media (prefers-color-scheme: light) {
+ html.colorMode--system {
+ --text: black;
+ --background: white;
+ --backgroundLight: #F3F3F8;
+ }
+ }
+ @media (prefers-color-scheme: dark) {
+ html.colorMode--system {
+ --text: white;
+ --background: black;
+ --backgroundLight: #26272D;
+ }
+ }
+
body {
display: flex;
/* Allows you to scroll below the viewport; default value is visible */
@@ -53,12 +79,6 @@
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
- /* Enable for apps that support dark-theme */
- /*@media (prefers-color-scheme: dark) {
- body {
- background-color: black;
- }
- }*/
/* Remove default link styling */
a {
@@ -113,6 +133,44 @@
.tippy-content .items {
width: fit-content;
}
+
+ /* Tooltips */
+ [data-tooltip] {
+ position: relative;
+ z-index: 10;
+ }
+ [data-tooltip]::after {
+ content: attr(data-tooltip);
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateY(100%) translateY(8px) translateX(-50%);
+ padding: 4px 10px;
+ border-radius: 10px;
+ background: var(--backgroundLight);
+ color: var(--text);
+ text-align: center;
+ white-space: nowrap;
+ font-size: 12px;
+ z-index: 10;
+ }
+ [data-tooltip]::before {
+ content: '';
+ display: none;
+ position: absolute;
+ border-bottom: 6px solid var(--backgroundLight);
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ bottom: 0;
+ left: 50%;
+ transform: translateY(100%) translateY(2px) translateX(-50%);
+ z-index: 10;
+ }
+ [data-tooltip]:hover::after,
+ [data-tooltip]:hover::before {
+ display:block;
+ }