More scroll nits

src/app/delegates/[addressOrENSName]/loading.tsx

@@ -1,5 +1,15 @@
-import AgoraLoader from "@/components/shared/AgoraLoader/AgoraLoader";
+import AgoraLoader, {
+  LogoLoader,
+} from "@/components/shared/AgoraLoader/AgoraLoader";
+import Tenant from "@/lib/tenant/tenant";
 
 export default function Loading() {
+  const { ui } = Tenant.current();
+  const shouldHideAgoraBranding = ui.hideAgoraBranding;
+
+  if (shouldHideAgoraBranding) {
+    return <LogoLoader />;
+  }
+
   return <AgoraLoader />;
 }

src/app/delegates/loading.tsx

@@ -1,5 +1,15 @@
-import AgoraLoader from "@/components/shared/AgoraLoader/AgoraLoader";
+import AgoraLoader, {
+  LogoLoader,
+} from "@/components/shared/AgoraLoader/AgoraLoader";
+import Tenant from "@/lib/tenant/tenant";
 
 export default function Loading() {
+  const { ui } = Tenant.current();
+  const shouldHideAgoraBranding = ui.hideAgoraBranding;
+
+  if (shouldHideAgoraBranding) {
+    return <LogoLoader />;
+  }
+
   return <AgoraLoader />;
 }

src/app/info/components/InfoAbout.tsx

@@ -42,22 +42,22 @@ const InfoAbout = () => {
       </h3>
       <div className="mt-4 rounded-xl border border-line bg-neutral shadow-sm">
         <div className="p-6 flex flex-row flex-wrap sm:flex-nowrap gap-6">
-          <div className="w-1/2 relative">
+          <div className="w-full h-[200px] sm:h-auto sm:w-1/2 relative">
             <Image
               src={page.hero!}
               alt={page.title}
               fill
               className="rounded-lg object-cover object-center"
             />
           </div>
-          <div className="w-1/2">
+          <div className="sm:w-1/2">
             <h3 className="text-lg font-bold text-primary capitalize">
               About {namespace}
             </h3>
             <p className="text-secondary mt-3">{page.description}</p>
             {/* So the image doesn't look smooshed for scroll :eye-roll: */}
             {namespace === TENANT_NAMESPACES.SCROLL && (
-              <div className="h-10 block"></div>
+              <div className="sm:h-10 block"></div>
             )}
           </div>
         </div>

src/app/info/components/InfoHero.tsx

@@ -10,28 +10,33 @@ export const InfoHero = () => {
   const { ui, namespace } = Tenant.current();
   const page = ui!.page("info");
 
-  const rotationClasses = ["-rotate-2", "rotate-4", "-rotate-5", "rotate-1"];
+  const rotationClasses = [
+    "sm:-rotate-2",
+    "sm:rotate-4",
+    "sm:-rotate-5",
+    "sm:rotate-1",
+  ];
 
   return (
-    <div className="flex flex-row mt-12 gap-6 flex-wrap sm:flex-nowrap">
-      <div className="flex flex-col w-2/5">
-        <h1 className="text-4xl sm:text-[50px] sm:leading-[50px] font-black text-primary">
+    <div className="flex flex-col sm:flex-row mt-12 gap-y-6 sm:gap-y-0 gap-x-0 sm:gap-x-6 flex-wrap sm:flex-nowrap">
+      <div className="flex flex-col w-full sm:w-2/5">
+        <h1 className="text-4xl leading-[36px] sm:text-[50px] sm:leading-[50px] font-black text-primary">
           {page!.title}
         </h1>
-        <p className="text-base text-secondary mt-4 sm:mt-4">
+        <p className="text-base text-secondary mt-4">
           {page!.description}
 
           {namespace === TENANT_NAMESPACES.SCROLL && (
             <Link href={"https://claim.scroll.io"}>
-              <Button className="bg-brandPrimary hover:bg-brandPrimary/90 mt-6 cursor-pointer block">
+              <Button className="bg-brandPrimary hover:bg-brandPrimary/90 mt-4 cursor-pointer block">
                 Claim your tokens to get started
               </Button>
             </Link>
           )}
         </p>
       </div>
 
-      <div className="flex flex-row self-start justify-end w-3/5 gap-4">
+      <div className="grid grid-cols-2 sm:flex sm:flex-row self-start justify-between sm:justify-end w-full sm:w-3/5 gap-4">
         {page!.links!.map((link, idx) => (
           <Card
             className={rotationClasses[idx % rotationClasses.length]}
@@ -61,18 +66,25 @@ const Card = ({
     <Link
       target="_blank"
       href={link}
-      className={`flex flex-col grow-0 p-1.5 bg-neutral border border-line rounded-[6px] shadow-[0px_3.044px_9.131px_0px_rgba(0,0,0,0.02),0px_1.522px_1.522px_0px_rgba(0,0,0,0.03)]} hover:rotate-0 transition-all hover:z-10 hover:scale-110 ${className}`}
+      className={`flex flex-col sm:w-fit grow-0 p-1.5 bg-neutral border border-line rounded-[6px] shadow-[0px_3.044px_9.131px_0px_rgba(0,0,0,0.02),0px_1.522px_1.522px_0px_rgba(0,0,0,0.03)]} hover:rotate-0 transition-all hover:z-10 hover:scale-110 ${className}`}
     >
-      <div className="relative h-[150px] w-[150px] aspect-square">
+      <div className="relative w-full sm:h-[150px] sm:w-[150px] aspect-square">
         <Image
           src={image}
           className="w-full rounded scale"
           fill={true}
           alt=""
         />
       </div>
-      <div className="flex gap-1 items-center text-xs font-medium text-secondary mt-1.5">
-        {linkText} <Image src={icons.northEast} width={9} height={9} alt="" />
+      <div className="w-full flex flex-row justify-between gap-1 items-center text-xs font-medium text-secondary mt-1.5">
+        <span>{linkText}</span>
+        <Image
+          src={icons.northEast}
+          width={12}
+          height={12}
+          alt="arrow pointing right"
+          className="self-start mt-1"
+        />
       </div>
     </Link>
   );

src/app/proposals/loading.tsx

@@ -1,5 +1,15 @@
-import AgoraLoader from "@/components/shared/AgoraLoader/AgoraLoader";
+import AgoraLoader, {
+  LogoLoader,
+} from "@/components/shared/AgoraLoader/AgoraLoader";
+import Tenant from "@/lib/tenant/tenant";
 
 export default function Loading() {
+  const { ui } = Tenant.current();
+  const shouldHideAgoraBranding = ui.hideAgoraBranding;
+
+  if (shouldHideAgoraBranding) {
+    return <LogoLoader />;
+  }
+
   return <AgoraLoader />;
 }

src/components/Delegates/DelegateStatement/DelegateStatementContainer.tsx

@@ -36,7 +36,7 @@ export default function DelegateStatementContainer({
         </div>
       )}
       {!delegateStatement && (
-        <div className="p-8 align-middle text-center rounded-md bg-line">
+        <div className="p-8 align-middle text-center text-secondary rounded-xl bg-wash">
           <p className="break-words">
             No delegate statement for {addressOrENSName}
           </p>

src/components/Delegates/DelegateVotes/VotesContainer.tsx

@@ -3,6 +3,8 @@
 import React, { useState } from "react";
 import { Listbox, Transition } from "@headlessui/react";
 import { ChevronDown } from "lucide-react";
+import Tenant from "@/lib/tenant/tenant";
+import { DaoSlug } from "@prisma/client";
 
 const filterOptions = {
   onchain: {
@@ -24,6 +26,22 @@ const VotesContainer = ({
 }) => {
   const [activeTab, setActiveTab] = useState<"snapshot" | "onchain">("onchain");
 
+  // right now, only ENS uses snapshot, so we want to show filter.
+  // Otherwise, just show the onchainVotes
+  const slug = Tenant.current().slug;
+  if (slug !== DaoSlug.ENS) {
+    return (
+      <div className="flex flex-col space-y-4">
+        <div className="flex flex-row justify-between items-center relative">
+          <h2 className="text-black text-2xl font-bold flex-grow">
+            Past Votes
+          </h2>
+        </div>
+        <div className="block">{onchainVotes}</div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col space-y-4">
       <div className="flex flex-row justify-between items-center relative">

src/lib/tenant/configs/ui/scroll.ts

@@ -15,7 +15,7 @@ import favicon16x16 from "@/assets/tenant/scroll_favicon/favicon-16x16.png";
 import shortcutIcon from "@/assets/tenant/scroll_favicon/favicon.ico";
 
 export const scrollTenantUIConfig = new TenantUI({
-  title: "Scroll governance",
+  title: "Scroll Governance",
   logo: scrollLogo,
 
   googleAnalytics: "G-SV1E7HY7YZ",
@@ -113,20 +113,20 @@ export const scrollTenantUIConfig = new TenantUI({
   pages: [
     {
       route: "/",
-      title: "Welcome to scroll governance",
+      title: "Welcome to Scroll Governance",
       description:
         "Delegates represent the Scroll ecosystem, guiding governance decisions on behalf of SCR token holders to ensure the platform evolves in line with community priorities.",
       hero: scrollHero,
       meta: {
-        title: "Welcome to Scroll governance",
+        title: "Welcome to Scroll Governance",
         description: "Home of token governance",
-        imageTitle: "Welcome to Scroll governance",
+        imageTitle: "Welcome to Scroll Governance",
         imageDescription: "Home of token governance",
       },
     },
     {
       route: "proposals",
-      title: "Welcome to Scroll governance",
+      title: "Welcome to Scroll Governance",
       description:
         "Scroll delegates are the stewards of Scroll DAO. They are volunteers and members of the Scroll community who have been elected to represent other token holders and make governance decisions on their behalf.",
       hero: scrollHero,