From 3f210ed3f6fc266142d52474ecf472654f9a6e37 Mon Sep 17 00:00:00 2001
From: Saurabh Sircar <saurabhsircar11@gmail.com>
Date: Wed, 11 Dec 2024 20:59:00 +0530
Subject: [PATCH 1/4] feat: design fixes

---
 libs/blocks/locui-create/input-locale/view.js |  2 +-
 libs/blocks/locui-create/input-urls/view.js   |  6 +--
 libs/blocks/locui-create/locui-create.css     | 37 ++++++++++++-------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/libs/blocks/locui-create/input-locale/view.js b/libs/blocks/locui-create/input-locale/view.js
index 49e32c5bfc..6081f3ed17 100644
--- a/libs/blocks/locui-create/input-locale/view.js
+++ b/libs/blocks/locui-create/input-locale/view.js
@@ -119,7 +119,7 @@ export default function InputLocales() {
     <div class="locui-form-body">
         <div>
           <h2 class="locui-project-type">${project.value.type === LOCALIZATION_TYPES.translation ? 'Translate' : 'Rollout'}</h2>
-          <p class="locui-project-name"><strong>Project Name:</strong> ${project.value.name || 'n/a'}</p>
+          <p class="locui-project-name">Project Name:<strong> ${project.value.name || 'n/a'}</strong></p>
         </div>
         <${RenderRegion} />
         <div class="language-locale-container">
diff --git a/libs/blocks/locui-create/input-urls/view.js b/libs/blocks/locui-create/input-urls/view.js
index 989b5e8d02..2f1cae4139 100644
--- a/libs/blocks/locui-create/input-urls/view.js
+++ b/libs/blocks/locui-create/input-urls/view.js
@@ -206,7 +206,7 @@ export default function InputUrls() {
           <span>- ${type.substring(0, 1).toUpperCase() + type.substring(1)}</span>
         </div>
         <div class="locui-form-body">
-          <div class="segment-ctrl pb-12">
+          <div class="segment-ctrl">
             <div
               class=${`${type === 'translation' && 'active'}`}
               onclick=${() => handleTypeChange('translation')}
@@ -270,14 +270,14 @@ export default function InputUrls() {
             </div>
           `}
 
-          <div class="form-field pb-4">
+          <div class="form-field pb-8">
             <div class="form-field-label">* Enter the URLs</div>
             <div class="form-field-desc">
               (for multiple URLs, enter each on a new line.)
             </div>
           </div>
           <textarea
-            class=${`form-field-textarea ${errors.urlsStr && 'error'}`}
+            class=${`form-field-textarea ${errors.urlsStr && 'error'} pl-14`}
             rows="10"
             value=${urlsStr}
             onInput=${handleUrlsChange}
diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css
index d5ffbf8e90..b98aa79f74 100644
--- a/libs/blocks/locui-create/locui-create.css
+++ b/libs/blocks/locui-create/locui-create.css
@@ -95,7 +95,7 @@ body {
   font-size: 22px;
   font-weight: 700;
   padding: 16px 16px 16px 30px;
-  margin-bottom: 16px;
+  margin-bottom: 2.5rem;
   background: #e5e5e5;
 }
 
@@ -146,6 +146,7 @@ body {
 .segment-ctrl {
   display: flex;
   font-size: 16px;
+  padding-bottom: 30px;
 }
 
 .segment-ctrl > div {
@@ -486,7 +487,7 @@ body {
   border-width: 2px;
   list-style: none;
   padding-bottom: 1rem;
-  padding-inline-start: 0.5rem;
+  padding-inline-start: 0.875rem;
   margin-bottom: 0;
 }
 
@@ -545,6 +546,7 @@ body {
 .locui-create-fragment-label {
   font-size: 1.125rem;
   font-weight: 700;
+  margin-left: 0.5rem;
 }
 
 .locui-create-fragment-parent {
@@ -691,7 +693,6 @@ body {
   text-decoration: none;
 }
 
-
 .locale-list-item {
   border: 2px solid #8f8e8e;
   border-radius: 20px;
@@ -758,33 +759,30 @@ body {
 .region-buttons {
   margin-bottom: 30px;
 }
+
 .language-grid,
 .locale-grid {
   flex: 1;
   min-height: 200px;
-}
-
-.region-grid,
-.language-grid,
-.locale-grid {
-  margin-top: 10px;
+  margin-top: 24px;
 }
 
 .region-grid {
-  padding: 10px;
+  padding: 20px;
   border: 1px solid #ccc;
   border-radius: 8px;
+  margin-top: 10px;
 }
 
 .region-buttons,.additional-cta {
   display: flex;
-  gap:10px
+  gap:20px
 }
  
 .section-header {
   font-size: 16px;
   font-weight: bold;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 
 
@@ -805,8 +803,8 @@ body {
 .language-buttons {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 10px;
-  padding: 10px;
+  gap: 20px;
+  padding: 20px;
   border: 1px solid #ccc;
   border-radius: 8px;
   max-height: 350px;
@@ -858,12 +856,23 @@ body {
 .pl-8 {
   padding-left: 8px;
 }
+
 .pb-4 {
   padding-bottom: 4px;
 }
+
 .pb-12 {
   padding-bottom: 12px;
 }
+
 .m-0 {
   margin: 0;
 }
+
+.pb-8 {
+  padding-bottom: 8px;
+}
+
+.pl-14 {
+  padding-left: 14px;
+}

From eed25185476327cad998b7aa45e9d981aa93c13b Mon Sep 17 00:00:00 2001
From: Saurabh Sircar <saurabhsircar11@gmail.com>
Date: Wed, 11 Dec 2024 21:08:04 +0530
Subject: [PATCH 2/4] feat: added padding for next and back button

---
 libs/blocks/locui-create/locui-create.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css
index b98aa79f74..2eaaed5bac 100644
--- a/libs/blocks/locui-create/locui-create.css
+++ b/libs/blocks/locui-create/locui-create.css
@@ -88,7 +88,7 @@ body {
 .locui-step-controls {
   display: flex;
   justify-content: space-between;
-  padding: 16px;
+  padding: 16px 28px;
 }
 
 .locui-title-bar {

From 434b5840b4509a30466259bb0bea759f699b29b8 Mon Sep 17 00:00:00 2001
From: Saurabh Sircar <saurabhsircar11@gmail.com>
Date: Wed, 11 Dec 2024 21:13:11 +0530
Subject: [PATCH 3/4] feat: added padding

---
 libs/blocks/locui-create/locui-create.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css
index 2eaaed5bac..466a421435 100644
--- a/libs/blocks/locui-create/locui-create.css
+++ b/libs/blocks/locui-create/locui-create.css
@@ -646,7 +646,7 @@ body {
 
 .locui-table p {
   margin: 0;
-  padding-bottom: 10px;
+  padding-bottom: 1.875rem;
 }
 
 .locui-table td,

From a4314b9c78c8fa5532543ecd3c46f1e9df10abcb Mon Sep 17 00:00:00 2001
From: Saurabh Sircar <saurabhsircar11@gmail.com>
Date: Mon, 16 Dec 2024 14:11:02 +0530
Subject: [PATCH 4/4] feat: sorted languages alphabetically

---
 libs/blocks/locui-create/input-locale/index.js | 3 ++-
 libs/blocks/locui-create/utils/utils.js        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/blocks/locui-create/input-locale/index.js b/libs/blocks/locui-create/input-locale/index.js
index 128783c960..6d1c90704a 100644
--- a/libs/blocks/locui-create/input-locale/index.js
+++ b/libs/blocks/locui-create/input-locale/index.js
@@ -177,7 +177,8 @@ export default function useInputLocale() {
 
   const handleNext = async () => {
     if (!errorPresent()) return;
-    const sortedLanguages = transformActiveLocales().sort((a, b) => a.language - b.language);
+    const sortedLanguages = transformActiveLocales()
+      .sort((a, b) => a.language.localeCompare(b.language));
     setProject({ languages: prefillActionAndWorkflow(sortedLanguages) });
     setLocale({ selectedRegion, selectedLocale, activeLocales });
 
diff --git a/libs/blocks/locui-create/utils/utils.js b/libs/blocks/locui-create/utils/utils.js
index 7f79593dee..3513923bc4 100644
--- a/libs/blocks/locui-create/utils/utils.js
+++ b/libs/blocks/locui-create/utils/utils.js
@@ -27,7 +27,7 @@ export function processLocaleData(localeData) {
         .split(',')
         .map((loc) => loc.trim())
         .join(','),
-    }));
+    })).sort((a, b) => a.language.localeCompare(b.language));
 
   const processedLocaleRegion = localeData.localegroups.data.map((item) => ({
     ...item,