5 files changed, 352 insertions, 325 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index ec8ce42b3..36023e511 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -150,20 +150,6 @@ input[type=text], textarea {
 	color: var(--bs-body-color);
 }
 
-.selected-doco-nav {
-	font-weight: bold;
-	text-shadow: 2px 2px 3px lightgray;
-}
-
-#doco-content img {
-	width: 100%;
-}
-
-#help-content pre code {
-	overflow-x: auto;
-	white-space: pre;
-}
-
 .heart {
 	color: #FF0000;
 }
@@ -522,8 +508,8 @@ footer {
 }
 
 .contact-block-img {
-	width: 2.94rem;
-	height: 2.94rem;
+	width: 2.92rem;
+	height: 2.92rem;
 	margin-bottom: 3px;
 }
 
@@ -967,6 +953,7 @@ a .drop-icons:hover {
 }
 
 .wall-item-pinned i {
+	display: inline-block;
 	transform: rotate(45deg);
 }
 
@@ -1158,12 +1145,20 @@ a .drop-icons:hover {
 
 .generic-content-wrapper {
 	background-color: var(--bs-body-bg);
-	border: 1px solid var(--bs-border-color);
+	border: 1px solid var(--bs-light-border-subtle);
 	border-radius: var(--bs-border-radius);
 	margin-bottom: 1.5rem;
 	font-size: 1.1rem;
 }
 
+.generic-content-wrapper.is-contained {
+	border: 1px solid var(--bs-primary-border-subtle);
+}
+
+.generic-content-wrapper.is-new {
+	border-top: 2px solid var(--bs-primary);
+}
+
 .section-title-wrapper {
 	padding: 7px 10px;
 	background-color: var(--bs-tertiary-bg);
@@ -1258,17 +1253,23 @@ a .drop-icons:hover {
 }
 
 main.fullscreen {
+	position: fixed;
+	top: 0px;
 	left: 0px;
-	width: 100%;
+	width: 100vw;
 	height: 100vh;
-	max-width: none;
+	z-index: 1020;
+	overflow: auto;
 }
 
 main.fullscreen .generic-content-wrapper {
-	position: absolute;
-	width: 100%;
+	position: fixed;
 	top: 0px;
 	left: 0px;
+	width: 100vw;
+	height: 100vh;
+	z-index: 1020;
+	overflow: auto;
 	border-radius: 0px;
 	border-width: 0px;
 }
@@ -1377,12 +1378,16 @@ dl.bb-dl > dd > li {
 }
 
 .bootstrap-tagsinput .tag:before {
-	/* Copied from fa-asterisk, is there a better way to do it? */
-	font-family: ForkAwesome;
-	font-weight: normal;
-	font-style: normal;
-	text-decoration: inherit;
-	content:"\f069  ";
+	font-family: bootstrap-icons;
+	font-size: 0.5rem;
+	content: "\F151";
+	margin-right: .25rem;
+}
+
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+	font-family: bootstrap-icons;
+	font-size: 0.5rem;
+	content: "\F659";
 }
 
 /* Modified original CSS to match input in Redbasic */
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 76d6c0854..144714b50 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -2,243 +2,254 @@
  * redbasic theme specific JavaScript
  */
 
-let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
-let redbasic_theme_color = localStorage.getItem('redbasic_theme_color');
+const redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
+const redbasic_theme_color = localStorage.getItem('redbasic_theme_color');
 
 if (redbasic_dark_mode == 1) {
-	$('html').attr('data-bs-theme', 'dark');
+    document.documentElement.setAttribute('data-bs-theme', 'dark');
 }
 
 if (redbasic_dark_mode == 0) {
-	$('html').attr('data-bs-theme', 'light');
+    document.documentElement.setAttribute('data-bs-theme', 'light');
 }
 
 if (redbasic_theme_color) {
-	$('meta[name=theme-color]').attr('content', redbasic_theme_color);
+    document.querySelector('meta[name=theme-color]').setAttribute('content', redbasic_theme_color);
 }
 
-$(document).ready(function() {
-	// provide a fake progress bar for pwa standalone mode
-	if (window.matchMedia('(display-mode: standalone)').matches) {
-		$(window).on('beforeunload', function(){
-			if ($('.page-loader').length) {
-				return;
-			}
-			$('<div class="bg-primary page-loader"></div>').prependTo('body');
-		});
-	}
-
-	if (redbasic_dark_mode == 1) {
-		$('#theme-switch-icon').removeClass('bi-moon').addClass('bi-sun');
-		$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
-	}
-	if (redbasic_dark_mode == 0) {
-		$('#theme-switch-icon').removeClass('bi-sun').addClass('bi-moon');
-		$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
-	}
-
-	if (redbasic_theme_color != $('nav').css('background-color')) {
-		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
-		localStorage.setItem('redbasic_theme_color', $('nav').css('background-color'));
-	}
-
-	// CSS3 calc() fallback (for unsupported browsers)
-	$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
-	if( $('#css3-calc').width() == 10) {
-		$(window).resize(function() {
-			if($(window).width() < 992) {
-				$('main').css('width', $(window).width() + $('aside').outerWidth() );
-			} else {
-				$('main').css('width', '100%');
-			}
-		});
-	}
-	$('#css3-calc').remove(); // Remove the test element
-
-	if($(window).width() < 1200) {
-		$("#right_aside_wrapper").children().detach().appendTo('#left_aside_wrapper');
-		$('#notifications_wrapper').addClass('d-none');
-	}
-
-
-	if (document.querySelector('#region_1')) {
-		stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
-	}
-
-	if (document.querySelector('#region_3')) {
-		stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
-	}
-
-	$('.usermenu').click(function() {
-		if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){
-			$('#navbar-collapse-1, #navbar-collapse-2').removeClass('show');
-		}
-	});
-
-	$('#theme-switch').click(function() {
-		if ($('html').attr('data-bs-theme') === 'dark') {
-			if ($('nav').data('bs-theme') === 'dark') {
-				$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
-			}
-			else {
-				$('[data-bs-theme="dark"]').attr('data-bs-theme', 'light');
-			}
-			localStorage.setItem('redbasic_dark_mode', 0);
-			$('#theme-switch-icon').removeClass('bi-sun').addClass('bi-moon');
-		}
-		else {
-			$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
-			localStorage.setItem('redbasic_dark_mode', 1);
-			$('#theme-switch-icon').removeClass('bi-moon').addClass('bi-sun');
-		}
-		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
-		localStorage.setItem('redbasic_theme_color', $('nav').css('background-color'));
-	});
-
-
-	$('#menu-btn').click(function() {
-		if($('#navbar-collapse-1').hasClass('show')){
-			$('#navbar-collapse-1').removeClass('show');
-		}
-	});
-
-	$('.notifications-btn').click(function(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		if($('#navbar-collapse-2').hasClass('show')){
-			$('#navbar-collapse-2').removeClass('show');
-		}
-	});
-
-	$("input[data-role=cat-tagsinput]").tagsinput({
-		tagClass: 'badge rounded-pill bg-warning text-dark'
-	});
-
-	$('a.disabled').click(function(e) {
-		e.preventDefault();
-		e.stopPropagation();
-	});
-
-	var doctitle = document.title;
-	function checkNotify() {
-		var notifyUpdateElem = document.getElementById('notify-update');
-		if(notifyUpdateElem !== null) {
-			if(notifyUpdateElem.innerHTML !== "")
-				document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle;
-			else
-				document.title = doctitle;
-		}
-	}
-	setInterval(function () {checkNotify();}, 10 * 1000);
-
-	var touch_start = null;
-	var touch_max = window.innerWidth / 10;
-
-	window.addEventListener('touchstart', function(e) {
-		if (e.touches.length === 1){
-			//just one finger touched
-			touch_start = e.touches.item(0).clientX;
-			if (touch_start < touch_max) {
-				$('body').css('overflow-y', 'hidden');
-			}
-		}
-		else {
-			//a second finger hit the screen, abort the touch
-			touch_start = null;
-		}
-	});
-
-	window.addEventListener('touchend', function(e) {
-		$('body').css('overflow-y', '');
-
-		let touch_offset = 30; //at least 30px are a swipe
-		if (touch_start) {
-			//the only finger that hit the screen left it
-			let touch_end = e.changedTouches.item(0).clientX;
-
-			if (touch_end > (touch_start + touch_offset)) {
-				//a left -> right swipe
-				if (touch_start < touch_max) {
-					toggleAside();
-				}
-			}
-			if (touch_end < (touch_start - touch_offset)) {
-				//a right -> left swipe
-			}
-		}
-	});
-
+document.addEventListener('DOMContentLoaded', function () {
+    // provide a fake progress bar for pwa standalone mode
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+        window.addEventListener('beforeunload', function () {
+            if (!document.querySelector('.page-loader')) {
+                let loader = document.createElement('div');
+                loader.classList.add('bg-primary', 'page-loader');
+                document.body.prepend(loader);
+            }
+        });
+    }
+
+    if (redbasic_dark_mode == 1) {
+        document.getElementById('theme-switch-icon').classList.remove('bi-moon');
+        document.getElementById('theme-switch-icon').classList.add('bi-sun');
+        document.querySelector('[data-bs-theme="light"]').setAttribute('data-bs-theme', 'dark');
+    }
+    if (redbasic_dark_mode == 0) {
+        document.getElementById('theme-switch-icon').classList.remove('bi-sun');
+        document.getElementById('theme-switch-icon').classList.add('bi-moon');
+        let darkElements = document.querySelectorAll('[data-bs-theme="dark"]:not(nav)');
+        darkElements.forEach(el => el.setAttribute('data-bs-theme', 'light'));
+    }
+
+    const navBackgroundColor = document.querySelector('nav').style.backgroundColor;
+    if (redbasic_theme_color !== navBackgroundColor) {
+        document.querySelector('meta[name=theme-color]').setAttribute('content', navBackgroundColor);
+        localStorage.setItem('redbasic_theme_color', navBackgroundColor);
+    }
+
+    // CSS3 calc() fallback (for unsupported browsers)
+    const testElem = document.createElement('div');
+    testElem.style.width = 'calc(10px + 10px)';
+    testElem.style.display = 'none';
+    testElem.id = 'css3-calc';
+    document.body.appendChild(testElem);
+
+    if (testElem.offsetWidth === 10) {
+        window.addEventListener('resize', function () {
+            if (window.innerWidth < 992) {
+                document.querySelector('main').style.width = `${window.innerWidth + document.querySelector('aside').offsetWidth}px`;
+            } else {
+                document.querySelector('main').style.width = '100%';
+            }
+        });
+    }
+    testElem.remove(); // Remove the test element
+
+    if (window.innerWidth < 1200) {
+        const rightAsideWrapper = document.getElementById("right_aside_wrapper");
+        const leftAsideWrapper = document.getElementById("left_aside_wrapper");
+        const notificationsWrapper = document.getElementById("notifications_wrapper");
+
+        if (leftAsideWrapper && rightAsideWrapper) {
+            const children = rightAsideWrapper.children;
+            if (children.length) {
+                leftAsideWrapper.append(...children);
+            }
+        }
+
+        if (notificationsWrapper) {
+            notificationsWrapper.classList.add('d-none');
+        }
+    }
+
+    if (document.getElementById('region_1')) {
+        stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
+    }
+
+    if (document.getElementById('region_3')) {
+        stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
+    }
+
+    document.querySelectorAll('.usermenu').forEach(function (element) {
+        element.addEventListener('click', function () {
+            let navCollapse = document.querySelectorAll('#navbar-collapse-1, #navbar-collapse-2');
+            navCollapse.forEach(function (nav) {
+                if (nav.classList.contains('show')) {
+                    nav.classList.remove('show');
+                }
+            });
+        });
+    });
+
+    document.getElementById('theme-switch').addEventListener('click', function () {
+        const html = document.documentElement;
+        if (html.getAttribute('data-bs-theme') === 'dark') {
+            let nav = document.querySelector('nav');
+            if (nav.dataset.bsTheme === 'dark') {
+                document.querySelectorAll('[data-bs-theme="dark"]:not(nav)').forEach(function (el) {
+                    el.setAttribute('data-bs-theme', 'light');
+                });
+            } else {
+                document.querySelector('[data-bs-theme="dark"]').setAttribute('data-bs-theme', 'light');
+            }
+            localStorage.setItem('redbasic_dark_mode', 0);
+            document.getElementById('theme-switch-icon').classList.remove('bi-sun');
+            document.getElementById('theme-switch-icon').classList.add('bi-moon');
+        } else {
+            document.querySelectorAll('[data-bs-theme="light"]').forEach(function (el) {
+                el.setAttribute('data-bs-theme', 'dark');
+            });
+            localStorage.setItem('redbasic_dark_mode', 1);
+            document.getElementById('theme-switch-icon').classList.remove('bi-moon');
+            document.getElementById('theme-switch-icon').classList.add('bi-sun');
+        }
+        document.querySelector('meta[name=theme-color]').setAttribute('content', document.querySelector('nav').style.backgroundColor);
+        localStorage.setItem('redbasic_theme_color', document.querySelector('nav').style.backgroundColor);
+    });
+
+    document.getElementById('menu-btn').addEventListener('click', function () {
+        const navCollapse = document.getElementById('navbar-collapse-1');
+        if (navCollapse && navCollapse.classList.contains('show')) {
+            navCollapse.classList.remove('show');
+        }
+    });
+
+    $("input[data-role=cat-tagsinput]").tagsinput({
+        tagClass: 'badge rounded-pill bg-warning text-dark'
+    });
+
+    document.querySelectorAll('a.disabled').forEach(function (link) {
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+    });
+
+    const doctitle = document.title;
+    function checkNotify() {
+        let notifyUpdateElem = document.getElementById('notify-update');
+        if (notifyUpdateElem && notifyUpdateElem.innerHTML !== '') {
+            document.title = '(' + notifyUpdateElem.innerHTML + ') ' + doctitle;
+        } else {
+            document.title = doctitle;
+        }
+    }
+
+    setInterval(checkNotify, 10 * 1000);
+
+    let touch_start = null;
+    const touch_max = window.innerWidth / 10;
+
+    window.addEventListener('touchstart', function (e) {
+        if (e.touches.length === 1) {
+            touch_start = e.touches[0].clientX;
+            if (touch_start < touch_max) {
+                document.body.style.overflowY = 'hidden';
+            }
+        } else {
+            touch_start = null;
+        }
+    });
+
+    window.addEventListener('touchend', function (e) {
+        document.body.style.overflowY = '';
+        let touch_offset = 30; // at least 30px are a swipe
+        if (touch_start) {
+            let touch_end = e.changedTouches[0].clientX;
+            if (touch_end > (touch_start + touch_offset)) {
+                if (touch_start < touch_max) {
+                    toggleAside();
+                }
+            }
+            if (touch_end < (touch_start - touch_offset)) {
+                // a right -> left swipe
+            }
+        }
+    });
 });
 
 function setStyle(element, cssProperty) {
-	for (var property in cssProperty){
-		element.style[property] = cssProperty[property];
-	}
+    for (let property in cssProperty) {
+        element.style[property] = cssProperty[property];
+    }
 }
 
 function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) {
-
-	var lastScrollTop = 0;
-	var sticky = document.querySelector(sticky);
-
-	if (!sticky) {
-		return;
-	}
-
-	var stickyHeight = sticky.getBoundingClientRect().height;
-	var stickyTop = document.querySelector(stickyTop);
-	var content = document.querySelector(container);
-	var diff = window.innerHeight - stickyHeight;
-	var h = 0;
-	var lasth = 0;
-	var st = window.pageYOffset || document.documentElement.scrollTop;
-
-	var resizeObserver = new ResizeObserver(function(entries) {
-		stickyHeight = sticky.getBoundingClientRect().height;
-		st = window.pageYOffset || document.documentElement.scrollTop;
-		diff = window.innerHeight - stickyHeight;
-	});
-
-	resizeObserver.observe(sticky);
-	resizeObserver.observe(content);
-
-	window.addEventListener('scroll', function() {
-		if(window.innerHeight > stickyHeight + topOffset) {
-			setStyle(stickyTop, { height: 0 + 'px' });
-			setStyle(sticky, { position: 'sticky', top: topOffset + 'px'});
-		}
-		else {
-			st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-			if (st > lastScrollTop){
-				// downscroll code
-				setStyle(stickyTop, { height: lasth + 'px' });
-				setStyle(sticky, { position: 'sticky', top: Math.round(diff) - bottomOffset + 'px', bottom: '' });
-			} else {
-				// upscroll code
-				h = sticky.getBoundingClientRect().top - content.getBoundingClientRect().top;
-				if(Math.round(stickyTop.getBoundingClientRect().height) === lasth) {
-					setStyle(stickyTop, { height: Math.round(h) + 'px' });
-				}
-				lasth = Math.round(h);
-				setStyle(sticky, { position: 'sticky', top: '', bottom: Math.round(diff) - topOffset + 'px' });
-			}
-			lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-		}
-	}, false);
-
+    let lastScrollTop = 0;
+    let stickyElement = document.querySelector(sticky);
+
+    if (!stickyElement) {
+        return;
+    }
+
+    let stickyHeight = stickyElement.getBoundingClientRect().height;
+    const stickyTopElement = document.querySelector(stickyTop);
+    const content = document.querySelector(container);
+    let diff = window.innerHeight - stickyHeight;
+
+    let h = 0;
+    let lasth = 0;
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+
+    let resizeObserver = new ResizeObserver(function () {
+        stickyHeight = stickyElement.getBoundingClientRect().height;
+        st = window.pageYOffset || document.documentElement.scrollTop;
+        diff = window.innerHeight - stickyHeight;
+    });
+
+    resizeObserver.observe(stickyElement);
+    resizeObserver.observe(content);
+
+    window.addEventListener('scroll', function () {
+        if (window.innerHeight > stickyHeight + topOffset) {
+            setStyle(stickyTopElement, { height: '0px' });
+            setStyle(stickyElement, { position: 'sticky', top: `${topOffset}px` });
+        } else {
+            st = window.pageYOffset || document.documentElement.scrollTop;
+            if (st > lastScrollTop) {
+                setStyle(stickyTopElement, { height: `${lasth}px` });
+                setStyle(stickyElement, { position: 'sticky', top: `${Math.round(diff) - bottomOffset}px`, bottom: '' });
+            } else {
+                h = stickyElement.getBoundingClientRect().top - content.getBoundingClientRect().top;
+                if (Math.round(stickyTopElement.getBoundingClientRect().height) === lasth) {
+                    setStyle(stickyTopElement, { height: `${Math.round(h)}px` });
+                }
+                lasth = Math.round(h);
+                setStyle(stickyElement, { position: 'sticky', top: '', bottom: `${Math.round(diff) - topOffset}px` });
+            }
+            lastScrollTop = st <= 0 ? 0 : st;
+        }
+    }, false);
 }
 
 function makeFullScreen(full) {
-	if(typeof full=='undefined' || full == true) {
-		$('main').addClass('fullscreen');
-		$('header, nav, aside, #fullscreen-btn').attr('style','display:none !important');
-		$('#inline-btn').show();
-	}
-	else {
-		$('main').removeClass('fullscreen');
-		$('header, nav, aside, #fullscreen-btn').show();
-		$('#inline-btn').hide();
-	}
+    if (typeof full === 'undefined' || full === true) {
+        document.querySelector('main').classList.add('fullscreen');
+        document.getElementById('fullscreen-btn').style.display = 'none';
+        document.getElementById('inline-btn').style.display = 'inline-block';
+    } else {
+        document.querySelector('main').classList.remove('fullscreen');
+        document.getElementById('fullscreen-btn').style.display = '';
+        document.getElementById('inline-btn').style.display = 'none';
+    }
 }
-
-
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 7079cc386..87915bd18 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -4,6 +4,7 @@ namespace Zotlabs\Theme;
 
 use ScssPhp\ScssPhp\Compiler;
 use ScssPhp\ScssPhp\OutputStyle;
+use ScssPhp\ScssPhp\ValueConverter;
 
 class RedbasicConfig {
 
@@ -68,85 +69,89 @@ class RedbasicConfig {
 		}
 
 		if (isset($_POST['redbasic-settings-submit'])) {
-			if (isset($_POST['redbasic_primary_color']) || isset($_POST['redbasic_radius'])) {
-
-				$primary_color = '';
-				$success_color = '';
-				$info_color = '';
-				$warning_color = '';
-				$danger_color = '';
-				$radius = floatval($_POST['redbasic_radius']);
-
-				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) {
-					$primary_color = $_POST['redbasic_primary_color'];
+			$primary_color = '';
+			$color_changed = false;
+			$success_color = '';
+			$info_color = '';
+			$warning_color = '';
+			$danger_color = '';
+			$radius = floatval($_POST['redbasic_radius']);
+			$radius_changed = $_POST['redbasic_radius'] !== get_pconfig(local_channel(),'redbasic', 'radius');
+
+			if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) {
+				if (!$color_changed) {
+					$color_changed = $_POST['redbasic_primary_color'] !== get_pconfig(local_channel(),'redbasic', 'primary_color');
 				}
-				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_success_color'])) {
-					$success_color = $_POST['redbasic_success_color'];
+				$primary_color = $_POST['redbasic_primary_color'];
+			}
+			if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_success_color'])) {
+				if (!$color_changed) {
+					$color_changed = $_POST['redbasic_success_color'] !== get_pconfig(local_channel(),'redbasic', 'success_color');
 				}
-				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_info_color'])) {
-					$info_color = $_POST['redbasic_info_color'];
+				$success_color = $_POST['redbasic_success_color'];
+			}
+			if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_info_color'])) {
+				if (!$color_changed) {
+					$color_changed = $_POST['redbasic_info_color'] !== get_pconfig(local_channel(),'redbasic', 'info_color');
 				}
-				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_warning_color'])) {
-					$warning_color = $_POST['redbasic_warning_color'];
+				$info_color = $_POST['redbasic_info_color'];
+			}
+			if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_warning_color'])) {
+				if (!$color_changed) {
+					$color_changed = $_POST['redbasic_warning_color'] !== get_pconfig(local_channel(),'redbasic', 'warning_color');
 				}
-				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_danger_color'])) {
-					$danger_color = $_POST['redbasic_danger_color'];
+				$warning_color = $_POST['redbasic_warning_color'];
+			}
+			if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_danger_color'])) {
+				if (!$color_changed) {
+					$color_changed = $_POST['redbasic_danger_color'] !== get_pconfig(local_channel(),'redbasic', 'danger_color');
 				}
+				$danger_color = $_POST['redbasic_danger_color'];
+			}
+
+			if (!$primary_color && !$success_color && !$info_color && !$warning_color && !$danger_color && !$radius) {
+				set_pconfig(local_channel(), 'redbasic', 'bootstrap', '');
+			}
+			else if ($color_changed || $radius_changed) {
+				try {
+					$compiler = new Compiler();
+					$compiler->setImportPaths('vendor/twbs/bootstrap/scss');
+					$compiler->setOutputStyle(OutputStyle::COMPRESSED);
+
+					// Set Variables
+					if ($primary_color) {
+						$variables['$primary'] = ValueConverter::parseValue($primary_color);
+					}
+					if ($success_color) {
+						$variables['$success'] = ValueConverter::parseValue($success_color);
+					}
+					if ($info_color) {
+						$variables['$info'] = ValueConverter::parseValue($info_color);
+					}
+					if ($warning_color) {
+						$variables['$warning'] = ValueConverter::parseValue($warning_color);
+					}
+					if ($danger_color) {
+						$variables['$danger'] = ValueConverter::parseValue($danger_color);
+					}
+					if ($radius) {
+						$variables['$border-radius'] = ValueConverter::parseValue($radius . 'rem');
+						$variables['$border-radius-sm'] = ValueConverter::parseValue($radius/1.5 . 'rem');
+						$variables['$border-radius-lg'] = ValueConverter::parseValue($radius*1.333 . 'rem');
+						$variables['$border-radius-xl'] = ValueConverter::parseValue($radius*2.666 . 'rem');
+						$variables['$border-radius-xxl'] = ValueConverter::parseValue($radius*5.333 . 'rem');
+					}
 
-				if ($primary_color || $success_color || $info_color || $warning_color || $danger_color || $radius) {
-
-					try {
-						$cache_dir = 'store/[data]/[scss]/';
-						if(!is_dir($cache_dir)) {
-							os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true);
-						}
-
-						$options = [
-							'cacheDir' => $cache_dir,
-							'prefix' => 'redbasic_',
-							'forceRefresh' => false
-						];
-
-						$compiler = new Compiler($options);
-						$compiler->setImportPaths('vendor/twbs/bootstrap/scss');
-						$compiler->setOutputStyle(OutputStyle::COMPRESSED);
-
-						// Set Variables
-						if ($primary_color) {
-							$variables['$primary'] = $primary_color;
-						}
-						if ($success_color) {
-							$variables['$success'] = $success_color;
-						}
-						if ($info_color) {
-							$variables['$info'] = $info_color;
-						}
-						if ($warning_color) {
-							$variables['$warning'] = $warning_color;
-						}
-						if ($danger_color) {
-							$variables['$danger'] = $danger_color;
-						}
-						if ($radius) {
-							$variables['$border-radius'] = $radius . 'rem';
-							$variables['$border-radius-sm'] = $radius/1.5 . 'rem';
-							$variables['$border-radius-lg'] = $radius*1.333 . 'rem';
-							$variables['$border-radius-xl'] = $radius*2.666 . 'rem';
-							$variables['$border-radius-xxl'] = $radius*5.333 . 'rem';
-						}
-
-						// Replace Bootstrap Variables with Customizer Variables
+					// Replace Bootstrap Variables with Customizer Variables
+					if ($variables) {
 						$compiler->replaceVariables($variables);
+					}
 
-						$bs = $compiler->compileString('@import "bootstrap.scss";');
+					$bs = $compiler->compileString('@import "bootstrap.scss";');
 
-						set_pconfig(local_channel(), 'redbasic', 'bootstrap', $bs->getCss());
-					} catch (\Exception $e) {
-						logger('scssphp: Unable to compile content');
-					}
-				}
-				else {
-					set_pconfig(local_channel(), 'redbasic', 'bootstrap', '');
+					set_pconfig(local_channel(), 'redbasic', 'bootstrap', $bs->getCss());
+				} catch (\Exception $e) {
+					logger('scssphp: Unable to compile content');
 				}
 			}
 
@@ -193,11 +198,11 @@ class RedbasicConfig {
 			'$dark' => t('Dark style'),
 			'$light' => t('Light style'),
 			'$common' => t('Common settings'),
-			'$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color'], '<i class="fa fa-circle text-primary"></i> ' . t('Current color, leave empty for default')),
-			'$success_color' => array('redbasic_success_color', t('Success theme color'), $arr['success_color'], '<i class="fa fa-circle text-success"></i> ' . t('Current color, leave empty for default')),
-			'$info_color' => array('redbasic_info_color', t('Info theme color'), $arr['info_color'], '<i class="fa fa-circle text-info"></i> ' . t('Current color, leave empty for default')),
-			'$warning_color' => array('redbasic_warning_color', t('Warning theme color'), $arr['warning_color'], '<i class="fa fa-circle text-warning"></i> ' . t('Current color, leave empty for default')),
-			'$danger_color' => array('redbasic_danger_color', t('Danger theme color'), $arr['danger_color'], '<i class="fa fa-circle text-danger"></i> ' . t('Current color, leave empty for default')),
+			'$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color'], '<i class="bi bi-circle-fill text-primary"></i> ' . t('Current color, leave empty for default')),
+			'$success_color' => array('redbasic_success_color', t('Success theme color'), $arr['success_color'], '<i class="bi bi-circle-fill text-success"></i> ' . t('Current color, leave empty for default')),
+			'$info_color' => array('redbasic_info_color', t('Info theme color'), $arr['info_color'], '<i class="bi bi-circle-fill text-info"></i> ' . t('Current color, leave empty for default')),
+			'$warning_color' => array('redbasic_warning_color', t('Warning theme color'), $arr['warning_color'], '<i class="bi bi-circle-fill text-warning"></i> ' . t('Current color, leave empty for default')),
+			'$danger_color' => array('redbasic_danger_color', t('Danger theme color'), $arr['danger_color'], '<i class="bi bi-circle-fill text-danger"></i> ' . t('Current color, leave empty for default')),
 			'$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
 			'$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))),
 			'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php
index 1f682634e..dcbe8c3da 100644
--- a/view/theme/redbasic/php/theme.php
+++ b/view/theme/redbasic/php/theme.php
@@ -5,7 +5,7 @@
  *   * Description: Hubzilla standard theme
  *   * Version: 2.2
  *   * MinVersion: 8.9
- *   * MaxVersion: 10.0
+ *   * MaxVersion: 11.0
  *   * Author: Fabrixxm
  *   * Maintainer: Mike Macgirvin
  *   * Maintainer: Mario Vavti
diff --git a/view/theme/redbasic/schema/Focus-Boxy.css b/view/theme/redbasic/schema/Focus-Boxy.css
index df5bf2d75..826e53e66 100644
--- a/view/theme/redbasic/schema/Focus-Boxy.css
+++ b/view/theme/redbasic/schema/Focus-Boxy.css
@@ -1,5 +1,6 @@
-.comment .wall-item-body {
-	padding-left: 2.8rem;
+.comment .wall-item-body,
+.comment .wall-item-tools-left {
+	padding-left: 3.4rem;
 }
 
 .wall-item-content-wrapper.comment {
@@ -37,3 +38,8 @@
 	border-right: 0;
 	border-left: 0;
 }
+
+.contact-block-img {
+	width: 2.89rem;
+	height: 2.89rem;
+}