Skip to content

Commit

Permalink
app styled (initial view)
Browse files Browse the repository at this point in the history
  • Loading branch information
@artemis-prime
artemis-prime committed Jan 7, 2024
1 parent 082d619 commit cad623b
Show file tree
Hide file tree
Showing 89 changed files with 876 additions and 805 deletions.
12 changes: 6 additions & 6 deletions app/components/BridgeMenu/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Menu = ({
const Group = ({ children }: PropsWithChildren) => {
return (
<div>
<div className="divide-y divide-secondary-500 rounded-md bg-secondary-700 overflow-hidden">
<div className="divide-y divide-secondary-500 rounded-md bg-level-3 darker-2-class overflow-hidden">
{children}
</div>
</div>
Expand All @@ -26,11 +26,11 @@ const Item = (function Item({ children, pathname, onClick, icon, target = '_self

return (
pathname ?
<LinkWrapper href={pathname} target={target} className="gap-4 flex relative cursor-pointer hover:bg-secondary-600 select-none w-full items-center px-4 py-3 outline-none text-primary-text">
<LinkWrapper href={pathname} target={target} className="gap-4 flex relative cursor-pointer hover:bg-level-4 darker-3-class select-none w-full items-center px-4 py-3 outline-none text-muted text-muted-primary-text">
<div>
{icon}
</div>
<p className="text-primary-text">{children}</p>
<p className="text-muted text-muted-primary-text">{children}</p>
{
target === '_self' ?
<ChevronRight className="h-4 w-4 absolute right-3" />
Expand All @@ -42,12 +42,12 @@ const Item = (function Item({ children, pathname, onClick, icon, target = '_self
<button
type="button"
onClick={onClick}
className={`gap-4 flex relative cursor-pointer hover:bg-secondary-600 select-none items-center px-4 py-3 outline-none w-full text-primary-text`}
className={`gap-4 flex relative cursor-pointer hover:bg-level-4 darker-3-class select-none items-center px-4 py-3 outline-none w-full text-muted text-muted-primary-text`}
>
<div>
{icon}
</div>
<p className="text-primary-text">{children}</p>
<p className="text-muted text-muted-primary-text">{children}</p>
<ChevronRight className="h-4 w-4 absolute right-3" />
</button>
)
Expand All @@ -70,7 +70,7 @@ type MenuIemProps = {

const Footer = ({ children }: PropsWithChildren) => {
return (
<div className={`text-primary-text text-base border-t border-secondary-500 fixed inset-x-0 bottom-0 z-30 bg-secondary-900 shadow-widget-footer px-6 py-4 w-full `}>
<div className={`text-muted text-muted-primary-text text-base border-t border-secondary-500 fixed inset-x-0 bottom-0 z-30 bg-level-1 darkest-class shadow-widget-footer px-6 py-4 w-full `}>
{children}
</div>
)
Expand Down
8 changes: 4 additions & 4 deletions app/components/BridgeMenu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function BridgeMenu() {
}

return <>
<span className="text-secondary-text cursor-pointer relative">
<span className="text-foreground text-foreground-new cursor-pointer relative">
{

<>
Expand Down Expand Up @@ -186,12 +186,12 @@ export default function BridgeMenu() {

<div className="space-y-3 w-full">
<hr className="border-secondary-500" />
<p className="text-primary-text-muted flex justify-center my-3">Media links & suggestions:</p>
<p className="text-muted text-muted-primary-text-muted flex justify-center my-3">Media links & suggestions:</p>
</div>

<div className="grid grid-cols-2 gap-2 justify-center">
{navigation.social.map(({name, Icon, href, className}, index) => (
<Link key={index} target="_blank" href={href} className={`flex relative bg-secondary-700 hover:bg-secondary-600 rounded-md cursor-pointer select-none items-center outline-none text-primary-text ${className}`}>
<Link key={index} target="_blank" href={href} className={`flex relative bg-level-3 darker-2-class hover:bg-level-4 darker-3-class rounded-md cursor-pointer select-none items-center outline-none text-muted text-muted-primary-text ${className}`}>
<div className="p-2 w-full flex justify-center gap-1">
<Icon className="h-5 w-5" ariaHidden="true" />
<p>{name}</p>
Expand All @@ -207,7 +207,7 @@ export default function BridgeMenu() {
userType == UserType.AuthenticatedUser ?
<div>
<div
className={`gap-4 flex justify-between items-center relative select-none px-4 py-3 outline-none w-full text-primary-text`}
className={`gap-4 flex justify-between items-center relative select-none px-4 py-3 outline-none w-full text-muted text-muted-primary-text`}
>
<div className="font-normal flex gap-2 items-center">
<UserCircle2 className="h-5 w-5" />
Expand Down
30 changes: 15 additions & 15 deletions app/components/Campaigns/Details/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,24 +60,24 @@ const Component: FC<Props> = ({ campaign }) => {
Top 10
</button>
</div>}
<p className="text-sm text-primary-text">Users who earn the most throughout the program will be featured here.</p>
<div className="bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
<p className="text-sm text-muted text-muted-primary-text">Users who earn the most throughout the program will be featured here.</p>
<div className="bg-level-3 darker-2-class border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
<div className="p-3">
{leaderboard?.leaderboard?.length > 0 ? <div className="space-y-6">
{
leaderboard?.leaderboard?.filter(u => u.position < 4).map(user => (
<div key={user.position} className="items-center flex justify-between">
<div className="flex items-center">
<p className="text-xl font-medium text-primary-text w-fit mr-1">{user.position}.</p>
<p className="text-xl font-medium text-muted text-muted-primary-text w-fit mr-1">{user.position}.</p>
<div className="cols-start-2 flex items-center space-x-2">
<AddressIcon address={user.address} size={25} />
<div>
<div className="text-sm font-bold text-primary-text leading-3">
<div className="text-sm font-bold text-muted text-muted-primary-text leading-3">
{user?.address && network?.account_explorer_template && <Link target="_blank" className="hover:opacity-80" href={network?.account_explorer_template?.replace("{0}", user?.address)}>
{user?.position === rewards?.user_reward?.position ? <span className="text-primary">You</span> : shortenAddress(user?.address)}
</Link>}
</div>
<p className="mt-1 text-sm font-medium text-secondary-text leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
<p className="mt-1 text-sm font-medium text-foreground text-foreground-new leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
</div>
</div >
</div >
Expand All @@ -99,7 +99,7 @@ const Component: FC<Props> = ({ campaign }) => {
<span>{leaderboardRewards[user.position - 1]} {campaign?.asset}</span>
</p>
</div>}>
<div className='text-primary-text hover:cursor-pointer hover:text-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
<div className='text-muted text-muted-primary-text hover:cursor-pointer hover:text-muted text-muted-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
<Trophy className="h-4 w-4" aria-hidden="true" />
</div>
</ClickTooltip>
Expand All @@ -112,21 +112,21 @@ const Component: FC<Props> = ({ campaign }) => {
{
position >= 4 && address && rewards?.user_reward &&
<div className={position > 4 ? "!mt-0 !pt-0" : ""}>
{position > 4 && < div className="text-2xl text-center leading-3 text-secondary-text my-3">
{position > 4 && < div className="text-2xl text-center leading-3 text-foreground text-foreground-new my-3">
...
</div>}
<div key={position} className="items-center flex justify-between">
<div className="flex items-center">
<p className="text-xl font-medium text-primary-text w-fit mr-1">{position}.</p>
<p className="text-xl font-medium text-muted text-muted-primary-text w-fit mr-1">{position}.</p>
<div className="cols-start-2 flex items-center space-x-2">
<AddressIcon address={address} size={25} />
<div>
<div className="text-sm font-bold text-primary-text leading-3">
<div className="text-sm font-bold text-muted text-muted-primary-text leading-3">
{network?.account_explorer_template && <Link target="_blank" className="hover:opacity-80" href={network?.account_explorer_template?.replace("{0}", address)}>
<span className="text-primary">You</span>
</Link>}
</div>
<p className="mt-1 text-sm font-medium text-secondary-text leading-3">{truncateDecimals(rewards.user_reward.total_amount, campaignAsset?.precision)} {campaign?.asset}</p>
<p className="mt-1 text-sm font-medium text-foreground text-foreground-new leading-3">{truncateDecimals(rewards.user_reward.total_amount, campaignAsset?.precision)} {campaign?.asset}</p>
</div>
</div >
</div >
Expand All @@ -142,23 +142,23 @@ const Component: FC<Props> = ({ campaign }) => {
</div >
</div >
<Modal height="full" header='Leaderboard' show={openTopModal} setShow={setOpenTopModal} >
<div className="bg-secondary-700 border border-secondary-700 mt-2 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg text-secondary-text">
<div className="bg-level-3 darker-2-class border border-secondary-700 mt-2 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg text-foreground text-foreground-new">
<div className="p-3">
<div className="space-y-6">
{
leaderboard?.leaderboard?.map(user => (
<div key={user.position} className="items-center flex justify-between">
<div className="flex items-center">
<p className="text-xl font-medium text-primary-text w-fit mr-1">{user.position}.</p>
<p className="text-xl font-medium text-muted text-muted-primary-text w-fit mr-1">{user.position}.</p>
<div className="cols-start-2 flex items-center space-x-2">
<AddressIcon address={user.address} size={25} />
<div>
<div className="text-sm font-bold text-primary-text leading-3">
<div className="text-sm font-bold text-muted text-muted-primary-text leading-3">
{user?.address && network?.account_explorer_template && <Link target="_blank" className="hover:opacity-80" href={network?.account_explorer_template?.replace("{0}", user?.address)}>
{user.position === rewards?.user_reward?.position ? <span className="text-primary">You</span> : shortenAddress(user.address)}
</Link>}
</div>
<p className="mt-1 text-sm font-medium text-secondary-text leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
<p className="mt-1 text-sm font-medium text-foreground text-foreground-new leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
</div>
</div >
</div >
Expand All @@ -182,7 +182,7 @@ const Component: FC<Props> = ({ campaign }) => {
</p>
</div>
}>
<div className='text-secondary-text hover:cursor-pointer hover:text-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
<div className='text-foreground text-foreground-new hover:cursor-pointer hover:text-muted text-muted-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
<Trophy className="h-4 w-4" aria-hidden="true" />
</div>
</ClickTooltip>
Expand Down
Loading

0 comments on commit cad623b

Please sign in to comment.