Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update subscription UI layout, gem icon color, and chat theme branding

Browse Source
This commit is contained in:
pradeepkumar
2026-03-28 19:19:25 +05:30
parent d759d6a2e8
commit dc64335d28
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/icons/gem-icon.svg
View File

@@ -1,3 +1,3 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.625 7.875L10.5 18.375L18.375 7.875M2.625 7.875L5.25 2.625H15.75L18.375 7.875M2.625 7.875H18.375M7 2.625L5.25 7.875L10.5 18.375L15.75 7.875L14 2.625" stroke="#e58625" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.625 7.875L10.5 18.375L18.375 7.875M2.625 7.875L5.25 2.625H15.75L18.375 7.875M2.625 7.875H18.375M7 2.625L5.25 7.875L10.5 18.375L15.75 7.875L14 2.625" stroke="#00293D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 349 B

After

Width:  |  Height:  |  Size: 349 B

4
src/app/support/chat/page.tsx
View File

@@ -277,7 +277,7 @@ export default function SupportChatPage() {
{/* Chat Area */} {/* Chat Area */}
<main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 w-full flex flex-col"> <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 w-full flex flex-col">
{/* Chat Header */} {/* Chat Header */}
<div className="border border-[#00293d]/10 rounded-t-[15px] px-6 py-4 flex items-center gap-3 bg-[#648188]"> <div className="border border-[#00293d]/10 rounded-t-[15px] px-6 py-4 flex items-center gap-3 bg-[#e58625]">
<Image <Image
src="/assets/icons/chat-icon.svg" src="/assets/icons/chat-icon.svg"
alt="" alt=""
@@ -365,7 +365,7 @@ export default function SupportChatPage() {
<div <div
className={`max-w-[75%] rounded-[15px] px-4 py-3 ${ className={`max-w-[75%] rounded-[15px] px-4 py-3 ${
isOwn isOwn
? 'bg-[#00293d] text-white rounded-br-[4px]' ? 'bg-[#e58625] text-white rounded-br-[4px]'
: 'bg-white text-[#00293d] border border-[#00293d]/10 rounded-bl-[4px]' : 'bg-white text-[#00293d] border border-[#00293d]/10 rounded-bl-[4px]'
}`} }`}
> >

6
src/components/settings/SubscriptionForm.tsx
View File

@@ -214,7 +214,7 @@ export function SubscriptionForm() {
Include Features Include Features
</h4> </h4>
<div className="space-y-5"> <div className="space-y-[18px]">
{PLAN_FEATURES.map((feature) => ( {PLAN_FEATURES.map((feature) => (
<div key={feature.label} className="flex items-center gap-3"> <div key={feature.label} className="flex items-center gap-3">
<Image <Image
@@ -233,8 +233,8 @@ export function SubscriptionForm() {
</div> </div>
{/* Illustration */} {/* Illustration */}
<div className="hidden lg:flex items-end justify-end"> <div className="hidden lg:flex items-start justify-end">
<div className="w-[165px] h-[165px] rounded-full overflow-hidden"> <div className="w-[166px] h-[166px] rounded-[200px] overflow-hidden">
<img <img
src="/assets/images/subscription-plan-illustration.png" src="/assets/images/subscription-plan-illustration.png"
alt="Professional plan" alt="Professional plan"