Skip to content

Commit

Permalink
Merge pull request #13 from chirag3003/main
Browse files Browse the repository at this point in the history 
updated website theme and ui
  • Loading branch information
@BRAVO68WEB
BRAVO68WEB authored Jun 27, 2024
2 parents 1b790f3 + 2b7805f commit 5c957f7
Show file tree
Hide file tree
Showing 11 changed files with 114 additions and 46 deletions.
8 changes: 4 additions & 4 deletions apps/pacsearch-app/app/[repo]/[pkg]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,13 @@ export default function Page({ params }: Readonly<{ params: { repo: string; pkg:
return (
<NameContext>
<div className="font-sans min-h-screen p-8 pb-20 gap-16 sm:p-20">
<div className="flex gap-16 flex-row sm:flex-row">
<div className="flex flex-col items-center justify-items-center">
<div className="items-center justify-items-center text-2xl pt-2">
<div className="flex flex-col gap-16 ">
<div className="flex flex-col justify-items-center">
<div className="items-center justify-items-center text-2xl pt-2 text-rp-moon-iris">
<Link href={`/`}>&#8592; Go back</Link>
</div>
</div>
<div className="flex gap-4 flex-col border-sky-500 border-2">
<div className="flex gap-4 flex-col border-rp-moon-subtle border-2">
<PackageInfo repoName={params.repo} pkgName={params.pkg} />
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions apps/pacsearch-app/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,8 @@ body {
color: var(--background);
background: var(--foreground);
}

.react-dropdown-select {
border-color: rgb(68 65 90) !important;
padding: auto 30px !important;
}
6 changes: 3 additions & 3 deletions apps/pacsearch-app/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const metadata: Metadata = {
sizes: "32x32",
type: "image/png",
},
]
],
};

export default function RootLayout({
Expand All @@ -61,9 +61,9 @@ export default function RootLayout({
return (
<html lang="en">
<head>
<link rel="icon" href="https://pacsearch-assets.b68.dev/favicon.ico" sizes="any" />
<link rel="icon" href="https://pacsearch-assets.b68.dev/favicon.ico" sizes="any" />
</head>
<body className={kanit.className}>{children}</body>
<body className={`${kanit.className} bg-rp-moon-base`}>{children}</body>
</html>
);
}
10 changes: 5 additions & 5 deletions apps/pacsearch-app/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ import Link from "next/link";
export default function Home() {
return (
<NameContext>
<div className="font-sans h-screen w-screen overflow-hidden">
<div className="font-sans h-screen w-screen overflow-hidden text-rp-moon-text">
<div className="flex w-full">
<div className="flex w-1/6 h-screen border-r-2 border-sky-500 flex-col items-center justify-items-center">
<div className="logo w-full bg-white/10">
<div className="flex w-1/6 h-screen bg-rp-moon-surface flex-col items-center justify-items-center">
<div className="logo w-full bg-rp-moon-overlay">
<h1 className="items-center justify-items-center text-2xl p-5">
Repo List
</h1>
</div>
<div className="logos my-4 mb-10 w-full px-4 flex gap-5 text-white">
<Link className="p-4 bg-white/10 rounded-full" href={"#"}>
<Link className="p-4 bg-rp-moon-overlay rounded-full" href={"#"}>
<Github className="h-6 w-6" />
</Link>
</div>
Expand All @@ -27,7 +27,7 @@ export default function Home() {
</div>
</div>
<div className="flex h-screen overflow-hidden flex-1 gap-4 flex-col ">
<div className="flex justify-between items-center p-2 px-10 bg-white/10">
<div className="flex justify-between items-center p-2 px-10 bg-rp-moon-surface py-3">
<SearchBar />
<Pagination />
</div>
Expand Down
40 changes: 20 additions & 20 deletions apps/pacsearch-app/components/PackageInfoRender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,108 +35,108 @@ function PackageInfoRender({ data }: Readonly<{ data: IPkgInfoData }>) {
<div className="flex flex-col p-2">
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Name</div>
<div className="text-lg font-medium text-rp-moon-subtle">Name</div>
<div className="text-xl">{name}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Version</div>
<div className="text-lg font-medium text-rp-moon-subtle">Version</div>
<div className="text-xl">{version}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Description</div>
<div className="text-lg font-medium text-rp-moon-subtle">Description</div>
<div className="text-xl">{description}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Repo</div>
<div className="text-lg font-medium text-rp-moon-subtle">Repo</div>
<div className="text-xl">{repo}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Arch</div>
<div className="text-lg font-medium text-rp-moon-subtle">Arch</div>
<div className="text-xl">{arch}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">License</div>
<div className="text-lg font-medium text-rp-moon-subtle">License</div>
<div className="text-xl">{license}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Base</div>
<div className="text-lg font-medium text-rp-moon-subtle">Base</div>
<div className="text-xl">{base}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">File Name</div>
<div className="text-lg font-medium text-rp-moon-subtle">File Name</div>
<div className="text-xl">
<Link href={download_url}>{file_name}</Link>
</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Build Date</div>
<div className="text-lg font-medium text-rp-moon-subtle">Build Date</div>
<div className="text-xl">{build_date}</div>
</div>
</div>
<div className="flex flex-row p-2"></div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Groups</div>
<div className="text-lg font-medium text-rp-moon-subtle">Groups</div>
<div className="text-xl">{groups}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Packager</div>
<div className="text-lg font-medium text-rp-moon-subtle">Packager</div>
<div className="text-xl">{packager}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Home URL</div>
<div className="text-lg font-medium text-rp-moon-subtle">Home URL</div>
<div className="text-xl">
<Link href={home_url}>{home_url}</Link>
</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Installed Size</div>
<div className="text-lg font-medium text-rp-moon-subtle">Installed Size</div>
<div className="text-xl">{bytesToibytes(installed_size)}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Compressed Size</div>
<div className="text-lg font-medium text-rp-moon-subtle">Compressed Size</div>
<div className="text-xl">{bytesToibytes(compressed_size)}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">MD5 Sum</div>
<div className="text-lg font-medium text-rp-moon-subtle">MD5 Sum</div>
<div className="text-xl">{md5_sum}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">SHA256 Sum</div>
<div className="text-lg font-medium text-rp-moon-subtle">SHA256 Sum</div>
<div className="text-xl">{sha256_sum}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">PGP Signature</div>
<div className="text-lg font-medium text-rp-moon-subtle">PGP Signature</div>
<div className="text-xl">{pgp_signature}</div>
</div>
</div>
<div className="flex flex-row p-2">
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Provides</div>
<div className="text-lg font-medium text-rp-moon-subtle">Provides</div>
<div className="text-xl">{provides}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Replaces</div>
<div className="text-lg font-medium text-rp-moon-subtle">Replaces</div>
<div className="text-xl">{replaces}</div>
</div>
<div className="flex flex-col p-2">
<div className="text-lg text-sky-500">Conflicts</div>
<div className="text-lg font-medium text-rp-moon-subtle">Conflicts</div>
<div className="text-xl">{conflicts}</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/pacsearch-app/components/PackagesRender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function PackageRender({ data }: Readonly<{ data: IRepoPkgsData }>) {
columnHelper.accessor("name", {
cell: info => {
return (
<Link href={`/${info.row.original.repo}/${info.row.original.name}`}>
<Link href={`/${info.row.original.repo}/${info.row.original.name}`} className="text-rp-moon-iris">
{info.getValue()}
</Link>
);
Expand Down Expand Up @@ -44,7 +44,7 @@ function PackageRender({ data }: Readonly<{ data: IRepoPkgsData }>) {

return (
<div className="flex flex-col p-2">
<table className="table-auto border-collapse border border-blue-400 p-5">
<table className="table-auto border-collapse border border-rp-moon-subtle p-5">
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
Expand All @@ -61,9 +61,9 @@ function PackageRender({ data }: Readonly<{ data: IRepoPkgsData }>) {
</tr>
))}
</thead>
<tbody className="border-collapse border border-blue-400 p-5 text-lg">
<tbody className="border-collapse border border-rp-moon-subtle p-5 text-lg">
{table.getRowModel().rows.map(row => (
<tr key={row.id} className="border-collapse border border-blue-400">
<tr key={row.id} className="border-collapse border border-rp-moon-subtle hover:bg-rp-base">
{row.getVisibleCells().map(cell => (
<td className="p-3 text-start align-top" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
Expand Down
10 changes: 5 additions & 5 deletions apps/pacsearch-app/components/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ function Pagination() {
]}
valueField="value"
labelField="label"
className="border-2 border-blue-500 text-white p-3 h-full px-8"
className="border-2 border-rp-moon-highlight-med text-white p-3 h-full px-8"
color="#3182ce"
onChange={values => setPerPage(values[0].value)}
/>
<button
className="border-2 border-blue-500 text-white p-3"
className="border border-rp-moon-highlight-med text-white p-3"
onClick={() => {
// if pageNumber is 1, do nothing
if (pageNumber === 1) return;
Expand All @@ -49,11 +49,11 @@ function Pagination() {
>
Previous
</button>
<span className="border-2 border-blue-500 text-white p-3">
<span className="border border-rp-highlight-med text-white p-3">
{pageNumber}/{totalPages}
</span>
<button
className="border-2 border-blue-500 text-white p-3"
className="border border-rp-highlight-med text-white p-3"
onClick={() => {
// if pageNumber is the last page, do nothing
if (pageNumber === totalPages) return;
Expand All @@ -62,7 +62,7 @@ function Pagination() {
>
Next
</button>
<span className="border-2 border-blue-500 text-white p-3">
<span className="border border-rp-highlight-med text-white p-3">
Total Packages: {totalPackages}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/pacsearch-app/components/RepoRender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function RepoRender({ data }: Readonly<{ data: IRepoListData }>) {
return (
<div className="flex flex-col border-solid w-full">
{table.getRowModel().rows.map(row => (
<div key={row.id} className="border-collapse border-y border-blue-400 hover:bg-blue-400 cursor-pointer p-5">
<div key={row.id} className="border-collapse border-t hover:bg-rp-moon-highlight-med border-rp-moon-muted cursor-pointer p-5">
{row.getVisibleCells().map(cell => (
<div
key={cell.id}
Expand Down
6 changes: 4 additions & 2 deletions apps/pacsearch-app/components/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ function SearchBar() {

return (
<div className="flex justify-center w-full max-w-lg">
<label className="text-white p-3 flex items-center justify-center bg-blue-500 px-4"><Search className="h-6 w-6" /></label>
<label className="text-white p-3 flex items-center justify-center bg-rp-moon-overlay px-4">
<Search className="h-6 w-6" />
</label>
<input
className="border-2 bg-transparent text-white border-blue-500 text-lg p-3 px-4 w-full focus-visible:outline-none"
className=" bg-transparent text-lg p-1 px-4 w-full focus-visible:outline-none bg-rp-moon-highlight-med"
type="text"
placeholder="Search for a package"
onChange={e => search(e.target.value)}
Expand Down
6 changes: 4 additions & 2 deletions apps/pacsearch-app/tailwind.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Config } from "tailwindcss";
import rosepineTheme from "./theme/rosepine";

const config: Config = {
content: [
Expand All @@ -9,8 +10,8 @@ const config: Config = {
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
// background: "var(--background)",j
// foreground: "var(--foreground)",
},
fontFamily: {
sans: ["var(--font-geist-sans)"],
Expand All @@ -19,5 +20,6 @@ const config: Config = {
},
},
plugins: [],
presets: [rosepineTheme],
};
export default config;
59 changes: 59 additions & 0 deletions apps/pacsearch-app/theme/rosepine.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const rosepineTheme = {
theme: {
colors: {
rp: {
base: "#191724",
surface: "#1f1d2e",
overlay: "#26233a",
muted: "#6e6a86",
subtle: "#908caa",
text: "#e0def4",
love: "#eb6f92",
gold: "#f6c177",
rose: "#ebbcba",
pine: "#31748f",
foam: "#9ccfd8",
iris: "#c4a7e7",
"highlight-low": "#21202e",
"highlight-med": "#403d52",
"highlight-high": "#524f67",
},
"rp-moon": {
base: "#232136",
surface: "#2a273f",
overlay: "#393552",
muted: "#6e6a86",
subtle: "#908caa",
text: "#e0def4",
love: "#eb6f92",
gold: "#f6c177",
rose: "#ea9a97",
pine: "#3e8fb0",
foam: "#9ccfd8",
iris: "#c4a7e7",
"highlight-low": "#2a283e",
"highlight-med": "#44415a",
"highlight-high": "#56526e",
},
"rp-dawn": {
base: "#faf4ed",
surface: "#fffaf3",
overlay: "#f2e9e1",
muted: "#9893a5",
subtle: "#797593",
text: "#575279",
love: "#b4637a",
gold: "#ea9d34",
rose: "#d7827e",
pine: "#286983",
foam: "#56949f",
iris: "#907aa9",
"highlight-low": "#f4ede8",
"highlight-med": "#dfdad9",
"highlight-high": "#cecacd",
},
},
},
};

export default rosepineTheme;

0 comments on commit 5c957f7

Please sign in to comment.