From 361bb23d946793f694ab4f1e87c69c418952aaf4 Mon Sep 17 00:00:00 2001
From: Jonathan ArchDell <jonathancardonaramirez@gmail.com>
Date: Tue, 28 May 2024 13:34:16 -0500
Subject: [PATCH 1/3] Fix the grid styles of the palettes

---
 .../src/styles/_media_queries.scss            | 23 +-----
 src/ign-frontend/src/styles/global.scss       | 50 +++++++------
 src/ign-frontend/src/views/GoWild.vue         | 75 -------------------
 src/ign-frontend/src/views/ImagIA.vue         | 45 ++++++-----
 4 files changed, 50 insertions(+), 143 deletions(-)

diff --git a/src/ign-frontend/src/styles/_media_queries.scss b/src/ign-frontend/src/styles/_media_queries.scss
index 8023f16..44cbf03 100755
--- a/src/ign-frontend/src/styles/_media_queries.scss
+++ b/src/ign-frontend/src/styles/_media_queries.scss
@@ -15,25 +15,4 @@
     display: block;
   }
 
-  .palette-grid {
-    .palette-post {
-      display: inline-flex;
-      width: 30%;
-      margin: 15px 10px;
-      flex: auto;
-    }
-    .palette-title {
-      font-size: 25px;
-      text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
-      font-weight: bold;
-      display: block;
-      border: 8px solid transparent;
-    }
-
-  }
-}
\ No newline at end of file
+}
diff --git a/src/ign-frontend/src/styles/global.scss b/src/ign-frontend/src/styles/global.scss
index ca3549c..fec65ab 100755
--- a/src/ign-frontend/src/styles/global.scss
+++ b/src/ign-frontend/src/styles/global.scss
@@ -251,48 +251,52 @@ html {
 }
 
 .palette-grid {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 1em;
+  box-sizing: border-box;
+  padding: 0 1em;
+  overflow-y: auto;
+  height: 500px;
 
   .palette-post {
     display: flex;
-    text-align: center;
-    width: 100%;
-    margin: 15px 10px;
-    flex: auto;
+    justify-content: center;
+    align-items: center;
+    position: relative;
     border: 8px solid transparent;
-
+    cursor: pointer;
     &:hover, &:focus, &:active, &.current-palette {
       border-color: $nord12;
-      cursor: pointer;
+      .palette-img {
+        -webkit-filter: brightness(0.6) blur(0);
+        filter: brightness(0.6) blur(0);
+      }
     }
 
     .palette-title {
       font-size: 25px;
       text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
       font-weight: bold;
-      display: block;
+      color: $nord4;
+      position: absolute;
     }
 
-    img {
-      max-width: 100%;
-      max-height: 215px;
-      border: 6px solid $nord4;
-      border-radius: 5px;
+    .palette-img {
+      width: 100%;
+      aspect-ratio: 4/3;
+      object-fit: cover;
+      background-size: cover;
+      -webkit-filter: brightness(0.3) blur(2px);
+      filter: brightness(0.3) blur(2px);
+      overflow: hidden;
     }
+
   }
 }
 
-
 /* dark theme */
 @import 'dark';
 
 /* media queries */
-@import '_media_queries';
\ No newline at end of file
+@import '_media_queries';
diff --git a/src/ign-frontend/src/views/GoWild.vue b/src/ign-frontend/src/views/GoWild.vue
index aedb7b2..0065fd2 100644
--- a/src/ign-frontend/src/views/GoWild.vue
+++ b/src/ign-frontend/src/views/GoWild.vue
@@ -238,60 +238,6 @@ export default {
   }
 }
 
-.palette-grid {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-  flex-direction: row;
-
-  .palette-post {
-    display: flex;
-    text-align: center;
-    width: 100%;
-    margin: 15px 10px;
-    flex: auto;
-    border: 8px solid transparent;
-    .palette-img {
-      -webkit-filter: brightness(0.6) blur(0);
-      filter: brightness(0.6) blur(0);
-    }
-
-    &:hover, &:focus, &:active, &.current-palette {
-      border-color: $nord12;
-      cursor: pointer;
-    }
-
-    .palette-title {
-      font-size: 25px;
-      text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
-      font-weight: bold;
-      display: block;
-    }
-
-    .palette-img {
-      width: 100%;
-      aspect-ratio: 4/3;
-      object-fit: cover;
-      background-size: cover;
-      -webkit-filter: brightness(0.3) blur(2px);
-      filter: brightness(0.3) blur(2px);
-      overflow: hidden;
-    }
-
-    img {
-      max-width: 100%;
-      max-height: 215px;
-      border: 6px solid $nord4;
-      border-radius: 5px;
-    }
-  }
-}
-
 @media (min-width: 56.25em) {
   .slider-section {
     .slider-item {
@@ -305,27 +251,6 @@ export default {
       }
     }
   }
-  .palette-grid {
-    .palette-post {
-      display: inline-flex;
-      width: 30%;
-      margin: 15px 10px;
-      flex: auto;
-    }
-    .palette-title {
-      font-size: 25px;
-      text-align: center;
-      width: calc(100% - 16px);
-      padding-top: 5em;
-      height: 6em;
-      color: $nord6;
-      background: #757575c9;
-      font-weight: bold;
-      display: block;
-      border: 8px solid transparent;
-    }
-
-  }
 }
 
 .#{$dark-mode-class} {
diff --git a/src/ign-frontend/src/views/ImagIA.vue b/src/ign-frontend/src/views/ImagIA.vue
index e228e14..7475e58 100755
--- a/src/ign-frontend/src/views/ImagIA.vue
+++ b/src/ign-frontend/src/views/ImagIA.vue
@@ -21,10 +21,9 @@
       </center>
       <div class="palette-grid container">
         <div @click="selectedPalette = palette.name" :class="{'palette-post': true, 'current-palette': (selectedPalette === palette.name)}" v-for="palette in availablePalettes" :key="palette.name">
-          <div :style="`width: 100%; min-height: 80px; background-size: cover; background: linear-gradient(to right, ${palette.colors[0]} 16.65%, ${palette.colors[1]} 16.65% 33.3%, ${palette.colors[2]} 33.3% 49.95%, ${palette.colors[3]} 49.95% 66.55%, ${palette.colors[4]} 66.55% 83.2%, ${palette.colors[5]} 83.2%
-          );`">
-            <span class="palette-title">{{ palette.name }}</span>
-          </div>
+          <div class="palette-img" :style="`background: linear-gradient(to right, ${palette.colors[0]} 16.65%, ${palette.colors[1]} 16.65% 33.3%, ${palette.colors[2]} 33.3% 49.95%, ${palette.colors[3]} 49.95% 66.55%, ${palette.colors[4]} 66.55% 83.2%, ${palette.colors[5]} 83.2%
+          );`"/>
+          <span class="palette-title">{{ palette.name }}</span>
         </div>
       </div>
       <Demo :isAi="true" :selectedPalette="`${(selectedPalette !== '') ? selectedPalette : []}`" />
@@ -64,27 +63,27 @@ export default {
   }
 }
 
-.palette-grid {
-  max-height: 380px;
-  overflow-y: auto;
+/* .palette-grid { */
+/*   max-height: 380px; */
+/*   overflow-y: auto; */
 
-  .palette-post {
-    .palette-title {
-      padding-top: 0;
-      height: 65px;
-      align-content: space-around;
-    }
-  }
-}
+/*   .palette-post { */
+/*     .palette-title { */
+/*       padding-top: 0; */
+/*       height: 65px; */
+/*       align-content: space-around; */
+/*     } */
+/*   } */
+/* } */
 
-@media (min-width: 56.25em) {
-  .palette-grid {
-    .palette-post {
-      width: 21%;
-      max-height: 80px;
-    }
-  }
-}
+/* @media (min-width: 56.25em) { */
+/*   .palette-grid { */
+/*     .palette-post { */
+/*       width: 21%; */
+/*       max-height: 80px; */
+/*     } */
+/*   } */
+/* } */
 
 .demo-section {
   min-height: 500px;

From f12e4e492254e079f1cb1901e2e203b98dc767b2 Mon Sep 17 00:00:00 2001
From: Jonathan ArchDell <jonathancardonaramirez@gmail.com>
Date: Tue, 28 May 2024 17:59:04 -0500
Subject: [PATCH 2/3] Remove unnecesary commented code

---
 src/ign-frontend/src/views/ImagIA.vue | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/src/ign-frontend/src/views/ImagIA.vue b/src/ign-frontend/src/views/ImagIA.vue
index 7475e58..56a7de2 100755
--- a/src/ign-frontend/src/views/ImagIA.vue
+++ b/src/ign-frontend/src/views/ImagIA.vue
@@ -63,28 +63,6 @@ export default {
   }
 }
 
-/* .palette-grid { */
-/*   max-height: 380px; */
-/*   overflow-y: auto; */
-
-/*   .palette-post { */
-/*     .palette-title { */
-/*       padding-top: 0; */
-/*       height: 65px; */
-/*       align-content: space-around; */
-/*     } */
-/*   } */
-/* } */
-
-/* @media (min-width: 56.25em) { */
-/*   .palette-grid { */
-/*     .palette-post { */
-/*       width: 21%; */
-/*       max-height: 80px; */
-/*     } */
-/*   } */
-/* } */
-
 .demo-section {
   min-height: 500px;
   background: $nord5;

From f919d9de7b18be6cd92f4aaff8c4cd751273111e Mon Sep 17 00:00:00 2001
From: Jonathan ArchDell <jonathancardonaramirez@gmail.com>
Date: Tue, 28 May 2024 18:24:45 -0500
Subject: [PATCH 3/3] Remove Github Stars widget bc doesn't show right

---
 src/ign-frontend/src/views/ImagIA.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/ign-frontend/src/views/ImagIA.vue b/src/ign-frontend/src/views/ImagIA.vue
index 56a7de2..075f843 100755
--- a/src/ign-frontend/src/views/ImagIA.vue
+++ b/src/ign-frontend/src/views/ImagIA.vue
@@ -4,9 +4,6 @@
         h1="Image Go AI 🤖"
         h2="Use the power of the PaletteNet to recolor your images"
       />
-    <center>
-      <a class="github-button" href="https://github.com/Schrodinger-Hat/ImageGoNord" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star Schrodinger-Hat/ImageGoNord on GitHub">Star</a>
-    </center>
     <div class="canvas-container">
       <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
         <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5