Develop

docker/docker-compose/Dockerfile

@@ -11,6 +11,7 @@ RUN apk update \
     iputils \
     net-tools \
     mc \
+    nano \
     wget
 
 CMD tail -f /dev/null

package.json

@@ -93,7 +93,7 @@
     "date-fns": "^4.1.0",
     "deepl-node": "^1.15.0",
     "diff": "^7.0.0",
-    "dompurify": "^3.2.1",
+    "dompurify": "^3.2.4",
     "easyqrcodejs": "^4.4.13",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.13.0",

react/assets/forus-webshop/scss/_common/sections/blocks/block-lang-control.scss

@@ -35,6 +35,7 @@
             background: #fff;
             border: 1px solid var(--border-color);
             border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
             z-index: 2;
             width: 230px;
             max-width: 90vw;

react/assets/forus-webshop/scss/_common/sections/blocks/block-mobile-menu.scss

@@ -4,13 +4,13 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
     --item-height: 44px;
     --item-line-height: 18px;
     position: fixed;
-    top: 50px;
+    top: 68px;
     bottom: 0;
     z-index: 10;
     width: 100%;
     transition: transform 0.2s;
     background: #fff;
-    box-shadow: 0px -1px 0px 0px #E5E5E5 inset;
+    box-shadow: 0px -1px 0px 0px #e5e5e5 inset;
     border-top: 1px solid var(--border-color);
     overflow: auto;
 
@@ -20,7 +20,7 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
         .mobile-menu-group-header {
             display: flex;
             padding: 16px 20px 16px 15px;
-            background:  #FBFBFB;
+            background: #fbfbfb;
             border-top: 1px solid transparent;
             border-bottom: 1px solid var(--border-color);
             color: #222222;
@@ -33,17 +33,117 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
             }
         }
 
+        .mobile-menu-languages {
+            .mobile-menu-languages-header {
+                display: flex;
+                padding: 16px 10px 16px 15px;
+                background: #fbfbfb;
+                border-top: 1px solid transparent;
+                border-bottom: 1px solid var(--border-color);
+                color: #282b39;
+                font: 600 14px/20px var(--base-font);
+                outline-offset: -2px !important;
+                gap: 5px;
+
+                .mobile-menu-languages-header-icon {
+                    display: flex;
+                    flex: 0 0 auto;
+                    margin-left: -2px;
+
+                    .mdi {
+                        font-size: 18px;
+                        color: #848484;
+                    }
+                }
+
+                .mobile-menu-languages-header-name {
+                    flex: 1 1 auto;
+                    display: flex;
+                    gap: 3px;
+
+                    .mobile-menu-languages-header-name-prefix {
+                        color: #282b39;
+                        transition: 0.4s color;
+                    }
+                }
+
+                .mobile-menu-languages-header-toggle {
+                    display: flex;
+                    justify-content: center;
+                    flex: 0 0 30px;
+                    align-items: center;
+
+                    .mdi {
+                        height: 20px;
+                        line-height: 20px;
+                        display: block;
+                        width: 30px;
+                        font-size: 28px;
+                        color: #9e9e9e;
+                    }
+                }
+
+                &.mobile-menu-languages-header-active {
+                    .mobile-menu-languages-header-toggle {
+                        .mdi {
+                            color: #282b39;
+                        }
+                    }
+
+                    .mobile-menu-languages-header-name {
+                        .mobile-menu-languages-header-name-prefix {
+                            color: #646464;
+                        }
+                    }
+                }
+            }
+
+            .mobile-menu-item-language {
+                display: flex;
+                flex-direction: row;
+                gap: 8px;
+                color: #282b39;
+                align-items: center;
+                justify-content: flex-start;
+                font: 600 14px / var(--item-line-height) var(--base-font);
+                border-bottom: 1px solid var(--border-color);
+                padding: calc((var(--item-height) - var(--item-line-height)) / 2) 15px;
+                outline-offset: -2px !important;
+
+                .mobile-menu-item-language-separator {
+                    width: 1px;
+                    height: 8px;
+                    background: var(--border-color);
+                }
+
+                .mobile-menu-item-language-name {
+                    flex: 1 1 auto;
+                }
+
+                .mobile-menu-item-language-check {
+                    flex: 0 0 20px;
+                    font-size: 18px;
+                    line-height: var(--item-line-height);
+                    height: var(--item-line-height);
+                }
+
+                &.mobile-menu-item-language-active {
+                    color: #000;
+                }
+            }
+        }
+
         .mobile-menu-items {
             width: 100%;
             overflow: scroll;
-    
+
             .mobile-menu-item {
-                font: 600 14px/var(--item-line-height) var(--base-font);
+                font: 600 14px / var(--item-line-height) var(--base-font);
                 border-bottom: 1px solid var(--border-color);
                 padding: calc(calc(var(--item-height) - var(--item-line-height)) / 2) 15px;
                 display: flex;
                 outline-offset: -2px !important;
-    
+
                 .mobile-menu-item-icon {
                     font-size: 22px;
                     line-height: var(--item-line-height);
@@ -71,21 +171,21 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
                         background-color: var(--btn-auth-bg);
                         border: solid 1px var(--btn-auth-border);
                         color: var(--tc-auth-btn);
-        
+
                         .mdi {
                             color: var(--tc-auth-btn);
                         }
-        
+
                         &:hover {
                             border: solid 1px var(--btn-auth-border);
-        
+
                             .mdi {
                                 color: var(--tc-auth-btn);
                             }
                         }
                     }
                 }
-    
+
                 &.active {
                     color: var(--color-primary);
 
@@ -95,14 +195,15 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
 
                     &:after {
                         position: absolute;
-                        right: 20px;
-                        content: "\F012C";
-                        font: normal normal normal 24px/1 "Material Design Icons";
+                        right: 15px;
+                        content: '\F012C';
+                        font: normal normal normal 24px/1 'Material Design Icons';
                         font-size: 18px;
-                        color: #282B39;
+                        color: #282b39;
+                        width: 20px;
                     }
                 }
-    
+
                 &:hover {
                     color: var(--color-primary);
                 }
@@ -117,10 +218,10 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
             .mobile-menu-items {
                 .mobile-menu-item:not(.active) {
                     .mobile-menu-item-icon {
-                        color: #CDCED2;
+                        color: #cdced2;
                     }
                 }
             }
         }
     }
-}
+}

react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-mobile.scss

@@ -10,33 +10,42 @@
         align-items: center;
 
         & > .navbar-mobile-auth-buttons {
-            padding-top: 5px;
+            padding: 10px;
         }
     }
 
     .navbar-mobile-button {
         flex: 0 0 60px;
-        height: 50px;
+        height: 68px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        font: 600 9px / 14px var(--base-font);
+        font: 500 12px / 14px var(--base-font);
         outline-offset: -2px !important;
         border-radius: 6px;
         gap: 2px;
 
         .navbar-mobile-button-icon {
-            font-size: 16px;
+            font-size: 26px;
+            line-height: 26px;
+        }
+
+        &.active {
+            font-weight: 700;
         }
     }
 
     .navbar-mobile-logo {
         display: flex;
-        height: 30px;
         flex: 1 1 auto;
         flex-direction: row;
         justify-content: center;
+
+        img {
+            max-width: 140px;
+            max-height: 36px;
+        }
     }
 
     .navbar-mobile-lang {
@@ -60,8 +69,8 @@
         gap: 10px;
 
         .navbar-mobile-auth-button {
-            padding-top: 7px;
-            padding-bottom: 7px;
+            padding-top: 9px;
+            padding-bottom: 9px;
             margin: 0 0;
             flex: 0 0 calc(50% - 5px);
             box-shadow: none;

react/src/dashboard/components/pages/fund-provider/FundProvider.tsx

@@ -130,7 +130,7 @@ export default function FundProvider() {
                                         <em className="mdi mdi-information" />
                                         <div className="tooltip-content">
                                             <div className="tooltip-text">
-                                                Per transactie betaalt u 0,29 cent (excl. btw)
+                                                Per transactie betaalt u 0,32 cent (excl. btw)
                                             </div>
                                         </div>
                                     </div>
@@ -164,7 +164,7 @@ export default function FundProvider() {
                     <div className="card-footer card-footer-warning card-footer-sm">
                         <div className="card-title">
                             <div className="text-small">
-                                Wij gebruiken uitsluitend Ideal. Per transactie betaalt u 0,29 cent (excl. btw).
+                                Wij gebruiken uitsluitend Ideal. Per transactie betaalt u 0,32 cent (excl. btw).
                             </div>
                         </div>
                     </div>