Resolve FE comments

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

@@ -10,29 +10,28 @@
       </h3>
     </template>
 
-    <div class="row row-cols-2 mx-2">
-      <div
-        v-for="(colorInfo, key) in colorData"
+    <b-row class="mx-2">
+      <b-col
+        v-for="key in Object.keys(brandingVariables)"
         :key="key"
-        class="p-2 border"
+        cols="6"
+        class="p-2"
       >
-        <label
-          :for="key"
-          class="text-primary"
-        >{{ colorInfo.label }}</label>
-        <div class="form-group row">
+        <b-form-group
+          :label="$t(`brandVariables.${key}`)"
+          class="row px-3"
+        >
           <c-input-color-picker
-            v-model="colorInfo.value"
+            v-model="brandingVariables[key]"
             :data-test-id="`input-${key}-color`"
             width="24px"
             height="24px"
             :show-color-code-text="true"
-            class="px-3"
             :translations="colorTranslations"
           />
-        </div>
-      </div>
-    </div>
+        </b-form-group>
+      </b-col>
+    </b-row>
 
     <template #footer>
       <c-submit-button
@@ -88,59 +87,20 @@ export default {
 
   data () {
     return {
-      colorData: {
-        white: {
-          label: 'White',
-          value: '#FFFFFF',
-        },
-        black: {
-          label: 'Black',
-          value: '#162425',
-        },
-        primary: {
-          label: 'Primary',
-          value: '#0B344E',
-        },
-        secondary: {
-          label: 'Secondary',
-          value: '#758D9B',
-        },
-        success: {
-          label: 'Success',
-          value: '#43AA8B',
-        },
-        warning: {
-          label: 'Warning',
-          value: '#E2A046',
-        },
-        danger: {
-          label: 'Danger',
-          value: '#E54122',
-        },
-        light: {
-          label: 'Light',
-          value: '#E4E9EF',
-        },
-        extraLight: {
-          label: 'Extra Light',
-          value: '#F3F5F7',
-        },
-        dark: {
-          label: 'Dark',
-          value: '#162425',
-        },
-        tertiary: {
-          label: 'Tertiary',
-          value: '#5E727E',
-        },
-        gray200: {
-          label: 'Gray-200',
-          value: '#F9FAFB ',
-        },
-        bodyBg: {
-          label: 'Body Background',
-          value: '#F9FAFB',
-        },
+      brandingVariables: {
+        white: '#FFFFFF',
+        black: '#162425',
+        primary: '#0B344E',
+        secondary: '#758D9B',
+        success: '#43AA8B',
+        warning: '#E2A046',
+        danger: '#E54122',
+        light: '#E4E9EF',
+        extraLight: '#F3F5F7',
+        dark: '#162425',
+        tertiary: '#5E727E',
+        gray200: '#F9FAFB',
+        bodyBg: '#F9FAFB',
       },
       colorTranslations: {
         modalTitle: this.$t('colorPicker'),
@@ -153,27 +113,16 @@ export default {
     settings: {
       immediate: true,
       handler (settings) {
-        const brandingVariables = settings['ui.branding.variables'] || []
-        if (brandingVariables.length !== 0) {
-          this.colorData.primary.value = this.brandColorValue(brandingVariables, 'primary')
-          this.colorData.secondary.value = this.brandColorValue(brandingVariables, 'secondary')
+        if (settings['ui.branding-sass']) {
+          this.brandingVariables = JSON.parse(settings['ui.branding-sass'])
         }
       },
     },
   },
 
   methods: {
     onSubmit () {
-      const brandVariables = Object.keys(this.colorData).map(key => {
-        return `$${key}: ${this.colorData[key].value}`
-      })
-
-      this.$emit('submit', { 'ui.branding.variables': brandVariables })
-    },
-
-    brandColorValue (brandingVariables, variable) {
-      const brandingVariable = brandingVariables.find(item => item.includes(`$${variable}:`))
-      return brandingVariable.split(':')[1]
+      this.$emit('submit', { 'ui.branding-sass': JSON.stringify(this.brandingVariables) })
     },
   },
 }

client/web/admin/src/views/UI/Index.vue

@@ -133,6 +133,11 @@ export default {
         .catch(this.toastErrorHandler(this.$t('notification:settings.ui.update.error')))
         .finally(() => {
           this[type].processing = false
+
+          // Refresh the page if branding or custom CSS was updated
+          if (type === 'branding' || type === 'customCSS') {
+            window.location.reload()
+          }
         })
     },
   },

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

@@ -48,7 +48,7 @@
             />
           </svg>
         </b-button>
-        <span v-show="showColorCodeText" class="ml-2">
+        <span v-if="showColorCodeText" class="ml-2">
           {{ value }}
         </span>
     </div>

lib/vue/src/components/navigation/CTopbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header-navigation d-flex flex-wrap align-items-center sticky-top mb-3 pr-3">
+  <div class="header-navigation d-flex flex-wrap align-items-center pr-3">
     <div
       class="spacer"
       :class="{
@@ -288,15 +288,8 @@ $nav-user-icon-size: 50px;
   width: 100vw;
   min-height: $header-height;
   background-color: var(--gray-200) !important;
-  padding-left: calc(3.5rem + 6px);
 }
 
-.topbar-dropdown-menu {
-  max-height: 80vh;
-  overflow-y: auto;
-}
-
-
 .avatar {
   border-radius: 50%;
   background-size: cover;

locale/en/corteza-webapp-admin/ui.settings.yaml

@@ -25,6 +25,20 @@ editor:
   corteza-studio:
     title: Branding
     colorPicker: Choose a color
+    brandVariables:
+      white: White
+      black: Black
+      primary: Primary
+      secondary: Secondary
+      success: Success
+      warning: Warning
+      danger: Danger
+      light: Light
+      extraLight: Extra light
+      dark: Dark
+      tertiary: Tertiary
+      gray200: Gray 200
+      bodyBg: Body background
 
   custom-css:
     title: Custom CSS

server/pkg/webapp/serve.go

@@ -2,16 +2,17 @@ package webapp
 
 import (
 	"bytes"
+	"encoding/json"
 	"fmt"
-	"github.com/bep/godartsass/v2"
-	"github.com/cortezaproject/corteza/server/assets"
 	"io"
 	"net/http"
 	"os"
 	"path"
 	"regexp"
 	"strings"
 
+	"github.com/bep/godartsass/v2"
+	"github.com/cortezaproject/corteza/server/assets"
 	"github.com/cortezaproject/corteza/server/pkg/logger"
 	"github.com/cortezaproject/corteza/server/pkg/options"
 	"github.com/cortezaproject/corteza/server/system/service"
@@ -150,19 +151,27 @@ func serveConfig(r chi.Router, config webappConfig) {
 	r.Get(options.CleanBase(config.appUrl, "custom.css"), func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Add("Content-Type", "text/css")
 
-		var sassString string
+		var stringsBuilder strings.Builder
 
 		assetFiles := assets.Files(logger.Default(), "")
 
-		if len(config.settings.UI.Branding.Variables) > 0 {
-			sassString += strings.Join(config.settings.UI.Branding.Variables, ";\n") + ";"
+		// process BrandingSASS
+		if config.settings.UI.BrandingSASS != "" {
+			brandingSassString, err := jsonToSass(config.settings.UI.BrandingSASS)
+			if err != nil {
+				logger.Default().Error("failed to parse branding SASS", zap.Error(err))
+				return
+			}
+			stringsBuilder.WriteString(brandingSassString)
 		}
 
 		// Get SASS variables from the custom CSS editor and give them precedence over branding variables
 		variablesPattern := regexp.MustCompile(`(\$[a-zA-Z_-]+):\s*([^;]+);`)
 		customVariables := variablesPattern.FindAllString(config.settings.UI.CustomCSS, -1)
 
-		sassString += strings.Join(customVariables, "\n")
+		for _, customVariable := range customVariables {
+			stringsBuilder.WriteString(fmt.Sprintf("%s \n", customVariable))
+		}
 
 		// Boostrap, bootstrap-vue and custom variables scss files
 		fileNames := assets.FileNames("scss")
@@ -176,16 +185,16 @@ func serveConfig(r chi.Router, config webappConfig) {
 			if err != nil {
 				return
 			}
-			sassString += string(fileContent)
+			stringsBuilder.WriteString(string(fileContent))
 		}
 
 		//Custom CSS editor selector block
 		selectorBlock := variablesPattern.ReplaceAllString(config.settings.UI.CustomCSS, "")
-		sassString += selectorBlock
+		stringsBuilder.WriteString(selectorBlock)
 
 		// Process Sass
 		args := godartsass.Args{
-			Source: sassString,
+			Source: stringsBuilder.String(),
 		}
 
 		t, err := godartsass.Start(godartsass.Options{
@@ -235,3 +244,22 @@ func replaceBaseHrefPlaceholder(buf []byte, app, baseHref string) []byte {
 
 	return fixed
 }
+
+// jsonToSass converts JSON string to SASS variable assignment string
+func jsonToSass(jsonStr string) (string, error) {
+	var (
+		colorMap       map[string]string
+		stringsBuilder strings.Builder
+	)
+
+	err := json.Unmarshal([]byte(jsonStr), &colorMap)
+	if err != nil {
+		return "", err
+	}
+
+	for key, value := range colorMap {
+		stringsBuilder.WriteString(fmt.Sprintf("$%s: %s;\n", key, value))
+	}
+
+	return stringsBuilder.String(), nil
+}

server/system/types/app_settings.go

@@ -250,9 +250,7 @@ type (
 
 			CustomCSS string `kv:"custom-css" json:"customCSS"`
 
-			Branding struct {
-				Variables []string `json:"variables"`
-			} `kv:"branding" json:"branding"`
+			BrandingSASS string `kv:"branding-sass" json:"branding-sass"`
 
 			Topbar struct {
 				HideAppSelector        bool `json:"hideAppSelector"`