Working buttons

- plus small UI tweaks

Author: alanthai

client/src/app.css

@@ -13,6 +13,12 @@ body {
   padding: 0;
 }
 
+body.modal-open {
+  position: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
 p {
   margin: 0;
 }

client/src/components/page-layout/PageLayout.module.css

@@ -19,7 +19,7 @@
   background-image: url("../../assets/brand-background-top-corner.svg");
   background-size: contain;
   background-repeat: no-repeat;
-  filter: blur(2px);
+  filter: blur(4px);
   pointer-events: none;
   z-index: 0;
 }

client/src/components/section/Section.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: 1fr max-content;
   gap: 7rem;
+  margin-block-start: 4.5rem;
 }
 
 .section {
@@ -18,7 +19,11 @@
   width: fit-content;
 }
 
-.sectionContent button {
+.sectionContent > img:first-child {
+  margin-bottom: var(--bolt-space-2);
+}
+
+.sectionContent > :is(button, a) {
   margin-top: var(--bolt-space-6);
 }
 

client/src/components/section/Section.tsx

@@ -1,31 +1,28 @@
 import type { JSX } from "preact/jsx-runtime";
-import { Button } from "../../design/button/Button";
 import { Heading1 } from "../../design/heading/Heading";
 import { TextBlock } from "../../design/text-block/TextBlock";
 
 import styles from "./Section.module.css";
 
 export interface SectionProps {
   iconUrl: string;
+  iconSize?: number;
   title: string;
   description: string;
-  experience: {
-    url: string;
-    label: string;
-  };
+  action: JSX.Element;
   preview: JSX.Element | JSX.Element[];
 }
 
 export function Section(props: SectionProps) {
-  const { iconUrl, title, description, experience, preview } = props;
+  const { iconUrl, iconSize, title, description, action, preview } = props;
   return (
     <section className={styles.section}>
       <div className={styles.sectionContent}>
-        <img src={iconUrl} height={80} alt="Swipe-able Ads" />
+        <img src={iconUrl} height={iconSize ?? 80} alt={title} />
         <Heading1 large>{title}</Heading1>
         <TextBlock size="large">{description}</TextBlock>
 
-        <Button>{experience.label}</Button>
+        {action}
       </div>
 
       {preview}

client/src/components/top-nav/TopNav.module.css

@@ -2,6 +2,9 @@
   padding: var(--bolt-space-4) var(--bolt-space-8);
   background-color: var(--bolt-surface-primary);
   box-shadow: var(--global-shadow2);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .navLeft {

client/src/design/button/Button.module.css

@@ -3,6 +3,12 @@
   padding: var(--bolt-space-3) var(--bolt-space-5);
   background-color: var(--bolt-surface-inverse-primary);
   color: var(--bolt-content-inverse-primary);
+  font-size: var(--bolt-font-body-small-size);
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bolt-space-2);
 }
 
 .button:hover {
@@ -12,3 +18,7 @@
 .button:active {
   background-color: var(--bolt-surface-inverse-primary-pressed);
 }
+
+.button:disabled {
+  cursor: not-allowed;
+}

client/src/design/button/Button.tsx

@@ -2,8 +2,16 @@ import type { JSX } from "preact/jsx-runtime";
 
 import styles from "./Button.module.css";
 
-export type ButtonProps = JSX.HTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = JSX.HTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+};
 
 export function Button(props: ButtonProps) {
   return <button {...props} className={styles.button}></button>;
 }
+
+export type LinkButtonProps = JSX.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export function LinkButton(props: LinkButtonProps) {
+  return <a {...props} className={styles.button}></a>;
+}

client/src/design/icons/close.tsx

@@ -0,0 +1,19 @@
+export function Close({ size = 24 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.5962 5.28247L18.7175 7.40379L7.40381 18.7175L5.28249 16.5962L16.5962 5.28247Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.7175 16.5962L16.5962 18.7175L5.28249 7.40379L7.40381 5.28247L18.7175 16.5962Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

client/src/design/icons/spinner.tsx

@@ -0,0 +1,33 @@
+export function SpinnerIcon({
+  size = 66,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 66 66"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
+      <path
+        d="M62 33C62 36.8083 61.2499 40.5794 59.7925 44.0978C58.3351 47.6163 56.199 50.8132 53.5061 53.5061C50.8132 56.199 47.6163 58.3351 44.0978 59.7925C40.5794 61.2499 36.8083 62 33 62C29.1917 62 25.4206 61.2499 21.9022 59.7925C18.3837 58.3351 15.1868 56.199 12.4939 53.5061C9.801 50.8132 7.66488 47.6163 6.20749 44.0978C4.7501 40.5794 4 36.8083 4 33C4 29.1917 4.75011 25.4206 6.2075 21.9022C7.66489 18.3837 9.80101 15.1868 12.4939 12.4939C15.1868 9.801 18.3837 7.66487 21.9022 6.20749C25.4206 4.7501 29.1917 4 33 4C36.8083 4 40.5794 4.75011 44.0978 6.2075C47.6163 7.66489 50.8132 9.80101 53.5061 12.4939C56.199 15.1868 58.3351 18.3838 59.7925 21.9022C61.2499 25.4206 62 29.1917 62 33L62 33Z"
+        stroke="currentColor"
+        strokeOpacity="0.15"
+        strokeWidth="8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M33 4C36.8083 4 40.5794 4.75011 44.0978 6.20749C47.6163 7.66488 50.8132 9.80101 53.5061 12.4939C56.199 15.1868 58.3351 18.3837 59.7925 21.9022C61.2499 25.4206 62 29.1917 62 33"
+        stroke="currentColor"
+        strokeWidth="8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

client/src/design/spinner/Spinner.module.css

@@ -0,0 +1,12 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}