Merge branch 'main' into rrees-apps-openess

Author: rrees

components/SelectMenu.tsx

@@ -1,4 +1,9 @@
-import { Listbox } from "@headlessui/react"
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/react"
 import classNames from "classnames"
 import DisclosureArrow from "../public/ui/disclosure-arrow.svg?inline"
 
@@ -27,29 +32,29 @@ export const SelectMenu = ({
   return (
     <Listbox value={value} onChange={onChange}>
       <div className="b3 inline-flex w-full sm:w-auto">
-        <div className="relative w-full sm:w-auto">
-          <Listbox.Button className="relative w-full cursor-pointer rounded-md border border-gray-3 py-4 pl-4 pr-10 text-left focus:outline-none focus:ring-1 focus:ring-blurple-500 sm:w-auto">
+        <div className="w-full relative">
+          <ListboxButton className="flex w-full items-center gap-2 cursor-pointer rounded-md border border-gray-3 p-4 text-left focus:outline-none focus:ring-1 focus:ring-blurple-500 sm:w-auto">
             <span className="block truncate text-gray-1">
               <span className="font-medium">{label}: </span>
               <span className="font-bold">{selectedLabel}</span>
             </span>
 
-            <span className="end-3 pointer-events-none absolute block-start-5">
+            <span className="pointer-events-none">
               <DisclosureArrow
                 className="h-4 w-4 text-gray-2"
                 fill="currentColor"
               />
             </span>
-          </Listbox.Button>
+          </ListboxButton>
 
-          <Listbox.Options className="absolute z-10 mt-1 max-h-56 w-full min-w-max overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-gray-3 focus:outline-none">
+          <ListboxOptions className="absolute z-10 mt-1 max-h-56 w-full min-w-max overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-gray-3 focus:outline-none">
             {options.map(({ label: optionLabel, value: optionValue }) => (
-              <Listbox.Option
+              <ListboxOption
                 key={optionValue}
                 value={optionValue}
-                className={({ active }) =>
+                className={({ focus }) =>
                   classNames(
-                    active ? "bg-blurple-500 text-white" : "text-gray-1",
+                    focus ? "bg-blurple-500 text-white" : "text-gray-1",
                     "relative cursor-pointer select-none py-3 px-4 font-medium text-gray-1"
                   )
                 }
@@ -61,9 +66,9 @@ export const SelectMenu = ({
                     </span>
                   </>
                 )}
-              </Listbox.Option>
+              </ListboxOption>
             ))}
-          </Listbox.Options>
+          </ListboxOptions>
         </div>
       </div>
     </Listbox>

locales/en.json

@@ -39,7 +39,7 @@
   "home.features.self_expression.title": "Unparalleled creativity",
   "home.features.timeline.body": "You know best what you want to see on your home feed. No algorithms or ads to waste your time. Follow anyone across any Mastodon server from a single account and receive their posts in chronological order, and make your corner of the internet a little more like you.",
   "home.features.timeline.title": "Stay in control of your own timeline",
-  "home.get_the_app": "Get the app",
+  "home.get_the_app": "Get an app",
   "home.hero.body": "Your home feed should be filled with what matters to you most, not what a corporation thinks you should see. Radically different social media, back in the hands of the people.",
   "home.hero.headline": "Social networking that's not for sale.",
   "home.join_now": "Join {domain}",
@@ -59,7 +59,7 @@
   "home.why.opensource.copy": "Mastodon is free and open-source software. We believe in your right to use, copy, study and change Mastodon as you see fit, and we benefit from contributions from the community.",
   "home.why.opensource.title": "Open Source",
   "home.why.title": "Why Mastodon?",
-  "ios_and_android.download": "Download the apps",
+  "ios_and_android.download": "Official apps",
   "nav.about_us.description": "Read about our story, the team, and recent media coverage",
   "nav.about_us.title": "About us",
   "nav.apps.title": "Apps",

package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.2",
-    "@linear/sdk": "^38.0.0",
+    "@linear/sdk": "^39.0.0",
     "@tanstack/react-query": "^5.72.1",
     "blurhash": "^2.0.5",
     "classnames": "^2.5.1",
@@ -58,5 +58,5 @@
     "tailwindcss-logical": "^3.0.1",
     "typescript": "^5.8.3"
   },
-  "packageManager": "yarn@4.8.1"
+  "packageManager": "yarn@4.9.1"
 }

pages/apps.tsx

@@ -37,7 +37,7 @@ const AppsPage = () => {
                 <p className="sh1">
                   <FormattedMessage
                     id="apps.lead"
-                    defaultMessage="The best way to get started with Mastodon is through our official apps for iOS and Android, but many third-party apps are also available below."
+                    defaultMessage="The best way to get started with Mastodon is through our official iOS and Android apps, but many third-party apps are also available below."
                   />
                 </p>
               </div>
@@ -48,10 +48,10 @@ const AppsPage = () => {
 
       <div className="grid justify-center gap-x-gutter gap-y-16 pt-10 pb-8 text-center md:grid-cols-12 md:text-start">
         <div className="md:col-span-6 lg:col-span-5 xl:col-span-4 xl:col-start-2">
-          <h2 className="h4 mb-4">
+          <h2 className="h4 text-center mb-4">
             <FormattedMessage
               id="ios_and_android.download"
-              defaultMessage="Download the apps"
+              defaultMessage="Official apps"
             />
           </h2>
 

pages/servers.tsx

@@ -244,7 +244,7 @@ const Servers = () => {
       <div className="grid gap-20 pb-40">
         <GettingStartedCards />
         <div className="grid grid-cols-4 gap-gutter md:grid-cols-12">
-          <div className="col-span-full mb-4 flex flex-wrap gap-gutter md:mb-2 md:justify-end">
+          <div className="col-span-full mb-4 flex flex-col sm:flex-row gap-gutter md:mb-2 md:justify-end">
             <SelectMenu
               label={
                 <FormattedMessage

pages/verification.tsx

@@ -64,7 +64,7 @@ const Verification = () => {
             <LinkButton size="large" href="/apps">
               <FormattedMessage
                 id="home.get_the_app"
-                defaultMessage="Get the app"
+                defaultMessage="Get an app"
               />
             </LinkButton>