From 727d3cfb775dfa7f4a728725c17f2495927fe2c0 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 30 Nov 2023 00:12:10 +0100
Subject: [PATCH 1/4] :sparkles: Change css modules resolving
---
frontend/gulpfile.js | 27 ++++++++++++++--------
frontend/src/app/main/style.clj | 41 +++++++++++++++++++++------------
2 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js
index e232a4db1..9f805bc41 100644
--- a/frontend/gulpfile.js
+++ b/frontend/gulpfile.js
@@ -1,6 +1,7 @@
const fs = require("fs");
const l = require("lodash");
const path = require("path");
+const stringHash = require("string-hash");
const gulp = require("gulp");
const gulpConcat = require("gulp-concat");
@@ -12,6 +13,7 @@ const gulpSass = require("gulp-sass")(require("sass"));
const svgSprite = require("gulp-svg-sprite");
const rename = require("gulp-rename");
+
const autoprefixer = require("autoprefixer");
const modules = require("postcss-modules");
@@ -29,12 +31,13 @@ paths.resources = "./resources/";
paths.output = "./resources/public/";
paths.dist = "./target/dist/";
-const touchSourceOnStyleChange = false;
-
/***********************************************
* Marked Extensions
***********************************************/
+// Name of Penpot's top level package
+const ROOT_NAME = "app";
+
const renderer = {
link(href, title, text) {
return `<a href="${href}" target="_blank">${text}</a>`;
@@ -223,7 +226,18 @@ gulp.task("scss:modules", function () {
.pipe(
gulpPostcss([
modules({
- generateScopedName: "[folder]_[name]_[local]_[hash:base64:5]",
+ getJSON: function (cssFileName, json, outputFileName) {
+ // We do nothing because we don't want the generated JSON files
+ },
+ // Calculates the whole css-module selector name.
+ // Should be the same as the one in the file `/src/app/main/style.clj`
+ generateScopedName: function (selector, filename, css) {
+ const dir = path.dirname(filename);
+ const name = path.basename(filename, ".css");
+ const parts = dir.split("/");
+ const rootIdx = parts.findIndex(s => s === ROOT_NAME);
+ return parts.slice(rootIdx + 1).join("_") + "_" + name + "__" + selector;
+ },
}),
autoprefixer(),
]),
@@ -350,13 +364,6 @@ gulp.task("dev:dirs", async function (next) {
gulp.task("watch:main", function () {
const watchTask = gulp.watch("src/**/**.scss", gulp.series("scss"));
- if (touchSourceOnStyleChange) {
- watchTask.on("change", function (path) {
- // Replace ".scss" for ".cljs" to refresh the file
- gulp.src(path.replace(".scss", ".cljs")).pipe(touch());
- });
- }
-
gulp.watch(paths.resources + "styles/**/**.scss", gulp.series("scss"));
gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images"));
diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj
index 4e275cdf7..2f5dfb2ea 100644
--- a/frontend/src/app/main/style.clj
+++ b/frontend/src/app/main/style.clj
@@ -11,9 +11,25 @@
[clojure.core :as c]
[clojure.data.json :as json]
[clojure.java.io :as io]
+ [cuerdas.core :as str]
[rumext.v2.util :as mfu]))
-(def ^:dynamic *css-data* nil)
+;; Should coincide with the `ROOT_NAME` constant in gulpfile.js
+(def ROOT-NAME "app")
+
+(def ^:dynamic *css-prefix* nil)
+
+(defn get-prefix
+ ;; Calculates the css-modules prefix given the filename
+ ;; should be the same as the calculation inside the `gulpfile.js`
+ [fname]
+ (let [file (io/file fname)
+ parts
+ (->> (str/split (.getParent file) #"/")
+ (drop-while #(not= % ROOT-NAME))
+ (rest)
+ (str/join "_"))]
+ (str parts "_" (subs (.getName file) 0 (- (count (.getName file)) 5)) "__")))
(def ^:private xform-css
(keep (fn [k]
@@ -22,9 +38,8 @@
(let [knm (name k)
kns (namespace k)]
(case kns
- "global" knm
- "old-css" (if (nil? *css-data*) knm "")
- (or (get *css-data* (keyword knm)) (str "_not_found_" knm))))
+ "global" knm
+ (str *css-prefix* knm)))
(string? k)
k))))
@@ -49,14 +64,13 @@
all classes with space in the same way as `css*`."
[& selectors]
(let [fname (-> *ns* meta :file)
- path (str (subs fname 0 (- (count fname) 4)) "css.json")
- data (read-json-file path)]
+ prefix (get-prefix fname)]
(if (symbol? (first selectors))
`(if ~(with-meta (first selectors) {:tag 'boolean})
- (css* ~@(binding [*css-data* data]
+ (css* ~@(binding [*css-prefix* prefix]
(into [] xform-css (rest selectors))))
(css* ~@(rest selectors)))
- `(css* ~@(binding [*css-data* data]
+ `(css* ~@(binding [*css-prefix* prefix]
(into [] xform-css selectors))))))
(defmacro styles
@@ -76,8 +90,7 @@
kns (namespace k)]
(case kns
"global" knm
- "old-css" (if (nil? *css-data*) knm "")
- (or (get *css-data* (keyword knm)) knm)))
+ (str *css-prefix* knm)))
(string? k)
k)]
@@ -95,7 +108,6 @@
;;
;; (stl/css-case new-css-system
;; :left-settings-bar true
-;; :old-css/settings-bar true
;; :global/two-row (<= size 300))
;;
;; The first argument to the `css-case` macro is optional an if you don't
@@ -118,17 +130,16 @@
(defmacro css-case
[& params]
(let [fname (-> *ns* meta :file)
- path (str (subs fname 0 (- (count fname) 4)) "css.json")
- data (read-json-file path)]
+ prefix (get-prefix fname)]
(if (symbol? (first params))
`(if ~(with-meta (first params) {:tag 'boolean})
- ~(binding [*css-data* data]
+ ~(binding [*css-prefix* prefix]
(-> (into [] xform-css-case (rest params))
(mfu/compile-concat :safe? false)))
~(-> (into [] xform-css-case (rest params))
(mfu/compile-concat :safe? false)))
- `~(binding [*css-data* data]
+ `~(binding [*css-prefix* prefix]
(-> (into [] xform-css-case params)
(mfu/compile-concat :safe? false))))))
From fa711cdd75d5ee31be0963c04aaca97e0d9adedf Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 30 Nov 2023 00:16:38 +0100
Subject: [PATCH 2/4] :lipstick: New UI for auth screens
---
common/src/app/common/flags.cljc | 1 +
frontend/gulpfile.js | 2 -
.../images/icons/login-illustration.svg | 3 +
.../styles/common/refactor/color-defs.scss | 19 +
.../styles/common/refactor/spacing.scss | 1 +
frontend/src/app/config.cljs | 4 +-
frontend/src/app/main/style.clj | 2 +-
frontend/src/app/main/ui/auth.cljs | 111 ++++--
frontend/src/app/main/ui/auth.scss | 74 ++++
frontend/src/app/main/ui/auth/common.scss | 148 ++++++++
frontend/src/app/main/ui/auth/login.cljs | 345 ++++++++++++------
frontend/src/app/main/ui/auth/login.scss | 7 +
frontend/src/app/main/ui/auth/recovery.cljs | 79 ++--
frontend/src/app/main/ui/auth/recovery.scss | 12 +
.../app/main/ui/auth/recovery_request.cljs | 73 +++-
.../app/main/ui/auth/recovery_request.scss | 12 +
frontend/src/app/main/ui/auth/register.cljs | 294 ++++++++++-----
frontend/src/app/main/ui/auth/register.scss | 38 ++
.../src/app/main/ui/auth/verify_token.cljs | 13 +-
.../src/app/main/ui/auth/verify_token.scss | 7 +
.../src/app/main/ui/components/forms.cljs | 29 +-
.../src/app/main/ui/components/forms.scss | 32 +-
.../src/app/main/ui/dashboard/sidebar.cljs | 6 +-
.../src/app/main/ui/dashboard/sidebar.scss | 7 +-
frontend/src/app/main/ui/dashboard/team.scss | 7 +-
frontend/src/app/main/ui/icons.cljs | 1 +
frontend/src/app/main/ui/modal.cljs | 2 +-
.../src/app/main/ui/settings/password.cljs | 4 +-
.../src/app/main/ui/settings/password.scss | 7 +
.../src/app/main/ui/settings/profile.scss | 5 +-
frontend/src/app/main/ui/static.cljs | 15 +-
frontend/src/app/main/ui/static.scss | 9 +
.../src/app/main/ui/workspace/sidebar.cljs | 4 +-
.../sidebar/options/menus/shadow.cljs | 2 +-
frontend/src/app/util/i18n.cljs | 7 +-
frontend/translations/en.po | 8 +-
frontend/translations/es.po | 8 +-
37 files changed, 1074 insertions(+), 324 deletions(-)
create mode 100644 frontend/resources/images/icons/login-illustration.svg
create mode 100644 frontend/src/app/main/ui/auth.scss
create mode 100644 frontend/src/app/main/ui/auth/common.scss
create mode 100644 frontend/src/app/main/ui/auth/login.scss
create mode 100644 frontend/src/app/main/ui/auth/recovery.scss
create mode 100644 frontend/src/app/main/ui/auth/recovery_request.scss
create mode 100644 frontend/src/app/main/ui/auth/register.scss
create mode 100644 frontend/src/app/main/ui/auth/verify_token.scss
diff --git a/common/src/app/common/flags.cljc b/common/src/app/common/flags.cljc
index bd3afed23..ee86f729a 100644
--- a/common/src/app/common/flags.cljc
+++ b/common/src/app/common/flags.cljc
@@ -13,6 +13,7 @@
"A common flags that affects both: backend and frontend."
[:enable-registration
:enable-login-with-password
+ :enable-login-illustration
:enable-feature-styles-v2])
(defn parse
diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js
index 9f805bc41..7ced3ba60 100644
--- a/frontend/gulpfile.js
+++ b/frontend/gulpfile.js
@@ -1,7 +1,6 @@
const fs = require("fs");
const l = require("lodash");
const path = require("path");
-const stringHash = require("string-hash");
const gulp = require("gulp");
const gulpConcat = require("gulp-concat");
@@ -13,7 +12,6 @@ const gulpSass = require("gulp-sass")(require("sass"));
const svgSprite = require("gulp-svg-sprite");
const rename = require("gulp-rename");
-
const autoprefixer = require("autoprefixer");
const modules = require("postcss-modules");
diff --git a/frontend/resources/images/icons/login-illustration.svg b/frontend/resources/images/icons/login-illustration.svg
new file mode 100644
index 000000000..21b0c18ad
--- /dev/null
+++ b/frontend/resources/images/icons/login-illustration.svg
@@ -0,0 +1,3 @@
+<svg width="689" xmlns="http://www.w3.org/2000/svg" height="580" viewBox="-7273 -2103 689 580">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M-7023.696-1941.621a692.756 692.756 0 0 0-2.952-2.574 857.7 857.7 0 0 0-31.9-26.325 695.396 695.396 0 0 0-9.65-7.446 423.468 423.468 0 0 0-3.044-2.284l-.282-.209-.181-.133-.06-.044-.003-.003c-.001-.001-.002-.001-3.391 4.634l3.389-4.635-1.276-.936-111.104-12.548 45.27 102.748 1.34.951a536.433 536.433 0 0 1 46.391 36.92c-11.968.294-23.574.921-34.252 1.694a854.445 854.445 0 0 0-41.13 3.995 690.91 690.91 0 0 0-12.077 1.576c-1.416.198-2.512.358-3.258.468l-.852.127-.222.034-.078.012c-.002 0-.003 0 .907 5.885l-.91-5.885-1.56.243-87.419 69.822 104.021 40.398h1.112c.371 0 .676-.038.69-.039a11.167 11.167 0 0 0 .531-.075c.193-.031.449-.073.745-.124l.471-.079c.548-.092 1.235-.208 2.065-.346 2.168-.36 5.287-.863 9.188-1.436a550.968 550.968 0 0 1 31.437-3.694c25.487-2.248 57.729-3.224 86.02 1.614h.002c3.788.646 7.561 1.379 11.315 2.198-22.216 37.771-28.532 80.829-17.544 121.901l.006.019.005.019a127.287 127.287 0 0 0 39.623 62.69c21.188 18.306 47.385 28.488 73.813 28.488 26.429 0 52.624-10.182 73.813-28.488a127.287 127.287 0 0 0 39.623-62.69l.005-.019.005-.019c10.989-41.076 4.671-84.138-17.55-121.912a239.996 239.996 0 0 1 11.311-2.185l.012-.002c28.292-4.838 60.535-3.862 86.022-1.614a551.094 551.094 0 0 1 31.434 3.694c3.755.55 7.502 1.144 11.243 1.781l.485.08a57.321 57.321 0 0 0 1.05.171l.104.013.119.015h.005c.035.004.327.039.684.039h1.114l104.021-40.398-87.42-69.822-1.56-.243-.906 5.885.906-5.885-.079-.012-.223-.034c-.153-.024-.366-.055-.639-.096l-.213-.031c-.748-.11-1.842-.27-3.259-.468a690.287 690.287 0 0 0-12.074-1.576 854.776 854.776 0 0 0-41.132-3.995c-10.599-.767-22.109-1.39-33.98-1.687a536.806 536.806 0 0 1 46.401-36.927l1.337-.951 45.273-102.748-111.104 12.548-1.275.936 3.465 4.739a1395.585 1395.585 0 0 0-3.467-4.738l-.004.003-.06.044-.18.133-.693.514c-.88.656-1.758 1.316-2.634 1.979a701.412 701.412 0 0 0-9.65 7.446 858.52 858.52 0 0 0-31.9 26.325 959.94 959.94 0 0 0-3.235 2.821v-91.285h-.163l-23.016-10.971v-21.064l-26.432-37.306-26.433 37.306-19.24-27.153-19.122 27.048-.684-.952-25.63-36.175-26.432 37.306v21.094l-23.03 11.016-.209-.089v90.978Zm135.951-138.526 9.48-.163 10.222 14.425h-29.805l10.103-14.262Zm22.525 21.526v40.998l-14.071 6.654v-47.637l14.071-.015Zm-35.451 0h14.13v51.091l-14.13 6.684v-57.775Zm-78.139-21.526 9.465-.163 10.222 14.425h-29.805l10.118-14.262Zm22.526 21.526v57.79l-14.072-6.654v-51.076l14.072-.06Zm-35.467 0h14.13v47.637l-14.13-6.684v-40.953Zm-8.706 25.903v10.986l-12.437-5.954 12.437-5.032Zm68.242 43.29-14.129-6.699v-52.281h14.129v58.98Zm-11.307-66.26 10.104-14.261 9.479-.164 10.222 14.425h-29.805Zm18.573 66.349v-59.069h14.055v52.4l-14.055 6.669Zm-87.752 57.534v-83.585l78.748 37.216v140.204a345.971 345.971 0 0 0-17.751-27.712c-16.313-23.047-39.471-46.52-60.997-66.123Zm168.461.203v-83.669l-78.748 37.216v140.403a347.201 347.201 0 0 1 17.98-28.038c16.256-22.964 39.308-46.352 60.768-65.912Zm162.559 96.929a691.015 691.015 0 0 0-10.222-1.32 839.788 839.788 0 0 0-40.553-3.939c-32.603-2.361-73.053-3.263-105.555 2.292l-.018.003-.017.003a315.21 315.21 0 0 0-77.108 23.116c13.722 7.63 26.403 16.235 37.859 25.724a298.632 298.632 0 0 1 45.655-11.431c32.272-5.514 69.879-4.439 99.174-2.052a675.784 675.784 0 0 1 36.447 3.974c3.383.463 6.255.885 8.523 1.233l5.815-37.603Zm-7.632 49.371a544.212 544.212 0 0 0-8.316-1.202 664.58 664.58 0 0 0-35.803-3.903c-28.978-2.361-65.414-3.341-96.214 1.922l-.016.003a286.905 286.905 0 0 0-37.247 8.847c10.455 9.825 19.68 20.469 27.508 31.843a249.306 249.306 0 0 1 16.126-3.263c29.773-5.091 63.193-4.019 89.056-1.738a563.63 563.63 0 0 1 32.123 3.775c2.724.4 5.081.768 7.008 1.078l5.775-37.362Zm6.626 34.932 12.105-78.29 26.071 20.822-7.023 45.371-31.153 12.097Zm-173.826-271.377v-10.986l12.451 5.091-12.451 5.895Zm-353.694 257.438 35.892 13.939-12.102-78.29-30.037 23.991 6.247 40.36Zm84.537-211.226 39.473 4.458-46.656 63.89-16.079-36.494 23.262-31.854Zm334.831 14.39a711.212 711.212 0 0 1 8.072-6.247l22.398 30.673a590.351 590.351 0 0 0-5.929 4.433 677.173 677.173 0 0 0-26.519 21.187c-20.456 17.201-45.678 40.512-64.909 65.143a327.167 327.167 0 0 0-57.313 18.401 335.755 335.755 0 0 1 19.713-31.227l.004-.006.004-.005c19.067-26.938 48.307-54.959 73.027-76.397a844.498 844.498 0 0 1 31.452-25.955Zm31.713 38.358a494.56 494.56 0 0 1 5.78-4.32l22.307 30.546a548.535 548.535 0 0 0-51.999 42.881c-19.305.098-38.849 1.251-56.387 4.201 16.991-19.669 37.152-38.121 54.249-52.498a662.55 662.55 0 0 1 26.05-20.81Zm-11.589-48.268 46.773 64.045 14.372-32.622-25.858-35.409-35.287 3.986Zm-190.685 112.262Za333.938 333.938 0 0 1 19.704 31.292c-17.912-7.662-37.16-13.837-57.433-18.364-19.24-24.665-44.498-48.012-64.98-65.234a675.718 675.718 0 0 0-26.52-21.187 547.107 547.107 0 0 0-5.93-4.433l22.474-30.775a713.558 713.558 0 0 1 8.206 6.349 844.498 844.498 0 0 1 31.452 25.955c24.72 21.438 53.96 49.459 73.027 76.397Zm-112.279 5.114c19.244.108 38.716 1.268 56.191 4.214-16.994-19.674-37.16-38.131-54.262-52.512a665.034 665.034 0 0 0-26.048-20.81 538.912 538.912 0 0 0-5.779-4.32l-22.235 30.448a548.984 548.984 0 0 1 52.133 42.98Zm-91.416 17.686c-3.411.415-6.819.855-10.223 1.32l5.812 37.6c2.269-.346 5.135-.768 8.511-1.23a676.083 676.083 0 0 1 36.446-3.974c29.298-2.388 66.906-3.462 99.179 2.053 58.151 9.933 103.606 33.731 132.159 64.703 28.621 31.044 40.25 69.383 30.076 107.399-7.66 28.622-34.656 54.252-65.365 54.252-30.708 0-57.705-25.63-65.366-54.252v-.002c-8.571-32.054-1.65-64.395 17.945-92.37-10.902-5.404-23.121-10.021-36.387-13.653-22.18 35.895-28.573 76.897-18.163 115.828a115.378 115.378 0 0 0 35.91 56.8l.005.005c19.195 16.588 42.683 25.605 66.056 25.605 23.373 0 46.861-9.017 66.055-25.605l.006-.005a115.36 115.36 0 0 0 35.909-56.798c10.622-39.723 3.751-81.601-19.534-118.011-32.528-50.827-95.304-88.052-172.925-101.312-32.502-5.555-72.95-4.653-105.556-2.292a839.665 839.665 0 0 0-40.55 3.939Zm3.183 88.053-5.775-37.364c2.209-.337 5.005-.748 8.302-1.2a664.393 664.393 0 0 1 35.8-3.903c28.979-2.361 65.416-3.341 96.216 1.922 56.181 9.598 99.035 32.417 125.427 61.044 26.324 28.554 36.276 62.794 27.327 96.234-6.573 24.554-29.649 45.428-53.885 45.428-24.236 0-47.312-20.874-53.886-45.428-7.664-28.667-1.446-57.871 16.998-83.581 12.018 7.111 21.994 15.263 29.457 24.107a91.07 91.07 0 0 0-1.152 1.752l-.001.002c-1.947 3.043-4.134 8.334-5.962 14.189-1.869 5.984-3.533 13.102-4.22 20.016-.671 6.747-.495 14.07 2 19.968 1.292 3.051 3.284 5.905 6.255 7.973 2.999 2.088 6.579 3.086 10.533 3.086 3.955 0 7.534-.998 10.533-3.086 2.972-2.068 4.963-4.922 6.255-7.973 2.496-5.898 2.671-13.221 2-19.968-.687-6.914-2.351-14.032-4.219-20.016-1.828-5.854-4.015-11.146-5.962-14.188l-5.004 3.213 5.004-3.214a86.934 86.934 0 0 0-3.874-5.554c-18.034-23.842-50.589-42.343-89.793-52.305a258.122 258.122 0 0 0-20.182-4.268c-29.774-5.092-63.197-4.02-89.063-1.739a563.144 563.144 0 0 0-32.119 3.775c-2.728.4-5.083.768-7.01 1.078Zm128.192-3.114-1 5.87 1-5.87Zm102.018 79.872c1.113-3.566 2.26-6.527 3.224-8.636.964 2.109 2.111 5.07 3.224 8.636 1.691 5.416 3.148 11.722 3.736 17.64.605 6.086.211 11.004-1.116 14.139-.62 1.465-1.352 2.326-2.094 2.842-.714.498-1.837.957-3.75.957s-3.036-.459-3.75-.957c-.742-.516-1.474-1.377-2.094-2.842-1.327-3.135-1.721-8.053-1.116-14.139.588-5.918 2.045-12.224 3.736-17.64Z"/>
+</svg>
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index b1c0a2b0f..17da351a1 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -4,6 +4,8 @@
//
// Copyright (c) KALEIDOS INC
+@use "sass:color" as color;
+
:root {
// DARK
--dark-gray-1: #1d1f20;
@@ -46,4 +48,21 @@
//GENERIC
--color-canvas: #e8e9ea;
+
+ // SOCIAL LOGIN BUTTONS
+ --google-login-background: #4285f4;
+ --google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
+ --google-login-foreground: var(--white);
+
+ --github-login-background: #4c4c4c;
+ --github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};
+ --github-login-foreground: var(--white);
+
+ --oidc-login-background: #b3b3b3;
+ --oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)};
+ --oidc-login-foreground: var(--white);
+
+ --gitlab-login-background: #fc6d26;
+ --gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
+ --gitlab-login-foreground: var(--white);
}
diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss
index c80afc3a3..807214c7f 100644
--- a/frontend/resources/styles/common/refactor/spacing.scss
+++ b/frontend/resources/styles/common/refactor/spacing.scss
@@ -145,6 +145,7 @@ $s-580: #{0.25 * 145}rem;
$s-612: #{0.25 * 153}rem;
$s-640: #{0.25 * 160}rem;
$s-664: #{0.25 * 166}rem;
+$s-688: #{0.25 * 172}rem;
$s-712: #{0.25 * 178}rem;
$s-736: #{0.25 * 184}rem;
$s-800: #{0.25 * 200}rem;
diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs
index c9872a8b0..fbb5a2f19 100644
--- a/frontend/src/app/config.cljs
+++ b/frontend/src/app/config.cljs
@@ -100,8 +100,8 @@
(def browser (parse-browser))
(def platform (parse-platform))
-(def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI" nil))
-(def privacy-policy-uri (obj/get global "penpotPrivacyPolicyURI" nil))
+(def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI" "https://penpot.app/terms"))
+(def privacy-policy-uri (obj/get global "penpotPrivacyPolicyURI" "https://penpot.app/privacy"))
(defn- normalize-uri
[uri-str]
diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj
index 2f5dfb2ea..5a64f57c9 100644
--- a/frontend/src/app/main/style.clj
+++ b/frontend/src/app/main/style.clj
@@ -14,7 +14,7 @@
[cuerdas.core :as str]
[rumext.v2.util :as mfu]))
-;; Should coincide with the `ROOT_NAME` constant in gulpfile.js
+;; Should match with the `ROOT_NAME` constant in gulpfile.js
(def ROOT-NAME "app")
(def ^:dynamic *css-prefix* nil)
diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs
index 1ab5209d6..b770c5f1e 100644
--- a/frontend/src/app/main/ui/auth.cljs
+++ b/frontend/src/app/main/ui/auth.cljs
@@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.auth
+ (:require-macros [app.main.style :as stl])
(:require
[app.config :as cf]
[app.main.ui.auth.login :refer [login-page]]
@@ -19,57 +20,99 @@
(mf/defc terms-login
[]
- (let [show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri)
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri)
show-terms? (some? cf/terms-of-service-uri)
show-privacy? (some? cf/privacy-policy-uri)]
- (when show-all?
- [:div.terms-login
- (when show-terms?
- [:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
+ (if new-css-system
+ (when show-all?
+ [:div {:class (stl/css :terms-login)}
+ (when show-terms?
+ [:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
- (when show-all?
- [:span (tr "labels.and")])
+ (when show-all?
+ [:span (tr "labels.and")])
- (when show-privacy?
- [:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])))
+ (when show-privacy?
+ [:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])
+
+ (when show-all?
+ [:div.terms-login
+ (when show-terms?
+ [:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
+
+ (when show-all?
+ [:span (tr "labels.and")])
+
+ (when show-privacy?
+ [:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])]))))
(mf/defc auth
[{:keys [route] :as props}]
- (let [section (get-in route [:data :name])
- params (:query-params route)]
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ section (get-in route [:data :name])
+ params (:query-params route)
+ show-illustration? (contains? cf/flags :login-illustration)]
(mf/use-effect
#(dom/set-html-title (tr "title.default")))
- ;; FIXME: Temporary disabled new css system until we redesign the login with the new styles
- [:& (mf/provider ctx/new-css-system) {:value false}
- [:main.auth
- [:section.auth-sidebar
- [:a.logo {:href "#/"}
- [:span {:aria-hidden true} i/logo]
- [:span.hidden-name "Home"]]
- [:span.tagline (tr "auth.sidebar-tagline")]]
+ (if new-css-system
+ [:main {:class (stl/css-case :auth-section true
+ :no-illustration (not show-illustration?))}
+ (when show-illustration?
+ [:div {:class (stl/css :login-illustration)}
+ i/login-illustration])
+ [:section {:class (stl/css :auth-content)}
+ (case section
+ :auth-register
+ [:& register-page {:params params}]
- [:section.auth-content
- (case section
- :auth-register
- [:& register-page {:params params}]
+ :auth-register-validate
+ [:& register-validate-page {:params params}]
- :auth-register-validate
- [:& register-validate-page {:params params}]
+ :auth-register-success
+ [:& register-success-page {:params params}]
- :auth-register-success
- [:& register-success-page {:params params}]
+ :auth-login
+ [:& login-page {:params params}]
- :auth-login
- [:& login-page {:params params}]
+ :auth-recovery-request
+ [:& recovery-request-page]
- :auth-recovery-request
- [:& recovery-request-page]
+ :auth-recovery
+ [:& recovery-page {:params params}])
- :auth-recovery
- [:& recovery-page {:params params}])
+ (when (contains? #{:auth-login :auth-register} section)
+ [:& terms-login])]]
- [:& terms-login {}]]]]))
+ ;; OLD
+ [:main.auth
+ [:section.auth-sidebar
+ [:a.logo {:href "#/"}
+ [:span {:aria-hidden true} i/logo]
+ [:span.hidden-name "Home"]]
+ [:span.tagline (tr "auth.sidebar-tagline")]]
+ [:section.auth-content
+ (case section
+ :auth-register
+ [:& register-page {:params params}]
+
+ :auth-register-validate
+ [:& register-validate-page {:params params}]
+
+ :auth-register-success
+ [:& register-success-page {:params params}]
+
+ :auth-login
+ [:& login-page {:params params}]
+
+ :auth-recovery-request
+ [:& recovery-request-page]
+
+ :auth-recovery
+ [:& recovery-page {:params params}])
+
+ [:& terms-login {}]]])))
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
new file mode 100644
index 000000000..02758220e
--- /dev/null
+++ b/frontend/src/app/main/ui/auth.scss
@@ -0,0 +1,74 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.auth-section {
+ align-items: center;
+ background: $db-primary;
+ display: grid;
+ gap: $s-32;
+ grid-template-columns: repeat(3, 1fr);
+ height: 100%;
+ padding: $s-32;
+ width: 100%;
+
+ &.no-illustration {
+ display: flex;
+ justify-content: center;
+ }
+
+ @media (max-width: 992px) {
+ display: flex;
+ justify-content: center;
+ }
+
+ .login-illustration {
+ display: flex;
+ justify-content: center;
+ grid-column: 1 / 3;
+
+ svg {
+ width: $s-688;
+ fill: $df-primary;
+ height: auto;
+ }
+
+ @media (max-width: 992px) {
+ display: none;
+ }
+ }
+
+ .auth-content {
+ align-items: center;
+ display: flex;
+ height: fit-content;
+ justify-content: center;
+ max-width: $s-412;
+ padding-bottom: $s-8;
+ position: relative;
+ width: 100%;
+ }
+}
+
+.terms-login {
+ font-size: $fs-11;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ display: flex;
+ gap: $s-4;
+ justify-content: center;
+
+ a {
+ font-weight: $fw700;
+ color: $df-secondary;
+ }
+ span {
+ border-bottom: $s-1 solid transparent;
+ color: $df-secondary;
+ }
+}
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
new file mode 100644
index 000000000..a873332af
--- /dev/null
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -0,0 +1,148 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.auth-form {
+ width: 100%;
+ padding-bottom: $s-16;
+
+ form {
+ display: flex;
+ flex-direction: column;
+ gap: $s-12;
+ margin-bottom: $s-24;
+ }
+}
+
+.separator {
+ border-color: $db-cuaternary;
+ margin: $s-24 0;
+}
+
+.auth-title {
+ @include bigTitleTipography;
+ color: $df-primary;
+}
+
+.auth-subtitle {
+ margin-top: $s-24;
+ font-size: $fs-14;
+ color: $df-secondary;
+}
+
+.form-field {
+ --input-width: 100%;
+ --input-height: #{$s-40};
+ --input-min-width: 100%;
+}
+
+.buttons-stack button,
+.buttons-stack :global(.btn-primary) {
+ @extend .button-primary;
+ font-size: $fs-11;
+ height: $s-40;
+ text-transform: uppercase;
+ width: 100%;
+}
+
+.link-entry {
+ display: flex;
+ flex-direction: column;
+ gap: $s-12;
+ padding: $s-24 0;
+ border-top: $s-1 solid $db-cuaternary;
+
+ span {
+ text-align: center;
+ font-size: $fs-14;
+ color: $df-secondary;
+ }
+ a {
+ @extend .button-secondary;
+ height: $s-40;
+ text-transform: uppercase;
+ font-size: $fs-11;
+ }
+}
+
+.forgot-password {
+ display: flex;
+ justify-content: flex-end;
+ a {
+ font-size: $fs-14;
+ color: $df-secondary;
+ font-weight: $fw400;
+ }
+}
+
+.submit-btn,
+.register-btn,
+.recover-btn {
+ @extend .button-primary;
+ font-size: $fs-11;
+ height: $s-40;
+ text-transform: uppercase;
+ width: 100%;
+}
+
+.login-btn {
+ border-radius: $br-8;
+ font-size: $fs-14;
+ display: flex;
+ align-items: center;
+ gap: $s-6;
+ width: 100%;
+
+ span {
+ padding-top: $s-2;
+ }
+
+ &:hover {
+ color: var(--white);
+ }
+}
+
+.auth-buttons {
+ display: flex;
+ gap: $s-8;
+}
+
+.btn-google-auth {
+ color: var(--google-login-foreground);
+ background-color: var(--google-login-background);
+ &:hover {
+ background: var(--google-login-background-hover);
+ }
+}
+
+.btn-github-auth {
+ color: var(--github-login-foreground);
+ background: var(--github-login-background);
+ &:hover {
+ background: var(--github-login-background-hover);
+ }
+}
+
+.btn-oidc-auth {
+ color: var(--oidc-login-foreground);
+ background: var(--oidc-login-background);
+ &:hover {
+ background: var(--oidc-login-background-hover);
+ }
+}
+
+.btn-gitlab-auth {
+ color: var(--gitlab-login-foreground);
+ background: var(--gitlab-login-background);
+ &:hover {
+ background: var(--gitlab-login-background-hover);
+ }
+}
+
+.banner {
+ margin: $s-16 0;
+}
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index fad0f9cef..bc64bdf75 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.auth.login
+ (:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.logging :as log]
@@ -17,6 +18,7 @@
[app.main.ui.components.button-link :as bl]
[app.main.ui.components.forms :as fm]
[app.main.ui.components.link :as lk]
+ [app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.messages :as msgs]
[app.util.dom :as dom]
@@ -92,7 +94,8 @@
(mf/defc login-form
[{:keys [params on-success-callback] :as props}]
- (let [initial (mf/use-memo (mf/deps params) (constantly params))
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ initial (mf/use-memo (mf/deps params) (constantly params))
error (mf/use-state false)
form (fm/use-form :spec ::login-form
@@ -150,137 +153,269 @@
(login-with-ldap event (with-meta params
{:on-error on-error
:on-success on-success})))))]
- [:*
- (when-let [message @error]
- [:& msgs/inline-banner
- {:type :warning
- :content message
- :on-close #(reset! error nil)
- :data-test "login-banner"
- :role "alert"}])
+ (if new-css-system
+ [:*
+ (when-let [message @error]
+ [:& msgs/inline-banner
+ {:type :warning
+ :content message
+ :on-close #(reset! error nil)
+ :data-test "login-banner"
+ :role "alert"}])
- [:& fm/form {:on-submit on-submit :form form}
- [:div.fields-row
- [:& fm/input
- {:name :email
- :type "email"
- :help-icon i/at
- :label (tr "auth.email")}]]
+ [:& fm/form {:on-submit on-submit :form form}
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input
+ {:name :email
+ :type "email"
+ :label (tr "auth.email")
+ :class (stl/css :form-field)}]]
- [:div.fields-row
- [:& fm/input
- {:type "password"
- :name :password
- :help-icon i/eye
- :label (tr "auth.password")}]]
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input
+ {:type "password"
+ :name :password
+ :label (tr "auth.password")
+ :class (stl/css :form-field)}]]
- [:div.buttons-stack
- (when (or (contains? cf/flags :login)
- (contains? cf/flags :login-with-password))
- [:> fm/submit-button*
- {:label (tr "auth.login-submit")
- :data-test "login-submit"}])
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password))
+ [:div {:class (stl/css :fields-row :forgot-password)}
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-recovery-request))
+ :data-test "forgot-password"}
+ (tr "auth.forgot-password")]])
- (when (contains? cf/flags :login-with-ldap)
- [:> fm/submit-button*
- {:label (tr "auth.login-with-ldap-submit")
- :on-click on-submit-ldap}])]]]))
+ [:div {:class (stl/css :buttons-stack)}
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password))
+ [:> fm/submit-button*
+ {:label (tr "auth.login-submit")
+ :data-test "login-submit"
+ :class (stl/css :login-button)}])
+
+ (when (contains? cf/flags :login-with-ldap)
+ [:> fm/submit-button*
+ {:label (tr "auth.login-with-ldap-submit")
+ :on-click on-submit-ldap}])]]]
+
+ ;; OLD
+ [:*
+ (when-let [message @error]
+ [:& msgs/inline-banner
+ {:type :warning
+ :content message
+ :on-close #(reset! error nil)
+ :data-test "login-banner"
+ :role "alert"}])
+
+ [:& fm/form {:on-submit on-submit :form form}
+ [:div.fields-row
+ [:& fm/input
+ {:name :email
+ :type "email"
+ :help-icon i/at
+ :label (tr "auth.email")
+ :class (stl/css :form-field)}]]
+
+ [:div.fields-row
+ [:& fm/input
+ {:type "password"
+ :name :password
+ :help-icon i/eye
+ :label (tr "auth.password")
+ :class (stl/css :form-field)}]]
+
+ [:div.buttons-stack
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password))
+ [:> fm/submit-button*
+ {:label (tr "auth.login-submit")
+ :data-test "login-submit"}])
+
+ (when (contains? cf/flags :login-with-ldap)
+ [:> fm/submit-button*
+ {:label (tr "auth.login-with-ldap-submit")
+ :on-click on-submit-ldap}])]]])))
(mf/defc login-buttons
[{:keys [params] :as props}]
- (let [login-with-google (mf/use-fn (mf/deps params) #(login-with-oidc % :google params))
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+
+ login-with-google (mf/use-fn (mf/deps params) #(login-with-oidc % :google params))
login-with-github (mf/use-fn (mf/deps params) #(login-with-oidc % :github params))
login-with-gitlab (mf/use-fn (mf/deps params) #(login-with-oidc % :gitlab params))
login-with-oidc (mf/use-fn (mf/deps params) #(login-with-oidc % :oidc params))]
- [:div.auth-buttons
- (when (contains? cf/flags :login-with-google)
- [:& bl/button-link {:on-click login-with-google
- :icon i/brand-google
- :label (tr "auth.login-with-google-submit")
- :class "btn-google-auth"}])
+ (if new-css-system
+ [:div {:class (stl/css :auth-buttons)}
+ (when (contains? cf/flags :login-with-google)
+ [:& bl/button-link {:on-click login-with-google
+ :icon i/brand-google
+ :label (tr "auth.login-with-google-submit")
+ :class (stl/css :login-btn :btn-google-auth)}])
- (when (contains? cf/flags :login-with-github)
- [:& bl/button-link {:on-click login-with-github
- :icon i/brand-github
- :label (tr "auth.login-with-github-submit")
- :class "btn-github-auth"}])
+ (when (contains? cf/flags :login-with-github)
+ [:& bl/button-link {:on-click login-with-github
+ :icon i/brand-github
+ :label (tr "auth.login-with-github-submit")
+ :class (stl/css :login-btn :btn-github-auth)}])
- (when (contains? cf/flags :login-with-gitlab)
- [:& bl/button-link {:on-click login-with-gitlab
- :icon i/brand-gitlab
- :label (tr "auth.login-with-gitlab-submit")
- :class "btn-gitlab-auth"}])
+ (when (contains? cf/flags :login-with-gitlab)
+ [:& bl/button-link {:on-click login-with-gitlab
+ :icon i/brand-gitlab
+ :label (tr "auth.login-with-gitlab-submit")
+ :class (stl/css :login-btn :btn-gitlab-auth)}])
- (when (contains? cf/flags :login-with-oidc)
- [:& bl/button-link {:on-click login-with-oidc
- :icon i/brand-openid
- :label (tr "auth.login-with-oidc-submit")
- :class "btn-github-auth"}])]))
+ (when (contains? cf/flags :login-with-oidc)
+ [:& bl/button-link {:on-click login-with-oidc
+ :icon i/brand-openid
+ :label (tr "auth.login-with-oidc-submit")
+ :class (stl/css :login-btn :btn-oidc-auth)}])]
+
+ [:div.auth-buttons
+ (when (contains? cf/flags :login-with-google)
+ [:& bl/button-link {:on-click login-with-google
+ :icon i/brand-google
+ :label (tr "auth.login-with-google-submit")
+ :class "btn-google-auth"}])
+
+ (when (contains? cf/flags :login-with-github)
+ [:& bl/button-link {:on-click login-with-github
+ :icon i/brand-github
+ :label (tr "auth.login-with-github-submit")
+ :class "btn-github-auth"}])
+
+ (when (contains? cf/flags :login-with-gitlab)
+ [:& bl/button-link {:on-click login-with-gitlab
+ :icon i/brand-gitlab
+ :label (tr "auth.login-with-gitlab-submit")
+ :class "btn-gitlab-auth"}])
+
+ (when (contains? cf/flags :login-with-oidc)
+ [:& bl/button-link {:on-click login-with-oidc
+ :icon i/brand-openid
+ :label (tr "auth.login-with-oidc-submit")
+ :class "btn-github-auth"}])])))
(mf/defc login-button-oidc
[{:keys [params] :as props}]
- (when (contains? cf/flags :login-with-oidc)
- [:div.link-entry.link-oidc
- [:a {:tab-index "0"
- :on-key-down (fn [event]
- (when (k/enter? event)
- (login-with-oidc event :oidc params)))
- :on-click #(login-with-oidc % :oidc params)}
- (tr "auth.login-with-oidc-submit")]]))
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ (when (contains? cf/flags :login-with-oidc)
+ [:div {:class (stl/css :link-entry :link-oidc)}
+ [:a {:tab-index "0"
+ :on-key-down (fn [event]
+ (when (k/enter? event)
+ (login-with-oidc event :oidc params)))
+ :on-click #(login-with-oidc % :oidc params)}
+ (tr "auth.login-with-oidc-submit")]])
+
+ (when (contains? cf/flags :login-with-oidc)
+ [:div.link-entry.link-oidc
+ [:a {:tab-index "0"
+ :on-key-down (fn [event]
+ (when (k/enter? event)
+ (login-with-oidc event :oidc params)))
+ :on-click #(login-with-oidc % :oidc params)}
+ (tr "auth.login-with-oidc-submit")]]))))
(mf/defc login-methods
[{:keys [params on-success-callback] :as props}]
- [:*
- (when show-alt-login-buttons?
- [:*
- [:span.separator
- [:span.line]
- [:span.text (tr "labels.continue-with")]
- [:span.line]]
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:*
+ (when show-alt-login-buttons?
+ [:*
+ [:& login-buttons {:params params}]
- [:& login-buttons {:params params}]
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password)
+ (contains? cf/flags :login-with-ldap))
+ [:hr {:class (stl/css :separator)}])])
- (when (or (contains? cf/flags :login)
- (contains? cf/flags :login-with-password)
- (contains? cf/flags :login-with-ldap))
- [:span.separator
- [:span.line]
- [:span.text (tr "labels.or")]
- [:span.line]])])
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password)
+ (contains? cf/flags :login-with-ldap))
+ [:& login-form {:params params :on-success-callback on-success-callback}])]
- (when (or (contains? cf/flags :login)
- (contains? cf/flags :login-with-password)
- (contains? cf/flags :login-with-ldap))
- [:& login-form {:params params :on-success-callback on-success-callback}])])
+ ;; OLD
+ [:*
+ (when show-alt-login-buttons?
+ [:*
+ [:span.separator
+ [:span.line]
+ [:span.text (tr "labels.continue-with")]
+ [:span.line]]
+
+ [:& login-buttons {:params params}]
+
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password)
+ (contains? cf/flags :login-with-ldap))
+ [:span.separator
+ [:span.line]
+ [:span.text (tr "labels.or")]
+ [:span.line]])])
+
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password)
+ (contains? cf/flags :login-with-ldap))
+ [:& login-form {:params params :on-success-callback on-success-callback}])])))
(mf/defc login-page
[{:keys [params] :as props}]
- [:div.generic-form.login-form
- [:div.form-container
- [:h1 {:data-test "login-title"} (tr "auth.login-title")]
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:div {:class (stl/css :auth-form)}
+ [:h1 {:class (stl/css :auth-title)
+ :data-test "login-title"} (tr "auth.login-title")]
- [:& login-methods {:params params}]
+ [:hr {:class (stl/css :separator)}]
- [:div.links
- (when (or (contains? cf/flags :login)
- (contains? cf/flags :login-with-password))
- [:div.link-entry
- [:& lk/link {:action #(st/emit! (rt/nav :auth-recovery-request))
- :data-test "forgot-password"}
- (tr "auth.forgot-password")]])
+ [:& login-methods {:params params}]
- (when (contains? cf/flags :registration)
- [:div.link-entry
- [:span (tr "auth.register") " "]
- [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} params))
- :data-test "register-submit"}
- (tr "auth.register-submit")]])]
+ [:div {:class (stl/css :links)}
+ (when (contains? cf/flags :registration)
+ [:div {:class (stl/css :link-entry :register)}
+ [:span (tr "auth.register") " "]
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} params))
+ :data-test "register-submit"}
+ (tr "auth.register-submit")]])]
+
+ (when (contains? cf/flags :demo-users)
+ [:div {:class (stl/css :link-entry :demo-account)}
+ [:span (tr "auth.create-demo-profile") " "]
+ [:& lk/link {:action #(st/emit! (du/create-demo-profile))
+ :data-test "demo-account-link"}
+ (tr "auth.create-demo-account")]])]
+
+ ;; OLD
+ [:div.generic-form.login-form
+ [:div.form-container
+ [:h1 {:data-test "login-title"} (tr "auth.login-title")]
+
+ [:& login-methods {:params params}]
+
+ [:div.links
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password))
+ [:div.link-entry
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-recovery-request))
+ :data-test "forgot-password"}
+ (tr "auth.forgot-password")]])
+
+ (when (contains? cf/flags :registration)
+ [:div.link-entry
+ [:span (tr "auth.register") " "]
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} params))
+ :data-test "register-submit"}
+ (tr "auth.register-submit")]])]
+
+ (when (contains? cf/flags :demo-users)
+ [:div.links.demo
+ [:div.link-entry
+ [:span (tr "auth.create-demo-profile") " "]
+ [:& lk/link {:action #(st/emit! (du/create-demo-profile))
+ :data-test "demo-account-link"}
+ (tr "auth.create-demo-account")]]])]])))
- (when (contains? cf/flags :demo-users)
- [:div.links.demo
- [:div.link-entry
- [:span (tr "auth.create-demo-profile") " "]
- [:& lk/link {:action #(st/emit! (du/create-demo-profile))
- :data-test "demo-account-link"}
- (tr "auth.create-demo-account")]]])]])
diff --git a/frontend/src/app/main/ui/auth/login.scss b/frontend/src/app/main/ui/auth/login.scss
new file mode 100644
index 000000000..b0002114f
--- /dev/null
+++ b/frontend/src/app/main/ui/auth/login.scss
@@ -0,0 +1,7 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "./common.scss";
diff --git a/frontend/src/app/main/ui/auth/recovery.cljs b/frontend/src/app/main/ui/auth/recovery.cljs
index 99ba7fc40..7925de065 100644
--- a/frontend/src/app/main/ui/auth/recovery.cljs
+++ b/frontend/src/app/main/ui/auth/recovery.cljs
@@ -5,12 +5,14 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.auth.recovery
+ (:require-macros [app.main.style :as stl])
(:require
[app.common.spec :as us]
[app.main.data.messages :as dm]
[app.main.data.users :as du]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
+ [app.main.ui.context :as ctx]
[app.util.i18n :as i18n :refer [tr]]
[app.util.router :as rt]
[cljs.spec.alpha :as s]
@@ -55,38 +57,71 @@
(mf/defc recovery-form
[{:keys [params] :as props}]
- (let [form (fm/use-form :spec ::recovery-form
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ form (fm/use-form :spec ::recovery-form
:validators [password-equality
(fm/validate-not-empty :password-1 (tr "auth.password-not-empty"))
(fm/validate-not-empty :password-2 (tr "auth.password-not-empty"))]
:initial params)]
- [:& fm/form {:on-submit on-submit
- :form form}
- [:div.fields-row
- [:& fm/input {:type "password"
- :name :password-1
- :label (tr "auth.new-password")}]]
+ (if new-css-system
+ [:& fm/form {:on-submit on-submit :form form}
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input {:type "password"
+ :name :password-1
+ :label (tr "auth.new-password")
+ :class (stl/css :form-field)}]]
- [:div.fields-row
- [:& fm/input {:type "password"
- :name :password-2
- :label (tr "auth.confirm-password")}]]
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input {:type "password"
+ :name :password-2
+ :label (tr "auth.confirm-password")
+ :class (stl/css :form-field)}]]
- [:> fm/submit-button*
- {:label (tr "auth.recovery-submit")}]]))
+ [:> fm/submit-button*
+ {:label (tr "auth.recovery-submit")
+ :class (stl/css :submit-btn)}]]
+
+ ;; OLD
+ [:& fm/form {:on-submit on-submit
+ :form form}
+ [:div.fields-row
+ [:& fm/input {:type "password"
+ :name :password-1
+ :label (tr "auth.new-password")}]]
+
+ [:div.fields-row
+ [:& fm/input {:type "password"
+ :name :password-2
+ :label (tr "auth.confirm-password")}]]
+
+ [:> fm/submit-button*
+ {:label (tr "auth.recovery-submit")}]])))
;; --- Recovery Request Page
(mf/defc recovery-page
[{:keys [params] :as props}]
- [:section.generic-form
- [:div.form-container
- [:h1 "Forgot your password?"]
- [:div.subtitle "Please enter your new password"]
- [:& recovery-form {:params params}]
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:div {:class (stl/css :auth-form)}
+ [:h1 {:class (stl/css :auth-title)} "Forgot your password?"]
+ [:div {:class (stl/css :auth-subtitle)} "Please enter your new password"]
+ [:hr {:class (stl/css :separator)}]
+ [:& recovery-form {:params params}]
- [:div.links
- [:div.link-entry
- [:a {:on-click #(st/emit! (rt/nav :auth-login))}
- (tr "profile.recovery.go-to-login")]]]]])
+ [:div {:class (stl/css :links)}
+ [:div {:class (stl/css :link-entry)}
+ [:a {:on-click #(st/emit! (rt/nav :auth-login))}
+ (tr "profile.recovery.go-to-login")]]]]
+ ;; TODO
+ [:section.generic-form
+ [:div.form-container
+ [:h1 "Forgot your password?"]
+ [:div.subtitle "Please enter your new password"]
+ [:& recovery-form {:params params}]
+
+ [:div.links
+ [:div.link-entry
+ [:a {:on-click #(st/emit! (rt/nav :auth-login))}
+ (tr "profile.recovery.go-to-login")]]]]])))
diff --git a/frontend/src/app/main/ui/auth/recovery.scss b/frontend/src/app/main/ui/auth/recovery.scss
new file mode 100644
index 000000000..743034faa
--- /dev/null
+++ b/frontend/src/app/main/ui/auth/recovery.scss
@@ -0,0 +1,12 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+@use "./common.scss";
+
+.submit-btn {
+ margin-top: $s-16;
+}
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
index d292a57e6..04202336d 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.cljs
+++ b/frontend/src/app/main/ui/auth/recovery_request.cljs
@@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.auth.recovery-request
+ (:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.spec :as us]
@@ -13,6 +14,7 @@
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.components.link :as lk]
+ [app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
[app.util.router :as rt]
@@ -32,7 +34,8 @@
(mf/defc recovery-form
[{:keys [on-success-callback] :as props}]
- (let [form (fm/use-form :spec ::recovery-request-form
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ form (fm/use-form :spec ::recovery-request-form
:validators [handle-error-messages]
:initial {})
submitted (mf/use-state false)
@@ -74,32 +77,62 @@
(reset! form nil)
(st/emit! (du/request-profile-recovery params)))))]
- [:& fm/form {:on-submit on-submit
- :form form}
- [:div.fields-row
- [:& fm/input {:name :email
- :label (tr "auth.email")
- :help-icon i/at
- :type "text"}]]
+ (if new-css-system
+ [:& fm/form {:on-submit on-submit
+ :form form}
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input {:name :email
+ :label (tr "auth.email")
+ :type "text"
+ :class (stl/css :form-field)}]]
- [:> fm/submit-button*
- {:label (tr "auth.recovery-request-submit")
- :data-test "recovery-resquest-submit"}]]))
+ [:> fm/submit-button*
+ {:label (tr "auth.recovery-request-submit")
+ :data-test "recovery-resquest-submit"
+ :class (stl/css :recover-btn)}]]
+
+ ;; OLD
+ [:& fm/form {:on-submit on-submit
+ :form form}
+ [:div.fields-row
+ [:& fm/input {:name :email
+ :label (tr "auth.email")
+ :help-icon i/at
+ :type "text"}]]
+
+ [:> fm/submit-button*
+ {:label (tr "auth.recovery-request-submit")
+ :data-test "recovery-resquest-submit"}]])))
;; --- Recovery Request Page
(mf/defc recovery-request-page
[{:keys [params on-success-callback go-back-callback] :as props}]
- (let [default-go-back #(st/emit! (rt/nav :auth-login))
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ default-go-back #(st/emit! (rt/nav :auth-login))
go-back (or go-back-callback default-go-back)]
- [:section.generic-form
- [:div.form-container
- [:h1 (tr "auth.recovery-request-title")]
- [:div.subtitle (tr "auth.recovery-request-subtitle")]
- [:& recovery-form {:params params :on-success-callback on-success-callback}]
- [:div.links
- [:div.link-entry
+ (if new-css-system
+ [:div {:class (stl/css :auth-form)}
+ [:h1 {:class (stl/css :auth-title)} (tr "auth.recovery-request-title")]
+ [:div {:class (stl/css :auth-subtitle)} (tr "auth.recovery-request-subtitle")]
+ [:hr {:class (stl/css :separator)}]
+
+ [:& recovery-form {:params params :on-success-callback on-success-callback}]
+
+ [:div {:class (stl/css :link-entry)}
[:& lk/link {:action go-back
:data-test "go-back-link"}
- (tr "labels.go-back")]]]]]))
+ (tr "labels.go-back")]]]
+
+ ;; old
+ [:section.generic-form
+ [:div.form-container
+ [:h1 (tr "auth.recovery-request-title")]
+ [:div.subtitle (tr "auth.recovery-request-subtitle")]
+ [:& recovery-form {:params params :on-success-callback on-success-callback}]
+ [:div.links
+ [:div.link-entry
+ [:& lk/link {:action go-back
+ :data-test "go-back-link"}
+ (tr "labels.go-back")]]]]])))
diff --git a/frontend/src/app/main/ui/auth/recovery_request.scss b/frontend/src/app/main/ui/auth/recovery_request.scss
new file mode 100644
index 000000000..e78e21b6d
--- /dev/null
+++ b/frontend/src/app/main/ui/auth/recovery_request.scss
@@ -0,0 +1,12 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+@use "./common.scss";
+
+.fields-row {
+ margin-bottom: $s-8;
+}
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 43cf56e1f..01b25fd32 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.auth.register
+ (:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.spec :as us]
@@ -16,9 +17,10 @@
[app.main.ui.auth.login :as login]
[app.main.ui.components.forms :as fm]
[app.main.ui.components.link :as lk]
+ [app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.messages :as msgs]
- [app.util.i18n :refer [tr]]
+ [app.util.i18n :refer [tr tr-html]]
[app.util.router :as rt]
[beicon.core :as rx]
[cljs.spec.alpha :as s]
@@ -26,9 +28,10 @@
(mf/defc demo-warning
[_]
- [:& msgs/inline-banner
- {:type :warning
- :content (tr "auth.demo-warning")}])
+ [:div {:class (stl/css :banner)}
+ [:& msgs/inline-banner
+ {:type :warning
+ :content (tr "auth.demo-warning")}]])
;; --- PAGE: Register
@@ -85,7 +88,8 @@
(mf/defc register-form
[{:keys [params on-success-callback] :as props}]
- (let [initial (mf/use-memo (mf/deps params) (constantly params))
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ initial (mf/use-memo (mf/deps params) (constantly params))
form (fm/use-form :spec ::register-form
:validators [validate
(fm/validate-not-empty :password (tr "auth.password-not-empty"))]
@@ -110,72 +114,131 @@
(partial handle-prepare-register-error form))))))]
- [:& fm/form {:on-submit on-submit
- :form form}
- [:div.fields-row
- [:& fm/input {:type "email"
- :name :email
- :help-icon i/at
- :label (tr "auth.email")
- :data-test "email-input"}]]
- [:div.fields-row
- [:& fm/input {:name :password
- :hint (tr "auth.password-length-hint")
- :label (tr "auth.password")
- :type "password"}]]
+ (if new-css-system
+ [:& fm/form {:on-submit on-submit :form form}
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input {:type "email"
+ :name :email
+ :label (tr "auth.email")
+ :data-test "email-input"
+ :class (stl/css :form-field)}]]
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input {:name :password
+ :hint (tr "auth.password-length-hint")
+ :label (tr "auth.password")
+ :type "password"
+ :class (stl/css :form-field)}]]
- [:> fm/submit-button*
- {:label (tr "auth.register-submit")
- :disabled @submitted?
- :data-test "register-form-submit"}]]))
+ [:> fm/submit-button*
+ {:label (tr "auth.register-submit")
+ :disabled @submitted?
+ :data-test "register-form-submit"
+ :class (stl/css :register-btn)}]]
+
+ ;; OLD
+ [:& fm/form {:on-submit on-submit
+ :form form}
+ [:div.fields-row
+ [:& fm/input {:type "email"
+ :name :email
+ :help-icon i/at
+ :label (tr "auth.email")
+ :data-test "email-input"}]]
+ [:div.fields-row
+ [:& fm/input {:name :password
+ :hint (tr "auth.password-length-hint")
+ :label (tr "auth.password")
+ :type "password"}]]
+
+ [:> fm/submit-button*
+ {:label (tr "auth.register-submit")
+ :disabled @submitted?
+ :data-test "register-form-submit"}]])))
(mf/defc register-methods
[{:keys [params on-success-callback] :as props}]
- [:*
- (when login/show-alt-login-buttons?
- [:*
- [:span.separator
- [:span.line]
- [:span.text (tr "labels.continue-with")]
- [:span.line]]
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:*
+ (when login/show-alt-login-buttons?
+ [:*
+ [:hr {:class (stl/css :separator)}]
+ [:& login/login-buttons {:params params}]])
+ [:hr {:class (stl/css :separator)}]
+ [:& register-form {:params params :on-success-callback on-success-callback}]]
- [:& login/login-buttons {:params params}]
+ ;; OLD
+ [:*
+ (when login/show-alt-login-buttons?
+ [:*
+ [:span.separator
+ [:span.line]
+ [:span.text (tr "labels.continue-with")]
+ [:span.line]]
- (when (or (contains? cf/flags :login)
- (contains? cf/flags :login-with-ldap))
- [:span.separator
- [:span.line]
- [:span.text (tr "labels.or")]
- [:span.line]])])
+ [:& login/login-buttons {:params params}]
- [:& register-form {:params params :on-success-callback on-success-callback}]])
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-ldap))
+ [:span.separator
+ [:span.line]
+ [:span.text (tr "labels.or")]
+ [:span.line]])])
+
+ [:& register-form {:params params :on-success-callback on-success-callback}]])))
(mf/defc register-page
[{:keys [params] :as props}]
- [:div.form-container
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:div {:class (stl/css :auth-form)}
+ [:h1 {:class (stl/css :auth-title)
+ :data-test "registration-title"} (tr "auth.register-title")]
+ [:div {:class (stl/css :auth-subtitle)} (tr "auth.register-subtitle")]
- [:h1 {:data-test "registration-title"} (tr "auth.register-title")]
- [:div.subtitle (tr "auth.register-subtitle")]
+ (when (contains? cf/flags :demo-warning)
+ [:& demo-warning])
- (when (contains? cf/flags :demo-warning)
- [:& demo-warning])
+ [:& register-methods {:params params}]
- [:& register-methods {:params params}]
+ [:div {:class (stl/css :links)}
+ [:div {:class (stl/css :link-entry :account)}
+ [:span (tr "auth.already-have-account") " "]
- [:div.links
- [:div.link-entry
- [:span (tr "auth.already-have-account") " "]
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-login {} params))
+ :data-test "login-here-link"}
+ (tr "auth.login-here")]]
- [:& lk/link {:action #(st/emit! (rt/nav :auth-login {} params))
- :data-test "login-here-link"}
- (tr "auth.login-here")]]
+ (when (contains? cf/flags :demo-users)
+ [:div {:class (stl/css :link-entry :demo-users)}
+ [:span (tr "auth.create-demo-profile") " "]
+ [:& lk/link {:action #(st/emit! (du/create-demo-profile))}
+ (tr "auth.create-demo-account")]])]]
- (when (contains? cf/flags :demo-users)
- [:div.link-entry
- [:span (tr "auth.create-demo-profile") " "]
- [:& lk/link {:action #(st/emit! (du/create-demo-profile))}
- (tr "auth.create-demo-account")]])]])
+ ;; OLD
+ [:div.form-container
+ [:h1 {:data-test "registration-title"} (tr "auth.register-title")]
+ [:div.subtitle (tr "auth.register-subtitle")]
+
+ (when (contains? cf/flags :demo-warning)
+ [:& demo-warning])
+
+ [:& register-methods {:params params}]
+
+ [:div.links
+ [:div.link-entry
+ [:span (tr "auth.already-have-account") " "]
+
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-login {} params))
+ :data-test "login-here-link"}
+ (tr "auth.login-here")]]
+
+ (when (contains? cf/flags :demo-users)
+ [:div.link-entry
+ [:span (tr "auth.create-demo-profile") " "]
+ [:& lk/link {:action #(st/emit! (du/create-demo-profile))}
+ (tr "auth.create-demo-account")]])]])))
;; --- PAGE: register validation
@@ -219,7 +282,8 @@
(mf/defc register-validate-form
[{:keys [params on-success-callback] :as props}]
- (let [form (fm/use-form :spec ::register-validate-form
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ form (fm/use-form :spec ::register-validate-form
:validators [(fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))
(fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))]
:initial params)
@@ -240,48 +304,102 @@
(rx/subs on-success
(partial handle-register-error form))))))]
- [:& fm/form {:on-submit on-submit
- :form form}
- [:div.fields-row
- [:& fm/input {:name :fullname
- :label (tr "auth.fullname")
- :type "text"}]]
+ (if new-css-system
+ [:& fm/form {:on-submit on-submit :form form}
+ [:div {:class (stl/css :fields-row)}
+ [:& fm/input {:name :fullname
+ :label (tr "auth.fullname")
+ :type "text"
+ :class (stl/css :form-field)}]]
- (when (contains? cf/flags :terms-and-privacy-checkbox)
- [:div.fields-row.input-visible.accept-terms-and-privacy-wrapper
- [:& fm/input {:name :accept-terms-and-privacy
- :class "check-primary"
- :type "checkbox"}
- [:span
- (tr "auth.terms-privacy-agreement")]]
- [:div.auth-links
- [:a {:href "https://penpot.app/terms" :target "_blank"} (tr "auth.terms-of-service")]
- [:span ",\u00A0"]
- [:a {:href "https://penpot.app/privacy" :target "_blank"} (tr "auth.privacy-policy")]]])
+ (when (contains? cf/flags :terms-and-privacy-checkbox)
+ (let [terms-label
+ (mf/html
+ [:& tr-html
+ {:tag-name "div"
+ :label "auth.terms-privacy-agreement-md"
+ :params [cf/terms-of-service-uri cf/privacy-policy-uri]}])]
+ [:div {:class (stl/css :fields-row :input-visible :accept-terms-and-privacy-wrapper)}
+ [:& fm/input {:name :accept-terms-and-privacy
+ :class "check-primary"
+ :type "checkbox"
+ :label terms-label}]]))
- [:> fm/submit-button*
- {:label (tr "auth.register-submit")
- :disabled @submitted?}]]))
+ [:> fm/submit-button*
+ {:label (tr "auth.register-submit")
+ :disabled @submitted?
+ :class (stl/css :register-btn)}]]
+
+ ;; OLD
+ [:& fm/form {:on-submit on-submit
+ :form form}
+ [:div.fields-row
+ [:& fm/input {:name :fullname
+ :label (tr "auth.fullname")
+ :type "text"}]]
+
+ (when (contains? cf/flags :terms-and-privacy-checkbox)
+ [:div.fields-row.input-visible.accept-terms-and-privacy-wrapper
+ [:& fm/input {:name :accept-terms-and-privacy
+ :class "check-primary"
+ :type "checkbox"}
+ [:span
+ (tr "auth.terms-privacy-agreement")]]
+ [:div.auth-links
+ [:a {:href "https://penpot.app/terms" :target "_blank"} (tr "auth.terms-of-service")]
+ [:span ",\u00A0"]
+ [:a {:href "https://penpot.app/privacy" :target "_blank"} (tr "auth.privacy-policy")]]])
+
+ [:> fm/submit-button*
+ {:label (tr "auth.register-submit")
+ :disabled @submitted?}]])))
(mf/defc register-validate-page
[{:keys [params] :as props}]
- [:div.form-container
- [:h1 {:data-test "register-title"} (tr "auth.register-title")]
- [:div.subtitle (tr "auth.register-subtitle")]
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:div {:class (stl/css :auth-form)}
+ [:h1 {:class (stl/css :auth-title)
+ :data-test "register-title"} (tr "auth.register-title")]
+ [:div {:class (stl/css :auth-subtitle)} (tr "auth.register-subtitle")]
- [:& register-validate-form {:params params}]
+ [:hr {:class (stl/css :separator)}]
- [:div.links
- [:div.link-entry
- [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {}))}
- (tr "labels.go-back")]]]])
+ [:& register-validate-form {:params params}]
+
+ [:div {:class (stl/css :links)}
+ [:div {:class (stl/css :link-entry :go-back)}
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {}))}
+ (tr "labels.go-back")]]]]
+
+ ;; OLD
+ [:div.form-container
+ [:h1 {:data-test "register-title"} (tr "auth.register-title")]
+ [:div.subtitle (tr "auth.register-subtitle")]
+
+ [:& register-validate-form {:params params}]
+
+ [:div.links
+ [:div.link-entry
+ [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {}))}
+ (tr "labels.go-back")]]]])))
(mf/defc register-success-page
[{:keys [params] :as props}]
- [:div.form-container
- [:div.notification-icon i/icon-verify]
- [:div.notification-text (tr "auth.verification-email-sent")]
- [:div.notification-text-email (:email params "")]
- [:div.notification-text (tr "auth.check-your-email")]])
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:div {:class (stl/css :auth-form :register-success)}
+ [:div {:class (stl/css :notification-icon)} i/icon-verify]
+ [:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]
+ [:div {:class (stl/css :notification-text-email)} (:email params "")]
+ [:div {:class (stl/css :notification-text)} (tr "auth.check-your-email")]]
+
+ ;; OLD
+ [:div.form-container
+ [:div.notification-icon i/icon-verify]
+ [:div.notification-text (tr "auth.verification-email-sent")]
+ [:div.notification-text-email (:email params "")]
+ [:div.notification-text (tr "auth.check-your-email")]])))
+
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
new file mode 100644
index 000000000..7fab883e1
--- /dev/null
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -0,0 +1,38 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+@use "./common.scss";
+
+.accept-terms-and-privacy-wrapper {
+ margin: $s-16 0;
+ :global(a) {
+ color: $df-secondary;
+ font-weight: $fw700;
+ }
+}
+
+.register-success {
+ padding-bottom: $s-32;
+}
+
+.notification-icon {
+ fill: $df-primary;
+ display: flex;
+ justify-content: center;
+ margin-bottom: $s-32;
+ svg {
+ width: $s-92;
+ height: $s-92;
+ }
+}
+
+.notification-text-email,
+.notification-text {
+ font-size: $fs-16;
+ color: $df-secondary;
+ margin-bottom: $s-16;
+}
diff --git a/frontend/src/app/main/ui/auth/verify_token.cljs b/frontend/src/app/main/ui/auth/verify_token.cljs
index 7534d3731..c8f917cb9 100644
--- a/frontend/src/app/main/ui/auth/verify_token.cljs
+++ b/frontend/src/app/main/ui/auth/verify_token.cljs
@@ -5,11 +5,13 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.auth.verify-token
+ (:require-macros [app.main.style :as stl])
(:require
[app.main.data.messages :as dm]
[app.main.data.users :as du]
[app.main.repo :as rp]
[app.main.store :as st]
+ [app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.static :as static]
[app.util.dom :as dom]
@@ -60,7 +62,8 @@
(mf/defc verify-token
[{:keys [route] :as props}]
- (let [token (get-in route [:query-params :token])
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)
+ token (get-in route [:query-params :token])
bad-token (mf/use-state false)]
(mf/with-effect []
@@ -92,9 +95,7 @@
(st/emit! (rt/nav :auth-login))))))))
(if @bad-token
- [:> static/static-header {}
- [:div.image i/unchain]
- [:div.main-message (tr "errors.invite-invalid")]
- [:div.desc-message (tr "errors.invite-invalid.info")]]
- [:div.verify-token
+ [:> static/invalid-token {}]
+ [:div {:class (stl/css-case :verify-token new-css-system
+ :global/verify-token (not new-css-system))}
i/loader-pencil])))
diff --git a/frontend/src/app/main/ui/auth/verify_token.scss b/frontend/src/app/main/ui/auth/verify_token.scss
new file mode 100644
index 000000000..b0002114f
--- /dev/null
+++ b/frontend/src/app/main/ui/auth/verify_token.scss
@@ -0,0 +1,7 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "./common.scss";
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index ee64dc30e..fc6db4641 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -54,11 +54,11 @@
help-icon' (cond
(and (= input-type "password")
(= @type' "password"))
- i/eye
+ i/shown-refactor
(and (= input-type "password")
(= @type' "text"))
- i/eye-closed
+ i/hide-refactor
:else
help-icon)
@@ -137,23 +137,30 @@
:input-label is-text?
:radio-label is-radio?
:checkbox-label is-checkbox?)
- :tab-index "0"
+ :tab-index "-1"
:for (name input-name)} label
+
(when is-checkbox?
[:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor])
- [:> :input props]]
+
+ (if is-checkbox?
+ [:> :input props]
+
+ [:div {:class (stl/css :input-and-icon)}
+ [:> :input props]
+ (when help-icon'
+ [:span {:class (stl/css :help-icon)
+ :on-click (when (= "password" input-type)
+ swap-text-password)}
+ help-icon'])])]
(some? children)
[:label {:for (name input-name)}
-
[:> :input props]
children])
- (when help-icon'
- [:span {:class (stl/css :help-icon)
- :on-click (when (= "password" input-type)
- swap-text-password)}
- help-icon'])
+
+
(cond
(and touched? (:message error))
[:div {:id (dm/str "error-" input-name)
@@ -387,7 +394,7 @@
(true? (unchecked-get props "disabled")))
klass (dm/str class " " (if disabled? "btn-disabled" ""))
- new-klass (if disabled? (stl/css :btn-disabled) class)
+ new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) ""))
on-key-down
(mf/use-fn
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 8c022b06a..d6e9af1fb 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -10,8 +10,8 @@
.input-wrapper {
display: flex;
flex-direction: column;
- gap: $s-6;
align-items: center;
+ position: relative;
.input-with-label {
@include flexColumn;
gap: $s-8;
@@ -24,11 +24,13 @@
cursor: pointer;
color: var(--modal-title-foreground-color);
text-transform: uppercase;
+
input {
@extend .input-element;
color: var(--input-foreground-color-active);
- width: calc(100% - $s-1);
margin-top: 0;
+ width: 100%;
+ height: 100%;
&:focus {
outline: none;
@@ -41,9 +43,12 @@
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
- -webkit-text-fill-color: var(--input-foreground-color-active) !important;
- -webkit-box-shadow: 0 0 0 28px var(--input-background-color) inset !important;
+ -webkit-text-fill-color: var(--input-foreground-color-active);
+ -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
border: $s-1 solid var(--input-background-color);
+ -webkit-background-clip: text;
+ transition: background-color 5000s ease-in-out 0s;
+ caret-color: var(--input-foreground-color-active);
}
}
&:global(.invalid) {
@@ -54,15 +59,29 @@
}
}
+.input-and-icon {
+ position: relative;
+ width: var(--input-width, calc(100% - $s-1));
+ min-width: var(--input-min-width);
+ height: var(--input-height, $s-32);
+}
+
.help-icon {
cursor: pointer;
+ position: absolute;
+ right: $s-12;
+ top: calc(50% - $s-8);
svg {
@extend .button-icon-small;
- stroke: var(--input-details-color);
+ stroke: $df-secondary;
+ width: $s-16;
+ height: $s-16;
}
}
.error {
color: var(--input-border-color-error);
+ width: 100%;
+ font-size: $fs-14;
}
.hint {
@@ -181,9 +200,6 @@
// SUBMIT-BUTTON
.btn-disabled {
@extend .button-disabled;
- height: $s-32;
- padding: $s-8 $s-24;
- border-radius: $br-8;
}
// MULTI INPUT
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index 7a2c3a50e..8b469639a 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -139,8 +139,9 @@
(if new-css-system
[:*
[:li {:tab-index "0"
- :class (if selected? (stl/css :current)
- (when (:dragging? local) (stl/css :dragging)))
+ :class (stl/css-case :project-element true
+ :current selected?
+ :dragging (:dragging? local))
:on-click on-click
:on-key-down on-key-down
:on-double-click on-edit-open
@@ -1255,3 +1256,4 @@
[:& profile-section
{:profile profile
:team team}]])))
+
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 0dec1777b..9b4bceddb 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -356,8 +356,13 @@
cursor: pointer;
display: flex;
flex-shrink: 0;
- padding: $s-8 $s-8 $s-8 $s-24;
+
+ &.project-element {
+ padding: $s-8 $s-8 $s-8 $s-24;
+ }
+
a {
+ padding: $s-8 $s-8 $s-8 $s-24;
font-weight: $fw400;
width: 100%;
&:hover {
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 18ec4eadd..25f9ed985 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -504,10 +504,9 @@
border-radius: 50%;
color: $df-primary;
z-index: $z-index-modal;
-
background-color: $da-primary;
- height: $s-120;
- width: $s-120;
+ height: 100%;
+ width: 100%;
svg {
fill: $db-primary;
@@ -517,8 +516,6 @@
&:hover {
.update-overlay {
opacity: 1;
- width: $s-72;
- height: $s-72;
top: $s-16;
left: $s-16;
}
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index d6efe6e4a..69adf3914 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -172,6 +172,7 @@
(def logo-icon (icon-xref :penpot-logo-icon))
(def logo-error-screen (icon-xref :logo-error-screen))
(def logout (icon-xref :logout))
+(def login-illustration (icon-xref :login-illustration))
(def lowercase (icon-xref :lowercase))
(def mail (icon-xref :mail))
(def mask (icon-xref :mask))
diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs
index 61b088b78..3ed224d1a 100644
--- a/frontend/src/app/main/ui/modal.cljs
+++ b/frontend/src/app/main/ui/modal.cljs
@@ -80,7 +80,7 @@
[:div {:ref wrapper-ref
:class (stl/css-case
:modal-wrapper new-css-system
- :old-css/modal-wrapper (not new-css-system))}
+ :global/modal-wrapper (not new-css-system))}
(mf/element component (:props data))])))
(def modal-ref
diff --git a/frontend/src/app/main/ui/settings/password.cljs b/frontend/src/app/main/ui/settings/password.cljs
index 6dd7f7f4f..1d868b08c 100644
--- a/frontend/src/app/main/ui/settings/password.cljs
+++ b/frontend/src/app/main/ui/settings/password.cljs
@@ -105,7 +105,8 @@
[:> fm/submit-button*
{:label (t locale "dashboard.update-settings")
- :data-test "submit-password"}]]
+ :data-test "submit-password"
+ :class (stl/css :update-btn)}]]
;; OLD
[:& fm/form {:class "password-form"
@@ -153,4 +154,3 @@
[:section.dashboard-settings.form-container
[:div.form-container
[:& password-form {:locale locale}]]])))
-
diff --git a/frontend/src/app/main/ui/settings/password.scss b/frontend/src/app/main/ui/settings/password.scss
index 474e96838..fe44ec71b 100644
--- a/frontend/src/app/main/ui/settings/password.scss
+++ b/frontend/src/app/main/ui/settings/password.scss
@@ -4,4 +4,11 @@
//
// Copyright (c) KALEIDOS INC
+@use "common/refactor/common-refactor.scss" as *;
@use "./profile" as *;
+
+.update-btn {
+ margin-top: $s-16;
+ @extend .button-primary;
+ height: $s-36;
+}
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index c1f1b622b..44004ae5c 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -48,6 +48,7 @@
}
.fields-row {
+ --input-height: $s-40;
margin-bottom: $s-20;
flex-direction: column;
@@ -57,10 +58,6 @@
font-size: $fs-14;
margin-top: $s-12;
}
-
- :global(input) {
- height: $s-40;
- }
}
.field {
diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs
index 163b80671..916d2fa38 100644
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -25,7 +25,7 @@
on-click (mf/use-callback #(set! (.-href globals/location) "/"))]
(if new-css-system
[:section {:class (stl/css :exception-layout)}
- [:div
+ [:button
{:class (stl/css :exception-header)
:on-click on-click}
i/logo-icon]
@@ -42,6 +42,19 @@
[:div.exception-content
[:div.container children]]])))
+(mf/defc invalid-token
+ []
+ (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+ (if new-css-system
+ [:> static-header {}
+ [:div {:class (stl/css :main-message)} (tr "errors.invite-invalid")]
+ [:div {:class (stl/css :desc-message)} (tr "errors.invite-invalid.info")]]
+
+ [:> static-header {}
+ [:div.image i/unchain]
+ [:div.main-message (tr "errors.invite-invalid")]
+ [:div.desc-message (tr "errors.invite-invalid.info")]])))
+
(mf/defc not-found
[]
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss
index 63e00828b..6fc83378c 100644
--- a/frontend/src/app/main/ui/static.scss
+++ b/frontend/src/app/main/ui/static.scss
@@ -44,6 +44,9 @@
.exception-header {
padding: $s-24 $s-32;
position: fixed;
+ background: none;
+ border: none;
+ cursor: pointer;
svg {
fill: $df-primary;
width: $s-48;
@@ -89,3 +92,9 @@
font-size: $fs-11;
}
}
+
+.image {
+ svg {
+ fill: $df-primary;
+ }
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 79f76d5c5..54d914886 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -196,8 +196,8 @@
(obj/set! "on-expand" handle-expand))]
[:aside {:class (stl/css-case new-css-system
- :old-css/settings-bar true
- :old-css/settings-bar-right true
+ :global/settings-bar true
+ :global/settings-bar-right true
:right-settings-bar true
:not-expand (not can-be-expanded?)
:expanded (> size 276))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index a9e42f7df..a7246b249 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -156,7 +156,7 @@
[:div.shadow-option {:class (stl/css-case new-css-system
- :old-css/shadow-option true
+ :global/shadow-option true
:shadow-element true
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
diff --git a/frontend/src/app/util/i18n.cljs b/frontend/src/app/util/i18n.cljs
index 8f0429993..fc79d676f 100644
--- a/frontend/src/app/util/i18n.cljs
+++ b/frontend/src/app/util/i18n.cljs
@@ -7,6 +7,7 @@
(ns app.util.i18n
"A i18n foundation."
(:require
+ [app.common.data :as d]
[app.common.logging :as log]
[app.config :as cfg]
[app.util.dom :as dom]
@@ -175,8 +176,10 @@
{::mf/wrap-props false}
[props]
(let [label (obj/get props "label")
- tag-name (obj/get props "tag-name" "p")]
- [:> tag-name {:dangerouslySetInnerHTML #js {:__html (tr label)}}]))
+ tag-name (obj/get props "tag-name" "p")
+ params (obj/get props "params" [])
+ html (apply tr (d/concat-vec [label] params))]
+ [:> tag-name {:dangerouslySetInnerHTML #js {:__html html}}]))
;; DEPRECATED
(defn use-locale
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index b2fcc11b2..2efb27fc2 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -168,10 +168,14 @@ msgid "auth.terms-of-service"
msgstr "Terms of service"
#: src/app/main/ui/auth/register.cljs
+#, markdown
+msgid "auth.terms-privacy-agreement-md"
+msgstr ""
+"When creating a new account, you agree to our [terms of service](%s) and [privacy policy](%s)."
+
msgid "auth.terms-privacy-agreement"
msgstr ""
-"When creating a new account, you agree to our terms of service and privacy "
-"policy."
+"When creating a new account, you agree to ourf terms of service and privacy policy."
#: src/app/main/ui/auth/register.cljs
msgid "auth.verification-email-sent"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 6a1d1c5fa..2b332da79 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -173,10 +173,14 @@ msgid "auth.terms-of-service"
msgstr "Términos de servicio"
#: src/app/main/ui/auth/register.cljs
+#, markdown
+msgid "auth.terms-privacy-agreement-md"
+msgstr ""
+"Al crear una nueva cuenta, aceptas nuestros [términos de servicio](%s) y [política de privacidad](%s)."
+
msgid "auth.terms-privacy-agreement"
msgstr ""
-"Al crear una nueva cuenta, aceptas nuestros términos de servicio y política "
-"de privacidad."
+"Al crear una nueva cuenta, aceptas nuestros [términos de servicio](%s) y [política de privacidad](%s)."
#: src/app/main/ui/auth/register.cljs
msgid "auth.verification-email-sent"
From c601cca288d4356efdebd48587c251929c776047 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 30 Nov 2023 15:58:12 +0100
Subject: [PATCH 3/4] :sparkles: Improve design of input fields
---
.../styles/common/refactor/design-tokens.scss | 1 +
frontend/src/app/main/ui/auth/recovery.cljs | 2 +
frontend/src/app/main/ui/auth/register.cljs | 3 +
.../src/app/main/ui/components/forms.cljs | 63 ++++++++++---------
.../src/app/main/ui/components/forms.scss | 60 +++++++++++++++++-
.../app/main/ui/settings/access_tokens.cljs | 1 +
.../app/main/ui/settings/change_email.cljs | 2 +
.../src/app/main/ui/settings/feedback.cljs | 3 +-
.../src/app/main/ui/settings/password.cljs | 2 +
.../src/app/main/ui/settings/profile.cljs | 1 -
10 files changed, 106 insertions(+), 32 deletions(-)
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index ff35b9635..c68d1d650 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -151,6 +151,7 @@
--input-foreground-color-disabled: var(--color-foreground-secondary);
--input-border-color-disabled: var(--color-background-quaternary);
--input-border-color-error: var(--error-color);
+ --input-border-color-success: var(--color-accent-primary);
--input-details-color: var(--color-background-primary);
--input-checkbox-background-color-rest: var(--color-background-quaternary);
--input-checkbox-border-color-active: var(--color-background-quaternary);
diff --git a/frontend/src/app/main/ui/auth/recovery.cljs b/frontend/src/app/main/ui/auth/recovery.cljs
index 7925de065..e8828c003 100644
--- a/frontend/src/app/main/ui/auth/recovery.cljs
+++ b/frontend/src/app/main/ui/auth/recovery.cljs
@@ -68,12 +68,14 @@
[:div {:class (stl/css :fields-row)}
[:& fm/input {:type "password"
:name :password-1
+ :show-success? true
:label (tr "auth.new-password")
:class (stl/css :form-field)}]]
[:div {:class (stl/css :fields-row)}
[:& fm/input {:type "password"
:name :password-2
+ :show-success? true
:label (tr "auth.confirm-password")
:class (stl/css :form-field)}]]
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 01b25fd32..da8f5277a 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -121,11 +121,13 @@
:name :email
:label (tr "auth.email")
:data-test "email-input"
+ :show-success? true
:class (stl/css :form-field)}]]
[:div {:class (stl/css :fields-row)}
[:& fm/input {:name :password
:hint (tr "auth.password-length-hint")
:label (tr "auth.password")
+ :show-success? true
:type "password"
:class (stl/css :form-field)}]]
@@ -310,6 +312,7 @@
[:& fm/input {:name :fullname
:label (tr "auth.fullname")
:type "text"
+ :show-success? true
:class (stl/css :form-field)}]]
(when (contains? cf/flags :terms-and-privacy-checkbox)
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index fc6db4641..11b633cc8 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -27,8 +27,9 @@
(def use-form fm/use-form)
(mf/defc input
- [{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder] :as props}]
+ [{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
+
input-type (get props :type "text")
input-name (get props :name)
more-classes (get props :class)
@@ -65,25 +66,6 @@
on-change-value (or on-change-value (constantly nil))
- klass (str more-classes " "
- (dom/classnames
- :focus @focus?
- :valid (and touched? (not error))
- :invalid (and touched? error)
- :disabled disabled
- :empty (and is-text? (str/empty? value))
- :with-icon (not (nil? help-icon'))
- :custom-input is-text?
- :input-radio is-radio?
- :input-checkbox is-checkbox?))
-
- new-classes (dm/str more-classes " "
- (stl/css-case
- :input-wrapper true
- :global/invalid (and touched? error)
- :checkbox is-checkbox?
- :global/disabled disabled))
-
swap-text-password
(fn []
(swap! type' (fn [input-type]
@@ -100,9 +82,7 @@
on-blur
(fn [_]
- (reset! focus? false)
- (when-not (get-in @form [:touched input-name])
- (swap! form assoc-in [:touched input-name] true)))
+ (reset! focus? false))
on-click
(fn [_]
@@ -126,10 +106,19 @@
(cond-> (and value is-checkbox?) (assoc :default-checked value))
(cond-> (and touched? (:message error)) (assoc "aria-invalid" "true"
"aria-describedby" (dm/str "error-" input-name)))
- (obj/clj->props))]
+ (obj/clj->props))
+
+ show-valid? (and show-success? touched? (not error))
+ show-invalid? (and touched? error)]
(if new-css-system
- [:div {:class new-classes}
+ [:div {:class (dm/str more-classes " "
+ (stl/css-case
+ :input-wrapper true
+ :valid show-valid?
+ :invalid show-invalid?
+ :checkbox is-checkbox?
+ :disabled disabled))}
[:*
(cond
(some? label)
@@ -152,7 +141,15 @@
[:span {:class (stl/css :help-icon)
:on-click (when (= "password" input-type)
swap-text-password)}
- help-icon'])])]
+ help-icon'])
+
+ (when show-valid?
+ [:span {:class (stl/css :valid-icon)}
+ i/tick-refactor])
+
+ (when show-invalid?
+ [:span {:class (stl/css :invalid-icon)}
+ i/close-refactor])])]
(some? children)
[:label {:for (name input-name)}
@@ -171,9 +168,19 @@
(string? hint)
[:div {:class (stl/css :hint)} hint])]]
-
+ ;;OLD
[:div
- {:class klass}
+ {:class (str more-classes " "
+ (dom/classnames
+ :focus @focus?
+ :valid (and touched? (not error))
+ :invalid (and touched? error)
+ :disabled disabled
+ :empty (and is-text? (str/empty? value))
+ :with-icon (not (nil? help-icon'))
+ :custom-input is-text?
+ :input-radio is-radio?
+ :input-checkbox is-checkbox?))}
[:*
[:> :input props]
(cond
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index d6e9af1fb..2bb900528 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -51,12 +51,31 @@
caret-color: var(--input-foreground-color-active);
}
}
- &:global(.invalid) {
+ &.valid {
+ input {
+ border: $s-1 solid var(--input-border-color-success);
+ @extend .disabled-input;
+ &:hover,
+ &:focus {
+ border: $s-1 solid var(--input-border-color-success);
+ }
+ }
+ }
+ &.invalid {
input {
border: $s-1 solid var(--input-border-color-error);
@extend .disabled-input;
+ &:hover,
+ &:focus {
+ border: $s-1 solid var(--input-border-color-error);
+ }
}
}
+
+ &.valid .help-icon,
+ &.invalid .help-icon {
+ right: $s-40;
+ }
}
.input-and-icon {
@@ -69,7 +88,7 @@
.help-icon {
cursor: pointer;
position: absolute;
- right: $s-12;
+ right: $s-16;
top: calc(50% - $s-8);
svg {
@extend .button-icon-small;
@@ -78,6 +97,43 @@
height: $s-16;
}
}
+.invalid-icon {
+ width: $s-16;
+ height: $s-16;
+ background: var(--input-border-color-error);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: $s-16;
+ top: calc(50% - $s-8);
+ svg {
+ width: $s-12;
+ height: $s-12;
+ stroke: var(--input-background-color);
+ }
+}
+
+.valid-icon {
+ width: $s-16;
+ height: $s-16;
+ background: var(--input-border-color-success);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: $s-16;
+ top: calc(50% - $s-8);
+ svg {
+ width: $s-12;
+ height: $s-12;
+ fill: var(--input-border-color-success);
+ stroke: var(--input-background-color);
+ }
+}
+
.error {
color: var(--input-border-color-error);
width: 100%;
diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs
index de1ec0a7c..a044455ae 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.cljs
+++ b/frontend/src/app/main/ui/settings/access_tokens.cljs
@@ -126,6 +126,7 @@
:name :name
:disabled @created?
:label (tr "modals.create-access-token.name.label")
+ :show-success? true
:placeholder (tr "modals.create-access-token.name.placeholder")}]]
[:div {:class (stl/css :fields-row)}
diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs
index 391fa4475..6cd6ae69f 100644
--- a/frontend/src/app/main/ui/settings/change_email.cljs
+++ b/frontend/src/app/main/ui/settings/change_email.cljs
@@ -122,6 +122,7 @@
:name :email-1
:label (tr "modals.change-email.new-email")
:trim true
+ :show-success? true
:on-change-value on-email-change}]]
[:div {:class (stl/css :fields-row)}
@@ -129,6 +130,7 @@
:name :email-2
:label (tr "modals.change-email.confirm-email")
:trim true
+ :show-success? true
:on-change-value on-email-change}]]]
[:div {:class (stl/css :modal-footer)}
diff --git a/frontend/src/app/main/ui/settings/feedback.cljs b/frontend/src/app/main/ui/settings/feedback.cljs
index d59185f13..d8e41518b 100644
--- a/frontend/src/app/main/ui/settings/feedback.cljs
+++ b/frontend/src/app/main/ui/settings/feedback.cljs
@@ -73,7 +73,8 @@
[:div {:class (stl/css :fields-row)}
[:& fm/input {:label (tr "feedback.subject")
- :name :subject}]]
+ :name :subject
+ :show-success? true}]]
[:div {:class (stl/css :fields-row :description)}
[:& fm/textarea
{:label (tr "feedback.description")
diff --git a/frontend/src/app/main/ui/settings/password.cljs b/frontend/src/app/main/ui/settings/password.cljs
index 1d868b08c..0b9b1b5a0 100644
--- a/frontend/src/app/main/ui/settings/password.cljs
+++ b/frontend/src/app/main/ui/settings/password.cljs
@@ -95,12 +95,14 @@
[:& fm/input
{:type "password"
:name :password-1
+ :show-success? true
:label (t locale "labels.new-password")}]]
[:div {:class (stl/css :fields-row)}
[:& fm/input
{:type "password"
:name :password-2
+ :show-success? true
:label (t locale "labels.confirm-password")}]]
[:> fm/submit-button*
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index a6bb4ad30..b946b6846 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -75,7 +75,6 @@
{:type "email"
:name :email
:disabled true
- :help-icon i/at
:label (tr "dashboard.your-email")}]
[:div {:class (stl/css :options)}
From 668f44314930ab790558fbc7c520ca7c44b83161 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 30 Nov 2023 16:43:49 +0100
Subject: [PATCH 4/4] :sparkles: Add code highlight dark and light modes
---
.../common/refactor/themes/default-theme.scss | 4 +
.../refactor/themes/hljs-dark-theme.scss | 98 +++++++++++++++++++
.../refactor/themes/hljs-light-theme.scss | 94 ++++++++++++++++++
.../common/refactor/themes/light-theme.scss | 4 +
frontend/src/app/main/ui/auth/common.scss | 20 ++--
.../app/main/ui/components/code_block.cljs | 8 +-
.../app/main/ui/components/code_block.scss | 2 +
.../src/app/main/ui/workspace/sidebar.cljs | 4 +-
8 files changed, 223 insertions(+), 11 deletions(-)
create mode 100644 frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
create mode 100644 frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index cfbead3b8..f5d10bad9 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -4,6 +4,8 @@
//
// Copyright (c) KALEIDOS INC
+@use "sass:meta";
+
:root {
--color-background-primary: var(--dark-gray-1);
--color-background-secondary: var(--dark-gray-2);
@@ -25,4 +27,6 @@
--pending-color: var(--dark-pending-color);
--error-color: var(--dark-error-color);
--canvas-color: var(--color-canvas);
+
+ @include meta.load-css("hljs-dark-theme");
}
diff --git a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
new file mode 100644
index 000000000..5ae417d47
--- /dev/null
+++ b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss
@@ -0,0 +1,98 @@
+/**
+ * Panda Syntax Theme for Highlight.js
+ * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+ * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+ */
+
+.hljs {
+ color: #e6e6e6;
+ background: #2a2c2d;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #bbbbbb;
+ font-style: italic;
+}
+
+.hljs-params {
+ color: #bbbbbb;
+}
+
+.hljs-punctuation,
+.hljs-attr {
+ color: #e6e6e6;
+}
+
+.hljs-selector-tag,
+.hljs-name,
+.hljs-meta {
+ color: #ff4b82;
+}
+
+.hljs-operator,
+.hljs-char.escape_ {
+ color: #b084eb;
+}
+
+.hljs-keyword,
+.hljs-deletion {
+ color: #ff75b5;
+}
+
+.hljs-regexp,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_ {
+ color: #ff9ac1;
+}
+
+.hljs-subst,
+.hljs-property,
+.hljs-code,
+.hljs-formula,
+.hljs-section,
+.hljs-title.function_ {
+ color: #45a9f9;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-selector-class,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-meta .hljs-string {
+ color: #19f9d8;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-link,
+.hljs-built_in,
+.hljs-title,
+.hljs-selector-id,
+.hljs-tag,
+.hljs-doctag,
+.hljs-attribute,
+.hljs-template-tag,
+.hljs-meta .hljs-keyword,
+.hljs-punctuation {
+ color: #ffb86c;
+}
diff --git a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
new file mode 100644
index 000000000..615abdd13
--- /dev/null
+++ b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss
@@ -0,0 +1,94 @@
+/**
+ * Panda Syntax Theme for Highlight.js
+ * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+ * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+ */
+
+.hljs {
+ color: #2a2c2d;
+ background: #e6e6e6;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #676b79;
+ font-style: italic;
+}
+
+.hljs-params {
+ color: #676b79;
+}
+
+.hljs-punctuation,
+.hljs-attr {
+ color: #2a2c2d;
+}
+
+.hljs-selector-tag,
+.hljs-name,
+.hljs-meta,
+.hljs-operator,
+.hljs-char.escape_ {
+ color: #c56200;
+}
+
+.hljs-keyword,
+.hljs-deletion {
+ color: #d92792;
+}
+
+.hljs-regexp,
+.hljs-selector-pseudo,
+.hljs-selector-attr,
+.hljs-variable.language_ {
+ color: #cc5e91;
+}
+
+.hljs-subst,
+.hljs-property,
+.hljs-code,
+.hljs-formula,
+.hljs-section,
+.hljs-title.function_ {
+ color: #3787c7;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-selector-class,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-meta .hljs-string {
+ color: #0d7d6c;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-number,
+.hljs-literal,
+.hljs-type,
+.hljs-link,
+.hljs-built_in,
+.hljs-title,
+.hljs-selector-id,
+.hljs-tag,
+.hljs-doctag,
+.hljs-attribute,
+.hljs-template-tag,
+.hljs-meta .hljs-keyword {
+ color: #7641bb;
+}
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 8c7698ddd..60c904f10 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -4,6 +4,8 @@
//
// Copyright (c) KALEIDOS INC
+@use "sass:meta";
+
.light {
--color-background-primary: var(--light-gray-1);
--color-background-secondary: var(--light-gray-2);
@@ -24,4 +26,6 @@
--pending-color: var(--light-pending-color);
--error-color: var(--light-error-color);
--canvas-color: var(--color-canvas);
+
+ @include meta.load-css("hljs-light-theme");
}
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index a873332af..0bec2bf2d 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -40,13 +40,19 @@
--input-min-width: 100%;
}
-.buttons-stack button,
-.buttons-stack :global(.btn-primary) {
- @extend .button-primary;
- font-size: $fs-11;
- height: $s-40;
- text-transform: uppercase;
- width: 100%;
+.buttons-stack {
+ display: flex;
+ flex-direction: column;
+ gap: $s-8;
+
+ button,
+ :global(.btn-primary) {
+ @extend .button-primary;
+ font-size: $fs-11;
+ height: $s-40;
+ text-transform: uppercase;
+ width: 100%;
+ }
}
.link-entry {
diff --git a/frontend/src/app/main/ui/components/code_block.cljs b/frontend/src/app/main/ui/components/code_block.cljs
index 9bef8150c..69a54a656 100644
--- a/frontend/src/app/main/ui/components/code_block.cljs
+++ b/frontend/src/app/main/ui/components/code_block.cljs
@@ -10,16 +10,20 @@
["highlight.js" :as hljs]
[app.common.data.macros :as dm]
[app.main.ui.context :as ctx]
+ [cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc code-block
{::mf/wrap-props false}
[{:keys [code type]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
- block-ref (mf/use-ref)]
+ block-ref (mf/use-ref)
+ code (str/trim code)]
(mf/with-effect [code type]
(when-let [node (mf/ref-val block-ref)]
(hljs/highlightElement node)))
- [:pre {:class (dm/str type " " (stl/css new-css-system :code-display)) :ref block-ref} code]))
+ (if new-css-system
+ [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]
+ [:pre {:class (dm/str type " " "code-display") :ref block-ref} code])))
diff --git a/frontend/src/app/main/ui/components/code_block.scss b/frontend/src/app/main/ui/components/code_block.scss
index 1b8e72a4d..49d63fda1 100644
--- a/frontend/src/app/main/ui/components/code_block.scss
+++ b/frontend/src/app/main/ui/components/code_block.scss
@@ -7,8 +7,10 @@
@import "refactor/common-refactor.scss";
.code-display {
+ user-select: text;
border-radius: $br-8;
margin-top: $s-8;
padding: $s-12;
background-color: var(--menu-background-color);
+ overflow: auto;
}
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 54d914886..e0433a176 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -196,8 +196,8 @@
(obj/set! "on-expand" handle-expand))]
[:aside {:class (stl/css-case new-css-system
- :global/settings-bar true
- :global/settings-bar-right true
+ :global/settings-bar (not new-css-system)
+ :global/settings-bar-right (not new-css-system)
:right-settings-bar true
:not-expand (not can-be-expanded?)
:expanded (> size 276))