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

Rework styles

Browse Source 
global.css, layouts.css, AppLayoutSidebar.tsx, subpanel.module.css, index.module.css, index.tsx, and LandingPage.tsx
This commit is contained in:
jerlendds
2024-01-01 12:32:19 -07:00
parent f17d945c75
commit d0fce28f0a
7 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@ body {
}
#root {
@apply flex flex-col min-h-screen relative bg-mirage-800/60 from-mirage-800/80 to-mirage-800/50 bg-gradient-to-br ;
@apply flex flex-col min-h-screen relative bg-mirage-700/60 from-mirage-700/70 to-mirage-800/50 bg-gradient-to-br ;
/* color: #066b74c1; */
}

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

@@ -1,9 +1,9 @@
.sidebar-link {
@apply flex items-center duration-200 ease-in-out ml-2 mr-0.5 my-1 py-2 text-base font-medium rounded-md border hover:border-mirage-400/60 border-transparent hover:ring-slate-800/20 text-slate-400/30 hover:text-slate-400/60 shadow hover:translate-x-px z-50 transition-all focus:text-slate-400/40 -translate-x-px ring-slate-900/20 ring-1 ring-inset from-mirage-400/10 pl-3 to-mirage-300/5 bg-gradient-to-tl from-10% pr-1.5 hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl font-display;
@apply flex items-center duration-200 ease-in-out mx-2.5 my-1 py-2 text-base font-medium rounded-md border hover:border-mirage-400/60 border-transparent hover:ring-slate-800/20 text-slate-400/30 hover:text-slate-400/60 shadow hover:translate-x-px z-50 transition-all focus:text-slate-400/40 -translate-x-px ring-slate-900/20 ring-1 ring-inset from-mirage-400/10 pl-3 to-mirage-300/5 bg-gradient-to-tl from-10% pr-1.5 hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl font-display;
}
.sidebar-link.active {
@apply hover:-translate-x-px shadow -translate-x-px ring-primary-400/20 border-primary-400/40 ring-1 ring-inset from-mirage-300/20 to-mirage-300/10 bg-gradient-to-tl from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl text-slate-300/80 ;
@apply hover:translate-x-px shadow translate-x-px ring-primary-400/20 border-primary-400/40 ring-1 ring-inset from-mirage-300/20 to-mirage-300/10 bg-gradient-to-tl from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl text-slate-300/80 ;
}
.sidebar-link.active button {
@@ -13,7 +13,7 @@
@apply text-primary-400
}
.sidebar-link button {
@apply border border-mirage-400/40 transition-colors duration-200 from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl
@apply border border-mirage-400/40 transition-colors duration-200 from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl
}
.sidebar-link button svg {

8
frontend/src/components/AppLayoutSidebar.tsx
View File

@@ -52,9 +52,9 @@ export default function AppLayoutSidebar({ showSidebar, toggleSidebar, setShowIn
to={item.to}
className={({ isActive }) =>
classNames(
isActive && "active",
"sidebar-link",
!showSidebar && "mx-0 "
isActive && "active mx-2",
"sidebar-link ",
!showSidebar ? "mx-0 ml-0 mr-px" : 'mr-2'
)
}
>
@@ -67,7 +67,7 @@ export default function AppLayoutSidebar({ showSidebar, toggleSidebar, setShowIn
"mr-2 flex-shrink-0 h-6 w-6 duration-100",
showSidebar
? "translate-x-0"
: "translate-x-[13.2rem] -ml-2"
: "translate-x-[12.75rem] "
)}
/>
{item.name}

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

@@ -2,7 +2,7 @@
@apply flex flex-col justify-between relative flex-shrink ;
}
.subpanel-section {
@apply py-1 px-1.5 flex flex-col
@apply py-1 px-0.5 flex flex-col
}
.subpanel > p {
@apply text-sm py-4 font-medium text-slate-500 focus:outline-none cursor-pointer px-2

20
frontend/src/routes/dashboard/index.module.css
View File

@@ -1,10 +1,10 @@
/* wraps the sidebar with search and the main view */
.sidebar-wrapper {
@apply rounded py-px !min-w-[18.75rem] max-w-[18.75rem] flex-col h-[99vh] pt-3.5 border-r-2 border-mirage-500/60 from-mirage-600/20 to-mirage-500/20 bg-gradient-to-br justify-between shadow-xl flex relative w-full
@apply rounded py-px !min-w-[20rem] max-w-[20rem] flex-col h-[99vh] pt-3.5 border-r-2 border-mirage-500/60 from-mirage-600/20 to-mirage-500/20 bg-gradient-to-br justify-between shadow-xl flex relative w-full
}
.search-container {
@apply flex mx-1.5 items-center relative border text-slate-600 hover:text-slate-300/40 focus:text-slate-300/40 transition-all duration-200 ease-out from-mirage-400/60 to-mirage-300/20 bg-gradient-to-tl rounded border-mirage-300/50 hover:border-mirage-300 mb-1.5
@apply flex mx-1.5 items-center relative border text-slate-600 hover:text-slate-300/40 focus:text-slate-300/40 transition-all duration-200 ease-out from-mirage-400/60 to-mirage-300/20 bg-gradient-to-tl rounded border-mirage-300/50 hover:border-mirage-300 mb-1.5
}
.search-container:active, .search-container:focus-within {
@apply border-primary/50 to-mirage-400/10 from-mirage-400/20 bg-gradient-to-l
@@ -15,18 +15,18 @@
}
.search-container svg {
@apply w-5 h-5 text-inherit ml-2
@apply w-5 h-5 text-inherit ml-2
}
.dashboard-tabs {
@apply overflow-y-hidden flex-grow
@apply overflow-y-hidden flex-grow flex flex-col items-stretch
}
.tabs-list {
@apply flex justify-between rounded pb-2 pt-0.5 items-center;
@apply flex justify-between rounded pb-2 pt-0.5 items-center;
}
.tab {
@apply focus:outline-none transition-colors duration-200 ease-in-out flex items-center justify-center pt-2.5 px-0 mx-0 rounded min-w-[6.34rem] text-sm leading-none z-[1] font-display flex-grow hover:pointer-events-auto
@apply focus:outline-none transition-colors duration-200 ease-in-out flex items-center justify-center pt-2.5 px-0 mx-0 rounded min-w-[6.5rem] text-sm leading-none z-[1] font-display flex-grow hover:pointer-events-auto
}
.tab span,
.tab-false span,
@@ -40,16 +40,16 @@
@apply text-slate-600 hover:text-slate-500 ;
}
.tab-slider {
@apply min-h-[34px] mr-auto min-w-[90px] left-0 relative pointer-events-auto z-[0] top-1 hover:scale-x-[100%] transition-all duration-200 ease-in-out rounded scale-x-[101%] from-primary-300/40 to-primary-300/60 border border-mirage-400/60 bg-gradient-to-br
@apply min-h-[34px] mr-auto min-w-[90px] left-0 relative pointer-events-auto z-[0] top-1 hover:scale-x-[100%] transition-all duration-200 ease-in-out rounded scale-x-[104%] from-primary-300/40 to-primary-300/60 border border-mirage-400/60 bg-gradient-to-br
}
.graph-tab[aria-selected="true"] ~ div {
@apply -translate-x-[298px] w-[112px] cursor-pointer
@apply -translate-x-[304px] w-[134px] scale-x-[104%] cursor-pointer
}
.entities-tab[aria-selected="true"] ~ div {
@apply -translate-x-[197px] scale-x-[110%] cursor-pointer
@apply -translate-x-[202px] scale-x-[110%] cursor-pointer
}
.market-tab[aria-selected="true"] ~ div {
@apply -translate-x-[95px] scale-[100.5%] cursor-pointer
@apply -translate-x-[97px] scale-x-[106%] cursor-pointer
}
.tab-panel {
@apply w-full relative overflow-y-scroll;

2
frontend/src/routes/dashboard/index.tsx
View File

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

6
frontend/src/routes/public/LandingPage.tsx
View File

@@ -19,7 +19,7 @@ export default function LandingPage(): React.ReactElement {
rotateSpeed: 0.0005,
pointColor: 0x242E4D,
pointHighlight: 0x394778,
fogColor: 0x0d738f,
fogColor: 0x0d628f,
lineHighlightSize: 10,
minLineSpacing: 30,
maxLineSpacing: 1000,
@@ -48,12 +48,12 @@ export default function LandingPage(): React.ReactElement {
<div className='lg:pt-32 pt-16 top-8 px-4 relative'>
<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 '>
<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>
<p className=' text-lg tracking-tight text-slate-400'>
Stay informed with critical insights from the web. We're on a mission to democratize access to data collection and analysis tools, uniting experts, journalists, and other developers with powerful intelligence tools. Reveal the connections that shape our world.
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>
<div className='mt-5 lg:mt-4 flex gap-4 md:justify-center lg:justify-start'>
<button