add: bottom toolbar, remove button for cards

Implemented bottom toolbar for adding and calculating, added remove button for Price Cards

app/assets/styles/button.css

@@ -1,9 +1,14 @@
 .Button {
-    all: unset;
+    --padding: .2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    cursor: pointer;
+    transition: var(--transition-default);
+    outline: none;
+    border: none;
+    background: transparent;
 
     &.cta {
         background: var(--color-main);
@@ -11,10 +16,34 @@
         padding: .5rem 1.5rem;
         border-radius: var(--radius-default);
         box-shadow: var(--box-shadow-z2);
-        transition: var(--transition-default);
 
         &:hover {
             background: var(--color-main-dark);
         }
     }
+
+    &.icon-button {
+        display: flex;
+        padding: var(--padding);
+        border-radius: 100%;
+
+        &:hover {
+            scale: 1.2;
+        }
+    }
+
+    &.mini-button {
+        padding: .5rem 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+
+        & > .icon {
+            font-size: 1.5rem;
+        }
+
+        & > span {
+            font-size: .8rem;
+        }
+    }
 }

app/assets/styles/general.css

@@ -39,6 +39,7 @@ body {
 
 .content {
     padding: 1rem;
+    min-height: 100dvh;
 }
 
 .pc-wrapper {
@@ -49,4 +50,24 @@ body {
 .flex-col {
     display: flex;
     flex-direction: column;
+}
+
+.text-white {
+    color: var(--color-white);
+}
+
+.bg-main {
+    background-color: var(--color-main);
+}
+
+.bg-main-hover:hover {
+    background-color: var(--color-main);
+}
+
+.bg-main-dark {
+    background-color: var(--color-main-dark);
+}
+
+.bg-main-dark-hover:hover {
+    background-color: var(--color-main-dark);
 }

app/assets/styles/header.css

@@ -3,7 +3,11 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--padding-default);
+    background-color: var(--color-white);
     box-shadow: var(--box-shadow-z2);
+    position: sticky;
+    top: 0;
+    z-index: 1;
 
     & strong {
         font-size: 2em;

app/assets/styles/priceCard.css

@@ -1,6 +1,24 @@
 .PriceCard {
     width: 100%;
 
+    & > header {
+        color: white;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 1.3em;
+
+        & > .Button {
+            scale: 0;
+            color: var(--color-white);
+            border: 2px solid var(--color-white);
+        }
+
+        & > .Button.deletable {
+            scale: 1;
+        }
+    }
+
     & > .padding {
         gap: 1rem;
         padding: var(--padding-default);

app/assets/styles/toolbar.css

@@ -0,0 +1,12 @@
+.Toolbar {
+    display: flex;
+    justify-content: space-evenly;
+    background: var(--color-main);
+    position: sticky;
+    bottom: 0;
+
+    & > .Button {
+        --padding: 1rem;
+        font-size: 1rem;
+    }
+}