Migliorata UI

salesbook.Shared/Components/Pages/Calendar.razor.css

@@ -80,13 +80,12 @@
     }
 
 .day {
-    background: var(--mud-palette-surface);
     border-radius: 10px;
     text-align: center;
     cursor: pointer;
     transition: background 0.3s ease, transform 0.2s ease;
     font-size: 0.95rem;
-    box-shadow: var(--custom-box-shadow);
+    background: var(--mud-palette-background-gray);
     width: 38px;
     height: 38px;
     display: flex;
@@ -94,7 +93,7 @@
     justify-content: center;
     align-items: center;
     color: var(--mud-palette-text-primary);
-    border: 1px solid var(--mud-palette-surface);
+    border: 1px solid var(--mud-palette-background-gray);
     margin: 0 auto;
 }
 

salesbook.Shared/Components/Pages/Commessa.razor.css

@@ -118,7 +118,7 @@
     display: flex;
     flex-direction: column;
     width: -webkit-fill-available;
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
     border-radius: 16px;
     overflow: clip;
     margin-bottom: 1rem;
@@ -135,7 +135,6 @@
     display: flex;
     position: relative;
     z-index: 1;
-    background: var(--mud-palette-surface);
 }
 
 /* la lineetta */

salesbook.Shared/Components/Pages/PersonalInfo.razor.css

@@ -1,5 +1,5 @@
 .container-primary-info {
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
     width: 100%;
     margin-bottom: 2rem;
     border-radius: 12px;

salesbook.Shared/Components/Pages/User.razor

@@ -96,179 +96,188 @@ else
                 }
             </div>
         </div>
+        
+        <div class="tab-section">
+            <input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked="@(ActiveTab == 0)">
+            <input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" checked="@(ActiveTab == 1)">
+            <input type="radio" class="tab-toggle" name="tab-toggle" id="tab3" checked="@(ActiveTab == 2)">
 
-        <input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked="@(ActiveTab == 0)">
+            <div class="box">
-        <input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" checked="@(ActiveTab == 1)">
+                <ul class="tab-list">
-        <input type="radio" class="tab-toggle" name="tab-toggle" id="tab3" checked="@(ActiveTab == 2)">
+                    <li class="tab-item">
+                        <label class="tab-trigger" for="tab1" @onclick="() => SwitchTab(0)">Contatti</label>
+                    </li>
+                    <li class="tab-item">
+                        <label class="tab-trigger" for="tab2" @onclick="() => SwitchTab(1)">Commesse</label>
+                    </li>
+                    <li class="tab-item">
+                        <label class="tab-trigger" for="tab3" @onclick="() => SwitchTab(2)">Attivit<69></label>
+                    </li>
+                </ul>
+            </div>
 
-        <div class="box">
+            <div class="tab-container">
-            <ul class="tab-list">
+                <!-- Tab Contatti -->
-                <li class="tab-item">
+                <div class="tab-content" style="display: @(ActiveTab == 0 ? "block" : "none")">
-                    <label class="tab-trigger" for="tab1" @onclick="() => SwitchTab(0)">Contatti</label>
+                    @if (PersRif?.Count > 0)
-                </li>
+                    {
-                <li class="tab-item">
+                        <div class="container-pers-rif">
-                    <label class="tab-trigger" for="tab2" @onclick="() => SwitchTab(1)">Commesse</label>
+                            @foreach (var person in PersRif)
-                </li>
-                <li class="tab-item">
-                    <label class="tab-trigger" for="tab3" @onclick="() => SwitchTab(2)">Attivit<69></label>
-                </li>
-            </ul>
-        </div>
-
-        <div class="tab-container">
-            <!-- Tab Contatti -->
-            <div class="tab-content" style="display: @(ActiveTab == 0 ? "block" : "none")">
-                @if (PersRif?.Count > 0)
-                {
-                    <div class="container-pers-rif">
-                        @foreach (var person in PersRif)
-                        {
-                            <ContactCard Contact="person"/>
-                            @if (person != PersRif.Last())
                             {
-                                <div class="divider"></div>
+                                <ContactCard Contact="person"/>
+                                @if (person != PersRif.Last())
+                                {
+                                    <div class="divider"></div>
+                                }
                             }
-                        }
+                        </div>
-                    </div>
+                    }
-                }
 
-                <div class="container-button">
+                    <div class="container-button">
-                    <MudButton Class="button-settings infoText"
+                        <div class="divider"></div>
-                               FullWidth="true"
+
-                               Size="Size.Medium"
+                        <MudButton Class="button-settings infoText"
-                               OnClick="OpenPersRifForm"
+                                   FullWidth="true"
-                               Variant="Variant.Outlined">
+                                   Size="Size.Medium"
-                        Aggiungi contatto
+                                   StartIcon="@Icons.Material.Rounded.Add"
-                    </MudButton>
+                                   OnClick="OpenPersRifForm"
+                                   Variant="Variant.Outlined">
+                            Aggiungi contatto
+                        </MudButton>
+                    </div>
+                </div>
+
+                <!-- Tab Commesse -->
+                <div class="tab-content" style="display: @(ActiveTab == 1 ? "block" : "none")">
+                    @if (IsLoadingCommesse)
+                    {
+                        <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
+                    }
+                    else if (Commesse?.Count == 0)
+                    {
+                        <NoDataAvailable Text="Nessuna commessa presente"/>
+                    }
+                    else if (Commesse != null)
+                    {
+                        <!-- Filtri e ricerca -->
+                        <div class="input-card clearButton custom-border-bottom">
+                            <MudTextField T="string?"
+                                          Placeholder="Cerca..."
+                                          Variant="Variant.Text"
+                                          @bind-Value="SearchTermCommesse"
+                                          AdornmentIcon="@Icons.Material.Rounded.Search"
+                                          Adornment="Adornment.Start"
+                                          OnDebounceIntervalElapsed="() => ApplyFiltersCommesse()"
+                                          DebounceInterval="500"/>
+                        </div>
+
+                        <div class="commesse-container">
+                            @if (IsLoadingSteps)
+                            {
+                                <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-3"/>
+                            }
+
+                            @foreach (var commessa in CurrentPageCommesse)
+                            {
+                                <div class="commessa-wrapper" style="@(IsLoadingStep(commessa.CodJcom) ? "opacity: 0.7;" : "")">
+                                    @if (Steps.TryGetValue(commessa.CodJcom, out var steps))
+                                    {
+                                        <CommessaCard Steps="@steps" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
+                                    }
+                                    else
+                                    {
+                                        <CommessaCard Steps="null" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
+                                        @if (IsLoadingStep(commessa.CodJcom))
+                                        {
+                                            <MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="my-1" Style="height: 2px;"/>
+                                        }
+                                    }
+                                </div>
+                            }
+
+                            @if (TotalPagesCommesse > 1)
+                            {
+                                <div class="custom-pagination">
+                                    <MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesCommesse"
+                                                   @bind-Selected="SelectedPageCommesse"
+                                                   Color="Color.Primary"/>
+                                </div>
+
+                                <div class="SelectedPageSize">
+                                    <MudSelect @bind-Value="SelectedPageSizeCommesse"
+                                               Variant="Variant.Text"
+                                               Label="Elementi per pagina"
+                                               Dense="true"
+                                               Style="width: 100%;">
+                                        <MudSelectItem Value="5">5</MudSelectItem>
+                                        <MudSelectItem Value="10">10</MudSelectItem>
+                                        <MudSelectItem Value="15">15</MudSelectItem>
+                                    </MudSelect>
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+
+                <!-- Tab Attivit<69> -->
+                <div class="tab-content" style="display: @(ActiveTab == 2 ? "block" : "none")">
+                    @if (ActivityIsLoading)
+                    {
+                        <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
+                    }
+                    else if (ActivityList?.Count == 0)
+                    {
+                        <NoDataAvailable Text="Nessuna attivit<69> presente"/>
+                    }
+                    else if (ActivityList != null)
+                    {
+                        <!-- Filtri e ricerca -->
+                        <div class="input-card clearButton custom-border-bottom">
+                            <MudTextField T="string?"
+                                          Placeholder="Cerca..."
+                                          Variant="Variant.Text"
+                                          AdornmentIcon="@Icons.Material.Rounded.Search"
+                                          Adornment="Adornment.Start"
+                                          @bind-Value="SearchTermActivity"
+                                          OnDebounceIntervalElapsed="() => ApplyFiltersActivity()"
+                                          DebounceInterval="500"/>
+                        </div>
+
+                        <div class="attivita-container">
+                            @foreach (var activity in CurrentPageActivity)
+                            {
+                                <ActivityCard ShowDate="true" Activity="activity"/>
+                            }
+
+                            @if (TotalPagesActivity > 1)
+                            {
+                                <div class="custom-pagination">
+                                    <MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesActivity"
+                                                   @bind-Selected="CurrentPageActivityIndex"
+                                                   Color="Color.Primary"/>
+                                </div>
+
+                                <div class="SelectedPageSize">
+                                    <MudSelect @bind-Value="SelectedPageSizeActivity"
+                                               Variant="Variant.Text"
+                                               Label="Elementi per pagina"
+                                               Dense="true"
+                                               Style="width: 100%;">
+                                        <MudSelectItem Value="5">5</MudSelectItem>
+                                        <MudSelectItem Value="15">15</MudSelectItem>
+                                        <MudSelectItem Value="30">30</MudSelectItem>
+                                    </MudSelect>
+                                </div>
+                            }
+                        </div>
+                    }
                 </div>
             </div>
 
-            <!-- Tab Commesse -->
+            <MudScrollToTop Selector="#topPage" VisibleCssClass="visible absolute" TopOffset="100" HiddenCssClass="invisible">
-            <div class="tab-content" style="display: @(ActiveTab == 1 ? "block" : "none")">
+                <MudFab Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Material.Rounded.KeyboardArrowUp"/>
-                @if (IsLoadingCommesse)
+            </MudScrollToTop>
-                {
-                    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
-                }
-                else if (Commesse?.Count == 0)
-                {
-                    <NoDataAvailable Text="Nessuna commessa presente"/>
-                }
-                else if (Commesse != null)
-                {
-                    <!-- Filtri e ricerca -->
-                    <div class="input-card clearButton">
-                        <MudTextField T="string?"
-                                      Placeholder="Cerca..."
-                                      Variant="Variant.Text"
-                                      @bind-Value="SearchTermCommesse"
-                                      OnDebounceIntervalElapsed="() => ApplyFiltersCommesse()"
-                                      DebounceInterval="500"/>
-                    </div>
-
-                    <div class="commesse-container">
-                        @if (IsLoadingSteps)
-                        {
-                            <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-3"/>
-                        }
-
-                        @foreach (var commessa in CurrentPageCommesse)
-                        {
-                            <div class="commessa-wrapper" style="@(IsLoadingStep(commessa.CodJcom) ? "opacity: 0.7;" : "")">
-                                @if (Steps.TryGetValue(commessa.CodJcom, out var steps))
-                                {
-                                    <CommessaCard Steps="@steps" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
-                                }
-                                else
-                                {
-                                    <CommessaCard Steps="null" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
-                                    @if (IsLoadingStep(commessa.CodJcom))
-                                    {
-                                        <MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="my-1" Style="height: 2px;"/>
-                                    }
-                                }
-                            </div>
-                        }
-
-                        @if (TotalPagesCommesse > 1)
-                        {
-                            <div class="custom-pagination">
-                                <MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesCommesse"
-                                               @bind-Selected="SelectedPageCommesse"
-                                               Color="Color.Primary"/>
-                            </div>
-
-                            <div class="SelectedPageSize">
-                                <MudSelect @bind-Value="SelectedPageSizeCommesse"
-                                           Variant="Variant.Text"
-                                           Label="Elementi per pagina"
-                                           Dense="true"
-                                           Style="width: 100%;">
-                                    <MudSelectItem Value="5">5</MudSelectItem>
-                                    <MudSelectItem Value="10">10</MudSelectItem>
-                                    <MudSelectItem Value="15">15</MudSelectItem>
-                                </MudSelect>
-                            </div>
-                        }
-                    </div>
-                }
-            </div>
-
-            <!-- Tab Attivit<69> -->
-            <div class="tab-content" style="display: @(ActiveTab == 2 ? "block" : "none")">
-                @if (ActivityIsLoading)
-                {
-                    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
-                }
-                else if (ActivityList?.Count == 0)
-                {
-                    <NoDataAvailable Text="Nessuna attivit<69> presente"/>
-                }
-                else if (ActivityList != null)
-                {
-                    <!-- Filtri e ricerca -->
-                    <div class="input-card clearButton">
-                        <MudTextField T="string?"
-                                      Placeholder="Cerca..."
-                                      Variant="Variant.Text"
-                                      @bind-Value="SearchTermActivity"
-                                      OnDebounceIntervalElapsed="() => ApplyFiltersActivity()"
-                                      DebounceInterval="500"/>
-                    </div>
-
-                    <div class="attivita-container">
-                        @foreach (var activity in CurrentPageActivity)
-                        {
-                            <ActivityCard ShowDate="true" Activity="activity"/>
-                        }
-
-                        @if (TotalPagesActivity > 1)
-                        {
-                            <div class="custom-pagination">
-                                <MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesActivity"
-                                               @bind-Selected="CurrentPageActivityIndex"
-                                               Color="Color.Primary"/>
-                            </div>
-
-                            <div class="SelectedPageSize">
-                                <MudSelect @bind-Value="SelectedPageSizeActivity"
-                                           Variant="Variant.Text"
-                                           Label="Elementi per pagina"
-                                           Dense="true"
-                                           Style="width: 100%;">
-                                    <MudSelectItem Value="5">5</MudSelectItem>
-                                    <MudSelectItem Value="15">15</MudSelectItem>
-                                    <MudSelectItem Value="30">30</MudSelectItem>
-                                </MudSelect>
-                            </div>
-                        }
-                    </div>
-                }
-            </div>
         </div>
-
-        <MudScrollToTop Selector="#topPage" VisibleCssClass="visible absolute" TopOffset="100" HiddenCssClass="invisible">
-            <MudFab Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Material.Rounded.KeyboardArrowUp"/>
-        </MudScrollToTop>
     </div>
 }
 

salesbook.Shared/Components/Pages/User.razor.css

@@ -1,5 +1,11 @@
+.tab-section {
+    width: 100%;
+    border-radius: var(--mud-default-borderradius);
+    background: var(--light-card-background);
+}
+
 .container-primary-info {
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
     width: 100%;
     margin-bottom: 2rem;
     border-radius: 16px;
@@ -85,8 +91,9 @@
 
 .container-button {
     width: 100%;
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
-    padding: .25rem 0;
+    padding: 0 !important;
+    padding-bottom: .5rem !;
     border-radius: 16px;
     margin-bottom: 0 !important;
 }
@@ -138,8 +145,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    margin-bottom: 1rem;
+    background: var(--light-card-background);
-    box-shadow: var(--custom-box-shadow);
     border-radius: 16px;
     max-height: 32vh;
     overflow: auto;
@@ -147,7 +153,12 @@
     padding: 1rem 0;
 }
 
-.container-pers-rif::-webkit-scrollbar { display: none; }
+.container-pers-rif::-webkit-scrollbar { width: 3px; }
+
+.container-pers-rif::-webkit-scrollbar-thumb {
+    background: #bbb;
+    border-radius: 2px;
+}
 
 .container-pers-rif .divider {
     margin: 0 0 0 3.5rem;
@@ -176,12 +187,14 @@
 /*--------------
     TabPanel
 ----------------*/
+
 .box {
     display: flex;
     flex-direction: column;
     width: -webkit-fill-available;
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
-    border-radius: 16px;
+    border-radius: 20px 20px 0 0;
+    border-bottom: .1rem solid var(--card-border-color);
     overflow: clip;
     margin-bottom: 1rem;
 }
@@ -197,7 +210,6 @@
     display: flex;
     position: relative;
     z-index: 1;
-    background: var(--mud-palette-surface);
 }
 
 /* la lineetta */
@@ -268,9 +280,7 @@
 
 #tab1:checked ~ .tab-container .tab-content:nth-child(1),
 #tab2:checked ~ .tab-container .tab-content:nth-child(2),
-#tab3:checked ~ .tab-container .tab-content:nth-child(3) {
+#tab3:checked ~ .tab-container .tab-content:nth-child(3) { display: block; }
-    display: block;
-}
 
 @keyframes fade {
     from {
@@ -286,10 +296,6 @@
 
 .custom-pagination ::deep ul { padding-left: 0 !important; }
 
-.SelectedPageSize {
+.SelectedPageSize { width: 100%; }
-    width: 100%;
-}
 
-.FilterSection {
+.FilterSection { display: flex; }
-    display: flex;
-}

salesbook.Shared/Components/SingleElements/Card/ActivityCard.razor.css

@@ -5,14 +5,23 @@
     padding: .5rem .5rem;
     border-radius: 12px;
     line-height: normal;
-    box-shadow: var(--custom-box-shadow);
+    /*box-shadow: var(--custom-box-shadow);*/
 }
 
-.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
+.activity-card.memo {
+    border-left: 5px solid var(--mud-palette-info-darken);
+    background-color: hsl(from var(--mud-palette-info-darken) h s 98%);
+}
 
-.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
+.activity-card.interna {
+    border-left: 5px solid var(--mud-palette-success-darken);
+    background-color: hsl(from var(--mud-palette-success-darken) h s 98%);
+}
 
-.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
+.activity-card.commessa {
+    border-left: 5px solid var(--mud-palette-warning);
+    background-color: hsl(from var(--mud-palette-warning) h s 98%);
+}
 
 .activity-left-section {
     display: flex;

salesbook.Shared/Components/SingleElements/Card/AttachCard.razor.css

@@ -5,7 +5,7 @@
     padding: .5rem .5rem;
     border-radius: 12px;
     line-height: normal;
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
 }
 
 .activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }

salesbook.Shared/Components/SingleElements/Card/CommessaCard.razor.css

@@ -5,15 +5,11 @@
     padding: .5rem .5rem;
     border-radius: 12px;
     line-height: normal;
-    box-shadow: var(--custom-box-shadow);
+
+    border-left: 5px solid var(--card-border-color);
+    background-color: hsl(from var(--card-border-color) h s 98%);
 }
 
-.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
-
-.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
-
-.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
-
 .activity-left-section {
     display: flex;
     align-items: center;

salesbook.Shared/Components/SingleElements/Card/ContactCard.razor.css

@@ -2,8 +2,7 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    padding: 0 .75rem;
+    padding: 0 .5rem;
-    border-radius: 16px;
     line-height: normal;
     justify-content: space-between;
     align-items: center;

salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor.css

@@ -2,7 +2,6 @@
     position: relative;
     overflow: hidden;
     border-radius: var(--mud-default-borderradius);
-    box-shadow: var(--custom-box-shadow);
     width: 100%;
 }
 
@@ -39,7 +38,7 @@
     align-items: center;
     padding: 12px;
     gap: 12px;
-    background: var(--mud-palette-background);
+    background: var(--light-card-background);
     transition: transform .2s ease;
     touch-action: pan-y;
     will-change: transform;

salesbook.Shared/wwwroot/css/default-theme.css

@@ -8,4 +8,6 @@
     --mud-default-borderradius: 20px !important;
     --m-page-x: 1rem;
     --mh-header: 4rem;
+
+    --light-card-background: hsl(from var(--mud-palette-background-gray) h s 97%);
 }

salesbook.Shared/wwwroot/css/form.css

@@ -5,13 +5,9 @@
     margin-bottom: 1rem;
 }
 
-.customDialog-form.disable-safe-area .mud-dialog-content {
+.customDialog-form.disable-safe-area .mud-dialog-content { margin-top: unset !important; }
-    margin-top: unset !important;
-}
 
-.customDialog-form.disable-safe-area .content {
+.customDialog-form.disable-safe-area .content { height: 100% !important; }
-    height: 100% !important;
-}
 
 .customDialog-form .content {
     height: calc(100vh - (.6rem + 40px));
@@ -21,17 +17,11 @@
 }
 
 @supports (-webkit-touch-callout: none) {
-    .customDialog-form .content {
+    .customDialog-form .content { height: calc(100vh - (.6rem + 40px) - env(safe-area-inset-top)) !important; }
-        height: calc(100vh - (.6rem + 40px) - env(safe-area-inset-top)) !important;
-    }
 
-    .customDialog-form.disable-safe-area .content {
+    .customDialog-form.disable-safe-area .content { height: 100% !important; }
-        height: 100% !important;
-    }
 
-    .customDialog-form.disable-safe-area .mud-dialog-content {
+    .customDialog-form.disable-safe-area .mud-dialog-content { margin-top: unset !important; }
-        margin-top: unset !important;
-    }
 }
 
 .customDialog-form .header { padding: 0 !important; }
@@ -53,6 +43,8 @@
     padding: .4rem 1rem !important;
 }
 
+.input-card.clearButton.custom-border-bottom { border-bottom: .1rem solid var(--card-border-color); }
+
 .input-card > .divider { margin: 0 !important; }
 
 .form-container {
@@ -114,7 +106,7 @@
 
 .container-button {
     width: 100%;
-    box-shadow: var(--custom-box-shadow);
+    background: var(--light-card-background);
     padding: .5rem 0;
     border-radius: 12px;
     margin-bottom: 2rem;