v5.0.4.2 - saving user to airtable on login

pages/flights.vue

@@ -154,11 +154,11 @@
           <div
             v-if="
               selectedSchedule &&
-                selectedSchedule.fields &&
-                selectedSchedule.fields.IsExpedia &&
-                (selectedSchedule.fields.IsExpedia[0] === 'true' ||
+              selectedSchedule.fields &&
+              selectedSchedule.fields.IsExpedia &&
+              (selectedSchedule.fields.IsExpedia[0] === 'true' ||
                 selectedSchedule.fields.Carrier_Name ===
-                'Copper Valley Air Service')
+                  'Copper Valley Air Service')
             "
             class="form-row"
           >
@@ -171,11 +171,11 @@
           <div
             v-if="
               selectedSchedule &&
-                selectedSchedule.fields &&
-                selectedSchedule.fields.IsExpedia &&
-                (selectedSchedule.fields.IsExpedia[0] === 'true' ||
+              selectedSchedule.fields &&
+              selectedSchedule.fields.IsExpedia &&
+              (selectedSchedule.fields.IsExpedia[0] === 'true' ||
                 selectedSchedule.fields.Carrier_Name ===
-                'Copper Valley Air Service')
+                  'Copper Valley Air Service')
             "
             class="form-row"
           >
@@ -190,13 +190,13 @@
               selectedSchedule &&
               selectedSchedule.fields &&
               selectedSchedule.fields.Carrier_Name ===
-              'Copper Valley Air Service'
+                'Copper Valley Air Service'
             "
             class="alert--flights"
           >
             <h3>
-              You'll be flying with<br>
-              <strong>Copper Valley Air Service</strong>,<br>a great local
+              You'll be flying with<br />
+              <strong>Copper Valley Air Service</strong>,<br />a great local
               airline!
             </h3>
             <!-- <p>
@@ -214,7 +214,7 @@
               selectedSchedule &&
               selectedSchedule.fields &&
               selectedSchedule.fields.Carrier_Name ===
-              'Copper Valley Air Service'
+                'Copper Valley Air Service'
             "
             class="form-row form-row--two-columns"
           >
@@ -223,7 +223,7 @@
               name="firstName"
               placeholder="first name"
               v-model="firstName"
-              :class="[{'input--error': firstNameTouched && !firstName}]"
+              :class="[{ 'input--error': firstNameTouched && !firstName }]"
               @focus="firstNameTouched = true"
             />
             <input
@@ -231,7 +231,7 @@
               name="lastName"
               placeholder="last name"
               v-model="lastName"
-              :class="[{'input--error': lastNameTouched && !lastName}]"
+              :class="[{ 'input--error': lastNameTouched && !lastName }]"
               @focus="lastNameTouched = true"
             />
           </div>
@@ -240,7 +240,7 @@
               selectedSchedule &&
               selectedSchedule.fields &&
               selectedSchedule.fields.Carrier_Name ===
-              'Copper Valley Air Service'
+                'Copper Valley Air Service'
             "
             class="form-row"
           >
@@ -251,7 +251,7 @@
               v-model="email"
               required
               @input="validateEmail"
-              :class="[{'input--error': emailError}]"
+              :class="[{ 'input--error': emailError }]"
             />
             <span class="alert--error">
               {{ emailError }}
@@ -262,16 +262,17 @@
               selectedSchedule &&
               selectedSchedule.fields &&
               selectedSchedule.fields.Carrier_Name ===
-              'Copper Valley Air Service'
+                'Copper Valley Air Service'
             "
             class="form-row"
           >
-            <VuePhoneNumberInput 
-              v-model="phone" 
+            <VuePhoneNumberInput
+              v-model="phone"
               required
               @update="validatePhone"
               show-code-on-list
-              @phone-number-focused="phoneTouched = true" />
+              @phone-number-focused="phoneTouched = true"
+            />
             <!-- <input
               type="tel"
               name="tel"
@@ -301,16 +302,32 @@
               selectedSchedule &&
               selectedSchedule.fields &&
               selectedSchedule.fields.Carrier_Name ===
-              'Copper Valley Air Service'
+                'Copper Valley Air Service'
+            "
+            :disabled="
+              (emailError + phoneError).length > 0 || !firstName || !lastName
             "
-            :disabled="(emailError + phoneError).length > 0 || !firstName || !lastName"
             class="btn btn--primary"
             @click="contactCarrier"
           >
-            contact carrier <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="24" height="24" viewBox="0 0 24 24" stroke-width="3" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            contact carrier
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="icon icon-tabler icon-tabler-send"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              stroke-width="3"
+              stroke="#000000"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <line x1="10" y1="14" x2="21" y2="3" />
-              <path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
+              <path
+                d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5"
+              />
             </svg>
           </button>
           <div v-if="mailSent" class="alert--sent">
@@ -324,158 +341,181 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       schedules: [],
-      startingDate: '',
+      startingDate: "",
       selectedSchedule: {},
       selectedDays: [],
       selectedOrig: {},
       selectedDest: {},
       numAdult: 1,
       numChild: 0,
-      firstName: '',
-      lastName: '',
-      email: '',
-      phone: '',
+      firstName: "",
+      lastName: "",
+      email: "",
+      phone: "",
       firstNameTouched: false,
       lastNameTouched: false,
       emailTouched: false,
       phoneTouched: false,
-      emailError: '',
-      phoneError: '',
-      mailSent: false
-    }
+      emailError: "",
+      phoneError: "",
+      mailSent: false,
+    };
   },
-  async fetch () {
+  async fetch() {
     // console.log(this.$route.params.o)
 
-    const today = new Date().toLocaleDateString('en-CA')
+    const today = new Date().toLocaleDateString("en-CA");
 
-    const scheduleFetchFilterFormula = `AND(Is_Current="Yes",Origin_IATA="${this.$route.params.o}",Destination_IATA="${this.$route.params.d}",Effective_End>"${today}",SEARCH("${new Date(this.$route.params.departure).getUTCDay()}",Frequency)>0)`
+    const scheduleFetchFilterFormula = `AND(Is_Current="Yes",Origin_IATA="${
+      this.$route.params.o
+    }",Destination_IATA="${
+      this.$route.params.d
+    }",Effective_End>"${today}",SEARCH("${new Date(
+      this.$route.params.departure
+    ).getUTCDay()}",Frequency)>0)`;
     // console.log(scheduleFetchFilterFormula)
-    const scheduleFetchSort = '&sort[0][field]=Departure_TimeL&sort[0][direction]=asc'
+    const scheduleFetchSort =
+      "&sort[0][field]=Departure_TimeL&sort[0][direction]=asc";
 
-    const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Schedule?filterByFormula=${scheduleFetchFilterFormula}${scheduleFetchSort}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Authorization: 'Bearer keyJ2ht64ZSN57AG1'
+    const response = await fetch(
+      `https://api.airtable.com/v0/appiQwfVZixRgRICe/Schedule?filterByFormula=${scheduleFetchFilterFormula}${scheduleFetchSort}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+          Authorization: "Bearer keyJ2ht64ZSN57AG1",
+        },
       }
-    })
+    );
 
-    const data = await response.json()
+    const data = await response.json();
 
     // console.log(data)
 
-    this.schedules = [...data.records]
+    this.schedules = [...data.records];
+
+    const emailCookie = this.$cookies.get("email");
+    if (emailCookie) {
+      const newUser = {
+        fields: {
+          Email: emailCookie,
+          Date: new Date(),
+          Type: "portier-login",
+          Site: "https://iflylocal.com/",
+        },
+      };
+
+      const res = await fetch(
+        `https://api.airtable.com/v0/appiQwfVZixRgRICe/User/`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer keyJ2ht64ZSN57AG1",
+          },
+          body: JSON.stringify(newUser),
+        }
+      );
+
+      await res.json()
+    }
   },
-  mounted () {
+  mounted() {
+    console.log("asdf");
     //this.$segment.page('flights');
-    this.$segment.track('flights__mount-page', {
+    this.$segment.track("flights__mount-page", {
       origin: this.$route.params.o,
       destination: this.$route.params.d,
       departureDate: this.$route.params.departure,
     });
-    const emailCookie = this.$cookies.get('email')
-    if(emailCookie){
+
+    const emailCookie = this.$cookies.get("email");
+    if (emailCookie) {
       this.$segment.identify(emailCookie, {
-        email: emailCookie
+        email: emailCookie,
       });
-      const newUser =
-      {
-        fields: {
-          Email: emailCookie,
-          CreatedDate: new Date(),
-          Type: 'portier-login',
-          Site: 'https://iflylocal.com/'
-        }
-      }
-
-      const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/User/`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: 'Bearer keyJ2ht64ZSN57AG1'
-        },
-        body: JSON.stringify(newUser)
-      })
     }
   },
-  created () {
+  created() {
     // console.log(this.$route.path)
 
     if (this.$route && this.$route.params && this.$route.params.o) {
-      this.fetchSingleAirport(this.$route.params.o, true)
+      this.fetchSingleAirport(this.$route.params.o, true);
     }
     if (this.$route && this.$route.params && this.$route.params.d) {
-      this.fetchSingleAirport(this.$route.params.d, false)
+      this.fetchSingleAirport(this.$route.params.d, false);
     }
   },
   methods: {
-    formattedDate (date) {
-      const thisDate = new Date(date)
-      const month = thisDate.toLocaleString('en-us', { month: 'short' })
-      const year = ((thisDate.getUTCFullYear() !== new Date().getUTCFullYear()) ? ', ' + thisDate.getUTCFullYear() : '')
-      return month + ' ' + thisDate.getUTCDate() + year
+    formattedDate(date) {
+      const thisDate = new Date(date);
+      const month = thisDate.toLocaleString("en-us", { month: "short" });
+      const year =
+        thisDate.getUTCFullYear() !== new Date().getUTCFullYear()
+          ? ", " + thisDate.getUTCFullYear()
+          : "";
+      return month + " " + thisDate.getUTCDate() + year;
     },
-    daysList (days) {
-      const list = days.split(', ').map((day) => {
-        const name = day.toLowerCase().slice(0, -1)
+    daysList(days) {
+      const list = days.split(", ").map((day) => {
+        const name = day.toLowerCase().slice(0, -1);
 
-        let num
+        let num;
         switch (name) {
-          case 'su':
-            num = 0
-            break
+          case "su":
+            num = 0;
+            break;
 
-          case 'mo':
-            num = 1
-            break
+          case "mo":
+            num = 1;
+            break;
 
-          case 'tu':
-            num = 2
-            break
+          case "tu":
+            num = 2;
+            break;
 
-          case 'we':
-            num = 3
-            break
+          case "we":
+            num = 3;
+            break;
 
-          case 'th':
-            num = 4
-            break
+          case "th":
+            num = 4;
+            break;
 
-          case 'fr':
-            num = 5
-            break
+          case "fr":
+            num = 5;
+            break;
 
-          case 'sa':
-            num = 6
-            break
+          case "sa":
+            num = 6;
+            break;
 
           default:
-            break
+            break;
         }
         return {
           name,
-          num
-        }
-      })
+          num,
+        };
+      });
 
       return list.sort(function (a, b) {
-        return a.num - b.num
-      })
+        return a.num - b.num;
+      });
     },
-    goBack () {
-      this.$segment.track('flights__go_back', {
+    goBack() {
+      this.$segment.track("flights__go_back", {
         origin: this.$route.params.o,
         destination: this.$route.params.d,
         departureDate: this.$route.params.departure,
-      })
+      });
       //this.$router.go(-1)
       this.$router.push({
-          path: '/dates/' + this.$route.params.o + "/" + this.$route.params.d
-      })
+        path: "/dates/" + this.$route.params.o + "/" + this.$route.params.d,
+      });
     },
     // book2 (schedule) {
     //   if (schedule.fields.IsExpedia[0] === 'true') {
@@ -486,8 +526,8 @@ export default {
     //     window.open(schedule.fields['BookingLink (from Carriers_Alaska)'][0])
     //   }
     // },
-    book () {
-      this.$segment.track('flights__book', {
+    book() {
+      this.$segment.track("flights__book", {
         origin: this.selectedSchedule.fields.Origin_IATA[0],
         destination: this.selectedSchedule.fields.Destination_IATA[0],
         departureDate: this.$route.params.departure,
@@ -495,13 +535,15 @@ export default {
         arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
         numAdult: this.numAdult,
         numChild: this.numChild,
-        carrier: this.selectedSchedule.fields.Carrier_Name
-      })
+        carrier: this.selectedSchedule.fields.Carrier_Name,
+      });
 
-      window.open(`https://www.anrdoezrs.net/links/100449149/type/am/https://www.expedia.com/go/flight/search/oneway/${this.$route.params.departure}/${this.$route.params.departure}?langid=1033&FromAirport=${this.selectedSchedule.fields.Origin_IATA}&FromTime=${this.selectedSchedule.fields.Departure_TimeL}&ToTime=${this.selectedSchedule.fields.Arrival_TimeL}&ToAirport=${this.selectedSchedule.fields.Destination_IATA}&Class=3&NumAdult=${this.numAdult}&NumChild=${this.numChild}`)
+      window.open(
+        `https://www.anrdoezrs.net/links/100449149/type/am/https://www.expedia.com/go/flight/search/oneway/${this.$route.params.departure}/${this.$route.params.departure}?langid=1033&FromAirport=${this.selectedSchedule.fields.Origin_IATA}&FromTime=${this.selectedSchedule.fields.Departure_TimeL}&ToTime=${this.selectedSchedule.fields.Arrival_TimeL}&ToAirport=${this.selectedSchedule.fields.Destination_IATA}&Class=3&NumAdult=${this.numAdult}&NumChild=${this.numChild}`
+      );
     },
-    goToCarrier () {
-      this.$segment.track('flights__open_carrier', {
+    goToCarrier() {
+      this.$segment.track("flights__open_carrier", {
         origin: this.selectedSchedule.fields.Origin_IATA[0],
         destination: this.selectedSchedule.fields.Destination_IATA[0],
         departureDate: this.$route.params.departure,
@@ -509,14 +551,15 @@ export default {
         arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
         numAdult: this.numAdult,
         numChild: this.numChild,
-        carrier: this.selectedSchedule.fields.Carrier_Name
-      })
+        carrier: this.selectedSchedule.fields.Carrier_Name,
+      });
 
-      window.open(this.selectedSchedule.fields['BookingLink (from Carriers_Alaska)'][0])
+      window.open(
+        this.selectedSchedule.fields["BookingLink (from Carriers_Alaska)"][0]
+      );
     },
-    async contactCarrier () {
-      const newBooking =
-      {
+    async contactCarrier() {
+      const newBooking = {
         fields: {
           ArrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
           Carrier: this.selectedSchedule.fields.Carrier_Name,
@@ -531,64 +574,69 @@ export default {
           DepartureDate: this.$route.params.departure,
           NumAdult: this.numAdult,
           NumChild: this.numChild,
-        }
-      }
-
-      const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/CVAS_Booking/`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
         },
-        body: JSON.stringify(newBooking)
-      })
+      };
+
+      const res = await fetch(
+        `https://api.airtable.com/v0/appiQwfVZixRgRICe/CVAS_Booking/`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer key8ZVBxVZJL2Wp7y",
+          },
+          body: JSON.stringify(newBooking),
+        }
+      );
 
-      const json = await res.json()
+      const json = await res.json();
       //this.guests = { ...await json }
-      if(await json) {
-        this.mailSent = true
-        this.firstName = ''
-        this.lastName = ''
-        this.email = ''
-        this.phone = ''
-        this.firstNameTouched = false
-        this.lastNameTouched = false
-        this.emailTouched = false
-        this.phoneTouched = false
+      if (await json) {
+        this.mailSent = true;
+        this.firstName = "";
+        this.lastName = "";
+        this.email = "";
+        this.phone = "";
+        this.firstNameTouched = false;
+        this.lastNameTouched = false;
+        this.emailTouched = false;
+        this.phoneTouched = false;
       }
     },
-    selectSchedule (schedule) {
-      this.selectedSchedule = { ...schedule }
+    selectSchedule(schedule) {
+      this.selectedSchedule = { ...schedule };
 
-      this.$segment.track('flights__select_schedule', {
+      this.$segment.track("flights__select_schedule", {
         origin: this.selectedSchedule.fields.Origin_IATA[0],
         destination: this.selectedSchedule.fields.Destination_IATA[0],
         departureDate: this.$route.params.departure,
         departureTime: this.selectedSchedule.fields.Departure_TimeL,
         arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
-        carrier: this.selectedSchedule.fields.Carrier_Name
-      })
+        carrier: this.selectedSchedule.fields.Carrier_Name,
+      });
     },
-    clearSelectedSchedule () {
+    clearSelectedSchedule() {
       // console.log('clear')
-      this.startingDate = ''
-      this.selectedSchedule = {}
+      this.startingDate = "";
+      this.selectedSchedule = {};
     },
     async fetchSingleAirport(iata, isOrig) {
-      const airportFetchFilterFormula =
-        isOrig
-          ? `AND(Is_Origin=1,{IsCurrent-AsOrigin}="Yes",Airport_IATA="${iata}")`
-          : `AND(Is_Destination=1,{IsCurrent-AsDest}="Yes",Airport_IATA="${iata}")`
-
-      const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${airportFetchFilterFormula}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-          Authorization: 'Bearer keyJ2ht64ZSN57AG1'
+      const airportFetchFilterFormula = isOrig
+        ? `AND(Is_Origin=1,{IsCurrent-AsOrigin}="Yes",Airport_IATA="${iata}")`
+        : `AND(Is_Destination=1,{IsCurrent-AsDest}="Yes",Airport_IATA="${iata}")`;
+
+      const response = await fetch(
+        `https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${airportFetchFilterFormula}`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            Authorization: "Bearer keyJ2ht64ZSN57AG1",
+          },
         }
-      })
+      );
 
-      const mapData = await response.json()
+      const mapData = await response.json();
 
       const thisAirport = {
         iata: mapData.records[0].fields.Airport_IATA,
@@ -598,49 +646,53 @@ export default {
         name: mapData.records[0].fields.Airport_Name,
         municipality: mapData.records[0].fields.Municipality,
         type: mapData.records[0].fields.Type,
-        search: mapData.records[0].fields.Search_Field
-      }
+        search: mapData.records[0].fields.Search_Field,
+      };
 
       switch (isOrig) {
         case true:
-          this.selectedOrig = { ...thisAirport }
-          break
+          this.selectedOrig = { ...thisAirport };
+          break;
 
         case false:
-          this.selectedDest = { ...thisAirport }
-          break
+          this.selectedDest = { ...thisAirport };
+          break;
 
         default:
-          break
+          break;
       }
     },
     validateEmail() {
-      if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(this.email)) {
-          const emailArray = this.email.split('@')
-          const name = emailArray[0]
-          const fullDomain = emailArray[1]
-          const domainArray = fullDomain.split('.')
-          const domain = domainArray.slice(-2)[0]
-          const tld = domainArray.slice(-1)[0]
-          if(tld.length < 2 || domain.length < 2) {
-            this.emailError = 'your email isn\'t valid';
-          } else {
-            this.emailError = '';
-          }
+      if (
+        /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(
+          this.email
+        )
+      ) {
+        const emailArray = this.email.split("@");
+        const name = emailArray[0];
+        const fullDomain = emailArray[1];
+        const domainArray = fullDomain.split(".");
+        const domain = domainArray.slice(-2)[0];
+        const tld = domainArray.slice(-1)[0];
+        if (tld.length < 2 || domain.length < 2) {
+          this.emailError = "your email isn't valid";
+        } else {
+          this.emailError = "";
+        }
       } else {
-          this.emailError = 'your email isn\'t valid';
+        this.emailError = "your email isn't valid";
       }
     },
     validatePhone(data) {
-      this.phoneIsValid = data.isValid
+      this.phoneIsValid = data.isValid;
       if (data.isValid) {
-          this.phoneError = '';
+        this.phoneError = "";
       } else {
-          this.phoneError = 'your phone number isn\'t valid';
+        this.phoneError = "your phone number isn't valid";
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -954,7 +1006,18 @@ span.badge--avail {
   --stripe1: #ff69b433;
   --stripe2: #eee;
   // box-shadow: 0 0 0 0.2rem red;
-  background: linear-gradient(135deg, var(--stripe1) 25%, var(--stripe2) 25%, var(--stripe2) 50%, var(--stripe1) 50%, var(--stripe1) 75%, var(--stripe2) 75%, var(--stripe2) 100%), var(--stripe2);
+  background:
+    linear-gradient(
+      135deg,
+      var(--stripe1) 25%,
+      var(--stripe2) 25%,
+      var(--stripe2) 50%,
+      var(--stripe1) 50%,
+      var(--stripe1) 75%,
+      var(--stripe2) 75%,
+      var(--stripe2) 100%
+    ),
+    var(--stripe2);
   background-size: 56.57px 56.57px;
 }