define border style

src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

@@ -49,14 +49,22 @@ const CustomizeLayoutSetting = (props) => {
           <h2 className="admin-setting-header">{t('admin:customize_setting.layout')}</h2>
 
           <div className="d-flex justify-content-around mt-5">
-            <div className="card-deck">
-              <div className={`card ${!isContainerFluid ? 'border border-primary' : ''}`} onClick={() => setIsContainerFluid(false)} role="button">
+            <div id="layoutOptions" className="card-deck">
+              <div
+                className={`card customize-layout-card ${!isContainerFluid ? 'border-active' : ''}`}
+                onClick={() => setIsContainerFluid(false)}
+                role="button"
+              >
                 <img src={`/images/customize-settings/default-${colorText}.svg`} />
                 <div className="card-body text-center">
                   {t('admin:customize_setting.layout_options.default')}
                 </div>
               </div>
-              <div className={`card ${isContainerFluid ? 'border border-primary' : ''}`} onClick={() => setIsContainerFluid(true)} role="button">
+              <div
+                className={`card customize-layout-card ${isContainerFluid ? 'border-active' : ''}`}
+                onClick={() => setIsContainerFluid(true)}
+                role="button"
+              >
                 <img src={`/images/customize-settings/fluid-${colorText}.svg`} />
                 <div className="card-body  text-center">
                   {t('admin:customize_setting.layout_options.expanded')}

src/client/styles/scss/_admin.scss

@@ -118,6 +118,12 @@
   //   }
   // }
 
+  #layoutOptions {
+    .customize-layout-card {
+      border: 4px solid $border-color;
+    }
+  }
+
   // theme selector
   #themeOptions {
     // layout

src/client/styles/scss/theme/_apply-colors.scss

@@ -553,9 +553,17 @@ mark.rbt-highlight-text {
 }
 
 /*
- * GROWI admin page #themeOptions
+ * GROWI admin page #layoutOptions #themeOptions
  */
 .admin-page {
+  #layoutOptions {
+    .customize-layout-card {
+      &.border-active {
+        border-color: $color-theme-color-box;
+      }
+    }
+  }
+
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {