Wip manager, mobile layout + login and added logo + finetuning menu and drawer etc

assets/images/MyInfoMate_logo_only.svg

@@ -0,0 +1,650 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="439"
+   height="419"
+   id="svg137"
+   sodipodi:docname="MyInfoMate_logo_only.svg"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs137" />
+  <sodipodi:namedview
+     id="namedview137"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     showgrid="false"
+     inkscape:zoom="5.6568543"
+     inkscape:cx="348.69203"
+     inkscape:cy="38.448931"
+     inkscape:window-width="5120"
+     inkscape:window-height="1369"
+     inkscape:window-x="1912"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg137" />
+  <path
+     d="m 178.04447,135.21247 c 0.002,9.09742 0.17625,49.4843 0.17178,58.58172 -0.005,10.44131 -0.004,20.8826 0.002,31.32392 0.005,9.06176 0.005,18.12351 0.003,27.18527 -0.002,5.37036 -0.002,10.7407 0.002,16.11105 0.0204,38.14483 0.0204,38.14483 -0.54694,53.99548 l -0.10305,3.01772 c -0.80885,18.6575 -7.8096,35.94603 -20.4863,49.70518 l -2.15235,2.35938 c -12.39998,12.98838 -30.69723,23.86033 -49.02594,24.74586 -2.64076,0.0575 -5.28022,0.0839 -7.921566,0.10008 l -3.044189,0.03 c -3.328264,0.0316 -6.656542,0.0564 -9.984864,0.0811 -2.346596,0.0206 -4.693189,0.0416 -7.039779,0.063 -4.940416,0.044 -9.880843,0.0849 -14.821305,0.12331 -6.216775,0.0484 -12.433489,0.10212 -18.650202,0.158 -6.037887,0.054 -17.776846,0.19345 -40.2740759,0.28883 L 57.571753,137.10368 c 14.685204,-1.44088 35.90966,0.0974 45.537897,0.12284 41.79401,0.11064 74.93393,-6.04872 74.93482,-2.01405 z"
+     fill="#d62f60"
+     id="path1"
+     transform="translate(249.91406,6.8671875)"
+     sodipodi:nodetypes="cscsccccccccccscccsc" />
+  <path
+     d="m 64.688834,203.13197 c 0.0035,6.66536 0.0067,13.33073 0.0093,19.99609 l 9.86e-4,2.48865 c 0.005,13.72121 -0.0058,27.44236 -0.02756,41.16355 -0.01265,8.44313 -0.01133,16.88604 0.0085,25.32916 0.01266,5.78741 0.0111,11.57471 -0.0014,17.36211 -0.0067,3.33159 -0.0047,6.66256 0.01058,9.99416 0.111194,25.65838 0.111194,25.65838 -4.500365,37.04128 l -0.849251,2.18899 c -7.771476,18.55174 -21.788527,30.7335 -39.685905,38.97898 -3.37688,1.34444 -5.301227,2.48389 -8.978708,2.48389 l -3.2442484,1.47057 c -4.8987376,0.0599 -14.0045433,0.089 -15.4540455,0.10655 -25.7222011,0.30356 -49.7229121,-5.03616 -68.8916011,-23.19214 -3.286346,-3.24956 -6.197141,-6.66938 -8.810303,-10.47827 -1.170385,-1.6798 -3.844026,-5.57044 -5.590218,-8.45711 -0.851523,-1.40767 -3.595298,-4.4516 -7.983006,-16.21404 -0.853709,-1.50963 -2.403339,-12.94213 -2.403339,-12.94213 -0.0915,-1.48718 -0.23669,-2.92345 -0.23801,-4.41344 l -0.01,-2.78866 0.005,-3.06828 -0.007,-3.25582 c -0.006,-3.61823 -0.006,-7.23642 -0.005,-10.85466 -0.003,-2.58667 -0.006,-5.17335 -0.0102,-7.76002 -0.008,-6.30723 -0.0111,-12.61445 -0.0116,-18.92169 -4.7e-4,-5.12481 -0.003,-10.24962 -0.006,-15.37442 -0.009,-14.52085 -0.0134,-29.0417 -0.0127,-43.56255 l 1.3e-4,-2.37302 1.2e-4,-2.3759 c 4.1e-4,-12.71422 -0.009,-25.42841 -0.0233,-38.14262 -0.0143,-13.04611 -0.0213,-26.0922 -0.0204,-39.13831 3.3e-4,-7.32798 -0.002,-14.65593 -0.0132,-21.9839 -0.01,-6.88802 -0.01,-13.77597 -0.002,-20.663998 10e-4,-2.533683 1.124,-6.567371 1.118,-9.101047 -0.008,-3.44738 -1.128,-5.394528 82.246422,49.699935 83.374422,55.09446 83.377322,60.92629 83.380322,66.75811 z"
+     fill="#51cdc8"
+     id="path2"
+     transform="translate(112.81113,8.4930303)"
+     sodipodi:nodetypes="sscccccccccccccsccccccccscsccccccccs" />
+  <path
+     d="m 0,0 c 2.3047995,-6.7559e-4 4.6095989,-0.00164773 6.9143982,-0.00289917 4.8125578,-0.00146675 9.6250968,6.4331e-4 14.4376528,0.00534058 6.108101,0.00567724 12.216159,0.00242443 18.324259,-0.00357247 4.756666,-0.00364996 9.513323,-0.00244655 14.269991,1.2779e-4 2.249005,6.5808e-4 4.498012,-1.1905e-4 6.747016,-0.00247955 10.980782,-0.00899429 21.945816,0.06768592 32.917523,0.54693985 l 2.536386,0.10305596 C 119.97909,1.8334817 140.8053,14.193522 157.08594,31.132812 c 14.55199,16.47268 20.55085,36.163532 20.75,57.8125 0.0272,1.535344 0.0557,3.070663 0.0855,4.605958 0.0684,3.811023 0.11277,7.62181 0.14563,11.43329 0.018,2.0392 0.0412,21.15431 0.0616,30.38266 0.0376,3.46864 -119.042723,1.76559 -119.042723,1.76559 l -20.85965,1.44008 -111.140349,85.55992 c -0.161213,-39.22828 -0.161213,-39.22828 -0.195313,-55.73828 -0.02368,-11.37426 -0.05144,-22.7484 -0.106445,-34.12256 -0.04005,-8.28583 -0.06572,-16.57157 -0.0746,-24.8575 -0.0052,-4.3814 -0.01724,-8.76252 -0.04657,-13.143825 -0.02746,-4.136862 -0.03546,-8.273336 -0.02951,-12.41028 -0.0011,-1.50588 -0.0089,-3.011774 -0.02439,-4.517574 -0.131739,-13.445652 1.806738,-26.659985 8.289322,-38.647479 l 1.049072,-2.008056 c 2.851223,-5.317287 6.068313,-10.084275 10.138428,-14.554444 L -51.898437,21.875 C -43.655062,13.127533 -37.90534,5.8098811 -26.601562,1.8203125 l -12.3125,0.3125 v -1 C -25.942811,-0.00501656 -13.012554,-0.01357216 0,0 Z"
+     fill="#fec728"
+     id="path3"
+     transform="translate(249.91406,6.8671875)"
+     sodipodi:nodetypes="cccccccccccccccccscccccccccccc" />
+  <path
+     d="M 122.4545,-1.5555303 C 104.75322,5.7344897 77.764999,26.892615 70.396697,44.304966 65.927561,56.152831 64.595666,67.366945 64.64297,79.919079 c -0.0088,1.568853 -0.01926,3.137697 -0.03133,4.706528 -0.02754,4.203537 -0.03127,8.406777 -0.03028,12.610391 -0.0032,4.413592 -0.02883,8.827052 -0.05198,13.240572 -0.04035,8.33285 -0.06085,16.66561 -0.07397,24.99854 -0.01594,9.49723 -0.05439,18.99434 -0.09459,28.4915 -0.08212,19.51341 -0.136384,39.02681 -0.171948,58.54036 -3.137967,0.048 -6.275837,0.0763 -9.414062,0.10156 l -2.652588,0.0413 C 23.81406,222.81977 1.5565346,207.45478 -18.375829,188.75648 l -2.718735,-2.53775 c -8.235245,-7.71396 -16.371582,-15.53064 -24.472001,-23.38588 -5.420898,-5.25288 -10.871421,-10.46504 -16.411803,-15.59199 -41.322082,-38.29606 -41.811362,-38.47284 -39.697042,-61.82222 2.114319,-23.349383 3.306846,-25.445419 3.989278,-27.72417 6.748595,-20.960043 21.800751,-37.772405 41,-48.4375003 18.641419,-9.40752742 36.480818,-9.88154862 87.01386,-9.85750697 50.533043,0.0240417 73.811792,-1.09807633 92.064262,-0.98624303"
+     fill="#264863"
+     id="path4"
+     transform="translate(112.81113,8.4930303)"
+     sodipodi:nodetypes="cccccccccccccccccccc" />
+  <path
+     d="m 0,0 131.25,-0.25 v 63.875 l 0.11035,19.705566 c 0.0181,7.998291 0.0181,7.998291 0.0214,11.753754 0.006,2.598872 0.0186,5.19694 0.0405,7.79565 0.033,3.95755 0.0333,7.91478 0.0318,11.87247 l 0.0436,3.45275 c -0.0875,17.24733 -6.73078,32.78677 -18.61099,45.21278 C 106.22208,169.37917 98.630621,174.4762 90,177 l -11.397775,1.80377 -1.45256,0.16395 c -7.104685,-0.0441 -3.43355,-0.0556 -10.538337,-0.0776 -2.653987,-0.0101 -5.307964,-0.0237 -7.961914,-0.041 -3.807645,-0.0242 -7.615144,-0.0356 -11.422852,-0.0444 l -3.614349,-0.0313 -3.336334,-4.6e-4 -2.947357,-0.0135 c -2.521553,0.0131 41.626196,-2.01422 39.819227,0.21323 L 33,179 H 30.1875 24 c -1.532555,0.0113 -3.065107,0.0231 -4.597656,0.0352 -1.821614,0.009 -3.643229,0.0184 -5.464844,0.0273 l -2.798828,0.0254 -2.6738282,0.01 -2.4494629,0.0159 C 4,179 5.0139855,178.84803 4.0508683,177.7768 l 1.9580347,1.35049 -19.547353,-0.15833 -0.795115,0.0476 L -16,179 l -3.272949,0.0317 c -3.999316,0.0361 -7.998616,0.0591 -11.998047,0.0781 -1.732447,0.0101 -3.464876,0.0237 -5.197266,0.041 -2.487184,0.0242 -4.974145,0.0356 -7.461425,0.0444 l -2.35495,0.0313 c -1.906618,4e-4 -13.996389,0.0497 -15.899078,-0.0727 l 18.898307,-4.96534 C -32.858078,170.63158 -17.423649,159.0936 -8,141 c 5.0244847,-11.01947 7.29498468,-20.88967 7.31884766,-32.92383 l 0.0307674,-3.60735 c 0.0305076,-3.83335 0.0477557,-7.666634 0.0644474,-11.50007 0.0169446,-2.374681 0.0347624,-4.749356 0.0534668,-7.124023 C -0.4694063,77.063221 -0.4232179,68.2816 -0.375,59.5 Z"
+     fill="#773aaa"
+     id="path5"
+     transform="translate(177,231)"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccc" />
+  <path
+     d="m 130.75,72.125 c 0,0 -130.9459176,38.46063 -130.5354588,-0.05093 L 130.75,72.125 l 0.5,86.75 L 0,159 0.2145412,72.074065"
+     fill="#ef7a34"
+     id="path6"
+     transform="translate(177,72)"
+     sodipodi:nodetypes="cccccc" />
+  <path
+     d="M0 0 C4 1 4 1 4 1 Z "
+     fill="#19F2F2"
+     transform="translate(75,409)"
+     id="path21" />
+  <path
+     d="M0 0 C4 1 4 1 4 1 Z "
+     fill="#2A4A4A"
+     transform="translate(159,7)"
+     id="path22" />
+  <path
+     d="M0 0 C4 1 4 1 4 1 Z "
+     fill="#001F1F"
+     transform="translate(143,7)"
+     id="path23" />
+  <path
+     d="M0 0 C4 1 4 1 4 1 Z "
+     fill="#000000"
+     transform="translate(125,7)"
+     id="path24" />
+  <path
+     d="M0 0 C3 1 3 1 3 1 Z "
+     fill="#2A2AD4"
+     transform="translate(203,411)"
+     id="path25" />
+  <path
+     d="M0 0 C3 1 3 1 3 1 Z "
+     fill="#46B8E2"
+     transform="translate(80,410)"
+     id="path26" />
+  <path
+     d="M0 0 C3 1 3 1 3 1 Z "
+     fill="#005454"
+     transform="translate(84,7)"
+     id="path27" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path28" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#0000FF"
+     transform="translate(228,411)"
+     id="path29" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#0000FF"
+     transform="translate(214,411)"
+     id="path30" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#3F3FBF"
+     transform="translate(196,411)"
+     id="path31" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#0000FF"
+     transform="translate(172,411)"
+     id="path32" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#3F3FDF"
+     transform="translate(147,411)"
+     id="path33" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#3FBFBF"
+     transform="translate(115,411)"
+     id="path34" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#3FBFBF"
+     transform="translate(107,411)"
+     id="path35" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#00FFFF"
+     transform="translate(83,411)"
+     id="path36" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#7FFFFF"
+     transform="translate(63,405)"
+     id="path37" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#AA5555"
+     transform="translate(400,389)"
+     id="path38" />
+  <path
+     d=""
+     fill="#FF003F"
+     transform="translate(0,0)"
+     id="path39" />
+  <path
+     d=""
+     fill="#5FDFDF"
+     transform="translate(0,0)"
+     id="path40" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path41" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#4A4A6A"
+     transform="translate(60,14)"
+     id="path42" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#000000"
+     transform="translate(200,7)"
+     id="path43" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#3F3F3F"
+     transform="translate(183,7)"
+     id="path44" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#000000"
+     transform="translate(170,7)"
+     id="path45" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#003F3F"
+     transform="translate(108,7)"
+     id="path46" />
+  <path
+     d="M0 0 C2 1 2 1 2 1 Z "
+     fill="#94946A"
+     transform="translate(232,6)"
+     id="path48" />
+  <path
+     d=""
+     fill="#FF00FF"
+     transform="translate(0,0)"
+     id="path49" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path50" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path51" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path52" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path53" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path54" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path55" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path56" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path57" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path58" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path59" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path60" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path61" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path62" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path63" />
+  <path
+     d=""
+     fill="#FF00FF"
+     transform="translate(0,0)"
+     id="path64" />
+  <path
+     d=""
+     fill="#FF00FF"
+     transform="translate(0,0)"
+     id="path65" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path66" />
+  <path
+     d=""
+     fill="#5555AA"
+     transform="translate(0,0)"
+     id="path67" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path68" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path69" />
+  <path
+     d=""
+     fill="#7F7F7F"
+     transform="translate(0,0)"
+     id="path70" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path71" />
+  <path
+     d=""
+     fill="#7F7F7F"
+     transform="translate(0,0)"
+     id="path72" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path73" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path74" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path75" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path76" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path77" />
+  <path
+     d=""
+     fill="#0000FF"
+     transform="translate(0,0)"
+     id="path78" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path79" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path80" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path81" />
+  <path
+     d=""
+     fill="#FF007F"
+     transform="translate(0,0)"
+     id="path82" />
+  <path
+     d=""
+     fill="#55AAAA"
+     transform="translate(0,0)"
+     id="path83" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path84" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path85" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path86" />
+  <path
+     d=""
+     fill="#55AAAA"
+     transform="translate(0,0)"
+     id="path87" />
+  <path
+     d=""
+     fill="#55AAAA"
+     transform="translate(0,0)"
+     id="path88" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path89" />
+  <path
+     d=""
+     fill="#7F7FFF"
+     transform="translate(0,0)"
+     id="path90" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path91" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path92" />
+  <path
+     d=""
+     fill="#7F7F7F"
+     transform="translate(0,0)"
+     id="path93" />
+  <path
+     d=""
+     fill="#55AAAA"
+     transform="translate(0,0)"
+     id="path94" />
+  <path
+     d=""
+     fill="#7FFFFF"
+     transform="translate(0,0)"
+     id="path95" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path96" />
+  <path
+     d=""
+     fill="#FF0000"
+     transform="translate(0,0)"
+     id="path97" />
+  <path
+     d=""
+     fill="#00FFFF"
+     transform="translate(0,0)"
+     id="path98" />
+  <path
+     d=""
+     fill="#55AAAA"
+     transform="translate(0,0)"
+     id="path99" />
+  <path
+     d=""
+     fill="#007F7F"
+     transform="translate(0,0)"
+     id="path100" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path101" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path102" />
+  <path
+     d=""
+     fill="#FF7F00"
+     transform="translate(0,0)"
+     id="path103" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path104" />
+  <path
+     d=""
+     fill="#007F7F"
+     transform="translate(0,0)"
+     id="path105" />
+  <path
+     d=""
+     fill="#FF7F00"
+     transform="translate(0,0)"
+     id="path106" />
+  <path
+     d=""
+     fill="#005555"
+     transform="translate(0,0)"
+     id="path107" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path108" />
+  <path
+     d=""
+     fill="#3F3F7F"
+     transform="translate(0,0)"
+     id="path109" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path110" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path111" />
+  <path
+     d=""
+     fill="#FF7F00"
+     transform="translate(0,0)"
+     id="path112" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path113" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path114" />
+  <path
+     d=""
+     fill="#FF7F00"
+     transform="translate(0,0)"
+     id="path115" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path116" />
+  <path
+     d=""
+     fill="#FF7F00"
+     transform="translate(0,0)"
+     id="path117" />
+  <path
+     d=""
+     fill="#7F7F7F"
+     transform="translate(0,0)"
+     id="path118" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path119" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path120" />
+  <path
+     d=""
+     fill="#7F7F7F"
+     transform="translate(0,0)"
+     id="path121" />
+  <path
+     d=""
+     fill="#007F7F"
+     transform="translate(0,0)"
+     id="path122" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path123" />
+  <path
+     d=""
+     fill="#007F7F"
+     transform="translate(0,0)"
+     id="path124" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path125" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path126" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path127" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path128" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path129" />
+  <path
+     d=""
+     fill="#555555"
+     transform="translate(0,0)"
+     id="path130" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path131" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path132" />
+  <path
+     d=""
+     fill="#919148"
+     transform="translate(0,0)"
+     id="path133" />
+  <path
+     d=""
+     fill="#FFFF00"
+     transform="translate(0,0)"
+     id="path134" />
+  <path
+     d=""
+     fill="#7F7F7F"
+     transform="translate(0,0)"
+     id="path135" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path136" />
+  <path
+     d=""
+     fill="#000000"
+     transform="translate(0,0)"
+     id="path137" />
+</svg>

lib/Components/color_picker_input_container.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:manager_app/Components/color_picker.dart';
+import 'package:manager_app/constants.dart';
 
 class ColorPickerInputContainer extends StatefulWidget {
   final String? color;
@@ -16,7 +17,8 @@ class ColorPickerInputContainer extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _ColorPickerInputContainerState createState() => _ColorPickerInputContainerState();
+  _ColorPickerInputContainerState createState() =>
+      _ColorPickerInputContainerState();
 }
 
 class _ColorPickerInputContainerState extends State<ColorPickerInputContainer> {
@@ -28,7 +30,8 @@ class _ColorPickerInputContainerState extends State<ColorPickerInputContainer> {
     try {
       colorVar = widget.color == null || widget.color!.isEmpty
           ? Colors.grey
-          : Color(int.parse(widget.color!.split('(0x')[1].split(')')[0], radix: 16));
+          : Color(int.parse(
+          widget.color!.split('(0x')[1].split(')')[0], radix: 16));
     } catch (e) {
       colorVar = Colors.grey;
     }
@@ -36,15 +39,28 @@ class _ColorPickerInputContainerState extends State<ColorPickerInputContainer> {
 
   @override
   Widget build(BuildContext context) {
-    return FormField<Color>(
+    return Row(
-      initialValue: colorVar,
+      crossAxisAlignment: CrossAxisAlignment.center,
-      builder: (state) {
+      mainAxisAlignment: MainAxisAlignment.center,
-        return InputDecorator(
+      children: [
-          decoration: InputDecoration(
+        Align(
-            labelText: widget.label,
+          alignment: AlignmentDirectional.centerStart,
-            border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
+          child: Text(
-            contentPadding: EdgeInsets.symmetric(horizontal: 25, vertical: 20),
+            widget.label,
+            style: const TextStyle(
+              fontWeight: FontWeight.w400,
+              fontSize: 16,
             ),
+          ),
+        ),
+        const SizedBox(height: 8, width: 10),
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          /*decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(color: Colors.grey.shade400, width: 1.2),
+          ),*/
           child: InkWell(
             onTap: () {
               showColorPicker(colorVar, (Color color) {
@@ -64,8 +80,8 @@ class _ColorPickerInputContainerState extends State<ColorPickerInputContainer> {
               ),
             ),
           ),
-        );
+        ),
-      },
+      ],
     );
   }
 

lib/Components/common_loader.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:manager_app/constants.dart';
 
 class CommonLoader extends StatefulWidget {
@@ -44,7 +45,10 @@ class _CommonLoaderState extends State<CommonLoader> with TickerProviderStateMix
     return Center(
       child: RotationTransition(
         turns: Tween(begin: 0.0, end: 3.0).animate(_controller!),
-        child: Icon(Icons.museum_outlined, color: kPrimaryColor, size: widget.iconSize == null ? size.height*0.1 : widget.iconSize!),
+        child: SizedBox(
+          height: 45,
+          child: SvgPicture.asset('assets/images/MyInfoMate_logo_only.svg')
+        )/*Icon(Icons.museum_outlined, color: kPrimaryColor, size: widget.iconSize == null ? size.height*0.1 : widget.iconSize!)*/,
       ),
     );
   }

lib/Components/multi_select_dropdown_language_container.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:multi_select_flutter/multi_select_flutter.dart';
 import 'package:manager_app/constants.dart';
 
-class MultiSelectDropdownLanguageContainer extends StatelessWidget {
+class MultiSelectDropdownLanguageContainer extends StatefulWidget {
   final Color color;
   final String label;
   final String labelHint;
@@ -26,58 +26,84 @@ class MultiSelectDropdownLanguageContainer extends StatelessWidget {
     required this.onChanged,
   }) : super(key: key);
 
+  @override
+  State<MultiSelectDropdownLanguageContainer> createState() =>
+      _MultiSelectDropdownLanguageContainerState();
+}
+
+class _MultiSelectDropdownLanguageContainerState
+    extends State<MultiSelectDropdownLanguageContainer> {
+  late List<String> _selectedValues;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedValues = List.from(widget.initialValue);
+  }
+
+  String _buildSummary(List<String> selected) {
+    if (selected.isEmpty) return widget.labelHint;
+    if (selected.length <= 5) return selected.join(", ");
+    return "${selected.length} sélectionnés";
+  }
+
   @override
   Widget build(BuildContext context) {
-    return FormField<List<String>>(
+    return Row(
-      initialValue: initialValue,
+      crossAxisAlignment: CrossAxisAlignment.center,
-      builder: (state) {
+      mainAxisAlignment: MainAxisAlignment.center,
-        return InputDecorator(
+      children: [
-          decoration: InputDecoration(
+        Align(
-            labelText: label,
+          alignment: AlignmentDirectional.centerStart,
-            border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
+          child: Text(
-            contentPadding: EdgeInsets.symmetric(horizontal: 25, vertical: 20),
+            widget.label,
+            style: const TextStyle(
+              fontWeight: FontWeight.w400,
+              fontSize: 16,
             ),
-          child: Builder(
+          ),
-            builder: (context) {
+        ),
-              return MultiSelectDialogField<String>(
+        const SizedBox(height: 8, width: 10),
-                items: values.map((e) => MultiSelectItem(e, e)).toList(),
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 35),
+          /*decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(color: Colors.grey.shade400, width: 1.2),
+            color: Colors.white,
+          ),*/
+          child: MultiSelectDialogField<String>(
+            items: widget.values.map((e) => MultiSelectItem(e, e)).toList(),
+            initialValue: _selectedValues,
             listType: MultiSelectListType.LIST,
-                initialValue: state.value ?? [],
-                buttonText: Text(
-                  (state.value == null || state.value!.isEmpty)
-                      ? "Aucune sélection"
-                      : _buildSummary(state.value!),
-                ),
-                title: Text(labelHint),
             searchable: true,
+            searchIcon: Icon(Icons.search, color: kPrimaryColor),
             selectedColor: kPrimaryColor,
             checkColor: Colors.white,
+            buttonIcon: Icon(Icons.arrow_drop_down, color: kPrimaryColor),
+            buttonText: Text(
+              _buildSummary(_selectedValues),
+              style: TextStyle(color: Colors.black87, fontSize: 14),
+            ),
             chipDisplay: MultiSelectChipDisplay.none(),
             dialogHeight: MediaQuery.of(context).size.height * 0.4,
             dialogWidth: MediaQuery.of(context).size.width * 0.6,
             onConfirm: (selected) {
-                  if (isAtLeastOne && selected.isEmpty) {
+              if (widget.isAtLeastOne && selected.isEmpty) {
                 ScaffoldMessenger.of(context).showSnackBar(
                   SnackBar(
                     content: Text("Au moins une valeur doit être sélectionnée"),
                   ),
                 );
               } else {
-                    onChanged(selected.cast<String>());
+                setState(() {
-                    state.didChange(selected);
+                  _selectedValues = selected.cast<String>();
+                });
+                widget.onChanged(_selectedValues);
               }
             },
-              );
-            },
           ),
+        ),
+      ],
     );
-      },
-    );
-  }
-
-  String _buildSummary(List<String> selected) {
-    if (selected.isEmpty) return "Aucune sélection";
-    if (selected.length <= 5) return selected.join(", ");
-    return "${selected.length} sélectionnés";
   }
 }

lib/Components/resource_input_container.dart

@@ -39,8 +39,8 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
 
   @override
   void initState() {
-    resourceIdToShow = widget.initialValue;
     super.initState();
+    resourceIdToShow = widget.initialValue;
   }
 
   @override
@@ -51,15 +51,27 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
       resourceIdToShow = widget.initialValue;
     }
 
-    return FormField<String>(
+    return Row(
-      initialValue: resourceIdToShow,
+      mainAxisAlignment: MainAxisAlignment.center,
-      builder: (state) {
+      children: [
-        return InputDecorator(
+        Align(
-          decoration: InputDecoration(
+          alignment: AlignmentDirectional.centerStart,
-            labelText: widget.label,
+          child: Text(
-            border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
+            widget.label,
-            contentPadding: EdgeInsets.symmetric(horizontal: 25, vertical: 20),
+            style: const TextStyle(
+              fontWeight: FontWeight.w400,
+              fontSize: 16,
             ),
+          ),
+        ),
+        const SizedBox(height: 8, width: 10),
+        Container(
+          padding: const EdgeInsets.all(4),
+          /*decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(color: Colors.grey.shade400, width: 1.2),
+          ),*/
           child: InkWell(
             onTap: () async {
               ResourceDTO? result = await showSelectResourceModal(
@@ -81,7 +93,7 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
             },
             child: Container(
               height: widget.isSmall ? 35 : 100,
-              width: widget.isSmall ? 60 : double.infinity,
+              width: widget.isSmall ? 60 : 120,
               alignment: Alignment.center,
               decoration: BoxDecoration(
                 color: resourceIdToShow == null ? widget.color : Colors.transparent,
@@ -90,7 +102,10 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
               child: resourceIdToShow == null
                   ? Text(
                 "Choisir",
-                style: TextStyle(color: kWhite, fontSize: widget.fontSize),
+                style: TextStyle(
+                  color: kWhite,
+                  fontSize: widget.fontSize,
+                ),
                 maxLines: 1,
               )
                   : FutureBuilder<ResourceDTO?>(
@@ -100,7 +115,7 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
                     .resourceGetDetail(resourceIdToShow!),
                 builder: (context, snapshot) {
                   if (snapshot.connectionState == ConnectionState.waiting) {
-                    return SizedBox(
+                    return const SizedBox(
                       width: 24,
                       height: 24,
                       child: CircularProgressIndicator(strokeWidth: 2),
@@ -108,7 +123,10 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
                   } else if (snapshot.hasError || snapshot.data == null) {
                     return Text(
                       "Erreur",
-                      style: TextStyle(color: kWhite, fontSize: widget.fontSize),
+                      style: TextStyle(
+                        color: kWhite,
+                        fontSize: widget.fontSize,
+                      ),
                       maxLines: 1,
                     );
                   } else {
@@ -126,8 +144,8 @@ class _ResourceInputContainerState extends State<ResourceInputContainer> {
               ),
             ),
           ),
-        );
+        ),
-      },
+      ],
     );
   }
 }

lib/Components/segmented_enum_input_container.dart

@@ -42,16 +42,30 @@ class _SegmentedEnumInputContainerState<T>
 
   @override
   Widget build(BuildContext context) {
-    return FormField<T>(
+    return Row(
-      initialValue: selectedValue,
+      crossAxisAlignment: CrossAxisAlignment.center,
-      builder: (state) {
+      mainAxisAlignment: MainAxisAlignment.center,
-        return InputDecorator(
+      children: [
-          decoration: InputDecoration(
+        Align(
-            labelText: widget.label,
+          alignment: AlignmentDirectional.centerStart,
-            border: OutlineInputBorder(
+          child: Text(
-                borderRadius: BorderRadius.circular(widget.borderRadius)),
+            widget.label,
-            contentPadding: EdgeInsets.symmetric(horizontal: 25, vertical: 20),
+            style: const TextStyle(
+              fontWeight: FontWeight.w400,
+              fontSize: 16,
             ),
+          ),
+        ),
+        const SizedBox(height: 8, width: 10),
+        Container(
+          width: 275,
+          height: 120,
+          padding: const EdgeInsets.all(4),
+          /*decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(widget.borderRadius),
+            border: Border.all(color: Colors.grey.shade400, width: 1.2),
+          ),*/
           child: Row(
             children: widget.values.map((v) {
               bool isSelected = v == selectedValue;
@@ -61,27 +75,28 @@ class _SegmentedEnumInputContainerState<T>
                   onTap: () {
                     setState(() {
                       selectedValue = v;
-                      state.didChange(v);
                     });
                     widget.onChanged(v);
                   },
                   child: AnimatedContainer(
-                    duration: Duration(milliseconds: 250),
+                    duration: const Duration(milliseconds: 250),
-                    margin: EdgeInsets.symmetric(horizontal: 4),
+                    margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
-                    padding: EdgeInsets.symmetric(vertical: 10),
+                    padding: const EdgeInsets.symmetric(vertical: 10),
                     decoration: BoxDecoration(
-                      color: isSelected ? widget.selectedColor : kSecond,
+                      color: isSelected ? widget.selectedColor : widget.unselectedColor,
                       borderRadius: BorderRadius.circular(widget.borderRadius),
                     ),
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         Icon(data['icon'], color: widget.textColor),
-                        SizedBox(width: 4),
+                        const SizedBox(width: 4),
                         Text(
                           data['label'],
                           style: TextStyle(
-                              color: widget.textColor, fontWeight: FontWeight.w400),
+                            color: widget.textColor,
+                            fontWeight: FontWeight.w400,
+                          ),
                         ),
                       ],
                     ),
@@ -90,8 +105,8 @@ class _SegmentedEnumInputContainerState<T>
               );
             }).toList(),
           ),
-        );
+        ),
-      },
+      ],
     );
   }
 }

lib/Components/single_choice_input_container.dart

@@ -2,11 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:manager_api_new/api.dart';
 import 'package:manager_app/constants.dart';
 
-class SingleChoiceInputContainer<T> extends StatelessWidget {
+class SingleChoiceInputContainer<T> extends StatefulWidget {
   final String label;
+  final String selectLabel;
   final T? selected;
   final List<T> values;
-  final ValueChanged<T> onChanged;
+  final ValueChanged<T?> onChanged;
   final double borderRadius;
   final Color selectedColor;
   final Color textColor;
@@ -14,6 +15,7 @@ class SingleChoiceInputContainer<T> extends StatelessWidget {
   const SingleChoiceInputContainer({
     Key? key,
     required this.label,
+    required this.selectLabel,
     required this.selected,
     required this.values,
     required this.onChanged,
@@ -22,43 +24,82 @@ class SingleChoiceInputContainer<T> extends StatelessWidget {
     this.textColor = kWhite,
   }) : super(key: key);
 
+  @override
+  State<SingleChoiceInputContainer<T>> createState() =>
+      _SingleChoiceInputContainerState<T>();
+}
+
+class _SingleChoiceInputContainerState<T>
+    extends State<SingleChoiceInputContainer<T>> {
+  T? _selected;
+
+  @override
+  void initState() {
+    super.initState();
+    _selected = widget.selected;
+  }
+
   @override
   Widget build(BuildContext context) {
-    return FormField<T>(
+    return FormField<T?>(
-      initialValue: selected,
+      initialValue: _selected,
       builder: (state) {
-        return InputDecorator(
+        return Row(
-          decoration: InputDecoration(
+          crossAxisAlignment: CrossAxisAlignment.center,
-            labelText: label,
+          mainAxisAlignment: MainAxisAlignment.center,
-            border: OutlineInputBorder(
+          children: [
-              borderRadius: BorderRadius.circular(borderRadius),
+            Text(
+              widget.label,
+              style: const TextStyle(
+                fontWeight: FontWeight.w400,
+                fontSize: 16,
               ),
-            contentPadding:
-            const EdgeInsets.symmetric(horizontal: 25, vertical: 20),
             ),
-          child: DropdownButtonHideUnderline(
+            const SizedBox(height: 8, width: 10),
+            Container(
+              width: 225,
+              height: 60,
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              /*decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(widget.borderRadius),
+                border: Border.all(color: Colors.grey.shade400, width: 1.2),
+                color: Colors.white,
+              ),*/
               child: DropdownButton<T>(
-              value: selected,
+                underline: const SizedBox(
+                  child: Divider(height: 0, thickness: 1.5, color: kPrimaryColor),
+                ),
+                focusColor: Colors.transparent,
+                icon: const Icon(Icons.arrow_drop_down, color: kPrimaryColor),
                 isExpanded: true,
-              // todo handle view
+                value: _selected,
-              items: values.map((v) {
+                hint: Text(
+                  widget.selectLabel,
+                  style: TextStyle(color: Colors.grey.shade600),
+                ),
+                items: widget.values.map((v) {
                   return DropdownMenuItem<T>(
                     value: v,
-                  child: Row(
+                    child: Text(
-                    children: [
+                      (v as SectionEventDTO).label ?? "",
-                      Text((v as SectionEventDTO).label ?? ""), // TODO Update to handle more types !
+                      style: const TextStyle(fontSize: 14),
-                    ],
                     ),
                   );
                 }).toList(),
                 onChanged: (value) {
-                if (value != null) {
+                  setState(() {
-                  onChanged(value);
+                    if (value is SectionEventDTO && value.id == null) {
-                  state.didChange(value);
+                      _selected = null; // affiche le hint
+                    } else {
+                      _selected = value;
                     }
+                  });
+                  widget.onChanged(_selected);
+                  state.didChange(_selected);
                 },
               ),
             ),
+          ],
         );
       },
     );

lib/Screens/Applications/app_configuration_link_screen.dart

@@ -36,56 +36,42 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
     ManagerAppContext managerAppContext = appContext.getContext() as ManagerAppContext;
 
     _generalInfoCard() {
+
+      var elementWidth = 400.0;
+      var elementHeight = 125.0;
+
       return Card(
         margin: const EdgeInsets.symmetric(vertical: 8),
-        color: kSecond,
+        color: kWhite,
-        elevation: 2,
+        elevation: 0,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Text("Informations générales", style: Theme.of(context).textTheme.titleMedium),
+              Text("Informations générales", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 21)),
               SizedBox(height: 8),
-              Wrap(
+              Expanded(
+                child: Center(
+                  child: SingleChildScrollView(
+                    child: Wrap(
+                      alignment: WrapAlignment.center,
+                      crossAxisAlignment: WrapCrossAlignment.center,
+                      runAlignment: WrapAlignment.center,
                       spacing: 16,
                       runSpacing: 16,
-              /*GridView.count(
-                crossAxisCount: size.width > 800 ? 2 : 1,
-                crossAxisSpacing: 8,
-                mainAxisSpacing: 8,
-                shrinkWrap: true,
-                physics: NeverScrollableScrollPhysics(),
-                childAspectRatio: 3,*/
                       children: [
-                  // Titre affiché main
-                  /*SizedBox(
-                    width: 300,
-                    child: MultiStringInputContainer(
-                              label: "Titre affiché:",
-                              modalLabel: "Titre",
-                              color: kPrimaryColor,
-                              initialValue: [],
-                              onGetResult: (value) {
-                                /*if (sectionDTO.title! != value) {
-                                  sectionDTO.title = value;
-                                  save(true, appContext);
-                                }*/
-                              },
-                              maxLines: 1,
-                              isHTML: true,
-                              isTitle: true,
-                            ),
-                  ),*/
                         // Image principale
-                  SizedBox(
+                        Container(
-                    width: 300,
+                          width: elementWidth,
+                          height: elementHeight,
+                          child: Center(
                             child: ResourceInputContainer(
                               label: "Image principale :",
                               initialValue: widget.applicationInstanceDTO.mainImageId,
                               color: kPrimaryColor,
                               imageFit: BoxFit.fitHeight,
-                      onChanged: (ResourceDTO resource) {
+                              onChanged: (ResourceDTO resource) async {
                                 if(resource.id == null) {
                                   widget.applicationInstanceDTO.mainImageId = null;
                                   widget.applicationInstanceDTO.mainImageUrl = null;
@@ -93,18 +79,30 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                                   widget.applicationInstanceDTO.mainImageId = resource.id;
                                   widget.applicationInstanceDTO.mainImageUrl = resource.url;
                                 }
+
+                                // automatic save
+                                var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                if(applicationLink != null) {
+                                  showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                  setState(() {
+
+                                  });
+                                }
                               },
                             ),
                           ),
+                        ),
                         // Image Loader
-                  SizedBox(
+                        Container(
-                    width: 300,
+                          width: elementWidth,
+                          height: elementHeight,
+                          child: Center(
                             child: ResourceInputContainer(
                               label: "Loader :",
                               initialValue: widget.applicationInstanceDTO.loaderImageId,
                               color: kPrimaryColor,
                               imageFit: BoxFit.fitHeight,
-                      onChanged: (ResourceDTO resource) {
+                              onChanged: (ResourceDTO resource) async {
                                 if(resource.id == null) {
                                   widget.applicationInstanceDTO.loaderImageId = null;
                                   widget.applicationInstanceDTO.loaderImageUrl = null;
@@ -112,51 +110,96 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                                   widget.applicationInstanceDTO.loaderImageId = resource.id;
                                   widget.applicationInstanceDTO.loaderImageUrl = resource.url;
                                 }
+
+                                // automatic save
+                                var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                if(applicationLink != null) {
+                                  showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                  setState(() {
+
+                                  });
+                                }
                               },
                             ),
                           ),
+                        ),
                         // Primary color
-                  SizedBox(
+                        Container(
-                    width: 300,
+                          width: elementWidth,
+                          height: elementHeight,
+                          child: Center(
                             child: ColorPickerInputContainer(
                               label: "Couleur principale :",
                               fontSize: 20,
                               color: widget.applicationInstanceDTO.primaryColor,
-                      onChanged: (value) {
+                              onChanged: (value) async {
                                 widget.applicationInstanceDTO.primaryColor = value;
+                                // automatic save
+                                var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                if(applicationLink != null) {
+                                  showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                  setState(() {
+
+                                  });
+                                }
                               },
                             ),
                           ),
+                        ),
                         // Secondary color
                         SizedBox(
-                    width: 300,
+                          width: elementWidth,
+                          height: elementHeight,
+                          child: Center(
                             child: ColorPickerInputContainer(
                               label: "Couleur secondaire :",
                               fontSize: 20,
                               color: widget.applicationInstanceDTO.secondaryColor,
-                      onChanged: (value) {
+                              onChanged: (value) async {
                                 widget.applicationInstanceDTO.secondaryColor = value;
+                                // automatic save
+                                var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                if(applicationLink != null) {
+                                  showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                  setState(() {
+
+                                  });
+                                }
                               },
                             ),
                           ),
+                        ),
                         // Layout (Grid or Mansonry)
                         SizedBox(
-                      width: 300,
+                            width: elementWidth,
+                            height: elementHeight,
+                            child: Center(
                               child: SegmentedEnumInputContainer(
                                 label: "Affichage :",
                                 selected: LayoutMainPageType.MasonryGrid,
                                 values: LayoutMainPageType.values,
                                 inputValues: { LayoutMainPageType.SimpleGrid: {'label': 'Grille', 'icon': Icons.grid_view}, LayoutMainPageType.MasonryGrid : {'label': 'Masonry', 'icon': Icons.view_quilt }},
-                        onChanged: (value) {
+                                onChanged: (value) async {
                                   var tempOutput = value;
                                   widget.applicationInstanceDTO.layoutMainPage = tempOutput;
+                                  // automatic save
+                                  var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                  if(applicationLink != null) {
+                                    showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                    setState(() {
+
+                                    });
+                                  }
                                   //print(configurationDTO.languages);
                                 },
+                              ),
                             )
                         ),
                         // Langues
                         SizedBox(
-                    width: 300,
+                          width: elementWidth,
+                          height: elementHeight,
+                          child: Center(
                             child: MultiSelectDropdownLanguageContainer(
                               label: "Langues :",
                               initialValue: widget.applicationInstanceDTO.languages != null ? widget.applicationInstanceDTO.languages!: [],
@@ -164,16 +207,27 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                               isMultiple: true,
                               fontSize: 20,
                               isAtLeastOne: true,
-                      onChanged: (value) {
+                              onChanged: (value) async {
                                 var tempOutput = new List<String>.from(value);
                                 widget.applicationInstanceDTO.languages = tempOutput;
+                                // automatic save
+                                var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                if(applicationLink != null) {
+                                  showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                  setState(() {
+
+                                  });
+                                }
                                 //print(configurationDTO.languages);
                               },
                             ),
                           ),
+                        ),
                         // Highlight / Event principal
-                  SizedBox(
+                        Container(
-                      width: 300,
+                          width: elementWidth,
+                          height: elementHeight,
+                          child: Center(
                             child: FutureBuilder(
                               future: getSectionEvents(appContext, widget.applicationInstanceDTO),
                               builder: (context, snapshot) {
@@ -181,23 +235,45 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                                 var rawSubsections = jsonDecode(jsonEncode(snapshot.data));
                                 rawSubsections = rawSubsections?.map((json) => SectionEventDTO.fromJson(json)).toList();
                                 List<SectionEventDTO>? sectionEvents = rawSubsections?.whereType<SectionEventDTO>().toList();
+                                sectionEvents = sectionEvents == null ? [] : sectionEvents;
 
-                          return SingleChoiceInputContainer<SectionEventDTO>(
+                                sectionEvents.add(SectionEventDTO(id: null, label: "Aucun"));
+
+                                return SingleChoiceInputContainer<SectionEventDTO?>(
                                   label: "Evènement à l'affiche :",
+                                  selectLabel: "Choisir un évènement",
                                   selected: widget.applicationInstanceDTO.sectionEventDTO,
-                            values: sectionEvents != null ? sectionEvents.toList() : [],
+                                  values: sectionEvents.toList(),
-                            onChanged: (SectionEventDTO sectionEvent) {
+                                  onChanged: (SectionEventDTO? sectionEvent) async {
+                                    if(sectionEvent == null) {
+                                      widget.applicationInstanceDTO.sectionEventId = null;
+                                      widget.applicationInstanceDTO.sectionEventDTO = null;
+                                      return;
+                                    }
                                     print("Sélectionné: $sectionEvent");
                                     print(sectionEvent.label);
                                     print(sectionEvent.id);
                                     widget.applicationInstanceDTO.sectionEventId = sectionEvent.id;
+
+                                    // automatic save
+                                    var applicationLink = await updateApplicationInstance(appContext, widget.applicationInstanceDTO);
+                                    if(applicationLink != null) {
+                                      showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
+                                      setState(() {
+
+                                      });
+                                    }
                                   },
                                 );
                               }
-                      )
+                            ),
+                          ),
                         ),
                       ],
-              ) // tes champs
+                    ),
+                  ),
+                ),
+              )
             ],
           ),
         ),
@@ -207,19 +283,18 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
     _phoneConfigCard(List<AppConfigurationLinkDTO>? appConfigurationLinks) {
       return Card(
         margin: const EdgeInsets.symmetric(vertical: 8),
-        color: kSecond,
+        color: kWhite,
-        elevation: 2,
+        elevation: 0,
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text("Configurations sur le téléphone", style: Theme.of(context).textTheme.titleMedium),
-              SizedBox(height: 8),
-              appConfigurationLinks != null ? SingleChildScrollView(
         child: Stack(
+          //crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-                    Container(
+            Padding(
+              padding: const EdgeInsets.all(16),
+              child: Text("Configurations sur le téléphone", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 21)),
+            ),
+            appConfigurationLinks != null ? Padding(
+              padding: const EdgeInsets.only(left: 32, right: 32, top: 75),
+              child: Container(
                 height: size.height * 0.6,
                 width: size.width * 0.8,
                 constraints: BoxConstraints(
@@ -227,7 +302,8 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                     minWidth: 300,
                     maxHeight: 500
                 ),
-                      color: Colors.blue,
+                //color: Colors.blue,
+                child: SingleChildScrollView(
                   child: ReorderableCustomList<AppConfigurationLinkDTO>(
                     items: appConfigurationLinks,
                     shrinkWrap: true,
@@ -242,6 +318,7 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                       var result = await updateAppConfigurationOrder(appContext, updatedList);
                       setState(() {
                         // for refresh
+                        showNotification(kSuccess, kWhite, "Application mobile mise à jour succès", context, null);
                       });
                     },
                     actions: [
@@ -367,44 +444,6 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                     },
                   ),
                 ),
-                    Positioned(
-                      bottom: 20,
-                      right: 20,
-                      child: InkWell(
-                        onTap: () async {
-                          // Show configuration selector to link with !
-                          var result = await showAddConfigurationLink(context, appContext, managerAppContext.instanceDTO!, appConfigurationLinks.map((acl) => acl.configurationId!).toList() ?? []);
-                          if(result != null) {
-                            for(var configurationId in result) {
-                              AppConfigurationLinkDTO appConfigurationLinkDTO = AppConfigurationLinkDTO(
-                                  applicationInstanceId: widget.applicationInstanceDTO.id,
-                                  configurationId: configurationId,
-                                  isActive: true,
-                                  isDate: false,
-                                  isHour: false,
-                                  isSectionImageBackground: false,
-                                  layoutMainPage: LayoutMainPageType.SimpleGrid
-                              );
-                              await addConfigurationToApp(appContext, appConfigurationLinkDTO, widget.applicationInstanceDTO);
-                            }
-                            setState(() {
-                              // Refresh ui
-                            });
-                          }
-                        },
-                        child: Container(
-                            height: 85,
-                            width: 85,
-                            decoration: BoxDecoration(
-                              color: kSuccess,
-                              borderRadius: BorderRadius.circular(8.0),
-                            ),
-                            child: Padding(
-                              padding: const EdgeInsets.all(8.0),
-                              child: Icon(Icons.add, size: 25, color: kWhite),
-                            )
-                        ),
-                      ),
               ),
               /*PhoneMockup(
                                   child: Center(
@@ -460,11 +499,47 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
                                     ),
                                   ),
                                 ),*/
-                  ],
-                ),
             ): Center(child: Text("No data")),
-            ],
+            appConfigurationLinks != null ? Positioned(
+              top: 8,
+              right: 8,
+              child: InkWell(
+                onTap: () async {
+                  // Show configuration selector to link with !
+                  var result = await showAddConfigurationLink(context, appContext, managerAppContext.instanceDTO!, appConfigurationLinks.map((acl) => acl.configurationId!).toList() ?? []);
+                  if(result != null) {
+                    for(var configurationId in result) {
+                      AppConfigurationLinkDTO appConfigurationLinkDTO = AppConfigurationLinkDTO(
+                          applicationInstanceId: widget.applicationInstanceDTO.id,
+                          configurationId: configurationId,
+                          isActive: true,
+                          isDate: false,
+                          isHour: false,
+                          isSectionImageBackground: false,
+                          layoutMainPage: LayoutMainPageType.SimpleGrid
+                      );
+                      await addConfigurationToApp(appContext, appConfigurationLinkDTO, widget.applicationInstanceDTO);
+                    }
+                    setState(() {
+                      // Refresh ui
+                    });
+                  }
+                },
+                child: Container(
+                    height: 60,
+                    width: 60,
+                    decoration: BoxDecoration(
+                      color: kSuccess,
+                      borderRadius: BorderRadius.circular(12.0),
                     ),
+                    child: Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Icon(Icons.add, size: 24, color: kWhite),
+                    )
+                ),
+              ),
+            ) : SizedBox(),
+          ],
         ),
       );
     }
@@ -480,21 +555,35 @@ class _AppConfigurationLinkScreenState extends State<AppConfigurationLinkScreen>
 
           final crossAxisCount = (screenWidth / itemWidth).floor().clamp(1, 6);
 
-          return Column(
+          return LayoutBuilder(
-            children: [
+            builder: (context, constraints) {
-              // autres widgets au-dessus si nécessaire
+              final maxHeight = constraints.maxHeight;
-              Expanded(
+
-                child: SingleChildScrollView(
+              return SingleChildScrollView(
                 padding: const EdgeInsets.all(16),
                 child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  mainAxisAlignment: MainAxisAlignment.start,
                   children: [
-                      _generalInfoCard(),
+                    ConstrainedBox(
-                      _phoneConfigCard(appConfigurationLinks),
+                      constraints: BoxConstraints(
-                    ],
+                        maxHeight: maxHeight * 0.45,
+                        minHeight: 150,
                       ),
+                      child: _generalInfoCard(),
                     ),
+                    const SizedBox(height: 10),
+                    ConstrainedBox(
+                      constraints: BoxConstraints(
+                        maxHeight: maxHeight * 0.5,
+                        minHeight: 150,
+                      ),
+                      child: _phoneConfigCard(appConfigurationLinks),
                     ),
                   ],
+                ),
+              );
+            },
           );
 
           return Align(

lib/Screens/Main/main_screen.dart

@@ -3,6 +3,7 @@ import 'dart:html';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:go_router/go_router.dart';
 import 'package:manager_app/Models/managerContext.dart';
 import 'package:manager_app/Models/menu.dart';
@@ -70,16 +71,43 @@ class _MainScreenState extends State<MainScreen> {
   Widget buildMenu(BuildContext context, AppContext appContext, ManagerAppContext managerAppContext, bool isDrawer) {
     return Container(
       width: isDrawer ? null : 250, // fixed width on sidebar, null on drawer for full width
-      color: kSecond,
+      child: Card(
+        color: kWhite,
+        margin: const EdgeInsets.symmetric(vertical: 8),
+        elevation: 0,
         child: Column(
           children: [
-          DrawerHeader(
+            Padding(
-            child: Text(
+              padding: const EdgeInsets.all(16.0),
+              child: Container(
+                height: 150,
+                width: 250,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Container(
+                      constraints: BoxConstraints(maxHeight: 60, minHeight: 40),
+                      child: SvgPicture.asset('assets/images/MyInfoMate_logo_only.svg')
+                    ),
+                    SizedBox(height: 16),
+                    Text(
                       menu.title,
-              style: TextStyle(color: kPrimaryColor, fontSize: 30, fontWeight: FontWeight.w400, fontFamily: "Helvetica"),
+                      style: TextStyle(
+                        color: kPrimaryColor,
+                        fontSize: 25,
+                        fontWeight: FontWeight.w400,
+                        fontFamily: "Helvetica",
                       ),
                     ),
+                  ],
+                ),
+              ),
+            ),
+            SizedBox(height: 25),
             Expanded(
+              child: Theme(
+                data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
                 child: ListView(
                   padding: EdgeInsets.zero,
                   children: menu.sections!.map((section) {
@@ -88,22 +116,45 @@ class _MainScreenState extends State<MainScreen> {
                     var currentPath = routeMatchList.isNotEmpty ? routeMatchList.matches.first.matchedLocation : null;
 
                     if (section.subMenu.isEmpty) {
-                  return ListTile(
+                      return Container(
-                    title: Text(section.name, style: TextStyle(color: currentPath!.contains(section.type) ? kPrimaryColor : kBodyTextColor, fontSize: 20)),
+                        decoration: currentPath!.contains(section.type)
+                            ? BoxDecoration(
+                          border: Border(
+                            right: BorderSide(
+                              color: kPrimaryColor,
+                              width: 2,
+                            ),
+                          ),
+                        )
+                            : null,
+                        child: ListTile(
+                          title: Text(section.name, style: TextStyle(color: currentPath.contains(section.type) ? kPrimaryColor : kBodyTextColor, fontSize: 22, fontWeight: currentPath.contains(section.type) ? FontWeight.w500 : FontWeight.w100)),
                           selected: currentPosition == section.menuId,
                           onTap: () {
                             //currentPosition.value = section.menuId;
                             context.go('/main/${section.type}');
                             if (isDrawer) Navigator.of(context).pop(); // Close drawer on mobile
                           },
+                        ),
                       );
                     } else {
-                  return ExpansionTile(
+                      return Container(
+                        child: ExpansionTile(
                           iconColor: currentPath!.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor,
                           collapsedIconColor: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor,
-                    title: Text(section.name, style: TextStyle(color: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor, fontSize: 20)),
+                          title: Text(section.name, style: TextStyle(color: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor, fontSize: 22, fontWeight: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? FontWeight.w500 : FontWeight.w100)),
                           children: section.subMenu.map((subSection) {
-                      return ListTile(
+                            return Container(
+                              decoration: currentPath.contains(subSection.type)
+                                  ? BoxDecoration(
+                                border: Border(
+                                  right: BorderSide(
+                                    color: kPrimaryColor,
+                                    width: 2,
+                                  ),
+                                ),
+                              ) : null,
+                              child: ListTile(
                                 title: Padding(
                                   padding: const EdgeInsets.only(left: 16.0),
                                   child: Row(
@@ -131,13 +182,16 @@ class _MainScreenState extends State<MainScreen> {
                                   }
                                   if (isDrawer) Navigator.of(context).pop();
                                 },
+                              ),
                             );
                           }).toList(),
+                        ),
                       );
                     }
                   }).toList(),
                 ),
               ),
+            ),
             // Footer: Email + Logout button
             Padding(
               padding: const EdgeInsets.all(8.0),
@@ -170,6 +224,7 @@ class _MainScreenState extends State<MainScreen> {
             ),
           ],
         ),
+      ),
     );
   }
 
@@ -180,16 +235,16 @@ class _MainScreenState extends State<MainScreen> {
     ManagerAppContext managerAppContext = appContext.getContext();
 
     Size size = MediaQuery.of(context).size;
-    bool isMobile = size.width < 700;
+    bool isMobile = size.width < 850;
 
     return Scaffold(
       appBar: isMobile
           ? AppBar(
-        title: Text(menu.title, style: TextStyle(color: kPrimaryColor)),
+        title: Text(menu.title, style: TextStyle(color: kWhite)),
-        backgroundColor: kSecond,
+        backgroundColor: kPrimaryColor,
         leading: Builder(
           builder: (context) => IconButton(
-            icon: Icon(Icons.menu, color: kPrimaryColor),
+            icon: Icon(Icons.menu, color: kWhite),
             onPressed: () => Scaffold.of(context).openDrawer(),
           ),
         ),

lib/Screens/login_screen.dart

@@ -3,6 +3,7 @@ import 'dart:html';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:go_router/go_router.dart';
 import 'package:manager_app/Components/common_loader.dart';
 import 'package:manager_app/Components/message_notification.dart';
@@ -267,7 +268,7 @@ class _LoginScreenState extends State<LoginScreen> {
           child: Container(
             height: size.height *0.7,
             width: size.width *0.4,
-            constraints: BoxConstraints(minWidth: 400, minHeight: 600),
+            constraints: BoxConstraints(minWidth: 400, minHeight: 500),
             decoration: BoxDecoration(
               color: kWhite,
               borderRadius: BorderRadius.circular(8.0),
@@ -281,7 +282,7 @@ class _LoginScreenState extends State<LoginScreen> {
               ],
             ),
             child: Padding(
-              padding: const EdgeInsets.only(left: 60.0, right: 60.0),
+              padding: const EdgeInsets.only(left: 50.0, right: 50.0),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
@@ -290,9 +291,16 @@ class _LoginScreenState extends State<LoginScreen> {
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
-                        Padding(
+                        /*Padding(
                           padding: const EdgeInsets.all(8.0),
                           child: Icon(Icons.museum_outlined, color: kPrimaryColor, size: size.height*0.08),
+                        ),*/
+                        Padding(
+                          padding: const EdgeInsets.all(20.0),
+                          child: Container(
+                            constraints: BoxConstraints(maxHeight: 125, minHeight: 40),
+                            child: SvgPicture.asset('assets/images/MyInfoMate_logo_only.svg')
+                          ),
                         ),
                         Center(
                           child: AutoSizeText(

lib/constants.dart

@@ -5,10 +5,10 @@ import 'package:manager_api_new/api.dart';
 // Colors - TO FILL WIT CORRECT COLOR
 //const kBackgroundColor = Color(0xFFFFFFFF);
 const kTitleTextColor = Color(0xFF303030);
-const kBodyTextColor = Color(0xFF4B4B4B); // TODO
+const kBodyTextColor = Color(0xFF393939); // TODO
 
 const kBackgroundColor = Color(0xFFf5f5f7);
-const kPrimaryColor = Color(0xFF308aae);
+const kPrimaryColor = Color(0xFF264863); // #264863 // 308aae
 const kError = Color(0xFFCA413F);
 const kTextLightColor = Color(0xFFFCFDFD);
 const kSecond = Color(0xFFC2C9D6);

pubspec.lock

@@ -479,13 +479,13 @@ packages:
     source: hosted
     version: "2.0.20"
   flutter_svg:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: flutter_svg
-      sha256: "7b4ca6cf3304575fe9c8ec64813c8d02ee41d2afe60bcfe0678bcb5375d596a2"
+      sha256: b9c2ad5872518a27507ab432d1fb97e8813b05f0fc693f9d40fad06d073e0678
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.10+1"
+    version: "2.2.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -1400,10 +1400,10 @@ packages:
     dependency: transitive
     description:
       name: vector_graphics
-      sha256: "32c3c684e02f9bc0afb0ae0aa653337a2fe022e8ab064bcd7ffda27a74e288e3"
+      sha256: a4f059dc26fc8295b5921376600a194c4ec7d55e72f2fe4c7d2831e103d461e6
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.11+1"
+    version: "1.1.19"
   vector_graphics_codec:
     dependency: transitive
     description:
@@ -1416,10 +1416,10 @@ packages:
     dependency: transitive
     description:
       name: vector_graphics_compiler
-      sha256: "12faff3f73b1741a36ca7e31b292ddeb629af819ca9efe9953b70bd63fc8cd81"
+      sha256: d354a7ec6931e6047785f4db12a1f61ec3d43b207fc0790f863818543f8ff0dc
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.11+1"
+    version: "1.1.19"
   vector_math:
     dependency: transitive
     description:

pubspec.yaml

@@ -36,6 +36,7 @@ dependencies:
   #filepicker_windows: ^2.0.0
   file_picker: ^6.1.1
   flare_flutter: ^3.0.1
+  flutter_svg: ^2.2.1
   #dart_vlc: ^0.0.6
   #video_player: ^2.1.1
   drag_and_drop_lists: ^0.3.2