diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc
index 8309afa9d..8c983341d 100644
--- a/common/src/app/common/types/shape/layout.cljc
+++ b/common/src/app/common/types/shape/layout.cljc
@@ -9,10 +9,13 @@
[app.common.spec :as us]
[clojure.spec.alpha :as s]))
-(s/def ::layout boolean?)
-(s/def ::layout-dir #{:right :left :top :bottom})
+(s/def ::layout #{:flex :grid})
+(s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column})
+(s/def ::layout-gap-type #{:simple :multiple})
(s/def ::layout-gap ::us/safe-number)
-(s/def ::layout-type #{:packed :space-between :space-around})
+(s/def ::layout-align-items #{:start :end :center :strech})
+(s/def ::layout-align-content #{:start :end :center :space-between :space-around :strech})
+(s/def ::layout-justify-content #{:start :center :end :space-between :space-around})
(s/def ::layout-wrap-type #{:wrap :no-wrap})
(s/def ::layout-padding-type #{:simple :multiple})
@@ -25,19 +28,24 @@
(s/keys :req-un [::p1]
:opt-un [::p2 ::p3 ::p4]))
-(s/def ::layout-h-orientation #{:left :center :right})
-(s/def ::layout-v-orientation #{:top :center :bottom})
+(s/def ::row-gap ::us/safe-number)
+(s/def ::column-gap ::us/safe-number)
+
+(s/def ::layout-gap
+ (s/keys :req-un [::row-gap ::column-gap]))
(s/def ::layout-container-props
(s/keys :opt-un [::layout
- ::layout-dir
+ ::layout-flex-dir
::layout-gap
+ ::layout-gap-type
::layout-type
::layout-wrap-type
::layout-padding-type
::layout-padding
- ::layout-h-orientation
- ::layout-v-orientation]))
+ ::layout-justify-content
+ ::layout-align-items
+ ::layout-align-content]))
(s/def ::m1 ::us/safe-number)
(s/def ::m2 ::us/safe-number)
@@ -50,6 +58,7 @@
(s/def ::layout-margin-type #{:simple :multiple})
(s/def ::layout-h-behavior #{:fill :fix :auto})
(s/def ::layout-v-behavior #{:fill :fix :auto})
+(s/def ::layout-align-self #{:start :end :center :strech :baseline})
(s/def ::layout-max-h ::us/safe-number)
(s/def ::layout-min-h ::us/safe-number)
(s/def ::layout-max-w ::us/safe-number)
@@ -63,4 +72,5 @@
::layout-max-h
::layout-min-h
::layout-max-w
- ::layout-min-w]))
+ ::layout-min-w
+ ::layout-align-self]))
diff --git a/frontend/resources/images/icons/align-content-column-around.svg b/frontend/resources/images/icons/align-content-column-around.svg
new file mode 100644
index 000000000..d7f54514a
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-column-around.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-column-between.svg b/frontend/resources/images/icons/align-content-column-between.svg
new file mode 100644
index 000000000..f07dbe1db
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-column-between.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-column-center.svg b/frontend/resources/images/icons/align-content-column-center.svg
new file mode 100644
index 000000000..56317ce06
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-column-center.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-column-end.svg b/frontend/resources/images/icons/align-content-column-end.svg
new file mode 100644
index 000000000..eab99cd62
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-column-end.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-column-start.svg b/frontend/resources/images/icons/align-content-column-start.svg
new file mode 100644
index 000000000..d3490501f
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-column-start.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-row-around.svg b/frontend/resources/images/icons/align-content-row-around.svg
new file mode 100644
index 000000000..f49bb584f
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-row-around.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-row-between.svg b/frontend/resources/images/icons/align-content-row-between.svg
new file mode 100644
index 000000000..6723db3d9
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-row-between.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-row-center.svg b/frontend/resources/images/icons/align-content-row-center.svg
new file mode 100644
index 000000000..b318cd9d2
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-row-center.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-row-end.svg b/frontend/resources/images/icons/align-content-row-end.svg
new file mode 100644
index 000000000..56aecaae9
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-row-end.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-content-row-start.svg b/frontend/resources/images/icons/align-content-row-start.svg
new file mode 100644
index 000000000..d666646cf
--- /dev/null
+++ b/frontend/resources/images/icons/align-content-row-start.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-column-baseline.svg b/frontend/resources/images/icons/align-items-column-baseline.svg
new file mode 100644
index 000000000..862f7afd1
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-column-baseline.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-column-center.svg b/frontend/resources/images/icons/align-items-column-center.svg
new file mode 100644
index 000000000..e35973436
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-column-center.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-column-end.svg b/frontend/resources/images/icons/align-items-column-end.svg
new file mode 100644
index 000000000..7bdb1d632
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-column-end.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-column-start.svg b/frontend/resources/images/icons/align-items-column-start.svg
new file mode 100644
index 000000000..5c231d486
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-column-start.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-column-strech.svg b/frontend/resources/images/icons/align-items-column-strech.svg
new file mode 100644
index 000000000..dd441d93f
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-column-strech.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-row-baseline.svg b/frontend/resources/images/icons/align-items-row-baseline.svg
new file mode 100644
index 000000000..b8b397e0a
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-row-baseline.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-row-center.svg b/frontend/resources/images/icons/align-items-row-center.svg
new file mode 100644
index 000000000..a07e43a47
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-row-center.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-row-end.svg b/frontend/resources/images/icons/align-items-row-end.svg
new file mode 100644
index 000000000..ddeb660a1
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-row-end.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-row-start.svg b/frontend/resources/images/icons/align-items-row-start.svg
new file mode 100644
index 000000000..69516fc68
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-row-start.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-items-row-strech.svg b/frontend/resources/images/icons/align-items-row-strech.svg
new file mode 100644
index 000000000..22b308e14
--- /dev/null
+++ b/frontend/resources/images/icons/align-items-row-strech.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-column-baseline.svg b/frontend/resources/images/icons/align-self-column-baseline.svg
new file mode 100644
index 000000000..4ed4d6357
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-column-baseline.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-column-bottom.svg b/frontend/resources/images/icons/align-self-column-bottom.svg
new file mode 100644
index 000000000..6ef7f1e75
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-column-bottom.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-column-center.svg b/frontend/resources/images/icons/align-self-column-center.svg
new file mode 100644
index 000000000..c45bfb53f
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-column-center.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-column-strech.svg b/frontend/resources/images/icons/align-self-column-strech.svg
new file mode 100644
index 000000000..5803cb447
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-column-strech.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-column-top.svg b/frontend/resources/images/icons/align-self-column-top.svg
new file mode 100644
index 000000000..67adbc722
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-column-top.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-row-baseline.svg b/frontend/resources/images/icons/align-self-row-baseline.svg
new file mode 100644
index 000000000..db2660684
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-row-baseline.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-row-center.svg b/frontend/resources/images/icons/align-self-row-center.svg
new file mode 100644
index 000000000..df911a89c
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-row-center.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-row-left.svg b/frontend/resources/images/icons/align-self-row-left.svg
new file mode 100644
index 000000000..7ff6caee1
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-row-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-row-right.svg b/frontend/resources/images/icons/align-self-row-right.svg
new file mode 100644
index 000000000..665e7b562
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-row-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/align-self-row-strech.svg b/frontend/resources/images/icons/align-self-row-strech.svg
new file mode 100644
index 000000000..426db52b5
--- /dev/null
+++ b/frontend/resources/images/icons/align-self-row-strech.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/resources/images/icons/auto-direction.svg b/frontend/resources/images/icons/auto-direction.svg
index d002174b6..3429588fe 100644
--- a/frontend/resources/images/icons/auto-direction.svg
+++ b/frontend/resources/images/icons/auto-direction.svg
@@ -1,3 +1,3 @@
diff --git a/frontend/resources/images/icons/auto-fix.svg b/frontend/resources/images/icons/auto-fix.svg
index 38c4d54e8..f2be41986 100644
--- a/frontend/resources/images/icons/auto-fix.svg
+++ b/frontend/resources/images/icons/auto-fix.svg
@@ -1,3 +1,3 @@
-