Merge pull request #126 from SzymCode/dev

Dev

atomic/_old_structure/sass/app.scss

@@ -57,21 +57,31 @@ body:has(
 :root {
     --main-item-color: #10B981;
     --main-item-hover-color: #10A674;
-    --main-sidebar-item-selected-color: #10B98126;
+    --main-item-selected-color: #10B98126;
+    --main-item-focus-color: #10B98180;
+    --main-item-highlight-color: #10B98115;
 
     --article-item-color: #1187C7;
     --article-item-hover-color: #0F79B2;
-    --article-sidebar-item-selected-color: #1187C726;
+    --article-item-selected-color: #1187C726;
+    --article-item-focus-color: #1187C780;
+    --article-item-highlight-color: #1187C715;
 
     --activity-item-color: #FFB600;
     --activity-item-hover-color: #E7A60B;
-    --activity-sidebar-item-selected-color: #FFB60026;
+    --activity-item-selected-color: #FFB60026;
+    --activity-item-focus-color: #FFB60080;
+    --activity-item-highlight-color: #FFB60015;
 
     --contact-item-color: #10B981;
     --contact-item-hover-color: #10A674;
-    --contact-sidebar-item-selected-color: #10B98126;
+    --contact-item-selected-color: #10B98126;
+    --contact-item-focus-color: #10B98180;
+    --contact-item-highlight-color: #10B98115;
 
     --user-item-color: #64748B;
     --user-item-hover-color: #566479;
-    --user-sidebar-item-selected-color: #64748B26;
+    --user-item-selected-color: #64748B26;
+    --user-item-focus-color: #64748B80;
+    --user-item-highlight-color: #64748B15;
 }

atomic/_old_structure/sass/styles/components/button.scss

@@ -9,6 +9,7 @@
     justify-content: $p-button-justify-content;
     transition: $p-button-transition;
     padding: $p-button-padding;
+    font-size: 1.2rem;
 
     .p-button-label {
         font-family: $p-button-label-font-family;
@@ -19,11 +20,6 @@
         border-radius: $large-border-radius !important;
     }
 
-    &.p-button-secondary {
-        background: var(--user-item-color);
-        border: var(--user-item-color);
-    }
-
     &.mobileButton {
         display: $mobile-button-display;
     }
@@ -66,7 +62,6 @@
     }
 
     &.dataTableButton {
-        padding: $datatable-button-padding;
         height: $datatable-button-dimensions;
         width: $datatable-button-dimensions;
     }

atomic/_old_structure/sass/styles/components/card.scss

@@ -15,10 +15,36 @@
     .myCardHeaderContainer {
         display: $my-card-header-container-display;
         justify-content: $my-card-header-container-justify-content;
+        align-items: center;
+        padding: 0 12px 0 4px;
+        margin-bottom: -8px;
+
+        h3 {
+            margin: 0;
+        }
+
+        .p-button {
+            padding: 0;
+            width: 30px !important;
+            height: 30px !important;
+
+            .p-button-icon {
+                font-size: 1em;
+            }
+        }
     }
 
     // Min width 992px
     @media (min-width: $min-width-lg2) {
         margin-right: $my-card-margin-right-lg2;
+
+        .myCardHeaderContainer {
+            padding: 2px 12px 0 6px;
+            margin-bottom: 0;
+
+            .headingSkeleton {
+                height: 38px !important;
+            }
+        }
     }
 }

atomic/_old_structure/sass/styles/components/dialog.scss

@@ -1,5 +1,7 @@
 @import '../../variables/components/dialog_variables';
 
+@import '../../variables/base/box_shadows_variables';
+
 .p-dialog-mask {
     padding: $dialog-mask-padding;
 
@@ -24,12 +26,13 @@
 
         .p-dialog-footer {
             padding: $dialog-footer-padding;
+            box-shadow: $my-card-box-shadow;
         }
 
         .dialogButtonsContainer {
+            width: $dialog-buttons-width;
             display: $dialog-buttons-display;
             justify-content: $dialog-buttons-justify-content;
-            gap: $dialog-buttons-gap;
         }
     }
 }

atomic/_old_structure/sass/styles/pages/settings/settings.scss

@@ -1,23 +1,64 @@
 @import '../../../variables/pages/settings/settings_variables';
 
+@import '../../../variables/base/box_shadows_variables';
 @import '../../../variables/base/medias_variables';
 
 .settingsPanelContainer {
     display: $settings-panel-container-display;
+    flex-direction: row;
 
     .settingsCard {
+        width: 100%;
+        max-width: 220px;
         margin: $settings-card-margin;
         padding: $settings-card-padding;
+        box-shadow: $my-card-box-shadow;
+        border-radius: 0;
+
+
+        .refreshButton {
+            width: 32px;
+            height: 32px;
+
+            span {
+                margin-top: -2px;
+                font-size: 19px;
+            }
+        }
+
+        h4 {
+            margin: 0;
+        }
+
+        hr {
+            margin: 1em 0;
+        }
+
+        .p-card-content {
+            padding: 0 1px 0 0;
+        }
+
+        .p-colorpicker-preview {
+            max-width: 22px;
+            max-height: 22px;
+            padding: 0;
+        }
+        .settingsCardHeaderContainer {
+            display: flex;
+            justify-content: space-between;
+        }
 
         .settingsCardItemList {
             display: $settings-card-item-list-display;
             flex-direction: $settings-card-item-list-flex-direction;
             padding-left: $settings-card-item-list-padding-left;
             gap: $settings-card-item-list-gap;
+            margin: 0;
 
             .settingsCardItem {
                 display: $settings-card-item-display;
                 justify-content: $settings-card-item-justify-content;
+                padding-right: 3px;
             }
         }
     }
@@ -26,12 +67,11 @@
     @media (min-width: $min-width-sm5) {
         flex-direction: $settings-panel-container-flex-direction-sm5;
     }
+}
 
-    // Min width 992px;
-    @media (min-width: $min-width-lg2) {
-        .settingsSmallCard {
-            max-width: $settings-small-card-max-width-lg2;
-            max-height: $settings-small-card-max-height-lg2;
-        }
-    }
+.p-colorpicker-panel,
+.p-colorpicker-content {
+    background: white;
+    border: 1px whitesmoke;
+    box-shadow: $my-card-box-shadow;
 }

atomic/_old_structure/sass/variables/components/_card_variables.scss

@@ -6,6 +6,7 @@ $my-card-border: none;
 $my-card-background: white;
 
 $my-card-header-container-display: flex;
+
 $my-card-header-container-justify-content: space-between;
 
 // Min width 992px

atomic/_old_structure/sass/variables/components/_dialog_variables.scss

@@ -11,6 +11,6 @@ $dialog-header-icon-display: none;
 $dialog-footer-padding: 20px;
 
 // Dialog buttons container
+$dialog-buttons-width: 100%;
 $dialog-buttons-display: flex;
-$dialog-buttons-justify-content: end;
-$dialog-buttons-gap: 0.5rem;
+$dialog-buttons-justify-content: space-between;

atomic/_old_structure/sass/variables/pages/settings/_settings_variables.scss

@@ -9,7 +9,7 @@ $settings-card-padding: 20px;
 $settings-card-item-list-display: flex;
 $settings-card-item-list-flex-direction: column;
 $settings-card-item-list-padding-left: 0;
-$settings-card-item-list-gap: 1rem;
+$settings-card-item-list-gap: .65rem;
 
 // Settings cart item
 $settings-card-item-display: flex;
@@ -19,5 +19,5 @@ $settings-card-item-justify-content: space-between;
 $settings-panel-container-flex-direction-sm5: row;
 
 // Min width 992px
-$settings-small-card-max-width-lg2: 500px;
-$settings-small-card-max-height-lg2: 405px;
+$settings-small-card-max-width-lg2: 200px;
+$settings-small-card-max-height-lg2: 200px;

atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue

@@ -14,7 +14,6 @@
             :value="results"
             :loading="loading"
             :open-dialog="openDialog"
-            :styles="activityStyle"
             :tag="3"
             type="activity"
             headerText="Manage Activities"
@@ -34,7 +33,6 @@
         :confirm="dialog.confirm"
         :get-data="dialog.getData"
         :close="closeDialog"
-        :style="activityStyle"
     />
 </template>
 
@@ -43,23 +41,21 @@ import { computed, onMounted } from 'vue'
 
 import { activityApiMethods } from '@/utils'
 
-import { handleStyles } from 'atomic/bosons/constants'
 import { useDialog, useDisplayCharts } from 'atomic/bosons/utils'
 
 const { visibleDelete, selectedObject, openDialog, closeDialog } = useDialog()
 const { display } = useDisplayCharts()
 
 const { results, loading, getAllActivities, deleteActivity } =
     activityApiMethods()
-const { activityStyle } = handleStyles()
 
 onMounted(() => {
     getAllActivities()
 })
 
 const dialogs = computed(() => [
     {
-        entity: 'user',
+        entity: 'activity',
         action: 'delete',
         visible: visibleDelete.value,
         selectedObject: selectedObject.value,

atomic/_old_structure/ts/components/Admin/AdminPanel.vue

@@ -58,9 +58,8 @@
                 </anchor-molecule>
             </div>
 
-            <div class="grid-item-container col-6 lg:col-4">
+            <div class="grid-item-container col-6 lg:col-4" v-if="display.Admin">
                 <card-chart
-                    v-if="display.Admin"
                     class="grid-item countChartCard"
                     :chart-method-type="'count'"
                     :type="'pie'"

atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue

@@ -4,7 +4,6 @@
             :value="data"
             :loading="loading"
             :open-dialog="openDialog"
-            :styles="articleStyle"
             :tag="3"
             type="article"
             headerText="Manage Articles"
@@ -25,7 +24,6 @@
             :confirm="dialog.confirm"
             :get-data="dialog.getData"
             :close="closeDialog"
-            :style="articleStyle"
         />
     </section>
 </template>
@@ -36,7 +34,6 @@ import { computed } from 'vue'
 import { articleApiMethods } from '@/utils'
 
 import {
-    handleStyles,
     useArticleFields,
 } from 'atomic/bosons/constants'
 import { DashboardInterface } from 'atomic/bosons/types'
@@ -56,7 +53,6 @@ const {
 
 const { createAndEditFields, showFields } = useArticleFields()
 const { deleteArticle, storeArticle, editArticle } = articleApiMethods()
-const { articleStyle } = handleStyles()
 
 const dialogs = computed(() => [
     {

atomic/_old_structure/ts/components/Admin/ContactDashboard.vue

@@ -4,7 +4,6 @@
             :value="data"
             :loading="loading"
             :open-dialog="openDialog"
-            :styles="contactStyle"
             :tag="3"
             type="contact"
             headerText="Manage Contacts"
@@ -25,7 +24,6 @@
             :confirm="dialog.confirm"
             :get-data="dialog.getData"
             :close="closeDialog"
-            :style="contactStyle"
         />
     </section>
 </template>
@@ -36,7 +34,6 @@ import { computed } from 'vue'
 import { contactApiMethods } from '@/utils'
 
 import {
-    handleStyles,
     useContactFields,
 } from 'atomic/bosons/constants'
 import { DashboardInterface } from 'atomic/bosons/types'
@@ -56,7 +53,6 @@ const {
 
 const { createAndEditFields, showFields } = useContactFields()
 const { deleteContact, storeContact, editContact } = contactApiMethods()
-const { contactStyle } = handleStyles()
 
 const dialogs = computed(() => [
     {

atomic/_old_structure/ts/components/Admin/UserDashboard.vue

@@ -4,7 +4,6 @@
             :value="data"
             :loading="loading"
             :open-dialog="openDialog"
-            :styles="userStyle"
             :tag="3"
             type="user"
             headerText="Manage Users"
@@ -25,7 +24,6 @@
             :confirm="dialog.confirm"
             :get-data="dialog.getData"
             :close="closeDialog"
-            :style="userStyle"
         />
     </section>
 </template>
@@ -36,7 +34,6 @@ import { computed } from 'vue'
 import { userApiMethods } from '@/utils'
 
 import {
-    handleStyles,
     useUserFields,
 } from 'atomic/bosons/constants'
 import { DashboardInterface } from 'atomic/bosons/types'
@@ -56,7 +53,6 @@ const {
 
 const { createFields, editFields, showFields } = useUserFields()
 const { deleteUser, storeUser, editUser } = userApiMethods()
-const { userStyle } = handleStyles()
 
 const dialogs = computed(() => [
     {