Feat : Update default card + favorite link & list + heading

clementp0 · Aug 9, 2024 · 0dd1d19 · 0dd1d19
1 parent 719d16c
commit 0dd1d19
Show file tree

Hide file tree

Showing 12 changed files with 205 additions and 122 deletions.
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -72,7 +72,15 @@ footer {
 }
 
 i.fa-solid.fa-heart {
-  color: #60a6fa;
+  color: #da3e3e;
+}
+
+.pin-separator-small {
+  height: 100%;
+  width: 1px;
+  border-radius: 2px!important;
+  background: #474747;
+  padding: 0px!important;
 }
 
 .fixed-top {
@@ -88,12 +96,10 @@ button:focus {
 }
 
 button.btn.delete {
-  color: #8d8d8d;
+  color: #E47878;
   width: 18px;
   font-size: 15px;
   padding: 0px;
-  margin-left: 6px;
-  margin-bottom: 4px;
 
   &:hover {
     color: #5e9eee;

diff --git a/assets/scss/components/favorite.scss b/assets/scss/components/favorite.scss
@@ -8,7 +8,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #ddd;
+    background-color: $background;
+    color: white;
     border-radius: 50%;
     width: 25px;
     height: 25px;
@@ -19,43 +20,68 @@
   }
 }
 
-.pin-fav-list .form-check-label {
-  margin-left: 5px;
-  max-width: 180px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  vertical-align: bottom;
+.pin-fav-list {
+  padding: 10px;
+  max-height: 500px;
+  overflow-Y: auto;
+  .form-check{
+    padding-top: 10px;
+  }
+  .form-check-label {
+    font-size: 14px;
+    display: block;
+    width: 100%;
+    text-align: left;
+    text-decoration: none;
+    color: #7a7a7a;
+  }
 }
 
 .pin-fav-add {
-  background-color: #303030;
-  border: 1px solid #404040;
-  border-radius: 3px;
-  padding: 10px;
+  background-color: $background;
+  border-radius: 6px;
   padding-bottom: 13px;
-  min-width: 180px;
-  max-width: 230px;
-  position: absolute;
-  top: 0;
+  min-width: 260px;
+  height: fit-content;
+  z-index: 1;
+  position: fixed;
+  bottom: 0px;
   right: 0;
   transition: all 0.5s;
-  opacity: 0;
   visibility: hidden;
-  overflow-y: scroll;
-  max-height: 250px;
+  overflow-y: auto;
+  width: 50%;
+  z-index: 10000;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  @media (max-width: 768px) {
+    width: 100%;
+    left: 0;
+    transform: translate(0%, 100%);
+  }
 
   &.show {
-    opacity: 1;
+    transform: translate(-50%, 0%);
     visibility: visible;
+    @media (max-width: 768px) {
+      transform: translate(0%, 0%);
+    }
   }
 
   .pin-fav-add-top {
+    background-color: #202020;
     display: flex;
+    padding: 10px;
     justify-content: space-between;
+    align-items: center;
 
     p {
-      margin-right: 20px;
+      color: white;
+      font-weight: bold;
+      margin: 0px;
+      i{
+        margin-right: 5px;
+      }
     }
 
     .pin-fav-add-close {
@@ -70,38 +96,48 @@
   }
 
   .pin-fav-add-new-wrapper {
-    position: relative;
-    margin-top: 10px;
+    padding: 10px;
     display: flex;
 
     .pin-fav-add-new {
       font-size: 14px;
-      padding-left: 2px;
+      width: 100%;
+      padding: 10px;
+      cursor: pointer;
+      border-radius: 4px;
+      color: #60a5fa;
+      background-color: #60a5fa3d;
     }
 
     .pin-fav-add-new-field {
       display: flex;
       position: absolute;
       top: 0;
-      left: 0;
+      height: 44px;
+      padding: 10px;
+      left: 0px;
       width: 100%;
       background-color: #303030;
-      transition: opacity 0.5s, visibility 0.5s;
-      opacity: 0;
+      transition: transform  0.5s, visibility 0.5s;
+      transform: translateY(-100%);
       visibility: hidden;
+      align-content: center;
+      align-items: center;
 
       &.show {
-        opacity: 1;
+        transform: translateY(0%);
         visibility: visible;
       }
 
       .pin-fav-add-new-input {
         flex-grow: 1;
-        color: #6d6d6d;
+        color: white;
         background-color: transparent;
         border: none;
         border-bottom: 1px solid #ffffff24;
-        font-size: 12px;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: capitalize;
         border-radius: 0;
         max-width: calc(100% - 16px);
 

diff --git a/assets/scss/components/header.scss b/assets/scss/components/header.scss
@@ -45,7 +45,7 @@
     }
 
     &.new-link {
-      color: $background;
+      color: $white;
       background-color: $blue;
       padding: 4px 10px;
       border-radius: 40px;
@@ -288,7 +288,7 @@
   @media (max-width: 768px) {
     position: fixed;
     height: 2rem;
-    z-index: 1;
+    z-index: 1029;
     width: 100%;
     bottom: 0px;
     background-color: #222222;

diff --git a/assets/scss/components/location.scss b/assets/scss/components/location.scss
@@ -55,7 +55,23 @@ i.fa-brands.fa-waze {
 }
 
 .waze {
-  margin-right: 5px;
+  background-color: rgba(129, 209, 255, 0.1294117647);
+  color: #81D1FF;
+}
+
+.pin-map{
+  background-color: rgba(52, 168, 81, 0.1882352941);
+  color: #34A851;
+}
+
+.pin-edit{
+  background-color: rgba(163, 163, 163, 0.1490196078);
+  color: #A3A3A3;
+}
+
+.pin-bottom-container form{
+  background-color: rgba(228, 120, 120, 0.1019607843);
+  color: #E47878;
 }
 
 // pin container
@@ -71,17 +87,20 @@ i.fa-brands.fa-waze {
   align-content: space-evenly;
 }
 
+
 .pin-category {
   background-color: $blue;
-  color: $white;
+  color: white;
   border-radius: 5px;
   text-align: center;
   padding: 0px 5px 0px 5px;
   width: fit-content;
   font-size: 0.835rem;
   display: block;
   text-align: center;
-  margin: 5px 0px;
+  position: absolute;
+  left: 10px;
+  top: 10px;
 
   .pin-category-text {
     text-transform: capitalize;
@@ -97,12 +116,12 @@ i.fa-brands.fa-waze {
 .pin-container {
   display: block;
   width: 260px;
-  border: 1px solid $contrast-2;
   border-radius: 4px;
   height: fit-content;
   margin: 10px;
   position: relative;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #2b2b2b;
 
   @media screen and (max-width: 1024px) {
     width: 100%;
@@ -116,13 +135,17 @@ i.fa-brands.fa-waze {
     text-decoration: none;
   }
 
-  .pin-info-icon {
-    margin-right: 10px;
+  .pin-check {
+    background-color: rgba(163, 163, 163, 0.1490196078);
+    color: #ffffff;
+  }
+  .pin-warning{
+    background-color: rgb(255 140 0 / 15%);
+    color: #fcff00;
   }
 
   .pin-img {
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
+    border-radius: 6px;
     width: 100%;
     height: 200px;
     background-position: center;
@@ -136,7 +159,13 @@ i.fa-brands.fa-waze {
     height: 24px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 5px;
+    justify-content: center;
+    &> *{
+      margin: 0;
+      padding: 5px 10px;
+      border-radius: 5px;
+    }
   }
 
   .pin-id {
@@ -152,18 +181,12 @@ i.fa-brands.fa-waze {
     padding-top: 2px;
   }
 
-  .pin-edit {
-    width: fit-content;
-    float: right;
-    border-top-left-radius: 7px;
-    border-left: 1px solid #ff000059;
-    padding: 0px 10px;
-    display: flex;
-  }
-
   .pin-title {
+    text-transform: capitalize;
+    color:$white;
+    font-weight: bold;
     font-size: $medium;
-    padding: 10px;
+    padding: 5px 0px;
   }
 }
 
@@ -205,6 +228,11 @@ i.fa-brands.fa-waze {
     padding: 20px;
   }
 
+  .pin-category {
+    position: inherit;
+    margin: 5px 0px;
+  }
+
   .pin-warning {
     margin: 0;
     margin-top: 10px;

diff --git a/assets/scss/components/sidebar.scss b/assets/scss/components/sidebar.scss
@@ -32,7 +32,7 @@
     overflow-x: hidden;
     padding: 20px;
     border-right: 1px solid #303030;
-    background-color: #303030c9;
+    background-color: $background;
     backdrop-filter: blur(21px);
     -webkit-backdrop-filter: blur(21px);
     width: 250px;
@@ -59,7 +59,7 @@
     }
 
     legend {
-      color: #60a5fa;
+      color: $white;
       background-color: #404040;
       border-radius: 5px;
       padding-left: 10px;
@@ -103,6 +103,7 @@
       text-overflow: ellipsis;
       max-width: 170px;
       vertical-align: bottom;
+      color: #7a7a7a;
     }
 
     fieldset.form-group {
@@ -123,8 +124,13 @@
       font-size: 18px;
       line-height: 40px;
       height: 40px;
-      color: #6d6d6d;
+      background-color: rgba(228, 120, 120, 0.1019607843);
+      color: #E47878;
       text-align: center;
+      border-radius: 4px;
+      .fa-trash{
+        margin-right: 0px;
+      }
 
       &:hover {
         color: #a2a2a2;
@@ -137,9 +143,9 @@
       width: 75%;
       height: 40px;
       border: none;
-      background-color: #222222;
-      color: #a2a2a2;
-      border-radius: 0;
+      color: #60a5fa;
+      background-color: rgba(96, 165, 250, 0.2392156863);
+      border-radius: 4px;
       float: left;
 
       &:hover {