simplified color picker

CaritasPWA.csproj.user

   </PropertyGroup>
   <PropertyGroup>
     <ActiveDebugProfile>CaritasPWA</ActiveDebugProfile>
-    <NameOfLastUsedPublishProfile>FolderProfile</NameOfLastUsedPublishProfile>
+    <NameOfLastUsedPublishProfile>IISProfile</NameOfLastUsedPublishProfile>
   </PropertyGroup>
   <ItemGroup>
     <EmbeddedResource Update="Shared\ResourceFiles\Resources.it.resx">

Pages/CaritasServiceFundVeloKeyDataPage.razor

                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-4-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatButton Class="btn btn-light w-100 mdc-text-field--outlined" @onclick="OpenModal">
-                                <div style="background-color:@color" class="buttonColor"></div> @i18n["Color"]
-                            </MatButton>
-                            <ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened" Closed="ClosedEvent" MyColor="@color">
-                            </ColorPicker>
+                            <MatSelectValue FullWidth="true" Outlined="true" Label="@i18n["Color"]" @bind-Value="colorValue" Items="@colorItems" ValueSelector="@(i=>i.RGB)">
+                                <ChildContent>
+                                    <span>@colorValue</span>
+                                    @*<span>@selectedColor?.RGB</span>*@
+                                </ChildContent>
+                                <ItemTemplate>
+                                    <div>
+                                        <span class="btn-sm" style="background-color:rgb(@context.RGB);
+                                                                    display:initial;
+                                                                    border:1px solid black;
+                                                                    box-shadow:0.2em 0.2em 0.3em 0.025em #3f4244" />
+                                        <span class="btn">@context?.Name</span>
+                                    </div>
+                                </ItemTemplate>
+                            </MatSelectValue>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
                             <MatStringField Class="w-100 form-check-label" Label="@i18n["Brand"]" Outlined="true" type="text"></MatStringField>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatSelect Class="w-100" Label="@i18n["Type"]" @bind-Value="value">
+                            <MatSelect Class="w-100" Outlined="true" Label="@i18n["Type"]" @bind-Value="value">
                                 <MatOptionString></MatOptionString>
                                 <MatOptionString Value="Mountain-Bike">Mountain-Bike</MatOptionString>
                                 <MatOptionString Value="City-Bike">City-Bike</MatOptionString>
     public string FromRoute { get; set; }
 
     string value;
-
-    bool isOpened = false;
-    string color = "#F1F7E9";
-
-    void OpenModal() {
-        isOpened = true;
-    }
-
-    void ClosedEvent(string value) {
-        color = value;
-        isOpened = false;
-    }
+    string colorValue;
+    ColorItem selectedColor;
 
     private void Next() {
         NavigationManager.NavigateTo("account/" + @FromRoute);
         NavigationManager.NavigateTo("caritas_services");
     }
 
+
+    ColorItem[] colorItems = new[] {
+        new ColorItem(3, "Blue","0,0,255"),
+        new ColorItem(14, "Brown", "165,42,42"),
+        new ColorItem(4, "Yellow", "255, 255, 0"),
+    };
+
+    class ColorItem {
+        public int Index { get; }
+        public string Name { get; }
+        public string RGB { get; }
+
+        public ColorItem(int index, string name, string rgb) {
+            Index = index;
+            Name = name;
+            RGB = rgb;
+        }
+    }
+
 }

Pages/CaritasServiceFundVeloLostFoundPage.razor

                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
                     <MatCard Class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="/images/batch_found.png" @onclick="Found"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_found.png" @onclick="Found"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
                     <MatCard Class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="/images/batch_missing.png" @onclick="Missing"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_missing.png" @onclick="Missing"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>

Pages/CaritasServicesPage.razor

                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="/images/batch_kulturlegi.png"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_kulturlegi.png"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="/images/batch_markt.png"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_markt.png"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
 
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="/images/batch_fundvelo.png" @onclick="Next"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_fundvelo.png" @onclick="Next"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>

Pages/DoneImage.razor

 @page "/doneimage"
 
 <div class="text-center">
-    <img src="/images/done.png" class="w-50" />
+    <img src="./images/done.png" class="w-50" />
 </div>
 
 @code {

Pages/IndexPage.razor

 
 <div class="row h-100 justify-content-center">
     <div class="row d-flex align-items-center justify-content-center px-4 w-100">
-        <img src="/images/caritas_logo.png" style="padding:1em;max-width:320px" class="w-100">
+        <img src="./images/caritas_logo.png" style="padding:1em;max-width:320px" class="w-100">
     </div>
 
     <div class="row align-items-center vw-100 h-75">

Pages/InfoPage.razor

 
 <div class="row px-3 h-100">
     <div class="text-center w-100">
-        <img class="w-100" src="/images/caritas_logo.png" style="padding:1em;max-width:320px" />
+        <img class="w-100" src="./images/caritas_logo.png" style="padding:1em;max-width:320px" />
     </div>
     <div class="row no-gutters align-items-center w-100">
         <table class="w-100">
             </tr>
             <tr>
                 <td class="text-right">
-                    <img src="/images/integrate_logo.png" style="max-width:200px"/>
+                    <img src="./images/integrate_logo.png" style="max-width:200px"/>
                 </td>
             </tr>
             <tr>

wwwroot/index.html

     <link href="css/united/_variables.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <link href="manifest.json" rel="manifest" />
-    <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96.png" />
+    <link rel="apple-touch-icon" href="/icons/icon-60@3x.png" />
     <meta name="apple-mobile-web-app-status-bar" content="#db001b">
     <meta name="theme-color" content="#db001b">
 </head>

wwwroot/manifest.json

   "short_name": "CaritasPWA",
   "start_url": "./",
   "display": "standalone",
-  "background_color": "#db001b",
+  "background_color": "#ffffff",
   "theme_color": "#db001b",
   "orientation": "portrait-primary",
   "icons": [