diff --git a/src/app/globals.css b/src/app/globals.css
index 26a0050..591e3e3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1079,77 +1079,48 @@ a.btn-primary:visited {
z-index: 11000;
display: grid;
place-items: center;
- overflow-y: auto;
- padding: 32px 24px;
- background:
- radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.055), transparent 38%),
- rgba(0, 0, 0, 0.78);
- backdrop-filter: blur(16px) saturate(0.8);
- -webkit-backdrop-filter: blur(16px) saturate(0.8);
+ padding: 24px;
+ background: rgba(0, 0, 0, 0.82);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
animation: globalComposeFadeIn 0.16s ease-out;
}
.global-compose-modal {
position: relative;
isolation: isolate;
- width: min(680px, 100%);
+ width: min(620px, 100%);
overflow: visible;
- border: 1px solid color-mix(in srgb, var(--border-hover) 72%, transparent);
- border-radius: 26px;
- background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%);
- box-shadow:
- 0 36px 120px rgba(0, 0, 0, 0.78),
- 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
+ border: 1px solid color-mix(in srgb, var(--accent) 16%, #242424);
+ border-radius: 16px;
+ background: #050505;
+ box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
animation: globalComposeRiseIn 0.2s ease-out;
}
.global-compose-modal::before {
content: '';
position: absolute;
- z-index: -1;
- inset: 0 12% auto;
- height: 1px;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
+ inset: -1px 16px auto;
+ height: 2px;
+ border-radius: 999px;
+ background: var(--accent);
+ opacity: 0.8;
}
.global-compose-header {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 20px 22px 18px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.075);
+ padding: 15px 18px;
+ border-bottom: 1px solid #1d1d1d;
}
.global-compose-header h2 {
margin: 0;
- font-size: 17px;
- font-weight: 650;
- letter-spacing: -0.01em;
-}
-
-.global-compose-heading {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.global-compose-heading-icon {
- display: grid;
- place-items: center;
- width: 38px;
- height: 38px;
- flex: 0 0 38px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 12px;
- color: var(--foreground);
- background: rgba(255, 255, 255, 0.055);
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
-}
-
-.global-compose-heading p {
- margin: 2px 0 0;
- color: var(--foreground-tertiary);
- font-size: 12px;
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: -0.015em;
}
.global-compose-close {
@@ -1163,116 +1134,59 @@ a.btn-primary:visited {
border-radius: 50%;
color: var(--foreground-secondary);
border: 1px solid transparent;
- background: rgba(255, 255, 255, 0.025);
+ background: transparent;
cursor: pointer;
}
.global-compose-close:hover {
- color: var(--foreground);
- border-color: var(--border);
- background: rgba(255, 255, 255, 0.07);
-}
-
-.global-compose-identity {
- display: flex;
- align-items: center;
- gap: 11px;
- padding: 20px 24px 0;
-}
-
-.global-compose-avatar {
- width: 42px;
- height: 42px;
- flex: 0 0 42px;
- overflow: hidden;
- border: 1px solid rgba(255, 255, 255, 0.12);
- border-radius: 50%;
- background: var(--background-tertiary);
- box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.025);
-}
-
-.global-compose-avatar img {
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.global-compose-identity-copy {
- min-width: 0;
- display: flex;
- flex: 1;
- flex-direction: column;
-}
-
-.global-compose-identity-copy > span {
- overflow: hidden;
- font-size: 14px;
- font-weight: 650;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.global-compose-identity-copy small {
- overflow: hidden;
- color: var(--foreground-tertiary);
- font-size: 12px;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.global-compose-audience {
- padding: 5px 9px;
- border: 1px solid var(--border);
- border-radius: 999px;
- color: var(--foreground-secondary);
- font-size: 11px;
- font-weight: 600;
- letter-spacing: 0.02em;
- background: rgba(255, 255, 255, 0.025);
+ color: var(--accent);
+ border-color: color-mix(in srgb, var(--accent) 22%, transparent);
+ background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.global-compose-modal .compose {
- padding: 8px 24px 22px;
+ padding: 18px;
border-bottom: 0;
}
.global-compose-modal .compose-mention-field {
- border: 1px solid rgba(255, 255, 255, 0.09);
- border-radius: 17px;
- background: rgba(0, 0, 0, 0.22);
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
+ position: relative;
}
.global-compose-modal .compose-input {
- min-height: 142px;
- padding: 18px;
- font-size: 18px;
- line-height: 1.5;
+ min-height: 150px;
+ padding: 6px 4px 12px;
+ font-size: 17px;
+ line-height: 1.55;
+ caret-color: var(--accent);
}
.global-compose-modal .compose-mention-suggestions {
- position: relative;
- inset: auto;
- z-index: 1;
- max-height: min(272px, 36dvh);
- margin: -4px 10px 10px;
- border-color: rgba(255, 255, 255, 0.1);
- border-radius: 13px;
- background: #101010;
- box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
+ position: absolute;
+ z-index: 5;
+ top: calc(100% + 8px);
+ left: 0;
+ right: 0;
+ max-height: min(238px, 34dvh);
+ margin: 0;
+ border-color: color-mix(in srgb, var(--accent) 18%, #242424);
+ border-radius: 12px;
+ background: #080808;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.72);
}
.global-compose-modal .compose-footer {
- margin-top: 18px;
- padding-top: 17px;
- border-top: 1px solid rgba(255, 255, 255, 0.07);
+ margin-top: 8px;
+ padding-top: 14px;
+ border-top: 1px solid #1d1d1d;
}
.global-compose-modal .compose-actions .btn-primary {
min-width: 88px;
- padding: 9px 20px;
+ padding: 8px 20px;
border-radius: 999px;
- font-weight: 650;
+ font-weight: 600;
+ box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
}
@keyframes globalComposeFadeIn {
@@ -1303,15 +1217,11 @@ a.btn-primary:visited {
}
.global-compose-header {
- padding: 16px 16px 14px;
- }
-
- .global-compose-identity {
- padding: 16px 18px 0;
+ padding: 14px 16px;
}
.global-compose-modal .compose {
- padding: 6px 18px 18px;
+ padding: 16px;
}
.global-compose-modal .compose-input {
diff --git a/src/components/GlobalPostComposer.tsx b/src/components/GlobalPostComposer.tsx
index f464dbc..edaab39 100644
--- a/src/components/GlobalPostComposer.tsx
+++ b/src/components/GlobalPostComposer.tsx
@@ -1,9 +1,8 @@
'use client';
import { useEffect, useState } from 'react';
-import { PenLine, Plus, X } from 'lucide-react';
+import { Plus, X } from 'lucide-react';
import { Compose } from '@/components/Compose';
-import { AvatarImage } from '@/components/AvatarImage';
import { signedAPI } from '@/lib/api/signed-fetch';
import { useAuth } from '@/lib/contexts/AuthContext';
import { useToast } from '@/lib/contexts/ToastContext';
@@ -96,18 +95,9 @@ export function GlobalPostComposer() {
role="dialog"
aria-modal="true"
aria-labelledby="global-compose-title"
- aria-describedby="global-compose-description"
>
Share something with your networkNew post
- Create post