Refactor both BE and FE

client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue

@@ -10,23 +10,24 @@
       </h3>
     </template>
 
-    <b-row class="mx-2">
+    <b-row>
       <b-col
         v-for="key in Object.keys(brandingVariables)"
         :key="key"
-        cols="6"
+        md="6"
+        cols="12"
         class="p-2"
       >
         <b-form-group
           :label="$t(`brandVariables.${key}`)"
-          class="row px-3"
+          label-class="primary"
         >
           <c-input-color-picker
             v-model="brandingVariables[key]"
             :data-test-id="`input-${key}-color`"
-            width="24px"
-            height="24px"
-            :show-color-code-text="true"
+            width="32px"
+            height="32px"
+            show-color-code-text
             :translations="colorTranslations"
           />
         </b-form-group>

lib/vue/src/components/input/CInputColorPicker.vue

@@ -47,10 +47,10 @@
               r="16"
             />
           </svg>
-        </b-button>
-        <span v-if="showColorCodeText" class="ml-2">
-          {{ value }}
-        </span>
+      </b-button>
+      <span v-if="showColorCodeText" class="ml-2">
+        {{ value }}
+      </span>
     </div>
     <b-modal
       :visible="showModal"
@@ -107,7 +107,6 @@ export default {
     showColorCodeText: {
       type: Boolean,
       default: false,
-      required: false,
     }
   },
 

server/app/options/webapp.cue

@@ -8,7 +8,7 @@ webapp: schema.#optionsGroup & {
 	handle: "webapp"
 
 	options: {
-		SCSS_dir_path: {
+		scss_dir_path: {
 			description:  "Path to custom SCSS source files directory"
 		}
 	}

server/assets/embed.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io/fs"
 	"os"
+	"path"
 
 	"go.uber.org/zap"
 )
@@ -68,7 +69,7 @@ func fromPath(path string) (assets fs.FS, err error) {
 }
 
 func DirEntries(dir string) (fileNames, subDirs []string, err error) {
-	dirEntries, err := fs.ReadDir(ff, "src/"+dir)
+	dirEntries, err := fs.ReadDir(ff, path.Join("src", dir))
 	if err != nil {
 		return nil, nil, err
 	}

server/assets/src/scss/18182031_webapp_variable.scss

@@ -124,6 +124,7 @@ $corteza-specific: map-merge(
     "font-regular": $font-regular,
     "font-semibold": $font-semibold,
     "font-family-base": $font-family-base,
+    "font-medium": $font-medium,
     "btn-font-family": $btn-font-family,
     "btn-padding-x": $btn-padding-x,
     "btn-padding-y": $btn-padding-y,

server/pkg/sass/processor.go

@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"path"
 	"regexp"
 	"strings"
 
@@ -15,7 +16,10 @@ import (
 	"go.uber.org/zap"
 )
 
-var stylesheet = newStylesheetCache()
+var (
+	stylesheet           = newStylesheetCache()
+	sassVariablesPattern = regexp.MustCompile(`(\$[a-zA-Z_-]+):\s*([^;]+);`)
+)
 
 // GenerateCSS takes care of creating CSS for webapps by reading SASS content from embedded assets,
 // combining it with brandingSass and customCSS, and then transpiling it using the dart-sass compiler.
@@ -40,84 +44,76 @@ func GenerateCSS(brandingSass, customCSS, sassDirPath string) (string, error) {
 	// if dart sass is not installed, or when the sass transpiler creation and startup process fails.
 	// return contents from default css
 	if transpiler == nil {
-		stringsBuilder.WriteString(defaultCSS())
-		if customCSS != "" {
-			stringsBuilder.WriteString(customCSS)
-		}
+		return defaultCSS(customCSS), nil
+	}
 
-		processedCSS := stringsBuilder.String()
+	err := func() error {
+		if brandingSass != "" {
+			err := jsonToSass(brandingSass, &stringsBuilder)
+			if err != nil {
+				logger.Default().Error("failed to unmarshal branding sass variables", zap.Error(err))
+				return err
+			}
+		}
 
-		stylesheet.set(
-			map[string]string{
-				"css":           processedCSS,
-				"branding-sass": str.HashStringSHA256(brandingSass),
-				"custom-css":    str.HashStringSHA256(customCSS),
-			},
-		)
+		if customCSS != "" {
+			// Get SASS variables from the custom CSS editor and give them precedence over branding variables
+			customVariables := sassVariablesPattern.FindAllString(customCSS, -1)
 
-		return processedCSS, nil
-	}
+			for _, customVariable := range customVariables {
+				stringsBuilder.WriteString(fmt.Sprintf("%s \n", customVariable))
+			}
+		}
 
-	if brandingSass != "" {
-		err := jsonToSass(brandingSass, &stringsBuilder)
+		// get Boostrap, bootstrap-vue and custom variables sass content
+		mainSass, err := readSassFiles("scss")
 		if err != nil {
-			logger.Default().Error("failed to unmarshal branding sass variables", zap.Error(err))
-			return defaultCSS(), err
+			return err
 		}
-	}
-
-	sassVariablesPattern := regexp.MustCompile(`(\$[a-zA-Z_-]+):\s*([^;]+);`)
-	if customCSS != "" {
-		// Get SASS variables from the custom CSS editor and give them precedence over branding variables
-		customVariables := sassVariablesPattern.FindAllString(customCSS, -1)
+		stringsBuilder.WriteString(mainSass)
 
-		for _, customVariable := range customVariables {
-			stringsBuilder.WriteString(fmt.Sprintf("%s \n", customVariable))
+		// when a user provides sets WEBAPP_SCSS_DIR_PATH environment variable
+		if sassDirPath != "" {
+			customSass, err := readSassFiles(sassDirPath)
+			if err != nil {
+				return err
+			}
+			stringsBuilder.WriteString(customSass)
 		}
-	}
 
-	// get Boostrap, bootstrap-vue and custom variables sass content
-	mainSass, err := readSassFiles("scss")
-	if err != nil {
-		return defaultCSS(), err
-	}
-	stringsBuilder.WriteString(mainSass)
+		if customCSS != "" {
+			//Custom CSS editor selector block
+			selectorBlock := sassVariablesPattern.ReplaceAllString(customCSS, "")
+			stringsBuilder.WriteString(selectorBlock)
+		}
 
-	if sassDirPath != "" {
-		customSass, err := readSassFiles(sassDirPath)
+		// compute sass content to CSS
+		args := godartsass.Args{
+			Source: stringsBuilder.String(),
+		}
+		execute, err := transpiler.Execute(args)
 		if err != nil {
-			return defaultCSS(), err
+			logger.Default().Error("sass compilation failure", zap.Error(err))
+			return err
 		}
-		stringsBuilder.WriteString(customSass)
-	}
 
-	if customCSS != "" {
-		//Custom CSS editor selector block
-		selectorBlock := sassVariablesPattern.ReplaceAllString(customCSS, "")
-		stringsBuilder.WriteString(selectorBlock)
-	}
+		// save computed css, branding-sass and custom-css to stylesheet in-memory cache
+		stylesheet.set(
+			map[string]string{
+				"css":           execute.CSS,
+				"branding-sass": str.HashStringSHA256(brandingSass),
+				"custom-css":    str.HashStringSHA256(customCSS),
+			},
+		)
+
+		return nil
+	}()
 
-	// compute sass content to CSS
-	args := godartsass.Args{
-		Source: stringsBuilder.String(),
-	}
-	execute, err := transpiler.Execute(args)
-	// if there's an error during compilation process, return contents from minified-custom.css
 	if err != nil {
-		logger.Default().Error("Sass syntax error", zap.Error(err))
-		return defaultCSS(), err
+		return defaultCSS(customCSS), err
 	}
 
-	// save computed css, branding-sass and custom-css to stylesheet in-memory cache
-	stylesheet.set(
-		map[string]string{
-			"css":           execute.CSS,
-			"branding-sass": str.HashStringSHA256(brandingSass),
-			"custom-css":    str.HashStringSHA256(customCSS),
-		},
-	)
-
-	return execute.CSS, nil
+	return stylesheet.get("css"), nil
 }
 
 func dartSass() *godartsass.Transpiler {
@@ -152,7 +148,7 @@ func readSassFiles(dirPath string) (string, error) {
 
 	if len(subDirs) > 0 {
 		for _, subDir := range subDirs {
-			sassContents, err := readSassFiles(dirPath + "/" + subDir)
+			sassContents, err := readSassFiles(path.Join(dirPath, subDir))
 			if err != nil {
 				return "", err
 			}
@@ -167,7 +163,7 @@ func readSassContents(dirPath string, filenames []string, stringsBuilder *string
 	assetFiles := assets.Files(logger.Default(), "")
 
 	for _, fileName := range filenames {
-		open, err := assetFiles.Open(dirPath + "/" + fileName)
+		open, err := assetFiles.Open(path.Join(dirPath, fileName))
 		if err != nil {
 			logger.Default().Error(fmt.Sprintf("failed to open asset %s file", fileName), zap.Error(err))
 			return err
@@ -184,7 +180,8 @@ func readSassContents(dirPath string, filenames []string, stringsBuilder *string
 	return nil
 }
 
-func defaultCSS() string {
+// defaultCSS contains css contents from minified-custom.css and custom-css editor content
+func defaultCSS(customCSS string) string {
 	var strBuilder strings.Builder
 
 	//read css contents from minified-custom.css
@@ -199,7 +196,20 @@ func defaultCSS() string {
 		logger.Default().Error("failed to read css content from minified-custom.css", zap.Error(err))
 	}
 
-	return strBuilder.String()
+	if customCSS != "" {
+		strBuilder.WriteString(customCSS)
+	}
+
+	processedCSS := strBuilder.String()
+
+	stylesheet.set(
+		map[string]string{
+			"css":        processedCSS,
+			"custom-css": str.HashStringSHA256(customCSS),
+		},
+	)
+
+	return processedCSS
 }
 
 // jsonToSass converts JSON string to SASS variable assignment string

server/pkg/webapp/serve.go

@@ -74,7 +74,7 @@ func MakeWebappServer(log *zap.Logger, httpSrvOpt options.HttpServerOpt, authOpt
 				discoveryApiBaseUrl: discoveryApiBaseUrl,
 				sentryUrl:           webappSentryUrl,
 				settings:            service.CurrentSettings,
-				scssDirPath:         webappOpt.SCSSDirPath,
+				scssDirPath:         webappOpt.ScssDirPath,
 			})
 			r.Get(webBaseUrl+"*", serveIndex(httpSrvOpt, appIndexHTMLs[app], fs))
 		}
@@ -88,7 +88,7 @@ func MakeWebappServer(log *zap.Logger, httpSrvOpt options.HttpServerOpt, authOpt
 			discoveryApiBaseUrl: discoveryApiBaseUrl,
 			sentryUrl:           webappSentryUrl,
 			settings:            service.CurrentSettings,
-			scssDirPath:         webappOpt.SCSSDirPath,
+			scssDirPath:         webappOpt.ScssDirPath,
 		})
 		r.Get(webBaseUrl+"*", serveIndex(httpSrvOpt, appIndexHTMLs[""], fs))
 	}