maq/osintbuddy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new styles for entity editor

Browse Source
This commit is contained in:
jerlendds
2023-11-18 18:54:56 -07:00
parent ceab2c6808
commit 4527cbfe51
12 changed files with 62 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/package-lock.json generated
View File

@@ -22,7 +22,9 @@
"@open-rpc/client-js": "^1.8.1",
"@reactour/tour": "^3.4.0",
"@reduxjs/toolkit": "^1.9.1",
"@uiw/codemirror-theme-tokyo-night": "^4.21.20",
"@uiw/codemirror-theme-aura": "^4.21.20",
"@uiw/codemirror-theme-dracula": "^4.21.20",
"@uiw/codemirror-theme-material": "^4.21.20",
"@uiw/react-codemirror": "^4.21.20",
"@yaireo/dragsort": "^1.3.1",
"@yaireo/tagify": "^4.17.8",
@@ -6224,10 +6226,26 @@
"@codemirror/view": ">=6.0.0"
}
},
"node_modules/@uiw/codemirror-theme-tokyo-night": {
"node_modules/@uiw/codemirror-theme-aura": {
"version": "4.21.20",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-tokyo-night/-/codemirror-theme-tokyo-night-4.21.20.tgz",
"integrity": "sha512-kKCDw6gMDGfbFgFh2yozG061nuxIDALeDSgqZw8zpUV166+A3a14SjIF70IqTMvQU5N3lSEyinG5ZM1jui2jiA==",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-aura/-/codemirror-theme-aura-4.21.20.tgz",
"integrity": "sha512-7njSV1XLToJjyimg8pt5KtUwTLAD8wzvmaKQSjmn9pmTt8h8ZXJTlJHWlFvMlTuOL4mUOkFsilg7dqyTxTD0Bw==",
"dependencies": {
"@uiw/codemirror-themes": "4.21.20"
}
},
"node_modules/@uiw/codemirror-theme-dracula": {
"version": "4.21.20",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-dracula/-/codemirror-theme-dracula-4.21.20.tgz",
"integrity": "sha512-ab9Knw3rLcq39c7yFFKICEW6z5o3huaa/TVQKFCq2I7ALnWUcctmd9dQjY6ECS1S9Xm4uPKzow3O2QvF4BWqQA==",
"dependencies": {
"@uiw/codemirror-themes": "4.21.20"
}
},
"node_modules/@uiw/codemirror-theme-material": {
"version": "4.21.20",
"resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-material/-/codemirror-theme-material-4.21.20.tgz",
"integrity": "sha512-QAHHzz1E4rO+1cTm0c5TyZ4zzLWkHlNsKR+ILakW8/gCxh3S3nTJwNQYJQ1IhFp4oi72lzFWnYuwkzOSXb4g/A==",
"dependencies": {
"@uiw/codemirror-themes": "4.21.20"
}

4
frontend/package.json
View File

@@ -17,7 +17,9 @@
"@open-rpc/client-js": "^1.8.1",
"@reactour/tour": "^3.4.0",
"@reduxjs/toolkit": "^1.9.1",
"@uiw/codemirror-theme-tokyo-night": "^4.21.20",
"@uiw/codemirror-theme-aura": "^4.21.20",
"@uiw/codemirror-theme-dracula": "^4.21.20",
"@uiw/codemirror-theme-material": "^4.21.20",
"@uiw/react-codemirror": "^4.21.20",
"@yaireo/dragsort": "^1.3.1",
"@yaireo/tagify": "^4.17.8",

1
frontend/public/index.html
View File

@@ -8,6 +8,7 @@
<meta name="description" content="Mine, map, and merge data for novel insights" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>OSINTBuddy</title>
</head>
<body class="dark">

BIN
frontend/src/assets/fonts/FiraCode-Light.woff Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/FiraCode-Light.woff2 Normal file
View File

Binary file not shown.

18
frontend/src/assets/styles/global.css
View File

@@ -14,7 +14,6 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2'),
@@ -23,7 +22,14 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('@/assets/fonts/FiraCode-Light.woff2') format('woff2'),
url('@/assets/fonts/FiraCode-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
*,
:after,
:before {
@@ -53,7 +59,7 @@ background-image: radial-gradient(49% 81% at 45% 47%, #7700ff 0%, #073AFF00 100%
/* https://gradienta.io/editor */
body {
@apply min-h-screen from-mirage-900/90 to-mirage-700/70 bg-gradient-to-br;
@apply min-h-screen from-mirage-900/90 to-mirage-700/60 bg-gradient-to-br;
}
#root {
@@ -104,7 +110,7 @@ figcaption {
* {
scrollbar-width: 8px;
scrollbar-color: #1d222f62 #202d4333;
}
/* end Custom Scrollbar Style */
@@ -286,7 +292,7 @@ input[type='file'] {
@apply !border-slate-600 !w-2 !h-2
}
.cm-line span {
@apply text-sm;
.cm-content {
@apply font-code text-sm font-semibold
}
/* end react-grid-layout and codemirror */

3
frontend/src/assets/styles/layouts.css
View File

@@ -20,5 +20,6 @@
@apply text-slate-400
}
.sidebar-link button:hover svg {
@apply text-slate-300
@apply text-slate-300;
}

29
frontend/src/components/EntityEditor/EntityEditor.tsx
View File

@@ -1,4 +1,6 @@
import { tokyoNightInit } from "@uiw/codemirror-theme-tokyo-night";
import { auraInit } from "@uiw/codemirror-theme-aura";
import { draculaInit } from "@uiw/codemirror-theme-dracula";
import { materialLightInit } from "@uiw/codemirror-theme-material";
import CodeMirror, { Extension } from "@uiw/react-codemirror";
import { tags as t } from "@lezer/highlight";
import { python } from "@codemirror/lang-python";
@@ -8,11 +10,14 @@ import { Responsive, WidthProvider } from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import { Icon } from "../Icons";
export const tokyoNightTheme = tokyoNightInit({
export const tokyoNightTheme = auraInit({
settings: {
caret: "#c6c6c6",
background: '#1a1b26',
fontFamily: 'monospace'
background: 'rgba(46, 56, 87, .2)',
fontFamily: 'monospace',
gutterBackground: 'rgba(46, 56, 87, .36)',
selectionMatch: 'rgba(76, 86, 107, .00)',
lineHighlight: 'rgba(36, 46, 77, .86)',
},
styles: [{ tag: t.comment, color: "#6272a4" }],
})
@@ -25,6 +30,7 @@ export function CodeEditor({ code, setCode, lsp }: JSONObject) {
value={code}
onChange={(value) => setCode(value)}
extensions={[python(), lsp]}
/>
) : (
<CodeMirror
@@ -32,6 +38,7 @@ export function CodeEditor({ code, setCode, lsp }: JSONObject) {
value={code}
onChange={(value) => setCode(value)}
extensions={[python()]}
/>
)}
</>
@@ -55,7 +62,7 @@ export default function EntityEditor({ activeEntity }: JSONObject) {
<>
<ResponsiveGridLayout
compactType={null}
className="w-auto flex h-full z-[99] absolute"
className="w-full flex h-full z-[99] absolute"
rowHeight={56}
maxRows={50}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
@@ -64,7 +71,7 @@ export default function EntityEditor({ activeEntity }: JSONObject) {
isResizable={true}
>
<div
className="overflow-hidden rounded-md z-10 bg-dark-600 border border-dark-300 flex flex-col h-full"
className="overflow-hidden rounded-md border-mirage-200/60 border z-10 from-mirage-200/30 to-mirage-300/60 shadow bg-gradient-to-tl from-10% flex flex-col h-full"
key="b"
data-grid={{
x: 0,
@@ -77,7 +84,7 @@ export default function EntityEditor({ activeEntity }: JSONObject) {
minW: 4.5,
}}
>
<ol className="text-sm flex select-none relative px-2 py-2">
<ol className="text-sm flex select-none from-mirage-400/80 bg-gradient-to-tr from-40% to-mirage-300/60 relative px-2 py-2 border-b border-mirage-300/80">
<li className="flex items-start">
<div className="flex items-center">
<span className="text-slate-500 font-display truncate">
@@ -87,13 +94,13 @@ export default function EntityEditor({ activeEntity }: JSONObject) {
</div>
</li>
<li className="flex mr-auto">
<div className="flex justify-between items-center w-full text-slate-400 ">
<div className="flex justify-between items-center w-full text-primary-100">
<span
className="text-slate-500 text-inherit whitespace-nowrap font-display"
className="text-inherit whitespace-nowrap font-display"
title={"placeholder"}
>
{activeEntity && activeEntity.label}
<span className="font-medium font-display ">&nbsp;/</span>
<span className="font-medium font-display text-slate-500">&nbsp;/</span>
</span>
</div>
</li>
@@ -131,7 +138,7 @@ export default function EntityEditor({ activeEntity }: JSONObject) {
</div>
</li>
</ol>
<div className="container bg-[#1A1B26] overflow-y-scroll h-full ">
<div className="container bg-t overflow-y-scroll h-full ">
<div className="editor ">
<CodeEditor code={code} setCode={setCode} />
</div>

2
frontend/src/routes/dashboard/_components/graph/GraphHeader.tsx
View File

@@ -18,7 +18,7 @@ export default function GraphHeader({ graph, stats, refetchGraphs }: GraphHeader
return (
<div className="flex flex-col w-full">
<div className="flex w-full border-b-2 border-mirage-400/20 -top-[2px] relative">
<div className="flex w-full border-b-2 border-mirage-400/20 -top-[2px] relative">
<div className=" w-full mx-auto">
<section className="flex flex-col items-start justify-between px-4 lg:items-center lg:px-6 md:px-4 lg:flex-row md:flex-row md:items-center relative">
<div className="flex flex-col w-full py-1">

2
frontend/src/routes/dashboard/dashboard.module.css
View File

@@ -1,6 +1,6 @@
/* wraps the sidebar with search and the main view */
.sidebar-wrapper {
@apply rounded !min-w-[20rem] max-w-[20rem] flex flex-col w-full pt-3.5 pb-6 border-r-2 border-mirage-800/70 from-mirage-500/20 to-mirage-400/20 bg-gradient-to-br pl-2 max-h-screen justify-between shadow-xl
@apply rounded !min-w-[20rem] max-w-[20rem] flex flex-col w-full pt-3.5 pb-6 border-r-[3px] border-mirage-800/70 from-mirage-500/20 to-mirage-400/20 bg-gradient-to-br pl-2 max-h-screen justify-between shadow-xl
}
.search-container {

2
frontend/src/routes/graph-inquiry/_components/EntityOptions.tsx
View File

@@ -185,7 +185,7 @@ export default function EntityOptions({ activeProject }: JSONObject) {
<>
<div className='mt-2.5 hover:border-mirage-200/40 transition-colors duration-200 ease-in-out block justify-between items-center from-mirage-400/50 to-mirage-400/40 bg-gradient-to-r rounded border mb-2 mx-4 focus-within:!border-primary/40 px-3.5 py-1 text-slate-100 shadow-sm border-mirage-400/20 ring-light-900/10 focus-within:border-primary/50 focus-within:from-mirage-400/20 focus-within:to-mirage-400/30 focus-within:bg-gradient-to-l'>
<div className='mt-2.5 hover:border-mirage-200/40 transition-colors duration-200 ease-in-out block justify-between items-center from-mirage-400/50 to-mirage-400/40 bg-gradient-to-r rounded border mb-2 mx-4 focus-within:!border-primary/40 px-3.5 py-1 text-slate-100 shadow-sm border-mirage-400/20 ring-light-900/10 focus-within:from-mirage-400/20 focus-within:to-mirage-400/30 focus-within:bg-gradient-to-l'>
<input
onChange={(e) => setSearchFilter(e.target.value)}
className='block w-full placeholder:text-slate-700 bg-transparent outline-none sm:text-sm'

2
frontend/tailwind.config.js
View File

@@ -226,7 +226,7 @@ module.exports = {
fontFamily: {
sans: ["Inter"],
display: ["Lexend"],
code: ["monospace"],
code: ["Fira Code", "monospace"],
},
extend: {
animation: {