Skip to content

Designed default app icons & appstore visuals #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 24, 2024
Merged

Designed default app icons & appstore visuals #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b24e9a
add preset random app images to the appstore and homepage
0x70b1a5 May 22, 2024
dec66b8
unify icons inside homepage process
0x70b1a5 May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 0 additions & 94 deletions kinode/packages/app_store/pkg/ui/assets/index-34EVhDFF.js
View file
Open in desktop

This file was deleted.

94 changes: 94 additions & 0 deletions kinode/packages/app_store/pkg/ui/assets/index-Gc4HI_PE.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions kinode/packages/app_store/pkg/ui/assets/index-OOHWYMdt.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion kinode/packages/app_store/pkg/ui/assets/index-cJEV35Fc.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions kinode/packages/app_store/pkg/ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
<script type="module" crossorigin src="/main:app_store:sys/assets/index-34EVhDFF.js"></script>
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-cJEV35Fc.css">
<script type="module" crossorigin src="/main:app_store:sys/assets/index-Gc4HI_PE.js"></script>
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-OOHWYMdt.css">
</head>

<body>
Expand Down
31 changes: 18 additions & 13 deletions kinode/packages/app_store/ui/src/components/AppEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,24 @@ export default function AppEntry({ app, size = "medium", overrideImageSize, show
}}
>
<AppHeader app={app} size={size} overrideImageSize={overrideImageSize} />
<ActionButton
app={app}
isIcon={!showMoreActions && size !== 'large'}
className={classNames({
'absolute': size !== 'large',
'top-2 right-2': size !== 'large' && showMoreActions,
'top-0 right-0': size !== 'large' && !showMoreActions,
'bg-orange text-lg min-w-1/5': size === 'large',
'ml-auto': size === 'large' && isMobile
})} />
{showMoreActions && <div className="absolute bottom-2 right-2">
<MoreActions app={app} />
</div>}
<div className={classNames("flex items-center", {
'absolute': size !== 'large',
'top-2 right-2': size !== 'large' && showMoreActions,
'top-0 right-0': size !== 'large' && !showMoreActions,
'ml-auto': size === 'large' && isMobile,
'min-w-1/5': size === 'large'
})}>
<ActionButton
app={app}
isIcon={!showMoreActions && size !== 'large'}
className={classNames({
'bg-orange text-lg': size === 'large',
'mr-2': showMoreActions,
'w-full': size === 'large'
})}
/>
{showMoreActions && <MoreActions app={app} className="self-stretch" />}
</div>
</div>
);
}
7 changes: 4 additions & 3 deletions kinode/packages/app_store/ui/src/components/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { appId } from "../utils/app";
import classNames from "classnames";
import ColorDot from "./ColorDot";
import { isMobileCheck } from "../utils/dimensions";
import AppIconPlaceholder from './AppIconPlaceholder'

interface AppHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
app: AppInfo;
Expand Down Expand Up @@ -54,9 +55,9 @@ export default function AppHeader({
'h-20': imageSize === 'medium',
})}
/>
: <ColorDot
num={app.metadata_hash || app.state?.our_version?.toString() || ''}
dotSize={imageSize}
: <AppIconPlaceholder
text={app.metadata_hash || app.state?.our_version?.toString() || ''}
size={imageSize}
/>}
<div className={classNames("flex flex-col", {
'gap-2': isMobile,
Expand Down
26 changes: 26 additions & 0 deletions kinode/packages/app_store/ui/src/components/AppIconPlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

import { isMobileCheck } from '../utils/dimensions';
import classNames from 'classnames';

const AppIconPlaceholder: React.FC<{ text: string, className?: string, size: 'small' | 'medium' | 'large' }> = ({ text, className, size }) => {
const index = text.split('').pop()?.toUpperCase() || '0'
const derivedFilename = `/icons/${index}`

if (!derivedFilename) {
return null
}

const isMobile = isMobileCheck()

return <img
src={derivedFilename}
className={classNames('m-0 align-self-center rounded-full', {
'h-32 w-32': !isMobile && size === 'large',
'h-18 w-18': !isMobile && size === 'medium',
'h-12 w-12': isMobile || size === 'small',
}, className)}
/>
}

export default AppIconPlaceholder
5 changes: 4 additions & 1 deletion kinode/packages/app_store/ui/src/components/DownloadButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,10 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
<button
{...props}
type="button"
className={classNames("text-sm self-start", props.className, { 'icon clear': isIcon })}
className={classNames("text-sm self-start", props.className, {
'icon clear': isIcon,
'black': !isIcon,
})}
onClick={onClick}
>
{isIcon ? <FaDownload /> : 'Download'}
Expand Down
3 changes: 2 additions & 1 deletion kinode/packages/app_store/ui/src/components/LaunchButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ export default function LaunchButton({ app, launchPath, isIcon = false, ...props
{...props}
type="button"
className={classNames("text-sm self-start", props.className, {
'icon clear': isIcon
'icon clear': isIcon,
'alt': !isIcon
})}
onClick={onLaunch}
>
Expand Down
4 changes: 4 additions & 0 deletions kinode/packages/app_store/ui/src/index.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 13 additions & 13 deletions kinode/packages/app_store/ui/src/pages/AppPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,19 @@ export default function AppPage() {
const isMobile = isMobileCheck()

const appDetails: Array<{ top: ReactElement, middle: ReactElement, bottom: ReactElement }> = [
{
top: <div className={classNames({ 'text-sm': isMobile })}>0 ratings</div>,
middle: <span className="text-2xl">5.0</span>,
bottom: <div className={classNames("flex-center gap-1", {
'text-sm': isMobile
})}>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaStar />
</div>
},
// {
// top: <div className={classNames({ 'text-sm': isMobile })}>0 ratings</div>,
// middle: <span className="text-2xl">5.0</span>,
// bottom: <div className={classNames("flex-center gap-1", {
// 'text-sm': isMobile
// })}>
// <FaStar />
// <FaStar />
// <FaStar />
// <FaStar />
// <FaStar />
// </div>
// },
{
top: <div className={classNames({ 'text-sm': isMobile })}>Developer</div>,
middle: <FaPeopleGroup size={36} />,
Expand Down
99 changes: 33 additions & 66 deletions kinode/packages/app_store/ui/src/pages/StorePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function StorePage() {
const start = (page - 1) * 10;
const end = start + 10;
setDisplayedApps(listedApps.slice(start, end));
}, [listedApps]);
}, [listedApps, page]);

// GET on load
useEffect(() => {
Expand All @@ -57,27 +57,6 @@ export default function StorePage() {
.catch((error) => console.error(error));
}, []); // eslint-disable-line

// const pages = useMemo(
// () => {
// const displayedApps = query ? searchResults : latestApps;

// return Array.from(
// { length: Math.ceil((displayedApps.length - 2) / 10) },
// (_, index) => index + 1
// )
// },
// [query, searchResults, latestApps]
// );

// const featuredApps = useMemo(() => latestApps.slice(0, 2), [latestApps]);
// const displayedApps = useMemo(
// () => {
// const displayedApps = query ? searchResults : latestApps.slice(2);
// return displayedApps.slice((page - 1) * 10, page * 10)
// },
// [latestApps, searchResults, page, query]
// );

const sortApps = useCallback(async (sort: string) => {
switch (sort) {
case "Recently published":
Expand Down Expand Up @@ -162,7 +141,7 @@ export default function StorePage() {
setResultsSort(e.target.value);
sortApps(e.target.value);
}}
className={classNames({
className={classNames('hidden', {
'basis-1/5': !isMobile
})}
>
Expand All @@ -172,15 +151,17 @@ export default function StorePage() {
<option>Recently updated</option>
</select>
</div>
{!searchQuery ? <div className={classNames("flex flex-col", {
{!searchQuery && <div className={classNames("flex flex-col", {
'gap-4': !isMobile,
'grow overflow-y-auto gap-2 items-center px-2': isMobile
})}>
<h2>Top apps this week...</h2>
<h2>Featured Apps</h2>
<div className={classNames("flex gap-2", {
'flex-col': isMobile
})}>
{displayedApps.slice(0, 4).map((app) => (
{displayedApps.filter(app => {
return ['kcal', 'command_center', 'memedeck', 'filter'].indexOf(app.package) !== -1
}).map((app) => (
<AppEntry
key={appId(app) + (app.state?.our_version || "")}
size={'medium'}
Expand All @@ -192,55 +173,41 @@ export default function StorePage() {
/>
))}
</div>
<h2>Must-have apps!</h2>
<div className={classNames("flex gap-2", {
'flex-col': isMobile
})}>
{displayedApps.slice(0, 5).map((app) => (
<AppEntry
key={appId(app) + (app.state?.our_version || "")}
size={isMobile ? 'medium' : 'small'}
app={app}
overrideImageSize={isMobile ? 'medium' : 'large'}
className={classNames("grow", {
'w-1/6': !isMobile,
'w-full': isMobile
})}
/>
))}
</div>
</div> : <div className={classNames("flex-col-center grow", {
</div>}
<h2>{searchQuery ? 'Search Results' : 'All Apps'}</h2>
<div className={classNames("flex flex-col grow overflow-y-auto", {
'gap-2': isMobile,
'gap-4': !isMobile,
})}>
{displayedApps.map(app => <AppEntry
key={appId(app) + (app.state?.our_version || "")}
size='large'
app={app}
className="self-stretch items-center"
className="self-stretch"
overrideImageSize="medium"
/>)}
</div>}
<div className="flex flex-col gap-2 overflow-y-auto">
{pages.length > 1 && (
<div className="flex self-center">
{page !== pages[0] && (
<FaChevronLeft onClick={() => setPage(page - 1)} />
)}
{pages.map((p) => (
<div
key={`page-${p}`}
className={classNames('my-1 mx-2', { "font-bold": p === page })}
onClick={() => setPage(p)}
>
{p}
</div>
))}
{page !== pages[pages.length - 1] && (
<FaChevronRight onClick={() => setPage(page + 1)} />
)}
</div>
)}
</div>
{pages.length > 1 && <div className="flex self-center">
{page !== pages[0] && (
<button className="icon" onClick={() => setPage(page - 1)}>
<FaChevronLeft />
</button>
)}
{pages.map((p) => (
<button
key={`page-${p}`}
className={classNames('my-1 mx-2 clear', { "font-bold": p === page })}
onClick={() => setPage(p)}
>
{p}
</button>
))}
{page !== pages[pages.length - 1] && (
<button className="icon" onClick={() => setPage(page + 1)}>
<FaChevronRight />
</button>
)}
</div>}
</div>
);
}
19 changes: 19 additions & 0 deletions kinode/packages/homepage/homepage/src/icons/bird-orange.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions kinode/packages/homepage/homepage/src/icons/bird-plain.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions kinode/packages/homepage/homepage/src/icons/bird-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions kinode/packages/homepage/homepage/src/icons/k-orange.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions kinode/packages/homepage/homepage/src/icons/k-plain.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading