Merge pull request #88 from SzymCode/dev

Dev
SzymCode · Jun 28, 2024 · 6a179bd · 6a179bd
2 parents 7f0b186 + 0047e48
commit 6a179bd
Show file tree

Hide file tree

Showing 51 changed files with 414 additions and 336 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# <div align="center"> <img src="https://github.com/SzymCode/DataManager/assets/107359025/7a309f2a-fb1d-408a-8985-5bac01796411" width="100" height="100" > <br> DataManager <br> </div>
+# <div align="center"> <img src="https://github.com/SzymCode/DataManager/assets/107359025/652cd065-7449-4e9a-9564-3916fa3baedc" width="70"> <br> DataManager <br> </div>
 <br>
 
 This website helps to storage various data types and share it with others. My target is to create fully responsive, functional and scalable [ERP](https://en.wikipedia.org/wiki/Enterprise_resource_planning)-like website based on [RWD](https://en.wikipedia.org/wiki/Responsive_web_design), [MFD](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00), [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development) and [FDD](https://en.wikipedia.org/wiki/Feature-driven_development) principles. Serves as my coding sandbox, where I can experiment with different coding techniques, implement new features, and refine my skills. 

diff --git a/atomic/_old_structure/sass/styles/components/flip_card.scss b/atomic/_old_structure/sass/styles/components/flip_card.scss
@@ -51,6 +51,6 @@
         padding: $flip-card-back-padding;
         background: $content-bg;
         transform: $flip-card-back-transform;
-        font-size: $font-size-base1;
+        font-size: $font-size-base;
     }
 }
diff --git a/atomic/_old_structure/sass/styles/pages/auth/auth.scss b/atomic/_old_structure/sass/styles/pages/auth/auth.scss
@@ -23,8 +23,23 @@
             justify-content: $auth-card-header-container-justify-content;
 
             .authCardHeader {
-                margin-bottom: $auth-card-header-margin-bottom;
+                display: $auth-card-header-display;
+                flex-direction: $auth-card-header-flex-direction;
+                align-items: $auth-card-header-align-items;
+                gap: $auth-card-header-gap;
                 margin-top: $auth-card-header-margin-top;
+
+                h1 {
+                    font-size: $font-size-big1;
+                }
+                p {
+                    font-size: $font-size-base1;
+
+                    a {
+                        text-decoration: $auth-card-header-a-text-decoration;
+                        color: $primary-color !important;
+                    }
+                }
             }
         }
 
@@ -33,6 +48,12 @@
 
             .p-card-content {
                 padding: $auth-card-content-padding;
+
+                form {
+                    display: $auth-card-form-display;
+                    flex-direction: $auth-card-form-flex-direction;
+                    gap: $auth-card-form-gap;
+                }
             }
         }
 
@@ -58,39 +79,27 @@
 
     .loginCard {
         width: $auth-card-width;
-        max-width: $login-card-position-max-width;
-        margin-top: $login-card-position-margin-top;
+        max-width: $auth-card-max-width;
+        margin-top: $login-card-margin-top;
     }
 
     .registerCard {
         width: $auth-card-width;
-        max-width: $register-card-position-max-width;
+        max-width: $auth-card-max-width;
+        margin-top: $register-card-margin-top;
     }
 }
 
-.backLink,
-.loginLink,
-.registerLink {
+.backLink {
+    top: $back-link-top;
+    left: $back-link-left;
     position: $links-position;
     font-size: $font-size-medium;
     text-decoration: $links-text-decoration;
     color: $primary-text-color;
     transition: $transition-colors-300ms;
 }
 
-.backLink:hover,
-.loginLink:hover,
-.registerLink:hover {
+.backLink:hover {
     color: $primary-hover-color;
 }
-
-.backLink {
-    top: $back-link-top;
-    left: $back-link-left;
-}
-
-.loginLink,
-.registerLink {
-    top: $auth-links-top;
-    right: $auth-links-right;
-}
diff --git a/atomic/_old_structure/sass/styles/pages/welcome/start.scss b/atomic/_old_structure/sass/styles/pages/welcome/start.scss
@@ -51,10 +51,7 @@
 }
 
 .startItem:hover {
-    color: $primary-hover-color;
-    background: $secondary-hover-bg-color;
-    transition: $transition-colors-300ms;
-    border-radius: $small-border-radius;
+    color: $secondary-gray-color;
 }
 
 .activitiesIcon,

diff --git a/atomic/_old_structure/sass/variables/base/_box_shadows_variables.scss b/atomic/_old_structure/sass/variables/base/_box_shadows_variables.scss
@@ -1,6 +1,6 @@
 $box-shadow-none: none;
 
-$primary-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+$primary-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 
 $secondary-card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 

diff --git a/atomic/_old_structure/sass/variables/pages/auth/_auth_variables.scss b/atomic/_old_structure/sass/variables/pages/auth/_auth_variables.scss
@@ -1,6 +1,6 @@
 // Auth card container
 $auth-card-container-height: 100vh;
-$auth-card-container-padding: 1.5rem;
+$auth-card-container-padding: 1rem;
 $auth-card-container-display: flex;
 $auth-card-container-flex-direction: column;
 $auth-card-container-justify-content: center;
@@ -9,26 +9,40 @@ $auth-card-container-align-items: center;
 // Auth card
 $auth-card-position: relative;
 $auth-card-width: 100%;
-$login-card-position-max-width: 500px;
-$login-card-position-margin-top: -140px;
-$register-card-position-max-width: 640px;
+$auth-card-max-width: 500px;
+$login-card-margin-top: -120px;
+$register-card-margin-top: -50px;
 
 // Auth card header container
 $auth-card-header-container-display: flex;
 $auth-card-header-container-justify-content: center;
 
 // Auth card header
-$auth-card-header-margin-bottom: -0.5rem;
+$auth-card-header-display: flex;
+$auth-card-header-flex-direction: column;
+$auth-card-header-align-items: center;
+$auth-card-header-gap: 1rem;
 $auth-card-header-margin-top: 2rem;
 
+// Auth card header p
+$auth-card-header-p: 2rem;
+
+// Auth card header a
+$auth-card-header-a-text-decoration: none;
+
 // Auth card body
-$auth-card-body-padding: 10px;
+$auth-card-body-padding: 10px 10px 15px 10px;
 
 // Auth card content
 $auth-card-content-padding: 20px;
 
+// Auth card form
+$auth-card-form-display: flex;
+$auth-card-form-flex-direction: column;
+$auth-card-form-gap: 2.2rem;
+
 // Auth inputs
-$auth-input-text-height: 35px;
+$auth-input-text-height: 40px;
 $auth-input-text-width: 100%;
 $auth-input-text-max-width: 100%;
 $auth-input-text-font-size: 12px;
@@ -42,6 +56,6 @@ $auth-links-top: 12px;
 $auth-links-right: 20px;
 
 // Min width 768px
-$auth-card-padding-bottom-md: 20px;
+$auth-card-padding-bottom-md: 0px;
 $auth-card-position-top-md: 150px;
 $auth-card-body-content-padding-md: 20px;
diff --git a/atomic/_old_structure/ts/components/ActivityLog/ActivityLog.vue b/atomic/_old_structure/ts/components/ActivityLog/ActivityLog.vue
@@ -56,7 +56,7 @@
                             <div class="actionColumnContent">
                                 <button-atom
                                     class="dataTableButton"
-                                    icon-class="pi pi-trash"
+                                    icon="pi pi-trash"
                                     @click="openModal('delete', row.data)"
                                     :rounded="true"
                                     :style="activityStyle"

diff --git a/atomic/_old_structure/ts/components/Admin/AdminPanel.vue b/atomic/_old_structure/ts/components/Admin/AdminPanel.vue
@@ -3,7 +3,7 @@
     <div class="panelContainer">
         <div class="adminBricks grid col-12">
             <div class="grid-item-container col-6 lg:col-4">
-                <anchor-tag-atom href="#articles" class="grid-item">
+                <anchor-tag-molecule href="#articles" class="grid-item">
                     <div class="adminBricksCircle" :style="articleCircleStyle">
                         <div>
                             <p class="adminBricksCircleNumber">
@@ -18,10 +18,10 @@
                     >
                         Articles
                     </p>
-                </anchor-tag-atom>
+                </anchor-tag-molecule>
             </div>
             <div class="grid-item-container col-6 lg:col-4">
-                <anchor-tag-atom href="#contacts" class="grid-item">
+                <anchor-tag-molecule href="#contacts" class="grid-item">
                     <div class="adminBricksCircle" :style="contactCircleStyle">
                         <div>
                             <p class="adminBricksCircleNumber">
@@ -36,10 +36,10 @@
                     >
                         Contacts
                     </p>
-                </anchor-tag-atom>
+                </anchor-tag-molecule>
             </div>
             <div class="grid-item-container col-6 lg:col-4">
-                <anchor-tag-atom href="#users" class="grid-item">
+                <anchor-tag-molecule href="#users" class="grid-item">
                     <div class="adminBricksCircle" :style="userCircleStyle">
                         <div>
                             <p class="adminBricksCircleNumber">
@@ -51,7 +51,7 @@
                     <p class="usersBricksText" :style="userBricksTextStyle">
                         Users
                     </p>
-                </anchor-tag-atom>
+                </anchor-tag-molecule>
             </div>
 
             <div

diff --git a/atomic/_old_structure/ts/components/Admin/Article/ArticleDashboard.vue b/atomic/_old_structure/ts/components/Admin/Article/ArticleDashboard.vue
@@ -65,28 +65,28 @@
                             <div class="actionColumnContent">
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-eye"
+                                    icon="pi pi-eye"
                                     @click="openModal('show', row.data)"
                                     :rounded="true"
                                     :style="articleStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-pencil"
+                                    icon="pi pi-pencil"
                                     @click="openModal('edit', row.data)"
                                     :rounded="true"
                                     :style="articleStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-trash"
+                                    icon="pi pi-trash"
                                     @click="openModal('delete', row.data)"
                                     :rounded="true"
                                     :style="articleStyle"
                                 />
                                 <button-atom
                                     class="mobileButton dataTableButton"
-                                    icon-class="pi pi-bars"
+                                    icon="pi pi-bars"
                                     @click="openMenu(menu, $event, row.data)"
                                     :rounded="true"
                                     :style="articleStyle"

diff --git a/atomic/_old_structure/ts/components/Admin/Contact/ContactDashboard.vue b/atomic/_old_structure/ts/components/Admin/Contact/ContactDashboard.vue
@@ -71,28 +71,28 @@
                             <div class="actionColumnContent">
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-eye"
+                                    icon="pi pi-eye"
                                     @click="openModal('show', row.data)"
                                     :rounded="true"
                                     :style="contactStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-pencil"
+                                    icon="pi pi-pencil"
                                     @click="openModal('edit', row.data)"
                                     :rounded="true"
                                     :style="contactStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-trash"
+                                    icon="pi pi-trash"
                                     @click="openModal('delete', row.data)"
                                     :rounded="true"
                                     :style="contactStyle"
                                 />
                                 <button-atom
                                     class="mobileButton dataTableButton"
-                                    icon-class="pi pi-bars"
+                                    icon="pi pi-bars"
                                     @click="openMenu(menu, $event, row.data)"
                                     :rounded="true"
                                     :style="contactStyle"

diff --git a/atomic/_old_structure/ts/components/Admin/User/UserDashboard.vue b/atomic/_old_structure/ts/components/Admin/User/UserDashboard.vue
@@ -71,28 +71,28 @@
                             <div class="actionColumnContent">
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-eye"
+                                    icon="pi pi-eye"
                                     @click="openModal('show', row.data)"
                                     :rounded="true"
                                     :style="userStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-pencil"
+                                    icon="pi pi-pencil"
                                     @click="openModal('edit', row.data)"
                                     :rounded="true"
                                     :style="userStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-trash"
+                                    icon="pi pi-trash"
                                     @click="openModal('delete', row.data)"
                                     :rounded="true"
                                     :style="userStyle"
                                 />
                                 <button-atom
                                     class="mobileButton dataTableButton"
-                                    icon-class="pi pi-bars"
+                                    icon="pi pi-bars"
                                     @click="openMenu(menu, $event, row.data)"
                                     :rounded="true"
                                     :style="userStyle"

diff --git a/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue b/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue
@@ -77,28 +77,28 @@
                             <div class="actionColumnContent">
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-eye"
+                                    icon="pi pi-eye"
                                     @click="openModal('show', row.data)"
                                     :rounded="true"
                                     :style="articleStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-pencil"
+                                    icon="pi pi-pencil"
                                     @click="openModal('edit', row.data)"
                                     :rounded="true"
                                     :style="articleStyle"
                                 />
                                 <button-atom
                                     class="desktopButton dataTableButton"
-                                    icon-class="pi pi-trash"
+                                    icon="pi pi-trash"
                                     @click="openModal('delete', row.data)"
                                     :rounded="true"
                                     :style="articleStyle"
                                 />
                                 <button-atom
                                     class="mobileButton dataTableButton"
-                                    icon-class="pi pi-bars"
+                                    icon="pi pi-bars"
                                     @click="openMenu(menu, $event, row.data)"
                                     :rounded="true"
                                     :style="articleStyle"

diff --git a/atomic/_old_structure/ts/components/Auth/Links.vue b/atomic/_old_structure/ts/components/Auth/Links.vue