git.iko.soy/urbit.org
on master help sign in
components: amend for new variants used on grants pages
38547a8Matilde Park
components/JoinGroup.js+2−2
compare with master
unifiedsplit
@@ -58,9 +58,9 @@ export default function Contact({ emphasize, groupName, label, className }) {
58
58
59 return (
59 return (
60 <div className={className}>
60 <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">
62 {label ? label + " " : ""}
62 {label ? label + " " : ""}
63− <div className="md:ml-2 rounded-lg flex items-stretch">
63+ <div className="rounded-lg flex items-stretch">
64 <code
64 <code
65 className={`rounded-l-lg px-2 md:px-4 py-2 ${washedBg} flex items-center h-full ${linkText}`}
65 className={`rounded-l-lg px-2 md:px-4 py-2 ${washedBg} flex items-center h-full ${linkText}`}
66 >
66 >
components/ecosystem/MetadataBlock.js+1−1
@@ -1,5 +1,5 @@
1export default function MetadataBlock({ title, content }) {
1export 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">
3 <p className="font-bold text-wall-400">{title}</p>
3 <p className="font-bold text-wall-400">{title}</p>
4 <p>{content}</p>
4 <p>{content}</p>
5 </div>
5 </div>
components/gateway/Image.js+4−4
@@ -9,7 +9,7 @@ const GatewayImage = ({
9}) => {
9}) => {
10 if (error) {
10 if (error) {
11 return (
11 return (
12− <div className="overflow-hidden rounded-xl">
12+ <div className="overflow-hidden rounded-xl shrink-0">
13 <svg
13 <svg
14 width={size}
14 width={size}
15 height={size}
15 height={size}
@@ -29,7 +29,7 @@ const GatewayImage = ({
29
29
30 if (patp) {
30 if (patp) {
31 return (
31 return (
32− <div className="rounded-xl overflow-hidden">
32+ <div className="rounded-xl overflow-hidden shrink-0">
33 <Sigil patp={patp} size={size} color={color} />
33 <Sigil patp={patp} size={size} color={color} />
34 </div>
34 </div>
35 );
35 );
@@ -39,14 +39,14 @@ const GatewayImage = ({
39 return (
39 return (
40 <div
40 <div
41 style={{ height: size, width: size, backgroundColor: image }}
41 style={{ height: size, width: size, backgroundColor: image }}
42− className="rounded-xl"
42+ className="rounded-xl shrink-0"
43 />
43 />
44 );
44 );
45 }
45 }
46
46
47 return image ? (
47 return image ? (
48 <div
48 <div
49− className="rounded-xl overflow-hidden"
49+ className="rounded-xl overflow-hidden shrink-0"
50 style={{ backgroundColor: color }}
50 style={{ backgroundColor: color }}
51 >
51 >
52 <img src={image} style={{ height: size, width: size }} />
52 <img src={image} style={{ height: size, width: size }} />
components/gateway/ResourceCard.js+13−3
@@ -1,11 +1,21 @@
1import Link from "next/link";
1import Link from "next/link";
2import GatewayImage from "./Image";
2import GatewayImage from "./Image";
3+import classNames from "classnames";
3
4
4−const ResourceCard = ({ type, shortcode, title, color, image }) => (
5+const ResourceCard = ({ type, shortcode, title, description = "", color, image, full }) => (
5 <Link href={`/${type}s/${shortcode}`}>
6 <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+ })}>
7 <GatewayImage color={color} image={image || color} size={50} />
10 <GatewayImage color={color} image={image || color} size={50} />
11+ {full
12+ ? <><div className="flex flex-col w-full">
8− <a className="font-semibold">{title}</a>
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>}
9 </div>
19 </div>
10 </Link>
20 </Link>
11);
21);