style: Remove theme-inverted from templates and minor adjustments (#4531)

nono · web-flow · commit ceed830d866b · 2025-06-05T12:12:20.000+02:00
- Remove theme-inverted references from all HTML templates
- Update template styling to use single theme approach
- Minor code adjustments in auth module
- Update statik generated files
diff --git a/assets/.externals b/assets/.externals
@@ -11,8 +11,8 @@
 #
 
 name    ./css/cozy-bs.min.css
-url     https://unpkg.com/cozy-bootstrap@1.12.0/dist/cozy-bs.min.css
-sha256  78e6c68641d3d9bc73b03dac3272afc2de627eca0a18ee0e66b160e37c887ce4
+url     https://unpkg.com/cozy-bootstrap@1.16.0/dist/cozy-bs.min.css
+sha256  363581b9153bc977174eb554fda47f7161a9595d2cdce78123390ef302aceab5
 
 name    ./js/cozy-client.min.js
 url     https://raw.githubusercontent.com/cozy/cozy-client-js/v0.14.2/dist/cozy-client.min.js
@@ -36,7 +36,7 @@ sha256  2892f2052cbe2019b931d9669070b36c7fead375f4915213e68da8b201f55b25
 
 name    ./js/piwik.js
 url     https://matomo.cozycloud.cc/piwik.js
-sha256  d7fc375178c93a2fc15fd888e30170eedf4ef3d04497e7f951ab7bfe0c921693
+sha256  b39abd9035f703b76dfed940898d572b9864f676eb1912a9142f0639dca6b2ce
 
 name    ./js/cozy-mjml.js
 url     https://unpkg.com/cozy-mjml@0.21.0/dist/main.js
diff --git a/assets/styles/theme.css b/assets/styles/theme.css
@@ -1 +1,19 @@
 /* An empty theme served by default */
+
+
+/* Override background only for share password page */
+.share-password-page .wrapper {
+  background-color: #F3F6F9;
+  max-width: 40rem;
+}
+.share-password-page .illustration {
+  max-width: 48px;
+}
+.bg-gray-100 {
+  background-color: #F3F6F9;
+}
+.component-box {
+  background-color: #fff;
+  border-radius: 16px;
+  padding: 27px 24px 47px;
+}
diff --git a/assets/templates/authorize.html b/assets/templates/authorize.html
@@ -12,7 +12,7 @@
     {{.Favicon}}
   </head>
   <body class="cirrus modal-open">
-    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal d-block" tabindex="-1" aria-modal="true" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <main role="application" class="modal-content">
           <div class="modal-icon">
diff --git a/assets/templates/authorize_move.html b/assets/templates/authorize_move.html
@@ -13,7 +13,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <form id="login-form" method="POST" action="/auth/authorize/move" class="d-contents" data-iterations="{{.Iterations}}" data-salt="{{.Salt}}">
       <input id="state" type="hidden" name="state" value="{{.State}}" />
       <input id="client_id" type="hidden" name="client_id" value="{{.ClientID}}" />
diff --git a/assets/templates/authorize_sharing.html b/assets/templates/authorize_sharing.html
@@ -12,7 +12,7 @@
     {{.Favicon}}
   </head>
   <body class="cirrus modal-open">
-    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal d-block " tabindex="-1" aria-modal="true" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <main role="application" class="modal-content">
           <div class="modal-icon">
diff --git a/assets/templates/confirm_auth.html b/assets/templates/confirm_auth.html
@@ -13,7 +13,7 @@
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
   <body class="cirrus modal-open">
-    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal d-block " tabindex="-1" aria-modal="true" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <main role="application" class="modal-content">
           <div class="modal-icon">
diff --git a/assets/templates/confirm_flagship.html b/assets/templates/confirm_flagship.html
@@ -13,7 +13,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <form id="confirm-flagship-form" method="POST" action="/auth/clients/{{.ClientID}}/flagship" class="d-contents">
       <input id="confirm-token" type="hidden" name="confirm-token" value="{{.Token}}" />
       <main class="wrapper">
diff --git a/assets/templates/error.html b/assets/templates/error.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus{{if .Inverted}} theme-inverted{{end}}">
+  <body class="cirrus{{if .Inverted}} {{end}}">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/import.html b/assets/templates/import.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/install_flagship_app.html b/assets/templates/install_flagship_app.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/instance_blocked.html b/assets/templates/instance_blocked.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/login.html b/assets/templates/login.html
@@ -13,7 +13,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus">
     {{if .MagicLink}}
     <form id="magic-link-form" method="POST" action="/auth/magic_link" class="d-contents">
     {{else}}
@@ -48,14 +48,14 @@ <h1 class="h4 h2-md mb-0 text-center">{{.Title}}</h1>
           {{if .FranceConnect}}
           <div class="alert alert-primary text-center mb-4 mb-md-5">
             <p class="small w-100">
-              FranceConnect est la solution proposée par l’État pour sécuriser et
+              FranceConnect est la solution proposée par l'État pour sécuriser et
               simplifier la connexion à vos services en ligne.
             </p>
             <a href="/oidc/franceconnect" class="d-inline-block mb-2">
-              <img src="{{asset .Domain "/images/franceconnect.svg"}}" alt="S’identifier avec FranceConnect" />
+              <img src="{{asset .Domain "/images/franceconnect.svg"}}" alt="S'identifier avec FranceConnect" />
             </a>
             <p class="w-100 small mb-0">
-              <a href="https://franceconnect.gouv.fr/">Qu’est-ce que FranceConnect ?</a>
+              <a href="https://franceconnect.gouv.fr/">Qu'est-ce que FranceConnect ?</a>
             </p>
           </div>
           <div class="horizontal-separator mb-4 mb-md-5">ou</div>
diff --git a/assets/templates/magic_link_twofactor.html b/assets/templates/magic_link_twofactor.html
@@ -13,7 +13,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <form id="login-form" method="POST" action="/auth/magic_link/twofactor" class="d-contents" data-iterations="{{.Iterations}}" data-salt="{{.Salt}}">
       <input id="redirect" type="hidden" name="redirect" value="{{.Redirect}}" />
       <input id="magic_code" type="hidden" name="magic_code" value="{{.MagicCode}}" />
diff --git a/assets/templates/move_confirm.html b/assets/templates/move_confirm.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/move_delegated_auth.html b/assets/templates/move_delegated_auth.html
@@ -13,7 +13,7 @@
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
   <body>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <form id="two-factor-form" method="POST" action="/auth/twofactor" class="d-contents">
       <input id="state" type="hidden" name="state" value="{{.State}}" />
       <input id="client_id" type="hidden" name="client_id" value="{{.ClientID}}" />
diff --git a/assets/templates/move_in_progress.html b/assets/templates/move_in_progress.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/need_onboarding.html b/assets/templates/need_onboarding.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <main class="wrapper">
       <header class="wrapper-top">
         <a href="https://cozy.io/" class="btn p-2 d-sm-none">
diff --git a/assets/templates/new_app_available.html b/assets/templates/new_app_available.html
@@ -12,7 +12,7 @@
     {{.Favicon}}
   </head>
   <body class="cirrus modal-open">
-    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal d-block " tabindex="-1" aria-modal="true" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <main role="application" class="modal-content">
           <div class="modal-icon">
diff --git a/assets/templates/oauth_clients_limit_exceeded.html b/assets/templates/oauth_clients_limit_exceeded.html
@@ -13,7 +13,7 @@
     {{.Favicon}}
   </head>
   <body class="cirrus modal-open" data-token="{{.SettingsToken}}">
-    <div class="modal d-block theme-inverted" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal d-block " tabindex="-1" aria-modal="true" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <main role="application" class="modal-content">
           <div class="modal-icon">
diff --git a/assets/templates/oidc_login.html b/assets/templates/oidc_login.html
@@ -12,7 +12,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus ">
     <form id="login-form" method="POST" action="/auth/login" class="d-contents">
       <main class="wrapper">
         <header class="wrapper-top">
diff --git a/assets/templates/passphrase_choose.html b/assets/templates/passphrase_choose.html
@@ -12,7 +12,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus">
     <form id="new-pass-form" method="POST" action="{{.Action}}" class="d-contents" data-salt="{{.Salt}}" data-hint-error="{{t "Passphrase Hint Error"}}" data-pass-error="{{t "Passphrase Pass Error"}}">
       <input type="hidden" id="from" name="from" value="{{.From}}" />
       <input type="hidden" id="iterations" name="iterations" value="{{.Iterations}}" />
diff --git a/assets/templates/passphrase_reset.html b/assets/templates/passphrase_reset.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus">
     <main class="wrapper">
       <header class="wrapper-top d-flex flex-row align-items-center">
         {{if .BackButton}}
diff --git a/assets/templates/share_by_link_password.html b/assets/templates/share_by_link_password.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
     {{.Favicon}}
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus theme-light share-password-page bg-gray-100">
     <form id="share-by-link-password-form" method="POST" action="{{.Action}}" class="d-contents">
       <main class="wrapper">
 
@@ -21,32 +21,34 @@
             <img src="{{asset .Domain "/images/logo-dark.svg"}}" alt="Cozy Cloud" class="logo" />
           </a>
         </header>
-        
-        <div class="d-flex flex-column align-items-center">
-          <img src="{{asset .Domain "/images/security.svg"}}" alt="" class="illustration mb-3" />
-          <h1 class="h4 h2-md mb-3 text-center">{{t "Share by link Password Title"}}</h1>
 
-          <div id="password-field" class="input-group form-floating has-validation w-100">
-            <input id="perm-id" type="hidden" name="perm_id" value="{{.PermID}}" />
-            <input type="password" class="form-control form-control-md-lg" id="password" name="passphrase" autofocus spellcheck="false" />
-            <label for="password">{{t "Share by link Password Field"}}</label>
-            <button id="password-visibility-button" class="btn btn-outline-info"
-              type="button"
-              name="password-visibility"
-              data-show="{{t "Login Password show"}}"
-              data-hide="{{t "Login Password hide"}}"
-              title="{{t "Login Password show"}}">
-              <span id="password-visibility-icon" class="icon icon-eye-closed"></span>
-            </button>
+        <div class="component-box">
+          <div class="d-flex flex-column align-items-center">
+            <img src="{{asset .Domain "/images/security.svg"}}" alt="" class="illustration mb-3" />
+            <h1 class="h4 h2-md mb-5 text-center">{{t "Share by link Password Title"}}</h1>
+  
+            <div id="password-field" class="input-group form-floating has-validation w-100">
+              <input id="perm-id" type="hidden" name="perm_id" value="{{.PermID}}" />
+              <input type="password" class="form-control form-control-md-lg" id="password" name="passphrase" autofocus spellcheck="false" />
+              <label for="password">{{t "Share by link Password Field"}}</label>
+              <button id="password-visibility-button" class="btn btn-outline-info"
+                type="button"
+                name="password-visibility"
+                data-show="{{t "Login Password show"}}"
+                data-hide="{{t "Login Password hide"}}"
+                title="{{t "Login Password show"}}">
+                <span id="password-visibility-icon" class="icon icon-eye-closed"></span>
+              </button>
+            </div>
           </div>
+  
+          <footer class="w-100">
+            <button id="password-submit" class="btn btn-primary btn-md-lg w-100 my-3 mt-md-5" type="submit">
+              {{t "Share by link Password Submit"}}
+            </button>
+          </footer>
         </div>
-
-        <footer class="w-100">
-          <button id="password-submit" class="btn btn-primary btn-md-lg w-100 my-3 mt-md-5" type="submit">
-            {{t "Share by link Password Submit"}}
-          </button>
-        </footer>
-
+        
       </main>
     </form>
     <script src="{{asset .Domain "/scripts/cirrus.js"}}"></script>
diff --git a/assets/templates/twofactor.html b/assets/templates/twofactor.html
@@ -13,7 +13,7 @@
     {{.Favicon}}
     <link rel="preload" href="/assets/icons/check.svg" as="image">
   </head>
-  <body class="cirrus theme-inverted">
+  <body class="cirrus">
     <form id="two-factor-form" method="POST" action="/auth/twofactor" class="d-contents">
       <input id="state" type="hidden" name="state" value="{{.State}}" />
       <input id="client_id" type="hidden" name="client_id" value="{{.ClientID}}" />
diff --git a/web/auth/auth.go b/web/auth/auth.go
@@ -595,7 +595,7 @@ func resendActivationMail(c echo.Context) error {
 		"Locale":       inst.Locale,
 		"Title":        inst.TemplateTitle(),
 		"Favicon":      middlewares.Favicon(inst),
-		"Inverted":     true,
+		"Inverted":     false,
 		"Illustration": "/images/mail-sent.svg",
 		"ErrorTitle":   "Onboarding Resend activation Title",
 		"Error":        "Onboarding Resend activation Body",
diff --git a/web/auth/magic_link.go b/web/auth/magic_link.go
@@ -36,7 +36,7 @@ func sendMagicLink(c echo.Context) error {
 		"Locale":       inst.Locale,
 		"Title":        inst.TemplateTitle(),
 		"Favicon":      middlewares.Favicon(inst),
-		"Inverted":     true,
+		"Inverted":     false,
 		"Illustration": "/images/mail-sent.svg",
 		"ErrorTitle":   "Magic link has been sent Title",
 		"Error":        "Magic link has been sent Body",
diff --git a/web/auth/passphrase.go b/web/auth/passphrase.go
@@ -108,7 +108,7 @@ func sendHint(c echo.Context) error {
 		"Locale":       i.Locale,
 		"Title":        i.TemplateTitle(),
 		"Favicon":      middlewares.Favicon(i),
-		"Inverted":     true,
+		"Inverted":     false,
 		"Illustration": "/images/mail-sent.svg",
 		"ErrorTitle":   "Hint sent Title",
 		"Error":        "Hint sent Body",
@@ -143,7 +143,7 @@ func passphraseReset(c echo.Context) error {
 		"Locale":       i.Locale,
 		"Title":        i.TemplateTitle(),
 		"Favicon":      middlewares.Favicon(i),
-		"Inverted":     true,
+		"Inverted":     false,
 		"Illustration": "/images/mail-sent.svg",
 		"ErrorTitle":   "Passphrase is reset Title",
 		"Error":        "Passphrase is reset Body",
diff --git a/web/statik/statik.go b/web/statik/statik.go
