many progress in stylizing

TODO - set internal padding for application template content container - check app components - fix colors
STARIONGROUP · Jun 20, 2024 · 54c916c · 54c916c
1 parent 4299dde
commit 54c916c
Show file tree

Hide file tree

Showing 17 changed files with 169 additions and 39 deletions.
diff --git a/COMET.Web.Common/Components/Applications/ApplicationTemplate.razor b/COMET.Web.Common/Components/Applications/ApplicationTemplate.razor
@@ -22,4 +22,6 @@
 @namespace COMET.Web.Common.Components.Applications
 @inherits GenericApplicationTemplate<COMET.Web.Common.ViewModels.Components.Applications.IApplicationTemplateViewModel>
 
-@this.Body
+<div>
+    @this.Body
+</div>
diff --git a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor
@@ -31,7 +31,7 @@
 <div class="book-editor-column @columnConditionalClass">
     <div class="column-header">
         <button class="icon collapse-button @this.CollapseButtonIconClass" @onclick="@(async () => await this.OnCollapseClicked.InvokeAsync())"></button>
-        <h5 style="background-color:@this.HeaderHexColor" class="header-text">@this.HeaderTitle</h5>
+        <h5 style="background-color:@this.HeaderHexColor" class="header-text p-2">@this.HeaderTitle</h5>
         <button class="icon icon-plus add-item-button @buttonDisabledClass" @onclick="@(async () => await this.OnCreateNewItemClick.InvokeAsync())" disabled="@this.IsAddButtonDisabled"></button>
     </div>
     <div class="column-content">

diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
@@ -37,7 +37,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                               Text="@(this.ButtonDisplayText)"
                               Click="@(() => this.OnButtonClick.Invoke())"
                               IconCssClass="oi oi-plus"
-                              RenderStyle="ButtonRenderStyle.Primary"
+                              RenderStyle="ButtonRenderStyle.Dark"
                               style="width: 200px;"/>
                 }
             </div>

diff --git a/COMETwebapp/Components/Tabs/OpenTab.razor b/COMETwebapp/Components/Tabs/OpenTab.razor
@@ -30,7 +30,7 @@
             <FeatherSmile Size="42"
                           Color="currentColor"
                           StrokeWidth="1.8f"/>
-            <h5 class="font-weight-bold mt-1">You have no model selected</h5>
+            <h5 class="font-weight-bold mt-1 text-primary">You have no model selected</h5>
             <span>Select a model to start working on it</span>
         </div>
     </DxFormLayoutItem>
@@ -104,7 +104,7 @@
                       CssClass="btn btn-connect w-100 lh-lg mt-2"
                       Text="Close"
                       Click="@(() => this.OnCancel?.Invoke())"
-                      RenderStyle="ButtonRenderStyle.Secondary"/>
+                      RenderStyleMode="ButtonRenderStyleMode.Outline"/>
         }
     </DxFormLayoutItem>
 </DxFormLayout>
diff --git a/COMETwebapp/Components/Tabs/TabComponent.razor.css b/COMETwebapp/Components/Tabs/TabComponent.razor.css
@@ -5,6 +5,7 @@
     display: flex;
     align-items: center;
     box-shadow: 0px 0px 3px 0px gray;
+    background-color: var(--colors-primary-25);
 }
 
 .current-tab {

diff --git a/COMETwebapp/Pages/ReferenceData/ReferenceDataPage.razor b/COMETwebapp/Pages/ReferenceData/ReferenceDataPage.razor
@@ -19,20 +19,24 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @using AntDesign
 @using COMETwebapp.Utilities
 
-<DxToolbar ItemClick="@this.OnItemClick">
-    <Items>
-        @foreach (var mappedValue in this.mapOfComponentsAndNames)
+<ApplicationTemplate>
+    <Body>
+        <DxToolbar ItemClick="@this.OnItemClick">
+            <Items>
+                @foreach (var mappedValue in this.mapOfComponentsAndNames)
+                {
+                    <DxToolbarItem @key="@(mappedValue.Value)"
+                                   Name="@(mappedValue.Value)"
+                                   Text="@(mappedValue.Value)"
+                                   Tooltip="@(mappedValue.Value)"
+                                   RenderStyle="@(mappedValue.Key == this.SelectedComponent ? ButtonRenderStyle.Primary : ButtonRenderStyle.Secondary)"/>
+                }
+            </Items>
+        </DxToolbar>
+
+        @if (this.SelectedComponent != null)
         {
-            <DxToolbarItem @key="@(mappedValue.Value)"
-                           Name="@(mappedValue.Value)" 
-                           Text="@(mappedValue.Value)" 
-                           Tooltip="@(mappedValue.Value)"
-                           RenderStyle="@(mappedValue.Key == this.SelectedComponent ? ButtonRenderStyle.Primary : ButtonRenderStyle.Secondary)" />
+            <DynamicComponent Type="@this.SelectedComponent"/>
         }
-    </Items>
-</DxToolbar>
-
-@if (this.SelectedComponent != null)
-{
-    <DynamicComponent Type="@this.SelectedComponent" />
-}
+    </Body>
+</ApplicationTemplate>
diff --git a/COMETwebapp/Pages/Tabs.razor b/COMETwebapp/Pages/Tabs.razor
@@ -27,7 +27,7 @@
 
 @if (this.ViewModel.CurrentTab is not null)
 {
-    <div class="pb-3 mb-3 d-flex gap-2" style="border-bottom: solid 1px #e5e5e5;">
+    <div class="mb-3 d-flex gap-2" style="background-color: var(--colors-primary-25); border-bottom: solid 1px var(--colors-gray-100); padding: 16px; border-radius: 24px 0px 0px 0px;">
 
         @foreach (var tab in this.ViewModel.OpenTabs.Items.Where(x => x.ComponentType == this.ViewModel.SelectedApplication?.ComponentType))
         {

diff --git a/COMETwebapp/Pages/_Host.cshtml b/COMETwebapp/Pages/_Host.cshtml
@@ -76,6 +76,7 @@
         </style>
         <link href="css/overwrite.css" rel="stylesheet" />
         <link href="css/vars.css" rel="stylesheet" />
+        <link href="fonts/Inter-VariableFont_slnt,wght.ttf" rel="stylesheet">
         <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
     </head>
 

diff --git a/COMETwebapp/Shared/SideBar.razor.css b/COMETwebapp/Shared/SideBar.razor.css
@@ -1,4 +1,5 @@
 .main-side-bar {
     height: 100vh;
-    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 12%);
+    background-color: var(--colors-primary-25);
+    padding: 10px 20px 30px 20px;
 }
diff --git a/COMETwebapp/Shared/SideBarEntry/ApplicationsSideBar.razor b/COMETwebapp/Shared/SideBarEntry/ApplicationsSideBar.razor
@@ -48,3 +48,4 @@
                  IconCssClass="@($"oi oi-{applicationEntry.Icon}")"
                  Enabled="@(this.IsApplicationEnabled(applicationEntry))" />
 }
+
diff --git a/COMETwebapp/Shared/SideBarEntry/SideBarItem.razor.css b/COMETwebapp/Shared/SideBarEntry/SideBarItem.razor.css
@@ -1,8 +1,8 @@
 .application-item-container {
-    color: var(--bs-body-color, var(--dxbl-body-color, inherit));
+    color: var(--colors-gray-500);
     margin: 0px 10px 0px 10px;
-    border-radius: 15px;
-    padding: 12.5px 10px 12.5px 10px;
+    border-radius: 12px;
+    padding: 16px;
     text-align: center;
     display: flex;
     justify-content: left;
@@ -13,17 +13,19 @@
     transition: width 0.5s;
     white-space: nowrap;
     overflow: hidden;
-    height: 50px;
+    height: 52px;
+    font-weight: 500;
 }
 
 .application-item-container:not(.selected-application-item):hover {
-    background-color: lightgray;
+    background-color: var(--colors-gray-200);
 }
 
 .selected-application-item {
-    background-color: var(--bs-body-color, var(--dxbl-body-color, inherit));
+    background-color: var(--colors-deep-black);
     transition: background-color 500ms linear;
     color: white !important;
+    box-shadow: 0px 8px 16px 0px #090E1126;
 }
 
 .application-sidebar-icon {

diff --git a/COMETwebapp/Shared/SidebarLayout.razor b/COMETwebapp/Shared/SidebarLayout.razor
@@ -37,7 +37,8 @@
                     }
                 </Template>
             </DxGridLayoutItem>
-            <DxGridLayoutItem Column="1" CssClass="content px-4 page-layout-item-content">
+            @*<DxGridLayoutItem Column="1" CssClass="content px-4 page-layout-item-content">*@
+            <DxGridLayoutItem Column="1" CssClass="page-layout-item-content">
                 <Template>
                     @(this.Body)
                 </Template>

diff --git a/COMETwebapp/Shared/SidebarLayout.razor.css b/COMETwebapp/Shared/SidebarLayout.razor.css
diff --git a/COMETwebapp/wwwroot/css/app.css b/COMETwebapp/wwwroot/css/app.css
@@ -1,6 +1,11 @@
 html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-    font-size: 16px !important;
+    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;*/
+    /*font-size: 16px !important;*/
+}
+
+@font-face {
+    font-family: "Inter";
+    src: url("../fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
 }
 
 html, body, #app {
@@ -244,5 +249,15 @@ div[id^="dropdown-customization-target-container-"] { display: flex; }
 
 .collapsed .application-item-container {
     width: 70px !important;
-    display: block ruby;
+}
+
+sub {
+    font-size: var(--text-sm);
+}
+
+.page-layout-item-content {
+    border-radius: 24px 0px 0px 24px;
+    background-color: white !important;
+    border-left: solid 1px var(--colors-gray-100);
+    overflow: auto;
 }
diff --git a/COMETwebapp/wwwroot/css/overwrite.css b/COMETwebapp/wwwroot/css/overwrite.css
@@ -1,11 +1,15 @@
 body,
 html {
-    font-family: var(--font-body);
+    /*font-family: var(--font-body);*/
     background: var(--colors-gray-50);
     color: var(--colors-gray-800);
+    font-family: "Inter", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings: "slnt" 0;
+    font-size: var(--bs-body-font-size)!important;
 }
 
-
 h1, .h1 {
     font-size: 2.5rem;
     font-style: normal;
@@ -36,4 +40,43 @@ h3, .h3 {
     font-weight: 400;
     line-height: 130%; /* 1.3rem */
     margin: 0;
-}
+}
+
+.dxbl-text {
+    --dxbl-text-font-size: var(--text-base);
+}
+
+.dxbl-text-edit.dxbl-lg {
+    --dxbl-text-edit-padding-y: var(--spacing-3);
+    --dxbl-text-edit-padding-x: var(--spacing-3);
+}
+
+.dxbl-text-edit {
+    --dxbl-text-edit-border-radius: var(--spacing-1);
+    --dxbl-text-edit-padding-y: var(--spacing-2);
+    --dxbl-text-edit-padding-x: var(--spacing-2);
+    /*--dxbl-text-edit-font-size: var(--text-base);*/
+}
+
+.dxbl-toolbar-btn.dxbl-btn {
+    padding: 7.5px !important;
+}
+
+.text-primary {
+    color: var(--colors-primary-500) !important;
+}
+
+.dxbl-grid-selected-row > td {
+    --dxbl-grid-selection-color: var(--colors-primary-600);
+    --dxbl-grid-selection-bg: var(--colors-gray-200);
+}
+
+.dxbl-btn-standalone.dxbl-btn-dark {
+    --dxbl-btn-bg: var(--colors-gray-800);
+    --dxbl-btn-hover-bg: var(--colors-gray-800);
+}
+
+.dxbl-btn-standalone.dxbl-btn-outline-primary {
+    --dxbl-btn-hover-bg: var(--colors-white);
+    --dxbl-btn-hover-color: var(--colors-primary-500)
+}
diff --git a/COMETwebapp/wwwroot/css/vars.css b/COMETwebapp/wwwroot/css/vars.css
@@ -1,3 +1,66 @@
 :root {
+    --colors-gray-50: #F9FAFB;
+    --colors-gray-100: #E3E6EA;
+    --colors-gray-200: #E5E7EB;
+    --colors-gray-300: #D1D5DB;
+    --colors-gray-400: #9CA3AF;
+    --colors-gray-500: #5D6C7D;
+    --colors-gray-600: #4B5563;
+    --colors-gray-700: #374151;
+    --colors-gray-800: #1F2937;
+    --colors-gray-900: #111827;
+    --colors-gray-950: #030712;
+    --colors-primary-25: #F9FBFC;
+    --colors-primary-50: #F4F5F8;
+    --colors-primary-100: #EAECF1;
+    --colors-primary-200: #CACFDC;
+    --colors-primary-300: #AAB2C6;
+    --colors-primary-400: #6B799C;
+    --colors-primary-500: #008BD2;
+    --colors-primary-600: #006DA4;
+    --colors-primary-700: #1A2644;
+    --colors-primary-800: #003048;
+    --colors-primary-900: #0D1322;
+    --colors-red-500: #E53D56;
+    --colors-green-500: #2BB673;
+    --colors-black: #111111;
+    --colors-deep-black: #030511;
+    --colors-white: #ffffff;
+    --bs-primary: var(--colors-primary-500);
+    --bs-body-bg: var(--colors-gray-50);
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.75rem;
+    --text-4xl: 2.125rem;
+    --text-5xl: 3rem;
+    --text-6xl: 4rem;
+    --text-7xl: 4.5rem;
+    --text-base: 0.98rem;
+    --text-lg: 1.125rem;
+    --text-sm: 0.875rem;
+    --text-xl: 1.375rem;
+    --text-xs: 0.75rem;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-7: 1.75rem;
+    --spacing-8: 2rem;
+    --spacing-9: 2.25rem;
+    --spacing-10: 2.5rem;
+    --spacing-11: 2.75rem;
+    --spacing-12: 3rem;
+    --spacing-13: 3.25rem;
+    --spacing-14: 3.5rem;
+    --spacing-15: 3.75rem;
+    --spacing-16: 4rem;
+    --spacing-17: 4.25rem;
+    --spacing-18: 4.5rem;
+    --spacing-19: 4.75rem;
+    --spacing-20: 5rem;
+    --dxbl-text-font-size: 0.98rem;
+    --dxbl-listbox-font-size: 0.98rem;
+    --bs-body-font-size: 0.98rem;
     --font-body: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
diff --git a/COMETwebapp/wwwroot/fonts/Inter-VariableFont_slnt,wght.ttf b/COMETwebapp/wwwroot/fonts/Inter-VariableFont_slnt,wght.ttf
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,3 +48,4 @@
		IconCssClass="@($"oi oi-{applicationEntry.Icon}")"
		Enabled="@(this.IsApplicationEnabled(applicationEntry))" />
		}