diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css index 1537e3e3c..3f8619098 100644 --- a/web/assets/themes/midnight-trip.css +++ b/web/assets/themes/midnight-trip.css @@ -129,16 +129,6 @@ html, body { background: black; } -/* Status info dropdown button */ -.status .status-info .status-stats details.stats-more-info > summary { - color: var(--button-fg); - background: var(--button-bg); -} -.status .status-info .status-stats details.stats-more-info > summary:hover { - outline: 0; - background: var(--button-hover-bg); -} - /* Status info dropdown content */ .status.expanded .status-info .status-stats .stats-more-info-content, .status .status-info .status-stats .stats-more-info-content { diff --git a/web/source/css/thread.css b/web/source/css/thread.css index c67c95d4e..75dda550b 100644 --- a/web/source/css/thread.css +++ b/web/source/css/thread.css @@ -79,9 +79,18 @@ &.indent-3, &.indent-4, &.indent-5 { - .status-link { - margin-left: -0.5rem; + /* + Show a stripey line to the left of + indented statuses for better legibility. + */ + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 100%; border-left: 0.15rem dashed $border-accent; + margin-left: -0.5rem; } } diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index a5b85f214..9d0dfa2b4 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -17,7 +17,7 @@ along with this program. If not, see . */ -import React, { useState } from "react"; +import React, { useMemo, useState } from "react"; import { useVerifyCredentialsQuery } from "../lib/query/login"; import { MediaAttachment, Status as StatusType } from "../lib/types/status"; import sanitize from "sanitize-html"; @@ -68,15 +68,6 @@ export function Status({ status }: { status: StatusType }) { - - Open this status (opens in new tab) - ); } @@ -266,25 +257,103 @@ function StatusMediaEntry({ media }: { media: MediaAttachment }) { ); } +function useVisibilityIcon(visibility: string): string { + return useMemo(() => { + switch (true) { + case visibility === "direct": + return "fa-envelope"; + case visibility === "followers_only": + return "fa-lock"; + case visibility === "unlisted": + return "fa-unlock"; + case visibility === "public": + return "fa-globe"; + default: + return "fa-question"; + } + }, [visibility]); +} + function StatusFooter({ status }: { status: StatusType }) { + const visibilityIcon = useVisibilityIcon(status.visibility); return ( ); }