chore: remove modo dark e compoe cores do sistema

quasar.config.js

@@ -107,7 +107,7 @@ export default defineConfig((ctx) => {
     framework: {
       lang: "pt-BR",
       config: {
-        dark: "auto",
+        dark: "false",
         notify: {
           position: "top-right",
         },

src/App.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { Cookies, useQuasar } from "quasar";
+import { Cookies } from "quasar";
 import { watch } from "vue";
 import { useI18n } from "vue-i18n";
 
@@ -13,26 +13,6 @@ defineOptions({
 
 const { locale } = useI18n();
 
-const $q = useQuasar();
-const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-  ? "dark"
-  : "light";
-
-const theme = Cookies.get("theme") || systemTheme;
-
-$q.dark.set(theme == "dark");
-
-watch(
-  () => $q.dark.isActive,
-  (value) => {
-    Cookies.set("theme", value ? "dark" : "light", {
-      expires: 365,
-      sameSite: "Lax",
-      path: "/",
-    });
-  },
-);
-
 watch(
   () => locale.value,
   (value) => {

src/boot/defaultPropsComponents.js

@@ -21,14 +21,12 @@ export default defineBoot(() => {
   });
   SetComponentDefaults(QInput, {
     rounded: true,
-    dark: true,
     standout: true,
     dense: true,
   });
   SetComponentDefaults(QSelect, {
     rounded: true,
     standout: true,
-    dark: true,
     dense: true,
   });
   SetComponentDefaults(QCard, {

src/components/charts/CardIconChart.vue

@@ -63,16 +63,8 @@ const { color, title, icon } = defineProps({
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 
-body.body--light {
-  .background {
-    background: rgba(map.get($colors, "primary"), 0.2) !important;
-  }
-}
-
-body.body--dark {
-  .background {
-    background: rgba(map.get($colors-dark, "primary"), 0.2) !important;
-  }
+.background {
+  background: rgba(map.get($colors, "primary"), 0.2) !important;
 }
 
 .chart-card {

src/components/charts/CardIconMiniChart.vue

@@ -67,16 +67,8 @@ const { color, title, icon, chartData, numberCard, numberPorcent } =
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 
-body.body--light {
-  .background {
-    background: rgba(map.get($colors, "primary"), 0.2) !important;
-  }
-}
-
-body.body--dark {
-  .background {
-    background: rgba(map.get($colors-dark, "primary"), 0.2) !important;
-  }
+.background {
+  background: rgba(map.get($colors, "primary"), 0.2) !important;
 }
 
 .mini-card {

src/components/charts/custom/NPSChart.vue

@@ -14,7 +14,7 @@
         @click="downloadImage"
       />
     </q-card-section>
-    <q-separator dark inset />
+    <q-separator inset />
     <div class="graph-container">
       <div class="column">
         <div class="col-4 row">

src/components/charts/custom/SpeedometerChart.vue

@@ -16,7 +16,7 @@
           @click="downloadImage"
         />
       </div>
-      <q-separator dark />
+      <q-separator />
     </q-card-section>
     <div class="graph-container">
       <Doughnut

src/components/charts/normal/BarChart.vue

@@ -29,7 +29,7 @@ import {
 } from "chart.js";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, colors, getCssVar } from "quasar";
+import { colors, getCssVar } from "quasar";
 
 ChartJS.register(
   Title,
@@ -40,7 +40,6 @@ ChartJS.register(
   LinearScale,
 );
 
-const $q = useQuasar();
 const chart_ref = ref(null);
 const { lighten } = colors;
 
@@ -86,21 +85,13 @@ const onResize = () => {
   }
 };
 
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
+const textColor = computed(() => "text-black");
 
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const labelColor = computed(() => "#000000");
 
-const gridColor = computed(() => {
-  return $q.dark.isActive ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
-});
+const gridColor = computed(() => "rgba(0, 0, 0, 0.1)");
 
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const dataLabelColor = computed(() => "#000000");
 
 const hasData = computed(() => {
   return props.data?.chart_data && props.data.chart_data.length > 0;
@@ -170,9 +161,7 @@ const chartBarOptions = computed(() => ({
       },
     },
     tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
       titleColor: labelColor.value,
       bodyColor: labelColor.value,
       borderColor: labelColor.value,

src/components/charts/normal/DoughnutChart.vue

@@ -21,11 +21,10 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import { Doughnut } from "vue-chartjs";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, colors, getCssVar } from "quasar";
+import { colors, getCssVar } from "quasar";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
-const $q = useQuasar();
 const { lighten } = colors;
 
 const props = defineProps({
@@ -59,17 +58,11 @@ const onResize = () => {
   }
 };
 
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
+const textColor = computed(() => "text-black");
 
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const labelColor = computed(() => "#000000");
 
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const dataLabelColor = computed(() => "#000000");
 
 const hasData = computed(() => {
   return props.data?.chart_data && props.data.chart_data.length > 0;
@@ -145,9 +138,7 @@ const chartPieOptions = computed(() => ({
       },
     },
     tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
       titleColor: labelColor.value,
       bodyColor: labelColor.value,
       borderColor: labelColor.value,

src/components/charts/normal/LineChart.vue

@@ -30,7 +30,7 @@ import {
 } from "chart.js";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, getCssVar, colors } from "quasar";
+import { getCssVar, colors } from "quasar";
 
 ChartJS.register(
   Title,
@@ -42,7 +42,6 @@ ChartJS.register(
   LinearScale,
 );
 
-const $q = useQuasar();
 const { lighten } = colors;
 const chart_ref = ref(null);
 
@@ -83,21 +82,13 @@ const onResize = () => {
   }
 };
 
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
+const textColor = computed(() => "text-black");
 
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const labelColor = computed(() => "#000000");
 
-const gridColor = computed(() => {
-  return $q.dark.isActive ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
-});
+const gridColor = computed(() => "rgba(0, 0, 0, 0.1)");
 
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const dataLabelColor = computed(() => "#000000");
 
 const hasData = computed(() => {
   return props.data?.chart_data && props.data.chart_data.length > 0;
@@ -170,9 +161,7 @@ const chartLineOptions = computed(() => ({
       },
     },
     tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
       titleColor: labelColor.value,
       bodyColor: labelColor.value,
       borderColor: labelColor.value,

src/components/charts/normal/PieChart.vue

@@ -21,11 +21,10 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import { Pie } from "vue-chartjs";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, getCssVar, colors } from "quasar";
+import { getCssVar, colors } from "quasar";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
-const $q = useQuasar();
 const { lighten } = colors;
 
 const props = defineProps({
@@ -60,17 +59,11 @@ const onResize = () => {
   }
 };
 
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
+const textColor = computed(() => "text-black");
 
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const labelColor = computed(() => "#000000");
 
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
+const dataLabelColor = computed(() => "#000000");
 
 const hasData = computed(() => {
   return props.data?.chart_data && props.data.chart_data.length > 0;
@@ -146,9 +139,7 @@ const chartPieOptions = computed(() => ({
       },
     },
     tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
       titleColor: labelColor.value,
       bodyColor: labelColor.value,
       borderColor: labelColor.value,

src/components/defaults/DefaultFilePicker.vue

@@ -270,17 +270,9 @@ onUnmounted(cleanupObjectURL);
   align-items: center;
 
   .q-field__inner {
-    .body--dark & {
-      --image-bg-color: #{map.get($colors-dark, "surface")};
-      --image-border-color: #{map.get($colors-dark, "primary")};
-      --image-border-hover-color: #{map.get($colors-dark, "primary-dark")};
-    }
-
-    .body--light & {
-      --image-bg-color: #{map.get($colors, "surface")};
-      --image-border-color: #{map.get($colors, "primary")};
-      --image-border-hover-color: #{map.get($colors, "primary-dark")};
-    }
+    --image-bg-color: #{map.get($colors, "surface")};
+    --image-border-color: #{map.get($colors, "primary")};
+    --image-border-hover-color: #{map.get($colors, "primary-dark")};
 
     display: flex;
     flex-direction: column;

src/components/layout/LeftMenuLayout.vue

@@ -185,34 +185,6 @@
         <q-list class="column q-mb-md no-wrap" style="border-radius: 6px">
         </q-list>
         <q-list class="q-mt-auto">
-          <q-item v-ripple clickable @click="changeTheme">
-            <div class="flex">
-              <q-item-section avatar>
-                <q-icon
-                  :name="
-                    $q.dark.isActive ? 'mdi-weather-sunny' : 'mdi-weather-night'
-                  "
-                  style="font-size: 20px"
-                />
-              </q-item-section>
-              <q-item-section>{{
-                $q.dark.isActive
-                  ? $t("common.terms.light")
-                  : $t("common.terms.dark")
-              }}</q-item-section>
-            </div>
-            <q-tooltip
-              v-if="miniState"
-              anchor="center right"
-              self="center left"
-              :offset="[10, 10]"
-              >{{
-                $q.dark.isActive
-                  ? $t("common.terms.light")
-                  : $t("common.terms.dark")
-              }}</q-tooltip
-            >
-          </q-item>
           <q-item v-ripple clickable @click="logoutFn">
             <div class="flex">
               <q-item-section avatar>
@@ -238,9 +210,7 @@
                 :src="
                   miniState || $q.screen.lt.md
                     ? LogoSoftparMini
-                    : $q.dark.isActive
-                      ? LogoSoftparLight
-                      : LogoSoftparDark
+                    : LogoSoftparDark
                 "
                 style="width: 100%; height: 30px"
                 :style="
@@ -278,7 +248,6 @@ import { useQuasar, Cookies } from "quasar";
 import { version } from "src/../package.json";
 
 import Logo from "src/assets/logo.png";
-import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
 
@@ -288,9 +257,6 @@ const route = useRoute();
 const navigation_store = navigationStore();
 const $q = useQuasar();
 
-const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-  ? "dark"
-  : "light";
 const miniStateCookies = Cookies.get("miniState");
 const miniState = ref(miniStateCookies === "true" ? true : false);
 
@@ -312,15 +278,6 @@ watchEffect(() => {
   }
 });
 
-const changeTheme = async () => {
-  const theme = $q.cookies.get("theme") || systemTheme;
-  if (theme == "dark") {
-    $q.dark.set(false);
-  } else {
-    $q.dark.set(true);
-  }
-};
-
 const logoutFn = async () => {
   await logout();
   router.push({ name: "LoginPage" });

src/components/layout/LeftMenuLayoutMobile.vue

@@ -78,7 +78,7 @@
           <q-item v-ripple clickable @click="openUrl('https://softpar.inf.br')">
             <div class="flex full-width justify-center">
               <q-img
-                :src="$q.dark.isActive ? LogoSoftparLight : LogoSoftparDark"
+                :src="LogoSoftparDark"
                 style="width: 100%; height: 30px; max-width: 114px"
               />
             </div>
@@ -104,7 +104,6 @@ import { navigationStore } from "src/stores/navigation";
 import { version } from "src/../package.json";
 
 import Logo from "src/assets/logo.png";
-import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 
 const router = useRouter();

src/css/app.scss

@@ -57,28 +57,7 @@ body.body--light {
     }
   }
 
-  background: #{map.get($colors, "page")} !important;
-
-  .q-list--dark,
-  .q-item--dark:not(.q-item--active) {
-    color: black;
-  }
-
-  .q-field--dark {
-    .q-field__control:not(.text-negative) {
-      .q-field__marginal {
-        color: rgba(0, 0, 0, 0.54);
-      }
-      & ~ .q-field__bottom {
-        color: rgba(0, 0, 0, 0.54);
-      }
-    }
-    &:not(.q-field--highlighted)
-      .q-field__control:not(.text-negative)
-      .q-field__label {
-      color: rgba(0, 0, 0, 0.54);
-    }
-  }
+  background: #{map.get($colors, "background")} !important;
 
   .card-ring {
     box-shadow: 0 0 0 1px #c0c0c0c0 !important;
@@ -89,21 +68,6 @@ body.body--light {
   }
 }
 
-body.body--dark {
-  background: #{map.get($colors-dark, "page")};
-
-  .q-drawer:has(.detached-container) {
-    background: #{map.get($colors-dark, "surface")} !important;
-  }
-
-  .q-menu {
-    background: #{map.get($colors-dark, "surface")};
-  }
-
-  .card-ring {
-    box-shadow: 0 0 0 1px #505050 !important;
-  }
-}
 
 .q-card__actions .q-btn {
   padding: 10px 16px;
@@ -139,22 +103,6 @@ input[type="number"]::-webkit-outer-spin-button {
   background: #fff !important;
 }
 
-.q-field--dark .q-field__native {
-  color: black;
-}
-
-.q-field--dark .q-field__native,
-.q-field--dark .q-field__prefix,
-.q-field--dark .q-field__suffix,
-.q-field--dark .q-field__input {
-  color: black;
-}
-
-.q-field--dark:not(.q-field--highlighted) .q-field__label,
-.q-field--dark .q-field__marginal,
-.q-field--dark {
-  color: black;
-}
 
 .q-field--standout.q-field--rounded .q-field__control {
   border-radius: 8px;

src/css/quasar.variables.scss

@@ -2,8 +2,6 @@ $primary: #003e29;
 $secondary: #ff8340; 
 $accent: #e91e63;
 
-$dark: #1d1d1d;
-
 $positive: #2e7d32;
 $negative: #d32f2f;
 $info: #0288d1;
@@ -53,47 +51,6 @@ $colors: (
   "declined-4": #ffcecf,
 );
 
-// Modo dark fora do escopo
-$colors-dark: (
-  "primary": #1976d2,
-  "primary-light": #42a5f5,
-  "primary-dark": #1565c0,
-
-  "dark": #1d1d1d,
-
-  "secondary": #ce93d8,
-  "secondary-light": #f3e5f5,
-  "secondary-dark": #ab47bc,
-
-  "terciary": #ffd191,
-  "terciary-light": #ffecb3,
-  "terciary-dark": #ffab40,
-
-  "page": #121212,
-
-  "surface": #1d1d1d,
-  "surface-light": #333333,
-  "surface-dark": #121212,
-
-  "text": #ffffff,
-
-  "success": #66bb6a,
-  "success-light": #81c784,
-  "success-dark": #388e3c,
-
-  "error": #f44336,
-  "error-light": #e57373,
-  "error-dark": #d32f2f,
-
-  "warning": #ffa726,
-  "warning-light": #ffb74d,
-  "warning-dark": #f57c00,
-
-  "info": #29b6f6,
-  "info-light": #4fc3f7,
-  "info-dark": #0288d1
-);
-
 @each $name, $color in $colors {
   .text-#{$name} {
     color: $color !important;
@@ -103,13 +60,3 @@ $colors-dark: (
   }
 }
 
-.body--dark {
-  @each $name, $color in $colors-dark {
-    .text-#{$name} {
-      color: $color !important;
-    }
-    .bg-#{$name} {
-      background: $color !important;
-    }
-  }
-}

src/css/table.scss

@@ -1,19 +1,10 @@
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 .softpar-table {
-  .body--dark & {
-    --table-bg-color: #{map.get($colors-dark, "surface")}; // Using our dark background
-    --table-border-color: #{map.get($colors-dark, "surface-light")}; // Darker border
-    --table-header-color: #{map.get($colors-dark, "text")}; // Light text for dark mode
-    --table-ring-color: #505050;
-  }
-
-  .body--light & {
-    --table-bg-color: #{map.get($colors, "surface")}; // Light background
-    --table-border-color: #{map.get($colors, "surface-light")}; // Border color
-    --table-header-color: #{map.get($colors, "text")}; // Dark text for light mode
-    --table-ring-color: #c0c0c0c0;
-  }
+  --table-bg-color: #{map.get($colors, "surface")};
+  --table-border-color: #{map.get($colors, "surface-light")};
+  --table-header-color: #{map.get($colors, "text")};
+  --table-ring-color: #c0c0c0c0;
 
   padding-left: 16px !important;
   padding-right: 16px !important;
@@ -71,16 +62,8 @@
   width: fit-content;
   margin-right: auto;
   margin-left: auto;
-
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "positive-1")};
-  }
-
-  .body--light & {
-    background: #{map.get($colors, "positive-1")};
-    border: none;
-  }
+  background: #{map.get($colors, "positive-1")};
+  border: none;
 }
 
 .inativo {
@@ -91,16 +74,8 @@
   width: fit-content;
   margin-right: auto;
   margin-left: auto;
-
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "negative-1")};
-  }
-
-  .body--light & {
-    background: #{map.get($colors, "negative-1")};
-    border: none;
-  }
+  background: #{map.get($colors, "negative-1")};
+  border: none;
 }
 
 .rejeitado {
@@ -111,16 +86,8 @@
   width: fit-content;
   margin-right: auto;
   margin-left: auto;
-
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "negative-1")};
-  }
-
-  .body--light & {
-    background: #{map.get($colors, "negative-1")};
-    border: none;
-  }
+  background: #{map.get($colors, "negative-1")};
+  border: none;
 }
 
 .gerado {
@@ -131,16 +98,8 @@
   width: fit-content;
   margin-right: auto;
   margin-left: auto;
-
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "primary-1")};
-  }
-
-  .body--light & {
-    background: #{map.get($colors, "primary-1")};
-    border: none;
-  }
+  background: #{map.get($colors, "primary-1")};
+  border: none;
 }
 
 .pendente {
@@ -151,46 +110,20 @@
   width: fit-content;
   margin-right: auto;
   margin-left: auto;
-
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "warning")};
-  }
-
-  .body--light & {
-    background: #{map.get($colors, "warning")};
-    border: none;
-  }
+  background: #{map.get($colors, "warning")};
+  border: none;
 }
 
 .table-bottom {
   .q-table__top {
-    .body--light & {
-      background: #{map.get($colors, "page")};
-    }
-
-    .body--dark & {
-      background: #{map.get($colors, "background-3")};
-    }
+    background: #{map.get($colors, "page")};
   }
 
   .q-table__bottom {
-    .body--light & {
-      background: #{map.get($colors, "page")};
-    }
-
-    .body--dark & {
-      background: #{map.get($colors, "background-3")};
-    }
+    background: #{map.get($colors, "page")};
   }
 }
 
 .q-table__grid-item-card {
-  .body--light & {
-    background: #{map.get($colors, "dark")};
-  }
-
-  .body--dark & {
-    background: #{map.get($colors, "background-3")};
-  }
+  background: #{map.get($colors, "dark")};
 }

src/layouts/MainLayout.vue

@@ -10,21 +10,12 @@
         <q-btn dense flat @click="toggleLeftDrawer">
           <q-icon
             name="menu"
-            :color="$q.dark.isActive ? 'white' : 'black'"
+            color="black"
             style="font-size: 20px"
           />
         </q-btn>
         <div>
-          <q-btn dense flat class="q-mr-sm" @click="changeTheme">
-            <q-icon
-              :color="$q.dark.isActive ? 'white' : 'black'"
-              :name="
-                $q.dark.isActive ? 'mdi-weather-sunny' : 'mdi-weather-night'
-              "
-              style="font-size: 20px"
-            />
-          </q-btn>
-          <q-btn dense flat @click="logoutFn">
+              <q-btn dense flat @click="logoutFn">
             <q-icon name="logout" color="negative" style="font-size: 20px" />
           </q-btn>
         </div>
@@ -73,9 +64,6 @@ const leftDrawerOpen = ref(false);
 const scrollAreaRef = useTemplateRef("scrollAreaRef");
 
 let oldValue = route.path;
-const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-  ? "dark"
-  : "light";
 
 const logoutFn = async () => {
   await logout();
@@ -86,15 +74,6 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 };
 
-const changeTheme = async () => {
-  const theme = $q.cookies.get("theme") || systemTheme;
-  if (theme == "dark") {
-    $q.dark.set(false);
-  } else {
-    $q.dark.set(true);
-  }
-};
-
 watch(route, (value) => {
   if (oldValue.path != value.path) {
     scrollAreaRef.value.setScrollPosition("vertical", 0, 0);

src/pages/login/LoginPage.vue

@@ -2,7 +2,7 @@
   <q-page class="column">
     <div
       flat
-      class="column justify-around items-center flex-grow full-width full-height z-top frosted-glass"
+      class="column justify-around items-center flex-grow full-width full-height z-top"
     >
       <div class="column flex-center full-width q-px-md">
         <q-img :src="Logo" style="max-width: 650px" />
@@ -59,7 +59,6 @@
         <div style="height: 160px"></div>
       </q-form>
     </div>
-    <WavePattern class="absolute-top" />
   </q-page>
 </template>
 
@@ -71,10 +70,9 @@ import { useRouter } from "vue-router";
 import { useInputRules } from "src/composables/useInputRules";
 import { useSubmitHandler } from "src/composables/useSubmitHandler";
 
-import Logo from "src/assets/logo.png";
+import Logo from "src/assets/images/logo.svg";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";
-import WavePattern from "./component/WavePattern.vue";
 
 const router = useRouter();
 const $q = useQuasar();
@@ -127,8 +125,4 @@ onBeforeMount(() => {
 .login-page {
   position: relative;
 }
-
-.frosted-glass {
-  backdrop-filter: blur(60px);
-}
 </style>

src/pages/login/component/WavePattern.vue

@@ -1,231 +0,0 @@
-<template>
-  <div class="overflow-hidden full-height" v-bind="$attrs">
-    <div class="element-with-wave"></div>
-  </div>
-</template>
-<style lang="scss" scoped>
-@use "sass:map";
-@use "src/css/quasar.variables.scss";
-
-.element-with-wave {
-  position: relative;
-  background: rgba(map.get($colors-dark, "primary"), 1) !important;
-  margin-top: 60dvh;
-  width: 100%;
-  height: 100dvh;
-  transform: translateZ(0);
-}
-
-.element-with-wave::before {
-  content: "";
-  position: absolute;
-  top: -240px;
-  left: 0;
-  width: 100%;
-  height: 240px;
-  background-color: rgba(map.get($colors-dark, "primary"), 1) !important;
-  will-change: clip-path;
-  animation: organic-swell 20s ease-in-out infinite alternate;
-  clip-path: polygon(
-    0% 100%,
-    0% 50%,
-    5% 45%,
-    10% 55%,
-    18% 40%,
-    25% 60%,
-    33% 45%,
-    42% 60%,
-    50% 40%,
-    58% 60%,
-    67% 45%,
-    75% 60%,
-    82% 40%,
-    91% 60%,
-    100% 50%,
-    100% 100%
-  );
-}
-
-@keyframes organic-swell {
-  0% {
-    clip-path: polygon(
-      0% 100%,
-      0% 50%,
-      5% 45%,
-      10% 55%,
-      18% 40%,
-      25% 60%,
-      33% 45%,
-      42% 60%,
-      50% 40%,
-      58% 60%,
-      67% 45%,
-      75% 60%,
-      82% 40%,
-      91% 60%,
-      100% 50%,
-      100% 100%
-    );
-  }
-  12.5% {
-    clip-path: polygon(
-      0% 100%,
-      0% 10%,
-      5% 20%,
-      10% 15%,
-      18% 30%,
-      25% 40%,
-      33% 35%,
-      42% 50%,
-      50% 55%,
-      58% 65%,
-      67% 60%,
-      75% 70%,
-      82% 65%,
-      91% 75%,
-      100% 60%,
-      100% 100%
-    );
-  }
-  25% {
-    clip-path: polygon(
-      0% 100%,
-      0% 40%,
-      5% 30%,
-      10% 50%,
-      18% 20%,
-      25% 30%,
-      33% 15%,
-      42% 40%,
-      50% 50%,
-      58% 60%,
-      67% 55%,
-      75% 65%,
-      82% 60%,
-      91% 70%,
-      100% 55%,
-      100% 100%
-    );
-  }
-  37.5% {
-    clip-path: polygon(
-      0% 100%,
-      0% 30%,
-      5% 25%,
-      10% 35%,
-      18% 20%,
-      25% 25%,
-      33% 20%,
-      42% 30%,
-      50% 20%,
-      58% 35%,
-      67% 25%,
-      75% 30%,
-      82% 20%,
-      91% 35%,
-      100% 30%,
-      100% 100%
-    );
-  }
-  50% {
-    clip-path: polygon(
-      0% 100%,
-      0% 60%,
-      5% 70%,
-      10% 60%,
-      18% 50%,
-      25% 40%,
-      33% 30%,
-      42% 10%,
-      50% 20%,
-      58% 30%,
-      67% 40%,
-      75% 50%,
-      82% 60%,
-      91% 70%,
-      100% 60%,
-      100% 100%
-    );
-  }
-  62.5% {
-    clip-path: polygon(
-      0% 100%,
-      0% 80%,
-      5% 75%,
-      10% 85%,
-      18% 70%,
-      25% 80%,
-      33% 65%,
-      42% 75%,
-      50% 60%,
-      58% 50%,
-      67% 35%,
-      75% 25%,
-      82% 40%,
-      91% 20%,
-      100% 30%,
-      100% 100%
-    );
-  }
-  75% {
-    clip-path: polygon(
-      0% 100%,
-      0% 70%,
-      5% 85%,
-      10% 75%,
-      18% 90%,
-      25% 80%,
-      33% 85%,
-      42% 70%,
-      50% 80%,
-      58% 75%,
-      67% 85%,
-      75% 80%,
-      82% 90%,
-      91% 75%,
-      100% 80%,
-      100% 100%
-    );
-  }
-  87.5% {
-    clip-path: polygon(
-      0% 100%,
-      0% 55%,
-      5% 50%,
-      10% 55%,
-      18% 50%,
-      25% 55%,
-      33% 50%,
-      42% 55%,
-      50% 50%,
-      58% 55%,
-      67% 50%,
-      75% 55%,
-      82% 50%,
-      91% 55%,
-      100% 50%,
-      100% 100%
-    );
-  }
-  100% {
-    clip-path: polygon(
-      0% 100%,
-      0% 45%,
-      5% 40%,
-      10% 50%,
-      18% 35%,
-      25% 55%,
-      33% 40%,
-      42% 55%,
-      50% 35%,
-      58% 55%,
-      67% 40%,
-      75% 55%,
-      82% 35%,
-      91% 55%,
-      100% 45%,
-      100% 100%
-    );
-  }
-}
-</style>