From 416303b6013e22c08366c2bc44ed9208fa896ff6 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Mon, 5 Dec 2022 18:27:24 +0100
Subject: [PATCH] Refactored shared css & removed unused styles

---
 .../components/ProductVariationSelect.svelte  |  5 ---
 src/lib/icons/CircleCheckmark.svelte          |  6 ++--
 src/lib/icons/CircleError.svelte              |  6 ++--
 src/lib/icons/CircleWarning.svelte            |  6 ++--
 src/lib/icons/circle-feedback.scss            | 36 ++++++++-----------
 src/routes/Header.svelte                      | 10 +++---
 src/routes/orders/OrdersTable.svelte          | 13 +++++++
 src/routes/orders/[id]/OrderProducts.svelte   | 12 +++----
 src/routes/orders/[id]/OrderSummary.svelte    | 13 ++++++-
 src/routes/privacy-policy/+page.svelte        |  4 +++
 src/styles/generic-article.scss               |  4 ---
 11 files changed, 64 insertions(+), 51 deletions(-)

diff --git a/src/lib/components/ProductVariationSelect.svelte b/src/lib/components/ProductVariationSelect.svelte
index 3338840..ea1297f 100644
--- a/src/lib/components/ProductVariationSelect.svelte
+++ b/src/lib/components/ProductVariationSelect.svelte
@@ -59,11 +59,6 @@
       &.selected {
         border-color: black;
       }
-
-      p {
-        padding: 0;
-        margin: 0;
-      }
     }
   }
 </style>
diff --git a/src/lib/icons/CircleCheckmark.svelte b/src/lib/icons/CircleCheckmark.svelte
index 46e6614..25a47d1 100644
--- a/src/lib/icons/CircleCheckmark.svelte
+++ b/src/lib/icons/CircleCheckmark.svelte
@@ -1,8 +1,8 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="CheckSuccess-checkGroup" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckSuccess" opacity="0" style="animation-delay: 700ms">
       <path
-        class="CheckSuccess-check"
+        class="loading-icon"
         fill="none"
         d="M-10 1.5c0 0 6.5 6 6.5 6c0 0 13.5-13 13.5-13"
         stroke="#24B47E"
@@ -15,7 +15,7 @@
     </g>
   </g>
   <path
-    class="CheckSuccess-circle"
+    class="loading-circle"
     fill="none"
     stroke="#24B47E"
     stroke-width="2"
diff --git a/src/lib/icons/CircleError.svelte b/src/lib/icons/CircleError.svelte
index 327de50..eea3e1f 100644
--- a/src/lib/icons/CircleError.svelte
+++ b/src/lib/icons/CircleError.svelte
@@ -1,8 +1,8 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="CheckError-checkGroup" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckError" opacity="0" style="animation-delay: 700ms">
       <path
-        class="CheckError-cross"
+        class="loading-icon"
         fill="none"
         d="M -10 -10 l 20 20 M -10 10 l 20 -20"
         stroke="#FF6245"
@@ -15,7 +15,7 @@
     </g>
   </g>
   <path
-    class="CheckError-circle"
+    class="loading-circle"
     fill="none"
     stroke="#FF6245"
     stroke-width="2"
diff --git a/src/lib/icons/CircleWarning.svelte b/src/lib/icons/CircleWarning.svelte
index b34c5f3..80a0d05 100644
--- a/src/lib/icons/CircleWarning.svelte
+++ b/src/lib/icons/CircleWarning.svelte
@@ -1,8 +1,8 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="CheckWarning-checkGroup" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckWarning" opacity="0" style="animation-delay: 700ms">
       <path
-        class="CheckWarning-exclamation"
+        class="loading-icon"
         fill="none"
         d="M 0 -12 v 15 m 0 6 v 3"
         stroke="#FFC107"
@@ -15,7 +15,7 @@
     </g>
   </g>
   <path
-    class="CheckWarning-circle"
+    class="loading-circle"
     fill="none"
     stroke="#FFC107"
     stroke-width="2"
diff --git a/src/lib/icons/circle-feedback.scss b/src/lib/icons/circle-feedback.scss
index f07284e..6af58c4 100644
--- a/src/lib/icons/circle-feedback.scss
+++ b/src/lib/icons/circle-feedback.scss
@@ -1,3 +1,18 @@
+.loading-group {
+  -webkit-animation: fadeIn 1s linear both;
+  animation: fadeIn 1s linear both;
+}
+
+.loading-icon {
+  -webkit-animation: drawCheckmark 1s linear both;
+  animation: drawCheckmark 1s linear both;
+}
+
+.loading-circle {
+  -webkit-animation: checkmarkCircleShimmer 1s linear both, drawCircle 1s linear both;
+  animation: checkmarkCircleShimmer 1s linear both, drawCircle 1s linear both;
+}
+
 @-webkit-keyframes fadeIn {
   0% {
     opacity: 0;
@@ -122,27 +137,6 @@
   }
 }
 
-.CheckSuccess-checkGroup,
-.CheckError-checkGroup,
-.CheckWarning-checkGroup {
-  -webkit-animation: fadeIn 1s linear both;
-  animation: fadeIn 1s linear both;
-}
-
-.CheckSuccess-check,
-.CheckError-cross,
-.CheckWarning-exclamation {
-  -webkit-animation: drawCheckmark 1s linear both;
-  animation: drawCheckmark 1s linear both;
-}
-
-.CheckSuccess-circle,
-.CheckError-circle,
-.CheckWarning-circle {
-  -webkit-animation: checkmarkCircleShimmer 1s linear both, drawCircle 1s linear both;
-  animation: checkmarkCircleShimmer 1s linear both, drawCircle 1s linear both;
-}
-
 @-webkit-keyframes drawCircle {
   0% {
     stroke-dashoffset: 145px;
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 3b71eb2..51ff272 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -97,11 +97,11 @@
     font-size: 1.8rem;
   }
 
-  .corner img {
-    width: 2em;
-    height: 2em;
-    object-fit: contain;
-  }
+  // .corner img {
+  //   width: 2em;
+  //   height: 2em;
+  //   object-fit: contain;
+  // }
 
   nav {
     display: flex;
diff --git a/src/routes/orders/OrdersTable.svelte b/src/routes/orders/OrdersTable.svelte
index 468c94b..b0c8415 100644
--- a/src/routes/orders/OrdersTable.svelte
+++ b/src/routes/orders/OrdersTable.svelte
@@ -55,6 +55,19 @@
 <style lang="scss" module="scoped">
   @import '../../styles/media-queries.scss';
 
+  h2 {
+    // text-decoration: underline;
+    font-size: 1.2rem;
+
+    .section-count {
+      background-color: rgba(0,0,0,0.15);
+      padding: 0.3rem 0.4rem;
+      margin-left: 0.5rem;
+      border-radius: 0.5rem;
+      font-size: 1rem;
+    }
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;
diff --git a/src/routes/orders/[id]/OrderProducts.svelte b/src/routes/orders/[id]/OrderProducts.svelte
index 68a4c57..dc24521 100644
--- a/src/routes/orders/[id]/OrderProducts.svelte
+++ b/src/routes/orders/[id]/OrderProducts.svelte
@@ -39,9 +39,13 @@
 </table>
 
 <style lang="scss">
-  // @import "../styles/global.scss";
   @import '../../../styles/media-queries.scss';
-  @import './styles-order-page.scss';
+
+  h2 {
+    width: 100%;
+    font-size: 1.5rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  }
 
   table {
     width: 100%;
@@ -73,10 +77,6 @@
     }
 
     tbody {
-      a {
-        font-size: inherit;
-      }
-
       img {
         width: 4rem;
         height: 4rem;
diff --git a/src/routes/orders/[id]/OrderSummary.svelte b/src/routes/orders/[id]/OrderSummary.svelte
index 9d35e8f..6fae840 100644
--- a/src/routes/orders/[id]/OrderSummary.svelte
+++ b/src/routes/orders/[id]/OrderSummary.svelte
@@ -28,16 +28,27 @@
 </ul>
 
 <style lang="scss">
-  @import './styles-order-page.scss';
+  .label {
+    color: grey;
+  }
+
+  span.name {
+    text-transform: capitalize;
+  }
 
   ul {
     width: 100%;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
   }
 
   li {
+    padding: 0.4rem 0;
     display: inline-flex;
     align-items: flex-start;
     flex-direction: column;
+    white-space: pre;
 
     &:not(:last-of-type) {
       margin-right: 3rem;
diff --git a/src/routes/privacy-policy/+page.svelte b/src/routes/privacy-policy/+page.svelte
index 56e75b1..7eb4d50 100644
--- a/src/routes/privacy-policy/+page.svelte
+++ b/src/routes/privacy-policy/+page.svelte
@@ -176,4 +176,8 @@
 
 <style lang="scss" module="scoped">
   @import '../../styles/generic-article.scss';
+
+  a {
+    text-decoration: underline;
+  }
 </style>
diff --git a/src/styles/generic-article.scss b/src/styles/generic-article.scss
index 76bd1f9..9c18c42 100644
--- a/src/styles/generic-article.scss
+++ b/src/styles/generic-article.scss
@@ -35,7 +35,3 @@ p.last-edit {
     display: inline-block;
   }
 }
-
-a {
-  text-decoration: underline;
-}