mattermost-community/focalboard

UI Enhancement: use icons in Settings > Import submenu

Open

#4840 opened on Oct 18, 2022

View on GitHub
 (15 comments) (0 reactions) (1 assignee)TypeScript (26,187 stars) (2,542 forks)user submission
EnhancementHacktoberfestHelp Wanted

Description

Summary

It's not immediately obvious in the Settings > Import submenu that only the Import archive option actually opens the file dialog for you to upload a .boardarchive file. The other menu options are simply links to specific sections in the docs.

I'd like to make it more clear in the UI the purpose that the menu options serve. Perhaps an icon that would help infer to users that a menu option is a link?

cc @wuwinson @asaadmahmood

Contributor guide

Tech stack
typescriptreactcss
Domain
frontenddesign
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsFocalboard component structureIcon usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Examine the Settings > Import submenu component in the codebase (likely under webapp/src/components/settings/). Determine the existing menu items and add appropriate icons using the project's icon library to differentiate between file upload and external link actions. Test the change locally and ensure consistency with other menu icons in the app.