Refactored shared css & removed unused styles

src/lib/components/ProductVariationSelect.svelte

@@ -59,11 +59,6 @@
       &.selected {
         border-color: black;
       }
-
-      p {
-        padding: 0;
-        margin: 0;
-      }
     }
   }
 </style>

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"

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"

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"

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;

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;

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;

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;

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;

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>

src/styles/generic-article.scss

@@ -35,7 +35,3 @@ p.last-edit {
     display: inline-block;
   }
 }
-
-a {
-  text-decoration: underline;
-}