Magic-Mirror/mitmproxy
1
0
Fork 0
mirror of https://github.com/mitmproxy/mitmproxy.git synced 2024-11-23 05:09:57 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improve design capture page (#7160)

Browse Source 
* improve style capture page

* use left-border

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Matteo Luppi 2024-09-04 16:23:06 +02:00 committed by GitHub
parent 401b5c0198
commit 59129de1fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/css/mode.less
View File

@ -10,10 +10,21 @@
width: 100vw;
h3 {
margin-top: 30px;
margin-bottom: 10px;
}
.modes-category {
padding-left: 10px;
}
.green-left-border {
border-left: 10px solid #77c77a;
}
.gray-left-border {
border-left: 10px solid #b2b2b2;
}
.modes-container {
display: flex;
flex-direction: column;

30
web/src/js/components/Modes.tsx
View File

@ -16,19 +16,25 @@ export default function Modes() {
<h2>Intercept Traffic</h2>
<p>Configure how you want to intercept traffic with mitmproxy.</p>
<h3>Recommended</h3>
<div className="modes-container">
<Regular />
{!platform.startsWith("linux") ? <Local /> : undefined}
<Wireguard />
<Reverse />
<div className="modes-category green-left-border">
<h3>Recommended</h3>
<div className="modes-container">
<Regular />
{!platform.startsWith("linux") ? <Local /> : undefined}
<Wireguard />
<Reverse />
</div>
</div>
<h3>Advanced</h3>
<div className="modes-container">
<Socks />
<Upstream />
<Dns />
{!platform.startsWith("win32") ? <Transparent /> : undefined}
<div className="modes-category gray-left-border">
<h3>Advanced</h3>
<div className="modes-container">
<Socks />
<Upstream />
<Dns />
{!platform.startsWith("win32") ? (
<Transparent />
) : undefined}
</div>
</div>
</div>
);