feat(login): polish controls and legal attribution

Vonng · claude · Vonng · commit fa1157643b50 · 2026-08-06T08:38:15.000+08:00
Refines the login form controls and completes the legal attribution
block in the page footer.

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/web-app/src/index.css b/web-app/src/index.css
@@ -235,6 +235,20 @@ code {
   }
 }
 
+/* Login-page dropdowns ("Other Authentication Methods", SSO redirect list):
+   mds DropdownBlock hardcodes 10px vertical padding, which leaves background
+   strips above/below the highlighted option. These menus portal into <body>,
+   so they are targeted by ID here instead of through the layout tree. */
+#alternativeMethods-options-selector,
+#redirect-rules {
+  padding: 0;
+}
+
+#alternativeMethods-options-selector > div,
+#redirect-rules > div {
+  padding: 10px 15px;
+}
+
 /* Chrome, Safari, Edge, Opera */
 input.removeArrows::-webkit-outer-spin-button,
 input.removeArrows::-webkit-inner-spin-button,
diff --git a/web-app/src/screens/Console/Common/DarkModeActivator/DarkModeActivator.tsx b/web-app/src/screens/Console/Common/DarkModeActivator/DarkModeActivator.tsx
@@ -16,7 +16,6 @@
 
 import React from "react";
 import { Button, DarkModeIcon, LightModeIcon } from "mds";
-import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../../../store";
 import { setDarkMode } from "../../../../systemSlice";
@@ -35,13 +34,12 @@ const DarkModeActivator = () => {
   };
 
   return (
-    <TooltipWrapper tooltip={`${darkMode ? "Light" : "Dark"} Mode`}>
-      <Button
-        id={"dark-mode-activator"}
-        icon={darkMode ? <LightModeIcon /> : <DarkModeIcon />}
-        onClick={darkModeActivator}
-      />
-    </TooltipWrapper>
+    <Button
+      id={"dark-mode-activator"}
+      aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
+      icon={darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+      onClick={darkModeActivator}
+    />
   );
 };
 
diff --git a/web-app/src/screens/Console/helpTopics.json b/web-app/src/screens/Console/helpTopics.json
@@ -3284,14 +3284,14 @@
       "header": null,
       "links": [
         {
-          "title": "Login help",
+          "title": "Logging in",
           "url": "https://silo.pgsty.com/administration/minio-console/#logging-in",
-          "body": "Text snippet that will be relevant to the user will go here made to look nice in the helpitem size on two-three lines"
+          "body": "Sign in with the root credentials, an IAM user access key, or temporary STS credentials via Other Authentication Methods."
         },
         {
-          "title": "Login help",
+          "title": "Console configuration",
           "url": "https://silo.pgsty.com/administration/minio-console/#configuration",
-          "body": "Text snippet that will be relevant to the user will  go here  made to look nice in the helpitem size  on two-three lines"
+          "body": "Configure identity providers, TLS, and session settings for the console on the server side."
         },
         {
           "title": "Troubleshooting",
diff --git a/web-app/src/screens/LoginPage/LoginLayout.tsx b/web-app/src/screens/LoginPage/LoginLayout.tsx
@@ -10,6 +10,8 @@ import styled from "styled-components";
 import get from "lodash/get";
 import { SILO_COLORS, SiloBrand } from "../../common/SiloBrand";
 import WaveMeshCanvas from "./WaveMeshCanvas";
+import HelpMenu from "../Console/HelpMenu";
+import DarkModeActivator from "../Console/Common/DarkModeActivator/DarkModeActivator";
 
 // Chakra Petch (the wordmark typeface) is registered app-wide in index.css.
 const displayFont =
@@ -55,31 +57,13 @@ const BrandContent = styled.div({
   padding: "clamp(40px, 6vw, 88px)",
   paddingBottom: 36,
   "& .eyebrow": {
-    display: "flex",
-    alignItems: "center",
-    gap: 14,
     fontFamily: displayFont,
     fontWeight: 500,
     fontSize: 12,
     letterSpacing: "0.22em",
     textTransform: "uppercase",
     color: SILO_COLORS.sky,
   },
-  "& .eyebrow .bits": {
-    display: "flex",
-    gap: 5,
-    flexShrink: 0,
-  },
-  "& .eyebrow .bits span": {
-    display: "block",
-    width: 8,
-    height: 8,
-    backgroundColor: SILO_COLORS.steel,
-  },
-  "& .eyebrow .bits .bitParity": {
-    backgroundColor: "transparent",
-    border: `1px solid ${SILO_COLORS.copper}`,
-  },
   "& h1": {
     margin: "26px 0 0",
     fontFamily: displayFont,
@@ -144,6 +128,7 @@ const BrandContent = styled.div({
 });
 
 const FormPanel = styled.section(({ theme }) => ({
+  position: "relative",
   display: "flex",
   flexDirection: "column",
   width: "100%",
@@ -153,7 +138,51 @@ const FormPanel = styled.section(({ theme }) => ({
   "@media (max-width: 991px)": {
     maxWidth: "100%",
   },
+  "& .headerActions": {
+    position: "absolute",
+    top: 8,
+    right: 8,
+    zIndex: 10,
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    // Quiet ghost icon buttons: no chrome, low contrast until hovered.
+    // Direct children only — the help panel (a nested div) has its own buttons.
+    "& > button": {
+      border: "none",
+      background: "transparent",
+      boxShadow: "none",
+      padding: 0,
+      height: 28,
+      width: 28,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: get(theme, "mutedText", "#9CA3AF"),
+      opacity: 0.6,
+      transition: "opacity 0.15s ease, color 0.15s ease",
+      "& svg": {
+        width: 15,
+        height: 15,
+        fill: "currentcolor",
+        color: "currentcolor",
+      },
+      "&:hover": {
+        border: "none",
+        background: "transparent",
+        color: get(theme, "fontColor", "#3F3F46"),
+        opacity: 1,
+      },
+    },
+    // The help panel is absolutely positioned; anchor it below the buttons
+    // and keep it inside the viewport (there is no sidebar on this page).
+    "& > div": {
+      top: "calc(100% + 8px)",
+      maxWidth: "min(754px, calc(100vw - 36px))",
+    },
+  },
   "& .logoBand": {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -167,6 +196,11 @@ const FormPanel = styled.section(({ theme }) => ({
     display: "flex",
     alignItems: "center",
     gap: 18,
+    textDecoration: "none",
+    transition: "opacity 0.15s ease",
+    "&:hover": {
+      opacity: 0.82,
+    },
     "& .emblem": {
       display: "block",
       height: 84,
@@ -210,15 +244,27 @@ const FormPanel = styled.section(({ theme }) => ({
     flexWrap: "wrap",
     borderTop: `1px solid ${get(theme, "login.footerDivider", "#F2F2F2")}`,
     padding: "35px 0",
-    fontSize: 14,
+    fontSize: 11,
     color: get(theme, "login.footerElements", "#2781B0"),
     "& a": {
+      fontFamily: displayFont,
+      fontWeight: 500,
+      fontSize: 11,
+      letterSpacing: "0.24em",
+      textTransform: "uppercase",
       color: get(theme, "login.footerElements", "#2781B0"),
       textDecoration: "none",
+      paddingBottom: 1,
+      borderBottom:
+        "1px solid color-mix(in srgb, currentcolor 30%, transparent)",
+      transition: "border-color 0.15s ease",
       "&:hover": {
-        textDecoration: "underline",
+        borderBottomColor: "currentcolor",
       },
     },
+    "& .separator": {
+      opacity: 0.4,
+    },
   },
 }));
 
@@ -234,11 +280,6 @@ const LoginLayout = ({ children, footer }: LoginLayoutProps) => {
         <WaveMeshCanvas />
         <BrandContent>
           <div className="eyebrow">
-            <span className="bits" aria-hidden="true">
-              <span />
-              <span />
-              <span className="bitParity" />
-            </span>
             Open-Source S3/MinIO-Compatible Object Storage
           </div>
           <h1>
@@ -281,20 +322,42 @@ const LoginLayout = ({ children, footer }: LoginLayoutProps) => {
               <a href="https://min.io" target="_blank" rel="noopener">
                 MinIO, Inc.
               </a>
+              ; SILO incorporates{" "}
+              <a
+                href="https://github.com/minio/minio"
+                target="_blank"
+                rel="noopener"
+              >
+                MinIO source code
+              </a>
+              .
             </span>
             <span>
-              SILO is an independent community project, not affiliated with or
-              endorsed by MinIO, Inc.
+              SILO is maintained by{" "}
+              <a href="https://pigsty.io" target="_blank" rel="noopener">
+                PIGSTY
+              </a>
+              , without MinIO affiliation, endorsement, or sponsorship.
             </span>
           </p>
         </BrandContent>
       </BrandPanel>
       <FormPanel>
         <div className="logoBand">
-          <div className="logoLockup">
+          <div className="headerActions">
+            <HelpMenu />
+            <DarkModeActivator />
+          </div>
+          <a
+            className="logoLockup"
+            href="https://silo.pgsty.com"
+            target="_blank"
+            rel="noopener"
+            aria-label="SILO website"
+          >
             <SiloBrand variant="emblem" className="emblem" />
             <SiloBrand variant="wordmark" className="wordmark" />
-          </div>
+          </a>
           <span className="consoleTag">Object Storage Console</span>
         </div>
         <div className="formArea">

Original file line number	Diff line number	Diff line change
`@@ -3284,14 +3284,14 @@`
`3284`	`3284`	`"header": null,`
`3285`	`3285`	`"links": [`
`3286`	`3286`	`{`
`3287`		`- "title": "Login help",`
	`3287`	`+ "title": "Logging in",`
`3288`	`3288`	`"url": "https://silo.pgsty.com/administration/minio-console/#logging-in",`
`3289`		`- "body": "Text snippet that will be relevant to the user will go here made to look nice in the helpitem size on two-three lines"`
	`3289`	`+ "body": "Sign in with the root credentials, an IAM user access key, or temporary STS credentials via Other Authentication Methods."`
`3290`	`3290`	`},`
`3291`	`3291`	`{`
`3292`		`- "title": "Login help",`
	`3292`	`+ "title": "Console configuration",`
`3293`	`3293`	`"url": "https://silo.pgsty.com/administration/minio-console/#configuration",`
`3294`		`- "body": "Text snippet that will be relevant to the user will go here made to look nice in the helpitem size on two-three lines"`
	`3294`	`+ "body": "Configure identity providers, TLS, and session settings for the console on the server side."`
`3295`	`3295`	`},`
`3296`	`3296`	`{`
`3297`	`3297`	`"title": "Troubleshooting",`