feat(freesewing.dev): Updated gradients and loading indicators

packages/freesewing.dev/components/footer.js

@@ -24,7 +24,7 @@ const social = {
 
 const Footer = ({ app }) => (
   <footer className="bg-neutral">
-    <div className={`theme-gradient h-1 w-full relative ${app.loading ? 'loading' : ''}`}></div>
+    <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
     <div className="p-4 py-16 flex flex-row bg-neutral -mt-1 z-0 gap-8 flex-wrap justify-around text-neutral-content">
       <div className="w-64 mt-2">
         <div className="px-4 mb-4"><CreativeCommonsLogo /></div>
@@ -159,6 +159,7 @@ const Footer = ({ app }) => (
       </a>
     </div>
 
+    <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
   </footer>
 )
 

packages/freesewing.dev/components/header.js

@@ -46,6 +46,8 @@ const Header = ({ app, setSearch }) => {
         z-30
         transition-transform
         ${show ? '': 'fixed top-0 left-0 -translate-y-20'}
+        drop-shadow-xl
+        ${app.loading ? "theme-gradient loading" : ""}
       `}>
         <div className="max-w-6xl m-auto">
           <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
@@ -115,10 +117,6 @@ const Header = ({ app, setSearch }) => {
             </div>
           </div>
         </div>
-        <div className={`
-          theme-gradient h-1 w-full z-10 relative -mb-1
-          ${app.loading ? 'loading' : ''}
-        `}></div>
       </header>
   )
 }

packages/freesewing.shared/styles/globals.css

@@ -212,7 +212,7 @@
 }
 .theme-gradient.loading {
   animation-name: MOVE-BG;
-  animation-duration: 2s;
+  animation-duration: 4s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   margin-top: 0;
@@ -223,7 +223,7 @@
      background-position-x: 0;
    }
    to {
-     background-position-x: -300px;
+     background-position-x: -200vw;
    }
 }
 

packages/freesewing.shared/themes/dark.js

@@ -34,11 +34,12 @@ module.exports = {
   '--btn-error-content': colors.neutral[50],
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.neutral[300]},
-    ${colors.neutral[300]} 10px,
-    ${colors.neutral[800]} 10px,
-    ${colors.neutral[800]} 20px
+    90deg,
+    ${colors.violet[900]},
+    ${colors.violet[900]} 40%,
+    ${colors.pink[700]} 65%,
+    ${colors.violet[600]} 90%,
+    ${colors.violet[900]} 100%
   )`,
 
   '--code-background-color': '#111',

packages/freesewing.shared/themes/hax0r.js

@@ -36,11 +36,10 @@ module.exports = {
   '--rounded-btn': '0',
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.lime['700']},
-    ${colors.lime['700']} 15px,
-    ${bg} 15px,
-    ${bg} 30px
+    90deg,
+    ${colors.lime['900']},
+    ${colors.lime['500']} 50%,
+    ${colors.lime['900']} 100%
   )`,
 
   '--code-background-color': '#002407',

packages/freesewing.shared/themes/lgbtq.js

@@ -29,19 +29,19 @@ module.exports = {
   'error': colors.red['600'],
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
+     90deg,
      ${colors.red[500]},
-    ${colors.red[500]} 20px,
-    ${colors.orange[500]} 20px,
-    ${colors.orange[500]} 40px,
-    ${colors.yellow[400]} 40px,
-    ${colors.yellow[400]} 60px,
-    ${colors.green[500]} 60px,
-    ${colors.green[500]} 80px,
-    ${colors.blue[500]} 80px,
-    ${colors.blue[500]} 100px,
-    ${colors.violet[500]} 100px,
-    ${colors.violet[500]} 120px
+     ${colors.red[500]} 16.66%,
+     ${colors.orange[500]} 16.66%,
+     ${colors.orange[500]} 33.33%,
+     ${colors.yellow[400]} 33.33%,
+     ${colors.yellow[400]} 50%,
+     ${colors.green[500]} 50%,
+     ${colors.green[500]} 66.66%,
+     ${colors.blue[500]} 66.66%,
+     ${colors.blue[500]} 83.33%,
+     ${colors.violet[500]} 83.33%,
+     ${colors.violet[500]} 100%
   )`,
 
   '--code-background-color': colors.neutral['800'],

packages/freesewing.shared/themes/light.js

@@ -131,11 +131,12 @@ module.exports = {
   * This is used as a border & loading indicator
   */
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.neutral[900]} 0,
-    ${colors.neutral[900]} 10px,
-    ${colors.neutral[50]} 10px,
-    ${colors.neutral[50]} 20px
+    90deg,
+    ${colors.violet[600]} 0,
+    ${colors.violet[500]} 30%,
+    ${colors.yellow[500]} 50%,
+    ${colors.purple[500]} 75%,
+    ${colors.violet[600]} 100%
   )`,
 
   /* CODE HIGHLIGHTING COLORS

packages/freesewing.shared/themes/trans.js

@@ -14,7 +14,7 @@ module.exports = {
   'primary': pink,
   'primary-focus': blue,
   'primary-content': colors.neutral['900'],
-  'secondary': blue,
+  'secondary': colors.sky['500'],
   'secondary-focus': pink,
   'secondary-content': colors.neutral['900'],
 
@@ -32,17 +32,17 @@ module.exports = {
   'error': colors.red['600'],
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
+    90deg,
     #77cbf9,
-    #77cbf9 20px,
-    #ecadb9 20px,
-    #ecadb9 40px,
-    ${colors.neutral['50']} 40px,
-    ${colors.neutral['50']} 60px,
-    #ecadb9 60px,
-    #ecadb9 80px,
-    #77cbf9 80px,
-    #77cbf9 100px
+    #77cbf9 20%,
+    #ecadb9 20%,
+    #ecadb9 40%,
+    ${colors.neutral['50']} 40%,
+    ${colors.neutral['50']} 60%,
+    #ecadb9 60%,
+    #ecadb9 80%,
+    #77cbf9 80%,
+    #77cbf9 100%
   )`,
 
   '--code-background-color': colors.neutral['800'],