Implement Settings Security Section (Figma)

[Baskarayelu]

Description

Implement the Security settings section from the Figma design. Shield icon, "Security" title, "Protect your account." subtitle, and dark card with Auto-sign Transactions (toggle off) and Session Timeout (dropdown).

Design reference (Figma): RemitWise Design

Design Requirements

Layout

• Header: Red-outline shield icon + "Security" (bold white). "Protect your account." (lighter grey).
• Card (dark grey, rounded):
  • Auto-sign Transactions: Lightning icon. "Auto-sign Transactions" (white). "Skip confirmation for small amounts." (grey). Toggle switch (off: grey track, handle left).
  • Session Timeout: Clock icon. "Session Timeout" (white). "Auto logout after inactivity." (grey). Dropdown/select (dark grey, chevron).

Visual Design

• Dark theme; red shield icon; toggle off state (grey); dropdown for session duration.

Technical Requirements

• Next.js App Router
• TypeScript
• Tailwind CSS
• Auto-sign toggle persists; Session Timeout dropdown options (e.g. 5 min, 15 min, 1 hour) and persists
• Accessible toggles and selects

Acceptance Criteria

• "Security" title with shield icon, subtitle
• Auto-sign Transactions row with description and toggle (off by default)
• Session Timeout row with description and dropdown
• Toggle and dropdown functional and persist
• Dark theme matches design
• Accessible controls

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Thosine-01]

@Thosine-01 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d like to work on this issue.

I’m comfortable implementing UI directly from Figma designs using Next.js (App Router), TypeScript, and Tailwind CSS. I can build the Security settings section with the correct layout, dark theme styling, icons, toggle and dropdown interactions, and ensure it’s fully responsive and accessible.

I’ll follow existing component patterns in the codebase and keep the implementation clean and easy to extend.

Looking forward to contributing — thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Thosine-01 to this issue.

[Pee-pheelips]

@Pee-pheelips has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello,

I’m a frontend and mobile app developer with 4+ years of experience building polished, responsive, and accessible UIs.

I can confidently implement the Settings Security section, including the shield icon, “Security” title, subtitle, and the dark card with the Auto-sign Transactions toggle and Session Timeout dropdown, ensuring full alignment with the Figma design and responsive behavior across devices.

Portfolio & projects:
https://paulfolio-delta.vercel.app/
https://certiva.vercel.app/
https://www.mollateral.com/
https://www.eduvacity.com/

Happy to take this on if approved.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Pee-pheelips to this issue.

[OluRemiFour]

@OluRemiFour has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Security settings are the first line of trust between users and their accounts.

This issue stands out because clear, accessible controls for transaction signing and session management help users feel confident and in control of their account security. A well-designed security section reduces friction while reinforcing trust.

I have experience building responsive, accessible settings components in Next.js with TypeScript and Tailwind CSS, including persistent toggles, dropdowns, and ARIA-compliant controls. For this task, I will implement the Security section as per Figma, with the red shield icon, dark card, auto-sign toggle, session timeout dropdown, responsive layout, and persistent state—ensuring clarity, usability, and user confidence.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluRemiFour to this issue.

[MerlinTheWhiz]

@MerlinTheWhiz has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would love to work on this please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MerlinTheWhiz to this issue.

[SimpleX-T]

@SimpleX-T has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi Baskarayelu,

I'd love to take on this issue. I am a frontend developer, and I deliver clean jobs quickly.
If assigned, I will deliver withing 3-4hours.

Looking forward to contributing

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SimpleX-T to this issue.

[drips-wave]

Congratulations, @Thosine-01! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Thosine-01: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Pvsaint]

@Pvsaint has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I'm Victor, a software developer, proficient in rust, nextjs, react, typescript, etc.
I'd love to contribute to this project by taking this issue if it's available, ETA 24hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Pvsaint to this issue.

[anumukul]

@anumukul has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d like to take this issue and can deliver a fix within 24 hours.
I’ve worked on similar projects before and have relevant experience, so I should be able to handle this efficiently.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @anumukul to this issue.