git.iko.soy/urbit.org
on master help sign in
components: amend for new variants used on grants pages
commit38547a874d7ef15df4e187e3b9c6f5ade232ca6b authorMatilde Park <matilde.park@urbit.org> dateTue 1 Nov 2022, 13:06 (4 years ago) parent397b1e7
4 files changed+20−10
compare with master
unifiedsplit
components/JoinGroup.js+2−2 components/ecosystem/MetadataBlock.js+1−1 components/gateway/Image.js+4−4 components/gateway/ResourceCard.js+13−3
components/JoinGroup.js+2−2
@@ -58,9 +58,9 @@ export default function Contact({ emphasize, groupName, label, className }) {
5858
5959 return (
6060 <div className={className}>
61− <h4 className="mt-4 text-wall-500 flex items-baseline flex-wrap">
61+ <h4 className="text-wall-500 flex items-baseline flex-wrap">
6262 {label ? label + " " : ""}
63− <div className="md:ml-2 rounded-lg flex items-stretch">
63+ <div className="rounded-lg flex items-stretch">
6464 <code
6565 className={`rounded-l-lg px-2 md:px-4 py-2 ${washedBg} flex items-center h-full ${linkText}`}
6666 >
components/ecosystem/MetadataBlock.js+1−1
@@ -1,5 +1,5 @@
11export default function MetadataBlock({ title, content }) {
2− return <div className="flex flex-col">
2+ return <div className="flex flex-col py-2 basis-1/2 md:basis-auto">
33 <p className="font-bold text-wall-400">{title}</p>
44 <p>{content}</p>
55 </div>
components/gateway/Image.js+4−4
@@ -9,7 +9,7 @@ const GatewayImage = ({
99}) => {
1010 if (error) {
1111 return (
12− <div className="overflow-hidden rounded-xl">
12+ <div className="overflow-hidden rounded-xl shrink-0">
1313 <svg
1414 width={size}
1515 height={size}
@@ -29,7 +29,7 @@ const GatewayImage = ({
2929
3030 if (patp) {
3131 return (
32− <div className="rounded-xl overflow-hidden">
32+ <div className="rounded-xl overflow-hidden shrink-0">
3333 <Sigil patp={patp} size={size} color={color} />
3434 </div>
3535 );
@@ -39,14 +39,14 @@ const GatewayImage = ({
3939 return (
4040 <div
4141 style={{ height: size, width: size, backgroundColor: image }}
42− className="rounded-xl"
42+ className="rounded-xl shrink-0"
4343 />
4444 );
4545 }
4646
4747 return image ? (
4848 <div
49− className="rounded-xl overflow-hidden"
49+ className="rounded-xl overflow-hidden shrink-0"
5050 style={{ backgroundColor: color }}
5151 >
5252 <img src={image} style={{ height: size, width: size }} />
components/gateway/ResourceCard.js+13−3
@@ -1,11 +1,21 @@
11import Link from "next/link";
22import GatewayImage from "./Image";
3+import classNames from "classnames";
34
4−const ResourceCard = ({ type, shortcode, title, color, image }) => (
5+const ResourceCard = ({ type, shortcode, title, description = "", color, image, full }) => (
56 <Link href={`/${type}s/${shortcode}`}>
6− <div className="cursor-pointer rounded-xl bg-wall-100 p-4 flex items-center space-x-4 mr-2 my-1">
7+ <div className={classNames("cursor-pointer rounded-xl bg-wall-100 p-4 flex items-center space-x-4 mr-2 my-1", {
8+ "basis-full": full
9+ })}>
710 <GatewayImage color={color} image={image || color} size={50} />
8− <a className="font-semibold">{title}</a>
11+ {full
12+ ? <><div className="flex flex-col w-full">
13+ <a className="font-semibold">{title}</a>
14+ <p className="hidden lg:block">{description}</p>
15+ </div>
16+ <a className="button-lg bg-green-400 text-white shrink-0">View {type}</a>
17+ </>
18+ : <a className="font-semibold">{title}</a>}
919 </div>
1020 </Link>
1121);