Rework background gradient colors

global.css, subpanel.module.css, index.module.css, index.tsx, EntityOptions.tsx, Graph.tsx, index.tsx, and LandingPage.tsx
This commit is contained in:
jerlendds
2024-01-01 16:50:28 -07:00
parent d0fce28f0a
commit 98f9b38c4d
8 changed files with 16 additions and 16 deletions

View File

@@ -54,7 +54,7 @@ button {
html {
background-size: 100% 100%;
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
background-image: radial-gradient(49% 81% at 45% 47%, #0048ffcb 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #151a3eaa 1%, #0015ffcb 99%),radial-gradient(142% 91% at 83% 7%, #0d8d8f 1%, #2b00ffda 99%),radial-gradient(142% 91% at -6% 74%, #002aff70 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #0040ff 25%, #452296 95%);
background-image: radial-gradient(49% 81% at 45% 47%, #0048ffcb 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #001547fa 1%, #1100a7cb 99%),radial-gradient(142% 91% at 83% 7%, #8f1a0dd6 1%, #005f46da 99%),radial-gradient(142% 91% at -6% 74%, #002aff70 1%, #a81010c1 99%),radial-gradient(142% 91% at 111% 84%, #0040ff 25%, #452296 95%);
}
/* https://gradienta.io/editor */
@@ -92,13 +92,13 @@ figcaption {
Works on Chrome, Edge, and Safari
*/
*::-webkit-scrollbar {
width: 7px;
width: 10px;
border-radius: none;
}
*::-webkit-scrollbar-track {
background: #19233433;
width: 7px;
width: 10px;
border-radius: none;
}
@@ -108,7 +108,7 @@ figcaption {
border-right: 9px solid #1b243a84;
}
* {
scrollbar-width: 7px;
scrollbar-width: 10px;
scrollbar-color: #1d222f62 #202d4333;
}

View File

@@ -15,7 +15,7 @@
@apply text-sm px-1 font-medium font-display leading-3 text-slate-600 focus:outline-none cursor-pointer
}
.subpanel-header svg {
@apply h-5 w-5 mr-2 hover:rotate-3 origin-center text-slate-600 ml-auto transform focus:outline-none cursor-pointer
@apply h-5 w-5 mr-1 hover:rotate-3 origin-center text-slate-600 ml-auto transform focus:outline-none cursor-pointer
}
.subpanel-header:hover svg {
@apply border-primary-300/40
@@ -29,7 +29,7 @@
}
.subpanel-link {
@apply mt-1 focus:outline-none bg-transparent border rounded-md border-transparent
@apply mt-1.5 focus:outline-none bg-transparent border rounded-md border-transparent
hover:ring-slate-700/20 hover:to-mirage-400/30 shadow hover:bg-gradient-to-tl from-10% hover:translate-x-px z-50 transition-transform hover:from-mirage-400/10 text-slate-400 hover:text-slate-400/20 focus:text-slate-400/40 w-full flex items-center -translate-x-px
}

View File

@@ -52,6 +52,6 @@
@apply -translate-x-[97px] scale-x-[106%] cursor-pointer
}
.tab-panel {
@apply w-full relative overflow-y-scroll;
@apply w-full relative ;
}

View File

@@ -142,7 +142,7 @@ export default function DashboardPage() {
</Tab>
<div className={styles["tab-slider"]}></div>
</Tab.List>
<section className="h-full overflow-y-scroll mb-20 px-2.5 -mr-1">
<section className="h-full overflow-y-scroll px-2 ">
<Tab.Panel className={styles["tab-panel"]}>
<GraphPanel
refetchGraphs={async () => await refetchGraphs()}

View File

@@ -196,7 +196,7 @@ export default function EntityOptions({ positionMode, activeGraph, setElkLayout,
}}
>
<div
className=' overflow-hidden rounded-md z-10 border border-mirage-400/70 from-mirage-500/95 to-mirage-500/90 bg-gradient-to-br flex flex-col h-min'
className=' overflow-hidden rounded-md z-10 border border-mirage-400/70 from-mirage-500/80 to-slate-900/90 bg-gradient-to-br flex flex-col h-min'
key='entities'
id='node-options-tour'
>

View File

@@ -198,7 +198,7 @@ export default function Graph({
connectionLineComponent={NewConnectionLine}
elevateNodesOnSelect={true}
>
<Background size={2} variant={BackgroundVariant.Dots} className='bg-transparent' color='#35426FAA' />
<Background size={2} variant={BackgroundVariant.Dots} className='bg-transparent' color='#35426F' />
</ReactFlow>
);
}

View File

@@ -402,7 +402,7 @@ export default function GraphInquiry({ }: GraphInquiryProps) {
activeGraph={activeGraph}
setElkLayout={setElkLayout}
/>
<div className='h-full w-full justify-between bg-mirage-500/70'>
<div className='h-full w-full justify-between bg-mirage-600/50'>
<div style={{ width: '100%', height: '100vh' }} ref={graphRef}>
<Graph
onSelectionCtxMenu={onSelectionCtxMenu}

View File

@@ -19,7 +19,7 @@ export default function LandingPage(): React.ReactElement {
rotateSpeed: 0.0005,
pointColor: 0x242E4D,
pointHighlight: 0x394778,
fogColor: 0x0d628f,
fogColor: 0x005f46,
lineHighlightSize: 10,
minLineSpacing: 30,
maxLineSpacing: 1000,
@@ -49,11 +49,11 @@ export default function LandingPage(): React.ReactElement {
<div className='mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 lg:max-w-8xl lg:grid-cols-2 '>
<div className='relative px- sm:px-3 z-10 md:text-center lg:text-left'>
<div className='relative pb-12'>
<p className='inline bg-gradient-to-r from-primary-300 via-primary-200 to-primary-400/90 bg-clip-text text-5xl font-display font-medium tracking-tight text-transparent'>
Elevate Your Research;<br /> Unlock the Webs Wisdom
<p className='inline bg-gradient-to-r from-primary-300 via-primary-200 to-primary-400/90 bg-clip-text text-4xl font-display font-medium tracking-tight text-transparent'>
Elevate your Research with<br /> Strategic Insights from Public Data
</p>
<p className=' text-lg tracking-tight text-slate-400'>
Stay informed with targeted insights from public data. We're on a mission to democratize access to open source intelligence. Let's reveal the connections that shape our world.
<p className='pt-1 text-lg tracking-tight text-slate-400'>
Reveal the connections that shape our world and stay informed with targeted insights from public data. We're on a mission to democratize access to open source intelligence and analytics.
</p>
<div className='mt-5 lg:mt-4 flex gap-4 md:justify-center lg:justify-start'>
<button